/* CrackTools Theme: CRT + neon warez vibes */
:root{
  --bg:#0b0f12;
  --bg2:#0f1419;
  --fg:#d7ffe0;
  --muted:#8ee0a1;
  --accent:#35ff8a;
  --accent2:#50c8ff;
  --danger:#ff4d6d;
  --card:#121820;
  --grid:#0f1a22;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 10% 10%, #0e151b 0, var(--bg) 45%, #070a0d 100%);
  color:var(--fg); font:14px/1.6 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-shadow:0 0 1px rgba(0,255,170,.3);
}
.container{width:min(1100px, 92vw); margin:0 auto;}

.site-header{position:sticky; top:0; z-index:5; backdrop-filter:blur(6px); background:rgba(10,14,18,.5); border-bottom:1px solid #132029}
.site-header .brand{padding:10px 12px}
.site-header .ascii{color:var(--accent); letter-spacing:.5px}
.nav{display:flex; gap:8px; padding:10px 12px 12px}
.nav-link{color:var(--muted); text-decoration:none; padding:6px 10px; border:1px solid #15302a; border-radius:6px; background:linear-gradient(180deg,#0d1419,#0a1216)}
.nav-link:hover{color:var(--fg); border-color:#1f5649}
.nav-link.active{color:#001b10; background:linear-gradient(180deg, var(--accent), #20d874); border-color:#24d07a; text-shadow:none}

.hero{padding:40px 0 10px}
.hero .crt{border:1px solid #1a2a34; border-radius:10px; padding:28px; background:linear-gradient(180deg,#0e141a,#0b1016)}
.hero h1{margin:0 0 10px; font-size:24px; color:var(--accent)}
.hero .sub{color:#9ad3ff}

.houses{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; padding:22px 0 40px}
.house{display:block; border:1px solid #1a2a34; border-radius:12px; padding:16px; background:linear-gradient(180deg,#0e141a,#0b1016); color:var(--fg); text-decoration:none}
.house:hover{border-color:#2a4455; box-shadow:0 0 0 1px #2a4455 inset}
.house .icon{font-size:28px; margin-bottom:6px}
.house h2{margin:0 0 6px; font-size:18px; color:var(--accent)}
.house p{margin:0; color:var(--muted)}

.card{border:1px solid #1a2a34; border-radius:10px; background:linear-gradient(180deg,#0e141a,#0b1016); padding:16px}
.row{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width:860px){.row{grid-template-columns:1fr}}
.label{display:block; color:var(--muted); margin-bottom:6px}
.input, textarea, select{width:100%; background:#0a1216; color:var(--fg); border:1px solid #1a2a34; border-radius:8px; padding:10px}
button{background:linear-gradient(180deg,#12221c,#0e1b15); color:var(--fg); border:1px solid #1a2a34; border-radius:8px; padding:10px 14px; cursor:pointer}
button:hover{border-color:#215643}
button.primary{background:linear-gradient(180deg, var(--accent), #20d874); color:#001b10; border-color:#22c56b; text-shadow:none}
button.danger{background:linear-gradient(180deg,#ff6b8a,#ff4d6d); border-color:#ff4d6d; color:#2a0007}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.preview{border:1px dashed #224c3e; border-radius:10px; padding:10px; background:#0a1318}
.small{font-size:12px; color:var(--muted)}
.fineprint{font-size:12px; color:#8c9aa6}

.site-footer{border-top:1px solid #1a2a34; padding:16px 0; margin-top:40px; background:linear-gradient(180deg,#0b1016,#0a0e12)}

/* CRT effects */
.crt-overlay{pointer-events:none; position:fixed; inset:0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 3px), radial-gradient(1600px 1200px at 50% 0%, rgba(255,255,255,0.02), transparent 40%); mix-blend-mode:overlay; opacity:.5; z-index:1; animation: crt-flicker 3.4s infinite ease-in-out}
@keyframes crt-flicker{ 0%{opacity:.46} 40%{opacity:.52} 50%{opacity:.48} 60%{opacity:.54} 100%{opacity:.47} }

/* Feverdream animated canvases */
#fd-starfield, #fd-rasterbars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block }
#fd-rasterbars{ mix-blend-mode:screen; opacity:0.35 }

/* Logo glow */
.ascii{ text-shadow: 0 0 6px rgba(53,255,138,.4), 0 0 12px rgba(80,200,255,.25); animation: ascii-glow 2.6s ease-in-out infinite alternate }
@keyframes ascii-glow{ from{ filter: drop-shadow(0 0 0px var(--accent)); } to{ filter: drop-shadow(0 0 10px var(--accent2)); } }

/* Glitch title */
.glitch{ position:relative; display:inline-block; text-transform:uppercase; letter-spacing:1px }
.glitch::before, .glitch::after{ content:attr(data-text); position:absolute; left:0; top:0 }
.glitch::before{ color:var(--accent2); mix-blend-mode:screen; opacity:.6; animation: glitch-shift 1.5s infinite, glitch-clip 2s steps(20) infinite }
.glitch::after{ color:var(--accent); mix-blend-mode:screen; opacity:.6; animation: glitch-shift 1.7s infinite reverse, glitch-clip 2.2s steps(18) infinite reverse }
@keyframes glitch-shift{ 0%{ transform:translate3d(0,0,0) } 20%{ transform:translate3d(2px,0,0) } 40%{ transform:translate3d(-2px,0,0) } 60%{ transform:translate3d(1px,0,0) } 80%{ transform:translate3d(-1px,0,0) } 100%{ transform:translate3d(0,0,0) } }
@keyframes glitch-clip{ 0%{ clip-path: inset(0 0 85% 0) } 10%{ clip-path: inset(10% 0 75% 0) } 20%{ clip-path: inset(20% 0 60% 0) } 30%{ clip-path: inset(40% 0 40% 0) } 40%{ clip-path: inset(60% 0 20% 0) } 50%{ clip-path: inset(80% 0 0 0) } 60%{ clip-path: inset(60% 0 20% 0) } 70%{ clip-path: inset(40% 0 40% 0) } 80%{ clip-path: inset(20% 0 60% 0) } 90%{ clip-path: inset(10% 0 75% 0) } 100%{ clip-path: inset(0 0 85% 0) } }

.tools-wrap{position:relative; z-index:2}

.code{font-family:inherit; white-space:pre-wrap; background:#0a1216; border:1px solid #1a2a34; border-radius:8px; padding:10px}

.range{width:100%}