:root{
  --bg:#0b0d12; --panel:#121620; --muted:#a7b0c0; --text:#e8edf6; --brand:#6aa3ff; --ok:#41d392; --warn:#ffb454;
  --ring:rgba(106,163,255,.35);
  --accent-pink:#ff6ad5; --accent-cyan:#5ffbf1; --accent-yellow:#ffe66d;
}
/* Light theme overrides */
body.light{
  /* Increased contrast + calmer palette for readability */
  --bg:#f4f7fa; --panel:#ffffff; --muted:#586170; --text:#19202b; --brand:#2b65c2; --ok:#177848; --warn:#b25d00;
  --ring:rgba(43,101,194,.35);
  --accent-pink:#d957b3; --accent-cyan:#3cb9b0; --accent-yellow:#d6b23a;
}
* { box-sizing: border-box; }
html,body { height:100%; }
body{
  margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:var(--text); background:
      radial-gradient(1200px 800px at 10% -10%, #12203a 0%, transparent 60%),
      repeating-linear-gradient(135deg, #101723 0 40px, #0d131c 40px 80px),
      var(--bg);
  overflow-x:hidden;
}
body.light{background:linear-gradient(180deg,#f9fbfd,#eef2f7);} /* simpler flat for clarity */
a { color:var(--brand); text-decoration:none; }
header{max-width:1100px;margin:24px auto 0;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;gap:10px;align-items:center;font-weight:700}
.logo-badge{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#6aa3ff,#9b7bff);}
.wrap{max-width:1100px;margin:0 auto;padding:32px 20px 80px;}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:16px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35);}
body.light .card{background:#ffffff;border:1px solid #dbe3ec;box-shadow:0 4px 20px -4px rgba(0,25,55,.08),0 1px 2px rgba(0,25,55,.08);}
.panel{padding:22px;}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(255,255,255,.03)}
body.light .tag{border-color:#d0dae6;background:#f2f6fa;color:var(--muted)}
.tag.ok{border-color:rgba(65,211,146,.5); color:#c8ffe6}
.tag.warn{border-color:rgba(255,180,84,.5); color:#ffe8c6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:18px}
.proj{position:relative;overflow:hidden}
.proj h3{margin:8px 0 2px;font-size:16px}
.proj p{margin:0;color:var(--muted);font-size:13px}
.pill{position:absolute;top:10px;right:10px;font-size:12px;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08)}
body.light .pill{background:#edf2f7;border-color:#d2dbe5;color:#445063}
.btn{display:inline-flex;gap:8px;align-items:center;border-radius:12px;border:1px solid rgba(255,255,255,.14);padding:10px 14px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:var(--text);cursor:pointer;transition:transform .04s ease,box-shadow .1s ease,border-color .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.35);border-color:var(--ring)}
.btn.primary{background:linear-gradient(180deg,rgba(106,163,255,.35),rgba(106,163,255,.12));border-color:rgba(106,163,255,.5)}
body.light .btn.primary{background:linear-gradient(180deg,rgba(43,101,194,.55),rgba(43,101,194,.25));}
body.light .btn{background:linear-gradient(180deg,#ffffff,#f0f4f9);border-color:#cad5e2;color:var(--text)}
.btn.row{width:100%;justify-content:center}
.muted{color:var(--muted)}
.footer{opacity:.7;margin-top:26px;font-size:13px}
.split{display:flex;gap:10px;flex-wrap:wrap}
.input,textarea,select{width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(2,8,20,.6);color:var(--text);outline:none;}
.input:focus,textarea:focus,select:focus{border-color:var(--ring);box-shadow:0 0 0 4px var(--ring)}
.lock{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-radius:3px;position:relative;margin-right:6px}
.lock:before{content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:10px;height:8px;border:2px solid currentColor;border-bottom:0;border-radius:6px 6px 0 0}
.sim {margin-top:10px;font-size:12px;color:var(--muted)}
.admin-table{width:100%;border-collapse:collapse;margin-top:20px;font-size:14px}
.admin-table th,.admin-table td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;background:rgba(255,255,255,.08)}
.badge.live{background:rgba(65,211,146,.25);color:#c8ffe6}
.badge.hidden{background:rgba(255,180,84,.25);color:#ffe8c6}
.loading{opacity:.6;pointer-events:none}
.status-line{font-size:12px;margin-top:10px;color:var(--muted)}

/* Gate (idea incubator entrance) */
.gate{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(106,163,255,.15),rgba(0,0,0,.85));backdrop-filter:blur(14px);z-index:50;transition:opacity .9s ease, visibility .9s;}
body.light .gate{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(230,238,246,.92));}
body.entered .gate{opacity:0;visibility:hidden;pointer-events:none}
.cave-mouth{position:relative;width:min(600px,90%);height:260px;border:2px solid rgba(255,255,255,.15);border-radius:40px;padding:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2));box-shadow:0 10px 40px -10px #000,0 0 0 4px rgba(106,163,255,.1);}
.neon{font-size:clamp(1.4rem,4vw,2.2rem);font-weight:600;text-align:center;line-height:1.15;background:linear-gradient(90deg,var(--brand),var(--accent-pink),var(--accent-cyan));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(106,163,255,.4));animation:flicker 6s linear infinite;}
@keyframes flicker{0%,97%,100%{opacity:1} 98%{opacity:.2} 99%{opacity:.6}}
.enter{margin-top:34px}
.spark{position:absolute;width:14px;height:14px;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.1));border-radius:50%;animation:rise 8s linear infinite;opacity:.8}
.spark:nth-child(odd){animation-duration:10s}
@keyframes rise{0%{transform:translateY(60px) scale(.4);}70%{opacity:.9}100%{transform:translateY(-320px) scale(1);opacity:0}}

/* Floating idea orbs */
.orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.05));mix-blend-mode:overlay;filter:blur(1px);animation:float 18s ease-in-out infinite;opacity:.07}
.orb.small{width:80px;height:80px;}
.orb.med{width:160px;height:160px;}
.orb.big{width:260px;height:260px;}
@keyframes float{0%,100%{transform:translateY(-30px) translateX(0)}50%{transform:translateY(40px) translateX(40px)}}

/* Idea pipeline timeline */
.pipeline{margin:70px auto 30px;position:relative;padding:10px 0 0;}
.pipeline-track{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;position:relative;}
.stage{flex:1 1 120px;min-width:120px;position:relative;padding:14px 12px 16px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.15));text-align:center;font-size:.85rem;display:flex;flex-direction:column;gap:6px;}
body.light .stage{background:#fff;border-color:#d9e1ea}
.stage h3{margin:0;font-size:.9rem;letter-spacing:.5px;font-weight:600}
.stage .emoji{font-size:1.4rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.stage.active{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring),0 10px 25px -8px rgba(0,0,0,.5)}
.stage.active h3{color:var(--brand)}
.stage::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:22px;background:linear-gradient(var(--brand),transparent);opacity:.4;transform:translateX(-50%)}
.stage:last-child::after{display:none}

@media (max-width:900px){.pipeline-track{flex-direction:row}}

/* Rotating tagline caret */
.tagline-rotator{display:inline-block;min-width:6ch;position:relative}
.tagline-rotator::after{content:"";position:absolute;right:-4px;top:4px;width:2px;height:calc(100% - 8px);background:var(--brand);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

/* Accessibility & motion */
@media (prefers-reduced-motion:reduce){
  .gate,.orb,.spark,.stage,.neon{animation:none !important}
}

/* Floating controls */
.controls{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.controls button{backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.25));border:1px solid rgba(255,255,255,.18);padding:10px 14px;border-radius:14px;cursor:pointer;color:var(--text);font-size:13px;display:flex;align-items:center;gap:8px;transition:background .2s,border-color .2s}
.controls button:hover{border-color:var(--ring)}
body.light .controls button{background:#ffffffcc;border-color:#cbd6e2;box-shadow:0 4px 14px -6px rgba(0,40,70,.18)}
.volume-wrap{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.volume-wrap input[type=range]{width:110px; accent-color: var(--brand);}
.controls button .dot{width:10px;height:10px;border-radius:50%;background:var(--accent-pink);box-shadow:0 0 0 4px rgba(255,106,213,.3);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.7);opacity:.7}50%{transform:scale(1);opacity:1}}
body.light .neon{filter:drop-shadow(0 0 4px rgba(47,109,206,.45))}
