/* ================= FRAZNY PANEL · OBSIDYEN ================= */
:root{
 --bg:#09090d;--bg2:#0e0e14;--panel:#13131b;--panel2:#1a1a24;--panel3:#22222e;
 --line:#ffffff0f;--line2:#ffffff1c;--txt:#f4f3fa;--mut:#a3a1b8;--dim:#6d6b82;
 --a1:#a78bfa;--a2:#f472b6;--a3:#818cf8;--ok:#34d399;--warn:#fbbf24;--bad:#fb7185;--info:#60a5fa;
 --grad:linear-gradient(135deg,var(--a1),var(--a2));
 --e:cubic-bezier(.22,1,.36,1);--sp:cubic-bezier(.34,1.56,.64,1);--io:cubic-bezier(.65,0,.35,1);
 --r:14px;--font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--font);font-size:14px;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--a1) 40%,transparent)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background-color:#ffffff24}
svg.i{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#spot{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(closest-side,#a78bfa1f,transparent);will-change:transform}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- açılış ---------- */
#intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
#intro svg{width:96px;height:96px;display:block;margin:auto}
#intro .mk{stroke:url(#ig);stroke-width:3;fill:none}
#intro .mf{fill:url(#ig);opacity:0}
#intro .w{display:flex;justify-content:center;margin-top:22px;font-weight:800;letter-spacing:.4em;font-size:14px;overflow:hidden;padding-left:.4em}
#intro .w span{display:inline-block;transform:translateY(110%)}
#intro .st{margin-top:14px;text-align:center;color:var(--dim);font-size:12px;height:16px}

/* ---------- yerleşim ---------- */
.app{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr;height:100%}
.side{width:268px;background:#0c0c12e6;border-right:1px solid var(--line);display:flex;flex-direction:column;transition:width .5s var(--e);position:relative;backdrop-filter:blur(12px);min-height:0}
.side.mini{width:80px}
.sh{padding:16px 14px 10px}
.brand{display:flex;align-items:center;gap:11px;padding:4px 6px 14px}
.brand svg{width:34px;height:34px;flex:none}
.brand b{font-size:17px;letter-spacing:.08em;white-space:nowrap}
.brand small{display:block;font-size:10px;letter-spacing:.12em;color:var(--dim);font-weight:700}
.srvsel{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .3s;width:100%;text-align:left}
.srvsel:hover{border-color:var(--line2)}
.srvsel .sa{width:32px;height:32px;border-radius:10px;background:var(--grad);flex:none;display:grid;place-items:center;color:#14101c;font-weight:800}
.srvsel .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.srvsel small{display:block;color:var(--dim);font-size:11px}
.srvsel svg{color:var(--dim);transition:transform .4s var(--sp)}
.srvsel.open svg{transform:rotate(180deg)}
.lbl{transition:opacity .3s,transform .4s var(--e);white-space:nowrap}
.side.mini .lbl{opacity:0;transform:translateX(-8px);pointer-events:none}
.navs{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 14px 14px;min-height:0}
.grp{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--dim);margin:16px 10px 6px;white-space:nowrap;transition:opacity .3s;display:flex;align-items:center;gap:8px}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}
.side.mini .grp{opacity:0;height:0;margin:8px 0}
nav{position:relative}
.nv{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--mut);cursor:pointer;transition:color .25s;user-select:none}
.nv:hover{color:var(--txt)}
.nv.on{color:var(--txt)}
.nv svg{transition:transform .5s var(--sp),color .3s}
.nv:hover svg{transform:scale(1.12)}
.nv.on svg{color:var(--a1)}
.nv .bd{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:999px;background:var(--grad);color:#14101c}
.nv .bd.dot{width:8px;height:8px;padding:0;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.nv .bd.red{background:var(--bad);color:#fff}
#npill{position:absolute;left:0;right:0;top:0;height:38px;border-radius:10px;background:linear-gradient(90deg,#a78bfa1f,#f472b60a);border:1px solid var(--line2);transition:transform .55s var(--sp),height .3s;pointer-events:none}
#npill::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--grad);box-shadow:0 0 12px var(--a1)}
.sf{padding:12px 14px;border-top:1px solid var(--line)}
.me{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;cursor:pointer;transition:background .25s}
.me:hover{background:var(--panel)}
.av{width:32px;height:32px;border-radius:50%;flex:none;position:relative;background:var(--grad);display:grid;place-items:center;font-weight:800;color:#14101c;font-size:12px}
.av.s{width:26px;height:26px;font-size:10px}
.av.l{width:44px;height:44px;font-size:15px}
.av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--bg2);animation:pl 2.2s infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 #34d39999}50%{box-shadow:0 0 0 6px #34d39900}}
.me small{display:block;color:var(--dim);font-size:11px}
.colbtn{position:absolute;right:-13px;top:64px;width:26px;height:26px;border-radius:50%;background:var(--panel2);border:1px solid var(--line2);display:grid;place-items:center;z-index:3;transition:transform .5s var(--sp),background .2s}
.colbtn:hover{background:var(--panel3)}
.colbtn svg{width:14px;height:14px}
.side.mini .colbtn{transform:rotate(180deg)}

main{position:relative;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 32px;background:#09090db3;backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.burger{display:none}
.crumb{display:flex;align-items:center;gap:8px;color:var(--dim);font-weight:600;white-space:nowrap;overflow:hidden}
.crumb b{color:var(--txt);display:inline-block}
.crumb svg{width:14px;height:14px}
.kbar{margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px 8px 12px;width:280px;color:var(--dim);transition:border-color .3s,box-shadow .3s,transform .3s var(--sp)}
.kbar:hover{border-color:var(--line2);transform:translateY(-1px)}
.kbar span{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
kbd{font-family:inherit;font-size:11px;font-weight:700;padding:2px 6px;border-radius:6px;background:var(--panel2);border:1px solid var(--line2);color:var(--mut)}
.tr{display:flex;align-items:center;gap:10px}
.live{display:flex;align-items:center;gap:8px;color:var(--mut);font-size:12.5px;padding:8px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pl 2s infinite}
.ib{position:relative;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--mut);transition:color .2s,border-color .2s}
.ib:hover{color:var(--txt);border-color:var(--line2)}
.ib .n{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}

/* ---------- sayfa ---------- */
#view{padding:30px 32px 140px;max-width:1360px}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.ph .pi{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#a78bfa26,#f472b614);border:1px solid var(--line2);color:var(--a1);margin-bottom:14px}
.ph .pi svg{width:24px;height:24px}
.ttl{font-size:30px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.ttl .ch{display:inline-block;white-space:pre}
.sub{color:var(--mut);margin-top:7px;max-width:640px;line-height:1.5}
.pa{display:flex;gap:10px;flex-wrap:wrap}
.g{display:grid;gap:16px;margin-bottom:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g21{grid-template-columns:1.7fr 1fr}.g12{grid-template-columns:1fr 1.7fr}
.span2{grid-column:span 2}
.g>*,.kan>*{min-width:0}
.spark{max-width:55%}
.pctl{flex-wrap:wrap}
.card{background:#13131bd9;border:1px solid var(--line);border-radius:var(--r);padding:20px;position:relative;transition:border-color .3s,box-shadow .4s}
.card:hover{border-color:var(--line2)}
.card.glow::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 65%,var(--a1) 78%,var(--a2) 88%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 5s linear infinite;pointer-events:none}
@keyframes rot{to{--ang:360deg}}
.ch{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ch .ci{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:#a78bfa1a;color:var(--a1);flex:none}
.ch .ci svg{width:18px;height:18px}
.ch .ct{flex:1;min-width:0}
.ch h3{font-size:15px;font-weight:700}
.ch p{color:var(--dim);font-size:12.5px;margin-top:3px;line-height:1.45}
.ch .cr{margin-left:auto;display:flex;align-items:center;gap:8px}
.muted{color:var(--mut)}.dim{color:var(--dim)}
.sep{height:1px;background:var(--line);margin:14px 0}
.empty{padding:26px;text-align:center;color:var(--dim);border:1px dashed var(--line2);border-radius:12px}

/* ---------- form alanları ---------- */
.fr{display:flex;align-items:center;gap:16px;padding:13px 0;border-top:1px solid var(--line);position:relative}
.ch+.fr,.fr.first{border-top:0;padding-top:2px}
.fr .fl{flex:1;min-width:0}
.fr .fl b{display:block;font-weight:600;font-size:13.5px}
.fr .fl small{display:block;color:var(--dim);font-size:12px;margin-top:3px;line-height:1.4}
.fr .fc{flex:none;display:flex;align-items:center;gap:8px}
.fr.col{flex-direction:column;align-items:stretch;gap:10px}
.fr.col .fc{flex-direction:column;align-items:stretch;gap:10px}
.fr.col .fc>.seg{align-self:flex-start;max-width:100%;overflow-x:auto}
.fr.hl{animation:hl 2.2s var(--e)}
@keyframes hl{0%,30%{background:#a78bfa22;box-shadow:0 0 0 2px var(--a1)}100%{background:transparent;box-shadow:0 0 0 2px transparent}}
.fr.hl{border-radius:10px}
.inp{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;color:var(--txt);outline:none;transition:border-color .3s,box-shadow .3s,background .3s}
.inp:hover{border-color:#ffffff2a}
.inp:focus{border-color:var(--a1);box-shadow:0 0 0 4px #a78bfa29;background:#101017}
textarea.inp{resize:vertical;min-height:84px;line-height:1.55}
.inp.sm{width:auto;padding:7px 10px}
.vars{display:flex;gap:6px;flex-wrap:wrap}
.vars button{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:7px;background:var(--panel2);border:1px solid var(--line2);color:var(--a1);transition:transform .3s var(--sp),background .2s}
.vars button:hover{transform:translateY(-2px);background:var(--panel3)}
/* toggle */
.sw{width:44px;height:25px;border-radius:999px;background:var(--panel3);border:1px solid var(--line2);position:relative;flex:none;transition:background .35s,border-color .35s,box-shadow .35s}
.sw .k{position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:999px;background:var(--dim);transition:left .5s var(--sp),background .3s;display:grid;place-items:center;color:#1b1027}
.sw .k svg{width:11px;height:11px;stroke-width:3.4}
.sw.on{background:var(--grad);border-color:transparent;box-shadow:0 0 18px -4px var(--a2)}
.sw.on .k{left:21px;background:#fff}
/* slider */
.rng{display:flex;align-items:center;gap:12px;min-width:260px}
.rng input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--a1),var(--a2)) 0/var(--p,50%) 100% no-repeat,var(--panel3);outline:none;cursor:pointer}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--a1);box-shadow:0 0 0 0 #a78bfa55;transition:box-shadow .25s,transform .3s var(--sp)}
.rng input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);box-shadow:0 0 0 8px #a78bfa33}
.rng input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--a1)}
.rng .rv{min-width:62px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;padding:6px 8px;border-radius:8px;background:var(--bg2);border:1px solid var(--line2)}
/* özel seçim kutusu */
.dd{display:flex;align-items:center;gap:8px;min-width:220px;max-width:280px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;cursor:pointer;transition:border-color .3s,box-shadow .3s;text-align:left}
.dd:hover{border-color:#ffffff2a}
.dd.open{border-color:var(--a1);box-shadow:0 0 0 4px #a78bfa29}
.dd .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:7px}
.dd .v.ph{color:var(--dim)}
.dd>svg:last-child{color:var(--dim);transition:transform .4s var(--sp);width:15px;height:15px}
.dd.open>svg:last-child{transform:rotate(180deg)}
.dd.full{max-width:none;width:100%}
.hash{color:var(--dim);font-weight:700}
.rdot{width:10px;height:10px;border-radius:50%;flex:none}
#pop{position:fixed;z-index:80;min-width:240px;max-height:320px;display:flex;flex-direction:column;background:#17171fcc;backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line2);border-radius:12px;box-shadow:0 24px 60px -12px #000d;visibility:hidden;transform-origin:top center;overflow:hidden}
#pop.on{visibility:visible}
#pop .ps{padding:8px;border-bottom:1px solid var(--line)}
#pop .ps input{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;outline:none}
#pop .pl{overflow-y:auto;padding:6px}
#pop .po{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--mut);transition:background .15s,color .15s}
#pop .po:hover,#pop .po.kb{background:var(--panel3);color:var(--txt)}
#pop .po.sel{color:var(--txt)}
#pop .po.sel::after{content:"";margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 8px var(--a1)}
#pop .pg{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--dim);padding:8px 10px 4px}
/* segment */
.seg{position:relative;display:inline-flex;padding:4px;border-radius:12px;background:var(--bg2);border:1px solid var(--line2);flex-wrap:nowrap}
.seg button{position:relative;z-index:1;padding:7px 14px;border-radius:9px;font-weight:600;font-size:13px;color:var(--mut);transition:color .3s;white-space:nowrap}
.seg button.on{color:var(--txt)}
.seg .sp{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:9px;background:var(--panel3);border:1px solid var(--line2);transition:left .5s var(--sp),width .5s var(--sp);box-shadow:0 4px 14px -4px #000}
/* çipler */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);font-size:12.5px;font-weight:600}
.chip button{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:var(--dim);transition:background .2s,color .2s,transform .3s var(--sp)}
.chip button:hover{background:#fb718533;color:var(--bad);transform:rotate(90deg)}
.chip button svg{width:11px;height:11px;stroke-width:2.6}
.addrow{display:flex;gap:8px;margin-top:12px}
.addrow .inp{flex:1}
/* buton */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:10px;font-weight:700;font-size:13px;background:var(--panel2);border:1px solid var(--line2);transition:transform .35s var(--sp),background .25s,border-color .25s,box-shadow .3s;white-space:nowrap}
.btn:hover{border-color:#a78bfa66;background:var(--panel3)}
.btn:active{transform:scale(.96)}
.btn.pri{background:var(--grad);color:#14101c;border-color:transparent;box-shadow:0 8px 24px -10px var(--a2)}
.btn.pri:hover{box-shadow:0 10px 30px -8px var(--a2)}
.btn.dng{background:#fb71851a;color:var(--bad);border-color:#fb718540}
.btn.dng:hover{background:#fb718530;border-color:var(--bad)}
.btn.ok{background:#34d3991a;color:var(--ok);border-color:#34d39940}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:8px}
.btn.ic{padding:8px;width:36px;height:36px}
.btn.sm.ic{width:30px;height:30px;padding:6px}
.btn svg{width:15px;height:15px}
.rip{position:absolute;border-radius:50%;background:currentColor;opacity:.25;transform:scale(0);pointer-events:none}
.hold{position:relative}
.hold .hf{position:absolute;left:0;top:0;bottom:0;width:0;background:#fb718555;pointer-events:none}
/* rozet */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tag.n::before{display:none}
.t-bad{color:var(--bad);background:#fb71851f}.t-warn{color:var(--warn);background:#fbbf241f}.t-ok{color:var(--ok);background:#34d3991f}.t-a{color:var(--a1);background:#a78bfa1f}.t-p{color:var(--a2);background:#f472b61f}.t-info{color:var(--info);background:#60a5fa1f}.t-dim{color:var(--mut);background:#ffffff0d}

/* ---------- istatistik ---------- */
.kpi .h{display:flex;align-items:center;gap:10px;color:var(--mut);font-weight:600;font-size:13px}
.kpi .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#a78bfa1a;color:var(--a1)}
.kpi .ic svg{width:17px;height:17px}
.num{font-size:30px;font-weight:800;margin-top:14px;letter-spacing:-.02em;display:flex;line-height:1.1;height:1.1em;font-variant-numeric:tabular-nums}
.num.md{font-size:24px;margin-top:6px}
.dg{display:inline-block;height:1.1em;overflow:hidden}
.strip{display:flex;flex-direction:column}
.strip span{height:1.1em}
.kpi .f{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.delta{font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:#34d3991f;color:var(--ok)}
.delta.dn{background:#fb71851f;color:var(--bad)}
.spark{width:96px;height:30px;overflow:visible}
.spark path{fill:none;stroke:url(#sg);stroke-width:2;stroke-linecap:round}
.chart{position:relative;height:240px}
.chart.sm{height:170px}
.chart svg{width:100%;height:100%;overflow:visible;display:block}
.chart .ln{fill:none;stroke-width:2.5;stroke-linecap:round}
.chart .gl{stroke:var(--line);stroke-dasharray:3 5}
.cdot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--bg);border:3px solid var(--a1);opacity:0;transition:left .25s var(--e),top .25s var(--e),opacity .2s;pointer-events:none;box-shadow:0 0 0 6px #a78bfa33}
.cvl{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(var(--a1),transparent);opacity:0;transition:left .25s var(--e),opacity .2s;pointer-events:none}
.ctip{position:absolute;padding:8px 11px;border-radius:9px;background:#1f1f2bee;border:1px solid var(--line2);font-size:12px;pointer-events:none;opacity:0;transform:translate(-50%,-135%);transition:left .25s var(--e),top .25s var(--e),opacity .2s;white-space:nowrap;box-shadow:0 10px 30px #0008;z-index:3}
.ctip b{display:block;font-size:15px}
.xl{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;margin-top:8px}
.bars{display:flex;align-items:flex-end;gap:8px;height:180px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .b i{width:100%;max-width:38px;border-radius:7px 7px 3px 3px;background:linear-gradient(180deg,var(--a2),var(--a1));height:0;transition:height 1.1s var(--sp),filter .2s;position:relative}
.bars .b i:hover{filter:brightness(1.25)}
.bars .b i::after{content:attr(data-v);position:absolute;left:50%;top:-22px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--mut);font-style:normal;opacity:0;transition:opacity .2s}
.bars .b i:hover::after{opacity:1}
.bars .b span{font-size:11px;color:var(--dim);white-space:nowrap}
.hbar{display:flex;flex-direction:column;gap:12px}
.hbar .r{display:grid;grid-template-columns:110px 1fr 54px;gap:12px;align-items:center;font-size:13px}
.hbar .r span:first-child{color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .t{height:8px;border-radius:8px;background:var(--bg2);overflow:hidden}
.hbar .t i{display:block;height:100%;width:0;border-radius:8px;background:var(--grad);transition:width 1.1s var(--e)}
.hbar .r b{text-align:right;font-variant-numeric:tabular-nums}
.donut{display:flex;align-items:center;gap:22px}
.donut .dc{position:relative;flex:none}
.donut svg{width:150px;height:150px;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:13;transition:stroke-dasharray 1.3s var(--e),opacity .3s,stroke-width .3s var(--sp)}
.donut .dcl{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.donut .dcl b{font-size:26px;display:block;font-weight:800}
.donut .dcl small{color:var(--dim);font-size:11px}
.leg{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.leg div{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;cursor:default;transition:background .2s,transform .3s var(--sp)}
.leg div:hover{background:var(--panel2);transform:translateX(3px)}
.leg i{width:10px;height:10px;border-radius:3px;flex:none}
.leg span{flex:1;color:var(--mut)}
.ring{position:relative;width:120px;height:120px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .rl{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .rl b{font-size:22px;display:block}
.ring .rl small{font-size:11px;color:var(--dim)}

/* ---------- listeler ---------- */
.lb{list-style:none;display:flex;flex-direction:column;gap:2px}
.lb li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;transition:background .3s}
.lb li:hover{background:var(--panel2)}
.lb li.up{animation:glow 1.3s var(--e)}
@keyframes glow{0%{background:#a78bfa38}100%{background:transparent}}
.lb .rk{width:24px;font-weight:800;color:var(--dim);text-align:center;font-variant-numeric:tabular-nums}
.lb li:nth-child(1) .rk{color:#fcd34d}.lb li:nth-child(2) .rk{color:#e5e7eb}.lb li:nth-child(3) .rk{color:#f59e0b}
.lb .nm{width:110px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb .bar{flex:1;height:7px;border-radius:7px;background:var(--bg2);overflow:hidden}
.lb .bar i{display:block;height:100%;width:0;border-radius:7px;background:var(--grad);transition:width 1s var(--e)}
.lb .xp{min-width:86px;text-align:right;color:var(--mut);font-variant-numeric:tabular-nums;font-size:12.5px}
.feed{list-style:none;display:flex;flex-direction:column}
.feed li{display:flex;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line);overflow:hidden;align-items:flex-start}
.feed li:last-child{border-bottom:0}
.feed .fi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}
.feed .fi svg{width:16px;height:16px}
.feed p{flex:1;color:var(--mut);line-height:1.45;font-size:13px}
.feed p b{color:var(--txt);font-weight:600}
.feed time{color:var(--dim);font-size:11.5px;white-space:nowrap}
.ul{list-style:none;display:flex;flex-direction:column}
.ul li{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:10px;transition:background .2s}
.ul li:hover{background:var(--panel2)}
.ul li .x{flex:1;min-width:0}
.ul li .x b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ul li .x small{color:var(--dim);font-size:12px}
.ul li .act{opacity:0;transition:opacity .2s;display:flex;gap:6px}
.ul li:hover .act{opacity:1}

/* ---------- tablo ---------- */
.tbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.tbar .srch{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:0 11px;flex:1;min-width:180px;max-width:320px;transition:border-color .3s,box-shadow .3s}
.tbar .srch:focus-within{border-color:var(--a1);box-shadow:0 0 0 4px #a78bfa29}
.tbar .srch input{background:none;border:0;outline:none;padding:9px 0;flex:1;min-width:0}
.tbar .srch svg{color:var(--dim);width:16px;height:16px}
.tbl{display:flex;flex-direction:column}
.row{display:grid;align-items:center;gap:12px;padding:12px 12px;border-radius:10px;cursor:pointer;transition:background .25s}
.row:hover{background:var(--panel2)}
.row.h{color:var(--dim);font-size:11px;font-weight:800;letter-spacing:.08em;cursor:default;padding-top:4px}
.row.h:hover{background:none}
.row .who{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.row .who span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .chev{transition:transform .45s var(--sp);color:var(--dim);display:grid;place-items:center}
.row.open .chev{transform:rotate(180deg)}
.det{overflow:hidden;height:0}
.det .in{margin:0 12px 12px;padding:14px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);display:flex;gap:26px;flex-wrap:wrap;color:var(--dim);font-size:12px;align-items:flex-end}
.det .in b{display:block;color:var(--txt);margin-top:3px;font-size:13px}
.det .in .btns{margin-left:auto;display:flex;gap:8px}
.cd{font-variant-numeric:tabular-nums;font-weight:700}

/* ---------- kanban (öneriler) ---------- */
.kan{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kcol{background:#0e0e14b3;border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:200px}
.kcol h4{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 6px 12px}
.kcol h4 em{font-style:normal;margin-left:auto;color:var(--dim);font-size:12px}
.kcard{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:13px;margin-bottom:10px}
.kcard p{line-height:1.5;margin:8px 0 10px}
.kcard .km{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.kcard .kb{display:flex;gap:6px;margin-left:auto}
.votes{display:flex;gap:10px;font-size:12px;font-weight:700}
.votes span{display:flex;align-items:center;gap:4px}

/* ---------- müzik ---------- */
.np{display:flex;gap:20px;align-items:center}
.cover{width:132px;height:132px;border-radius:18px;flex:none;position:relative;overflow:hidden;background:conic-gradient(from var(--ang),#a78bfa,#f472b6,#818cf8,#a78bfa);animation:rot 8s linear infinite}
.cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 0 16px,#0009 17px 18px,transparent 19px),repeating-radial-gradient(circle,#0000 0 3px,#00000022 3px 4px)}
.cover.paused{animation-play-state:paused}
.np .meta{flex:1;min-width:0}
.np h2{font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq{display:flex;align-items:flex-end;gap:3px;height:18px}
.eq i{width:3px;border-radius:2px;background:var(--grad);height:30%;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}.eq i:nth-child(5){animation-delay:-.45s}
.eq.paused i{animation-play-state:paused}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(8deg)}}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.prog{height:6px;border-radius:6px;background:var(--panel3);margin:14px 0 6px;overflow:hidden;cursor:pointer}
.prog i{display:block;height:100%;background:var(--grad);border-radius:6px;width:0}
.ptime{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.pctl{display:flex;align-items:center;gap:10px;margin-top:12px}
.pctl .btn.play{width:46px;height:46px;border-radius:50%;padding:0}
.q li{cursor:grab}
.q li.cur{background:#a78bfa14}
.q .qn{width:22px;text-align:center;color:var(--dim);font-weight:700;font-size:12px}
.q .qd{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}

/* ---------- önizlemeler ---------- */
.dmsg{display:flex;gap:12px;padding:14px;border-radius:12px;background:#0b0b10;border:1px solid var(--line)}
.dmsg .av{width:38px;height:38px}
.dmsg .bn{font-weight:700;display:flex;align-items:center;gap:6px}
.dmsg .bn em{font-style:normal;font-size:9.5px;font-weight:800;padding:1px 5px;border-radius:4px;background:var(--grad);color:#14101c}
.dmsg .bn time{font-weight:500;color:var(--dim);font-size:11px}
.emb{margin-top:8px;border-radius:8px;background:#15151d;border:1px solid var(--line);border-left:4px solid var(--a1);padding:12px 14px;max-width:460px}
.emb h4{font-size:14.5px;margin-bottom:5px}
.emb p{color:#cfcde0;line-height:1.5;font-size:13px;white-space:pre-wrap;word-break:break-word}
.emb p em{font-style:normal;color:var(--a1);font-weight:600;background:#a78bfa1a;border-radius:4px;padding:0 3px}
.emb .ef{margin-top:10px;font-size:11px;color:var(--dim)}
.emb img,.emb .eimg{margin-top:10px;border-radius:8px;width:100%;height:120px;background:var(--grad);opacity:.85}
.wcard{position:relative;border-radius:14px;overflow:hidden;height:170px;margin-top:10px;background:#0f0c18;display:flex;align-items:center;gap:18px;padding:0 24px;border:1px solid var(--line2)}
.wcard::before{content:"";position:absolute;inset:-40%;background:radial-gradient(30% 40% at 25% 40%,#a78bfa66,transparent 70%),radial-gradient(30% 40% at 80% 60%,#f472b655,transparent 70%);animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(8%,-6%) rotate(8deg)}}
.wcard>*{position:relative}
.wcard .wa{width:86px;height:86px;border-radius:50%;background:var(--grad);border:4px solid #ffffff22;display:grid;place-items:center;font-size:30px;font-weight:800;color:#14101c;flex:none}
.wcard small{color:#d9d6ee;letter-spacing:.2em;font-size:11px;font-weight:700}
.wcard h3{font-size:24px;margin:4px 0}
.wcard p{color:#cfcde0}
.chatp{display:flex;flex-direction:column;gap:12px;height:300px;overflow:hidden;padding:4px}
.cm{display:flex;gap:10px;max-width:88%}
.cm.me{align-self:flex-end;flex-direction:row-reverse}
.cm .bb{padding:10px 13px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);line-height:1.5}
.cm.me .bb{background:#a78bfa24;border-color:#a78bfa44}
.typing{display:flex;gap:4px;padding:4px 2px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:ty 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.rbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rbtns span{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:6px;background:#4e5058;font-size:13px;font-weight:600;color:#fff}
.rbtns span.p{background:#6d28d9}

/* ---------- sistem ---------- */
.cogs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.cog{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);font-size:13px;font-weight:600}
.cog i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);flex:none}
.cog small{margin-left:auto;color:var(--dim);font-weight:500;font-size:11px}
.pbar{height:8px;border-radius:8px;background:var(--panel3);overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--grad);border-radius:8px}
.big{font-size:42px;font-weight:800;letter-spacing:-.03em}
.emerg{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 20px;gap:14px}
.emerg .eb{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,#fb718533,#fb71850a 70%);border:2px solid #fb718566;color:var(--bad);cursor:pointer;user-select:none;transition:transform .3s var(--sp)}
.emerg .eb:active{transform:scale(.95)}
.emerg .eb svg.i{width:46px;height:46px}
.emerg .eb .hr{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);transform:rotate(-90deg)}
.emerg .eb .hr circle{fill:none;stroke:var(--bad);stroke-width:4;stroke-linecap:round}
.emerg .eb::before{content:"";position:absolute;inset:0;border-radius:50%;animation:pr 2.4s infinite;border:2px solid #fb718566}
@keyframes pr{from{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
.emerg.act .eb{background:radial-gradient(circle,#fb718566,#fb718522 70%);color:#fff}

/* ---------- komut paleti / modal / bildirim ---------- */
#ov{position:fixed;inset:0;z-index:70;background:#05050999;backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
#ov.on{opacity:1;visibility:visible}
#cmdk{position:fixed;z-index:75;left:50%;top:14vh;width:min(620px,calc(100% - 32px));transform:translateX(-50%);background:#14141cf2;border:1px solid var(--line2);border-radius:18px;box-shadow:0 40px 100px -20px #000;overflow:hidden;visibility:hidden}
#cmdk.on{visibility:visible}
#cmdk .ki{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
#cmdk .ki input{flex:1;background:none;border:0;outline:none;font-size:16px}
#cmdk .ki svg{color:var(--a1);width:20px;height:20px}
#cmdk .kl{max-height:52vh;overflow-y:auto;padding:8px}
#cmdk .kg{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--dim);padding:10px 12px 6px}
#cmdk .ko{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--mut);transition:background .15s}
#cmdk .ko.kb{background:var(--panel3);color:var(--txt)}
#cmdk .ko .ki2{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--panel2);color:var(--a1);flex:none}
#cmdk .ko .ki2 svg{width:15px;height:15px}
#cmdk .ko b{color:var(--txt);font-weight:600}
#cmdk .ko small{display:block;color:var(--dim);font-size:12px}
#cmdk .ko .ar{margin-left:auto;opacity:0;transition:opacity .2s,transform .3s var(--sp);transform:translateX(-6px)}
#cmdk .ko.kb .ar{opacity:1;transform:none}
#cmdk .kf{display:flex;gap:16px;padding:10px 16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px}
#md{position:fixed;z-index:75;left:50%;top:50%;width:min(540px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line2);border-radius:20px;padding:24px;visibility:hidden;box-shadow:0 40px 90px -20px #000}
#md.on{visibility:visible}
#md .mh{display:flex;align-items:center;gap:14px;margin-bottom:16px}
#md .mi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#a78bfa1f;color:var(--a1)}
#md .mi.dng{background:#fb71851f;color:var(--bad)}
#md h3{font-size:18px}
#md .x{margin-left:auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--mut);transition:background .2s,transform .4s var(--sp)}
#md .x:hover{background:var(--panel2);transform:rotate(90deg)}
#md .fld{margin-top:14px}
#md .fld label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--dim);margin-bottom:7px}
#md .acts{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.dropp{position:fixed;z-index:78;width:360px;background:#16161ef2;backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:16px;box-shadow:0 30px 70px -14px #000;visibility:hidden;transform-origin:top right;overflow:hidden}
.dropp.on{visibility:visible}
.dropp .dh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:700}
.dropp .feed{padding:4px 14px;max-height:380px;overflow:auto}
#savebar{position:fixed;z-index:60;left:50%;bottom:22px;transform:translate(-50%,160%);display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;border-radius:16px;background:#17171ff2;backdrop-filter:blur(16px);border:1px solid var(--line2);box-shadow:0 24px 60px -10px #000;transition:transform .6s var(--sp);white-space:nowrap}
#savebar.on{transform:translate(-50%,0)}
#savebar.shake{animation:shk .5s}
#savebar.shake{border-color:var(--bad);box-shadow:0 0 0 4px #fb718533,0 24px 60px -10px #000}
@keyframes shk{0%,100%{margin-left:0}20%{margin-left:-14px}40%{margin-left:12px}60%{margin-left:-8px}80%{margin-left:5px}}
#savebar .si{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fbbf241f;color:var(--warn)}
#savebar .sc{color:var(--dim);font-size:12px}
#toasts{position:fixed;right:22px;bottom:22px;z-index:85;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:14px;background:#1d1d27f2;border:1px solid var(--line2);box-shadow:0 20px 40px -10px #000b;min-width:270px;max-width:360px;position:relative;overflow:hidden}
.toast .ti{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#34d39926;color:var(--ok);flex:none}
.toast.bad .ti{background:#fb718526;color:var(--bad)}
.toast.info .ti{background:#a78bfa26;color:var(--a1)}
.toast small{display:block;color:var(--dim)}
.toast .pg{position:absolute;left:0;bottom:0;height:2px;background:var(--grad);animation:pg 3.4s linear forwards}
@keyframes pg{from{width:100%}to{width:0}}
.spin{width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{border-radius:var(--r);background:linear-gradient(90deg,var(--panel) 0%,var(--panel2) 50%,var(--panel) 100%) 0 0/200% 100%;animation:sk 1.1s linear infinite;border:1px solid var(--line)}
@keyframes sk{to{background-position:-200% 0}}

/* ---------- mobil ---------- */
@media (max-width:1180px){.g4{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr}.kbar{width:200px}}
@media (max-width:960px){
 .app{grid-template-columns:1fr}
 .side{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-105%);transition:transform .5s var(--e);width:280px!important}
 .side.open{transform:none;box-shadow:30px 0 60px #000a}
 .side .lbl,.side .grp{opacity:1!important;transform:none!important;height:auto!important}
 .colbtn{display:none}
 .burger{display:grid}
 .top{padding:12px 16px}
 .kbar{width:auto;margin-left:auto}.kbar span+span,.kbar kbd{display:none}
 .tbl{overflow-x:auto}.tbl .row,.tbl .det{min-width:620px}
 .fr:has(>.fc>.sw){flex-wrap:nowrap}.fr:has(>.fc>.sw) .fc{width:auto}
 .crumb{display:none}
 .live span{display:none}
 #view{padding:22px 16px 140px}
 .g2,.g3,.g21,.g12,.kan{grid-template-columns:1fr}.span2{grid-column:auto}
 .fr{flex-wrap:wrap}.fr .fc{width:100%}.dd{max-width:none;width:100%}.rng{min-width:0;width:100%}
 .np{flex-direction:column;align-items:flex-start}
 #savebar{left:16px;right:16px;transform:translateY(160%);white-space:normal}#savebar.on{transform:none}
 #savebar .sc{display:none}
 .dropp{width:calc(100% - 32px)}
}
@media (max-width:560px){.g4{grid-template-columns:1fr 1fr}.num{font-size:24px}.ttl{font-size:25px}.donut{flex-direction:column}.hbar .r{grid-template-columns:80px 1fr 44px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- v2: gerçek veri ---------- */
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.av.xs{width:20px;height:20px;font-size:9px;margin-left:-5px}
.fr.lockd .fc{pointer-events:none;opacity:.42;filter:grayscale(.6)}
.fr .lk{display:flex!important;align-items:center;gap:5px;color:var(--warn)!important}
.fr .lk svg{width:12px;height:12px}
.err{padding:30px;text-align:center}
.err h3{margin:10px 0 6px}
#login{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:var(--bg);padding:16px}
#login .box{width:min(420px,100%);text-align:center;padding:36px 28px;border-radius:24px;background:#13131bcc;border:1px solid var(--line2);backdrop-filter:blur(14px);position:relative;overflow:hidden}
#login .box::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--ang),transparent 0 60%,var(--a1) 75%,var(--a2) 85%,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 5s linear infinite;pointer-events:none}
#login svg.logo{width:72px;height:72px;margin:0 auto 18px;display:block}
#login h1{font-size:26px;letter-spacing:-.02em}
#login p{color:var(--mut);margin:10px 0 24px;line-height:1.55}
#login .btn{width:100%;padding:13px;font-size:15px}
#login .note{margin-top:16px;font-size:12px;color:var(--dim)}
.gpick{display:grid;gap:10px;margin-top:6px;text-align:left}
.gpick button{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);transition:border-color .25s,transform .35s var(--sp)}
.gpick button:hover{border-color:var(--a1);transform:translateY(-2px)}
.gpick .av{border-radius:12px;width:40px;height:40px}
.demo-badge{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:55;font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:#fbbf2420;color:var(--warn);border:1px solid #fbbf2455;pointer-events:none}