/* =========================================================
   Horrible.Dev site stylesheet (full regen)
   - Keeps original tool-page styles + glitch keyframes
   - Adds landing/site layout + cards + footer + 88x31 badge
   ========================================================= */

/* ===== Original tool-page styles (scoped) ===== */
body.tool-page {
  background: repeating-linear-gradient(0deg, #0E0D0E 25%, #0E0D0E 50%, #171819 50%, #171819 75%);
  background-size: 10px 10px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Barlow", sans-serif;
  justify-content: center;
  align-items: center;
  color: white;
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  text-align: center;
  gap: 10px;
}

/* Font Awesome */
.main-nav { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.main-nav .cta { margin-left: 6px; }
.main-nav .social { display:flex; align-items:center; gap:12px; margin-left:14px; }
.main-nav .social a { color: var(--muted); line-height: 1; }
.main-nav .social a:hover { color:#fff; }
.main-nav .social i { font-size: 1.15rem; }

/* tighten on small screens */
@media (max-width: 640px) {
  .main-nav { gap:12px; }
  .main-nav .social { margin-left:0 }
}

form { margin-top: 10px; }
#result-container { margin-top: 15px; }

/* --- Original glitch effect (used by tool page) --- */
.glitch { position: relative; color: #fff; font-size: 80px; line-height: 1.05; }
.line:not(:first-child) { position: absolute; top: 0; left: 0; }

.line:nth-child(1){ animation: clip 3000ms -300ms linear infinite, glitch1 500ms -324ms linear infinite; }
.line:nth-child(2){ animation: clip 3000ms -600ms linear infinite, glitch2 500ms -429ms linear infinite; }
.line:nth-child(3){ animation: clip 3000ms -900ms linear infinite, glitch3 500ms -346ms linear infinite; }
.line:nth-child(4){ animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -757ms linear infinite; }
.line:nth-child(5){ animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -310ms linear infinite; }
.line:nth-child(6){ animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -545ms linear infinite; }
.line:nth-child(7){ animation: clip 3000ms -2100ms linear infinite, glitch7 500ms -610ms linear infinite; }
.line:nth-child(8){ animation: clip 3000ms -2400ms linear infinite, glitch8 500ms -771ms linear infinite; }
.line:nth-child(9){ animation: clip 3000ms -2700ms linear infinite, glitch9 500ms -51ms linear infinite; }
.line:nth-child(10){animation: clip 3000ms -3000ms linear infinite, glitch10 500ms -243ms linear infinite;}

@keyframes glitch1{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(-4px);color:#4E9A26}90%{transform:translateX(2px);color:#AC1212}95%{transform:translateX(-4px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch2{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(5px);color:#4E9A26}90%{transform:translateX(5px);color:#AC1212}95%{transform:translateX(-2px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch3{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(3px);color:#4E9A26}90%{transform:translateX(5px);color:#AC1212}95%{transform:translateX(2px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch4{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(1px);color:#4E9A26}90%{transform:translateX(5px);color:#AC1212}95%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch5{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(2px);color:#4E9A26}90%{transform:translateX(-3px);color:#AC1212}95%{transform:translateX(1px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch6{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(-4px);color:#4E9A26}90%{transform:translateX(1px);color:#AC1212}95%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch7{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(2px);color:#4E9A26}90%{transform:translateX(1px);color:#AC1212}95%{transform:translateX(3px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch8{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(4px);color:#4E9A26}90%{transform:translateX(-4px);color:#AC1212}95%{transform:translateX(0);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch9{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(0);color:#4E9A26}90%{transform:translateX(5px);color:#AC1212}95%{transform:translateX(5px);color:#fff}100%{transform:translateX(0)}}
@keyframes glitch10{0%{transform:translateX(0)}80%{transform:translateX(0);color:#fff}85%{transform:translateX(-3px);color:#4E9A26}90%{transform:translateX(4px);color:#AC1212}95%{transform:translateX(-1px);color:#fff}100%{transform:translateX(0)}}

@keyframes clip{
  0%{clip-path:polygon(0 100%,100% 100%,100% 120%,0 120%)}
  100%{clip-path:polygon(0 -20%,100% -20%,100% 0%,0 0)}
}

/* Make links white on the tool page */
body.tool-page a { color: #fff; }

/* =========================================================
   Site/Blog/Admin defaults (apply everywhere that is NOT tool-page)
   ========================================================= */

:root{
  --bg:#1a1a1a;
  --panel:#2a2a2a;
  --text:#ccc;
  --muted:#999;
  --accent:#66ff99;
  --line:#333;
  --btn:#444;
  --btn2:#555;
  --warn:#ffcc66;
}

*{ box-sizing:border-box; }

body:not(.tool-page){
  background: #1a1a1a !important;
  color: #ccc !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow: auto !important;
  display: block !important;
  font-family: Arial, sans-serif !important;
}

body:not(.tool-page) a{ color:#ccc; text-decoration:none; }
body:not(.tool-page) a:hover{ color:#fff; }

.container{ width:100%; max-width:1100px; margin:0 auto; padding:24px; }

header{
  position: sticky;
  top: 0;
  background: rgba(26,26,26,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  flex-wrap:wrap;
}

.brand{ display:flex; align-items:baseline; gap:10px; }
.brand .logotype{ font-weight:800; letter-spacing:.5px; }
.badge{
  font-size:.8rem;
  color:var(--muted);
  border:1px solid var(--line);
  padding:3px 8px;
  border-radius:999px;
}

/* nav / social */
body:not(.tool-page) .main-nav{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
body:not(.tool-page) .main-nav a{
  font-size:.95rem;
  color:var(--muted);
  padding:8px 10px;
  border-radius:10px;
}
body:not(.tool-page) .main-nav a:hover{ background:rgba(255,255,255,.05); color:#fff; }

body:not(.tool-page) .social{
  display:inline-flex;
  gap:12px;
  align-items:center;
  margin-left:4px;
}
body:not(.tool-page) .social a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
  color:var(--muted);
  line-height:1;
}
body:not(.tool-page) .social a:hover{
  color:#fff;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}
body:not(.tool-page) .social i{ font-size:1.15rem; }

.cta{
  padding:10px 14px;
  background:var(--btn);
  color:#fff !important;
  border-radius:12px;
  border:1px solid var(--btn2);
  display:inline-block;
  font-weight:700;
}
.cta:hover{ background:#666; }

section{ padding:26px 0; border-top:1px solid var(--line); }
h1, h2, h3{ margin:0 0 8px; }
h2{ font-size:1.55rem; }

.grid{ display:grid; gap:16px; }
.grid.cards{ grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
}
.card h3{ margin:0 0 6px; font-size:1.08rem; color:var(--text); }
.card p{ margin:0; color:var(--muted); font-size:.98rem; line-height:1.45; }
.card p + p{ margin-top:10px; }

.notice{
  margin-top:16px;
  border-left:3px solid var(--accent);
  padding:10px 12px;
  background:rgba(102,255,153,.06);
  border-radius:10px;
  color:#cfcfcf;
}
.notice.warn{
  border-left-color:var(--warn);
  background:rgba(255,204,102,.06);
}

.hr{ height:1px; background:var(--line); margin:10px 0 0; }

.tiny{ font-size:.92rem; color:var(--muted); }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:#e0e0e0;
}
.pillrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.pill{
  font-size:.86rem;
  color:var(--muted);
  border:1px solid var(--line);
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.2);
}
.pill strong{ color:#d8d8d8; font-weight:800; }
.pill a{ color:#d8d8d8; }
.pill a:hover{ color:#fff; }

.cta-row{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }

.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
  padding:34px 0 18px;
}

.kicker{
  color:var(--accent);
  margin-bottom:10px;
  font-weight:800;
}

.panel{
  background:var(--panel);
  border-radius:14px;
  padding:18px;
  border:1px solid var(--line);
}

/* ===== IMPORTANT: hero glitch must stack lines, but do not break tool-page glitches =====
   Scope it ONLY to #glitch-text so other .line usages aren't affected. */
body:not(.tool-page) #glitch-text.glitch{
  position: relative;
  display: inline-block;
  font-size: 64px; /* tweak to taste */
  color: #fff;
  line-height: 1.05;
}
body:not(.tool-page) #glitch-text.glitch .line{
  display:block;
  white-space:nowrap;
}
body:not(.tool-page) #glitch-text.glitch .line:not(:first-child){
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

/* Use the same animation recipe for however many lines you render (currently 6). */
body:not(.tool-page) #glitch-text.glitch .line:nth-child(1){ animation: clip 3000ms -300ms linear infinite, glitch1 500ms -324ms linear infinite; }
body:not(.tool-page) #glitch-text.glitch .line:nth-child(2){ animation: clip 3000ms -600ms linear infinite, glitch2 500ms -429ms linear infinite; }
body:not(.tool-page) #glitch-text.glitch .line:nth-child(3){ animation: clip 3000ms -900ms linear infinite, glitch3 500ms -346ms linear infinite; }
body:not(.tool-page) #glitch-text.glitch .line:nth-child(4){ animation: clip 3000ms -1200ms linear infinite, glitch4 500ms -757ms linear infinite; }
body:not(.tool-page) #glitch-text.glitch .line:nth-child(5){ animation: clip 3000ms -1500ms linear infinite, glitch5 500ms -310ms linear infinite; }
body:not(.tool-page) #glitch-text.glitch .line:nth-child(6){ animation: clip 3000ms -1800ms linear infinite, glitch6 500ms -545ms linear infinite; }

@media (prefers-reduced-motion: reduce){
  body:not(.tool-page) #glitch-text.glitch .line{ animation:none !important; }
}

.split{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:16px;
}

footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  text-align:center;
  color:var(--muted);
}

.footer-badges{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

/* 88x31 retro "Built w/ Notepad" badge */
.badge88{
  width:88px;
  height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:9px;
  line-height:1;
  letter-spacing:.2px;
  text-transform:uppercase;

  color:#111;
  background:linear-gradient(#e6e6e6, #bdbdbd);
  border:1px solid #6f6f6f;

  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    inset -1px -1px 0 rgba(0,0,0,.35);

  border-radius:2px;
  user-select:none;
  -webkit-font-smoothing:none;
}

.badge88 span{
  display:inline-block;
  padding:0 4px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}

.badge88:hover{ filter:brightness(1.05); }

/* Forms (site/blog/admin) */
input, textarea, select{
  background:#111;
  color:#eee;
  border:1px solid #444;
  border-radius:8px;
  padding:10px;
  width:100%;
}
label{ display:block; margin:6px 0 4px; color:#999; font-size:.95rem; }

/* Blog bits */
.blog-meta{ color:#999; font-size:.9rem; margin:6px 0 14px; }
.post-excerpt{ color:#aaa; }

/* Admin tables */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th, td{ padding:8px 6px; border-top:1px solid #333; }
th{ text-align:left; color:#bbb; }

/* Contact right column */
.contact-card{ display:flex; flex-direction:column; gap:12px; }
.contact-card h3{ margin:0; font-size:1.1rem; color:#fff; }
.contact-card p{ margin:0; color:#bbb; line-height:1.4; }
.contact-card a{ color:#ccc; }
.contact-card .cta{
  margin-top:4px;
  padding:10px 18px;
  background:#444;
  border:1px solid #555;
  border-radius:8px;
  text-align:center;
}
.contact-card .cta:hover{ background:#666; }

/* Responsiveness */
@media (max-width: 900px){
  .nav{ gap:10px; }
  .grid.cards{ grid-template-columns:1fr; }
  .hero{ grid-template-columns:1fr; }
  .split{ grid-template-columns:1fr; }
}