:root{
  --bg:#09060f; --panel:#120c1d; --panel2:#1a1129; --panel3:#221637;
  --line:#2a1d42; --line2:#3b2a5e;
  --text:#f1ecfb; --muted:#ab9fc9; --dim:#7a6e9c;
  --p1:#a855f7; --p2:#8b5cf6; --p3:#c4b5fd; --accent:#ec4899;
  --ok:#4ade80; --warn:#facc15; --mute:#fb923c; --ban:#f87171; --perm:#ef4444; --info:#38bdf8;
  --r:14px; --side:248px; --top:60px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 16px)}
body{margin:0; background:var(--bg); color:var(--text); font:15px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overflow-x:hidden}
a{color:var(--p3); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono); font-size:.86em; color:#e9d5ff; background:rgba(168,85,247,.12); padding:1px 6px; border-radius:6px}
button{font:inherit; color:inherit}
[hidden]{display:none!important}

.glow{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 420px at 85% -10%,rgba(124,58,237,.28),transparent 70%),
    radial-gradient(600px 400px at 0% 40%,rgba(236,72,153,.09),transparent 70%),
    radial-gradient(600px 400px at 60% 110%,rgba(79,70,229,.14),transparent 70%)}

/* TOP BAR */
.topbar{position:fixed; inset:0 0 auto 0; height:var(--top); z-index:60; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:rgba(9,6,15,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.06em; color:#fff; white-space:nowrap}
.brand:hover{text-decoration:none}
.logo{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--p1),var(--accent)); box-shadow:0 0 22px rgba(168,85,247,.45); font-size:16px}
.brand small{color:var(--muted); font-weight:700; letter-spacing:.16em; font-size:.66rem; padding:3px 8px; border:1px solid var(--line2); border-radius:999px}
.top-right{margin-left:auto; display:flex; align-items:center; gap:8px}
.chipbtn{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); color:var(--muted); font-weight:600; font-size:.84rem; cursor:pointer}
.chipbtn:hover{color:var(--text); border-color:var(--p2); text-decoration:none}
.iconbtn{width:38px; height:38px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); cursor:pointer; font-size:1rem}
.menu-btn{display:none}
.user{display:flex; align-items:center; gap:9px; padding:4px 6px 4px 4px; border-radius:12px; border:1px solid var(--line2); background:var(--panel)}
.user img{width:30px; height:30px; border-radius:9px}
.user .meta{line-height:1.15; padding-right:4px}
.user .meta b{display:block; font-size:.86rem}
.user .meta span{font-size:.72rem; font-weight:700}
.user button{border:0; background:transparent; color:var(--dim); cursor:pointer; padding:6px; border-radius:8px; font-size:.8rem}
.user button:hover{color:var(--text); background:var(--panel2)}

/* SHELL */
.shell{display:flex; padding-top:var(--top)}
.side{position:fixed; top:var(--top); bottom:0; left:0; width:var(--side); padding:18px 12px; border-right:1px solid var(--line); background:rgba(12,8,20,.6); overflow-y:auto; display:flex; flex-direction:column; z-index:55}
.nav-group{display:flex; flex-direction:column; gap:2px}
.nav-label{margin:18px 12px 6px; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.side nav a{display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600; font-size:.9rem; transition:background .15s,color .15s}
.side nav a span{width:20px; text-align:center}
.side nav a:hover{background:var(--panel2); color:var(--text); text-decoration:none}
.side nav a.active{background:rgba(168,85,247,.16); color:#fff; box-shadow:inset 2px 0 0 var(--p1)}
.nav-badge{margin-left:auto; font-size:.7rem; padding:1px 8px; border-radius:999px; background:var(--panel3); color:var(--muted)}
.nav-badge.met{background:rgba(74,222,128,.15); color:var(--ok)}
.nav-badge.behind{background:rgba(250,204,21,.14); color:var(--warn)}
.side-foot{margin-top:auto; padding:12px; font-size:.75rem; color:var(--dim)}
.scrim{position:fixed; inset:var(--top) 0 0 0; background:rgba(0,0,0,.55); z-index:54}
main{flex:1; min-width:0; margin-left:var(--side); padding:0 clamp(16px,4vw,48px) 0}
main > *{max-width:1080px; margin-left:auto; margin-right:auto}

/* HERO */
.hero{display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center; padding:56px 0 28px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--line2); border-radius:999px; color:var(--p3); font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:rgba(168,85,247,.08)}
.eyebrow i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem); line-height:1.06; margin:18px 0 14px; letter-spacing:-.035em; font-weight:800}
.grad{background:linear-gradient(90deg,#c084fc,#a855f7 45%,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--muted); font-size:1.03rem; margin:0 0 24px; max-width:560px}
.btns{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border-radius:11px; font-weight:700; border:1px solid var(--line2); background:var(--panel2); color:var(--text); cursor:pointer; font-size:.92rem; transition:transform .15s,border-color .15s,background .15s; white-space:nowrap}
.btn:hover{transform:translateY(-1px); border-color:var(--p2); text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--p1),var(--p2)); border-color:transparent; color:#fff; box-shadow:0 8px 26px rgba(139,92,246,.32)}
.btn.discord{background:#5865f2; border-color:transparent; color:#fff}
.btn.danger{color:var(--ban); border-color:rgba(248,113,113,.35)}
.btn.sm{padding:7px 13px; font-size:.84rem; border-radius:9px}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.hero-card{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line2); border-radius:18px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-card h3{margin:0 0 4px; font-size:1.05rem}
.hero-card p{margin:0 0 16px; color:var(--muted); font-size:.9rem}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.stat b{display:block; font-size:1.6rem; line-height:1.1}
.stat span{color:var(--muted); font-size:.82rem}

/* SECTIONS */
section{padding:64px 0 0}
.head{margin-bottom:22px}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.kicker{color:var(--p3); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase}
.head h2{font-size:clamp(1.55rem,3vw,2.05rem); margin:4px 0 6px; letter-spacing:-.025em}
.head p{margin:0; color:var(--muted); max-width:680px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px}
.card h3{margin:0 0 6px; font-size:1.02rem}
.card p{color:var(--muted); margin:6px 0}
.two{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); margin-top:14px}
.grid3{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:14px}
.note{margin-top:12px; color:var(--muted); font-size:.86rem}
.callout{margin-top:14px; padding:14px 16px; border-radius:var(--r); border:1px dashed var(--line2); color:var(--muted); font-size:.9rem}
.empty{padding:28px; text-align:center; color:var(--muted); border:1px dashed var(--line2); border-radius:var(--r)}
footer{margin-top:90px; border-top:1px solid var(--line); padding:28px 0 48px; color:var(--dim); font-size:.84rem; text-align:center}

/* CONDUCT */
.rules{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden}
.rule{display:flex; gap:14px; padding:18px 20px; border-bottom:1px solid var(--line)}
.rule:nth-child(odd){border-right:1px solid var(--line)}
.rule .num{flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:rgba(168,85,247,.14); color:var(--p3); font-weight:800; font-size:.85rem}
.rule h3{margin:0 0 2px; font-size:.97rem}
.rule p{margin:0; color:var(--muted); font-size:.9rem}

/* RANKS */
.ladder{display:grid; grid-template-columns:260px 1fr; gap:14px; align-items:start}
.rank-list{display:flex; flex-direction:column; gap:4px; position:relative}
.rank-btn{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:9px 12px; border-radius:10px; border:1px solid transparent; background:transparent; cursor:pointer; font-weight:600; color:var(--muted); transition:all .15s}
.rank-btn:hover{background:var(--panel); color:var(--text)}
.rank-btn.on{border-color:color-mix(in srgb,var(--c) 50%,transparent); background:color-mix(in srgb,var(--c) 12%,var(--panel)); color:#fff}
.rank-btn .dot{width:9px; height:9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c); flex:none}
.rank-btn .lv{margin-left:auto; color:var(--dim); font-size:.72rem; font-weight:700; font-family:var(--mono)}
.detail{position:sticky; top:calc(var(--top) + 16px); border-color:var(--line2); border-top:3px solid var(--c)}
.detail h3{margin:0; font-size:1.55rem; color:var(--c)}
.detail .sub{color:var(--muted); font-size:.85rem}
.detail h4{margin:18px 0 8px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.detail ul{margin:0; padding-left:18px}
.detail li{margin:4px 0}
.box{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:11px 14px; color:var(--muted); font-size:.92rem}
.quota-mini{display:flex; gap:8px; flex-wrap:wrap}
.quota-mini span{padding:5px 10px; border-radius:8px; background:var(--panel2); border:1px solid var(--line); font-size:.85rem}
.quota-mini b{color:#fff}

/* COMMANDS */
.cmd-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.cmd-tab{padding:8px 14px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); color:var(--muted); font-weight:650; font-size:.86rem; cursor:pointer}
.cmd-tab:hover{color:var(--text)}
.cmd-tab.on{color:#fff; border-color:var(--c); background:color-mix(in srgb,var(--c) 14%,var(--panel))}
.cmd-tab small{color:var(--dim); margin-left:4px}
.cmd-panel{padding:6px; border-top:3px solid var(--c)}
.cmd-panel .sub{padding:10px 14px 6px; color:var(--dim); font-size:.84rem}
.cmd-grid{display:grid; grid-template-columns:repeat(2,1fr)}
.cmd{display:flex; flex-direction:column; gap:2px; text-align:left; background:transparent; border:0; border-top:1px solid var(--line); padding:11px 14px; cursor:pointer; transition:background .15s}
.cmd:hover{background:rgba(168,85,247,.08)}
.cmd code{background:none; padding:0; font-size:.84rem; word-break:break-word}
.cmd span{color:var(--muted); font-size:.82rem}

/* PUNISHMENTS */
.tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
.input{padding:10px 14px; border-radius:10px; border:1px solid var(--line2); background:var(--panel); color:var(--text); font-size:.92rem; outline:none; font-family:inherit; min-width:0}
.input:focus{border-color:var(--p2); box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.search{flex:1 1 240px}
.lbl{color:var(--dim); font-size:.84rem; font-weight:600}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.chip{padding:6px 13px; border-radius:999px; border:1px solid var(--line2); background:var(--panel); color:var(--muted); font-weight:650; font-size:.83rem; cursor:pointer}
.chip:hover{color:var(--text)}
.chip.on{background:rgba(168,85,247,.2); color:#fff; border-color:var(--p2)}
.chip small{color:var(--dim); margin-left:3px}
.pun-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden}
.pun{display:grid; grid-template-columns:minmax(200px,1.1fr) 2fr auto; gap:16px; align-items:center; padding:13px 18px; border-bottom:1px solid var(--line)}
.pun:last-child{border-bottom:0}
.pun:hover{background:rgba(168,85,247,.04)}
.pun .off b{display:flex; align-items:center; gap:8px; font-size:.95rem}
.pun .off span{display:block; color:var(--muted); font-size:.83rem}
.steps-row{display:flex; align-items:center; flex-wrap:wrap; gap:5px}
.steps-row i{color:var(--dim); font-style:normal; font-size:.75rem}
.tag{display:inline-block; padding:3px 9px; border-radius:7px; font-size:.78rem; font-weight:700; white-space:nowrap}
.t-mute{background:rgba(251,146,60,.13); color:var(--mute)}
.t-ban{background:rgba(248,113,113,.13); color:var(--ban)}
.t-perm{background:rgba(239,68,68,.24); color:#fecaca}
.type{font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; border-radius:6px; border:1px solid}
.type.mute{color:var(--mute); border-color:rgba(251,146,60,.4)}
.type.ban{color:var(--ban); border-color:rgba(248,113,113,.4)}
pre.tpl{margin:12px 0; padding:14px 16px; background:#0c0716; border:1px solid var(--line); border-radius:10px; color:#e9d5ff; font:500 .84rem/1.6 var(--mono); overflow-x:auto}
.mini-steps{margin:10px 0 0; padding:0; list-style:none; counter-reset:m; display:grid; gap:10px}
.mini-steps li{display:flex; gap:12px; color:var(--muted); font-size:.92rem}
.mini-steps li::before{counter-increment:m; content:counter(m); flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; background:rgba(168,85,247,.16); color:var(--p3); font-weight:800; font-size:.76rem}
.mini-steps b{color:var(--text)}

/* TICKETS */
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.76rem; font-weight:700; background:rgba(168,85,247,.14); color:var(--p3); margin:2px 4px 2px 0}
.copyline{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 13px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); cursor:pointer; margin-top:8px; text-align:left}
.copyline:hover{border-color:var(--p2)}
.copyline code{background:none; padding:0}
.copyline span{color:var(--muted); font-size:.8rem; text-align:right}
.stepper{display:grid; gap:12px; counter-reset:s; margin-top:14px}
.step{display:flex; gap:14px; align-items:flex-start}
.step::before{counter-increment:s; content:counter(s); flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:linear-gradient(135deg,var(--p1),var(--accent)); color:#fff}
.step h3{margin:3px 0 1px; font-size:.95rem}
.step p{margin:0; color:var(--muted); font-size:.9rem}
.panels{display:flex; flex-direction:column; margin-top:10px}
.panels div{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:.9rem; flex-wrap:wrap}

/* MENTORING */
details{background:var(--panel); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; overflow:hidden}
details[open]{border-color:var(--line2); background:var(--panel2)}
summary{cursor:pointer; list-style:none; padding:14px 16px; font-weight:700; display:flex; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary .n{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:rgba(168,85,247,.16); color:var(--p3); font-size:.8rem}
summary::after{content:"+"; margin-left:auto; color:var(--p3); font-size:1.2rem}
details[open] summary::after{content:"–"}
details .body{padding:0 16px 16px 56px; color:var(--muted); font-size:.93rem}
details .body ul{padding-left:18px; margin:8px 0}
blockquote{margin:10px 0 0; padding:10px 14px; border-left:3px solid var(--p2); background:rgba(168,85,247,.08); border-radius:0 10px 10px 0; color:var(--text); font-style:italic}
.list{padding:0; margin:10px 0 0}
.list li{list-style:none; margin:7px 0; padding-left:26px; position:relative; color:var(--muted); font-size:.92rem}
.check li::before{content:"✓"; position:absolute; left:0; color:var(--ok); font-weight:800}
.cross li::before{content:"✕"; position:absolute; left:0; color:var(--ban); font-weight:800}
.star li::before{content:"★"; position:absolute; left:0; color:var(--warn)}
.pol h3{display:flex; align-items:center; gap:10px}
.pol ul{margin:10px 0 0; padding-left:18px; color:var(--muted); font-size:.92rem}
.pol li{margin:5px 0}

/* QUOTA */
.weeknav{display:flex; align-items:center; gap:6px}
.weeknav span{min-width:150px; text-align:center; font-weight:700; font-size:.88rem}
.weeknav small{display:block; color:var(--dim); font-weight:600; font-size:.72rem}
.status{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:.76rem; font-weight:800; white-space:nowrap}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.s-met{background:rgba(74,222,128,.13); color:var(--ok)}
.s-behind{background:rgba(250,204,21,.12); color:var(--warn)}
.s-missed{background:rgba(248,113,113,.13); color:var(--ban)}
.s-excused{background:rgba(56,189,248,.13); color:var(--info)}
.s-exempt{background:var(--panel3); color:var(--muted)}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.metric{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.metric .top{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:.84rem; font-weight:600}
.metric .val{font-size:1.9rem; font-weight:800; margin:6px 0 10px; letter-spacing:-.02em}
.metric .val small{font-size:.95rem; color:var(--dim); font-weight:600}
.metric .foot{margin-top:8px; color:var(--dim); font-size:.8rem}
.bar{height:8px; border-radius:99px; background:var(--panel3); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--p2),var(--accent)); transition:width .5s ease}
.bar.done i{background:linear-gradient(90deg,#22c55e,var(--ok))}
.bar.off i{background:var(--line2)}
.quota-grid{display:grid; grid-template-columns:1fr 1.25fr; gap:14px; margin-top:14px}
.form{display:grid; gap:10px}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.form label{display:grid; gap:5px; font-size:.8rem; color:var(--muted); font-weight:600}
.seg{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; border-radius:11px; background:var(--panel2); border:1px solid var(--line)}
.seg button{padding:8px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-weight:700; font-size:.85rem; cursor:pointer}
.seg button.on{background:var(--panel3); color:#fff; box-shadow:0 0 0 1px var(--line2)}
.log{display:flex; flex-direction:column}
.log-item{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line)}
.log-item:first-child{border-top:0}
.log-item .amt{min-width:64px; padding:4px 8px; border-radius:8px; background:var(--panel2); text-align:center; font-weight:800; font-size:.85rem}
.log-item .txt{min-width:0}
.log-item .txt b{font-size:.88rem}
.log-item .txt span{display:block; color:var(--dim); font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.log-item button{border:0; background:transparent; color:var(--dim); cursor:pointer; padding:6px 8px; border-radius:8px}
.log-item button:hover{color:var(--ban); background:rgba(248,113,113,.1)}
.history{display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-top:12px}
.history div{display:grid; gap:4px; text-align:center; font-size:.7rem; color:var(--dim)}
.history i{height:34px; border-radius:8px; background:var(--panel3); display:grid; place-items:center; font-style:normal; font-size:.85rem}
.history .h-met i{background:rgba(74,222,128,.2); color:var(--ok)}
.history .h-behind i{background:rgba(248,113,113,.16); color:var(--ban)}
.history .h-current i{background:rgba(250,204,21,.14); color:var(--warn); box-shadow:0 0 0 1px rgba(250,204,21,.4)}
.history .h-excused i{background:rgba(56,189,248,.16); color:var(--info)}
.banner{display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r); border:1px solid var(--line2); background:var(--panel); margin-bottom:12px; flex-wrap:wrap}
.banner .grow{flex:1; min-width:200px}
.banner b{display:block}
.banner span{color:var(--muted); font-size:.88rem}
.login-card{display:grid; place-items:center; text-align:center; padding:40px 20px}
.login-card .ic{font-size:2rem}
.login-card p{max-width:420px; color:var(--muted)}

/* ADMIN */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none}
.tab{padding:10px 16px; border:0; background:transparent; color:var(--muted); font-weight:700; font-size:.9rem; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tab.on{color:#fff; border-bottom-color:var(--p1)}
.summary{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px}
.summary div{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.summary b{font-size:1.4rem; display:block; line-height:1.2}
.summary span{font-size:.78rem; color:var(--muted)}
.table{border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:auto}
table{width:100%; border-collapse:collapse}
th,td{padding:11px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; font-size:.9rem}
th{font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); background:var(--panel2); font-weight:800; white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:rgba(168,85,247,.06)}
.who{display:flex; align-items:center; gap:10px; min-width:150px}
.who img{width:30px; height:30px; border-radius:9px; flex:none}
.who b{display:block; font-size:.9rem; line-height:1.2}
.who span{font-size:.75rem; font-weight:700}
.mbar{min-width:84px}
.mbar small{display:block; font-size:.76rem; color:var(--muted); margin-bottom:3px}
.mbar .bar{height:6px}
.rank-tag{display:inline-block; padding:2px 9px; border-radius:7px; font-size:.76rem; font-weight:700; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent)}
td input.input{width:90px; padding:7px 10px}
.inline-form{display:flex; gap:8px; flex-wrap:wrap; align-items:end}
.inline-form label{display:grid; gap:5px; font-size:.78rem; color:var(--muted); font-weight:600}

.modal{width:min(640px,calc(100vw - 24px)); max-height:calc(100vh - 40px); padding:0; border:1px solid var(--line2); border-radius:18px; background:var(--panel); color:var(--text); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal::backdrop{background:rgba(5,3,10,.7); backdrop-filter:blur(3px)}
.modal-head{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--panel); z-index:1}
.modal-head img{width:42px; height:42px; border-radius:12px}
.modal-head .grow{flex:1; min-width:0}
.modal-head b{display:block; font-size:1.05rem}
.modal-body{padding:18px 20px; display:grid; gap:18px}
.modal h4{margin:0 0 8px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; background:var(--panel2); border:1px solid var(--p2); color:#fff; padding:10px 18px; border-radius:12px; font-weight:600; font-size:.9rem; transition:all .25s; pointer-events:none; z-index:200; box-shadow:0 10px 40px rgba(0,0,0,.5)}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.err{border-color:var(--ban)}
.skeleton{height:120px; border-radius:var(--r); background:linear-gradient(90deg,var(--panel) 0%,var(--panel2) 50%,var(--panel) 100%); background-size:200% 100%; animation:sk 1.4s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* RESPONSIVE */
@media (max-width:1060px){
  .hero{grid-template-columns:1fr}
  .quota-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .menu-btn{display:grid; place-items:center}
  .side{transform:translateX(-100%); transition:transform .2s; background:var(--bg)}
  .side.open{transform:none}
  main{margin-left:0}
  .ladder{grid-template-columns:1fr}
  .rank-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .detail{position:static}
  .pun{grid-template-columns:1fr; gap:8px}
  .rules{grid-template-columns:1fr}
  .rule:nth-child(odd){border-right:0}
  .cmd-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stats,.summary{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:1fr}
  .brand small,.chipbtn,.user .meta{display:none}
  .hero{padding-top:32px}
  details .body{padding-left:16px}
  .form .row{grid-template-columns:1fr}
  .weeknav span{min-width:120px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}