:root{
  --bg:#080808;
  --panel:#111;
  --panel2:#171717;
  --text:#f7f7f7;
  --muted:#8f8f8f;
  --accent:#ff7a00;
  --accent2:#ff9d3f;
  --line:#292929;
  --danger:#ff4d4d;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text); min-height:100vh;
}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.12;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
}
.sidebar{
  position:fixed; left:0; top:0; bottom:0; width:250px;
  background:rgba(10,10,10,.94); border-right:1px solid var(--line);
  padding:22px 16px; display:flex; flex-direction:column; z-index:5;
  backdrop-filter:blur(16px);
}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px;padding:0 8px}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:27px;background:linear-gradient(135deg,var(--accent),#ffb15c);box-shadow:0 0 35px rgba(255,122,0,.25)}
.brand h1{font-size:19px;margin:0}.brand span{font-size:12px;color:var(--muted)}
nav{display:flex;flex-direction:column;gap:7px}
.nav-btn{
  border:0;background:transparent;color:#cfcfcf;padding:12px 13px;border-radius:12px;
  text-align:left;font-size:14px;cursor:pointer;display:flex;gap:10px;align-items:center;
}
.nav-btn:hover,.nav-btn.active{background:linear-gradient(90deg,rgba(255,122,0,.18),rgba(255,122,0,.05));color:#fff}
.nav-btn.active{box-shadow:inset 3px 0 0 var(--accent)}
.sidebar-footer{margin-top:auto;color:var(--muted);font-size:11px;display:flex;gap:8px;align-items:center;padding:8px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#45d483;box-shadow:0 0 12px #45d483}
main{margin-left:250px;padding:26px 32px 60px;position:relative;z-index:1}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.eyebrow{color:var(--accent);font-size:11px;font-weight:800;letter-spacing:1.6px;margin:0 0 3px}
.topbar h2,.section-title h3{margin:0;font-size:26px}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:#fff;cursor:pointer}
.page{display:none}.page.active{display:block;animation:fade .22s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.hero{
  min-height:210px;border:1px solid #402000;border-radius:24px;padding:30px;
  background:radial-gradient(circle at 90% 20%,rgba(255,122,0,.26),transparent 36%),linear-gradient(145deg,#17110c,#0d0d0d 60%);
  display:flex;align-items:center;justify-content:space-between;overflow:hidden;box-shadow:var(--shadow)
}
.hero h3{font-size:34px;max-width:650px;margin:12px 0 8px}.hero p{color:#bcbcbc;max-width:650px;margin:0;line-height:1.6}
.tag{display:inline-block;border:1px solid rgba(255,122,0,.4);color:#ffad61;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800}
.hero-orb{font-size:92px;filter:drop-shadow(0 20px 30px rgba(255,122,0,.25));transform:rotate(-8deg)}
.grid{display:grid;gap:16px;margin-top:16px}.cards-4{grid-template-columns:repeat(4,1fr)}.two{grid-template-columns:1fr 1fr}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card h3{margin:0}
.stat{display:flex;flex-direction:column;gap:5px}.stat span{font-size:20px}.stat strong{font-size:25px}.stat small{color:var(--muted)}
.quick-grid,.mood-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.quick,.mood{border:1px solid var(--line);background:#0c0c0c;color:#eee;padding:13px;border-radius:12px;cursor:pointer}.quick:hover,.mood:hover{border-color:var(--accent);transform:translateY(-1px)}
.muted{color:var(--muted);line-height:1.5}
.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border:0;color:#111;font-weight:900;padding:11px 15px;border-radius:11px;cursor:pointer}
.primary:hover{filter:brightness(1.05)}.full{width:100%;margin-top:10px}
label{display:block;color:#cfcfcf;font-size:12px;margin-bottom:13px}
input,select,textarea{
  width:100%;margin-top:7px;padding:12px 13px;border-radius:11px;border:1px solid var(--line);
  background:#0b0b0b;color:#fff;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.perf{display:flex;flex-direction:column;gap:10px}.perf div{display:flex;justify-content:space-between;padding:12px;border-radius:12px;background:#0b0b0b;border:1px solid #202020}.perf b{color:#ff9a3c}
.inline-form{display:grid;grid-template-columns:1.6fr 1fr auto;gap:10px;align-items:end}.inline-form input,.inline-form select{margin:0}
.game-list,.stack{display:grid;gap:12px;margin-top:16px}
.game-card,.row-item{background:linear-gradient(180deg,#151515,#0f0f0f);border:1px solid var(--line);border-radius:15px;padding:15px 16px;display:flex;align-items:center;justify-content:space-between}
.game-card h4,.row-item h4{margin:0 0 4px}.game-card small,.row-item small{color:var(--muted)}
.badge{font-size:11px;padding:6px 8px;border-radius:999px;background:rgba(255,122,0,.14);color:#ffac5f;border:1px solid rgba(255,122,0,.25)}
.actions{display:flex;gap:8px}.danger{background:#2a1111;border:1px solid #4a1c1c;color:#ff7f7f;padding:8px 10px;border-radius:9px;cursor:pointer}
.output-box{min-height:170px;background:#0b0b0b;border:1px dashed #333;border-radius:14px;padding:16px;white-space:pre-wrap;line-height:1.55}
.total-card{display:flex;flex-direction:column;justify-content:center}.total-card strong{font-size:35px;color:#ff9a3c;margin:8px 0}
.drop-card{text-align:center;padding:34px}.drop-icon{font-size:48px}.file-label{display:inline-block;margin-top:10px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.gallery-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.chat-shell{padding:0;overflow:hidden}.chat-messages{min-height:420px;max-height:58vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:10px}
.bubble{max-width:78%;padding:12px 14px;border-radius:15px;line-height:1.5}.bot{background:#1a1a1a;border:1px solid var(--line);align-self:flex-start}.user{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;font-weight:700;align-self:flex-end}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px;border-top:1px solid var(--line);background:#0c0c0c}.chat-form input{margin:0}
.toast{position:fixed;right:24px;bottom:24px;background:#fff;color:#111;padding:11px 14px;border-radius:11px;font-weight:800;opacity:0;transform:translateY(20px);pointer-events:none;transition:.2s;z-index:20}.toast.show{opacity:1;transform:none}
body.light{--bg:#f4f4f4;--panel:#fff;--panel2:#fff;--text:#161616;--muted:#686868;--line:#ddd;--shadow:0 16px 45px rgba(0,0,0,.08)}
body.light .sidebar{background:rgba(255,255,255,.92)}body.light .nav-btn{color:#444}body.light .nav-btn:hover,body.light .nav-btn.active{color:#111}
body.light input,body.light select,body.light textarea,body.light .quick,body.light .mood,body.light .perf div,body.light .output-box{background:#f8f8f8;color:#111}
body.light .icon-btn{color:#111}.body.light .game-card{background:#fff}
@media(max-width:900px){
  .sidebar{width:76px}.brand div:last-child,.nav-btn span,.sidebar-footer span{display:none}.brand{justify-content:center;padding:0}.nav-btn{justify-content:center;font-size:18px}
  main{margin-left:76px;padding:20px}.cards-4{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.hero h3{font-size:26px}.hero-orb{font-size:60px}.gallery-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .sidebar{left:0;right:0;top:auto;height:68px;width:auto;bottom:0;flex-direction:row;padding:7px;overflow-x:auto}.brand,.sidebar-footer{display:none}nav{flex-direction:row;width:max-content}.nav-btn{min-width:52px;padding:10px}
  main{margin-left:0;padding:16px 14px 90px}.cards-4{grid-template-columns:1fr 1fr}.hero{padding:22px}.hero-orb{display:none}.hero h3{font-size:24px}.inline-form{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr 1fr}.topbar h2{font-size:22px}
}

.streamer-focus{border-color:#5b2c00;background:radial-gradient(circle at 90% 0%,rgba(255,122,0,.12),transparent 35%),linear-gradient(180deg,var(--panel2),var(--panel))}
.progress-wrap{height:10px;background:#0b0b0b;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:14px 0 8px}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:.25s}
.mission-box{background:#0b0b0b;border:1px solid #2a2a2a;border-radius:14px;padding:18px;line-height:1.6;min-height:130px}
.growth-list{display:grid;gap:10px}
.growth-list div{background:#0c0c0c;border:1px solid #222;padding:12px;border-radius:12px;display:flex;flex-direction:column;gap:5px}
.growth-list span{color:var(--muted);font-size:13px;line-height:1.45}
.idea-stack{display:grid;gap:10px}
.idea-item{background:#0b0b0b;border:1px solid #242424;border-radius:12px;padding:12px}
.idea-item b{display:block;margin-bottom:5px}
.idea-item span{color:var(--muted);font-size:13px;line-height:1.45}
.goal-list{display:grid;gap:10px}
.goal{display:flex;align-items:center;gap:10px;background:#0b0b0b;border:1px solid #232323;padding:12px;border-radius:12px}
.goal input{width:auto;margin:0}
.goal.done{opacity:.55;text-decoration:line-through}
body.light .mission-box,body.light .growth-list div,body.light .idea-item,body.light .goal,body.light .progress-wrap{background:#f7f7f7}

.creator-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px;margin-bottom:18px;border:1px solid #3b2109;border-radius:20px;background:radial-gradient(circle at 80% 20%,rgba(255,126,0,.22),transparent 30%),linear-gradient(135deg,#15100b,#0b0b0b)}
.creator-hero h2{font-size:clamp(24px,4vw,42px);margin:4px 0 8px}.creator-hero p{color:var(--muted)}
.streak-card{min-width:150px;text-align:center;padding:18px;border:1px solid #4a2a0b;border-radius:18px;background:rgba(0,0,0,.35)}
.streak-card span,.streak-card small{display:block;color:var(--muted);font-size:11px}.streak-card b{display:block;font-size:44px;color:var(--accent);line-height:1.1}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.stats-grid div{padding:16px;border:1px solid #252525;border-radius:14px;background:#0b0b0b;text-align:center}.stats-grid b{display:block;font-size:28px;color:var(--accent)}.stats-grid span{font-size:12px;color:var(--muted)}
.small-note{font-size:11px;text-align:center;margin-top:10px}
@media(max-width:700px){.creator-hero{align-items:flex-start;flex-direction:column}.streak-card{width:100%}}