:root{--bg:#070710;--bg2:#0d0d1a;--sur:#111122;--sur2:#181830;--sur3:#1e1e3a;--bdr:#252545;--bdr2:#2e2e55;--acc:#6d28d9;--glow:rgba(109,40,217,0.3);--acc2:#0ea5e9;--acc3:#f59e0b;--acc4:#ec4899;--grn:#10b981;--red:#ef4444;--txt:#e2e2f0;--txt2:#a0a0c0;--txt3:#606080;--gold:#f59e0b;--mono:'JetBrains Mono',monospace;--sans:'Plus Jakarta Sans',sans-serif;--r:12px;--rl:18px}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(109,40,217,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(109,40,217,0.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0}
body::after{content:'';position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:500px;background:radial-gradient(ellipse,rgba(109,40,217,0.1) 0%,transparent 70%);pointer-events:none;z-index:0}
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;background:rgba(7,7,16,0.88);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);display:flex;align-items:center;padding:0 1.5rem;gap:1rem}
.logo{font-size:1.2rem;font-weight:800;cursor:pointer;flex-shrink:0}.logo .br{color:var(--acc2);font-family:var(--mono)}.logo .hl{color:var(--acc)}
.nav-links{display:flex;align-items:center;gap:0.2rem;list-style:none;flex:1}
.nav-links a{color:var(--txt2);text-decoration:none;font-size:0.85rem;font-weight:600;padding:0.38rem 0.85rem;border-radius:8px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.nav-links a:hover{color:var(--txt);background:var(--sur2)}.nav-links a.active{color:var(--txt);background:var(--sur3)}
.pbadge{font-size:0.57rem;font-weight:800;background:var(--gold);color:#000;padding:0.1rem 0.3rem;border-radius:4px;vertical-align:middle;margin-left:3px}
.nav-r{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.up-btn{background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#000;font-weight:800;font-family:var(--sans);font-size:0.78rem;padding:0.4rem 0.9rem;border-radius:8px;cursor:pointer}
.user-pill{display:flex;align-items:center;gap:0.4rem;background:var(--sur2);border:1px solid var(--bdr);padding:0.28rem 0.7rem 0.28rem 0.32rem;border-radius:100px;cursor:pointer}
.u-av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.82rem;background:var(--sur3)}
.u-nm{font-size:0.78rem;font-weight:700}
.u-xp{font-size:0.67rem;font-family:var(--mono);color:var(--acc2);background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.2);padding:0.1rem 0.36rem;border-radius:5px}
.btn-g{background:transparent;border:1px solid var(--bdr);color:var(--txt2);padding:0.4rem 0.9rem;border-radius:8px;font-size:0.82rem;font-weight:600;font-family:var(--sans);cursor:pointer;transition:all 0.2s}
.btn-g:hover{border-color:var(--acc);color:var(--txt)}
.btn-a{background:var(--acc);border:none;color:white;padding:0.4rem 1rem;border-radius:8px;font-size:0.82rem;font-weight:700;font-family:var(--sans);cursor:pointer;box-shadow:0 2px 12px var(--glow)}
main{padding-top:60px;position:relative;z-index:1}
.page{display:none}.page.active{display:block}
/* HERO */
.hero{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1.5rem 2rem}
.eye{display:inline-flex;align-items:center;gap:0.5rem;border:1px solid var(--bdr2);background:var(--sur);color:var(--txt2);font-size:0.76rem;font-weight:600;padding:0.32rem 0.82rem;border-radius:100px;margin-bottom:1.5rem;font-family:var(--mono)}
.pdot{width:7px;height:7px;background:var(--grn);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
h1.hero-h{font-size:clamp(2.5rem,6vw,5rem);font-weight:800;line-height:1.06;letter-spacing:-2px;margin-bottom:1.1rem}
.gt{background:linear-gradient(135deg,var(--acc),var(--acc2),var(--acc4));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--txt2);font-size:0.97rem;line-height:1.7;max-width:530px;margin:0 auto 2rem}
.hero-cta{display:flex;gap:0.85rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.btn-hp{background:linear-gradient(135deg,var(--acc),#9333ea);border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.96rem;padding:0.8rem 2rem;border-radius:12px;cursor:pointer;box-shadow:0 4px 24px var(--glow);transition:transform 0.2s}
.btn-hp:hover{transform:translateY(-2px)}
.btn-hs{background:var(--sur);border:1px solid var(--bdr2);color:var(--txt);font-family:var(--sans);font-weight:700;font-size:0.96rem;padding:0.8rem 2rem;border-radius:12px;cursor:pointer}
/* Terminal */
.term{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);overflow:hidden;max-width:620px;width:100%;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.tbar{background:var(--sur2);padding:0.62rem 1rem;display:flex;align-items:center;gap:0.42rem;border-bottom:1px solid var(--bdr)}
.td{width:10px;height:10px;border-radius:50%}.td.r{background:#ff5f57}.td.y{background:#ffbd2e}.td.g{background:#28c840}
.ttl{font-family:var(--mono);font-size:0.7rem;color:var(--txt3);margin:0 auto}
.tbody{padding:1rem 1.3rem;font-family:var(--mono);font-size:0.79rem;line-height:1.9;text-align:left}
.tcm{color:#475569;font-style:italic}.tkw{color:#c084fc}.tfn{color:#67e8f9}.tstr{color:#86efac}.ttype{color:#f472b6}
.tcur{display:inline-block;width:2px;height:1em;background:var(--acc2);vertical-align:middle;animation:blink 1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;padding:2rem 1.5rem 3rem;max-width:750px;margin:0 auto}
.sc .n{font-size:2.1rem;font-weight:800;color:var(--acc2);letter-spacing:-1px}.sc .l{font-size:0.76rem;color:var(--txt3)}
/* SECTION */
.sec-head{text-align:center;padding:3.5rem 1.5rem 2rem}
.stag{display:inline-block;font-family:var(--mono);font-size:0.7rem;color:var(--acc2);letter-spacing:3px;text-transform:uppercase;margin-bottom:0.65rem}
.sec-head h2{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-1px;margin-bottom:0.65rem}
.sec-head p{color:var(--txt2);font-size:0.92rem;line-height:1.7;max-width:560px;margin:0 auto}
/* OVERLAYS */
.ov{position:fixed;inset:0;background:rgba(0,0,0,0.9);backdrop-filter:blur(14px);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.ov.open{display:flex}
/* AUTH */
.abox{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:415px;padding:1.9rem;position:relative;box-shadow:0 28px 70px rgba(0,0,0,0.6);animation:su 0.22s ease}
@keyframes su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.acl{position:absolute;top:0.9rem;right:0.9rem;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt2);width:29px;height:29px;border-radius:7px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center}
.acl:hover{color:var(--txt)}
.alogo{text-align:center;font-size:1.8rem;margin-bottom:0.8rem}
.abox h2{font-size:1.4rem;font-weight:800;text-align:center;margin-bottom:0.22rem}
.asub{color:var(--txt2);font-size:0.83rem;text-align:center;margin-bottom:1.3rem;font-family:var(--mono)}
.fld{margin-bottom:0.85rem}
.fld label{display:block;font-size:0.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.35rem;font-family:var(--mono)}
.fld input{width:100%;background:var(--bg2);border:1px solid var(--bdr2);border-radius:9px;padding:0.65rem 0.95rem;color:var(--txt);font-family:var(--mono);font-size:0.85rem;outline:none;transition:border-color 0.2s}
.fld input:focus{border-color:var(--acc)}.fld input::placeholder{color:var(--txt3)}
.aerr{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#fca5a5;padding:0.6rem 0.85rem;border-radius:8px;font-size:0.8rem;font-family:var(--mono);margin-bottom:0.85rem;display:none}
.aerr.show{display:block}
.bfull{width:100%;padding:0.76rem;border-radius:9px;font-family:var(--sans);font-size:0.92rem;font-weight:800;cursor:pointer;border:none;background:linear-gradient(135deg,var(--acc),#9333ea);color:white;transition:transform 0.15s}
.bfull:hover{transform:translateY(-1px)}.bfull:disabled{opacity:0.5;transform:none;cursor:not-allowed}
.asw{text-align:center;margin-top:1rem;font-size:0.83rem;color:var(--txt2);font-family:var(--mono)}
.asw a{color:var(--acc2);cursor:pointer;text-decoration:underline}
/* PROJECTS */
.pw{max-width:1260px;margin:0 auto;padding:0 1.5rem 4rem}
.cbar{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);padding:1rem 1.3rem;margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:0.85rem;align-items:center}
.clbl{font-size:0.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);font-family:var(--mono);white-space:nowrap}
.csel{background:var(--bg2);border:1px solid var(--bdr2);color:var(--txt);border-radius:8px;padding:0.4rem 0.65rem;font-family:var(--mono);font-size:0.78rem;cursor:pointer;outline:none;min-width:120px}
.csel:focus{border-color:var(--acc)}
.cgrp{display:flex;align-items:center;gap:0.42rem}
.csep{width:1px;height:25px;background:var(--bdr)}
.frow{display:flex;gap:0.42rem;flex-wrap:wrap;margin-bottom:1.1rem;align-items:center}
.flbl{font-family:var(--mono);font-size:0.67rem;color:var(--txt3);letter-spacing:1px;text-transform:uppercase}
.chip{background:var(--sur);border:1px solid var(--bdr);color:var(--txt2);padding:0.35rem 0.8rem;border-radius:100px;font-size:0.74rem;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap;font-family:var(--mono)}
.chip:hover{border-color:var(--bdr2);color:var(--txt)}.chip.active{background:rgba(109,40,217,0.15);border-color:var(--acc);color:var(--txt)}
.chip.pro{border-color:rgba(245,158,11,0.3);color:var(--gold)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.15rem}
/* PROJ CARD */
.pc{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:transform 0.2s,border-color 0.2s;position:relative}
.pc:hover{transform:translateY(-3px);border-color:var(--bdr2)}.pc.lk{cursor:default}.pc.lk:hover{transform:none;border-color:rgba(245,158,11,0.25)}
.pca{height:3px;background:linear-gradient(90deg,var(--acc),var(--acc2))}.pc.lk .pca{background:linear-gradient(90deg,var(--gold),#ef4444)}
.pcb{padding:1.15rem}
.pct{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0.8rem}
.pce{font-size:2rem}.pcbadges{display:flex;flex-direction:column;align-items:flex-end;gap:0.28rem}
.lvl{font-size:0.62rem;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;padding:0.17rem 0.5rem;border-radius:5px;font-family:var(--mono)}
.lb{background:rgba(16,185,129,0.12);color:var(--grn);border:1px solid rgba(16,185,129,0.25)}
.lm{background:rgba(245,158,11,0.12);color:var(--gold);border:1px solid rgba(245,158,11,0.25)}
.la{background:rgba(239,68,68,0.12);color:var(--red);border:1px solid rgba(239,68,68,0.25)}
.ll{background:rgba(245,158,11,0.1);color:var(--gold);border:1px solid rgba(245,158,11,0.25);font-size:0.62rem;font-weight:800;padding:0.17rem 0.5rem;border-radius:5px;font-family:var(--mono)}
.pctit{font-weight:800;font-size:1rem;margin-bottom:0.35rem}
.pcdesc{color:var(--txt2);font-size:0.8rem;line-height:1.6;font-family:var(--mono);margin-bottom:0.8rem}
.pctags{display:flex;gap:0.35rem;flex-wrap:wrap;margin-bottom:0.85rem}
.tc{font-size:0.65rem;font-weight:700;padding:0.14rem 0.5rem;border-radius:4px;font-family:var(--mono)}
.js{background:rgba(14,165,233,0.08);border:1px solid rgba(14,165,233,0.2);color:var(--acc2)}
.py{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);color:var(--acc3)}
.cs{background:rgba(236,72,153,0.08);border:1px solid rgba(236,72,153,0.2);color:var(--acc4)}
.sq{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);color:var(--grn)}
.ot{background:rgba(109,40,217,0.08);border:1px solid rgba(109,40,217,0.2);color:#a78bfa}
.pcf{display:flex;align-items:center;justify-content:space-between;padding:0.82rem 1.15rem;border-top:1px solid var(--bdr)}
.pctm{font-family:var(--mono);font-size:0.71rem;color:var(--txt3)}
.pcbtn{background:rgba(109,40,217,0.15);border:1px solid rgba(109,40,217,0.3);color:#a78bfa;font-size:0.75rem;font-weight:700;padding:0.32rem 0.82rem;border-radius:7px;cursor:pointer;font-family:var(--sans)}
.pcbtn:hover{background:rgba(109,40,217,0.28)}.pcbtn.lb2{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);color:var(--gold)}
.lov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.42rem;background:rgba(7,7,16,0.8);backdrop-filter:blur(4px);border-radius:var(--rl);opacity:0;transition:opacity 0.2s}
.pc.lk:hover .lov{opacity:1}
.loi{font-size:2.2rem}.lot{font-size:0.86rem;font-weight:700;color:var(--gold)}.los{font-size:0.74rem;color:var(--txt2);font-family:var(--mono)}
.lobtn{background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#000;font-weight:800;font-size:0.78rem;padding:0.48rem 1.2rem;border-radius:8px;cursor:pointer;margin-top:0.18rem;font-family:var(--sans)}
/* MODAL */
.mbox{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:710px;max-height:88vh;overflow-y:auto;position:relative;box-shadow:0 28px 70px rgba(0,0,0,0.6);animation:su 0.2s ease}
.mbox::-webkit-scrollbar{width:5px}.mbox::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
.mtb{height:4px;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc4))}
.mh{padding:1.55rem;display:flex;align-items:flex-start;gap:1rem;border-bottom:1px solid var(--bdr)}
.me{font-size:3rem;flex-shrink:0}.mtt{font-size:1.5rem;font-weight:800;letter-spacing:-0.4px}
.mm{display:flex;gap:0.42rem;flex-wrap:wrap;margin-top:0.42rem}
.mcl{position:absolute;top:0.9rem;right:0.9rem;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt2);width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.mcl:hover{color:var(--txt)}
.ms{padding:1.3rem 1.55rem;border-bottom:1px solid var(--bdr)}.ms:last-of-type{border-bottom:none}
.msh{font-family:var(--mono);font-size:0.67rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--acc2);margin-bottom:0.75rem}
.mp{color:var(--txt2);font-family:var(--mono);font-size:0.82rem;line-height:1.75}
.mcust{background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--r);padding:0.85rem 1rem;margin-bottom:0.85rem}
.mcrow{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center}
.mcrow select{background:var(--sur);border:1px solid var(--bdr2);color:var(--txt);border-radius:7px;padding:0.36rem 0.55rem;font-family:var(--mono);font-size:0.74rem;cursor:pointer;outline:none}
.sul{list-style:none;display:flex;flex-direction:column;gap:0.65rem}
.sul li{display:flex;gap:0.75rem;align-items:flex-start}
.sn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:white;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:800;flex-shrink:0}
.st{color:var(--txt2);font-family:var(--mono);font-size:0.8rem;line-height:1.65;padding-top:2px}
.cblk{background:var(--bg);border:1px solid var(--bdr2);border-radius:10px;padding:0.95rem;font-family:var(--mono);font-size:0.74rem;line-height:1.85;overflow-x:auto}
.cblk-lang{display:inline-block;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3);font-size:0.62rem;padding:0.1rem 0.46rem;border-radius:4px;margin-bottom:0.52rem}
.prow{display:flex;gap:0.6rem;flex-wrap:wrap}
.pb{padding:0.44rem 0.95rem;border-radius:8px;font-size:0.78rem;font-weight:700;font-family:var(--sans);cursor:pointer;border:1px solid;transition:all 0.15s}
.pbsv{background:rgba(109,40,217,0.12);color:#a78bfa;border-color:rgba(109,40,217,0.3)}
.pbst{background:rgba(245,158,11,0.1);color:var(--gold);border-color:rgba(245,158,11,0.3)}
.pbdn{background:rgba(16,185,129,0.1);color:var(--grn);border-color:rgba(16,185,129,0.3)}
.pb:hover{opacity:0.75;transform:scale(1.02)}
.mac{padding:1.15rem 1.55rem;border-top:1px solid var(--bdr);display:flex;gap:0.6rem;flex-wrap:wrap}
/* TIPS */
.tgw{max-width:1260px;margin:0 auto;padding:0 1.5rem 4rem}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.15rem}
.tc2{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;transition:transform 0.2s}
.tc2:hover{transform:translateY(-2px)}
.tctp{padding:1.15rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:0.8rem}
.ticn{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.tctt{font-weight:800;font-size:0.93rem}
.tcsb{color:var(--txt3);font-size:0.72rem;font-family:var(--mono);margin-top:0.1rem}
.tcbd{padding:1rem 1.15rem}
.tcbd p{color:var(--txt2);font-size:0.81rem;font-family:var(--mono);line-height:1.7;margin-bottom:0.75rem}
.tipc{background:var(--bg);border:1px solid var(--bdr);border-radius:9px;padding:0.85rem 0.9rem;font-family:var(--mono);font-size:0.73rem;line-height:1.85;overflow-x:auto}
.tcft{padding:0.62rem 1.15rem;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.lkbtn{background:transparent;border:1px solid var(--bdr);color:var(--txt3);padding:0.27rem 0.68rem;border-radius:6px;font-size:0.74rem;font-family:var(--sans);cursor:pointer;display:flex;align-items:center;gap:0.36rem;transition:all 0.15s}
.lkbtn:hover,.lkbtn.lkd{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.3);color:var(--red)}
.expbtn{background:transparent;border:1px solid rgba(109,40,217,0.3);color:#a78bfa;padding:0.27rem 0.68rem;border-radius:6px;font-size:0.74rem;font-family:var(--sans);cursor:pointer}
.expbtn:hover{background:rgba(109,40,217,0.1)}
/* AI */
.ail{max-width:840px;margin:0 auto;padding:0 1.5rem;height:calc(100vh - 60px);display:flex;flex-direction:column}
.aih{padding:1.3rem 0 0.85rem;display:flex;align-items:center;gap:0.82rem;border-bottom:1px solid var(--bdr)}
.aiav{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--acc),var(--acc2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.aitt{font-size:1.12rem;font-weight:800}.aisb{color:var(--txt2);font-size:0.74rem;font-family:var(--mono);margin-top:0.1rem}
.aists{margin-left:auto;display:flex;align-items:center;gap:0.36rem;font-family:var(--mono);font-size:0.72rem;color:var(--grn)}
.gd{width:7px;height:7px;background:var(--grn);border-radius:50%;animation:pulse 2s infinite}
.ailim{background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);border-radius:9px;padding:0.65rem 0.85rem;margin:0.6rem 0;display:none;align-items:center;justify-content:space-between;gap:0.6rem}
.ailim p{font-size:0.77rem;color:var(--gold);font-family:var(--mono)}
.ailim button{background:linear-gradient(135deg,#f59e0b,#ef4444);border:none;color:#000;font-weight:800;font-size:0.72rem;padding:0.3rem 0.7rem;border-radius:7px;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.cmsg-area{flex:1;overflow-y:auto;padding:1rem 0;display:flex;flex-direction:column;gap:1rem}
.cmsg-area::-webkit-scrollbar{width:5px}.cmsg-area::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:3px}
.cm{display:flex;gap:0.58rem;align-items:flex-start;animation:msgIn 0.2s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.cm.u{flex-direction:row-reverse}
.mav{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0}
.cm.ai .mav{background:linear-gradient(135deg,var(--acc),var(--acc2))}.cm.u .mav{background:var(--sur3);border:1px solid var(--bdr)}
.mb{max-width:76%;padding:0.82rem 1rem;border-radius:12px;font-size:0.81rem;line-height:1.7}
.cm.ai .mb{background:var(--sur2);border:1px solid var(--bdr);border-top-left-radius:3px;font-family:var(--mono)}
.cm.u .mb{background:linear-gradient(135deg,var(--acc),#9333ea);color:white;border-top-right-radius:3px;font-family:var(--mono)}
.mb code{background:rgba(0,0,0,0.35);padding:0.1rem 0.32rem;border-radius:4px;font-family:var(--mono);font-size:0.8em}
.mb pre{background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:0.82rem;margin-top:0.6rem;overflow-x:auto;font-size:0.75rem;line-height:1.7}
.mb strong{color:var(--acc2)}
.tyr{display:none;gap:0.58rem;align-items:center}.tyr.show{display:flex}
.tyb{background:var(--sur2);border:1px solid var(--bdr);padding:0.58rem 0.82rem;border-radius:12px;border-top-left-radius:3px;display:flex;gap:4px;align-items:center}
.tyd{width:5px;height:5px;background:var(--txt3);border-radius:50%;animation:tdot 1.2s infinite}
.tyd:nth-child(2){animation-delay:0.2s}.tyd:nth-child(3){animation-delay:0.4s}
@keyframes tdot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.qch{display:flex;gap:0.42rem;flex-wrap:wrap;padding:0.6rem 0}
.qc{background:var(--sur);border:1px solid var(--bdr);color:var(--txt2);padding:0.35rem 0.78rem;border-radius:7px;font-size:0.73rem;font-family:var(--mono);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.qc:hover{border-color:var(--acc);color:var(--txt)}
.cinr{display:flex;gap:0.52rem;align-items:flex-end;padding:0.65rem 0 0.9rem}
.ciw{flex:1;background:var(--sur);border:1px solid var(--bdr2);border-radius:12px;padding:0.62rem 0.92rem;display:flex;align-items:flex-end;transition:border-color 0.2s}
.ciw:focus-within{border-color:var(--acc)}
.ciw textarea{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-family:var(--mono);font-size:0.8rem;line-height:1.5;resize:none;min-height:22px;max-height:130px;overflow-y:auto}
.ciw textarea::placeholder{color:var(--txt3)}
.sbt{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;width:39px;height:39px;border-radius:10px;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:transform 0.15s;flex-shrink:0}
.sbt:hover{transform:scale(1.05)}.sbt:disabled{opacity:0.35;cursor:not-allowed;transform:none}
.cw{text-align:center;padding:2.2rem 1rem}
.cw .cwb{font-size:2.6rem;margin-bottom:0.65rem}
.cw h3{font-size:1.08rem;font-weight:800;margin-bottom:0.42rem}
.cw p{color:var(--txt2);font-family:var(--mono);font-size:0.79rem;line-height:1.7}
/* PRICING */
.pricew{max-width:1060px;margin:0 auto;padding:0 1.5rem 5rem}
.btog{display:flex;align-items:center;justify-content:center;gap:0.65rem;margin-bottom:2.4rem}
.tl{font-size:0.87rem;font-weight:600;color:var(--txt2)}
.tt{width:42px;height:22px;background:var(--sur2);border:1px solid var(--bdr2);border-radius:100px;cursor:pointer;position:relative;transition:background 0.2s}
.tt.on{background:var(--acc)}
.tth{position:absolute;top:2px;left:2px;width:16px;height:16px;background:white;border-radius:50%;transition:left 0.2s}
.tt.on .tth{left:22px}
.sb{background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);color:var(--grn);font-size:0.69rem;font-weight:700;padding:0.17rem 0.52rem;border-radius:100px;font-family:var(--mono)}
.plg{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.15rem;margin-bottom:2.4rem}
.plan{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.8rem;position:relative;overflow:hidden;transition:transform 0.2s}
.plan:hover{transform:translateY(-3px)}
.plan.pop{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 14px 40px rgba(245,158,11,0.2)}
.plan.ent{border-color:var(--acc2)}
.prib{position:absolute;top:0;right:0;background:linear-gradient(135deg,var(--gold),#ef4444);color:#000;font-size:0.6rem;font-weight:800;letter-spacing:1px;padding:0.3rem 0.9rem;border-bottom-left-radius:10px;font-family:var(--mono)}
.plni{font-size:2.2rem;margin-bottom:0.85rem}
.plnn{font-size:1.2rem;font-weight:800;margin-bottom:0.22rem}
.plnt{color:var(--txt2);font-size:0.79rem;font-family:var(--mono);margin-bottom:1.2rem}
.plnp{margin-bottom:1.2rem}
.plnp .amt{font-size:2.7rem;font-weight:800;line-height:1;letter-spacing:-2px}
.plnp .cur{font-size:1.2rem;vertical-align:top;margin-top:0.42rem;display:inline-block;color:var(--txt2)}
.plnp .per{font-size:0.78rem;color:var(--txt3);font-family:var(--mono);margin-left:3px}
.plnp .yr{font-size:0.7rem;color:var(--grn);font-family:var(--mono);margin-top:0.22rem;display:none}
.plnf{list-style:none;margin-bottom:1.8rem;display:flex;flex-direction:column;gap:0.5rem}
.plnf li{display:flex;align-items:flex-start;gap:0.5rem;font-size:0.8rem;font-family:var(--mono);color:var(--txt2)}
.plnf li .fi{flex-shrink:0;font-size:0.8rem;margin-top:1px}
.plnf li.inc{color:var(--txt)}.plnf li.exc{color:var(--txt3);text-decoration:line-through}
.plnbtn{width:100%;padding:0.8rem;border-radius:10px;font-family:var(--sans);font-size:0.92rem;font-weight:800;cursor:pointer;border:none;transition:all 0.2s}
.pfr{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt)}.pfr:hover{border-color:var(--acc)}
.ppr{background:linear-gradient(135deg,var(--gold),#ef4444);color:#000}.ppr:hover{opacity:0.9;transform:translateY(-1px)}
.pen{background:linear-gradient(135deg,var(--acc2),var(--acc));color:white}
.ftw{overflow-x:auto;margin-top:1.7rem}
.ft{width:100%;border-collapse:collapse;font-size:0.8rem}
.ft th{padding:0.68rem 0.9rem;text-align:left;font-family:var(--mono);font-size:0.67rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--bdr)}
.ft td{padding:0.68rem 0.9rem;border-bottom:1px solid var(--bdr);font-family:var(--mono);color:var(--txt2)}
.ft td:not(:first-child){text-align:center}
.ft tr:hover td{background:var(--sur2)}
.ftck{color:var(--grn);font-size:0.95rem}.ftcr{color:var(--bdr2);font-size:0.87rem}.ftn{color:var(--txt);font-weight:600}
/* UPSELL */
.upbox{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:440px;padding:1.9rem;position:relative;text-align:center;box-shadow:0 28px 70px rgba(0,0,0,0.6);animation:su 0.2s ease}
.upf{background:var(--bg2);border:1px solid var(--bdr2);border-radius:var(--r);padding:1rem 1.1rem;margin:1rem 0;text-align:left}
.upf ul{list-style:none;display:flex;flex-direction:column;gap:0.42rem;font-family:var(--mono);font-size:0.78rem;color:var(--txt2)}
/* TOAST */
.tstack{position:fixed;bottom:1.3rem;right:1.3rem;z-index:999;display:flex;flex-direction:column;gap:0.52rem}
.toast{background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:0.78rem 0.95rem;display:flex;align-items:center;gap:0.58rem;font-family:var(--mono);font-size:0.79rem;max-width:320px;box-shadow:0 8px 28px rgba(0,0,0,0.4);animation:tin 0.22s ease}
@keyframes tin{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.toast.success{border-color:rgba(16,185,129,0.4)}.toast.error{border-color:rgba(239,68,68,0.4)}.toast.info{border-color:rgba(14,165,233,0.35)}.toast.gold{border-color:rgba(245,158,11,0.4)}
.spin{display:inline-block;width:17px;height:17px;border:2px solid var(--bdr);border-top-color:var(--acc);border-radius:50%;animation:sp 0.7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ldph{padding:3rem;text-align:center;color:var(--txt3);font-family:var(--mono);font-size:0.82rem}

/* =====================================================
   FULL RESPONSIVE — Mobile First
   ===================================================== */

/* NAV — hamburger on mobile */
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:var(--sur2);border:1px solid var(--bdr);border-radius:8px;margin-left:auto}
.nav-ham span{display:block;width:20px;height:2px;background:var(--txt2);border-radius:2px;transition:all 0.25s}
.nav-ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(7,7,16,0.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);z-index:190;flex-direction:column;padding:0.8rem 1rem;gap:0.3rem}
.nav-mobile.open{display:flex}
.nav-mobile a{color:var(--txt2);text-decoration:none;font-size:0.9rem;font-weight:600;padding:0.65rem 0.9rem;border-radius:9px;cursor:pointer;transition:all 0.15s;display:block}
.nav-mobile a:hover,.nav-mobile a.active{background:var(--sur2);color:var(--txt)}
.nav-mobile .nav-m-divider{height:1px;background:var(--bdr);margin:0.3rem 0}
.nav-mobile .nav-m-btns{display:flex;gap:0.5rem;padding:0.4rem 0.6rem}

@media(max-width:768px){
  /* NAV */
  .nav-links{display:none !important}
  .nav-r{display:none !important}
  .nav-ham{display:flex}

  /* HERO */
  h1.hero-h{font-size:2.1rem;letter-spacing:-1px}
  .hero{padding:2rem 1rem 1.5rem}
  .hero-sub{font-size:0.87rem}
  .hero-cta{flex-direction:column;align-items:center}
  .btn-hp,.btn-hs{width:100%;max-width:320px}
  .term{display:none}
  .stats{gap:1.2rem;padding:1.5rem 1rem 2rem}
  .sc .n{font-size:1.6rem}

  /* SECTIONS */
  .sec-head{padding:2rem 1rem 1.5rem}
  .sec-head h2{font-size:1.7rem}

  /* PROJECTS */
  .pw{padding:0 0.85rem 3rem}
  .cbar{flex-direction:column;align-items:flex-start;gap:0.65rem}
  .cgrp{flex-wrap:wrap}
  .csel{min-width:0;flex:1}
  .csep{display:none}
  .pgrid{grid-template-columns:1fr}
  .frow{gap:0.35rem}
  .chip{font-size:0.7rem;padding:0.28rem 0.62rem}

  /* PROJECT MODAL */
  .ov{padding:0;align-items:flex-end}
  .mbox{max-width:100%;border-radius:var(--rl) var(--rl) 0 0;max-height:92vh}
  .arena-mbox{max-width:100%;border-radius:var(--rl) var(--rl) 0 0;max-height:95vh}
  .arena-body{grid-template-columns:1fr;overflow-y:auto}
  .arena-left{border-right:none;border-bottom:1px solid var(--bdr);max-height:300px}
  .arena-right{min-height:300px}
  .atopbar{flex-wrap:wrap;gap:0.5rem}
  .atvs{font-size:0.7rem}
  .attimer{font-size:0.88rem}
  .mcust .mcrow{flex-wrap:wrap;gap:0.4rem}
  .mcust select{font-size:0.72rem;padding:0.3rem 0.4rem}
  .mac{flex-wrap:wrap}

  /* AUTH */
  .abox{max-width:100%;border-radius:var(--rl) var(--rl) 0 0}
  .upbox{max-width:100%;border-radius:var(--rl) var(--rl) 0 0}

  /* PRICING */
  .pricew{padding:0 0.85rem 3rem}
  .plg{grid-template-columns:1fr}
  .btog{flex-wrap:wrap;justify-content:center}
  .ftw{margin:0 -0.85rem}
  .ft{font-size:0.72rem}
  .ft th,.ft td{padding:0.5rem 0.6rem}

  /* TIPS / KUNSKAPSBANKEN */
  .kbwrap{padding:0 0.85rem 3rem}
  .kb-grid{grid-template-columns:1fr}
  .kb-cattabs{gap:0.3rem}
  .kb-ctab{padding:0.38rem 0.75rem;font-size:0.75rem}
  .kb-tags{gap:0.28rem}
  .kb-tag{font-size:0.68rem;padding:0.22rem 0.55rem}
  .kb-search-inp{font-size:0.82rem;padding:0.72rem 2.5rem}
  .kb-card-head{padding:0.85rem 0.95rem 0.55rem}
  .kb-card-body{padding:0 0.95rem 0.75rem}
  .kb-card-foot{padding:0.6rem 0.95rem;flex-direction:column;align-items:flex-start;gap:0.45rem}
  .kb-ticker{padding:0.55rem 0.85rem}
  .kb-ticker-lbl{font-size:0.6rem}
  .kb-ticker-track{font-size:0.72rem}

  /* AI / KODBOT */
  .ail{padding:0 0.85rem}
  .aih{padding:1rem 0 0.75rem}
  .aitt{font-size:0.98rem}
  .cmsg-area{padding:0.75rem 0}
  .mb{max-width:88%;font-size:0.79rem}
  .qch{gap:0.32rem}
  .qc{font-size:0.7rem;padding:0.3rem 0.62rem}
  .cinr{gap:0.38rem;padding:0.5rem 0 0.7rem}

  /* CHALLENGE */
  .chal-wrap{padding:0 0.85rem 3rem}
  .chal-hero{padding:1.5rem}
  .chal-hero h2{font-size:1.4rem}
  .chal-hero-btns{flex-direction:column}
  .btn-cc,.btn-qj{width:100%}
  .ctabs{overflow-x:auto;gap:0.3rem;padding:0.25rem}
  .ctab{font-size:0.75rem;padding:0.45rem 0.7rem;white-space:nowrap}
  .agrid{grid-template-columns:1fr}
  .create-form,.cfg2{display:block}
  .cfg2>div{margin-bottom:0}
  .modebtns{flex-wrap:wrap}
  .modebtn{min-width:calc(50% - 0.25rem)}
  .lbtable{font-size:0.72rem}
  .lbtable th,.lbtable td{padding:0.5rem 0.55rem}

  /* TOAST */
  .tstack{bottom:0.7rem;right:0.7rem;left:0.7rem}
  .toast{max-width:100%;font-size:0.76rem}
}

@media(max-width:480px){
  h1.hero-h{font-size:1.75rem}
  .sec-head h2{font-size:1.4rem}
  .stats{grid-template-columns:1fr 1fr;display:grid;gap:0.8rem}
  .kb-card-title{font-size:0.88rem}
  .plg{grid-template-columns:1fr}
  .plan{padding:1.3rem}
  .kb-step-t{font-size:0.75rem}
  .arena-body{grid-template-columns:1fr}
  .atvs{display:none}
}

@media(min-width:769px) and (max-width:1024px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .kb-grid{grid-template-columns:repeat(2,1fr)}
  .agrid{grid-template-columns:repeat(2,1fr)}
  .plg{grid-template-columns:repeat(2,1fr)}
  .stats{gap:1.5rem}
}


/* CHALLENGE */
.chal-wrap{max-width:1260px;margin:0 auto;padding:0 1.5rem 5rem}
.chal-hero{background:linear-gradient(135deg,rgba(109,40,217,0.15),rgba(14,165,233,0.08));border:1px solid var(--bdr2);border-radius:var(--rl);padding:2.2rem;text-align:center;margin-bottom:1.8rem;position:relative;overflow:hidden}
.chal-hero::before{content:'⚔️';position:absolute;font-size:10rem;opacity:0.05;top:-10px;right:-10px;line-height:1}
.chal-hero h2{font-size:1.9rem;font-weight:800;letter-spacing:-1px;margin-bottom:0.5rem}
.chal-hero p{color:var(--txt2);font-family:var(--mono);font-size:0.83rem;line-height:1.7;max-width:520px;margin:0 auto 1.3rem}
.chal-hero-btns{display:flex;gap:0.75rem;justify-content:center;flex-wrap:wrap}
.btn-cc{background:linear-gradient(135deg,var(--acc),#9333ea);border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.9rem;padding:0.72rem 1.7rem;border-radius:11px;cursor:pointer;box-shadow:0 4px 20px var(--glow);transition:transform 0.2s}
.btn-cc:hover{transform:translateY(-2px)}
.btn-qj{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt);font-family:var(--sans);font-weight:700;font-size:0.9rem;padding:0.72rem 1.7rem;border-radius:11px;cursor:pointer}
.ctabs{display:flex;gap:0.45rem;margin-bottom:1.4rem;background:var(--sur);border:1px solid var(--bdr);border-radius:10px;padding:0.28rem}
.ctab{flex:1;padding:0.52rem;border:none;background:transparent;color:var(--txt2);font-family:var(--sans);font-size:0.8rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all 0.15s}
.ctab.active{background:var(--sur3);color:var(--txt);border:1px solid var(--bdr2)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.1rem}
.acard{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;transition:transform 0.2s,border-color 0.2s;cursor:pointer}
.acard:hover{transform:translateY(-3px);border-color:var(--bdr2)}
.acard.live{border-color:rgba(16,185,129,0.4)}
.acard.waiting{border-color:rgba(245,158,11,0.3)}
.act{padding:1.1rem;border-bottom:1px solid var(--bdr);display:flex;gap:0.82rem;align-items:flex-start}
.acico{font-size:1.9rem;flex-shrink:0}
.actit{font-weight:800;font-size:0.93rem;margin-bottom:0.22rem}
.acmeta{display:flex;gap:0.38rem;flex-wrap:wrap;align-items:center;margin-top:0.2rem}
.diff-e{background:rgba(16,185,129,0.12);color:var(--grn);border:1px solid rgba(16,185,129,0.25);font-size:0.62rem;font-weight:800;padding:0.15rem 0.48rem;border-radius:5px;font-family:var(--mono)}
.diff-m{background:rgba(245,158,11,0.12);color:var(--gold);border:1px solid rgba(245,158,11,0.25);font-size:0.62rem;font-weight:800;padding:0.15rem 0.48rem;border-radius:5px;font-family:var(--mono)}
.diff-h{background:rgba(239,68,68,0.12);color:var(--red);border:1px solid rgba(239,68,68,0.25);font-size:0.62rem;font-weight:800;padding:0.15rem 0.48rem;border-radius:5px;font-family:var(--mono)}
.slive{background:rgba(16,185,129,0.1);color:var(--grn);border:1px solid rgba(16,185,129,0.25);font-size:0.62rem;font-weight:800;padding:0.15rem 0.48rem;border-radius:5px;font-family:var(--mono);display:inline-flex;align-items:center;gap:0.3rem}
.slive::before{content:'';width:5px;height:5px;background:var(--grn);border-radius:50%;animation:pulse 1.5s infinite}
.swait{background:rgba(245,158,11,0.1);color:var(--gold);border:1px solid rgba(245,158,11,0.25);font-size:0.62rem;font-weight:800;padding:0.15rem 0.48rem;border-radius:5px;font-family:var(--mono)}
.acb{padding:0.85rem 1.1rem}
.acdesc{color:var(--txt2);font-size:0.8rem;font-family:var(--mono);line-height:1.6;margin-bottom:0.65rem}
.acplayers{display:flex;align-items:center;gap:0.65rem;font-size:0.77rem;font-family:var(--mono)}
.pslot{display:flex;align-items:center;gap:0.32rem;background:var(--bg2);border:1px solid var(--bdr);padding:0.25rem 0.55rem;border-radius:7px}
.pslot.empty{border-style:dashed;color:var(--txt3)}
.pav{font-size:0.88rem}.pnm{font-weight:700;font-size:0.74rem}
.pxp{font-size:0.67rem;color:var(--acc2)}
.vsbadge{font-size:0.7rem;font-weight:800;color:var(--txt3)}
.acf{display:flex;align-items:center;justify-content:space-between;padding:0.72rem 1.1rem;border-top:1px solid var(--bdr)}
.actimer{font-family:var(--mono);font-size:0.72rem;color:var(--txt3)}
.acbtn{font-size:0.76rem;font-weight:700;padding:0.33rem 0.85rem;border-radius:7px;cursor:pointer;border:none;font-family:var(--sans);transition:all 0.15s}
.acbtn.join{background:linear-gradient(135deg,var(--acc),var(--acc2));color:white}
.acbtn.watch{background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.3);color:var(--acc2)}
.acbtn.retry{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt2)}
.lbtable{width:100%;border-collapse:collapse}
.lbtable th{padding:0.65rem 0.95rem;text-align:left;font-family:var(--mono);font-size:0.66rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);border-bottom:1px solid var(--bdr)}
.lbtable td{padding:0.72rem 0.95rem;border-bottom:1px solid var(--bdr);font-family:var(--mono);font-size:0.8rem}
.lbtable tr:hover td{background:var(--sur2)}
.lbrank{font-weight:800;color:var(--txt3)}.lbrank.gold{color:var(--gold)}.lbrank.silver{color:#94a3b8}.lbrank.bronze{color:#cd7f32}
.lbuser{display:flex;align-items:center;gap:0.55rem}
.lbbar{display:flex;align-items:center;gap:0.45rem}
.lbbarbg{flex:1;height:5px;background:var(--sur2);border-radius:100px;max-width:110px}
.lbbarfill{height:5px;border-radius:100px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.lbpts{color:var(--acc2);font-weight:700}
/* ARENA MODAL */
.arena-mbox{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:1000px;max-height:92vh;overflow:hidden;position:relative;box-shadow:0 32px 80px rgba(0,0,0,0.6);animation:su 0.2s ease;display:flex;flex-direction:column}
.atopbar{padding:0.85rem 1.1rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:0.85rem;background:var(--sur2);flex-shrink:0}
.attitle{font-weight:800;font-size:0.95rem;flex:1}
.atvs{display:flex;align-items:center;gap:0.55rem;font-family:var(--mono);font-size:0.78rem}
.atplayer{display:flex;align-items:center;gap:0.35rem;background:var(--sur);border:1px solid var(--bdr);padding:0.22rem 0.6rem;border-radius:8px}
.attimer{font-family:var(--mono);font-size:1rem;font-weight:700;color:var(--acc3);background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);padding:0.22rem 0.7rem;border-radius:8px}
.arena-body{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden}
.arena-left{border-right:1px solid var(--bdr);overflow-y:auto;padding:1.1rem}
.arena-left::-webkit-scrollbar{width:4px}.arena-left::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}
.arena-right{display:flex;flex-direction:column;overflow:hidden}
.etoolbar{padding:0.52rem 0.95rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:0.5rem;background:var(--sur2);flex-shrink:0}
.elangsel{background:var(--bg2);border:1px solid var(--bdr2);color:var(--txt);border-radius:6px;padding:0.26rem 0.52rem;font-family:var(--mono);font-size:0.73rem;cursor:pointer;outline:none}
.runbtn{background:linear-gradient(135deg,var(--grn),#059669);border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.73rem;padding:0.28rem 0.82rem;border-radius:7px;cursor:pointer;margin-left:auto}
.subbtn{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.73rem;padding:0.28rem 0.82rem;border-radius:7px;cursor:pointer}
.codeeditor{flex:1;background:var(--bg);border:none;outline:none;color:var(--txt);font-family:var(--mono);font-size:0.78rem;line-height:1.75;padding:0.95rem;resize:none;width:100%;min-height:240px}
.testpanel{border-top:1px solid var(--bdr);padding:0.7rem 0.95rem;background:var(--bg2);flex-shrink:0;min-height:75px}
.tptitle{font-family:var(--mono);font-size:0.63rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.42rem}
.tpresult{font-family:var(--mono);font-size:0.74rem;line-height:1.65}
.tpass{color:var(--grn)}.tfail{color:var(--red)}
/* PROB PANEL */
.ptitle{font-size:1rem;font-weight:800;margin-bottom:0.45rem}
.pdesc{color:var(--txt2);font-family:var(--mono);font-size:0.79rem;line-height:1.75;margin-bottom:0.85rem}
.pex{background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:0.65rem;font-family:var(--mono);font-size:0.73rem;margin-bottom:0.45rem}
.pexlbl{color:var(--acc2);font-size:0.63rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:0.28rem}
.pcon{background:rgba(109,40,217,0.06);border:1px solid rgba(109,40,217,0.15);border-radius:8px;padding:0.65rem 0.85rem;margin-top:0.75rem}
.pconlbl{color:var(--acc);font-size:0.63rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:0.35rem;font-family:var(--mono)}
.pcon li{font-family:var(--mono);font-size:0.72rem;color:var(--txt2);margin-left:1rem;line-height:1.75}
/* CREATE FORM */
.cflbl{display:block;font-size:0.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.38rem;font-family:var(--mono)}
.cfinp{width:100%;background:var(--bg2);border:1px solid var(--bdr2);border-radius:9px;padding:0.62rem 0.9rem;color:var(--txt);font-family:var(--mono);font-size:0.83rem;outline:none;transition:border-color 0.2s;margin-bottom:0.9rem}
.cfinp:focus{border-color:var(--acc)}.cfinp::placeholder{color:var(--txt3)}
.cfsel{width:100%;background:var(--bg2);border:1px solid var(--bdr2);color:var(--txt);border-radius:9px;padding:0.62rem 0.9rem;font-family:var(--mono);font-size:0.83rem;outline:none;cursor:pointer;margin-bottom:0.9rem}
.cfg2{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem}
.modebtns{display:flex;gap:0.45rem;margin-bottom:0.9rem}
.modebtn{flex:1;padding:0.62rem;border-radius:9px;font-family:var(--sans);font-size:0.8rem;font-weight:700;cursor:pointer;border:1px solid var(--bdr);background:var(--sur2);color:var(--txt2);transition:all 0.15s;text-align:center}
.modebtn.sel{background:rgba(109,40,217,0.15);border-color:var(--acc);color:var(--txt)}
.invtag{display:inline-flex;align-items:center;gap:0.28rem;background:rgba(109,40,217,0.12);border:1px solid rgba(109,40,217,0.25);color:#a78bfa;padding:0.2rem 0.55rem;border-radius:6px;font-size:0.73rem;font-family:var(--mono);margin:0.2rem 0.2rem 0 0}
.invtag button{background:none;border:none;color:#a78bfa;cursor:pointer;font-size:0.9rem;line-height:1;padding:0}
/* ===== KUNSKAPSBANKEN ===== */
.kbwrap{max-width:1280px;margin:0 auto;padding:0 1.5rem 4rem}
.kb-search-row{margin-bottom:1.2rem}
.kb-search-wrap{position:relative;max-width:620px;margin:0 auto}
.kb-search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:1rem;pointer-events:none}
.kb-search-inp{width:100%;background:var(--sur);border:1px solid var(--bdr2);border-radius:14px;padding:0.82rem 2.8rem 0.82rem 2.8rem;color:var(--txt);font-family:var(--mono);font-size:0.88rem;outline:none;transition:border-color 0.2s,box-shadow 0.2s}
.kb-search-inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}
.kb-search-inp::placeholder{color:var(--txt3)}
.kb-clear{position:absolute;right:0.9rem;top:50%;transform:translateY(-50%);background:var(--sur2);border:1px solid var(--bdr);color:var(--txt2);width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:0.78rem;display:flex;align-items:center;justify-content:center}
.kb-cattabs{display:flex;gap:0.45rem;flex-wrap:wrap;margin-bottom:1rem}
.kb-ctab{background:var(--sur);border:1px solid var(--bdr);color:var(--txt2);padding:0.42rem 1rem;border-radius:100px;font-size:0.8rem;font-weight:700;font-family:var(--sans);cursor:pointer;transition:all 0.15s;white-space:nowrap}
.kb-ctab:hover{border-color:var(--bdr2);color:var(--txt)}
.kb-ctab.active{background:rgba(109,40,217,0.15);border-color:var(--acc);color:var(--txt)}
.kb-tagrow{display:flex;align-items:flex-start;gap:0.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.kb-taglbl{font-family:var(--mono);font-size:0.67rem;color:var(--txt3);letter-spacing:1px;text-transform:uppercase;padding-top:0.4rem;white-space:nowrap}
.kb-tags{display:flex;gap:0.38rem;flex-wrap:wrap}
.kb-tag{background:var(--bg2);border:1px solid var(--bdr);color:var(--txt3);padding:0.28rem 0.7rem;border-radius:100px;font-size:0.72rem;font-weight:600;font-family:var(--mono);cursor:pointer;transition:all 0.15s}
.kb-tag:hover{border-color:var(--bdr2);color:var(--txt2)}
.kb-tag.active{background:rgba(14,165,233,0.12);border-color:var(--acc2);color:var(--acc2)}
/* KB GRID */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.2rem;margin-bottom:2rem}
/* KB CARD */
.kb-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;transition:transform 0.2s,border-color 0.2s;display:flex;flex-direction:column}
.kb-card:hover{transform:translateY(-3px);border-color:var(--bdr2)}
.kb-card.featured{border-color:rgba(109,40,217,0.4);box-shadow:0 0 0 1px rgba(109,40,217,0.12),0 8px 32px rgba(109,40,217,0.1)}
.kb-card.ai-card{border-color:rgba(14,165,233,0.3)}
.kb-card.krav-card{border-color:rgba(16,185,129,0.3)}
.kb-card.news-card{border-color:rgba(245,158,11,0.3)}
.kb-card-top{height:4px}
.kb-card-top.kod{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.kb-card-top.ai{background:linear-gradient(90deg,var(--acc2),var(--grn))}
.kb-card-top.krav{background:linear-gradient(90deg,var(--grn),var(--acc3))}
.kb-card-top.nyheter{background:linear-gradient(90deg,var(--acc3),var(--red))}
.kb-card-head{padding:1.1rem 1.2rem 0.7rem;display:flex;gap:0.85rem;align-items:flex-start}
.kb-card-ico{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.kb-card-meta{flex:1;min-width:0}
.kb-card-title{font-weight:800;font-size:0.97rem;line-height:1.3;margin-bottom:0.3rem}
.kb-card-badges{display:flex;gap:0.35rem;flex-wrap:wrap}
.kb-badge{font-size:0.6rem;font-weight:800;padding:0.12rem 0.45rem;border-radius:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:0.5px}
.kb-b-kod{background:rgba(109,40,217,0.12);border:1px solid rgba(109,40,217,0.25);color:#a78bfa}
.kb-b-ai{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.25);color:var(--acc2)}
.kb-b-krav{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);color:var(--grn)}
.kb-b-nyheter{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);color:var(--gold)}
.kb-b-new{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:var(--red)}
.kb-card-body{padding:0 1.2rem 0.85rem;flex:1;display:flex;flex-direction:column;gap:0.65rem}
.kb-card-desc{color:var(--txt2);font-family:var(--mono);font-size:0.8rem;line-height:1.72}
.kb-card-code{background:var(--bg);border:1px solid var(--bdr);border-radius:9px;padding:0.85rem;font-family:var(--mono);font-size:0.74rem;line-height:1.85;overflow-x:auto}
.kb-card-code-lang{display:inline-block;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3);font-size:0.6rem;padding:0.08rem 0.42rem;border-radius:3px;margin-bottom:0.45rem}
.kb-card-expand{background:var(--bg2);border:1px solid var(--bdr);border-radius:9px;padding:0.85rem;font-family:var(--mono);font-size:0.79rem;color:var(--txt2);line-height:1.75;display:none}
.kb-card-expand.open{display:block}
.kb-card-foot{padding:0.75rem 1.2rem;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap}
.kb-foot-tags{display:flex;gap:0.32rem;flex-wrap:wrap}
.kb-ft{font-size:0.62rem;font-weight:700;padding:0.12rem 0.45rem;border-radius:4px;font-family:var(--mono);background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3)}
.kb-foot-actions{display:flex;gap:0.38rem}
.kb-lkbtn{background:transparent;border:1px solid var(--bdr);color:var(--txt3);padding:0.26rem 0.65rem;border-radius:6px;font-size:0.72rem;font-family:var(--sans);cursor:pointer;display:flex;align-items:center;gap:0.32rem;transition:all 0.15s}
.kb-lkbtn:hover,.kb-lkbtn.lkd{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.3);color:var(--red)}
.kb-expbtn{background:transparent;border:1px solid rgba(109,40,217,0.3);color:#a78bfa;padding:0.26rem 0.65rem;border-radius:6px;font-size:0.72rem;font-family:var(--sans);cursor:pointer;transition:all 0.15s}
.kb-expbtn:hover{background:rgba(109,40,217,0.1)}
.kb-readbtn{background:transparent;border:1px solid rgba(14,165,233,0.3);color:var(--acc2);padding:0.26rem 0.65rem;border-radius:6px;font-size:0.72rem;font-family:var(--sans);cursor:pointer;transition:all 0.15s}
.kb-readbtn:hover{background:rgba(14,165,233,0.1)}
/* NEWS CARD SPECIAL */
.kb-news-source{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.7rem;color:var(--txt3);margin-bottom:0.4rem}
.kb-news-dot{width:6px;height:6px;border-radius:50%;background:var(--grn);animation:pulse 2s infinite;flex-shrink:0}
.kb-news-date{font-family:var(--mono);font-size:0.68rem;color:var(--txt3)}
/* TICKER */
.kb-ticker{background:var(--sur2);border:1px solid var(--bdr2);border-radius:11px;padding:0.7rem 1.1rem;display:flex;align-items:center;gap:0.85rem;overflow:hidden;position:relative}
.kb-ticker-lbl{font-family:var(--mono);font-size:0.67rem;font-weight:800;letter-spacing:1.5px;color:var(--acc3);white-space:nowrap;flex-shrink:0}
.kb-ticker-track{font-family:var(--mono);font-size:0.78rem;color:var(--txt2);white-space:nowrap;animation:ticker 40s linear infinite}
@keyframes ticker{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
/* AI GUIDE SPECIAL */
.kb-steps{display:flex;flex-direction:column;gap:0.52rem;margin-top:0.3rem}
.kb-step{display:flex;gap:0.65rem;align-items:flex-start}
.kb-step-n{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--acc),var(--acc2));color:white;font-size:0.67rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.kb-step-t{font-family:var(--mono);font-size:0.78rem;color:var(--txt2);line-height:1.65}
/* SEARCH RESULTS */
.kb-no-results{text-align:center;padding:3rem;color:var(--txt3);font-family:var(--mono);font-size:0.85rem}
.kb-results-count{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);margin-bottom:0.85rem}


/* Touch & mobile optimizations */
*{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html{scroll-behavior:smooth}
button,a,[onclick]{cursor:pointer}
input,select,textarea{font-size:16px !important} /* prevent iOS zoom on focus */
.cbar select,.editor-lang-sel,.elangsel{font-size:16px !important}
/* Scrollable horizontal containers on mobile */
.frow,.kb-cattabs,.ctabs,.acmeta,.kb-tags,.pctags{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.frow::-webkit-scrollbar,.kb-cattabs::-webkit-scrollbar,.ctabs::-webkit-scrollbar{display:none}
/* Sticky search on knowledge page */
@media(max-width:768px){
  .kb-search-row{position:sticky;top:60px;z-index:50;background:var(--bg);padding:0.65rem 0 0.4rem;margin-bottom:0.6rem}
}
/* Better tap targets */
@media(max-width:768px){
  .chip,.kb-ctab,.kb-tag,.ctab{min-height:36px;display:inline-flex;align-items:center}
  .acbtn,.kb-lkbtn,.kb-expbtn,.kb-readbtn,.lkbtn,.expbtn{min-height:34px}
  .pcbtn,.ac-btn{min-height:34px}
  .nav-mobile a{min-height:44px;display:flex;align-items:center}
}


/* ===== DAILY CHALLENGE ===== */
.daily-wrap{max-width:860px;margin:0 auto;padding:0 1.5rem 5rem}
.streak-bar{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);padding:1.4rem 1.6rem;margin-bottom:1.6rem;display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}
.streak-days{display:flex;gap:0.38rem;flex-wrap:wrap;flex:1;min-width:200px}
.sd{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:0.9rem;position:relative;flex-shrink:0}
.sd.done{background:linear-gradient(135deg,var(--acc),var(--acc2));box-shadow:0 2px 8px var(--glow)}
.sd.today{background:rgba(245,158,11,0.15);border:2px solid var(--gold)}
.sd.miss{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3)}
.sd.future{background:var(--bg2);border:1px dashed var(--bdr);color:var(--bdr2)}
.sd-lbl{position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);font-size:0.55rem;font-family:var(--mono);color:var(--txt3);white-space:nowrap}
.streak-stats{display:flex;gap:1.4rem;flex-shrink:0}
.streak-stat{text-align:center}
.ss-val{font-size:1.8rem;font-weight:800;line-height:1;letter-spacing:-1px;color:var(--txt)}
.ss-val.xp-val{color:var(--acc2)}
.ss-lbl{font-size:0.68rem;font-family:var(--mono);color:var(--txt3);margin-top:0.18rem}
/* Daily card */
.daily-card{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);overflow:hidden;margin-bottom:1.6rem}
.dc-top{height:5px;background:linear-gradient(90deg,var(--acc3),var(--red),var(--acc))}
.dc-head{padding:1.5rem;display:flex;align-items:flex-start;gap:1.1rem;border-bottom:1px solid var(--bdr)}
.dc-ico{font-size:3rem;flex-shrink:0}
.dc-meta{flex:1}
.dc-label{font-family:var(--mono);font-size:0.67rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--acc3);margin-bottom:0.3rem;display:flex;align-items:center;gap:0.5rem}
.dc-countdown{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);background:var(--sur2);border:1px solid var(--bdr);padding:0.18rem 0.55rem;border-radius:6px}
.dc-title{font-size:1.4rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:0.42rem}
.dc-badges{display:flex;gap:0.42rem;flex-wrap:wrap}
.dc-xp{background:rgba(14,165,233,0.12);border:1px solid rgba(14,165,233,0.25);color:var(--acc2);font-family:var(--mono);font-size:0.7rem;font-weight:800;padding:0.18rem 0.55rem;border-radius:6px}
.dc-bonus{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.25);color:var(--gold);font-family:var(--mono);font-size:0.7rem;font-weight:800;padding:0.18rem 0.55rem;border-radius:6px;animation:pulse 2s infinite}
.dc-diff{font-size:0.62rem;font-weight:800;padding:0.18rem 0.55rem;border-radius:5px;font-family:var(--mono)}
.dc-body{padding:1.4rem 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.dc-desc{color:var(--txt2);font-family:var(--mono);font-size:0.82rem;line-height:1.75}
.dc-right{display:flex;flex-direction:column;gap:0.85rem}
.dc-example{background:var(--bg);border:1px solid var(--bdr);border-radius:9px;padding:0.85rem;font-family:var(--mono);font-size:0.75rem;line-height:1.75}
.dc-ex-lbl{color:var(--acc2);font-size:0.63rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:0.3rem}
.dc-foot{padding:1rem 1.5rem;border-top:1px solid var(--bdr);display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.dc-submit{background:linear-gradient(135deg,var(--acc3),var(--red));border:none;color:#000;font-weight:800;font-size:0.9rem;padding:0.72rem 1.8rem;border-radius:10px;cursor:pointer;font-family:var(--sans);transition:transform 0.2s;box-shadow:0 4px 16px rgba(245,158,11,0.3)}
.dc-submit:hover{transform:translateY(-2px)}
.dc-submit.done-btn{background:var(--grn);color:white;box-shadow:0 4px 16px rgba(16,185,129,0.3)}
.dc-code-btn{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt);font-family:var(--sans);font-size:0.82rem;font-weight:700;padding:0.62rem 1.2rem;border-radius:10px;cursor:pointer}
.dc-share{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.3);color:var(--acc2);font-family:var(--sans);font-size:0.8rem;font-weight:700;padding:0.62rem 1rem;border-radius:10px;cursor:pointer}
.dc-completed-banner{background:linear-gradient(135deg,rgba(16,185,129,0.15),rgba(14,165,233,0.08));border:1px solid rgba(16,185,129,0.3);border-radius:10px;padding:1rem 1.2rem;display:flex;align-items:center;gap:0.85rem;font-family:var(--mono);font-size:0.82rem;color:var(--txt2)}
/* Calendar */
.daily-cal-wrap{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.3rem 1.5rem;margin-bottom:1.4rem}
.daily-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.daily-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-lbl{font-family:var(--mono);font-size:0.6rem;color:var(--txt3);text-align:center;padding-bottom:3px}
.cal-cell{aspect-ratio:1;border-radius:5px;position:relative}
.cal-cell.has{background:rgba(109,40,217,0.4);cursor:pointer}
.cal-cell.has.streak{background:linear-gradient(135deg,var(--acc3),var(--red))}
.cal-cell.today-cal{box-shadow:0 0 0 2px var(--gold)}
.cal-cell.empty{background:var(--sur2);opacity:0.4}
.cal-cell.off{background:transparent}
/* Past challenges */
.daily-past-head{font-family:var(--mono);font-size:0.67rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.85rem}
.daily-past{display:flex;flex-direction:column;gap:0.65rem}
.past-item{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:0.85rem 1.1rem;display:flex;align-items:center;gap:0.9rem;cursor:pointer;transition:border-color 0.15s}
.past-item:hover{border-color:var(--bdr2)}
.past-ico{font-size:1.5rem;flex-shrink:0}
.past-info{flex:1;min-width:0}
.past-title{font-weight:700;font-size:0.88rem}
.past-meta{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);margin-top:0.18rem}
.past-badge{font-family:var(--mono);font-size:0.68rem;font-weight:800;padding:0.15rem 0.5rem;border-radius:5px;flex-shrink:0}
.pb-done{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);color:var(--grn)}
.pb-miss{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3)}

/* ===== DASHBOARD ===== */
.db-wrap{max-width:1060px;margin:0 auto;padding:0 1.5rem 5rem}
.db-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem;margin-bottom:1.4rem}
.db-stat{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.2rem;text-align:center;position:relative;overflow:hidden}
.db-stat::before{content:attr(data-ico);position:absolute;font-size:3.5rem;opacity:0.06;bottom:-8px;right:-4px;line-height:1}
.dbs-val{font-size:2rem;font-weight:800;letter-spacing:-1px;margin-bottom:0.2rem}
.dbs-lbl{font-size:0.72rem;font-family:var(--mono);color:var(--txt3)}
.dbs-sub{font-size:0.68rem;font-family:var(--mono);margin-top:0.3rem}
/* XP card */
.db-xp-card{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);padding:1.4rem 1.6rem;margin-bottom:1.4rem}
.db-xp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem}
.db-level{font-size:1.1rem;font-weight:800}
.db-level span{color:var(--acc2);font-family:var(--mono)}
.db-xp-nums{font-family:var(--mono);font-size:0.78rem;color:var(--txt2)}
.db-xp-bar-bg{height:14px;background:var(--sur2);border-radius:100px;overflow:hidden;position:relative}
.db-xp-bar-fill{height:14px;border-radius:100px;background:linear-gradient(90deg,var(--acc),var(--acc2),var(--acc4));transition:width 1.2s cubic-bezier(0.34,1.56,0.64,1);position:relative}
.db-xp-bar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.db-xp-milestones{display:flex;justify-content:space-between;margin-top:0.55rem}
.db-milestone{font-family:var(--mono);font-size:0.62rem;color:var(--txt3);text-align:center}
.db-milestone.reached{color:var(--acc2)}
/* Cols */
.db-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-bottom:0.5rem}
.db-col{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.2rem}
.db-section-head{font-family:var(--mono);font-size:0.67rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--txt3);margin-bottom:1rem}
/* Badges */
.db-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:0.75rem}
.db-badge{display:flex;flex-direction:column;align-items:center;gap:0.38rem;padding:0.75rem 0.4rem;border-radius:10px;border:1px solid var(--bdr);background:var(--bg2);text-align:center;transition:transform 0.2s}
.db-badge:hover{transform:scale(1.06)}
.db-badge.locked{opacity:0.35;filter:grayscale(1)}
.db-badge.unlocked{border-color:rgba(245,158,11,0.35);background:rgba(245,158,11,0.05)}
.dbb-ico{font-size:1.8rem}
.dbb-name{font-family:var(--mono);font-size:0.6rem;font-weight:700;color:var(--txt2);line-height:1.3}
.dbb-unlocked-lbl{font-size:0.55rem;color:var(--gold);font-family:var(--mono)}
/* Activity heatmap */
.db-activity{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.act-cell{aspect-ratio:1;border-radius:4px;transition:transform 0.15s;cursor:pointer;position:relative}
.act-cell:hover{transform:scale(1.3)}
.act-0{background:var(--sur2)}
.act-1{background:rgba(109,40,217,0.25)}
.act-2{background:rgba(109,40,217,0.5)}
.act-3{background:rgba(109,40,217,0.75)}
.act-4{background:var(--acc);box-shadow:0 0 6px var(--glow)}
/* Projects list */
.db-projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0.85rem;margin-bottom:1.6rem}
.db-proj{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--r);padding:0.9rem 1.1rem;display:flex;align-items:center;gap:0.75rem;cursor:pointer;transition:border-color 0.15s}
.db-proj:hover{border-color:var(--acc)}
.db-proj-ico{font-size:1.6rem;flex-shrink:0}
.db-proj-title{font-weight:700;font-size:0.85rem}
.db-proj-meta{font-family:var(--mono);font-size:0.7rem;color:var(--txt3);margin-top:0.12rem}
.db-proj-xp{font-family:var(--mono);font-size:0.72rem;color:var(--acc2);margin-left:auto;white-space:nowrap}
/* LB teaser */
.db-lb-teaser{background:linear-gradient(135deg,rgba(109,40,217,0.1),rgba(14,165,233,0.06));border:1px solid var(--bdr2);border-radius:var(--rl);padding:1.5rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.db-lb-left{flex:1;min-width:200px}
.db-lb-left h3{font-size:1.1rem;font-weight:800;margin-bottom:0.3rem}
.db-lb-left p{font-family:var(--mono);font-size:0.79rem;color:var(--txt2);line-height:1.65}
.db-lb-right{display:flex;flex-direction:column;gap:0.45rem;min-width:180px}
.db-lb-row{display:flex;align-items:center;gap:0.6rem;font-family:var(--mono);font-size:0.78rem}
.db-lb-rank{font-weight:800;color:var(--txt3);width:20px;text-align:center}
.db-lb-name{flex:1;color:var(--txt2)}
.db-lb-xp{color:var(--acc2);font-weight:700}
.db-your-row{background:rgba(109,40,217,0.1);border-radius:6px;padding:0.12rem 0.5rem;border:1px solid rgba(109,40,217,0.2)}

/* Responsive for new pages */
@media(max-width:768px){
  .daily-wrap,.db-wrap{padding:0 0.85rem 3rem}
  .streak-bar{padding:1rem;gap:0.85rem}
  .sd{width:28px;height:28px;font-size:0.75rem}
  .streak-stats{gap:0.9rem}
  .ss-val{font-size:1.4rem}
  .dc-body{grid-template-columns:1fr}
  .dc-head{padding:1rem}
  .dc-title{font-size:1.15rem}
  .dc-foot{gap:0.5rem}
  .dc-submit{width:100%;text-align:center}
  .db-cols{grid-template-columns:1fr}
  .db-stats{grid-template-columns:repeat(2,1fr)}
  .db-projects{grid-template-columns:1fr}
  .db-lb-teaser{flex-direction:column}
}

/* ====================================================
   KONVERTERINGSOPTIMERING CSS
   ==================================================== */

/* --- LIVE ACTIVITY TICKER (social proof) --- */
.live-ticker{background:var(--sur);border-bottom:1px solid var(--bdr);padding:0.5rem 0;overflow:hidden;position:relative}
.live-ticker::before,.live-ticker::after{content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.live-ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.live-ticker::after{right:0;background:linear-gradient(-90deg,var(--bg),transparent)}
.lt-track{display:flex;gap:2.5rem;animation:ltscroll 28s linear infinite;white-space:nowrap;align-items:center}
@keyframes ltscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.lt-item{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.73rem;color:var(--txt2);flex-shrink:0}
.lt-dot{width:7px;height:7px;border-radius:50%;background:var(--grn);flex-shrink:0;animation:pulse 2s infinite}
.lt-user{color:var(--txt);font-weight:700}
.lt-xp{color:var(--acc2);font-weight:800}

/* --- SOCIAL PROOF SECTION --- */
.sp-section{padding:4rem 1.5rem;background:linear-gradient(180deg,var(--bg) 0%,var(--sur) 50%,var(--bg) 100%)}
.sp-inner{max-width:1100px;margin:0 auto}
.sp-head{text-align:center;margin-bottom:2.8rem}
.sp-head .stag{display:block;margin-bottom:0.5rem}
.sp-head h2{font-size:2rem;font-weight:800;letter-spacing:-1px;margin-bottom:0.6rem}
.sp-head p{color:var(--txt2);font-family:var(--mono);font-size:0.84rem}
/* Testimonials */
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem;margin-bottom:3rem}
.tcard{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.4rem;display:flex;flex-direction:column;gap:0.9rem;transition:transform 0.2s,border-color 0.2s}
.tcard:hover{transform:translateY(-3px);border-color:var(--bdr2)}
.tcard-stars{display:flex;gap:2px;font-size:0.85rem}
.tcard-quote{font-family:var(--mono);font-size:0.82rem;line-height:1.75;color:var(--txt2);flex:1}
.tcard-quote strong{color:var(--txt)}
.tcard-person{display:flex;align-items:center;gap:0.7rem;border-top:1px solid var(--bdr);padding-top:0.85rem;margin-top:auto}
.tcard-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.tcard-name{font-weight:800;font-size:0.85rem}
.tcard-role{font-family:var(--mono);font-size:0.7rem;color:var(--txt3)}
.tcard-badge{font-family:var(--mono);font-size:0.6rem;font-weight:800;padding:0.12rem 0.45rem;border-radius:4px;background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.25);color:var(--grn)}
/* Counter row */
.sp-counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);padding:1.8rem;text-align:center}
.sp-cnt-val{font-size:2.2rem;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,var(--acc),var(--acc2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1}
.sp-cnt-lbl{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);margin-top:0.3rem}

/* --- FREE TRIAL BANNER --- */
.freetrial-bar{background:linear-gradient(135deg,rgba(109,40,217,0.12),rgba(14,165,233,0.08));border:1px solid rgba(109,40,217,0.3);border-radius:var(--rl);padding:1.5rem 2rem;display:flex;align-items:center;gap:1.5rem;margin:0 auto 2rem;max-width:900px;flex-wrap:wrap}
.ft-left{flex:1;min-width:220px}
.ft-left h3{font-size:1.15rem;font-weight:800;margin-bottom:0.35rem;letter-spacing:-0.3px}
.ft-left p{font-family:var(--mono);font-size:0.8rem;color:var(--txt2);line-height:1.65}
.ft-perks{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.75rem}
.ft-perk{font-family:var(--mono);font-size:0.72rem;color:var(--txt2);display:flex;align-items:center;gap:0.35rem}
.ft-right{display:flex;flex-direction:column;align-items:center;gap:0.55rem;flex-shrink:0}
.ft-cta{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.95rem;padding:0.82rem 2rem;border-radius:12px;cursor:pointer;box-shadow:0 4px 20px var(--glow);transition:transform 0.2s,box-shadow 0.2s;white-space:nowrap}
.ft-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--glow)}
.ft-note{font-family:var(--mono);font-size:0.65rem;color:var(--txt3)}
.ft-timer{font-family:var(--mono);font-size:0.72rem;color:var(--acc3);background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.2);padding:0.22rem 0.7rem;border-radius:6px}

/* --- SHARE / REFERRAL --- */
.share-section{background:linear-gradient(135deg,rgba(16,185,129,0.06),rgba(14,165,233,0.04));border:1px solid rgba(16,185,129,0.2);border-radius:var(--rl);padding:1.5rem 1.8rem;max-width:900px;margin:0 auto 2rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.share-left{flex:1;min-width:200px}
.share-left h3{font-size:1rem;font-weight:800;margin-bottom:0.25rem}
.share-left p{font-family:var(--mono);font-size:0.78rem;color:var(--txt2);line-height:1.6}
.share-btns{display:flex;gap:0.55rem;flex-wrap:wrap;margin-top:0.75rem}
.share-btn{display:flex;align-items:center;gap:0.45rem;padding:0.52rem 1rem;border-radius:9px;font-family:var(--sans);font-size:0.8rem;font-weight:700;cursor:pointer;border:none;transition:all 0.18s}
.sb-link{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt)}
.sb-linkedin{background:#0a66c2;color:white}
.sb-x{background:#000;color:white}
.sb-copy{background:rgba(109,40,217,0.15);border:1px solid rgba(109,40,217,0.3);color:#a78bfa}
.share-btn:hover{transform:translateY(-2px);opacity:0.9}
.share-ref{display:flex;align-items:center;gap:0.55rem;background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;padding:0.6rem 0.9rem;flex-shrink:0;min-width:200px}
.share-ref-lbl{font-family:var(--mono);font-size:0.7rem;color:var(--txt3)}
.share-ref-code{font-family:var(--mono);font-size:0.88rem;font-weight:800;color:var(--acc2);letter-spacing:2px}
.share-ref-copy{background:var(--acc);border:none;color:white;font-family:var(--mono);font-size:0.68rem;font-weight:700;padding:0.28rem 0.65rem;border-radius:6px;cursor:pointer}

/* --- ONBOARDING MODAL --- */
.ob-ov{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);z-index:600;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity 0.3s}
.ob-ov.open{opacity:1;pointer-events:auto}
.ob-box{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:520px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,0.6);animation:su 0.3s ease}
.ob-prog{height:4px;background:var(--sur2)}
.ob-prog-fill{height:4px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width 0.4s ease}
.ob-body{padding:2rem 2rem 1.5rem}
.ob-step-lbl{font-family:var(--mono);font-size:0.65rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.6rem}
.ob-title{font-size:1.4rem;font-weight:800;letter-spacing:-0.5px;margin-bottom:0.5rem}
.ob-sub{font-family:var(--mono);font-size:0.82rem;color:var(--txt2);line-height:1.7;margin-bottom:1.5rem}
.ob-options{display:flex;flex-direction:column;gap:0.55rem}
.ob-opt{background:var(--bg2);border:1px solid var(--bdr);border-radius:12px;padding:0.9rem 1.1rem;cursor:pointer;display:flex;align-items:center;gap:0.9rem;transition:all 0.15s;text-align:left}
.ob-opt:hover{border-color:var(--bdr2);background:var(--sur2)}
.ob-opt.sel{border-color:var(--acc);background:rgba(109,40,217,0.1)}
.ob-opt-ico{font-size:1.5rem;flex-shrink:0}
.ob-opt-lbl{font-weight:700;font-size:0.88rem}
.ob-opt-sub{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);margin-top:0.15rem}
.ob-foot{padding:1.2rem 2rem 1.6rem;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:0.75rem}
.ob-skip{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.75rem;cursor:pointer;padding:0.3rem}
.ob-skip:hover{color:var(--txt2)}
.ob-next{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.9rem;padding:0.72rem 1.8rem;border-radius:11px;cursor:pointer;transition:transform 0.15s}
.ob-next:hover{transform:translateY(-2px)}
.ob-dots{display:flex;gap:0.42rem}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--bdr);transition:all 0.2s}
.ob-dot.active{background:var(--acc);width:20px;border-radius:4px}
/* Celebration step */
.ob-celebrate{text-align:center;padding:1rem 0 0.5rem}
.ob-cel-ico{font-size:4rem;margin-bottom:0.75rem;animation:bounce 0.8s ease}
@keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.ob-cel-title{font-size:1.5rem;font-weight:800;margin-bottom:0.5rem}
.ob-cel-sub{font-family:var(--mono);font-size:0.82rem;color:var(--txt2);line-height:1.7;max-width:380px;margin:0 auto}
.ob-rec-projects{display:flex;flex-direction:column;gap:0.5rem;margin-top:1.2rem}
.ob-rec{background:var(--bg2);border:1px solid var(--bdr);border-radius:10px;padding:0.75rem 1rem;display:flex;align-items:center;gap:0.8rem;cursor:pointer;transition:border-color 0.15s}
.ob-rec:hover{border-color:var(--acc)}
.ob-rec-ico{font-size:1.4rem}
.ob-rec-title{font-weight:700;font-size:0.85rem}
.ob-rec-sub{font-family:var(--mono);font-size:0.7rem;color:var(--txt3)}

/* Responsive */
@media(max-width:768px){
  .sp-section{padding:2.5rem 0.85rem}
  .sp-head h2{font-size:1.5rem}
  .sp-grid{grid-template-columns:1fr}
  .freetrial-bar{padding:1.2rem;gap:1rem;flex-direction:column}
  .ft-right{width:100%}
  .ft-cta{width:100%;text-align:center}
  .share-section{flex-direction:column;padding:1.2rem}
  .share-ref{min-width:unset;width:100%}
  .ob-box{max-height:92vh;overflow-y:auto}
  .ob-body{padding:1.4rem 1.2rem 1rem}
  .ob-foot{padding:1rem 1.2rem 1.2rem}
  .sp-counters{grid-template-columns:repeat(2,1fr)}
}

/* ====================================================
   PRODUKTFÖRBÄTTRINGAR CSS
   ==================================================== */

/* ---- INBYGGD KODEDITOR (i projekt-modal) ---- */
.live-editor-wrap{display:flex;flex-direction:column;border:1px solid var(--bdr2);border-radius:12px;overflow:hidden;background:var(--bg);margin-top:0.5rem}
.le-toolbar{display:flex;align-items:center;gap:0.5rem;padding:0.52rem 0.85rem;background:var(--sur2);border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.le-lang-sel{background:var(--bg2);border:1px solid var(--bdr2);color:var(--txt);border-radius:6px;padding:0.26rem 0.52rem;font-family:var(--mono);font-size:0.73rem;cursor:pointer;outline:none}
.le-run-btn{background:linear-gradient(135deg,var(--grn),#059669);border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.73rem;padding:0.3rem 0.85rem;border-radius:7px;cursor:pointer;display:flex;align-items:center;gap:0.38rem;transition:transform 0.15s}
.le-run-btn:hover{transform:translateY(-1px)}
.le-run-btn.running{opacity:0.7;pointer-events:none}
.le-reset-btn{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3);font-family:var(--mono);font-size:0.7rem;padding:0.28rem 0.65rem;border-radius:6px;cursor:pointer}
.le-status{font-family:var(--mono);font-size:0.68rem;color:var(--txt3);margin-left:auto}
.le-editor{width:100%;min-height:200px;max-height:320px;background:var(--bg);border:none;outline:none;color:var(--txt);font-family:var(--mono);font-size:0.8rem;line-height:1.8;padding:1rem;resize:vertical;tab-size:2}
.le-output-wrap{border-top:1px solid var(--bdr);background:rgba(0,0,0,0.25)}
.le-output-bar{display:flex;align-items:center;justify-content:space-between;padding:0.38rem 0.85rem;border-bottom:1px solid var(--bdr)}
.le-output-lbl{font-family:var(--mono);font-size:0.63rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3)}
.le-clear-btn{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.65rem;cursor:pointer;padding:0}
.le-output{font-family:var(--mono);font-size:0.79rem;line-height:1.75;padding:0.75rem 0.85rem;min-height:72px;max-height:180px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
.le-output .out-line{display:block}
.le-output .out-err{color:var(--red)}
.le-output .out-ok{color:var(--grn)}
.le-output .out-info{color:var(--acc2)}
.le-output .out-warn{color:var(--gold)}
.le-output .out-sys{color:var(--txt3);font-style:italic}
.le-sandbox-note{font-family:var(--mono);font-size:0.65rem;color:var(--txt3);padding:0.35rem 0.85rem;border-top:1px solid var(--bdr);display:flex;align-items:center;gap:0.38rem}
/* Syntax highlight hints in output */
.le-output::-webkit-scrollbar{width:4px}
.le-output::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

/* ---- LÄRVÄGAR ---- */
.paths-wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem 5rem}
.paths-hero{text-align:center;margin-bottom:2.5rem}
.paths-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1.4rem;margin-bottom:2.5rem}
.path-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);overflow:hidden;cursor:pointer;transition:transform 0.2s,border-color 0.2s;display:flex;flex-direction:column}
.path-card:hover{transform:translateY(-4px);border-color:var(--bdr2)}
.path-card.active-path{border-color:var(--acc);box-shadow:0 0 0 1px rgba(109,40,217,0.2),0 8px 32px rgba(109,40,217,0.12)}
.path-banner{height:7px}
.path-head{padding:1.3rem 1.4rem 0.9rem;display:flex;gap:1rem;align-items:flex-start}
.path-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0}
.path-meta{flex:1}
.path-title{font-size:1.05rem;font-weight:800;letter-spacing:-0.3px;margin-bottom:0.28rem}
.path-sub{font-family:var(--mono);font-size:0.74rem;color:var(--txt2);line-height:1.6}
.path-badges{display:flex;gap:0.38rem;flex-wrap:wrap;margin-top:0.45rem}
.path-badge{font-size:0.62rem;font-weight:800;padding:0.13rem 0.48rem;border-radius:4px;font-family:var(--mono)}
.pb-weeks{background:rgba(14,165,233,0.1);border:1px solid rgba(14,165,233,0.25);color:var(--acc2)}
.pb-lvl{background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.25);color:var(--grn)}
.pb-lang{background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);color:var(--gold)}
.pb-pro{background:rgba(109,40,217,0.12);border:1px solid rgba(109,40,217,0.25);color:#a78bfa}
.path-prog-wrap{padding:0 1.4rem 0.8rem}
.path-prog-row{display:flex;justify-content:space-between;margin-bottom:0.4rem;font-family:var(--mono);font-size:0.68rem;color:var(--txt3)}
.path-prog-bg{height:6px;background:var(--sur2);border-radius:100px;overflow:hidden}
.path-prog-fill{height:6px;border-radius:100px;transition:width 0.8s ease}
.path-steps-wrap{padding:0 1.4rem 1rem;flex:1}
.path-step{display:flex;align-items:center;gap:0.65rem;padding:0.42rem 0;border-bottom:1px solid var(--bdr)}
.path-step:last-child{border-bottom:none}
.path-step-dot{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.62rem;flex-shrink:0}
.psd-done{background:var(--grn);color:white}
.psd-active{background:var(--acc);color:white;box-shadow:0 0 0 3px rgba(109,40,217,0.2)}
.psd-lock{background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3)}
.path-step-txt{font-family:var(--mono);font-size:0.76rem;flex:1}
.path-step-txt.done-step{text-decoration:line-through;color:var(--txt3)}
.path-step-xp{font-family:var(--mono);font-size:0.65rem;color:var(--acc2);white-space:nowrap}
.path-foot{padding:1rem 1.4rem;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap}
.path-cta{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.82rem;padding:0.58rem 1.3rem;border-radius:9px;cursor:pointer;transition:transform 0.15s}
.path-cta:hover{transform:translateY(-2px)}
.path-enrolled{background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:var(--grn);font-family:var(--mono);font-size:0.72rem;font-weight:800;padding:0.45rem 0.9rem;border-radius:9px}
.path-xp-total{font-family:var(--mono);font-size:0.72rem;color:var(--acc2)}
/* Path detail overlay */
.path-detail-ov{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity 0.25s}
.path-detail-ov.open{opacity:1;pointer-events:all}
.path-detail-box{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:640px;max-height:88vh;overflow-y:auto;box-shadow:0 32px 80px rgba(0,0,0,0.6);animation:su 0.2s ease}
.path-detail-box::-webkit-scrollbar{width:4px}
.path-detail-box::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}

/* ---- COMMUNITY / KOMMENTARER ---- */
.comm-section{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);margin-top:1rem;overflow:hidden}
.comm-head{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 1.2rem;border-bottom:1px solid var(--bdr);cursor:pointer;user-select:none}
.comm-head-left{display:flex;align-items:center;gap:0.65rem}
.comm-title{font-weight:800;font-size:0.9rem}
.comm-count{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);background:var(--sur2);border:1px solid var(--bdr);padding:0.12rem 0.5rem;border-radius:6px}
.comm-toggle{font-family:var(--mono);font-size:0.75rem;color:var(--txt3);transition:transform 0.2s}
.comm-toggle.open{transform:rotate(180deg)}
.comm-body{display:none;padding:1rem 1.2rem}
.comm-body.open{display:block}
.comm-input-row{display:flex;gap:0.65rem;align-items:flex-start;margin-bottom:1.2rem}
.comm-av{width:34px;height:34px;border-radius:50%;background:var(--sur2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.comm-inp-wrap{flex:1;position:relative}
.comm-inp{width:100%;background:var(--bg2);border:1px solid var(--bdr2);border-radius:11px;padding:0.65rem 0.9rem;color:var(--txt);font-family:var(--mono);font-size:0.8rem;outline:none;resize:none;min-height:56px;transition:border-color 0.2s}
.comm-inp:focus{border-color:var(--acc)}
.comm-inp::placeholder{color:var(--txt3)}
.comm-send{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.78rem;padding:0.48rem 1.1rem;border-radius:9px;cursor:pointer;margin-top:0.5rem;transition:transform 0.15s;display:block}
.comm-send:hover{transform:translateY(-1px)}
.comm-list{display:flex;flex-direction:column;gap:0.85rem}
.comm-item{display:flex;gap:0.65rem}
.comm-item-av{width:32px;height:32px;border-radius:50%;background:var(--sur2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;font-size:0.95rem;flex-shrink:0;margin-top:2px}
.comm-item-body{flex:1;min-width:0}
.comm-item-head{display:flex;align-items:baseline;gap:0.5rem;margin-bottom:0.28rem;flex-wrap:wrap}
.comm-item-name{font-weight:800;font-size:0.82rem}
.comm-item-role{font-family:var(--mono);font-size:0.65rem;color:var(--acc2)}
.comm-item-time{font-family:var(--mono);font-size:0.65rem;color:var(--txt3);margin-left:auto}
.comm-item-text{font-family:var(--mono);font-size:0.79rem;color:var(--txt2);line-height:1.7}
.comm-item-text code{background:var(--sur2);border:1px solid var(--bdr);padding:0.1rem 0.35rem;border-radius:4px;font-size:0.75rem;color:var(--acc3)}
.comm-actions{display:flex;gap:0.65rem;margin-top:0.45rem;align-items:center}
.comm-like{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.7rem;cursor:pointer;display:flex;align-items:center;gap:0.28rem;padding:0;transition:color 0.15s}
.comm-like:hover,.comm-like.liked{color:var(--red)}
.comm-reply-btn{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.7rem;cursor:pointer;padding:0;transition:color 0.15s}
.comm-reply-btn:hover{color:var(--acc2)}
.comm-replies{margin-top:0.75rem;margin-left:1rem;display:flex;flex-direction:column;gap:0.65rem;border-left:2px solid var(--bdr);padding-left:0.85rem}
.comm-reply-input{display:none;margin-top:0.6rem}
.comm-reply-input.open{display:flex;gap:0.5rem;align-items:flex-start}
.comm-empty{font-family:var(--mono);font-size:0.8rem;color:var(--txt3);text-align:center;padding:1.5rem 0}
.comm-login-note{background:var(--bg2);border:1px dashed var(--bdr2);border-radius:10px;padding:0.85rem;text-align:center;font-family:var(--mono);font-size:0.79rem;color:var(--txt3)}
.comm-login-note a{color:var(--acc2);cursor:pointer;font-weight:700}

/* Paths page — nav link */
@media(max-width:768px){
  .paths-grid{grid-template-columns:1fr}
  .path-detail-ov{align-items:flex-end;padding:0}
  .path-detail-box{border-radius:var(--rl) var(--rl) 0 0;max-height:92vh;max-width:100%}
  .le-editor{min-height:150px}
  .comm-item-time{width:100%;margin-left:0}
}


/* ── DROPDOWN NAV ── */
.nav-links .nav-drop{position:relative}
.nav-drop-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:0.3rem;font-size:0.85rem;color:var(--txt2);padding:0.3rem 0;transition:color 0.15s;white-space:nowrap}
.nav-drop-toggle:hover{color:var(--txt)}
.nav-drop-toggle.drop-open{color:var(--txt)}
.nav-dropdown{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background:var(--sur);border:1px solid var(--bdr2);border-radius:12px;padding:0.4rem;min-width:190px;box-shadow:0 16px 48px rgba(0,0,0,0.4);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-6px);transition:opacity 0.18s,transform 0.18s;z-index:200;list-style:none;display:flex;flex-direction:column;gap:2px}
.nav-dropdown.drop-open{opacity:1;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-dropdown li a{display:flex;align-items:center;gap:0.55rem;padding:0.58rem 0.85rem;border-radius:8px;font-size:0.83rem;color:var(--txt2);white-space:nowrap;cursor:pointer;transition:background 0.12s,color 0.12s}
.nav-dropdown li a:hover{background:var(--sur2);color:var(--txt)}
.nav-dropdown li a.active{color:var(--acc2);background:rgba(14,165,233,0.08)}
/* Arrow pointer */
.nav-dropdown::before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:10px;height:10px;background:var(--sur);border-left:1px solid var(--bdr2);border-top:1px solid var(--bdr2);transform:translateX(-50%) rotate(45deg)}

/* ── MOBILE GROUP LABELS ── */
.mnav-group-lbl{font-family:var(--mono);font-size:0.6rem;font-weight:800;letter-spacing:2px;color:var(--txt3);padding:0.6rem 0.9rem 0.2rem;text-transform:uppercase}

/* ============================================================
   POLISH: Theme, Hero, Search, Footer, Scroll, Skeleton, GDPR
   ============================================================ */

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:#f0f0f8;--bg2:#e8e8f2;--sur:#ffffff;--sur2:#f4f4fb;--sur3:#ebebf7;
  --bdr:#d0d0e8;--bdr2:#b8b8d8;
  --txt:#1a1a2e;--txt2:#4a4a6a;--txt3:#8888aa;
  --acc:#6d28d9;--glow:rgba(109,40,217,0.2);
  --acc2:#0284c7;--acc3:#d97706;--acc4:#db2777;
  --grn:#059669;--red:#dc2626;--gold:#d97706;
}
[data-theme="light"] .term{background:#1e1e3a;border-color:#2e2e55}
[data-theme="light"] .live-ticker{background:#f8f8ff;border-color:#d0d0e8}
[data-theme="light"] nav{background:rgba(240,240,248,0.9);border-color:#d0d0e8}
[data-theme="light"] .le-editor{background:#1e1e3a;color:#e2e2f0}
[data-theme="light"] .cblk{background:#1e1e3a;color:#e2e2f0}

/* ── THEME TOGGLE BUTTON ── */
.theme-btn{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt2);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all 0.2s;flex-shrink:0}
.theme-btn:hover{border-color:var(--acc);color:var(--txt);transform:rotate(20deg)}

/* ── HERO FEATURES ROW ── */
.hero-features{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.4rem;margin-bottom:0.2rem}
.hf-item{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.76rem;color:var(--txt2)}
.hf-ico{width:26px;height:26px;border-radius:7px;background:rgba(109,40,217,0.15);border:1px solid rgba(109,40,217,0.25);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0}
/* Typing cursor */
.typing-cursor{display:inline-block;width:2px;height:1em;background:var(--acc2);margin-left:2px;animation:blink 1s step-end infinite;vertical-align:text-bottom}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── PROJECT SEARCH BAR ── */
.proj-search-row{display:flex;gap:0.7rem;align-items:center;margin-bottom:1.1rem;flex-wrap:wrap}
.proj-search-wrap{position:relative;flex:1;min-width:180px}
.proj-search-wrap .search-ico{position:absolute;left:0.85rem;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:0.9rem;pointer-events:none}
.proj-search-input{width:100%;background:var(--sur2);border:1px solid var(--bdr2);border-radius:11px;padding:0.62rem 0.9rem 0.62rem 2.35rem;color:var(--txt);font-family:var(--mono);font-size:0.82rem;outline:none;transition:border-color 0.2s}
.proj-search-input:focus{border-color:var(--acc)}
.proj-search-input::placeholder{color:var(--txt3)}
.proj-search-clear{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--txt3);cursor:pointer;font-size:0.9rem;display:none;padding:0}
.proj-search-clear.visible{display:block}
.proj-sort-sel{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt2);border-radius:11px;padding:0.6rem 0.85rem;font-family:var(--mono);font-size:0.78rem;cursor:pointer;outline:none;flex-shrink:0}
.proj-results-lbl{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);width:100%;padding:0 0.2rem}
/* Search highlight in cards */
.search-hl{background:rgba(245,158,11,0.25);border-radius:3px;padding:0 2px}

/* ── SKELETON LOADING ── */
.skeleton{background:linear-gradient(90deg,var(--sur2) 25%,var(--sur3) 50%,var(--sur2) 75%);background-size:200% 100%;animation:skeleton-wave 1.4s infinite;border-radius:var(--r)}
@keyframes skeleton-wave{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-card{background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.3rem;display:flex;flex-direction:column;gap:0.75rem}
.skel-line{height:14px;border-radius:4px}
.skel-line.w80{width:80%}.skel-line.w60{width:60%}.skel-line.w40{width:40%}.skel-line.w30{width:30%}
.skel-block{height:80px;border-radius:8px}
.skel-row{display:flex;gap:0.5rem;align-items:center}
.skel-circle{width:28px;height:28px;border-radius:50%;flex-shrink:0}

/* ── SCROLL TO TOP ── */
.scroll-top-btn{position:fixed;bottom:2rem;right:1.5rem;width:44px;height:44px;border-radius:50%;background:var(--acc);border:none;color:white;font-size:1.1rem;cursor:pointer;box-shadow:0 4px 20px var(--glow);display:flex;align-items:center;justify-content:center;z-index:150;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity 0.25s,transform 0.25s}
.scroll-top-btn.visible{opacity:1;pointer-events:all;transform:translateY(0)}
.scroll-top-btn:hover{background:var(--acc2);transform:translateY(-3px)!important}

/* ── FOOTER ── */
footer{background:var(--sur);border-top:1px solid var(--bdr);margin-top:0;padding:3rem 1.5rem 1.5rem}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:2.5rem}
.footer-brand .logo{font-size:1.3rem;margin-bottom:0.75rem;cursor:pointer;display:inline-flex}
.footer-brand p{font-family:var(--mono);font-size:0.78rem;color:var(--txt3);line-height:1.75;max-width:260px;margin-bottom:1rem}
.footer-social{display:flex;gap:0.6rem}
.fsoc-btn{width:36px;height:36px;border-radius:9px;background:var(--sur2);border:1px solid var(--bdr);color:var(--txt3);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0.95rem;transition:all 0.15s;text-decoration:none}
.fsoc-btn:hover{border-color:var(--bdr2);color:var(--txt);transform:translateY(-2px)}
.footer-col h4{font-size:0.78rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--mono);color:var(--txt3);margin-bottom:0.85rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.5rem}
.footer-col ul li a{font-family:var(--mono);font-size:0.79rem;color:var(--txt3);cursor:pointer;transition:color 0.15s;display:flex;align-items:center;gap:0.4rem}
.footer-col ul li a:hover{color:var(--txt2)}
.footer-bottom{border-top:1px solid var(--bdr);padding-top:1.2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem}
.footer-copy{font-family:var(--mono);font-size:0.72rem;color:var(--txt3)}
.footer-links{display:flex;gap:1.2rem}
.footer-links a{font-family:var(--mono);font-size:0.72rem;color:var(--txt3);cursor:pointer;transition:color 0.15s}
.footer-links a:hover{color:var(--txt2)}
.footer-badge{font-family:var(--mono);font-size:0.65rem;font-weight:800;padding:0.15rem 0.55rem;border-radius:4px;background:rgba(16,185,129,0.1);border:1px solid rgba(16,185,129,0.2);color:var(--grn)}

/* ── GDPR COOKIE BANNER ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--sur);border-top:1px solid var(--bdr2);padding:1rem 1.5rem;z-index:400;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;box-shadow:0 -8px 32px rgba(0,0,0,0.3);transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.34,1.1,0.64,1)}
.cookie-banner.visible{transform:translateY(0)}
.cookie-txt{flex:1;min-width:240px;font-family:var(--mono);font-size:0.78rem;color:var(--txt2);line-height:1.65}
.cookie-txt a{color:var(--acc2);cursor:pointer}
.cookie-btns{display:flex;gap:0.6rem;flex-shrink:0;flex-wrap:wrap}
.cookie-accept{background:var(--acc);border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.82rem;padding:0.58rem 1.3rem;border-radius:9px;cursor:pointer;transition:transform 0.15s}
.cookie-accept:hover{transform:translateY(-2px)}
.cookie-settings{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt);font-family:var(--sans);font-weight:700;font-size:0.82rem;padding:0.55rem 1rem;border-radius:9px;cursor:pointer}
.cookie-reject{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.75rem;cursor:pointer;padding:0.3rem}

/* ── EMPTY STATE ── */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 1rem;text-align:center;gap:0.85rem}
.empty-state-ico{font-size:3.5rem;opacity:0.5}
.empty-state-title{font-size:1.1rem;font-weight:800;color:var(--txt2)}
.empty-state-sub{font-family:var(--mono);font-size:0.8rem;color:var(--txt3);line-height:1.7;max-width:320px}
.empty-state-btn{background:var(--sur2);border:1px solid var(--bdr2);color:var(--txt);font-family:var(--sans);font-weight:700;font-size:0.82rem;padding:0.58rem 1.3rem;border-radius:9px;cursor:pointer;margin-top:0.3rem;transition:border-color 0.15s}
.empty-state-btn:hover{border-color:var(--acc)}

/* Responsive */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .footer-brand{grid-column:1/-1}
  .cookie-banner{padding:1rem}
  .scroll-top-btn{bottom:5rem;right:1rem}
  .hero-features{gap:0.85rem}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{grid-column:1}
}


/* ── REVIEWS ── */
.sp-action-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.8rem}
.sp-filter-tabs{display:flex;gap:0.4rem;flex-wrap:wrap}
.sp-tab{background:var(--sur2);border:1px solid var(--bdr);border-radius:8px;padding:0.32rem 0.75rem;font-family:var(--mono);font-size:0.72rem;cursor:pointer;color:var(--txt3);transition:all 0.15s}
.sp-tab.active{background:rgba(109,40,217,0.15);border-color:var(--acc);color:var(--txt)}
.sp-write-btn{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.84rem;padding:0.58rem 1.3rem;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:0.5rem;transition:transform 0.15s;box-shadow:0 4px 16px var(--glow)}
.sp-write-btn:hover{transform:translateY(-2px)}
.tcard.user-review{border-color:rgba(109,40,217,0.3);background:linear-gradient(135deg,var(--sur),rgba(109,40,217,0.04))}
.tcard-verified{font-size:0.62rem;font-family:var(--mono);color:var(--grn);display:flex;align-items:center;gap:0.25rem}
.tcard-actions{display:flex;gap:0.65rem;margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--bdr)}
.tcard-helpful{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.7rem;cursor:pointer;display:flex;align-items:center;gap:0.28rem;padding:0;transition:color 0.15s}
.tcard-helpful:hover,.tcard-helpful.voted{color:var(--grn)}
.tcard-delete{background:none;border:none;color:var(--txt3);font-family:var(--mono);font-size:0.68rem;cursor:pointer;padding:0;margin-left:auto;transition:color 0.15s}
.tcard-delete:hover{color:var(--red)}
/* Review Modal */
.review-ov{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity 0.25s}
.review-ov.open{opacity:1;pointer-events:all}
.review-box{background:var(--sur);border:1px solid var(--bdr2);border-radius:var(--rl);width:100%;max-width:500px;box-shadow:0 32px 80px rgba(0,0,0,0.55);animation:su 0.25s ease;overflow:hidden}
.review-head{padding:1.4rem 1.6rem 0;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.review-head h3{font-size:1.1rem;font-weight:800;letter-spacing:-0.3px}
.review-head p{font-family:var(--mono);font-size:0.78rem;color:var(--txt2);margin-top:0.2rem}
.review-close{background:none;border:none;color:var(--txt3);font-size:1.3rem;cursor:pointer;padding:0;line-height:1;transition:color 0.15s}
.review-close:hover{color:var(--txt)}
.review-body{padding:1.3rem 1.6rem}
.review-field{margin-bottom:1.1rem}
.review-label{font-family:var(--mono);font-size:0.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--txt3);margin-bottom:0.45rem;display:block}
/* Star picker */
.star-picker{display:flex;gap:0.35rem}
.star-pick{font-size:1.6rem;cursor:pointer;transition:transform 0.12s;line-height:1;background:none;border:none;padding:0;filter:grayscale(1);opacity:0.4}
.star-pick.lit{filter:none;opacity:1}
.star-pick:hover{transform:scale(1.2)}
/* Text inputs */
.review-inp{width:100%;background:var(--bg2);border:1px solid var(--bdr2);border-radius:10px;padding:0.65rem 0.9rem;color:var(--txt);font-family:var(--mono);font-size:0.82rem;outline:none;transition:border-color 0.2s}
.review-inp:focus{border-color:var(--acc)}
.review-inp::placeholder{color:var(--txt3)}
textarea.review-inp{resize:vertical;min-height:100px;line-height:1.7}
.review-char{font-family:var(--mono);font-size:0.65rem;color:var(--txt3);text-align:right;margin-top:0.2rem}
.review-char.warn{color:var(--acc3)}
/* Role tags */
.role-tags{display:flex;gap:0.4rem;flex-wrap:wrap}
.role-tag{background:var(--sur2);border:1px solid var(--bdr);border-radius:7px;padding:0.3rem 0.7rem;font-family:var(--mono);font-size:0.73rem;cursor:pointer;color:var(--txt3);transition:all 0.15s}
.role-tag.sel{background:rgba(14,165,233,0.12);border-color:rgba(14,165,233,0.35);color:var(--acc2)}
.review-foot{padding:1rem 1.6rem 1.4rem;display:flex;align-items:center;justify-content:flex-end;gap:0.65rem;border-top:1px solid var(--bdr)}
.review-cancel{background:none;border:1px solid var(--bdr);color:var(--txt2);font-family:var(--sans);font-weight:700;font-size:0.82rem;padding:0.55rem 1.1rem;border-radius:9px;cursor:pointer}
.review-submit{background:linear-gradient(135deg,var(--acc),var(--acc2));border:none;color:white;font-family:var(--sans);font-weight:800;font-size:0.84rem;padding:0.6rem 1.5rem;border-radius:9px;cursor:pointer;transition:transform 0.15s}
.review-submit:hover{transform:translateY(-2px)}
.review-submit:disabled{opacity:0.45;pointer-events:none}
/* Summary bar */
.sp-summary{display:flex;align-items:center;gap:1.5rem;background:var(--sur);border:1px solid var(--bdr);border-radius:var(--rl);padding:1.2rem 1.5rem;margin-bottom:1.6rem;flex-wrap:wrap}
.sp-avg{text-align:center;flex-shrink:0}
.sp-avg-num{font-size:2.8rem;font-weight:800;letter-spacing:-2px;line-height:1}
.sp-avg-stars{font-size:1rem;margin:0.15rem 0}
.sp-avg-cnt{font-family:var(--mono);font-size:0.7rem;color:var(--txt3)}
.sp-bars{flex:1;min-width:160px;display:flex;flex-direction:column;gap:0.32rem}
.sp-bar-row{display:flex;align-items:center;gap:0.6rem;font-family:var(--mono);font-size:0.7rem;color:var(--txt3)}
.sp-bar-bg{flex:1;height:6px;background:var(--sur2);border-radius:100px;overflow:hidden}
.sp-bar-fill{height:6px;background:linear-gradient(90deg,var(--acc3),var(--acc));border-radius:100px;transition:width 0.6s ease}
.sp-bar-n{min-width:20px;text-align:right}
@media(max-width:768px){
  .review-box{max-height:92vh;overflow-y:auto}
  .review-body{padding:1rem 1.2rem}
  .review-foot{padding:0.9rem 1.2rem 1.2rem}
  .sp-action-row{flex-direction:column;align-items:flex-start}
  .sp-write-btn{width:100%;justify-content:center}
}


/* ── PAGE TRANSITIONS ── */
.page { animation: none; }
.page.active { animation: pageFadeIn 0.2s ease; }
@keyframes pageFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* ── TOAST ANIMATION ── */
@keyframes toastIn { from { opacity:0; transform:translateX(120%); } to { opacity:1; transform:translateX(0); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(120%); } }
.toast { animation: toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.toast.hide { animation: toastOut 0.25s ease forwards; }

/* ── KONFETTI CANVAS ── */
#konfetti-canvas { position:fixed; inset:0; pointer-events:none; z-index:9999; }

/* ── PROFILE PAGE ── */
.prof-hero { display:flex; align-items:center; gap:1.5rem; background:var(--sur); border:1px solid var(--bdr); border-radius:var(--rl); padding:1.8rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.prof-av { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--acc),var(--acc2)); display:flex; align-items:center; justify-content:center; font-size:2.4rem; flex-shrink:0; border:3px solid rgba(109,40,217,0.3); }
.prof-info h2 { font-size:1.4rem; font-weight:800; letter-spacing:-0.5px; }
.prof-info .prof-role { font-family:var(--mono); font-size:0.78rem; color:var(--acc2); margin-top:0.2rem; }
.prof-info .prof-joined { font-family:var(--mono); font-size:0.72rem; color:var(--txt3); margin-top:0.15rem; }
.prof-stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.8rem; margin-bottom:1.5rem; }
.prof-stat { background:var(--sur); border:1px solid var(--bdr); border-radius:12px; padding:1rem; text-align:center; }
.prof-stat-val { font-size:1.8rem; font-weight:800; letter-spacing:-1px; }
.prof-stat-lbl { font-family:var(--mono); font-size:0.68rem; color:var(--txt3); margin-top:0.2rem; }
.prof-section { background:var(--sur); border:1px solid var(--bdr); border-radius:var(--rl); padding:1.4rem; margin-bottom:1.2rem; }
.prof-section h3 { font-size:0.95rem; font-weight:800; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.prof-edit-btn { background:none; border:1px solid var(--bdr2); color:var(--txt2); font-family:var(--mono); font-size:0.72rem; padding:0.35rem 0.8rem; border-radius:8px; cursor:pointer; margin-left:auto; }
.prof-edit-btn:hover { border-color:var(--acc); color:var(--acc); }
.prof-badge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:0.7rem; }
.prof-badge { background:var(--sur2); border:1px solid var(--bdr); border-radius:10px; padding:0.7rem 0.4rem; text-align:center; font-size:1.4rem; cursor:default; transition:transform 0.15s; }
.prof-badge:hover { transform:scale(1.1); }
.prof-badge.locked { opacity:0.35; filter:grayscale(1); }
.prof-badge-lbl { font-family:var(--mono); font-size:0.6rem; color:var(--txt3); margin-top:0.3rem; }
.prof-activity { display:grid; grid-template-columns:repeat(30,1fr); gap:3px; }
.prof-act-cell { width:100%; aspect-ratio:1; border-radius:3px; background:var(--sur2); }
.prof-act-cell.l1 { background:rgba(109,40,217,0.2); }
.prof-act-cell.l2 { background:rgba(109,40,217,0.45); }
.prof-act-cell.l3 { background:rgba(109,40,217,0.7); }
.prof-act-cell.l4 { background:var(--acc); }
.prof-edit-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); z-index:500; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.prof-edit-overlay.open { opacity:1; pointer-events:all; }
.prof-edit-box { background:var(--sur); border:1px solid var(--bdr2); border-radius:var(--rl); width:100%; max-width:420px; padding:2rem; animation:su 0.25s ease; }
.prof-edit-box h3 { font-size:1.1rem; font-weight:800; margin-bottom:1.2rem; }
.prof-field { margin-bottom:1rem; }
.prof-field label { display:block; font-family:var(--mono); font-size:0.7rem; color:var(--txt3); text-transform:uppercase; letter-spacing:1px; margin-bottom:0.4rem; }
.prof-field input { width:100%; background:var(--bg2); border:1px solid var(--bdr2); border-radius:9px; padding:0.6rem 0.9rem; color:var(--txt); font-family:var(--mono); font-size:0.82rem; outline:none; }
.prof-field input:focus { border-color:var(--acc); }
.prof-edit-foot { display:flex; justify-content:flex-end; gap:0.6rem; margin-top:1.2rem; }
.avatar-picker { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.av-opt { font-size:1.6rem; cursor:pointer; padding:0.3rem; border-radius:8px; border:2px solid transparent; transition:border-color 0.15s; }
.av-opt.sel { border-color:var(--acc); }

/* ── NOTIFICATION BELL ── */
.notif-btn { position:relative; background:none; border:none; cursor:pointer; font-size:1.1rem; padding:0.3rem; color:var(--txt2); transition:color 0.15s; }
.notif-btn:hover { color:var(--txt); }
.notif-dot { position:absolute; top:0; right:0; width:8px; height:8px; background:var(--red); border-radius:50%; border:2px solid var(--bg); animation:pulse 2s infinite; }
.notif-panel { position:absolute; top:calc(100% + 10px); right:0; width:320px; background:var(--sur); border:1px solid var(--bdr2); border-radius:var(--rl); box-shadow:0 16px 48px rgba(0,0,0,0.4); z-index:300; opacity:0; pointer-events:none; transition:opacity 0.2s, transform 0.2s; transform:translateY(-8px); }
.notif-panel.open { opacity:1; pointer-events:all; transform:translateY(0); }
.notif-head { padding:1rem 1.2rem 0.6rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--bdr); }
.notif-head span { font-family:var(--mono); font-size:0.72rem; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--txt3); }
.notif-clear { background:none; border:none; color:var(--txt3); font-family:var(--mono); font-size:0.7rem; cursor:pointer; }
.notif-clear:hover { color:var(--acc2); }
.notif-list { max-height:320px; overflow-y:auto; }
.notif-item { padding:0.85rem 1.2rem; border-bottom:1px solid var(--bdr); display:flex; gap:0.75rem; align-items:flex-start; cursor:pointer; transition:background 0.15s; }
.notif-item:hover { background:var(--sur2); }
.notif-item.unread { background:rgba(109,40,217,0.05); }
.notif-ico { font-size:1.1rem; flex-shrink:0; margin-top:0.1rem; }
.notif-body { flex:1; }
.notif-title { font-size:0.82rem; font-weight:700; margin-bottom:0.15rem; }
.notif-sub { font-family:var(--mono); font-size:0.7rem; color:var(--txt3); }
.notif-time { font-family:var(--mono); font-size:0.64rem; color:var(--txt3); margin-top:0.2rem; }
.notif-empty { padding:2rem; text-align:center; font-family:var(--mono); font-size:0.8rem; color:var(--txt3); }
.notif-wrap { position:relative; display:inline-block; }

/* ── KEYBOARD SHORTCUTS MODAL ── */
.shortcuts-ov { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); z-index:600; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.shortcuts-ov.open { opacity:1; pointer-events:all; }
.shortcuts-box { background:var(--sur); border:1px solid var(--bdr2); border-radius:var(--rl); width:100%; max-width:520px; max-height:85vh; overflow-y:auto; box-shadow:0 32px 80px rgba(0,0,0,0.5); animation:su 0.25s ease; }
.shortcuts-head { padding:1.4rem 1.6rem 0; display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.shortcuts-head h3 { font-size:1.1rem; font-weight:800; }
.shortcuts-body { padding:0 1.6rem 1.6rem; }
.sc-group { margin-bottom:1.2rem; }
.sc-group-lbl { font-family:var(--mono); font-size:0.68rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--txt3); margin-bottom:0.5rem; }
.sc-row { display:flex; align-items:center; justify-content:space-between; padding:0.45rem 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.sc-desc { font-size:0.84rem; color:var(--txt2); }
.sc-keys { display:flex; gap:0.3rem; }
kbd { background:var(--sur2); border:1px solid var(--bdr2); border-radius:5px; padding:0.15rem 0.45rem; font-family:var(--mono); font-size:0.72rem; color:var(--txt); box-shadow:0 2px 0 var(--bdr2); }

/* ── PRICING FAQ ── */
.faq-section { margin-top:2.5rem; }
.faq-section h2 { font-size:1.3rem; font-weight:800; margin-bottom:1.2rem; text-align:center; }
.faq-item { border:1px solid var(--bdr); border-radius:12px; margin-bottom:0.6rem; overflow:hidden; }
.faq-q { padding:1rem 1.2rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:700; font-size:0.9rem; transition:background 0.15s; }
.faq-q:hover { background:var(--sur2); }
.faq-q .faq-arrow { transition:transform 0.25s; color:var(--txt3); }
.faq-item.open .faq-arrow { transform:rotate(180deg); }
.faq-a { display:none; padding:0 1.2rem 1rem; font-family:var(--mono); font-size:0.8rem; color:var(--txt2); line-height:1.8; border-top:1px solid var(--bdr); padding-top:0.8rem; }
.faq-item.open .faq-a { display:block; }

/* ── DB COUNTER ANIMATION ── */
@keyframes countUp { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
.db-stat-val.counting { animation: countUp 0.5s cubic-bezier(0.34,1.56,0.64,1); }

@media(max-width:768px) {
  .prof-hero { flex-direction:column; align-items:flex-start; }
  .notif-panel { width:280px; right:-60px; }
  .shortcuts-box { max-height:92vh; }
}


/* ── LEGAL MODAL ── */
.legal-ov { position:fixed; inset:0; background:rgba(0,0,0,0.75); backdrop-filter:blur(8px); z-index:600; display:flex; align-items:center; justify-content:center; padding:1rem; opacity:0; pointer-events:none; transition:opacity 0.25s; }
.legal-ov.open { opacity:1; pointer-events:all; }
.legal-box { background:var(--sur); border:1px solid var(--bdr2); border-radius:var(--rl); width:100%; max-width:580px; max-height:85vh; display:flex; flex-direction:column; box-shadow:0 32px 80px rgba(0,0,0,0.5); animation:su 0.25s ease; }
.legal-head { padding:1.3rem 1.6rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--bdr); flex-shrink:0; }
.legal-head h3 { font-size:1.05rem; font-weight:800; }
.legal-body { padding:1.4rem 1.6rem; overflow-y:auto; font-family:var(--mono); font-size:0.8rem; line-height:1.9; color:var(--txt2); }
.legal-body h4 { font-family:var(--sans); font-weight:800; font-size:0.9rem; color:var(--txt); margin:1.2rem 0 0.4rem; }
.legal-body h4:first-child { margin-top:0; }
.legal-foot { padding:1rem 1.6rem; border-top:1px solid var(--bdr); flex-shrink:0; display:flex; justify-content:flex-end; }