:root{

  --bg-body:#2C2B28;
  --bg-container:#1F1F1C;
  --bg-card:#2C2B28;
  --bg-tertiary:#3A3935;
  --border-color:rgba(236,236,234,0.12);
  --text-primary:#ECECEA;
  --text-secondary:#9E9C99;
  --text-tertiary:#6B6966;

  --gradient-start:#C75A34;
  --gradient-end:#E88456;
  --accent-primary:#D9734E;
  --brand-gradient:linear-gradient(135deg,var(--gradient-start),var(--gradient-end));
  --accent-10:rgba(217,115,78,0.10);

  --link:var(--accent-primary);
  --link-hover:var(--gradient-end);

  --success-main:#34d399;
  --danger-main:#f87171;
  --error-bg:#3a1a1a;     --error-text:#fca5a5;
  --gold:linear-gradient(135deg,#b45309,#f59e0b);
  --silver:linear-gradient(135deg,#475569,#94a3b8);
  --bronze:linear-gradient(135deg,#78716c,#a8703f);

  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter','Oxygen','Ubuntu',sans-serif;

  /* One height for every interactive control (inputs, buttons, selects) so a
     button never reads as smaller than the field it sits next to. */
  --ctl-h:34px;
  --ctl-h-sm:30px;
}

*,*::before,*::after{box-sizing:border-box;}

/* Tailwind's preflight strips link colour and underline, so anchors were
   indistinguishable from body text. Specificity 0-0-1 means every chrome class
   (.btn, .rail-item, .tag, .pod, .prow, ...) still wins - this only reaches
   anchors that set neither colour nor text-decoration. The underline, not the
   colour, is the interactivity signal: accent-coloured static text stays plain. */
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);}
a:hover{text-decoration-color:currentColor;}

/* Player, clan, league and pet names stay plain text even when they link. The
   row/list/card they sit in already reads as clickable, so the affordance is
   reserved for things that genuinely don't look interactive - prose links, the
   hatch dial, and the like. Applies on hover too. */
a.name,a.pname,a.b{color:inherit;}
a.name,a.pname,a.b,a.muted{text-decoration:none;}

:where(a,button,[role="button"],[tabindex="0"],tr.clickable,.cseg):focus-visible{
  outline:2px solid var(--link);outline-offset:2px;border-radius:4px;}

html,body{height:100%;}
body{margin:0;font-family:var(--font-sans);font-size:14px;color:var(--text-primary);background:var(--bg-body);-webkit-font-smoothing:antialiased;}

.app{height:100vh;height:var(--app-height,100vh);display:flex;flex-direction:column;overflow:hidden;}

*{scrollbar-width:thin;scrollbar-color:var(--bg-tertiary) transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:9999px;border:2px solid var(--bg-container);}
::-webkit-scrollbar-thumb:hover{background:#4a4945;}
::-webkit-scrollbar-corner{background:transparent;}

.topbar{height:56px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 18px;background:var(--bg-body);}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;}
.brand-tile{width:30px;height:30px;border-radius:8px;background:var(--brand-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;overflow:hidden;}
.brand-tile img{width:100%;height:100%;object-fit:contain;}
.brand-name{font-size:16px;font-weight:700;letter-spacing:.2px;line-height:1.1;}
.brand-sub{font-size:10px;letter-spacing:1px;color:var(--text-tertiary);font-weight:600;}
.spacer{flex:1;}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;background:var(--bg-tertiary);color:var(--text-secondary);font-size:13px;font-weight:600;}
.dot{width:7px;height:7px;border-radius:9999px;background:var(--success-main);flex-shrink:0;display:inline-block;}
.dot.red{background:var(--danger-main);}
.dot.gray{background:var(--text-tertiary);}
.icon-btn{width:var(--ctl-h);height:var(--ctl-h);border:none;border-radius:8px;background:var(--bg-container);color:var(--text-secondary);cursor:pointer;font-size:15px;}
.icon-btn:hover{color:var(--text-primary);}
.user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 10px 4px 4px;border-radius:9999px;background:var(--bg-container);}
.user-av{width:28px;height:28px;border-radius:9999px;background:var(--brand-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;}
.user-name{font-size:14px;font-weight:600;}

.topbar .win select{appearance:none;-webkit-appearance:none;height:var(--ctl-h);padding:0 28px 0 11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-container);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;}

.row{flex:1;display:flex;min-height:0;}

.rail{width:80px;flex-shrink:0;background:var(--bg-body);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:6px;}
.rail-item{width:56px;height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--text-secondary);font-size:18px;transition:all .15s ease;text-decoration:none;}
.rail-item span{font-size:11px;font-weight:600;}
.rail-item:hover{color:var(--text-primary);}
.rail-item.active{background:var(--brand-gradient);color:#fff;}
.rail-sep{margin-top:auto;width:36px;height:1px;background:var(--border-color);flex-shrink:0;}

.container-wrap{flex:1;min-width:0;padding:0 16px 16px 0;overflow:hidden;}

.container{width:100%;max-width:none;height:100%;display:flex;overflow:hidden;background:var(--bg-container);border:1px solid var(--border-color);border-radius:10px;position:relative;}

.sidebar{width:212px;flex-shrink:0;background:var(--bg-container);border-right:1px solid var(--border-color);padding:8px 14px 14px;display:flex;flex-direction:column;gap:3px;overflow:auto;}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:0 6px;margin-bottom:10px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--text-secondary);}
.collapse{width:24px;height:24px;border:none;border-radius:6px;background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:13px;}
.search{position:relative;margin-bottom:12px;}
.search input{width:100%;height:var(--ctl-h);padding:0 32px 0 12px;font-size:13px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);}
.search i{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:12px;pointer-events:none;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14px;cursor:pointer;color:var(--text-secondary);font-weight:500;text-decoration:none;transition:background .15s ease;}
.nav-item i{width:16px;text-align:center;font-size:14px;}
.nav-item:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.nav-item.active{background:var(--accent-10);color:var(--accent-primary);font-weight:600;}
.nav-item.sub{padding-left:30px;font-size:13px;}
.nav-group{margin-top:14px;padding:0 8px 6px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-tertiary);}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;background:var(--bg-tertiary);font-size:13px;color:var(--text-secondary);}

.content{flex:1;min-width:0;overflow:auto;}

.content-inner{padding:24px 28px;background:var(--bg-container);min-height:100%;max-width:1500px;margin-right:auto;}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;}
.page-head-left{display:flex;gap:12px;align-items:flex-start;}
.head-tile{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--brand-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;}
.page-title{margin:0 0 4px;font-size:25px;font-weight:700;line-height:1.2;}
.page-desc{margin:0;font-size:14px;color:var(--text-secondary);max-width:560px;}
.ghost{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border-color);border-radius:8px;font-size:13px;color:var(--text-secondary);white-space:nowrap;flex-shrink:0;background:transparent;cursor:pointer;text-decoration:none;}
.ghost:hover{color:var(--text-primary);border-color:var(--text-tertiary);}

.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;}
.card + .card{margin-top:16px;}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px;}
.card-grid .card{margin-top:0;height:100%;}
.card-head{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border-color);}
.card-head .title{font-weight:700;font-size:14px;}
.card-head .meta{font-size:12px;color:var(--text-tertiary);font-weight:500;}
/* Table header bar: search + action on the left, sort + freshness on the right.
   Wraps to stacked rows before anything gets squashed. */
.board-head{flex-wrap:wrap;row-gap:10px;}
.board-head .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    color:var(--text-secondary);}
/* Narrow screens: the sort strip is ~420px of nowrap buttons and the label
   carries margin-left:auto, so it got pushed past the card edge - and .card
   clips with overflow:hidden, which hid it completely on a phone. Give it its
   own full-width row that scrolls sideways instead. */
@media (max-width:900px){
  .board-head .searchbar{flex:1 1 100%;max-width:none;min-width:0;}
  .board-head .label{margin-left:0;}
  .board-head .tabs{flex:1 1 100%;max-width:100%;overflow-x:auto;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .board-head .tabs::-webkit-scrollbar{display:none;}
  .board-head .freshness-badge{margin-left:auto;}
}
/* The row "Where am I?" landed on - a left accent edge, no fill, so it reads as
   a marker rather than a selection the user has to dismiss. */
tr.row-focus > td{background:var(--accent-10);}
tr.row-focus > td:first-child{box-shadow:inset 3px 0 0 var(--accent-primary);}
.card-body{padding:18px;}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14px;}
th{text-align:left;padding:11px 12px;background:var(--bg-tertiary);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);}
th.r,td.r{text-align:right;}
th.c,td.c{text-align:center;}
td{padding:11px 12px;border-bottom:1px solid var(--border-color);}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:rgba(255,255,255,.02);}
/* A clickable row gets a stronger hover than the .02 every row already gets.
   No link styling on the name: a roster/leaderboard row is self-evidently
   clickable, so an underline there is noise rather than information. */
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:rgba(255,255,255,.05);}

.player{display:flex;align-items:center;gap:8px;}
/* Avatar+name wrapper used as a link - stays plain, like every other name. */
a.player{color:inherit;text-decoration:none;}
.av{width:26px;height:26px;border-radius:9999px;background:var(--brand-gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;object-fit:cover;}
.av.lg{width:52px;height:52px;font-size:19px;font-weight:700;}
.av.xl{width:72px;height:72px;font-size:25px;font-weight:700;}
.name{font-weight:600;}
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:var(--bg-tertiary);font-size:13px;font-weight:600;color:var(--text-secondary);text-decoration:none;}
a.tag:hover{color:var(--text-primary);}
.tag img{width:16px;height:16px;border-radius:4px;object-fit:contain;}
.tag.accent{background:var(--accent-10);color:var(--accent-primary);}
.tag.success{background:rgba(52,211,153,.12);color:var(--success-main);}
.tag.danger{background:rgba(248,113,113,.12);color:var(--danger-main);}
/* Public-loadout markers (apps.loadouts): an icon inside a name cell and a count
   chip on the clans board - the boards are already column-heavy. */
.lo-mark{color:var(--accent-primary);font-size:12px;flex-shrink:0;}
.lo-chip{margin-left:8px;padding:2px 7px;font-size:12px;background:var(--accent-10);color:var(--accent-primary);}
.star{color:#f59e0b;font-size:14px;background:none;border:none;cursor:pointer;padding:2px;}
.star.off{color:var(--text-tertiary);}
.star.off:hover{color:#f59e0b;}
.pos{color:var(--success-main);font-weight:600;}
.muted{color:var(--text-secondary);}
.faint{color:var(--text-tertiary);}
.b{font-weight:700;}

.medal{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:26px;height:22px;padding:0 7px;border-radius:8px;color:#fff;font-weight:700;font-size:13px;}
.medal.g{background:var(--gold);}
.medal.s{background:var(--silver);}
.medal.b3{background:var(--bronze);}
.rank-plain{font-weight:600;color:var(--text-secondary);padding-left:6px;}

.ttp-fall{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:8px;background:var(--error-bg);color:var(--error-text);font-size:13px;font-weight:600;white-space:nowrap;}
.ttp-lead{display:inline-flex;align-items:center;gap:5px;color:#f59e0b;font-weight:700;white-space:nowrap;}
.ttp-time{color:#60a5fa;font-weight:600;white-space:nowrap;}

.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 24px;}
.spot{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:18px;text-decoration:none;color:inherit;transition:border-color .15s ease;}
.spot:hover{border-color:var(--text-tertiary);}
.spot .who{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.spot .who .name{font-size:15px;}
.spot .clan{font-size:13px;color:var(--text-tertiary);margin-bottom:8px;}
.spot .pts{font-size:23px;font-weight:700;background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.spot .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-top:2px;}
.spot-badge{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;}
.spot .rel{position:relative;flex-shrink:0;}

.podium{display:flex;justify-content:center;align-items:flex-end;gap:18px;margin:30px 0 26px;}
.pod{flex:1;max-width:320px;position:relative;margin-top:38px;padding:42px 18px 20px;text-align:center;text-decoration:none;color:inherit;background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;transition:border-color .15s ease,transform .15s ease;}
.pod:hover{border-color:var(--text-tertiary);transform:translateY(-2px);}
.pod.champ{margin-top:0;padding-top:54px;border-color:rgba(245,158,11,.45);background:linear-gradient(180deg,rgba(245,158,11,.07),var(--bg-card));}
.pod-av-wrap{position:absolute;top:-38px;left:50%;transform:translateX(-50%);}
.pod.champ .pod-av-wrap{top:-50px;}
.pod-av{width:72px;height:72px;border-radius:9999px;border:3px solid var(--text-tertiary);background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:700;color:#fff;overflow:hidden;}
.pod-av img{width:100%;height:100%;object-fit:cover;}
.pod.champ .pod-av{width:96px;height:96px;font-size:31px;box-shadow:0 0 0 5px rgba(245,158,11,.15);}
.pod-dot{position:absolute;bottom:5px;right:5px;width:14px;height:14px;border-radius:9999px;background:var(--success-main);border:2px solid var(--bg-card);}
.pod.champ .pod-dot{bottom:8px;right:8px;}
.pod-dot.red{background:var(--danger-main);}
.pod-dot.gray{background:var(--text-tertiary);}
.pod-rank{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:5px;}
.pod.champ .pod-rank{color:#f59e0b;}
.pod-name{font-size:20px;font-weight:700;color:var(--text-primary);line-height:1.2;word-break:break-word;}
.pod.champ .pod-name{font-size:24px;}
.pod-sub{font-size:13px;color:var(--text-tertiary);margin-top:3px;}
.pod-pts{font-size:22px;font-weight:800;margin-top:8px;line-height:1;}
.pod.champ .pod-pts{font-size:27px;}
/* Archive podium tints the score by finishing place. Literal silver/bronze:
 * --silver and --bronze are gradients here, for the medal chips. */
.pod-pts.rank1{color:var(--accent-primary);}
.pod-pts.rank2{color:#cbd5e1;}
.pod-pts.rank3{color:#d8975a;}
.av.discord{background:#5865F2;color:#fff;}
.pod-pill{display:inline-block;margin-top:11px;padding:4px 13px;border-radius:9999px;background:var(--bg-tertiary);font-size:12px;font-weight:700;letter-spacing:.3px;color:var(--text-secondary);}
.pod.champ .pod-pill{background:var(--accent-10);color:var(--accent-primary);}
@media (max-width:720px){
  .podium{flex-direction:column;align-items:stretch;gap:46px;margin-top:46px;}
  .pod,.pod.champ{margin-top:0;max-width:none;}
}

.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.toolbar .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-secondary);}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-tertiary);border-radius:10px;}
.tab{height:var(--ctl-h);padding:0 14px;display:inline-flex;align-items:center;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border-radius:8px;white-space:nowrap;background:transparent;color:var(--text-secondary);}
.tab.active{background:var(--brand-gradient);color:#fff;}
.win{position:relative;display:inline-flex;align-items:center;}

/* ---- Dropdown (custom <select>) -------------------------------------------
   static/js/dropdown.js swaps every native select for this. Two rules carry the
   look: the trigger and the list are ONE body (shared edge, identical width),
   and both use the same `1fr auto` grid so the caret and the row ticks sit at
   exactly the same inset on every dropdown in the app. The list is portalled to
   <body> (cards and table wrappers clip their overflow), hence position:fixed. */
.dd{position:relative;display:inline-flex;align-items:center;vertical-align:middle;min-width:0;}
.dd-block{display:flex;width:100%;}
.dd-native{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;
    pointer-events:none;clip-path:inset(50%);}

.dd-btn,.dd-opt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;
    width:100%;font-family:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;}
.dd-btn{height:var(--ctl-h);padding:0 12px;border:1px solid var(--border-color);border-radius:8px;
    background:var(--bg-card);color:var(--text-primary);}
.dd-btn:hover{border-color:var(--text-tertiary);}
.dd-btn:focus-visible{outline:none;border-color:var(--accent-primary);}
.dd-btn:disabled{opacity:.5;cursor:default;}
.dd-label,.dd-opt-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Fixed box: glyph-width differences must not shift the caret off the edge. */
.dd-caret,.dd-opt-tick{width:12px;flex-shrink:0;font-size:10px;text-align:center;}
.dd-caret{color:var(--text-tertiary);transition:transform .16s ease;}
.dd.open .dd-caret{transform:rotate(180deg);color:var(--text-primary);}

/* One body: drop the rounding and the border on the edge the list continues. */
.dd.open .dd-btn{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;}
.dd.open.up .dd-btn{border-radius:0 0 8px 8px;border-top-color:transparent;}

.dd-menu{position:fixed;z-index:2000;overflow-y:auto;overscroll-behavior:contain;
    padding:0;background:var(--bg-card);
    border:1px solid var(--border-color);border-top:none;border-radius:0 0 8px 8px;
    box-shadow:0 16px 34px rgba(0,0,0,.5);}
.dd-menu.up{border-top:1px solid var(--border-color);border-bottom:none;border-radius:8px 8px 0 0;}
.dd-menu[hidden]{display:none;}
/* Same 12px inset as the trigger, so the tick lands under the caret. */
.dd-opt{padding:9px 12px;border:none;background:none;color:var(--text-secondary);}
.dd-opt:hover,.dd-opt.active{background:var(--bg-tertiary);color:var(--text-primary);}
.dd-opt.selected{color:var(--text-primary);}
.dd-opt-tick{opacity:0;color:var(--accent-primary);}
.dd-opt.selected .dd-opt-tick{opacity:1;}

/* Per-context surface only - never padding, so the caret inset stays uniform. */
.topbar .win .dd-btn{background:var(--bg-container);}
.dd-btn.role-select,.dd-btn.input,.dd-btn.select-lg{background:var(--bg-tertiary);}
.dd-btn.select-lg{height:calc(var(--ctl-h) + 10px);font-size:15px;}



.win select{appearance:none;-webkit-appearance:none;height:var(--ctl-h);padding:0 30px 0 12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;}
.win > i{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--text-tertiary);pointer-events:none;}

.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);}
/* A stat tile that carries its neighbouring ranks. The two small lines sit
   BESIDE the value/label pair, not under it, so the tile stays exactly as tall
   as a plain .stat and the figs row keeps its height. */
.stat-nbr{display:flex;align-items:center;gap:14px;}
.stat-nbr > .main{flex-shrink:0;}
.stat-nbr .nbrs{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.stat-nbr .nbr{display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  font-size:11.5px;line-height:1.35;color:var(--text-tertiary);}
.stat-nbr .nbr .rk{flex-shrink:0;width:30px;text-align:right;font-variant-numeric:tabular-nums;}
.stat-nbr .nbr .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text-secondary);}
.stat-nbr .nbr .pt{flex-shrink:0;font-variant-numeric:tabular-nums;}
@media (max-width:900px){.stat-nbr .nbrs{display:none;}}

/* Search bar with an attached action button - one bordered body rather than a
   wide input sitting next to a small stray button. Holds the .ac-results panel. */
.searchbar{position:relative;display:flex;align-items:center;flex:1 1 340px;max-width:470px;min-width:260px;
  background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;}
.searchbar:focus-within{border-color:var(--accent-primary);}
.searchbar > i{flex-shrink:0;padding-left:12px;font-size:13px;color:var(--text-tertiary);}
.searchbar input{flex:1;min-width:0;height:calc(var(--ctl-h) - 2px);padding:0 10px;border:none;background:none;
  font-family:inherit;font-size:14px;color:var(--text-primary);}
.searchbar input:focus{outline:none;}
.searchbar input::placeholder{color:var(--text-tertiary);}
.searchbar-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;margin:3px;height:calc(var(--ctl-h) - 8px);padding:0 13px;
  border:none;border-radius:8px;background:var(--bg-card);color:var(--text-secondary);
  font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;}
.searchbar-btn:hover{color:var(--text-primary);}
.searchbar-clear{flex-shrink:0;display:none;padding:0 4px;border:none;background:none;cursor:pointer;
  color:var(--text-tertiary);font-size:13px;}
.searchbar-clear:hover{color:var(--text-primary);}
.searchbar.has-text .searchbar-clear{display:block;}

/* The one row a pinned/searched view is centred on. */
tr.row-focus > td{background:var(--accent-10);box-shadow:inset 0 0 0 9999px var(--accent-10);}
tr.row-focus > td:first-child{box-shadow:inset 3px 0 0 var(--accent-primary),inset 0 0 0 9999px var(--accent-10);}

/* Percentile gauge - a half-donut whose sweep is set server-side via
   stroke-dasharray (no JS). The arc is 175.93 units long (pi * r, r=56), so the
   filled length is pct/100 of that. */
.gauge{position:relative;flex-shrink:0;width:176px;text-align:center;}
.gauge-svg{display:block;width:144px;margin:0 auto;}
.gauge-track,.gauge-fill{fill:none;stroke-width:12;stroke-linecap:round;}
.gauge-track{stroke:var(--bg-tertiary);}
.gauge-fill{stroke:url(#gaugeGrad);}
.gauge-stop-a{stop-color:var(--gradient-start);}
.gauge-stop-b{stop-color:var(--gradient-end);}
.gauge-val{position:absolute;left:0;right:0;top:40px;font-size:25px;font-weight:700;line-height:1;}
.gauge-val span{font-size:13px;font-weight:600;color:var(--text-tertiary);margin-left:1px;}
.gauge-cap{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--text-secondary);}
.gauge-cap b{color:var(--text-primary);}
.gauge-sub{margin-top:2px;font-size:11.5px;color:var(--text-tertiary);}
@media (max-width:720px){
  .gauge{width:100%;}
}

/* Type-ahead results panel, absolutely positioned under a .field. Its wrapping
   .card must carry .card-open, since .card clips with overflow:hidden. */
.ac-results{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:30;
  max-height:18rem;overflow-y:auto;box-shadow:0 12px 28px rgba(0,0,0,.45);}
.ac-results .player{gap:12px;padding:10px 14px;cursor:pointer;}
.ac-results .player + .player{border-top:1px solid var(--border-color);}
.ac-results .player:hover{background:rgba(255,255,255,.045);}
.card-open{overflow:visible;}
.input{width:100%;height:var(--ctl-h);padding:0 12px;font-size:14px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);}
textarea.input{height:auto;padding:8px 12px;line-height:1.5;}
.input.lg{height:calc(var(--ctl-h) + 12px);padding:0 14px;font-size:18px;font-weight:600;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--ctl-h);padding:4px 16px;border:none;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;background:var(--brand-gradient);color:#fff;text-decoration:none;}
.btn:hover{filter:brightness(1.05);}
.btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);}
.btn.danger{background:var(--error-bg);color:var(--error-text);}
.btn.sm{min-height:var(--ctl-h-sm);padding:3px 11px;font-size:13px;}
/* Status pills: same modifier convention as .btn.danger / .btn.sm. */
.pill.ok{background:rgba(52,211,153,.14);color:var(--success-main);}
.pill.bad{background:var(--error-bg);color:var(--error-text);}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
.stat{background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:16px 18px;}
.stat .v{font-size:23px;font-weight:700;line-height:1.1;}
.stat .k{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-top:4px;}

.hero{display:flex;align-items:center;gap:18px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:22px;margin-bottom:20px;}
.hero .meta{flex:1;min-width:0;}
.hero h1{margin:0 0 6px;font-size:23px;font-weight:700;}

.alert{border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;font-size:14px;margin-bottom:12px;}
.alert.error{border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1);color:#fca5a5;}
.alert.warning{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1);color:#fcd34d;}
.alert.success{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.1);color:#6ee7b7;}

.skel{background:linear-gradient(90deg,var(--bg-card) 0%,var(--bg-tertiary) 50%,var(--bg-card) 100%);background-size:200% 100%;animation:skel-shine 1.4s infinite;border-radius:4px;height:14px;}
@keyframes skel-shine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap;}
.pager .info{font-size:13px;color:var(--text-secondary);}
.pager .controls{display:flex;align-items:center;gap:6px;}
/* Pager sitting in the table card's footer rather than floating below it. */
.pager--foot{margin-top:0;padding:11px 18px;border-top:1px solid var(--border-color);}
/* One segmented control instead of a row of separate boxes. Every rule here is
   scoped under .pager to outrank the generic `.pager button/input` styling
   further down - at equal specificity that came later and won, which put a
   border back on each arrow and gave us boxes inside a box. */
.pgnav{display:flex;align-items:center;border:1px solid var(--border-color);border-radius:8px;
    background:var(--bg-card);overflow:hidden;}
.pager .pgnav button{min-width:var(--ctl-h);height:var(--ctl-h);padding:0 11px;border:none;
    border-radius:0;background:none;color:var(--text-secondary);font-size:13px;font-weight:600;
    cursor:pointer;}
.pager .pgnav button:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary);}
.pager .pgnav button:disabled{opacity:.35;cursor:default;background:none;}
.pgpage{display:inline-flex;align-items:center;gap:5px;height:var(--ctl-h);padding:0 11px;
    font-size:13px;font-weight:600;color:var(--text-secondary);white-space:nowrap;}
.pgpage .cur,.pgpage #pgPages{color:var(--text-primary);}
/* The page number is part of the strip, not a field sitting inside it - the box
   only appears when you actually focus it to type. */
.pager .pgnav input.page-jump{width:34px;height:calc(var(--ctl-h) - 10px);padding:0 2px;
    text-align:center;border:1px solid transparent;border-radius:5px;background:none;
    font-family:inherit;font-size:13px;font-weight:700;color:var(--text-primary);}
.pager .pgnav input.page-jump:hover{background:var(--bg-tertiary);}
.pager .pgnav input.page-jump:focus{outline:none;background:var(--bg-tertiary);
    border-color:var(--accent-primary);}
.pgnav input.page-jump::-webkit-outer-spin-button,
.pgnav input.page-jump::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pager button{min-width:var(--ctl-h);height:var(--ctl-h);padding:0 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;cursor:pointer;}
.pager button:hover:not(:disabled){color:var(--text-primary);border-color:var(--text-tertiary);}
.pager button:disabled{opacity:.4;cursor:default;}
.pager .cur{color:var(--text-primary);}
.freshness-badge{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-h);padding:0 16px;border-radius:8px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--text-secondary);font-size:12px;font-weight:600;white-space:nowrap;}
.freshness-badge i{display:block;font-size:11px;color:var(--text-tertiary);}
.freshness-badge .local-ago{color:var(--text-primary);}
.pager input.page-jump{width:52px;height:var(--ctl-h);padding:0 6px;text-align:center;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;}
.pager input.page-jump:focus{outline:none;border-color:var(--accent-primary);}
.pager input.page-jump::-webkit-outer-spin-button,.pager input.page-jump::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.pager select{appearance:none;-webkit-appearance:none;height:var(--ctl-h);padding:0 12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;}

.pager a{display:inline-flex;align-items:center;min-width:var(--ctl-h);height:var(--ctl-h);padding:0 10px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-card);color:var(--text-secondary);font-size:13px;font-weight:600;text-decoration:none;}
.pager a:hover{color:var(--text-primary);border-color:var(--text-tertiary);}
a.tab{text-decoration:none;display:inline-block;}
a.card.linked{display:block;color:inherit;text-decoration:none;transition:border-color .15s ease;}
a.card.linked:hover{border-color:var(--text-tertiary);}

.empty-state{text-align:center;color:var(--text-secondary);padding:40px 20px;}
.empty-state i{font-size:29px;color:var(--text-tertiary);margin-bottom:10px;}

.empty-state .btn i,.empty-state .tag i{font-size:inherit;color:inherit;margin-bottom:0;}
code.kbd{padding:2px 6px;border-radius:6px;background:var(--bg-tertiary);color:var(--accent-primary);font-size:13px;}

.bottomnav{display:none;flex-shrink:0;background:var(--bg-body);border-top:1px solid var(--border-color);padding-bottom:env(safe-area-inset-bottom);}
.bottomnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 0 8px;border:none;background:transparent;font-family:inherit;color:var(--text-secondary);font-size:18px;cursor:pointer;text-decoration:none;}
.bottomnav-item span{font-size:11px;font-weight:600;}
.bottomnav-item.active{color:var(--accent-primary);}

.drawer-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.drawer-overlay.open{opacity:1;pointer-events:auto;}
.drawer{display:none;position:absolute;top:0;left:0;height:100%;width:min(86%,320px);background:var(--bg-container);border-right:1px solid var(--border-color);z-index:90;flex-direction:column;gap:3px;padding:14px 14px calc(24px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:8px 0 32px rgba(0,0,0,.35);transform:translateX(-100%);transition:transform .25s ease;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.drawer-settings{display:flex;flex-direction:column;gap:10px;padding:4px 6px;}

.dashlink{font:inherit;font-weight:700;color:var(--accent-primary);background:none;border:none;padding:0;cursor:pointer;border-bottom:1px dashed currentColor;}
.dashlink:hover{color:var(--text-primary);}

.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;width:100%;max-width:680px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border-color);}
.modal-head h2{font-size:17px;font-weight:700;margin:0;}
.modal-wrap{display:flex;min-height:0;}
.modal-steps{flex:0 0 150px;list-style:none;margin:0;padding:18px 12px;border-right:1px solid var(--border-color);background:var(--bg-body);display:flex;flex-direction:column;gap:4px;}
.modal-step{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--text-tertiary);font-size:13px;font-weight:600;}
.modal-step .num{flex-shrink:0;width:24px;height:24px;border-radius:9999px;background:var(--bg-tertiary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:12px;}
.modal-step.active{color:var(--text-primary);}
.modal-step.active .num{background:var(--brand-gradient);color:#fff;}
.modal-step.done .num{background:var(--success-main);color:#fff;}
.modal-panels{flex:1;min-width:0;padding:20px;overflow-y:auto;}
.modal-panel{display:none;}
.modal-panel.active{display:block;}
.modal-hint{margin:14px 0;padding-left:20px;color:var(--text-secondary);font-size:13px;display:flex;flex-direction:column;gap:5px;}
@media (max-width:560px){
  .modal-wrap{flex-direction:column;}
  .modal-steps{flex-basis:auto;flex-direction:row;border-right:none;border-bottom:1px solid var(--border-color);}
}
.drawer-settings .win{display:flex;}
.drawer-settings .win select,.drawer-settings .win .dd{width:100%;}

@media (max-width:900px){
  .rail{display:none;}
  .bottomnav{display:flex;}
  .sidebar{display:none;}
  .drawer{display:flex;}
  .drawer-overlay{display:block;}
  .topbar .win{display:none;}
  .topbar .pill{display:none;}
  .container-wrap{padding:0 12px 12px;}
  .content-inner{padding:18px 16px;}
  .spot-grid{grid-template-columns:1fr;}
  .user-name{display:none;}
}
@media (max-width:560px){
  .topbar{gap:10px;padding:0 10px;}
  .container-wrap{padding:0 8px 8px;}
  .content-inner{padding:14px 12px;}
  .page-head{flex-direction:column;align-items:stretch;gap:10px;}
  .page-title{font-size:21px;}
  .hero{flex-wrap:wrap;gap:14px;padding:18px;}
  .hero h1{font-size:20px;}

  .hero-offline{width:100%;text-align:left!important;border-left:none!important;
    border-top:1px solid var(--border-color);padding-left:0!important;padding-top:12px;}
  .hero-offline .k{justify-content:flex-start!important;}

  .card-head{flex-wrap:wrap;}

  .hero .stat-grid{flex-basis:100%;width:100%;min-width:0;}
  .hero .stat-grid .stat{width:100%;}

  .card-row{flex-direction:column;align-items:flex-start;gap:12px;}

  .toolbar .tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;}
  .toolbar .tabs .tab{text-align:center;}
}

.alert.info{border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.1);color:#93c5fd;}

.stepper{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-bottom:24px;}
.stepper .step{display:flex;flex-direction:column;align-items:center;gap:6px;width:62px;}
.step-num{width:30px;height:30px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;background:var(--bg-tertiary);color:var(--text-tertiary);border:1px solid var(--border-color);}
.step.active .step-num{background:var(--brand-gradient);color:#fff;border-color:transparent;}
.step.done .step-num{background:var(--accent-10);color:var(--accent-primary);border-color:transparent;}
.step-label{font-size:12px;font-weight:600;color:var(--text-tertiary);}
.step.active .step-label{color:var(--text-primary);}
.step-line{flex:0 0 28px;height:2px;background:var(--border-color);margin-top:14px;border-radius:2px;}
.step-line.done{background:var(--accent-primary);}

.role-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:700;letter-spacing:.3px;white-space:nowrap;background:var(--bg-tertiary);color:var(--text-secondary);}
.role-tag.super_admin{background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;}
.role-tag.administrator{background:var(--accent-10);color:var(--accent-primary);}
.role-tag.leader{background:rgba(96,165,250,.14);color:#93c5fd;}
.role-tag.officer{background:rgba(52,211,153,.14);color:#6ee7b7;}
.role-tag.member{background:var(--bg-tertiary);color:var(--text-secondary);}
.role-select{appearance:none;-webkit-appearance:none;height:var(--ctl-h);padding:0 12px;font-family:inherit;font-size:13px;font-weight:600;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;cursor:pointer;}
.role-select:focus{outline:none;border-color:var(--accent-primary);}

.user-menu-role{display:block;margin:-6px -6px 6px;padding:7px 12px;text-align:center;border-radius:0;font-size:12px;font-weight:700;letter-spacing:.3px;}

.allow-add{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.allow-add .field-input{flex:1;min-width:200px;}

.btn-primary{background:var(--brand-gradient);color:#fff;}
.btn-ghost{background:var(--bg-tertiary);color:var(--text-primary);}
.btn-block{width:100%;margin-top:6px;}

.auth-body{background:var(--bg-body);min-height:100vh;}
.auth-wrap{max-width:420px;margin:0 auto;padding:48px 20px 40px;display:flex;flex-direction:column;gap:18px;}
.auth-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;align-self:center;}
.auth-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:16px;padding:28px 26px;}
.auth-title{margin:0 0 6px;font-size:23px;font-weight:700;}
.auth-sub{margin:0 0 20px;font-size:14px;color:var(--text-secondary);line-height:1.5;}
.auth-messages{margin-bottom:14px;}
.auth-form{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.auth-form + .auth-form{margin-top:10px;}
.field-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-top:6px;}
.field-input{width:100%;height:var(--ctl-h);padding:0 13px;font-size:14px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:9px;color:var(--text-primary);}
.field-input:focus{outline:none;border-color:var(--accent-primary);}
.field-error{font-size:13px;color:#fca5a5;}
.field-check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-secondary);margin-top:10px;cursor:pointer;}
.auth-foot{text-align:center;font-size:14px;color:var(--text-secondary);}
.auth-foot a{color:var(--accent-primary);text-decoration:none;}
.auth-hint{font-size:13px;color:var(--text-tertiary);margin:12px 0 0;text-align:center;}

.auth-identity{display:flex;align-items:center;gap:14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.auth-identity-av{width:52px;height:52px;border-radius:9999px;object-fit:cover;background:var(--brand-gradient);}
.auth-identity-av--fallback{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:19px;}
.auth-identity-name{font-size:17px;font-weight:700;}
.auth-identity-sub{font-size:13px;color:var(--text-tertiary);margin-top:2px;}

.auth-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:27px;font-weight:700;letter-spacing:2px;text-align:center;padding:16px;border:1px dashed var(--accent-primary);border-radius:12px;background:var(--accent-10);color:var(--accent-primary);user-select:all;}
.auth-steps{margin:18px 0;padding-left:20px;font-size:14px;color:var(--text-secondary);line-height:1.7;}
.auth-qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:12px;margin-bottom:14px;}
.auth-qr img{display:block;}
.auth-secret{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:16px;letter-spacing:2px;text-align:center;padding:10px;background:var(--bg-tertiary);border-radius:9px;user-select:all;margin-bottom:8px;}

.user-wrap{position:relative;}
.user{border:none;font-family:inherit;}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:190px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:12px;padding:6px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.35);z-index:50;}
.user-menu[hidden]{display:none;}
.user-menu form{margin:0;}
.user-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none;border-radius:8px;cursor:pointer;text-align:left;}
.user-menu-item i{width:16px;text-align:center;}
.user-menu-item:hover{background:var(--bg-tertiary);color:var(--text-primary);}
.user-menu-danger{color:#fca5a5;}
.user-menu-danger:hover{background:rgba(248,113,113,.1);color:#fca5a5;}

.card-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;}
.card-row-title{font-size:15px;font-weight:700;}
.card-row-sub{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:5px;}
.card-note{font-size:13px;color:var(--text-secondary);line-height:1.6;padding:0 18px 16px;margin:0;}
.card-note a{color:var(--accent-primary);text-decoration:none;}

.topbar{padding:0;gap:0}
.brand{display:flex;align-items:center;flex-shrink:0;gap:0}
.tb-rail{width:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tb-side{width:212px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.tb-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:0 18px}
.tb-controls{margin-left:auto;display:flex;align-items:center;gap:14px;flex-shrink:0}

.topbar--rarity .tb-main{position:relative}
.tb-searchcol{flex:1;min-width:0;max-width:1500px;margin-right:auto;padding:0 28px;
    display:flex;justify-content:center;box-sizing:border-box}
.topbar--rarity .tb-controls{position:absolute;right:18px;top:0;height:100%;margin:0}
.topbar--rarity .pill,
.topbar--rarity .tb-controls .win{display:none}
@media (max-width:900px){
    .topbar{padding:0 10px;gap:10px}
    .tb-rail{width:auto;margin-right:9px}
    .tb-side{width:auto}
    .tb-main{padding:0}

    .tb-searchcol{padding:0;justify-content:flex-start}
    .topbar--rarity .tb-controls{position:static;height:auto}
}

.topsearch{position:relative;flex:0 1 460px;display:flex;align-items:center;gap:9px;
    background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:10px;padding:9px 12px}

.topsearch.open{border-radius:10px 10px 0 0;border-bottom-color:transparent;
    box-shadow:0 18px 44px rgba(0,0,0,.5)}
.topsearch > i{color:var(--text-secondary);font-size:14px}
.topsearch input{flex:1;min-width:0;background:transparent;border:0;outline:0;
    color:var(--text-primary);font-size:14px;font-family:inherit}
.topsearch input::placeholder{color:var(--text-secondary)}
.topsearch-menu{position:absolute;top:100%;left:-1px;right:-1px;z-index:300;
    background:var(--bg-tertiary);border:1px solid var(--border-color);border-top:0;
    border-radius:0 0 12px 12px;box-shadow:0 18px 44px rgba(0,0,0,.5);
    max-height:70vh;overflow-y:auto;padding:8px 8px 10px}
.tsr-chips{display:flex;gap:6px;flex-wrap:wrap;padding:2px 4px 10px;
    border-bottom:1px solid var(--border-color);margin-bottom:6px}
.tsr-chip{padding:5px 12px;border:1px solid var(--border-color);border-radius:999px;background:transparent;
    color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.tsr-chip:hover{color:var(--text-primary)}
.tsr-chip.active{background:var(--accent-10);border-color:var(--accent-primary);color:var(--accent-primary)}
.tsr-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);
    font-weight:600;padding:4px 6px}
.tsr-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:9px;
    text-decoration:none;color:inherit}
.tsr-item:hover,.tsr-item.active{background:rgba(255,255,255,.06)}
.tsr-ico{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
    background:var(--bg-tertiary);border-radius:8px;overflow:hidden}
.tsr-ico img{width:100%;height:100%;object-fit:contain}
.tsr-name{font-size:13px;font-weight:600;color:var(--text-primary);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsr-sub{font-size:11px;color:var(--text-secondary)}
.tsr-empty{padding:16px;text-align:center;color:var(--text-secondary);font-size:13px}
@media (max-width:760px){.topsearch{display:none}}

/* ---- Reusable off-canvas panel -------------------------------------------
   Bounded by .container (rendered in base.html's container_drawer block), so
   it slides over the content without covering the topbar. Driven by
   static/js/offcanvas.js: [data-oc-open="<id>"] opens, .oc-close closes.
   Two classes on purpose - `open` flips display so the transform can be
   animated on the next frame, `shown` runs the slide. */
.oc{display:none;position:absolute;inset:0;z-index:120;}
.oc.open{display:block;}
.oc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s ease;}
.oc.shown .oc-backdrop{opacity:1;}
.oc-panel{position:absolute;top:0;right:0;bottom:0;width:min(100%,540px);display:flex;flex-direction:column;
    background:var(--bg-container);border-left:1px solid var(--border-color);
    box-shadow:-8px 0 40px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .25s ease;}
.oc.shown .oc-panel{transform:translateX(0);}
.oc-head{flex-shrink:0;display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border-color);}
.oc-head .head-tile{width:36px;height:36px;font-size:16px;}
.oc-head .title{font-size:16px;font-weight:700;}
.oc-head .sub{font-size:12px;color:var(--text-tertiary);margin-top:2px;}
.oc-close{margin-left:auto;}
.oc-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding:18px 20px calc(24px + env(safe-area-inset-bottom));}
.oc-sec + .oc-sec{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-color);}
.oc-sec h3{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);}
.oc-sec p{margin:0 0 9px;font-size:13.5px;line-height:1.65;color:var(--text-secondary);}
.oc-sec p:last-child{margin-bottom:0;}
.oc-sec strong{color:var(--text-primary);}
.oc-note{display:flex;gap:10px;padding:12px 14px;border-radius:10px;background:var(--bg-tertiary);
    font-size:13px;line-height:1.6;color:var(--text-secondary);}
.oc-note i{flex-shrink:0;margin-top:3px;color:var(--accent-primary);}
@media (max-width:560px){.oc-panel{width:100%;}}

/* Inline "Learn how it works" trigger - replaces walls of page copy. */
.learn-link{display:inline-flex;align-items:center;gap:6px;padding:0;border:none;background:none;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:600;color:var(--accent-primary);text-decoration:none;}
.learn-link:hover{text-decoration:underline;}

/* ---- Summary tile figures (inside a .card, no nested boxes) --------------- */
.tile-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0;padding:12px 0;
    border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}
.tile-fig{text-align:center;min-width:0;}
.tile-fig .v{font-size:20px;font-weight:700;line-height:1.1;}
.tile-fig .k{margin-top:3px;font-size:10.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-tertiary);}
.tile-fig .v.dim{color:var(--text-tertiary);}

/* ---- Settings form (card-scoped, replaces inline field rows) -------------- */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}
.set-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.set-field .k{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary);}
.set-hint{font-size:12px;line-height:1.5;color:var(--text-tertiary);}
.set-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;
    border-top:1px solid var(--border-color);background:var(--bg-tertiary);}
.set-foot .btn{margin-left:auto;}
@media (max-width:560px){.set-foot .btn{margin-left:0;width:100%;}}

/* Checkbox row that reads as a setting rather than a stray input. */
.set-toggle{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--border-color);
    border-radius:10px;background:var(--bg-tertiary);cursor:pointer;}
.set-toggle input{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--accent-primary);}
.set-toggle .k{font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--text-primary);}

/* ---- Danger zone --------------------------------------------------------- */
/* Stands on its own - it is the box, so it never goes inside a .card (that
   stacks a second border and a header rule around it for nothing). */
.danger-zone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;
    border:1px solid rgba(248,113,113,.28);border-radius:12px;background:var(--error-bg);}
.card + .danger-zone{margin-top:16px;}
.danger-zone .txt{flex:1;min-width:200px;font-size:13px;line-height:1.55;color:var(--text-secondary);}
.danger-zone .txt .b{color:var(--error-text);}

/* Hero action cluster - right-aligned on desktop, full-width stack on phones. */
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;}
@media (max-width:560px){
  .hero-actions{margin-left:0;width:100%;}
  .hero-actions > *{flex:1 1 140px;}
  .hero-actions .btn,.hero-actions .ghost{width:100%;justify-content:center;}
}

/* Key/value summary rows inside a card - the compact "what is this set to"
   readout on settings cards. */
.sum-rows{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color);
    display:flex;flex-direction:column;gap:6px;}
.sum-rows > div{display:flex;align-items:baseline;gap:10px;font-size:12.5px;}
.sum-rows .k{color:var(--text-tertiary);white-space:nowrap;}
.sum-rows .v{margin-left:auto;text-align:right;font-weight:600;color:var(--text-secondary);}

/* ---- Panel rows -----------------------------------------------------------
   One .card holding several sections divided by rules, instead of a grid of
   small boxes. Use when the set of sections is fixed and short - a card grid
   there reads as scattered. `a.prow` makes the whole row the link. */
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 18px;
    background:var(--bg-tertiary);border-bottom:1px solid var(--border-color);}
.prow{display:flex;align-items:center;gap:16px;padding:16px 18px;
    text-decoration:none;color:inherit;}
.prow + .prow{border-top:1px solid var(--border-color);}
a.prow{transition:background .15s ease;}
a.prow:hover{background:rgba(255,255,255,.03);}
.prow-ico{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--brand-gradient);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;}
.prow-main{flex:1;min-width:0;}
.prow-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.prow-title .b{font-size:15px;}
.prow-desc{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--text-secondary);}
.prow-facts{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
    font-size:12.5px;color:var(--text-secondary);text-align:right;}
.prow-facts .v{font-weight:600;}
.prow-chev{flex-shrink:0;color:var(--text-tertiary);font-size:13px;}
/* Danger row: a red wash and an accent edge, not another nested box. */
.prow-danger{background:rgba(248,113,113,.05);box-shadow:inset 3px 0 0 var(--danger-main);}
.prow-danger .prow-ico{background:var(--error-bg);color:var(--error-text);}

/* ---- Settings landing: destination cards grouped by category ------------- */
.sec-head{margin:26px 0 12px;}
.setcard-head{display:flex;align-items:center;gap:11px;}
.setcard-head .head-tile{width:38px;height:38px;font-size:16px;flex-shrink:0;}
.setcard-title{font-size:15px;flex:1;min-width:0;}
a.card.linked:hover .setcard-title{color:var(--link);}
.setcard-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;}
.setcard-tags .tag{font-size:12px;}
@media (max-width:640px){
  .prow{flex-wrap:wrap;gap:12px;}
  .prow-facts{flex-basis:100%;align-items:flex-start;text-align:left;
      flex-direction:row;flex-wrap:wrap;gap:4px 12px;}
  .prow-chev{display:none;}
  .prow-danger form,.prow-danger .btn{width:100%;}
}

/* ---- Hero with the stats merged in ----------------------------------------
   One surface instead of a hero card plus a floating .stat-grid: the identity
   row on top, the figures underneath on the same background, divided by rules.
   (.hero-stats is taken by players_detail.css - hence -figs.) */
.hero-merged{display:block;padding:0;overflow:hidden;}
.hero-top{display:flex;align-items:center;gap:18px;padding:22px;}
.hero-figs{display:flex;flex-wrap:wrap;border-top:1px solid var(--border-color);}
.hero-figs .stat{flex:1 1 150px;min-width:0;background:transparent;border:none;border-radius:0;
    border-right:1px solid var(--border-color);padding:14px 18px;}
.hero-figs .stat:last-child{border-right:none;}
.hero-figs .stat .v{font-size:20px;}
/* Narrow screens: the identity row and the gauge can't share a line - the meta
   column gets crushed to nothing. Stack them instead of squeezing. */
@media (max-width:720px){
  .hero-top{flex-wrap:wrap;align-items:center;}
  .hero-top > .av{align-self:flex-start;}
  .hero-top .meta{flex:1 1 160px;}
  .hero-top .gauge{flex:1 0 100%;width:100%;margin-top:4px;
      padding-top:14px;border-top:1px solid var(--border-color);}
}
@media (max-width:640px){
  .hero-top{padding:18px;gap:14px;}
  .hero-figs .stat{flex:1 1 50%;border-bottom:1px solid var(--border-color);}
  /* With two per row, only the left cell of each pair keeps its right rule. */
  .hero-figs .stat:nth-child(even){border-right:none;}
}
@media (max-width:420px){
  .hero-top h1{font-size:19px;}
  .hero-figs .stat{flex:1 1 100%;border-right:none;}
}

/* ---- Chart + legend split (Grafana-style panel) --------------------------- */
.chart-split{display:flex;gap:16px;align-items:stretch;}
.chart-pane{flex:1;min-width:0;height:420px;position:relative;}
.chart-legend{flex:0 0 240px;max-height:420px;overflow-y:auto;overscroll-behavior:contain;
    border-left:1px solid var(--border-color);padding-left:14px;}
.chart-legend .lg-head{display:flex;align-items:center;justify-content:space-between;
    padding:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
    color:var(--text-tertiary);border-bottom:1px solid var(--border-color);position:sticky;top:0;
    background:var(--bg-card);}
.lg-item{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12.5px;cursor:pointer;
    border:none;background:none;width:100%;text-align:left;color:var(--text-secondary);font-family:inherit;}
.lg-item:hover{color:var(--text-primary);}
.lg-item.off{opacity:.35;}
.lg-swatch{flex-shrink:0;width:10px;height:3px;border-radius:2px;}
.lg-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lg-val{flex-shrink:0;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums;}
@media (max-width:900px){
  .chart-split{flex-direction:column;}
  .chart-pane{height:320px;}
  .chart-legend{flex:none;max-height:200px;border-left:none;padding-left:0;
      border-top:1px solid var(--border-color);padding-top:10px;}
}

/* Legend sort control - the "Last" header doubles as an asc/desc toggle. */
.lg-sort{display:inline-flex;align-items:center;gap:5px;border:none;background:none;padding:0;
    cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.5px;
    text-transform:uppercase;color:var(--text-tertiary);}
.lg-sort:hover{color:var(--text-primary);}


/* Offline-band hover tooltip (built by bindOfflineHover in main.js). Only the
   cursor coordinates stay inline - they change per mousemove. */
.offline-tip{position:fixed;z-index:60;pointer-events:none;background:var(--bg-tertiary);
    border:1px solid var(--border-color);border-radius:8px;padding:7px 10px;font-size:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap;}
/* Chart offline legend + config tab panels: JS toggles .u-hide, CSS owns display. */
#offlineLegend{display:flex;}
.cfg-panel{display:flex;}

/* Per-pet shine mask. Global because _pet_card.html is included on pages
   loading different page CSS - the icon URL comes in as --mask. */
.pet-fx--shine{-webkit-mask-image:var(--mask);mask-image:var(--mask);}

/* Back link above a detail hero, and the muted glyph before a card title -
   both were repeated inline on nearly every detail page. */
.backlink{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;color:var(--text-secondary);}
.card-head .title > i:first-child{margin-right:6px;color:var(--text-tertiary);}
/* Square identity image in a card row / hero, sized by the tile it replaces. */
.card-img{width:38px;height:38px;border-radius:9px;flex-shrink:0;object-fit:cover;background:var(--bg-tertiary);}
.hero-img{width:56px;height:56px;border-radius:12px;flex-shrink:0;object-fit:cover;background:var(--bg-tertiary);}
.tile-38{width:38px;height:38px;font-size:16px;}
.tile-56{width:56px;height:56px;font-size:23px;}
.tile-26{width:26px;height:26px;font-size:11px;}

/* Compact card body - a note/banner rather than a form. */
.card-body-tight{padding:14px 18px;}
/* Full-size select inside a .win wrapper. */
.win .select-lg{width:100%;padding:11px 30px 11px 13px;font-size:15px;background:var(--bg-tertiary);}
/* Podium avatar ring by finishing place. */
.pod-av--gold{border-color:#f59e0b;}
.pod-av--silver{border-color:#94a3b8;}
.pod-av--bronze{border-color:#a8703f;}

/* Stat grid inside a hero - width depends on how many tiles it carries. */
.stat-grid--narrow{margin:0;min-width:240px;}
.stat-grid--wide{margin:0;min-width:360px;}
/* Members progress bar - fill percentage passed in as --fill. */
.members-bar-fill{height:100%;width:var(--fill,0%);background:var(--brand-gradient);}

/* ---- Components emitted from JS (were inline styles in template strings) ---- */
/* Square thumbnail (pet / clan / league art) at the sizes the lists use. */
.thumb{border-radius:10px;background:var(--bg-tertiary);object-fit:contain;}
.thumb-22{width:22px;height:22px;border-radius:6px;flex:none;}
.thumb-44{width:44px;height:44px;}
.thumb-48{width:48px;height:48px;}
.thumb-56{width:56px;height:56px;}
/* Slim progress track + its fill; percentage comes in as --fill. */
.bar-track{flex:1;height:6px;border-radius:9999px;background:var(--bg-tertiary);overflow:hidden;}
.bar-fill{height:100%;width:var(--fill,0%);background:var(--brand-gradient);}
/* Empty / placeholder blocks inside a JS-rendered list. */
.js-empty{text-align:center;padding:28px;}
.box-dashed{gap:12px;padding:12px 14px;border:1px dashed var(--border-color);border-radius:10px;font-size:14px;}
.box-solid{gap:12px;padding:12px 14px;background:var(--bg-tertiary);border-radius:10px;}
/* Tooltip internals. */
.tip-title{font-weight:700;margin-bottom:2px;}
.tip-foot{font-weight:600;margin-top:2px;}
/* Colour carriers - the value is data, passed as a custom property. */
.c-fg{color:var(--c);}
.c-bg{background:var(--c);}
.c-ring{border-color:var(--c);}
.c-underline{border-bottom:3px solid var(--c);}
.c-chip{background:var(--c-bg);color:var(--c);}
.swatch-dot{width:100%;height:100%;border-radius:9999px;}
.chip-danger{background:rgba(220,80,80,.15);color:var(--danger-main);}
/* Skeleton bar sized from JS - width/height are data. */
.skel-bar{display:inline-block;width:var(--w);height:var(--h);vertical-align:middle;}
/* Avatar placeholder sized from JS. */
.av-ph-sized{width:var(--px);height:var(--px);}