/* ═══════════════════════════════════════════
   GameTracker v4 — Design System (clean)
═══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0e0f13;--bg2:#12141a;--bg3:#181b23;--bg4:#1e2230;
  --border:#1e2230;--border2:#262d3e;
  --text:#c8cdd8;--text-dim:#4a5168;
  --green:#00e676;--green-dim:rgba(0,230,118,0.10);
  --yellow:#ffb300;--red:#ff3d57;--cyan:#00b8d4;
  --display:'Rajdhani',sans-serif;--body:'Inter',sans-serif;--mono:'Share Tech Mono',monospace;
  --radius:4px;--t:0.15s ease;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:13px;line-height:1.5;min-height:100vh}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}.dim{color:var(--text-dim)}.mono{font-family:var(--mono)}
.green-text{color:var(--green)}.dim-text{color:var(--text-dim)}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:200;background:#0b0c10;border-bottom:1px solid var(--border2)}
.header-inner{display:flex;align-items:center;gap:1rem;max-width:1600px;margin:0 auto;padding:0.55rem 1.5rem;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:0.45rem;text-decoration:none;color:inherit;flex-shrink:0}
.logo-icon{font-size:1.1rem;color:var(--green)}
.logo-text{font-family:var(--display);font-size:1.25rem;font-weight:700;letter-spacing:0.06em;white-space:nowrap}
.logo-accent{color:var(--green)}
.header-counters{display:flex;align-items:center;gap:0.4rem;margin-left:auto;flex-shrink:0}
.hc-item{display:flex;flex-direction:column;align-items:center;min-width:48px}
.hc-val{font-family:var(--display);font-size:1rem;font-weight:700;line-height:1.1}
.hc-lbl{font-size:0.58rem;font-weight:600;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase}
.hc-sep{width:1px;height:26px;background:var(--border2)}
.scan-badge{display:flex;align-items:center;gap:0.35rem;font-size:0.7rem;font-weight:600;letter-spacing:0.06em;color:var(--text-dim);white-space:nowrap;flex-shrink:0}
.scan-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pglow 2s infinite}
@keyframes pglow{0%,100%{opacity:1;box-shadow:0 0 4px var(--green)}50%{opacity:.4;box-shadow:none}}
.header-nav{display:flex;align-items:center;gap:0.6rem;flex-shrink:0}
.nav-link{font-size:0.8rem;font-weight:500;color:var(--text-dim);transition:color var(--t)}
.nav-link:hover,.nav-link.nav-user{color:var(--text);text-decoration:none}
.nav-btn{font-size:0.76rem;font-weight:600;letter-spacing:0.05em;color:var(--green);border:1px solid var(--green);padding:0.28rem 0.8rem;border-radius:var(--radius);transition:all var(--t);white-space:nowrap}
.nav-btn:hover{background:var(--green-dim);text-decoration:none}
.user-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:0.25rem;vertical-align:middle}
.admin-badge{color:var(--yellow)!important;font-weight:600}

/* View toggle */
.view-toggle{display:flex;gap:2px}
.view-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid var(--border2);border-radius:var(--radius);cursor:pointer;color:var(--text-dim);font-size:0.82rem;transition:all var(--t)}
.view-btn.active{border-color:var(--green);color:var(--green);background:var(--green-dim)}

/* ── Game Tabs ───────────────────────────────────────────────────── */
.tabs-bar{position:sticky;top:43px;z-index:190;background:var(--bg2);border-bottom:1px solid var(--border);overflow:hidden}
.tabs-scroll{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 1.5rem}
.tabs-scroll::-webkit-scrollbar{display:none}
.gtab{display:flex;align-items:center;gap:0.3rem;padding:0.5rem 0.9rem;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;font-family:var(--display);font-size:0.76rem;font-weight:600;letter-spacing:0.07em;color:var(--text-dim);transition:color var(--t),border-color var(--t);flex-shrink:0}
.gtab:hover{color:var(--text)}
.gtab.active{color:#fff;border-bottom-color:var(--gc,var(--green))}
.gtab-icon{width:15px;height:15px;object-fit:cover;border-radius:2px}

/* ── Filter Bar ──────────────────────────────────────────────────── */
.filter-bar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0.45rem 1.5rem}
.filter-inner{max-width:1600px;margin:0 auto;display:flex;align-items:center;gap:0.65rem;flex-wrap:wrap}
.search-box{position:relative;flex:1;min-width:180px}
.search-ico{position:absolute;left:0.55rem;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-dim);pointer-events:none}
.search-inp{width:100%;padding:0.38rem 0.7rem 0.38rem 1.9rem;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:0.77rem;outline:none;transition:border-color var(--t)}
.search-inp::placeholder{color:var(--text-dim)}
.search-inp:focus{border-color:var(--green)}
.search-suggestions{position:absolute;top:100%;left:0;right:0;z-index:300;background:var(--bg2);border:1px solid var(--border2);border-top:none;border-radius:0 0 var(--radius) var(--radius);max-height:200px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,.5);display:none}
.sugg-item{display:flex;align-items:center;gap:0.45rem;padding:0.45rem 0.7rem;cursor:pointer;font-size:0.78rem;transition:background var(--t)}
.sugg-item:hover{background:rgba(255,255,255,.04)}
.sugg-game{font-size:0.64rem;color:var(--text-dim);margin-left:auto}
.filter-chips{display:flex;gap:0.35rem;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:0.3rem;padding:0.26rem 0.6rem;background:var(--bg3);border:1px solid var(--border2);border-radius:2rem;cursor:pointer;user-select:none;font-size:0.7rem;font-weight:500;color:var(--text-dim);transition:all var(--t)}
.chip input{display:none}
.chip:has(input:checked){border-color:var(--green);color:var(--green);background:var(--green-dim)}
.sort-group{display:flex;align-items:center;gap:0.35rem}
.sort-lbl{font-size:0.66rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim)}
.sort-sel{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-size:0.74rem;padding:0.3rem 0.55rem;outline:none;cursor:pointer}
.add-srv-btn{padding:0.35rem 0.9rem;background:none;border:1px solid var(--green);border-radius:var(--radius);cursor:pointer;font-family:var(--display);font-size:0.76rem;font-weight:700;letter-spacing:0.08em;color:var(--green);white-space:nowrap;transition:all var(--t)}
.add-srv-btn:hover{background:var(--green-dim)}

/* ── Table ───────────────────────────────────────────────────────── */
.main{max-width:1600px;margin:0 auto;padding:1rem 1.5rem 4rem}
.tbl-wrap{overflow-x:auto}
.srv-tbl{width:100%;border-collapse:collapse;font-size:0.81rem}
.srv-tbl thead tr{border-bottom:2px solid var(--border2)}
.srv-tbl th{padding:0.5rem 0.7rem;text-align:left;font-family:var(--display);font-size:0.66rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);white-space:nowrap}
.th-rank{width:52px;text-align:center}
.srv-tbl tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background var(--t)}
.srv-tbl tbody tr:hover{background:rgba(255,255,255,.025)}
.srv-tbl td{padding:0.48rem 0.7rem;vertical-align:middle}

/* Fav star */
.fav-star{cursor:pointer;color:var(--text-dim);font-size:0.8rem;transition:color var(--t),transform var(--t);display:inline-block;user-select:none;line-height:1}
.fav-star.active{color:var(--yellow)}
.fav-star:hover{color:var(--yellow);transform:scale(1.2)}

/* Rank */
.td-rank{text-align:center;font-family:var(--display);font-size:0.9rem;font-weight:700;color:var(--text-dim)}
.td-rank.top1{color:#ffd700}
.td-rank.top2{color:#c0c0c0}
.td-rank.top3{color:#cd7f32}

/* Game badge */
.game-badge{display:inline-flex;align-items:center;gap:0.25rem;padding:0.16rem 0.4rem;border-radius:3px;font-family:var(--display);font-size:0.66rem;font-weight:700;letter-spacing:0.05em;border:1px solid;white-space:nowrap}
.gb-icon{width:13px;height:13px;object-fit:cover;border-radius:1px;flex-shrink:0}

/* Mod badge */
.mod-badge{display:inline-block;font-size:0.6rem;font-weight:700;font-family:var(--display);letter-spacing:0.06em;padding:0.08rem 0.32rem;border-radius:2px;border:1px solid;vertical-align:middle;margin-left:0.35rem;white-space:nowrap}

/* Status dot */
.sdot{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:middle;margin-right:3px;flex-shrink:0}
.sdot.online{background:var(--green);box-shadow:0 0 5px var(--green);animation:pglow 2s infinite}
.sdot.offline{background:var(--red);opacity:.5}

/* Name cell */
.td-name{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td-map{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Player bar */
.pbar-wrap{display:flex;align-items:center;gap:0.45rem}
.pbar-track{flex:1;height:3px;background:var(--bg4);border-radius:2px;min-width:40px;overflow:hidden}
.pbar-fill{height:100%;border-radius:2px;transition:width .3s}
.pbar-text{white-space:nowrap;font-family:var(--mono);font-size:0.77rem}

/* Location */
.td-loc{white-space:nowrap}
.flag-cell-icon{width:19px;height:14px;display:inline-block;vertical-align:middle;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.08);flex-shrink:0}
.flag-unknown{display:inline-block;width:18px;height:13px;background:var(--bg4);border:1px solid var(--border2);border-radius:1px;vertical-align:middle;font-size:0.6rem;text-align:center;line-height:13px;color:var(--text-dim)}
.city-name{font-size:0.73rem;color:var(--text);margin-left:0.35rem;vertical-align:middle}

/* Ping */
.ping{font-family:var(--mono);font-size:0.78rem}
.ping.g{color:var(--green)}.ping.y{color:var(--yellow)}.ping.o{color:#ff8c00}.ping.r{color:var(--red)}.ping.na{color:var(--text-dim)}

/* Flags column icons */
.fi-lock{font-size:0.7rem;opacity:.4;margin-right:1px}
.fi-lock.on{opacity:1}

/* Connect btn */
.conn-btn,.conn-btn:visited{display:inline-block;padding:0.2rem 0.5rem;border:1px solid var(--border2);border-radius:var(--radius);color:var(--text-dim);font-size:0.7rem;font-weight:600;letter-spacing:0.04em;text-decoration:none!important;transition:all var(--t)}
.conn-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}

/* Table footer */
.tbl-footer{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.7rem;font-family:var(--mono);font-size:0.7rem;color:var(--text-dim);border-top:1px solid var(--border)}
.load-more-btn{padding:0.28rem 0.9rem;background:none;border:1px solid var(--border2);border-radius:var(--radius);cursor:pointer;font-size:0.73rem;font-weight:600;color:var(--text-dim);transition:all var(--t)}
.load-more-btn:hover{border-color:var(--cyan);color:var(--cyan)}

/* Loading */
.loading-row{display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:3rem;color:var(--text-dim);font-size:0.83rem}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--border2);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Card Grid ───────────────────────────────────────────────────── */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;padding:1rem 0}
.srv-card{background:var(--bg2);border:1px solid var(--border);border-radius:6px;overflow:hidden;cursor:pointer;transition:border-color var(--t),transform var(--t)}
.srv-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.srv-card-banner{height:56px;background:var(--bg3);background-size:cover;background-position:center;filter:brightness(.4)}
.srv-card-body{padding:0.7rem}
.srv-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}
.srv-card-name{font-family:var(--display);font-size:0.9rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0.35rem}
.srv-card-meta{display:flex;justify-content:space-between;font-size:0.73rem;color:var(--text-dim);margin-bottom:0.3rem}
.srv-card-map{font-size:0.72rem;color:var(--text-dim);margin-bottom:0.4rem;font-family:var(--mono)}
.srv-card-bar{height:3px;background:var(--bg4);border-radius:2px;overflow:hidden}
.srv-card-fill{height:100%;border-radius:2px}

/* ── Hover Preview ───────────────────────────────────────────────── */
.row-preview{position:fixed;z-index:500;pointer-events:none;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;padding:0.7rem 1rem;box-shadow:0 8px 32px rgba(0,0,0,.7);font-size:0.77rem;min-width:220px;max-width:280px;display:none}
.rp-title{font-family:var(--display);font-size:0.88rem;font-weight:700;margin-bottom:0.45rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-row{display:flex;justify-content:space-between;gap:1rem;color:var(--text-dim);padding:0.08rem 0}
.rp-val{color:var(--text);font-family:var(--mono);font-size:0.75rem}

/* ── Overlay / Modal ─────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:300;background:rgba(7,8,12,.88);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:1rem}
.overlay.open{display:flex;animation:fadein .15s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;width:100%;max-width:880px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.75);animation:slideup .18s ease}
.modal-sm{max-width:440px}
@keyframes slideup{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.modal-x{position:absolute;top:0.85rem;right:0.85rem;background:none;border:none;cursor:pointer;color:var(--text-dim);font-size:0.88rem;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:all var(--t);z-index:1}
.modal-x:hover{color:var(--text);background:rgba(255,255,255,.06)}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;padding:1.3rem 1.3rem 0}
.modal-head-left{display:flex;align-items:flex-start;gap:0.7rem}
.modal-game-badge{font-family:var(--display);font-size:0.68rem;font-weight:700;letter-spacing:0.08em;padding:0.17rem 0.48rem;border:1px solid var(--border2);border-radius:3px;color:var(--text-dim);white-space:nowrap;margin-top:3px}
.modal-name{font-family:var(--display);font-size:1.25rem;font-weight:700;line-height:1.2}
.modal-addr{font-family:var(--mono);font-size:0.73rem;color:var(--text-dim);margin-top:0.18rem}
.modal-head-right{display:flex;align-items:center;gap:0.4rem;color:var(--text-dim);font-size:0.8rem;flex-shrink:0}
.modal-country{font-size:0.78rem}
.modal-rank-badge{font-family:var(--display);font-size:0.8rem;font-weight:700;color:var(--yellow);background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.3);padding:0.13rem 0.45rem;border-radius:3px}
.modal-pills{display:flex;flex-wrap:wrap;gap:0.35rem;padding:0.9rem 1.3rem;border-bottom:1px solid var(--border)}
.pill{display:flex;flex-direction:column;gap:0.08rem;min-width:68px}
.pill-lbl{font-size:0.57rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase}
.pill-val{font-family:var(--mono);font-size:0.78rem}
.modal-grid{display:grid;grid-template-columns:1fr 1.5fr;min-height:230px}
@media(max-width:600px){.modal-grid{grid-template-columns:1fr}}
.modal-col{overflow:hidden}
.modal-players-col{border-right:1px solid var(--border)}
.col-title{display:flex;align-items:center;gap:0.4rem;padding:0.65rem 1rem 0.4rem;font-family:var(--display);font-size:0.68rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase}
.col-bar{display:block;width:3px;height:11px;background:var(--green);border-radius:1px;flex-shrink:0}
.modal-plist{padding:0 1rem 1rem;max-height:220px;overflow-y:auto}
.p-row{display:grid;grid-template-columns:1fr auto auto;gap:0.45rem;align-items:center;padding:0.3rem 0;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:0.75rem}
.p-row:last-child{border-bottom:none}
.p-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-score{color:var(--yellow);min-width:28px;text-align:right}
.p-time{color:var(--text-dim);min-width:38px;text-align:right}
.no-data{font-family:var(--mono);font-size:0.73rem;color:var(--text-dim);padding:1rem;text-align:center}
.chart-wrap{height:200px;padding:0.5rem 1rem 1rem}
.modal-actions{display:flex;gap:0.55rem;flex-wrap:wrap;padding:0.85rem 1.3rem;border-top:1px solid var(--border)}
.mact-btn{display:inline-flex;align-items:center;gap:0.3rem;padding:0.4rem 0.9rem;border:1px solid var(--border2);border-radius:var(--radius);background:none;cursor:pointer;font-family:var(--display);font-size:0.76rem;font-weight:700;letter-spacing:0.07em;color:var(--text-dim);text-decoration:none!important;transition:all var(--t)}
.mact-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.mact-connect{border-color:var(--cyan);color:var(--cyan)}
.mact-connect:hover{background:rgba(0,184,212,.1)}
.mact-fav-on{border-color:var(--yellow)!important;color:var(--yellow)!important;background:rgba(255,179,0,.08)!important}
.modal-owner{padding:0 1.3rem 0.8rem;font-size:0.76rem;color:var(--text-dim)}
.owner-pill{color:var(--green)}
.modal-sm-title{font-family:var(--display);font-size:1.15rem;font-weight:700;padding:1.1rem 1.3rem 0}

/* ── Add Form ────────────────────────────────────────────────────── */
.add-form{padding:0.9rem 1.3rem 1.3rem;display:flex;flex-direction:column;gap:0.45rem}
.form-label{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;color:var(--text-dim);text-transform:uppercase}
.form-input{width:100%;padding:0.48rem 0.65rem;background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--mono);font-size:0.82rem;outline:none;transition:border-color var(--t)}
.form-input:focus{border-color:var(--green)}
.form-result{min-height:1.3rem;font-family:var(--mono);font-size:0.74rem}
.form-result.ok{color:var(--green)}.form-result.err{color:var(--red)}
.form-submit-btn{width:100%;padding:0.58rem;background:var(--green-dim);border:1px solid var(--green);border-radius:var(--radius);cursor:pointer;font-family:var(--display);font-size:0.82rem;font-weight:700;letter-spacing:0.08em;color:var(--green);transition:all var(--t)}
.form-submit-btn:hover{background:rgba(0,230,118,.2)}
.form-submit-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Auth pages ──────────────────────────────────────────────────── */
.auth-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 46px);padding:2rem}
.auth-card{background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:2.3rem;width:100%;max-width:400px}
.auth-title{font-family:var(--display);font-size:1.55rem;font-weight:700;margin-bottom:1.4rem}
.auth-error{background:rgba(255,61,87,.1);border:1px solid #ff3d5744;color:#ff6b80;border-radius:var(--radius);padding:0.55rem 0.75rem;margin-bottom:0.9rem;font-size:0.8rem}
.auth-footer{margin-top:1.1rem;font-size:0.8rem;color:var(--text-dim);text-align:center}

/* ── Detail page ─────────────────────────────────────────────────── */
.detail-page{max-width:1400px;margin:0 auto;padding:0 1.5rem 4rem}
.detail-hero{position:relative;padding:2.5rem 0 1.5rem;margin-bottom:2rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;filter:blur(2px) brightness(.15);transform:scale(1.05)}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 0%,var(--bg) 100%)}
.hero-content,.hero-actions{position:relative;z-index:2}
.hero-top{display:flex;align-items:center;gap:0.7rem;margin-bottom:0.7rem;flex-wrap:wrap}
.hero-game-badge{display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--display);font-size:0.72rem;font-weight:700;letter-spacing:0.07em;padding:0.18rem 0.55rem;border-radius:3px;border:1px solid}
.hero-game-icon{width:15px;height:15px;object-fit:cover;border-radius:2px}
.status-pill{display:inline-flex;align-items:center;gap:0.28rem;font-family:var(--display);font-size:0.68rem;font-weight:700;letter-spacing:0.1em;padding:0.16rem 0.5rem;border-radius:3px}
.status-pill.online{background:rgba(0,230,118,.12);color:var(--green)}
.status-pill.offline{background:rgba(255,61,87,.12);color:var(--red)}
.rank-pill{font-family:var(--display);font-size:0.8rem;font-weight:700;color:var(--yellow);background:rgba(255,179,0,.1);border:1px solid rgba(255,179,0,.3);padding:0.14rem 0.48rem;border-radius:3px}
.hero-title{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1.1;word-break:break-word}
.hero-meta{display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;margin-top:0.55rem;font-family:var(--mono);font-size:0.78rem;color:var(--text-dim)}
.hero-sep{color:var(--border2)}
.flag-lg{display:inline-block;font-family:var(--mono);font-size:0.82rem;font-weight:700;background:var(--bg4);border:1px solid var(--border2);border-radius:3px;padding:0.18rem 0.48rem;color:var(--text);letter-spacing:0.06em}
.hero-actions{display:flex;gap:0.7rem;margin-top:1.4rem;flex-wrap:wrap}
.hero-btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.52rem 1.2rem;border:1px solid var(--border2);border-radius:var(--radius);background:none;cursor:pointer;font-family:var(--display);font-size:0.82rem;font-weight:700;letter-spacing:0.07em;color:var(--text);text-decoration:none!important;transition:all var(--t)}
.hero-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-dim)}
.hero-btn-primary{border-color:var(--gc,var(--green));color:var(--gc,var(--green));background:color-mix(in srgb,var(--gc,var(--green)) 8%,transparent)}
.detail-grid{display:grid;grid-template-columns:320px 1fr;gap:1.4rem}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr}}
.d-panel-full{grid-column:1/-1}
.d-panel{background:var(--bg2);border:1px solid var(--border);border-radius:5px;overflow:hidden}
.d-panel-title{display:flex;align-items:center;gap:0.45rem;padding:0.65rem 0.9rem;font-family:var(--display);font-size:0.7rem;font-weight:700;letter-spacing:0.1em;color:var(--text-dim);text-transform:uppercase;border-bottom:1px solid var(--border)}
.panel-count{margin-left:auto;background:var(--bg3);padding:0.08rem 0.42rem;border-radius:10rem;font-size:0.63rem}
.info-list{padding:0.35rem}
.info-row{display:grid;grid-template-columns:100px 1fr;padding:0.4rem 0.45rem;border-bottom:1px solid var(--border);font-size:0.78rem}
.info-row:last-child{border-bottom:none}
.info-key{color:var(--text-dim);font-weight:500}
.info-val{word-break:break-all;font-family:var(--mono);font-size:0.76rem}
.d-players-tbl{width:100%;border-collapse:collapse;font-size:0.78rem}
.d-players-tbl th{padding:0.42rem 0.75rem;text-align:left;font-size:0.63rem;font-weight:700;letter-spacing:.1em;color:var(--text-dim);border-bottom:1px solid var(--border)}
.d-players-tbl td{padding:0.38rem 0.75rem;border-bottom:1px solid var(--border)}
.d-players-tbl tr:last-child td{border-bottom:none}
.d-chart-wrap{height:200px;padding:0.9rem}
.claim-block{padding:0.9rem}
.claim-info{font-size:0.82rem;color:var(--text-dim);margin-bottom:0.7rem}
.claim-info a{color:var(--cyan)}
.token-code{font-family:var(--mono);background:var(--bg3);padding:0.13rem 0.45rem;border-radius:3px;color:var(--yellow)}
.claim-start-btn,.claim-verify-btn{padding:0.45rem 1.1rem;border:1px solid var(--green);border-radius:var(--radius);background:var(--green-dim);cursor:pointer;font-family:var(--display);font-size:0.8rem;font-weight:700;letter-spacing:0.07em;color:var(--green);transition:all var(--t)}
.claim-start-btn:hover,.claim-verify-btn:hover{background:rgba(0,230,118,.2)}
.claim-result{margin-top:0.7rem;font-size:0.78rem;font-family:var(--mono)}
.claim-result.ok{color:var(--green)}.claim-result.err{color:var(--red)}
.owner-block{padding:0.9rem;font-size:0.83rem;display:flex;align-items:center;gap:0.7rem}
.owner-badge{font-family:var(--display);font-size:0.68rem;font-weight:700;letter-spacing:.1em;color:var(--green);border:1px solid var(--green);padding:.13rem .48rem;border-radius:3px}
.owner-you{color:var(--text-dim);font-size:.78rem}

/* ── Admin page ──────────────────────────────────────────────────── */
.admin-page{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 4rem}
.admin-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.admin-title{font-family:var(--display);font-size:1.8rem;font-weight:700}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}
.admin-stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:1.2rem;display:flex;flex-direction:column;gap:0.3rem}
.asc-val{font-family:var(--display);font-size:1.8rem;font-weight:700}
.asc-lbl{font-size:0.72rem;font-weight:600;letter-spacing:.1em;color:var(--text-dim);text-transform:uppercase}
.admin-table{width:100%;border-collapse:collapse;font-size:0.8rem}
.admin-table th{padding:.5rem .75rem;text-align:left;font-family:var(--display);font-size:.66rem;font-weight:700;letter-spacing:.1em;color:var(--text-dim);border-bottom:1px solid var(--border2)}
.admin-table td{padding:.45rem .75rem;border-bottom:1px solid var(--border)}
.admin-table tr:hover td{background:rgba(255,255,255,.02)}
.role-badge{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.07em;padding:.1rem .4rem;border-radius:2px;font-family:var(--display)}
.role-badge.admin{background:rgba(255,179,0,.12);border:1px solid rgba(255,179,0,.4);color:var(--yellow)}
.role-badge.operator{background:rgba(0,184,212,.12);border:1px solid rgba(0,184,212,.4);color:var(--cyan)}
.role-badge.user{background:rgba(74,81,104,.2);border:1px solid var(--border2);color:var(--text-dim)}
.action-btn{padding:.22rem .6rem;border:1px solid var(--border2);border-radius:3px;background:none;cursor:pointer;font-size:.7rem;font-weight:600;color:var(--text-dim);transition:all var(--t)}
.action-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.action-btn.danger:hover{border-color:var(--red);color:var(--red)}
.admin-section-title{font-family:var(--display);font-size:1rem;font-weight:700;letter-spacing:.06em;margin:1.5rem 0 .75rem;color:var(--text-dim);text-transform:uppercase;border-bottom:1px solid var(--border);padding-bottom:.5rem}

/* ── Profile ─────────────────────────────────────────────────────── */
.profile-avatar{width:72px;height:72px;border-radius:50%;border:2px solid var(--border2)}
.breadcrumb{display:flex;align-items:center;gap:0.4rem;font-size:0.78rem;color:var(--text-dim)}
.bc-link{color:var(--text-dim)}.bc-link:hover{color:var(--text);text-decoration:none}.bc-sep{color:var(--border2)}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
@keyframes row-in{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
.row-enter{animation:row-in .17s ease both}