:root{
  color-scheme:dark;
  --bg:#06101c;
  --panel:#0c1b2d;
  --panel-2:#10233a;
  --panel-3:#081625;
  --line:#1e3a57;
  --text:#f5fbff;
  --muted:#96aac0;
  --accent:#4de1ff;
  --accent-2:#8ef5d0;
  --good:#4ee38c;
  --warn:#ffd166;
  --bad:#ff6b6b;
  --common:#9cacc0;
  --limited:#f4c84a;
  --rare:#ff6464;
  --super:#5ba8ff;
  --unique:#bd7cff;
  --shadow:0 18px 45px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{
  min-height:100%;
  margin:0;
  padding-bottom:94px;
  background:
    radial-gradient(circle at 50% -120px,rgba(35,104,151,.4),transparent 440px),
    linear-gradient(180deg,#081522 0,var(--bg) 460px);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.onboarding-active{padding-bottom:20px}
.onboarding-active .bottom-nav{display:none}

button,input,select{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(77,225,255,.35);
  outline-offset:2px;
}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(25px,6vw,33px);line-height:1.08;margin-bottom:10px}
h2{font-size:20px;line-height:1.15;margin-bottom:8px}
h3{font-size:16px;margin-bottom:6px}
p{line-height:1.5}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:69px;
  padding:12px max(16px,env(safe-area-inset-left));
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(6,16,28,.9);
  backdrop-filter:blur(18px);
}
.brand-button{display:grid;gap:2px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.brand-button strong{font-size:18px;letter-spacing:.08em}
.brand-button strong span{color:var(--accent)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-button{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.09);border-radius:12px;
  background:rgba(255,255,255,.04);cursor:pointer
}
.mode-pill{
  border:1px solid rgba(255,209,102,.27);
  border-radius:999px;
  padding:8px 10px;
  color:var(--warn);
  background:rgba(255,209,102,.07);
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
}
.mode-pill.live{border-color:rgba(78,227,140,.28);color:var(--good);background:rgba(78,227,140,.07)}

main{width:min(780px,100%);margin:0 auto;padding:16px}
.screen.hidden,.hidden{display:none!important}
.hero-card,.card{
  margin-bottom:14px;
  padding:18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(16,35,58,.96),rgba(10,26,44,.96));
  box-shadow:var(--shadow);
}
.hero-card{
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 100% 0,rgba(77,225,255,.13),transparent 180px),
    linear-gradient(135deg,rgba(14,44,68,.98),rgba(7,27,44,.98));
}
.hero-card::after{
  content:"";position:absolute;right:-70px;bottom:-100px;width:210px;height:210px;border-radius:50%;
  border:1px solid rgba(77,225,255,.09);box-shadow:0 0 0 28px rgba(77,225,255,.025),0 0 0 56px rgba(77,225,255,.018);
  pointer-events:none
}
.hero-row,.card-head,.section-title,.connection-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hero-row>div:first-child{position:relative;z-index:1;min-width:0}
.hero-copy{position:relative;z-index:1;color:#c4d6e7;margin-bottom:0;max-width:560px}
.eyebrow,.label{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:900}
.path-label{display:inline-flex;margin-top:3px;padding:5px 8px;border-radius:999px;background:rgba(77,225,255,.08);color:var(--accent);font-size:11px;font-weight:800}
.status-ring{
  position:relative;z-index:1;flex:0 0 auto;width:78px;height:78px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:6px solid rgba(77,225,255,.16);outline:2px solid rgba(77,225,255,.34)
}
.status-value{font-size:24px;font-weight:950;line-height:1}
.status-label{margin-top:3px;font-size:8px;color:var(--accent);font-weight:900;letter-spacing:.12em}
.section-title{margin:21px 2px 12px}
.section-title h1,.section-title h2{margin-bottom:0}
.page-heading{align-items:flex-end;margin-top:5px}
.page-heading h1{font-size:28px}
.stack{display:grid;gap:10px}

.onboarding-hero h1{max-width:560px;margin-top:8px}
.onboarding-hero p{position:relative;z-index:1;margin:0;color:#c4d6e7}
.badge{display:inline-flex;padding:6px 9px;border-radius:999px;background:rgba(77,225,255,.1);color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.12em}
.setup-card{display:grid;grid-template-columns:34px 1fr;gap:13px;padding:16px}
.setup-card>div:last-child{min-width:0}
.setup-number{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#15324f;color:var(--accent);font-weight:950}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}
.choice-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{
  min-height:49px;padding:11px;border:1px solid var(--line);border-radius:13px;background:#091827;
  color:var(--text);font-size:13px;font-weight:750;text-align:left;cursor:pointer
}
.choice.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(77,225,255,.08);color:var(--accent);background:rgba(77,225,255,.055)}
.safety-note,.warning-note{
  display:flex;gap:11px;margin:0 0 14px;padding:13px 14px;border:1px solid rgba(142,245,208,.18);border-radius:15px;
  background:rgba(142,245,208,.055);color:#cfe9e1;font-size:13px;line-height:1.45
}
.warning-note{border-color:rgba(255,209,102,.2);background:rgba(255,209,102,.055);color:#eadfbf}

.primary,.secondary,.ghost,.danger-button,.text-button{
  border:0;border-radius:13px;padding:12px 15px;font-weight:900;cursor:pointer;transition:transform .15s ease,opacity .15s ease,background .15s ease
}
.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#041019}
.external-button{display:flex;align-items:center;justify-content:center;text-decoration:none}
.secondary{border:1px solid #244766;background:#142940;color:#dcecff}
.ghost{padding:8px;background:transparent;color:var(--accent)}
.text-button{padding:8px;background:transparent;color:var(--accent);font-size:12px}
.danger-button{border:1px solid rgba(255,107,107,.3);background:rgba(255,107,107,.06);color:var(--bad)}
.primary:hover,.secondary:hover,.danger-button:hover{transform:translateY(-1px)}
.primary:disabled,.secondary:disabled{cursor:not-allowed;opacity:.5;transform:none}
.big{width:100%;padding:16px;font-size:15px}
.full{width:100%;margin-top:12px}
.muted{color:var(--muted);font-size:13px}

.data-banner{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;margin-bottom:16px;padding:12px 13px;
  border:1px solid rgba(255,209,102,.18);border-radius:15px;background:rgba(255,209,102,.055)
}
.data-banner.live{border-color:rgba(78,227,140,.2);background:rgba(78,227,140,.055)}
.data-dot{width:10px;height:10px;border-radius:50%;background:var(--warn);box-shadow:0 0 14px rgba(255,209,102,.55)}
.data-banner.live .data-dot{background:var(--good);box-shadow:0 0 14px rgba(78,227,140,.55)}
.data-banner strong,.data-banner small{display:block}
.data-banner strong{font-size:13px}.data-banner small{margin-top:2px;color:var(--muted);font-size:11px}

.action-card,.player-card,.market-card,.match-card,.learn-card,.empty-card{
  border:1px solid rgba(255,255,255,.075);border-radius:17px;background:rgba(12,27,45,.94)
}
.action-card{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px}
.action-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(77,225,255,.08);font-size:20px}
.action-content{min-width:0}
.action-title{font-weight:850;margin-bottom:4px}
.action-copy{color:var(--muted);font-size:13px;line-height:1.4}
.action-link{padding:8px 9px;border:0;border-radius:10px;background:rgba(77,225,255,.09);color:var(--accent);font-size:10px;font-weight:950;text-decoration:none;cursor:pointer;white-space:nowrap}
.action-link.external::after{content:" ↗"}

.budget-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:end}
.money{margin-top:4px;font-size:24px;font-weight:950}
.verdict{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;padding:8px 10px;border-radius:999px;font-size:10px;font-weight:950;letter-spacing:.03em}
.verdict.safe{border:1px solid rgba(78,227,140,.22);background:rgba(78,227,140,.1);color:var(--good)}
.verdict.warn{border:1px solid rgba(255,209,102,.22);background:rgba(255,209,102,.1);color:var(--warn)}
.verdict.bad{border:1px solid rgba(255,107,107,.22);background:rgba(255,107,107,.1);color:var(--bad)}
.budget-card .verdict{grid-column:1/-1}
.score-chip,.count-chip{padding:7px 9px;border:1px solid rgba(77,225,255,.18);border-radius:999px;background:rgba(77,225,255,.08);color:var(--accent);font-size:11px;font-weight:850;white-space:nowrap}
.count-chip{min-width:34px;text-align:center;font-size:13px}

.player-row{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.player-row:last-child{border-bottom:0}
.player-card{overflow:hidden;padding:13px 14px}
.player-card .player-row{padding:0;border:0}
.player-avatar,.role{width:40px;height:40px;border-radius:12px;background:#122b45;display:grid;place-items:center;color:var(--accent);font-size:10px;font-weight:950;object-fit:cover}
.player-avatar{background:linear-gradient(160deg,#1a3857,#0b1929)}
.player-main{min-width:0}
.player-name{overflow:hidden;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.player-meta{overflow:hidden;margin-top:3px;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.jarvis-score{text-align:right}
.jarvis-score strong{display:block;font-size:20px}.jarvis-score span{color:var(--muted);font-size:9px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0}
.metric{min-width:0;padding:9px;border-radius:12px;background:#091728}
.metric .n{overflow:hidden;font-size:16px;font-weight:900;text-overflow:ellipsis;white-space:nowrap}
.metric .t{margin-top:2px;color:var(--muted);font-size:9px}
.rarity-tag{display:inline-flex;margin-right:5px;padding:3px 6px;border:1px solid currentColor;border-radius:999px;font-size:8px;font-weight:900;text-transform:uppercase}
.rarity-common{color:var(--common)}.rarity-limited{color:var(--limited)}.rarity-rare{color:var(--rare)}.rarity-super_rare{color:var(--super)}.rarity-unique{color:var(--unique)}
.explanation-card p,.compact-card p,.source-card p{margin-bottom:0;color:#c2d3e5;font-size:13px}

.market-card{padding:15px}
.market-card h3{margin-top:8px}
.market-card p{margin-bottom:0;color:var(--muted);font-size:13px}
.market-checklist{display:grid;gap:9px;margin-top:12px}
.market-check{display:flex;align-items:flex-start;gap:9px;color:#c9d9e9;font-size:13px}
.market-check span{color:var(--good);font-weight:900}
.sale-card{padding:15px}
.sale-card .player-row{padding:0;border:0}
.sale-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.sale-score{font-size:11px;color:var(--muted);font-weight:850;white-space:nowrap}
.sale-reasons{display:grid;gap:7px;margin-top:12px}
.sale-reason{display:flex;align-items:flex-start;gap:8px;color:#c9d9e9;font-size:12px;line-height:1.4}
.sale-reason::before{content:"·";color:var(--accent);font-size:18px;font-weight:950;line-height:.8}
.empty-card{padding:20px;text-align:center}
.empty-icon{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 12px;border-radius:16px;background:rgba(77,225,255,.08);font-size:23px}
.empty-card h3{font-size:18px}.empty-card p{max-width:460px;margin:0 auto 14px;color:var(--muted);font-size:13px}

.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
select,input{
  width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;background:#091827;color:var(--text);padding:10px 12px
}
select{cursor:pointer}
.match-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px}
.match-time{flex:0 0 auto;color:var(--accent);font-weight:900;text-align:right}
.match-time small{display:block;margin-top:3px;color:var(--muted);font-size:9px;font-weight:700}
.learn-card{display:block;padding:14px}
.learn-card summary{cursor:pointer;font-weight:850}
.learn-card p{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
.learn-card a{color:var(--accent)}

.connection-card h2{margin:4px 0 0}
.connection-light{width:13px;height:13px;border-radius:50%;background:#506174;box-shadow:0 0 0 5px rgba(80,97,116,.12)}
.connection-light.live{background:var(--good);box-shadow:0 0 0 5px rgba(78,227,140,.12),0 0 18px rgba(78,227,140,.35)}
.input-label{display:block;margin:14px 0 6px;color:#c3d4e5;font-size:12px;font-weight:800}
.input-action{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}
.input-action .primary,.input-action .secondary{min-height:46px}
.inline-status{min-height:18px;margin-top:9px;color:var(--muted);font-size:12px}
.inline-status.good{color:var(--good)}.inline-status.bad{color:var(--bad)}
.manager-summary{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;margin-top:14px;padding:12px;border:1px solid rgba(78,227,140,.16);border-radius:14px;background:rgba(78,227,140,.045)}
.manager-picture{width:45px;height:45px;border-radius:13px;object-fit:cover;background:#142940}
.manager-summary strong,.manager-summary small{display:block}.manager-summary small{margin-top:3px;color:var(--muted);font-size:11px}
.sync-time{color:var(--good);font-size:10px;font-weight:850;text-align:right}
.currency-input{position:relative}
.currency-input span{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--accent);font-weight:900}
.currency-input input{padding-left:31px}
.settings-actions .full:first-child{margin-top:0}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(7,1fr);
  padding:7px max(6px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  border-top:1px solid rgba(255,255,255,.075);background:rgba(5,14,24,.96);backdrop-filter:blur(18px)
}
.nav-btn{display:grid;place-items:center;gap:2px;padding:5px 2px;border:0;background:transparent;color:#7890a7;font-size:16px;cursor:pointer}
.nav-btn span{font-size:9px;font-weight:850}.nav-btn.active{color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(min-width:700px){
  main{padding:24px 18px 30px}
  .topbar{padding-left:calc((100% - 780px)/2 + 18px);padding-right:calc((100% - 780px)/2 + 18px)}
  .bottom-nav{left:50%;right:auto;width:780px;transform:translateX(-50%);border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06);border-radius:18px 18px 0 0}
}

@media(max-width:540px){
  main{padding:12px}
  .hero-card,.card{border-radius:18px}
  .choice-grid{grid-template-columns:1fr}
  .choice-grid.compact{grid-template-columns:repeat(2,1fr)}
  .action-card{grid-template-columns:42px 1fr}.action-link{grid-column:2;justify-self:start}
  .mode-pill{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

@media(max-width:370px){
  .status-ring{width:68px;height:68px}.status-value{font-size:21px}
  .filter-row{grid-template-columns:1fr}
  .manager-summary{grid-template-columns:auto 1fr}.sync-time{grid-column:2;text-align:left}
  .brand-button strong{font-size:16px}.icon-button{display:none}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}