/* ===================================================================
   ZENITH v4 — "SYSTEM" theme (Solo-Leveling status windows + Jarvis HUD)
   Loaded after styles.css: overrides palette, windows, nav, hero, quests, charts.
   =================================================================== */
:root{
  --bg:#02040b;--ink:#e3efff;--muted:#7f93b8;--line:rgba(77,184,255,.22);
  --a:#4db8ff;--b:#6a5cff;--c:#b24dff;--rose:#ff4d6d;--acc:var(--a);
  --sys:#4db8ff;--sys2:#6a5cff;--ok:#2ef2c0;--bad:#ff4d6d;--gold:#ffc857;
  --grad:linear-gradient(110deg,#4db8ff,#6a5cff 60%,#b24dff);
  --glass:rgba(5,12,32,.72);
  --display:'Rajdhani','Orbitron',Alexandria,system-ui,sans-serif;
  --num:'Orbitron','Rajdhani',Alexandria,sans-serif;
}
html,body{background:#02040b}
body{font-family:Alexandria,'Rajdhani',system-ui,sans-serif}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 45% at 80% -10%,rgba(106,92,255,.22),transparent 60%),radial-gradient(ellipse 50% 40% at 0% 60%,rgba(40,120,255,.14),transparent 60%)}

/* ---------- background layers ---------- */
.bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bg .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 35%,rgba(1,2,8,.85) 100%)}
.bg .scan-lines{position:absolute;inset:0;opacity:.35;background:repeating-linear-gradient(0deg,rgba(120,180,255,.035) 0 1px,transparent 1px 3px)}

/* ---------- windows (cards) ---------- */
.card{border-radius:4px;border:1px solid rgba(77,184,255,.34);background:linear-gradient(180deg,rgba(7,18,46,.80),rgba(3,8,22,.88));
  box-shadow:0 0 0 1px rgba(77,184,255,.05),0 0 38px -10px rgba(61,150,255,.5),0 30px 60px -34px #000,inset 0 0 46px rgba(61,150,255,.07)}
.card:before{opacity:1!important;inset:-1px;border-radius:4px;transition:none;background:
  linear-gradient(var(--sys),var(--sys)) 0 0/18px 2px no-repeat,linear-gradient(var(--sys),var(--sys)) 0 0/2px 18px no-repeat,
  linear-gradient(var(--sys),var(--sys)) 100% 0/18px 2px no-repeat,linear-gradient(var(--sys),var(--sys)) 100% 0/2px 18px no-repeat,
  linear-gradient(var(--sys),var(--sys)) 0 100%/18px 2px no-repeat,linear-gradient(var(--sys),var(--sys)) 0 100%/2px 18px no-repeat,
  linear-gradient(var(--sys),var(--sys)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--sys),var(--sys)) 100% 100%/2px 18px no-repeat;
  filter:drop-shadow(0 0 4px var(--sys))}
.card:after{left:8%;right:8%;opacity:.9;background:linear-gradient(90deg,transparent,var(--sys),transparent)}
.card .sys{display:inline-block;font:700 10px var(--num);letter-spacing:2.5px;color:#9fd2ff;border:1px solid rgba(77,184,255,.45);background:rgba(61,150,255,.1);padding:4px 10px;margin-bottom:14px;text-transform:uppercase;border-radius:2px}
.card-head h2,.card h2{font:700 17px var(--display);letter-spacing:2.5px;text-transform:uppercase;color:#eaf4ff;text-shadow:0 0 14px rgba(77,184,255,.5)}
html[lang=ar] .card-head h2,html[lang=ar] .card h2{letter-spacing:0;font-family:Alexandria,sans-serif;font-size:16px;text-transform:none}
.label,.date{color:#86a4d6;font-family:var(--display);letter-spacing:1.4px}
.subhead{color:#8fb4ea;border-bottom:1px solid rgba(77,184,255,.2);padding-bottom:6px}

/* ---------- buttons / inputs ---------- */
.btn,.mini,.round,.today-btn{border-radius:3px;border:1px solid rgba(77,184,255,.4);background:linear-gradient(180deg,rgba(40,90,190,.22),rgba(10,24,64,.55));color:#cfe6ff;box-shadow:0 0 14px -6px var(--sys);font-family:var(--display);font-weight:700}
.btn:hover,.mini:hover,.round:hover{border-color:#8fd0ff;box-shadow:0 0 18px -4px var(--sys);color:#fff}
.btn.primary,.mini.on,.btn.on{border-color:#8fd0ff;color:#fff;background:linear-gradient(180deg,rgba(77,184,255,.35),rgba(60,80,255,.25))}
.btn.danger{border-color:rgba(255,77,109,.6);color:#ff9bb0;background:linear-gradient(180deg,rgba(255,77,109,.16),rgba(60,10,30,.5));box-shadow:0 0 14px -6px var(--bad)}
.add,.save-checkin{border-radius:3px;background:linear-gradient(110deg,#2d8cff,#6a5cff);color:#fff;box-shadow:0 0 22px -6px #3d8bff;font-family:var(--display);letter-spacing:1.5px;border:1px solid #8fd0ff}
.add-row input,.task-form input,.ck-text,.note-search,.acc-form input,#sttLang{border-radius:3px;background:rgba(2,8,26,.8);border:1px solid rgba(77,184,255,.3);color:var(--ink)}
.add-row input:focus,.task-form input:focus,.ck-text:focus,.acc-form input:focus{border-color:#8fd0ff;box-shadow:0 0 0 3px rgba(77,184,255,.15),0 0 20px -6px var(--sys)}
.lang-switch{border-radius:3px;border-color:rgba(77,184,255,.4)}.lang-switch button.on{background:rgba(77,184,255,.22);color:#fff}
.month-switch{border-radius:3px;border-color:rgba(77,184,255,.4);background:rgba(5,12,32,.8)}
.month-switch #monthLabel{font-family:var(--display);letter-spacing:2px;text-transform:uppercase}

/* ---------- shell: side panel ---------- */
.side{background:linear-gradient(180deg,rgba(4,10,30,.92),rgba(2,5,16,.88));border-inline-end:1px solid rgba(77,184,255,.3);box-shadow:inset -1px 0 0 rgba(77,184,255,.08),0 0 50px -20px var(--sys);overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:10px;margin:0 4px 14px}
.brand-cv{width:56px;height:56px;flex:none;filter:drop-shadow(0 0 10px rgba(77,184,255,.7))}
.brand-text b{font:900 20px var(--num);letter-spacing:5px}
.brand-text small{font:600 8.5px var(--num);letter-spacing:2px;color:#7da4de}
.side a:not(.player){border-radius:2px;position:relative;font-family:var(--display);font-size:15px;letter-spacing:1px;padding:11px 14px;border:1px solid transparent;border-inline-start:3px solid transparent;overflow:hidden}
html[lang=ar] .side a{font-family:Alexandria,sans-serif;font-size:13.5px}
.side a:not(.player):hover{background:rgba(77,184,255,.07);color:#fff;border-inline-start-color:rgba(77,184,255,.5)}
.side a.on{background:linear-gradient(90deg,rgba(77,184,255,.28),rgba(77,184,255,.03));border-color:rgba(77,184,255,.35);border-inline-start-color:#8fd0ff;color:#fff;box-shadow:0 0 26px -10px var(--sys),inset 0 0 20px rgba(77,184,255,.08)}
html[dir=rtl] .side a.on{background:linear-gradient(270deg,rgba(77,184,255,.28),rgba(77,184,255,.03))}
.side a.on:after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:2px;background:#8fd0ff;box-shadow:0 0 12px #8fd0ff}
.side a.player{display:block;text-decoration:none;color:inherit;border:1px solid rgba(77,184,255,.4);background:linear-gradient(160deg,rgba(15,40,100,.55),rgba(4,10,30,.7));padding:12px;margin:0 2px 14px;border-radius:3px;box-shadow:inset 0 0 22px rgba(77,184,255,.1),0 0 24px -10px var(--sys)}
.pl-top{display:flex;justify-content:space-between;align-items:center}
.pl-tag{font:700 9px var(--num);letter-spacing:2px;color:#8fc4ff}
.pl-lv{font:900 22px var(--num);background:linear-gradient(180deg,#fff,#7dc0ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 8px rgba(77,184,255,.7))}
.pl-rank{font:700 12px var(--display);letter-spacing:1.5px;color:#a9cdf5;margin:2px 0 8px}
.pl-bar{height:5px;background:rgba(77,184,255,.14);margin-top:5px;overflow:hidden;position:relative}
.pl-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4db8ff,#9a7bff);box-shadow:0 0 10px #4db8ff;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pl-bar.q i{background:linear-gradient(90deg,#ff4d6d,#b24dff);box-shadow:0 0 10px #ff4d6d}
.pl-sub{font:600 10px var(--display);color:#7f99c6;margin-top:7px;letter-spacing:.5px}
.lv-chip{border-radius:2px;border-color:rgba(77,184,255,.5);font-family:var(--num);box-shadow:0 0 18px -6px var(--sys)}

/* ---------- hero: reactor ---------- */
.hero{border-radius:4px;background:linear-gradient(135deg,rgba(8,22,60,.82),rgba(3,8,22,.9) 60%,rgba(24,10,60,.7))}
.hero h1{font:900 clamp(26px,3.2vw,44px)/1.1 var(--num);letter-spacing:2px;text-transform:uppercase}
html[lang=ar] .hero h1{font-family:Alexandria,sans-serif;letter-spacing:0;font-weight:800}
.hero .eyebrow{font-family:var(--num);color:#8fd0ff;font-size:10px;letter-spacing:3px;border:1px solid rgba(77,184,255,.4);padding:5px 10px;background:rgba(61,150,255,.1)}
.hero h2{color:#cfe6ff}
.kpi{border-radius:2px;background:linear-gradient(180deg,rgba(40,100,220,.14),rgba(5,14,40,.5));border:1px solid rgba(77,184,255,.28);box-shadow:inset 0 0 20px rgba(77,184,255,.06)}
.kpi small{font-family:var(--display);color:#8fb4ea}
.kpi b{font-family:var(--num);font-size:22px}
.hero-orb{min-height:340px}
.reactor{position:relative;width:min(380px,100%);aspect-ratio:1}
.reactor canvas{position:absolute;inset:0;width:100%;height:100%}
.reactor .orb-text{z-index:2}
.reactor .orb-text strong{font:900 clamp(30px,3.6vw,46px) var(--num);color:#fff;text-shadow:0 0 22px #4db8ff,0 0 44px rgba(77,184,255,.6)}
.reactor .orb-text span{font:600 12px var(--num);letter-spacing:3px;color:#9fd2ff}

/* ---------- quests (habit rows) ---------- */
.habit,.task{border-radius:3px;border:1px solid rgba(77,184,255,.22);background:linear-gradient(90deg,rgba(40,100,220,.10),rgba(4,10,30,.5));position:relative;overflow:hidden}
.habit:hover,.task:hover{border-color:rgba(143,208,255,.7);transform:translateX(0);box-shadow:0 0 22px -8px var(--sys)}
html[dir=rtl] .habit:hover{transform:none}
.habit .emoji{filter:drop-shadow(0 0 6px rgba(77,184,255,.6))}
.habit-name{font-family:Alexandria,var(--display);font-weight:600}
.check{width:26px;height:26px;border-radius:2px;border:2px solid #4d6fa8;transform:rotate(45deg) scale(.82);background:rgba(2,8,26,.8);transition:.2s}
.check:after{transform:rotate(-45deg)}
.check:checked{border-color:var(--ok);background:rgba(46,242,192,.18);box-shadow:0 0 16px rgba(46,242,192,.7),inset 0 0 10px rgba(46,242,192,.35)}
.check:checked:after{color:var(--ok)}
.habit.done{background:linear-gradient(90deg,rgba(46,242,192,.14),rgba(4,10,30,.5));border-color:rgba(46,242,192,.55);border-left:1px solid rgba(46,242,192,.55)}
.habit.done:before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--ok);box-shadow:0 0 14px var(--ok)}
html[dir=rtl] .habit.done{border-right:1px solid rgba(46,242,192,.55)}
#quitList .check:checked{border-color:var(--bad);background:rgba(255,77,109,.16);box-shadow:0 0 16px rgba(255,77,109,.7)}#quitList .check:checked:after{color:var(--bad)}
#quitList .habit.done{background:linear-gradient(90deg,rgba(255,77,109,.14),rgba(4,10,30,.5));border-color:rgba(255,77,109,.55)}#quitList .habit.done:before{background:var(--bad);box-shadow:0 0 14px var(--bad)}
.streak{font-family:var(--num);font-size:11px}

/* ---------- old charts (insights) ---------- */
.chart-box{border-radius:3px;border:1px solid rgba(77,184,255,.25);background:rgba(2,8,24,.65)}
.perf .bar{border-radius:0}.perf .bar i{box-shadow:0 0 10px currentColor}
.dow i{border-radius:0}

/* ---------- modal / toast ---------- */
.modal{background:rgba(1,3,10,.78);backdrop-filter:blur(6px)}
.modal-box{border-radius:4px;border:1px solid rgba(77,184,255,.5);background:linear-gradient(180deg,rgba(8,20,52,.97),rgba(3,8,22,.98));box-shadow:0 0 60px -10px var(--sys),inset 0 0 40px rgba(77,184,255,.07);position:relative}
.modal-box:before{content:"[ SYSTEM ]";position:absolute;top:-11px;inset-inline-start:16px;background:#050c22;border:1px solid rgba(77,184,255,.6);padding:1px 10px;font:700 10px var(--num);letter-spacing:3px;color:#8fd0ff}
.modal-box h3{font-family:var(--display);color:#fff;text-shadow:0 0 12px var(--sys)}
.toast{border-radius:3px;border:1px solid rgba(77,184,255,.6);background:rgba(4,12,34,.95);box-shadow:0 0 30px -6px var(--sys);font-family:var(--display);font-weight:700;letter-spacing:.5px}
.toast:before{content:"[ ! ] ";color:#8fd0ff}
.lvup .big{font-family:var(--num);filter:drop-shadow(0 0 28px #6a5cff)}
.lvup .tag{font-family:var(--num);color:#b9a6ff}

/* ================== tracker pages (.sx) ================== */
.sx{--c1:#4db8ff;--c2:#6a5cff;--cg:77,184,255;display:grid;gap:22px;max-width:1240px;margin:0 auto}
.sx.q{--c1:#ff4d6d;--c2:#b24dff;--cg:255,77,109}
.sx .card{border-color:rgba(var(--cg),.38);box-shadow:0 0 38px -10px rgba(var(--cg),.5),0 30px 60px -34px #000,inset 0 0 46px rgba(var(--cg),.07)}
.sx .card:before{background:
  linear-gradient(var(--c1),var(--c1)) 0 0/18px 2px no-repeat,linear-gradient(var(--c1),var(--c1)) 0 0/2px 18px no-repeat,
  linear-gradient(var(--c1),var(--c1)) 100% 0/18px 2px no-repeat,linear-gradient(var(--c1),var(--c1)) 100% 0/2px 18px no-repeat,
  linear-gradient(var(--c1),var(--c1)) 0 100%/18px 2px no-repeat,linear-gradient(var(--c1),var(--c1)) 0 100%/2px 18px no-repeat,
  linear-gradient(var(--c1),var(--c1)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--c1),var(--c1)) 100% 100%/2px 18px no-repeat;filter:drop-shadow(0 0 4px var(--c1))}
.sx .card:after{background:linear-gradient(90deg,transparent,var(--c1),transparent)}
.sx .card .sys{border-color:rgba(var(--cg),.5);background:rgba(var(--cg),.1);color:var(--c1)}
.sx-banner{position:relative;text-align:center;padding:26px 16px 22px;border:1px solid rgba(var(--cg),.5);background:linear-gradient(90deg,rgba(var(--cg),.04),rgba(var(--cg),.2),rgba(var(--cg),.04));overflow:hidden}
.sx-banner:before,.sx-banner:after{content:"";position:absolute;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--c1),transparent);box-shadow:0 0 12px var(--c1)}
.sx-banner:before{top:0}.sx-banner:after{bottom:0}
.sx-banner .tag{position:absolute;top:6px;inset-inline-start:12px;font:700 9px var(--num);letter-spacing:3px;color:var(--c1)}
.sx-banner .motto{all:unset;cursor:pointer;display:block;width:100%;font:900 clamp(18px,3.4vw,36px)/1.25 var(--num);letter-spacing:4px;text-transform:uppercase;color:#fff;text-shadow:0 0 18px var(--c1),0 0 44px rgba(var(--cg),.6)}
html[lang=ar] .sx-banner .motto{font-family:Alexandria,sans-serif;letter-spacing:0;font-weight:800}
.sx-banner .motto:hover{filter:brightness(1.25)}
.sx-month{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sx-month .m{font:900 clamp(20px,2.4vw,30px) var(--num);letter-spacing:4px;color:#fff;text-shadow:0 0 14px var(--c1);text-transform:uppercase}
.sx-month .m small{display:block;font:600 11px var(--num);letter-spacing:4px;color:var(--c1);margin-bottom:2px}
html[lang=ar] .sx-month .m{font-family:Alexandria,sans-serif;letter-spacing:0}
.sx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;flex:1;min-width:min(100%,520px)}
.sx-tile{border:1px solid rgba(var(--cg),.3);background:linear-gradient(180deg,rgba(var(--cg),.14),rgba(3,8,22,.6));padding:12px 14px;position:relative;overflow:hidden}
.sx-tile small{display:block;font:600 9.5px var(--num);letter-spacing:2px;color:#9db8e4;text-transform:uppercase;margin-bottom:6px}
.sx-tile b{font:900 26px/1 var(--num);color:#fff;text-shadow:0 0 14px var(--c1)}
.sx-tile em{font-style:normal;font:600 11px var(--display);color:#86a4d6;margin-inline-start:6px}
.sx-tile i{position:absolute;inset-inline:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--c1),var(--c2));box-shadow:0 0 10px var(--c1);transform-origin:left;transition:width .8s}
.sx .grid-scroll{overflow-x:auto;padding-bottom:6px}
table.sg{border-collapse:separate;border-spacing:3px;min-width:100%}
.sg th,.sg td{padding:0;text-align:center;font:700 10px var(--num)}
.sg th{color:#7f9bcc;height:20px;min-width:25px}
.sg tr.wd th{font-size:9px;color:#5f7baa}
.sg th.we{color:#b79bff}
.sg th.today{color:#fff;background:rgba(var(--cg),.3);box-shadow:0 0 12px rgba(var(--cg),.7)}
.sg th.nm{position:sticky;inset-inline-start:0;z-index:2;text-align:start;min-width:190px;max-width:260px;background:linear-gradient(90deg,#050d26 75%,transparent);padding-inline-end:12px}
.sg .hrow{display:flex;align-items:center;gap:8px}
.sg .hn{all:unset;cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px Alexandria,var(--display);color:#e6f1ff;text-align:start}
.sg .hn:hover{color:var(--c1);text-shadow:0 0 10px var(--c1)}
.sg .hn .e{filter:drop-shadow(0 0 5px var(--c1))}
.sg .pct{flex:none;font:800 10px var(--num);color:var(--c1);min-width:34px;text-align:end}
.sg .stk{flex:none;font:700 10px var(--num);color:#ffb86b}
.sg td.c{height:25px;width:25px;min-width:25px;border:1px solid rgba(var(--cg),.16);background:rgba(var(--cg),.04);cursor:pointer;transition:.15s;font-size:13px;color:transparent;position:relative}
.sg td.c:hover{background:rgba(var(--cg),.22);border-color:var(--c1);box-shadow:0 0 12px rgba(var(--cg),.6)}
.sg td.c.we{background:rgba(150,110,255,.07)}
.sg td.c.on{background:linear-gradient(145deg,var(--c1),var(--c2));border-color:#fff;color:#fff;box-shadow:0 0 14px rgba(var(--cg),.85),inset 0 0 8px rgba(255,255,255,.35);text-shadow:0 0 6px #fff}
.sg td.c.today{outline:1px solid rgba(255,255,255,.7);outline-offset:1px}
.sg td.c.fut{opacity:.35;cursor:default;background:transparent;border-style:dashed}.sg td.c.fut:hover{box-shadow:none;border-color:rgba(var(--cg),.16)}
.sg td.c.off{opacity:.55}
.sg td.tot{font:800 12px var(--num);color:#fff;min-width:34px;text-shadow:0 0 10px var(--c1)}
.sg td.none{padding:30px 10px;color:#8ba5d0;font:500 13px Alexandria;border:1px dashed rgba(var(--cg),.35)}
.sg.mood th.nm{min-width:50px}.sg.mood td.c.on{font-size:12px}
.sx-add{display:flex;gap:10px;margin-top:14px}
.sx-add input{flex:1;min-width:0;background:rgba(2,8,26,.85);color:#fff;border:1px solid rgba(var(--cg),.4);padding:12px 14px;font:500 15px Alexandria,sans-serif;outline:none;border-radius:3px}
.sx-add input:focus{border-color:var(--c1);box-shadow:0 0 0 3px rgba(var(--cg),.15),0 0 22px -6px var(--c1)}
.sx-add button,.sx-shot button{border:1px solid #fff3;background:linear-gradient(110deg,var(--c1),var(--c2));color:#fff;font:800 13px var(--display);letter-spacing:1.5px;padding:0 22px;min-height:44px;cursor:pointer;border-radius:3px;box-shadow:0 0 22px -6px var(--c1);text-transform:uppercase}
.sx-row{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}
.sx-prog{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;align-items:center}
.sx-react{position:relative;aspect-ratio:1;width:100%}.sx-react canvas{position:absolute;inset:0;width:100%;height:100%}
.sx-react .orb-text{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.sx-react strong{font:900 30px var(--num);color:#fff;text-shadow:0 0 18px var(--c1)}.sx-react span{font:600 10px var(--num);letter-spacing:2px;color:#a9c6ee}
.sx .dotted{background-image:radial-gradient(rgba(var(--cg),.4) 1px,transparent 1.4px);background-size:16px 16px;border:1px solid rgba(var(--cg),.18);background-color:rgba(2,6,20,.55)}
svg.sc{display:block;width:100%;height:auto}.sc text{font:600 10px var(--num);fill:#8fa9d6}.sc .gl{stroke:rgba(var(--cg),.22);stroke-width:.7;stroke-dasharray:2 4}
.sc .area{fill:url(#sxA)}.sc .ln{fill:none;stroke:url(#sxL);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:url(#sxG);stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.sc .dt{fill:#050b22;stroke:var(--c1);stroke-width:2.2}.sc .dt.last{fill:#fff;filter:url(#sxG)}
.sc .bar{fill:url(#sxB);filter:url(#sxG)}.sc .hit{fill:transparent;cursor:pointer}.sc .hit:hover{fill:rgba(var(--cg),.12)}
.sx-lvl{display:grid;gap:10px;justify-items:center;text-align:center;text-decoration:none;color:inherit;padding:18px 12px}
.sx-lvl canvas{width:150px;height:150px}
.sx-lvl small{font:700 10px var(--num);letter-spacing:3px;color:var(--c1)}
.sx-lvl b{font:900 34px var(--num);color:#fff;text-shadow:0 0 20px var(--c1)}
.sx-lvl span{font:700 12px var(--display);color:#b8d0f2;letter-spacing:1.5px}
.sx-lvl .arrow{font-style:normal;font-size:22px;color:var(--c1);text-shadow:0 0 12px var(--c1);animation:nudge 1.4s ease-in-out infinite}
html[dir=rtl] .sx-lvl .arrow{transform:scaleX(-1);animation-name:nudge2}
@keyframes nudge{50%{transform:translateX(6px)}}@keyframes nudge2{50%{transform:scaleX(-1) translateX(6px)}}
.sx-side{display:grid;gap:22px;align-content:start}
.sx-quote{all:unset;cursor:pointer;display:block;text-align:center;padding:20px 14px;border:1px solid rgba(255,77,109,.5);background:linear-gradient(180deg,rgba(255,77,109,.14),rgba(30,5,20,.55));font:900 20px/1.3 var(--num);color:#ff5c7a;text-shadow:0 0 16px #ff4d6d,0 0 40px rgba(255,77,109,.6);letter-spacing:2px;text-transform:uppercase;position:relative}
html[lang=ar] .sx-quote{font-family:Alexandria,sans-serif;letter-spacing:0}
.sx-quote:hover{filter:brightness(1.2)}
.sx-quote:before{content:"[ ! ]";position:absolute;top:6px;inset-inline-start:10px;font:700 9px var(--num);letter-spacing:2px;color:#ff9bb0}
.sx-note{margin:10px 2px 0;color:#86a4d6;font:500 12px Alexandria}
.sx-shot{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:14px}
.sx-shot label{display:grid;gap:4px;font:700 10px var(--num);letter-spacing:2px;color:#9db8e4;text-transform:uppercase}
.sx-shot input{background:rgba(2,8,26,.85);color:#fff;border:1px solid rgba(var(--cg),.4);padding:9px 11px;font:500 14px Alexandria,sans-serif;width:160px;border-radius:3px;color-scheme:dark}
@media(max-width:1000px){.sx-row{grid-template-columns:1fr}.sx-side{grid-template-columns:1fr 1fr}.sx-prog{grid-template-columns:1fr}.sx-react{max-width:240px;margin:auto}}
@media(max-width:700px){.sx-tiles{grid-template-columns:repeat(2,1fr)}.sx-side{grid-template-columns:1fr}.sg th.nm{min-width:120px}.sg .pct,.sg .stk{display:none}}

/* ================== level page ================== */
.lvp{display:grid;gap:22px;max-width:1240px;margin:0 auto}
.lvp-hero{display:grid;grid-template-columns:minmax(260px,380px) minmax(0,1fr);gap:28px;align-items:center}
.lvp-crystal{position:relative;aspect-ratio:1;width:100%}.lvp-crystal canvas{position:absolute;inset:0;width:100%;height:100%}
.lvp-crystal .lvn{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.lvp-crystal small{font:700 11px var(--num);letter-spacing:6px;color:#9fd2ff}
.lvp-crystal b{font:900 clamp(60px,9vw,104px)/1 var(--num);color:#fff;text-shadow:0 0 30px var(--rk,#4db8ff),0 0 70px var(--rk,#4db8ff)}
.lvp-rank{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.lvp-rank strong{font:900 clamp(20px,2.6vw,30px) var(--num);color:#fff;letter-spacing:3px;text-shadow:0 0 18px var(--rk,#4db8ff)}
html[lang=ar] .lvp-rank strong{font-family:Alexandria,sans-serif;letter-spacing:0}
.lvp-rank span{font:700 12px var(--num);letter-spacing:3px;color:var(--rk,#4db8ff);border:1px solid var(--rk,#4db8ff);padding:3px 10px}
.xp{margin:14px 0}
.xp .row{display:flex;justify-content:space-between;font:700 12px var(--display);letter-spacing:1px;color:#b9d2f5;margin-bottom:6px}
.xp .row b{font-family:var(--num);color:#fff;font-size:12px}
.xp .track{height:16px;border:1px solid rgba(77,184,255,.5);background:rgba(2,8,26,.85);position:relative;overflow:hidden;padding:2px}
.xp .track:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 18px,rgba(2,8,26,.9) 18px 20px);z-index:2}
.xp .fill{display:block;height:100%;background:linear-gradient(90deg,#2d8cff,#6a5cff,#b24dff);box-shadow:0 0 18px #4d7bff;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.xp.neg .track{border-color:rgba(255,77,109,.55)}.xp.neg .fill{background:linear-gradient(90deg,#ff4d6d,#b24dff);box-shadow:0 0 18px #ff4d6d}
.lvp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.radar{width:100%;max-width:380px;display:block;margin:auto}.radar text{font:700 11px var(--num);fill:#a9cdf5;letter-spacing:1px}
.radar .poly{fill:rgba(77,184,255,.28);stroke:#7dd0ff;stroke-width:2;filter:drop-shadow(0 0 8px #4db8ff)}.radar .web{fill:none;stroke:rgba(77,184,255,.25);stroke-width:1}.radar .axis{stroke:rgba(77,184,255,.2)}
.radar .pt{fill:#fff;filter:drop-shadow(0 0 5px #4db8ff)}
.stat-list{display:grid;gap:10px;margin-top:10px}
.stat-list .r{display:grid;grid-template-columns:90px 1fr 56px;gap:10px;align-items:center;font:700 11px var(--num);letter-spacing:1px;color:#b9d2f5}
.stat-list .tr{height:7px;background:rgba(77,184,255,.12)}.stat-list .tr i{display:block;height:100%;background:linear-gradient(90deg,#4db8ff,#9a7bff);box-shadow:0 0 10px #4db8ff}
.stat-list b{text-align:end;color:#fff}
.road table{width:100%;border-collapse:collapse;font:600 12px var(--num)}.road th,.road td{padding:9px 10px;border-bottom:1px solid rgba(77,184,255,.15);text-align:center;color:#c9defa}.road th{color:#8fb4ea;font-size:10px;letter-spacing:2px}.road tr.cur td{background:rgba(77,184,255,.12);color:#fff;box-shadow:inset 0 0 14px rgba(77,184,255,.15)}
.road small{color:#7f99c6}
@media(max-width:900px){.lvp-hero,.lvp-grid{grid-template-columns:1fr}.lvp-crystal{max-width:300px;margin:auto}}

/* ================== ZEN: system chat ================== */
.zenpage .zp{max-width:920px}
.zen-cv{width:96px;height:96px;flex:none;filter:drop-shadow(0 0 14px rgba(77,184,255,.7))}
.zp-head{border-bottom:1px solid rgba(77,184,255,.25);margin-bottom:6px;padding-bottom:10px}
.zp-head h2{font:900 26px var(--num);letter-spacing:6px;text-shadow:0 0 18px var(--sys)}
.zenpage .zen-log .ln.zen{position:relative;border:1px solid rgba(77,184,255,.42);background:linear-gradient(180deg,rgba(10,28,72,.62),rgba(3,9,26,.75));padding:20px 20px 14px;border-radius:3px;box-shadow:0 0 30px -12px var(--sys),inset 0 0 30px rgba(77,184,255,.06);margin-top:10px}
.zenpage .zen-log .ln.zen:before{content:"[ ZEN ]";position:absolute;top:-10px;inset-inline-start:14px;background:#04102e;border:1px solid rgba(77,184,255,.6);padding:0 10px;font:700 10px var(--num);letter-spacing:3px;color:#9fd2ff}
.zenpage .zen-log .ln.zen:after{content:"";position:absolute;inset-inline-end:-1px;top:-1px;width:16px;height:16px;border-top:2px solid #8fd0ff;border-inline-end:2px solid #8fd0ff;filter:drop-shadow(0 0 4px #8fd0ff)}
.zenpage .zen-log .ln.me{background:rgba(106,92,255,.14);border:1px solid rgba(154,123,255,.45);border-radius:3px;box-shadow:0 0 22px -10px #8a6bff}
.zenpage .zen-log .ln.coach{border-radius:3px;border:1px solid rgba(255,200,87,.45);border-inline-start:3px solid var(--gold);background:linear-gradient(180deg,rgba(255,200,87,.1),rgba(30,20,5,.5));position:relative;margin-top:10px}
.zenpage .zen-log .ln.coach:before{content:"[ COACH ]";position:absolute;top:-10px;inset-inline-start:14px;background:#1a1204;border:1px solid rgba(255,200,87,.6);padding:0 8px;font:700 9px var(--num);letter-spacing:3px;color:var(--gold)}
.zenpage .zen-log::-webkit-scrollbar{width:6px}.zenpage .zen-log::-webkit-scrollbar-thumb{background:rgba(77,184,255,.4)}
.zp-box{border-radius:4px;border:1px solid rgba(77,184,255,.5);background:rgba(3,10,30,.9);box-shadow:0 0 30px -10px var(--sys),inset 0 0 20px rgba(77,184,255,.06)}
.zp-box .send{border-radius:3px;background:linear-gradient(110deg,#2d8cff,#6a5cff);box-shadow:0 0 20px -4px #4d8bff}
.zp-box .mic{border-radius:3px;border:1px solid rgba(77,184,255,.4);background:rgba(77,184,255,.08)}
.zp-box .mic.rec{background:#ff3b5c;border-color:#ff9bb0}
.zp-box button{border-radius:3px}
.chips button{border-radius:2px;font-family:var(--display);font-weight:700;letter-spacing:1px;border-color:rgba(77,184,255,.35);background:rgba(77,184,255,.07);color:#b9d6fa}
.chips button:hover{border-color:#8fd0ff;box-shadow:0 0 14px -4px var(--sys)}

/* ================== misc pages ================== */
.sys-card{border-radius:4px}
.notes-side,.notes-main{border-radius:4px}
.note-item{border-radius:2px}.note-item.on{border-color:#8fd0ff;box-shadow:0 0 18px -6px var(--sys)}
.acc-pill{border-radius:2px;font-family:var(--num);letter-spacing:1px}
.status-ok{color:var(--ok)}
@media(max-width:900px){
  .side{background:rgba(2,5,16,.96);border-top:1px solid rgba(77,184,255,.4)}
  .side a.player,.side .brand{display:none!important}
  .side a:not(.player){border:0!important;border-radius:3px;padding:6px 4px}
  .side a.on{background:rgba(77,184,255,.18);box-shadow:0 -2px 0 #8fd0ff inset}
  .reactor{width:min(300px,100%)}.hero-orb{min-height:300px}
}

.side a.player{padding:12px!important;border-radius:3px;gap:0}
.side a.player:hover{border-color:#8fd0ff;box-shadow:inset 0 0 22px rgba(77,184,255,.14),0 0 24px -6px var(--sys)}
.reactor .orb-text,.sx-react .orb-text{transform:translateY(34%)}
.reactor .orb-text strong{font-size:clamp(24px,2.6vw,34px)}
.sg th.nm{background:#050d26;box-shadow:6px 0 10px -4px #050d26}
html[dir=rtl] .sg th.nm{box-shadow:-6px 0 10px -4px #050d26}
@media(max-width:700px){.sg th.nm{min-width:92px;max-width:108px;padding-inline-end:6px}.sg .hn{font-size:11.5px}.sg .hn .e{display:none}.sx-tile b{font-size:21px}}

/* ===== v5: website — gate, plans, mobile ===== */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:radial-gradient(ellipse at 50% 0,rgba(30,70,160,.35),#03040a 70%)}
.gate[hidden]{display:none}
body.gated .shell{display:none}
.gate-box{width:min(420px,100%);text-align:center;border:1px solid rgba(77,184,255,.4);background:linear-gradient(160deg,rgba(15,40,100,.55),rgba(4,10,30,.85));padding:28px 22px;border-radius:4px;box-shadow:0 0 60px -20px var(--sys)}
.gate-box canvas{width:64px;height:64px}
.gate-box h1{margin:6px 0 0;font:900 30px var(--num);letter-spacing:8px;color:#fff;text-shadow:0 0 18px var(--sys)}
.gate-box small{display:block;font:700 10px var(--num);letter-spacing:3px;color:#8fc4ff;margin-bottom:18px}
.gate-box .acc-form{display:grid;gap:10px;text-align:start}
.gate-box .acc-msg{text-align:start}
.pl-plan{position:absolute;top:10px;inset-inline-end:10px;font:800 9px var(--num);letter-spacing:2px;padding:2px 6px;border:1px solid}
.pl-plan.free{color:#8fc4ff;border-color:rgba(143,196,255,.5)}.pl-plan.pro{color:#ffd76a;border-color:#ffd76a;text-shadow:0 0 8px #ffb800}
.side a.player{position:relative}
.plan-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.plan-row .hint{flex:1;min-width:160px}
.plan-badge{font:800 11px var(--num);letter-spacing:3px;padding:4px 10px;border:1px solid}
.plan-badge.free{color:#8fc4ff;border-color:rgba(143,196,255,.5)}.plan-badge.pro{color:#ffd76a;border-color:#ffd76a;box-shadow:0 0 14px -4px #ffb800}
.plan-tbl{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.plan-tbl th,.plan-tbl td{padding:8px 6px;border-bottom:1px solid rgba(77,184,255,.2);text-align:start}
.plan-tbl td.pro,.plan-tbl th:last-child{color:#ffd76a}
.side .more{display:none}
.side a b.short{display:none}
@media(max-width:900px){
  .side{display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .side a,.side .more{flex-direction:column!important;align-items:center;justify-content:center;gap:2px!important;min-width:0;padding:7px 2px!important;font-size:10px!important;letter-spacing:.3px!important;line-height:1.1;text-align:center}
  .side a i,.side .more i{width:auto;font-size:19px}
  .side a b.full{display:none}.side a b.short,.side .more b.short{display:inline;font-weight:600}.side .more b.full{display:none}
  .side .more{display:flex;background:none;border:0;color:#9fb0d6;font-family:var(--display);cursor:pointer;border-radius:3px}
  .side .more.on,.side.open .more{color:#fff;background:rgba(77,184,255,.18);box-shadow:0 -2px 0 #8fd0ff inset}
  .side a.sec{display:none!important}
  .side.open a.sec{display:flex!important;position:absolute;bottom:100%;inset-inline:0;background:rgba(2,8,24,.98);border-top:1px solid rgba(77,184,255,.25)!important;border-radius:0;padding:14px 16px!important;flex-direction:row!important;justify-content:flex-start;gap:14px!important;font-size:15px!important}
  .side.open a.sec b.short{font-size:15px}
  .side.open a.sec{bottom:auto;top:auto}
  .side.open a.sec:nth-of-type(6){transform:translateY(-300%)}
  .side.open a.sec:nth-of-type(7){transform:translateY(-200%)}
  .side.open a.sec:nth-of-type(8){transform:translateY(-100%)}
  .side.open a.sec:nth-of-type(9){transform:none}
  .side.open{overflow:visible}
  .app{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
  body:not([data-page=home]):not([data-page=settings]) .alerts{display:none}
}
@media(max-width:600px){
  .top{gap:8px}
  .app{padding-inline:12px!important}
  .sx-month .m{font-size:24px}
}