:root{
  color-scheme:dark;
  --bg:#080d13;--panel:#101821;--panel2:#121d28;--line:rgba(255,255,255,.08);--text:#f4f7fa;--muted:#8c9bad;
  --blue:#5caeff;--cyan:#52e6ff;--green:#57e6a8;--purple:#b277ff;--red:#ff6d6d;--gold:#f4c454;
  --shadow:0 18px 55px rgba(0,0,0,.38);--radius:18px
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -15%,#172636 0,#0a1017 34%,#080d13 68%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:240px minmax(0,1fr)}
.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px;background:rgba(8,13,19,.92);backdrop-filter:blur(20px);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{padding:0 10px 24px}.brand b{font-size:24px;letter-spacing:4px}.brand small{display:block;margin-top:6px;color:var(--muted);font-size:10px;letter-spacing:3px}.nav{display:grid;gap:7px}.nav button{border:0;color:var(--muted);background:transparent;padding:13px 14px;border-radius:12px;display:flex;gap:12px;align-items:center;text-align:left}.nav button:hover,.nav button.active{color:#fff;background:linear-gradient(90deg,rgba(92,174,255,.16),rgba(92,174,255,.04));box-shadow:inset 2px 0 var(--blue)}.nav .ico{width:22px;text-align:center}.side-user{margin-top:auto;border-top:1px solid var(--line);padding:18px 10px 0;display:flex;align-items:center;gap:10px}.mini-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#364f67,#111a23);display:grid;place-items:center;font-weight:700;border:1px solid rgba(255,255,255,.12)}.side-user small{color:var(--muted);display:block}
.main{min-width:0}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:20;background:rgba(8,13,19,.78);backdrop-filter:blur(16px)}.topbar .page-title{font-weight:700}.top-actions{display:flex;align-items:center;gap:10px}.icon-btn,.ghost,.primary,.chip{border:1px solid var(--line);background:#111a24;color:var(--text);border-radius:12px;padding:10px 13px}.primary{background:linear-gradient(180deg,#4c9dff,#387eea);border-color:#6bb7ff;box-shadow:0 8px 30px rgba(76,157,255,.25)}.ghost:hover,.icon-btn:hover{background:#182431}.lang{padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:#111a24;color:#fff}
.content{max-width:1440px;margin:0 auto;padding:26px 30px 110px}.eyebrow{font-size:11px;letter-spacing:2.2px;color:#7ca6cb;text-transform:uppercase}.section-title{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:26px 0 14px}.section-title h2{margin:0;font-size:18px}.section-title p{margin:3px 0 0;color:var(--muted);font-size:13px}.card{background:linear-gradient(180deg,rgba(18,29,40,.95),rgba(13,21,29,.96));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.dashboard-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.hero-card{padding:26px;overflow:hidden;position:relative;min-height:270px}.hero-card:after{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;background:radial-gradient(circle,rgba(92,174,255,.22),transparent 66%)}.profile-row{display:flex;align-items:center;gap:18px;position:relative;z-index:2}.profile-photo{width:82px;height:82px;border-radius:20px;border:1px solid rgba(255,255,255,.15);object-fit:cover;background:#121a23}.profile-name{font-size:31px;font-weight:800;letter-spacing:.5px}.level{color:#a9cfff;font-size:14px;letter-spacing:1.6px}.quote{color:var(--muted);font-size:13px;margin-top:8px}.xp-wrap{margin-top:23px;position:relative;z-index:2}.xp-head{display:flex;justify-content:space-between;font-size:12px;color:#bfd6ea;margin-bottom:8px}.bar{height:8px;background:#202c38;border-radius:999px;overflow:hidden}.bar>span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4f9cff,#9ed6ff);box-shadow:0 0 18px rgba(92,174,255,.55)}.category-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px;position:relative;z-index:2}.category{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(8,14,20,.55)}.category b{display:block;font-size:12px;margin-bottom:4px}.category small{color:var(--muted)}.cat-dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:10px}.body{color:var(--red)}.tech{color:var(--blue)}.music{color:var(--purple)}.career{color:var(--green)}.life{color:var(--gold)}
.next-quest{padding:24px;display:flex;flex-direction:column;justify-content:space-between;min-height:270px;background:radial-gradient(circle at 80% 0%,rgba(178,119,255,.18),transparent 36%),linear-gradient(180deg,#131c27,#0e151d)}.quest-focus{display:flex;align-items:center;gap:12px}.quest-icon{width:52px;height:52px;border-radius:15px;background:rgba(178,119,255,.14);color:var(--purple);display:grid;place-items:center;font-size:24px}.big-time{font-size:42px;font-weight:800;letter-spacing:-1.5px;margin:18px 0 2px}.muted{color:var(--muted)}.reward{color:#67efba;font-weight:700}
.quest-list,.activity-list{display:grid;gap:10px}.row-card{display:flex;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--line);background:#101922;border-radius:14px}.row-card .grow{flex:1;min-width:0}.row-card b{font-size:14px}.row-card small{display:block;color:var(--muted);margin-top:4px}.row-icon{width:40px;height:40px;border-radius:12px;background:#162330;display:grid;place-items:center;font-size:19px}.status{width:26px;height:26px;border-radius:50%;border:1px solid #3d5367;display:grid;place-items:center;color:#65e5ad}.row-card.done{opacity:.72}.row-card.done .status{background:#1a9b69;border-color:#47e7a8;color:#06110d}.row-card .row-actions{display:flex;gap:8px}.tiny-btn{border:1px solid var(--line);background:#17232f;color:#dbe7f1;border-radius:10px;padding:8px 10px;font-size:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.stats-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:16px}.stat strong{font-size:24px}.stat small{display:block;color:var(--muted);margin-top:5px}
.room-card{overflow:hidden;min-height:520px;position:relative;background:#111}.room-bg{position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(4,8,12,.68),rgba(4,8,12,.08) 48%,rgba(4,8,12,.25)),url('./room-concept.jpg');background-size:cover;background-position:center}.room-overlay{position:relative;z-index:2;min-height:520px;padding:22px;display:flex;flex-direction:column}.room-nav{width:210px;background:rgba(7,11,16,.68);border:1px solid var(--line);backdrop-filter:blur(10px);padding:10px;border-radius:16px;display:grid;gap:4px}.room-nav button{border:0;background:transparent;color:#c5d0da;padding:10px 12px;border-radius:10px;text-align:left}.room-nav button.active,.room-nav button:hover{background:rgba(92,174,255,.14);color:#fff}.room-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:end;gap:20px}.room-caption{max-width:320px;background:rgba(7,11,16,.62);padding:16px;border-radius:14px;border:1px solid var(--line)}.room-caption h2{margin:0 0 5px}.room-caption p{margin:0;color:#b4c0cb;font-size:13px}.room-items{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.room-item{padding:10px 12px;background:rgba(7,11,16,.68);border:1px solid var(--line);border-radius:12px;font-size:12px}.room-item.locked{opacity:.5}
.skill-layout{display:grid;grid-template-columns:240px 1fr;gap:18px}.skill-tabs{padding:14px}.skill-tabs button{width:100%;border:0;background:transparent;color:var(--muted);padding:12px;border-radius:10px;text-align:left}.skill-tabs button.active{color:#fff;background:#172432}.skill-tree{padding:28px;min-height:560px;overflow:auto}.tree{display:flex;flex-direction:column;align-items:center;min-width:620px}.node{min-width:160px;text-align:center;padding:14px;border:1px solid #38516b;border-radius:14px;background:#101923;position:relative}.node.active{border-color:#a66cff;box-shadow:0 0 30px rgba(178,119,255,.16)}.node.locked{opacity:.48}.node small{display:block;color:var(--muted);margin-top:4px}.connector{width:2px;height:28px;background:#39546f}.branch{display:flex;gap:42px;position:relative}.branch:before{content:"";position:absolute;left:80px;right:80px;top:-15px;height:1px;background:#39546f}.branch>.node:before{content:"";position:absolute;top:-15px;left:50%;height:15px;width:1px;background:#39546f}.progress-card{margin-top:28px;padding:17px;border:1px solid var(--line);border-radius:14px;background:#0d151e;width:100%;max-width:560px}.progress-card .bar{margin:10px 0}
.activities-toolbar{display:flex;gap:10px;margin-bottom:16px}.search{flex:1;min-width:0;border:1px solid var(--line);background:#101922;color:#fff;border-radius:12px;padding:12px 14px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.chip.active{background:#29415b;border-color:#5085b9}.activity-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);background:#101922;border-radius:14px}.activity-row .xp-rate{color:#62e7b1;font-size:12px}.activity-row small{color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,5,8,.74);z-index:80;display:grid;place-items:center;padding:18px}.modal{width:min(520px,100%);max-height:90vh;overflow:auto;background:#0f1821;border:1px solid #2a3b4b;border-radius:20px;padding:22px;box-shadow:0 28px 90px rgba(0,0,0,.65)}.modal h2{margin:0 0 6px}.form{display:grid;gap:13px;margin-top:18px}.form label{font-size:12px;color:#b4c1cc}.form input,.form select{width:100%;margin-top:6px;background:#0b1219;border:1px solid #2b3c4b;border-radius:11px;padding:11px 12px;color:#fff}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.hidden{display:none!important}
.onboarding{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 0,#14283a,#080d13 54%);display:grid;place-items:center;padding:20px}.onboard-card{width:min(1080px,100%);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:#0e1720;box-shadow:0 30px 120px rgba(0,0,0,.7)}.onboard-visual{min-height:650px;background:linear-gradient(180deg,rgba(8,13,19,.02),rgba(8,13,19,.62)),url('./avatar-concept.png') center 25% / cover no-repeat;position:relative}.onboard-visual .brand-lock{position:absolute;left:32px;top:30px}.onboard-visual .tagline{position:absolute;left:32px;bottom:30px;right:32px}.onboard-panel{padding:44px;display:flex;flex-direction:column;justify-content:center}.onboard-panel h1{font-size:38px;margin:0 0 10px;letter-spacing:-1px}.onboard-panel p{color:var(--muted);line-height:1.6}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.choice{padding:15px;border:1px solid var(--line);background:#111b25;border-radius:14px;text-align:left;color:#fff}.choice.active{border-color:#5faeff;background:#152a3c}.lang-grid{display:grid;gap:9px;margin-top:20px}.lang-btn{border:1px solid var(--line);background:#111b25;color:#fff;border-radius:13px;padding:13px 15px;text-align:left}.lang-btn.active{border-color:#5faeff;background:#152a3c}.onboard-footer{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.timer-page{max-width:780px;margin:0 auto}.timer-card{text-align:center;padding:34px}.timer-ring{width:280px;height:280px;border-radius:50%;margin:25px auto;display:grid;place-items:center;background:conic-gradient(var(--green) var(--progress,38%),#22303b 0);position:relative;box-shadow:0 0 50px rgba(87,230,168,.14)}.timer-ring:before{content:"";position:absolute;inset:15px;border-radius:50%;background:#0f171f}.timer-inner{position:relative;z-index:2}.timer-time{font-size:52px;font-weight:800;letter-spacing:-2px}.timer-controls{display:flex;justify-content:center;gap:12px}.round-btn{width:58px;height:58px;border-radius:50%;border:1px solid #456071;background:#14202b;color:#fff;font-size:18px}.round-btn.complete{background:#2a9b6d;border-color:#53e0a7}
.mobile-nav{display:none}.toast{position:fixed;right:22px;bottom:24px;z-index:120;background:#142219;border:1px solid #2d6a4e;color:#bcffdb;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow)}
@media(max-width:1050px){.category-grid{grid-template-columns:repeat(3,1fr)}.dashboard-hero{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}.stats-mini{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{display:block}.sidebar{display:none}.topbar{height:62px;padding:0 16px}.content{padding:18px 14px 96px}.topbar .page-title{font-size:15px}.dashboard-hero,.grid-2,.grid-3,.skill-layout{grid-template-columns:1fr}.hero-card,.next-quest{min-height:auto}.category-grid{grid-template-columns:1fr 1fr;gap:9px}.category:last-child{grid-column:span 2}.stats-mini{grid-template-columns:1fr 1fr}.profile-name{font-size:25px}.profile-photo{width:68px;height:68px}.room-card,.room-overlay{min-height:600px}.room-bg{background-position:58% center}.room-nav{width:175px}.room-bottom{align-items:stretch;flex-direction:column}.room-items{justify-content:flex-start}.activity-row{grid-template-columns:44px 1fr auto}.activity-row .start-btn{grid-column:2/4}.onboard-card{grid-template-columns:1fr}.onboard-visual{display:none}.onboard-panel{padding:28px 22px;min-height:100vh}.choice-grid{grid-template-columns:1fr 1fr}.mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:60;left:0;right:0;bottom:0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(7,11,16,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line)}.mobile-nav button{border:0;background:transparent;color:#78899a;font-size:10px;padding:6px 3px}.mobile-nav button span{display:block;font-size:20px;margin-bottom:3px}.mobile-nav button.active{color:#79bbff}.mobile-nav .plus{width:46px;height:46px;border-radius:50%;background:#1e2c39;color:#fff;margin:-12px auto 0;border:1px solid #52687a;font-size:24px}.activities-toolbar{flex-direction:column}.skill-tabs{display:flex;overflow:auto;padding:8px}.skill-tabs button{white-space:nowrap;width:auto}.skill-tree{padding:16px;overflow-x:auto}.timer-ring{width:240px;height:240px}.timer-time{font-size:44px}}