*{box-sizing:border-box}
:root{
  --bg:#03152a;
  --bg-2:#052344;
  --bg-3:#0a3562;
  --panel:#071d37;
  --panel-2:#0a2747;
  --panel-3:#0d3158;
  --line:rgba(85,151,218,.24);
  --line-strong:rgba(102,181,255,.34);
  --text:#edf5ff;
  --muted:#99b7da;
  --accent:#1ea7ff;
  --accent-2:#167de0;
  --accent-soft:rgba(30,167,255,.14);
  --success:#3dd08e;
  --warning:#f2b84b;
  --danger:#ff647c;
  --shadow:0 18px 42px rgba(1,8,22,.38);
  --radius:24px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font:16px/1.45 Inter, Arial, sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(36,173,255,.20), transparent 25%),
    radial-gradient(circle at 82% 10%, rgba(22,125,224,.18), transparent 26%),
    linear-gradient(180deg,#02101f 0%,#041a31 24%,#05213e 60%,#03162c 100%);
}
a{color:inherit}
.aquarium-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aquarium-bg::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(42,119,180,.08),transparent 24%,transparent 76%,rgba(11,42,74,.18));
}
.bubble{position:absolute;bottom:-80px;border-radius:50%;opacity:.28;filter:blur(.2px);background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(156,229,255,.2) 45%, rgba(255,255,255,.02) 72%);animation:bob 18s linear infinite}
.bubble-1{left:8%;width:16px;height:16px;animation-duration:14s}
.bubble-2{left:26%;width:28px;height:28px;animation-duration:20s;animation-delay:2s}
.bubble-3{left:57%;width:22px;height:22px;animation-duration:17s;animation-delay:5s}
.bubble-4{left:76%;width:14px;height:14px;animation-duration:15s;animation-delay:1s}
.bubble-5{left:90%;width:34px;height:34px;animation-duration:24s;animation-delay:3s}
@keyframes bob{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-55vh) translateX(18px)}100%{transform:translateY(-110vh) translateX(-10px)}}

.container{position:relative;z-index:1;width:min(1520px,calc(100% - 40px));margin:0 auto}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(3,16,31,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(88,147,208,.22);
  box-shadow:0 10px 36px rgba(1,9,19,.32);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
.brand-logo{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(89,170,245,.35);
  background:
    radial-gradient(circle at 32% 35%, rgba(255,255,255,.95), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 55% 50%, rgba(25,167,255,.58), rgba(9,72,133,.82) 55%, rgba(4,24,48,.96) 100%);
  box-shadow:inset 0 0 18px rgba(100,211,255,.25),0 8px 24px rgba(0,0,0,.26);
  position:relative;
}
.brand-logo::before{content:"🐟";position:absolute;inset:0;display:grid;place-items:center;font-size:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.brand-copy{min-width:0}
.brand-pill{display:none}
.sea-creatures{display:none}
.topbar h1{margin:0;font-size:28px;line-height:1;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.topbar .muted{margin:6px 0 0;font-size:13px;color:#8eb3d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.nav a,.nav button.ghost{
  min-height:42px;padding:10px 16px;border-radius:14px;
  border:1px solid transparent;background:transparent;color:#dcecff;text-decoration:none;
  font-weight:600;box-shadow:none;transition:.18s ease;
}
.nav a:hover,.nav button.ghost:hover{background:rgba(255,255,255,.05);border-color:rgba(102,181,255,.16)}
.nav a.active,.nav button.active{background:rgba(18,126,224,.12);border-color:rgba(38,153,255,.36);color:#39bbff}
.nav .ghost.small.notify-toggle{background:rgba(255,255,255,.05);border-color:rgba(102,181,255,.18);color:#e9f3ff}
.page{padding:28px 0 120px}

.grid{display:grid;gap:18px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card,.subcard,.mini-card,.status-card,.leaderboard-stat-card{
  position:relative;
  background:linear-gradient(180deg,rgba(8,29,55,.96),rgba(7,24,46,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  color:var(--text);
}
.card{padding:24px}
.subcard{padding:18px;background:linear-gradient(180deg,rgba(9,34,62,.96),rgba(8,26,48,.94))}
.card.accent{
  background:
    radial-gradient(circle at top right, rgba(33,158,255,.15), transparent 36%),
    linear-gradient(180deg,rgba(8,36,67,.98),rgba(6,24,45,.96));
}
.card.narrow{max-width:560px;margin:0 auto}
h2{margin:0 0 10px;font-size:28px;line-height:1.15}
h3{margin:0 0 10px;font-size:20px}
h4{margin:0 0 8px;font-size:16px}
.muted{color:var(--muted)}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.summary-ribbon,.chips,.actions,.row-actions,.admin-actions,.mass-actions,.range-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip,.badge,.deadline,.button-link,.ghost-link{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;text-decoration:none;
}
.chip,.badge{
  padding:7px 12px;border:1px solid rgba(102,181,255,.18);
  background:rgba(255,255,255,.04);color:#d8ebff;font-size:13px
}
.badge.ok,.chip-ok{border-color:rgba(61,208,142,.32);background:rgba(61,208,142,.12);color:#87f3ba}
.badge.wait,.chip-wait{border-color:rgba(242,184,75,.28);background:rgba(242,184,75,.1);color:#ffd88a}
.badge.bad,.chip-bad{border-color:rgba(255,100,124,.28);background:rgba(255,100,124,.10);color:#ff9fb0}

.form-grid{display:grid;gap:14px}
.inline-form{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
label{display:grid;gap:7px;font-weight:600;color:#dfefff}
input,select,button,textarea{font:inherit}
input,select,textarea{
  width:100%;min-height:48px;padding:12px 15px;border-radius:16px;
  border:1px solid rgba(99,164,233,.22);background:#071a32;color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
input::placeholder,textarea::placeholder{color:#7898bf}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:rgba(47,165,255,.58);box-shadow:0 0 0 4px rgba(30,167,255,.12)
}
button,.button-link{
  justify-content:center;padding:12px 18px;border:none;cursor:pointer;
  background:linear-gradient(180deg,#27adff,#1779de);color:#fff;font-weight:800;
  box-shadow:0 12px 26px rgba(10,103,196,.28)
}
button:hover,.button-link:hover{filter:brightness(1.05)}
button.ghost,.ghost-link{
  background:rgba(255,255,255,.04)!important;color:#eaf4ff!important;
  border:1px solid rgba(102,181,255,.18)!important;box-shadow:none
}
button.danger{background:linear-gradient(180deg,#ff7990,#df4d68)}
button.small,.button-link.small{padding:9px 13px;border-radius:12px;font-size:13px}
.flash-stack,.notice-stack,.stack,.bars,.dashboard-grid,.dashboard-section{display:grid;gap:14px}
.flash,.notice{
  padding:14px 16px;border-radius:18px;border:1px solid rgba(102,181,255,.18);
  background:rgba(255,255,255,.04)
}
.flash-success,.notice-ok{border-color:rgba(61,208,142,.28);background:rgba(61,208,142,.10)}
.flash-error,.notice-bad{border-color:rgba(255,100,124,.30);background:rgba(255,100,124,.10)}
.notice{display:grid;gap:4px}

.meta{margin:0;display:grid;gap:10px}
.meta div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(102,181,255,.12)}
.meta dt{font-weight:600;color:var(--muted)}
.meta dd{margin:0;font-weight:700;text-align:right}
.stats,.result-box,.leaderboard-summary-grid,.metrics-grid{display:grid;gap:14px}
.stats,.result-box{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats.one-column{grid-template-columns:1fr}
.stats div,.result-box div,.leaderboard-stat-card,.status-card{
  padding:18px;border-radius:20px;border:1px solid rgba(102,181,255,.14);
  background:linear-gradient(180deg,rgba(13,42,75,.85),rgba(8,28,51,.82))
}
.stats span,.result-box span,.leaderboard-stat-meta span{display:block;color:var(--muted);margin-bottom:8px}
.stats strong,.result-box strong,.leaderboard-stat-meta strong{font-size:30px;line-height:1.1}
.metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.compact-stats strong{font-size:24px}
.leaderboard-summary-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.leaderboard-stat-card{display:flex;align-items:center;gap:16px;padding:22px}
.leaderboard-stat-icon{font-size:32px;line-height:1;opacity:.95}

.table-wrap,.leaderboard-table-wrap{overflow:auto;border-radius:20px;border:1px solid rgba(102,181,255,.12);background:rgba(4,19,37,.55)}
table{width:100%;border-collapse:collapse;min-width:720px}
th,td{padding:15px 14px;border-bottom:1px solid rgba(102,181,255,.11);vertical-align:top}
th{font-size:14px;font-weight:700;color:#65b7ff;text-transform:none;background:rgba(10,43,78,.42)}
tr:hover td{background:rgba(255,255,255,.018)}
.num{text-align:right}
.center{text-align:center}
.is-negative,.neg{color:#ff7a93;font-weight:700}
.pos{color:#7deab4;font-weight:700}
.selected-row{background:rgba(30,167,255,.08)}

.mini-card{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 18px}
.price{font-size:24px;font-weight:900}
.clean-list{margin:0;padding-left:20px;display:grid;gap:8px}
.helper-note,.small{font-size:13px;color:var(--muted)}
.inline-link{color:#6cc6ff;text-decoration:none;font-weight:700}
.inline-link:hover{text-decoration:underline}
.grow{flex:1}
.divider{height:1px;background:rgba(102,181,255,.12);margin:18px 0}

.bar-row{display:grid;grid-template-columns:140px 1fr 92px;gap:12px;align-items:center}
.bar-label,.bar-value{font-size:13px}
.bar-value{text-align:right;font-weight:700;color:#d9ecff}
.bar-track{height:12px;background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px}
.bar-fill.pos{background:linear-gradient(90deg,#3cd18f,#149a67)}
.bar-fill.neg{background:linear-gradient(90deg,#ff7a93,#d94c68)}

.deadline{padding:8px 12px;border:1px solid rgba(242,184,75,.3);background:rgba(242,184,75,.12);color:#ffd98f;font-size:13px;font-weight:700}
.deadline.overdue{border-color:rgba(255,100,124,.3);background:rgba(255,100,124,.12);color:#ff9fb0}
.push-cta{
  display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;margin-bottom:18px;
  border-radius:20px;border:1px solid rgba(102,181,255,.16);background:linear-gradient(180deg,rgba(11,39,70,.92),rgba(6,24,46,.92))
}
.push-cta strong{display:block;margin-bottom:4px}
.stack-chart{padding:12px 0}
.stack-chart svg{width:100%;height:auto;display:block}
.stack-chart polyline{stroke:#38bbff}
.stack-chart circle{fill:#9ddcff;cursor:pointer}
.stack-chart .axis{stroke:rgba(138,186,237,.25)}
.stack-chart-legend{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:10px}

.top-priority-card,.hero-card,.leaderboard-hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 84% 18%, rgba(31,168,255,.18), transparent 18%),
    radial-gradient(circle at 92% 26%, rgba(31,168,255,.12), transparent 10%),
    linear-gradient(90deg, rgba(6,26,49,.98) 0%, rgba(7,32,60,.96) 46%, rgba(8,58,92,.96) 100%);
}
.hero-card::after,.leaderboard-hero::after{
  content:"";position:absolute;right:-60px;bottom:-40px;width:360px;height:180px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.2), transparent 10%),
    linear-gradient(180deg, rgba(83,142,93,.55), rgba(83,142,93,0));
  filter:blur(0.5px);opacity:.9;transform:rotate(-6deg)
}
.auth-grid .form-card{min-height:100%}
.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.status-card span{display:block;color:var(--muted);margin-bottom:8px}
.status-card strong{font-size:22px}
.status-card.ok{border-color:rgba(61,208,142,.28)}
.status-card.wait{border-color:rgba(242,184,75,.28)}
.status-card.bad{border-color:rgba(255,100,124,.3)}

.leaderboard-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;align-items:center}
.leaderboard-hero-copy h2{font-size:48px;margin-bottom:8px;text-transform:uppercase}
.leaderboard-hero-copy .brand-pill{display:inline-flex;padding:7px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(102,181,255,.2);border-radius:999px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#bfe4ff;margin-bottom:14px}
.leaderboard-filter-form{margin-top:18px}
.leaderboard-filter-form label{min-width:180px}
.leaderboard-hero-art{min-height:190px;position:relative}
.rock,.plant,.fish{position:absolute}
.rock{right:12px;bottom:-10px;width:240px;height:110px;border-radius:50px 50px 20px 20px;background:linear-gradient(180deg,#8597aa,#2f4359 58%,#16273e)}
.plant{bottom:36px;width:26px;border-radius:999px;background:linear-gradient(180deg,#79df7f,#276d3b)}
.plant-1{right:116px;height:120px;transform:rotate(8deg)}
.plant-2{right:72px;height:148px;transform:rotate(-10deg)}
.fish{font-size:34px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.fish-1{right:190px;top:24px}
.fish-2{right:86px;top:58px}

.notice-stack,.flash-stack{margin-bottom:18px}
.filter-bar,.period-tabs{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.period-tab{padding:10px 14px;border-radius:999px;border:1px solid rgba(102,181,255,.16);background:rgba(255,255,255,.03);text-decoration:none;color:#dcebff;font-weight:700}
.period-tab.active,.period-tab:hover{background:rgba(30,167,255,.12);border-color:rgba(38,153,255,.34);color:#42beff}

.bottom-nav{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:35;display:none;
  padding:10px;border-radius:22px;background:rgba(4,18,34,.9);backdrop-filter:blur(16px);
  border:1px solid rgba(102,181,255,.16);box-shadow:0 14px 34px rgba(1,9,19,.38)
}
.bottom-nav a{flex:1;min-width:0;display:grid;place-items:center;gap:3px;padding:9px 6px;border-radius:16px;text-decoration:none;color:#d9ecff;font-size:12px}
.bottom-nav a span{font-size:18px}
.bottom-nav a.active{background:rgba(30,167,255,.14);color:#42beff}

@media (max-width:1200px){
  .leaderboard-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .topbar-inner{align-items:flex-start;flex-direction:column;padding:14px 0}
  .nav{justify-content:flex-start}
  .grid.two,.grid.three,.leaderboard-hero{grid-template-columns:1fr}
  .stats,.result-box,.player-form-grid,.leaderboard-summary-grid,.metrics-grid{grid-template-columns:1fr}
  .leaderboard-hero-copy h2{font-size:40px}
}
@media (max-width:760px){
  .container{width:min(100% - 24px, 100%)}
  .page{padding-top:18px;padding-bottom:110px}
  .desktop-nav{display:none}
  .bottom-nav{display:flex}
  .topbar{position:static}
  .topbar h1{font-size:24px}
  .topbar .muted{white-space:normal}
  .card{padding:18px}
  h2{font-size:24px}
  .section-head{flex-direction:column}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form > *{width:100%}
  .push-cta{flex-direction:column;align-items:flex-start}
  .bar-row{grid-template-columns:1fr}
  table{min-width:620px}
}
@media (max-width:480px){
  .container{width:calc(100% - 18px)}
  .brand-logo{width:42px;height:42px}
  .topbar-inner{min-height:auto}
  .topbar h1{font-size:22px}
  .bottom-nav a small{font-size:11px}
  .stats strong,.result-box strong,.leaderboard-stat-meta strong{font-size:24px}
}

/* === UX refresh 2026-04-21 === */
:root{
  --sidebar-w:280px;
  --content-max:1280px;
}
body.app-mode{
  overflow-x:hidden;
}
.brand-link{text-decoration:none}
.app-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
}
.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:26px 18px 20px;
  background:linear-gradient(180deg,rgba(3,17,31,.95),rgba(4,21,39,.92));
  border-right:1px solid rgba(102,181,255,.10);
  box-shadow:20px 0 44px rgba(0,0,0,.18);
}
.sidebar-brand .brand-wrap{gap:12px}
.sidebar-brand h1{font-size:26px;margin:0}
.sidebar-brand .muted{font-size:13px;line-height:1.45;margin-top:6px;white-space:normal;max-width:none}
.sidebar-nav{display:grid;gap:8px;overflow:auto;padding-right:4px}
.sidebar-section-label{
  margin:10px 0 6px;
  padding:0 12px;
  color:#7ea6cf;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.nav-link{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:12px 14px;
  border-radius:16px;
  color:#d8ebff;
  text-decoration:none;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav-link:hover{
  background:rgba(255,255,255,.04);
  border-color:rgba(102,181,255,.12);
}
.nav-link.active{
  background:linear-gradient(180deg,rgba(24,117,209,.24),rgba(10,83,154,.20));
  border-color:rgba(73,173,255,.32);
  color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-link.subtle{background:rgba(255,255,255,.025)}
.nav-icon{
  display:grid;
  place-items:center;
  width:24px;
  min-width:24px;
  color:#5dc2ff;
  font-size:16px;
}
.sidebar-footer{
  margin-top:auto;
  display:grid;
  gap:12px;
}
.sidebar-push-button{width:100%}
.sidebar-user-card{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(102,181,255,.14);
  background:rgba(255,255,255,.03);
}
.sidebar-user-name{font-weight:800}
.sidebar-user-role{margin-top:4px;color:var(--muted);font-size:13px}
.sidebar-actions{display:grid;gap:8px}
.app-main{min-width:0;display:flex;flex-direction:column}
.page-shell{
  width:min(var(--content-max),calc(100% - 40px));
  margin:0 auto;
  padding:28px 0 36px;
}
.mobile-header,.mobile-bottom-nav{display:none}
.public-topbar{position:sticky;top:0}
.public-page{padding-bottom:60px}

.mobile-bottom-nav{display:none}
.leaderboard-table-desktop{display:block}
.leaderboard-mobile-list{display:none}

.leaderboard-mobile-card{
  background:linear-gradient(180deg,rgba(8,31,58,.94),rgba(4,20,38,.96));
  border:1px solid rgba(102,181,255,.14);
  border-radius:20px;
  padding:16px;
  box-shadow:0 12px 30px rgba(1,10,22,.18);
}
.leaderboard-mobile-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.leaderboard-mobile-rank{min-width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(30,167,255,.14);border:1px solid rgba(73,173,255,.24);font-weight:800;color:#9ddcff}
.leaderboard-mobile-player{font-size:18px;font-weight:800;flex:1 1 auto;min-width:120px}
.leaderboard-mobile-chip{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(102,181,255,.12);color:#b7d9ff;font-size:12px;font-weight:700}
.leaderboard-mobile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.leaderboard-mobile-grid div{padding:12px 13px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(102,181,255,.1);min-width:0}
.leaderboard-mobile-grid span{display:block;margin-bottom:6px;color:var(--muted);font-size:12px}
.leaderboard-mobile-grid strong{display:block;font-size:18px;line-height:1.25;word-break:break-word}
.leaderboard-empty-mobile{padding:12px 4px}

.mobile-bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:10px 10px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(4,15,29,.82),rgba(2,10,21,.96));
  border-top:1px solid rgba(102,181,255,.14);
  backdrop-filter:blur(18px);
  box-shadow:0 -16px 36px rgba(0,0,0,.28);
}
.mobile-bottom-nav-track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.mobile-bottom-nav-track::-webkit-scrollbar{display:none}
.mobile-bottom-link{flex:0 0 auto;min-width:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 12px;border-radius:18px;text-decoration:none;color:#dcebff;background:rgba(255,255,255,.03);border:1px solid rgba(102,181,255,.12);font-size:11px;font-weight:700;line-height:1.1;text-align:center}
.mobile-bottom-icon{font-size:17px;line-height:1}
.mobile-bottom-link.active{background:rgba(30,167,255,.14);border-color:rgba(73,173,255,.28);color:#56c6ff;box-shadow:inset 0 0 0 1px rgba(73,173,255,.08)}

.card,.subcard,.mini-card,.status-card,.leaderboard-stat-card{
  backdrop-filter:blur(8px);
}
.card{padding:22px}
.card.narrow{max-width:620px}
.section-head{margin-bottom:18px}
.section-head > div:first-child{min-width:0}
h2{font-size:30px;letter-spacing:-.02em}
h3{font-size:21px;letter-spacing:-.01em}
.muted{line-height:1.5}
.summary-ribbon,.chips,.actions,.row-actions,.admin-actions,.mass-actions,.range-actions{gap:8px}
.chip,.badge{padding:8px 12px;font-size:12px;font-weight:700}
button,.button-link{min-height:46px;border-radius:16px}
button.small,.button-link.small{min-height:38px}
.form-grid,.inline-form{gap:12px}
.inline-form > label{min-width:160px;flex:1 1 160px}
label{font-size:14px}
input,select,textarea{min-height:50px;border-radius:15px}
.flash,.notice{padding:14px 16px;border-radius:16px}
.stats,.result-box,.leaderboard-summary-grid,.metrics-grid,.status-grid{gap:12px}
.stats div,.result-box div,.leaderboard-stat-card,.status-card{padding:16px 18px}
.stats strong,.result-box strong,.leaderboard-stat-meta strong{font-size:28px}
.meta div{align-items:flex-start}
.meta dd{max-width:60%;word-break:break-word}
.price{font-size:22px}
.table-wrap,.leaderboard-table-wrap{border-radius:18px;overflow:auto}
table{min-width:760px}
th,td{padding:13px 14px}
th{position:sticky;top:0;z-index:1;backdrop-filter:blur(8px)}
.stack-chart-legend{gap:10px}
.push-cta{border-radius:18px}
.hero-card,.leaderboard-hero,.top-priority-card{border-radius:28px}
.status-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.auth-grid{align-items:start}
.auth-grid .form-card{height:100%}
.leaderboard-hero-copy h2{font-size:42px}
.leaderboard-filter-form{align-items:end}
.leaderboard-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.filter-bar.compact, .range-form{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.filter-bar.compact > label,.range-form > label{flex:1 1 180px}
.range-actions,.actions{align-items:center}
.bars{gap:12px}
.bar-row{grid-template-columns:120px minmax(0,1fr) 84px}
.compact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.tight-grid{gap:12px}
.quick-request-card,.mini-card{align-items:flex-start}
.request-actions form{display:inline-flex}
.codex-legend > div,.codex-rule-card,.codex-note-card,.codex-editor-card{min-width:0}
.small-code{display:block;max-width:320px;overflow:auto;white-space:nowrap}

/* public landing */
.public-mode .page{padding-top:32px}
.public-mode .hero-card{margin-bottom:18px}
.public-mode .auth-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.public-mode .form-card{min-height:100%}

/* mobile */
@media (max-width:1100px){
  :root{--sidebar-w:240px}
  .page-shell{width:calc(100% - 28px)}
  .leaderboard-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .app-layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 14px 12px;
    margin:0 0 8px;
    position:sticky;
    top:0;
    z-index:25;
    background:rgba(3,16,31,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(102,181,255,.10);
  }
  .mobile-header .brand-copy h1{font-size:22px}
  .mobile-header-user{
    max-width:42%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#dcecff;
    font-weight:700;
  }
  .mobile-bottom-nav{display:block}
  .page-shell{width:calc(100% - 20px);padding-top:8px;padding-bottom:108px}
  .grid.two,.grid.three,.auth-grid,.leaderboard-hero,.stats,.result-box,.leaderboard-summary-grid,.metrics-grid,.compact-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:stretch}
  .summary-ribbon,.row-actions,.actions,.range-actions{align-items:stretch}
  .row-actions > *, .actions > *, .range-actions > *{width:100%}
  .inline-form{flex-direction:column;align-items:stretch}
  .inline-form > *, .inline-form > label{width:100%;min-width:0}
  .leaderboard-hero-copy h2{font-size:34px}
  .leaderboard-hero-art{min-height:140px}
  .bar-row{grid-template-columns:1fr;gap:8px}
  .meta div{display:grid;gap:6px}
  .meta dd{text-align:left;max-width:none}
  .quick-request-card,.mini-card{flex-direction:column}
  .table-wrap,.leaderboard-table-wrap{margin:0 -6px;border-radius:16px}
  table{min-width:680px}
  .public-mode .auth-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .leaderboard-table-desktop{display:none}
  .leaderboard-mobile-list{display:grid}
  .leaderboard-table-card{padding:18px}
  .leaderboard-mobile-grid{grid-template-columns:1fr 1fr}
  body{font-size:15px}
  .public-topbar .topbar-inner{min-height:72px}
  .page{padding-top:20px}
  .card,.subcard{padding:18px}
  h2{font-size:24px}
  h3{font-size:19px}
  .stats strong,.result-box strong,.leaderboard-stat-meta strong,.price{font-size:24px}
  .status-grid{grid-template-columns:1fr 1fr}
  .top-priority-card,.hero-card,.leaderboard-hero{border-radius:22px}
  .push-cta{flex-direction:column;align-items:stretch}
  .chip,.badge{max-width:100%}
  .small-code{max-width:220px}
}
@media (max-width:480px){
  .public-topbar .container,.page-shell,.public-page{width:calc(100% - 16px)}
  .mobile-header{padding-left:10px;padding-right:10px}
  .mobile-bottom-nav{padding-left:8px;padding-right:8px}
  .leaderboard-mobile-grid{grid-template-columns:1fr}
  .leaderboard-mobile-player{font-size:17px}
  .mobile-bottom-nav{padding-left:8px;padding-right:8px}
  .status-grid{grid-template-columns:1fr}
  .stats div,.result-box div,.leaderboard-stat-card,.status-card{padding:14px 16px}
  th,td{padding:11px 12px}
  input,select,textarea,button,.button-link{min-height:46px}
}