:root {
  color-scheme: dark;
  --bg: #050b13;
  --surface: rgba(14, 25, 40, .86);
  --surface-2: rgba(20, 35, 55, .82);
  --surface-3: rgba(30, 50, 74, .72);
  --line: rgba(160, 190, 220, .14);
  --line-strong: rgba(160, 190, 220, .26);
  --text: #f4f8fc;
  --muted: #93a9bd;
  --accent: #89f7c3;
  --accent-2: #67b7ff;
  --gold: #ffd66b;
  --danger: #ff6f7d;
  --warning: #ffb85c;
  --success: #62e6a8;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  radial-gradient(circle at 8% -10%, rgba(47, 150, 255, .20), transparent 34%),
  radial-gradient(circle at 92% 5%, rgba(79, 247, 172, .14), transparent 32%),
  linear-gradient(145deg, #06101c 0%, #040810 52%, #07101b 100%);
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: var(--accent-2); }

.app-loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.glass { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.card { background: linear-gradient(145deg, rgba(24, 42, 63, .88), rgba(11, 22, 36, .84)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 15px 45px rgba(0,0,0,.22); }
.muted { color: var(--muted); }
.eyebrow { text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; color: var(--accent); font-weight: 800; }
.title-gradient { background: linear-gradient(90deg, #fff, #9ee8d2 45%, #78bdff); -webkit-background-clip: text; color: transparent; }

.btn { border: 1px solid var(--line); border-radius: 12px; padding: .72rem 1rem; background: rgba(255,255,255,.055); cursor: pointer; transition: .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 750; }
.btn:hover { transform: translateY(-1px); border-color: var(--line-strong); background: rgba(255,255,255,.09); }
.btn.primary { background: linear-gradient(135deg, #79f0bd, #5bbdfc); color: #03121c; border: none; }
.btn.danger { color: #ffd8dc; border-color: rgba(255,111,125,.35); background: rgba(255,111,125,.1); }
.btn.ghost { background: transparent; }
.btn.small { padding: .48rem .7rem; border-radius: 10px; font-size: .84rem; }
.btn.icon { width: 40px; height: 40px; padding: 0; }

.auth-shell, .setup-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.auth-shell::before, .setup-shell::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent); pointer-events:none; }
.auth-card, .setup-card { width: min(920px, 100%); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; position: relative; z-index: 1; }
.auth-brand { padding: 54px; background: radial-gradient(circle at 20% 20%, rgba(115,232,190,.24), transparent 32%), linear-gradient(145deg, rgba(16,42,55,.95), rgba(7,17,30,.96)); display:flex; flex-direction:column; justify-content:space-between; min-height: 570px; }
.auth-brand h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); line-height: .9; margin: 18px 0; letter-spacing:-.055em; }
.auth-brand p { max-width: 44ch; color: #b5c9d8; line-height: 1.65; }
.auth-form { padding: 48px; display:flex; flex-direction:column; justify-content:center; background: rgba(7,15,25,.9); }
.auth-tabs { display:flex; gap:8px; padding:5px; border-radius:14px; background: rgba(255,255,255,.05); margin-bottom: 26px; }
.auth-tab { flex:1; border:0; border-radius:10px; padding:.72rem; background:transparent; cursor:pointer; color:var(--muted); font-weight:800; }
.auth-tab.active { background: rgba(255,255,255,.1); color:var(--text); }

.form-grid { display:grid; gap:16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:.8rem; color:#b8c8d6; font-weight:750; }
.input, .select, .textarea { width:100%; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.052); color:var(--text); padding:.78rem .9rem; outline:none; transition:.2s ease; }
.input:focus, .select:focus, .textarea:focus { border-color:rgba(103,183,255,.62); box-shadow:0 0 0 3px rgba(103,183,255,.12); }
.textarea { min-height:110px; resize:vertical; }
.help { font-size:.78rem; color:var(--muted); line-height:1.5; }
.error-box, .success-box { border-radius:12px; padding:.8rem 1rem; margin-bottom:14px; font-size:.88rem; }
.error-box { color:#ffd9de; background:rgba(255,111,125,.12); border:1px solid rgba(255,111,125,.28); }
.success-box { color:#d7ffef; background:rgba(98,230,168,.12); border:1px solid rgba(98,230,168,.28); }

.career-picker { min-height:100vh; padding:36px; max-width:1280px; margin:auto; }
.picker-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px; }
.picker-head h1 { margin:0; font-size:clamp(2rem,5vw,4rem); letter-spacing:-.045em; }
.career-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.career-card { padding:22px; cursor:pointer; transition:.22s ease; min-height:210px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.career-card::after { content:""; position:absolute; width:160px; height:160px; border-radius:50%; background:rgba(103,183,255,.09); right:-55px; top:-55px; }
.career-card:hover { transform:translateY(-4px); border-color:rgba(103,183,255,.45); }
.career-card h3 { font-size:1.45rem; margin:.5rem 0; }
.new-career-card { padding:22px; }

.shell { min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:20px 16px; border-right:1px solid var(--line); background:rgba(4,10,17,.86); backdrop-filter:blur(22px); display:flex; flex-direction:column; z-index:10; }
.brand-mini { padding:10px 12px 20px; }
.brand-mini strong { font-size:1.25rem; letter-spacing:-.03em; }
.brand-mini span { display:block; color:var(--muted); font-size:.78rem; margin-top:4px; }
.career-switch { margin:0 6px 18px; padding:13px; border-radius:15px; background:linear-gradient(145deg,rgba(104,190,255,.13),rgba(113,241,188,.08)); border:1px solid var(--line); }
.career-switch .club { font-weight:850; }
.career-switch .season { color:var(--muted); font-size:.78rem; margin-top:4px; }
.nav { display:flex; flex-direction:column; gap:5px; overflow:auto; }
.nav button { border:0; background:transparent; color:#9fb1c2; text-align:left; padding:.77rem .85rem; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:.75rem; font-weight:750; }
.nav button:hover { background:rgba(255,255,255,.055); color:#fff; }
.nav button.active { color:#06131c; background:linear-gradient(90deg,var(--accent),#8acaff); }
.nav-icon { width:21px; text-align:center; }
.sidebar-bottom { margin-top:auto; display:grid; gap:8px; padding-top:16px; }
.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:8; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 28px; border-bottom:1px solid var(--line); background:rgba(6,13,22,.78); backdrop-filter:blur(20px); }
.topbar-left { display:flex; align-items:center; gap:14px; min-width:0; }
.topbar h2 { margin:0; font-size:1.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.season-control { display:flex; align-items:center; gap:8px; }
.content { padding:28px; max-width:1600px; margin:auto; }
.page-head { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:22px; }
.page-head h1 { margin:.25rem 0 0; font-size:clamp(2rem,4vw,3.7rem); letter-spacing:-.045em; line-height:1; }
.page-head p { margin:.6rem 0 0; max-width:65ch; color:var(--muted); line-height:1.55; }

.stats-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.stat-card { padding:18px; min-height:128px; position:relative; overflow:hidden; }
.stat-card::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-30px; top:-30px; background:rgba(120,200,255,.08); }
.stat-card .value { font-size:2rem; font-weight:900; letter-spacing:-.05em; margin-top:13px; }
.stat-card .label { font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:18px; }
.panel { padding:20px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.panel-head h3 { margin:0; }
.activity-list { display:grid; gap:10px; }
.activity-item { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:13px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.05); }
.activity-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:rgba(103,183,255,.12); }
.activity-item small { color:var(--muted); }

.squad-toolbar { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-bottom:18px; }
.squad-layout { display:grid; grid-template-columns:minmax(560px,1.35fr) minmax(260px,.65fr); gap:18px; align-items:start; }
.pitch-wrap { padding:14px; }
.pitch { position:relative; width:100%; aspect-ratio:68/96; max-height:760px; min-height:640px; border-radius:24px; overflow:hidden; background:
  linear-gradient(90deg,rgba(255,255,255,.025) 50%,transparent 50%) 0 0/18% 100%,
  linear-gradient(180deg,#0a754f,#096343); border:2px solid rgba(218,255,236,.3); box-shadow:inset 0 0 60px rgba(0,0,0,.25); margin:auto; }
.pitch::before { content:""; position:absolute; inset:3.2%; border:2px solid rgba(240,255,248,.44); border-radius:3px; pointer-events:none; }
.pitch::after { content:""; position:absolute; left:3.2%; right:3.2%; top:50%; border-top:2px solid rgba(240,255,248,.44); pointer-events:none; }
.center-circle { position:absolute; width:18%; aspect-ratio:1; border:2px solid rgba(240,255,248,.44); border-radius:50%; left:41%; top:41%; }
.center-dot { position:absolute; width:6px; height:6px; background:rgba(240,255,248,.6); border-radius:50%; left:calc(50% - 3px); top:calc(50% - 3px); }
.box { position:absolute; width:46%; height:15%; border:2px solid rgba(240,255,248,.44); left:27%; }
.box.top { top:3.2%; border-top:0; }
.box.bottom { bottom:3.2%; border-bottom:0; }
.goal { position:absolute; width:22%; height:2.6%; border:2px solid rgba(240,255,248,.44); left:39%; }
.goal.top { top:.6%; }
.goal.bottom { bottom:.6%; }
.pitch-player { position:absolute; width:104px; min-height:103px; transform:translate(-50%,-50%); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:8px; cursor:pointer; transition:.2s ease; background:linear-gradient(145deg,rgba(13,24,36,.94),rgba(29,47,65,.93)); box-shadow:0 12px 26px rgba(0,0,0,.34); text-align:center; z-index:2; }
.pitch-player:hover { transform:translate(-50%,-53%) scale(1.04); z-index:4; border-color:rgba(255,255,255,.52); }
.pitch-player.empty { border-style:dashed; color:#d7e5ef; background:rgba(3,19,25,.62); }
.pitch-player .ovr { position:absolute; left:8px; top:7px; font-weight:950; font-size:.83rem; }
.pitch-player .flag { position:absolute; right:8px; top:7px; font-size:.9rem; }
.pitch-player .name { font-weight:900; margin-top:24px; font-size:.79rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pitch-player .pos { color:var(--accent); font-size:.69rem; font-weight:900; margin-top:3px; }
.pitch-player .ps { font-size:.61rem; color:#d5e3ed; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pitch-player.label-wonderkid { box-shadow:0 0 0 1px rgba(98,230,168,.35),0 14px 28px rgba(0,0,0,.36),0 0 24px rgba(98,230,168,.15); }
.pitch-player.label-starter { box-shadow:0 0 0 1px rgba(103,183,255,.35),0 14px 28px rgba(0,0,0,.36),0 0 24px rgba(103,183,255,.14); }
.pitch-player.label-legend, .pitch-player.label-club-legend { box-shadow:0 0 0 1px rgba(201,132,255,.45),0 14px 28px rgba(0,0,0,.36),0 0 28px rgba(178,93,255,.19); }
.pitch-player.label-rotation { box-shadow:0 0 0 1px rgba(255,214,107,.35),0 14px 28px rgba(0,0,0,.36); }
.pitch-player.label-transfer { box-shadow:0 0 0 1px rgba(255,111,125,.4),0 14px 28px rgba(0,0,0,.36); }
.squad-side { display:grid; gap:14px; }
.mini-list { display:grid; gap:8px; }
.mini-player { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:rgba(255,255,255,.035); }

.table-wrap { overflow:auto; border-radius:16px; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:780px; background:rgba(9,19,31,.65); }
th, td { padding:12px 14px; text-align:left; border-bottom:1px solid rgba(255,255,255,.055); }
th { font-size:.72rem; color:#a9bccd; text-transform:uppercase; letter-spacing:.1em; background:rgba(255,255,255,.035); }
tbody tr { cursor:pointer; transition:.18s ease; }
tbody tr:hover { background:rgba(103,183,255,.055); }
.badge { display:inline-flex; align-items:center; gap:.35rem; border-radius:999px; padding:.32rem .58rem; font-size:.72rem; font-weight:850; border:1px solid var(--line); background:rgba(255,255,255,.055); }

.chart-card { padding:20px; min-height:360px; }
.chart-box { position:relative; height:300px; }
.growth-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr); gap:18px; }

.collection-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.collection-card { padding:16px; }
.collection-card h3 { margin:.35rem 0; }
.collection-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.empty-state { padding:44px 24px; text-align:center; border:1px dashed var(--line-strong); border-radius:18px; color:var(--muted); }

.modal-backdrop { position:fixed; inset:0; background:rgba(0,3,8,.76); backdrop-filter:blur(10px); z-index:100; display:grid; place-items:center; padding:18px; animation:fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } }
.modal { width:min(720px,100%); max-height:92vh; overflow:auto; border-radius:24px; background:#091522; border:1px solid var(--line-strong); box-shadow:0 30px 100px rgba(0,0,0,.55); }
.modal.large { width:min(1180px,100%); }
.modal-head { position:sticky; top:0; z-index:5; background:rgba(9,21,34,.94); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.modal-head h2 { margin:0; }
.modal-body { padding:20px; }
.player-editor { display:grid; grid-template-columns:310px minmax(0,1fr); gap:20px; align-items:start; }
.player-preview-wrap { position:sticky; top:86px; }
.player-card { border-radius:24px; min-height:445px; padding:24px; position:relative; overflow:hidden; background:
  radial-gradient(circle at 50% 4%, rgba(255,255,255,.16), transparent 30%),
  linear-gradient(155deg,#d7b868 0%,#8f7132 42%,#1a2332 100%); color:#0a1016; box-shadow:0 28px 55px rgba(0,0,0,.4); }
.player-card::before { content:""; position:absolute; inset:8px; border:1px solid rgba(255,255,255,.32); border-radius:19px; }
.player-card.wonderkid { background:linear-gradient(155deg,#75f0b9,#2d9975 48%,#112b2a); }
.player-card.starter { background:linear-gradient(155deg,#93d6ff,#3477ad 48%,#132638); }
.player-card.legend, .player-card.club-legend { background:linear-gradient(155deg,#d8a4ff,#8149b1 48%,#281337); }
.player-card.rotation { background:linear-gradient(155deg,#ffe48f,#c39332 48%,#322715); }
.player-card.transfer { background:linear-gradient(155deg,#ffacb5,#bd4556 48%,#35151b); }
.player-card .pc-top { display:flex; justify-content:space-between; align-items:start; position:relative; z-index:1; }
.player-card .pc-ovr { font-size:3rem; font-weight:1000; line-height:.9; letter-spacing:-.08em; }
.player-card .pc-pos { font-weight:900; }
.player-card .pc-flag { font-size:2rem; }
.player-card .pc-name { position:relative; z-index:1; margin-top:92px; text-align:center; font-size:1.5rem; font-weight:1000; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-card .pc-meta { position:relative; z-index:1; text-align:center; font-size:.78rem; font-weight:800; opacity:.8; }
.pc-stats { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin-top:22px; padding:15px 20px; border-top:1px solid rgba(0,0,0,.28); }
.pc-stat { display:flex; justify-content:space-between; font-weight:950; }
.pc-playstyles { position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:14px; }
.pc-playstyles span { border:1px solid rgba(0,0,0,.22); border-radius:999px; padding:.35rem .55rem; font-size:.7rem; font-weight:900; background:rgba(255,255,255,.22); }
.autosave { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:.78rem; margin-top:12px; }
.autosave.saving::before { content:""; width:12px; height:12px; border:2px solid rgba(255,255,255,.16); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
.autosave.saved { color:#9be8c8; }
.editor-sections { display:grid; gap:16px; }
.editor-section { border:1px solid var(--line); border-radius:17px; padding:16px; background:rgba(255,255,255,.025); }
.editor-section h3 { margin:0 0 13px; font-size:1rem; }
.playstyle-groups { display:grid; gap:14px; }
.playstyle-group h4 { margin:0 0 8px; color:#bcd0df; font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; }
.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { border:1px solid var(--line); border-radius:999px; padding:.47rem .72rem; background:rgba(255,255,255,.04); cursor:pointer; font-size:.78rem; font-weight:750; }
.chip.selected { color:#04121b; background:linear-gradient(90deg,var(--gold),#fff0ad); border-color:transparent; }
.attr-groups { display:grid; gap:10px; }
details.attr-group { border:1px solid var(--line); border-radius:13px; padding:11px 13px; background:rgba(255,255,255,.025); }
details.attr-group summary { cursor:pointer; font-weight:850; display:flex; justify-content:space-between; }
.attr-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:12px; }
.attr-row { display:grid; grid-template-columns:1fr 70px; gap:9px; align-items:center; }
.attr-row label { color:#b4c5d4; font-size:.76rem; }
.attr-row input { padding:.5rem .55rem; }
.timeline { position:relative; display:grid; gap:12px; padding-left:24px; }
.timeline::before { content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--accent-2),rgba(255,255,255,.05)); }
.timeline-item { position:relative; padding:12px 14px; border-radius:13px; background:rgba(255,255,255,.035); }
.timeline-item::before { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent); left:-22px; top:18px; box-shadow:0 0 0 4px #091522; }

.toast-stack { position:fixed; right:18px; bottom:18px; z-index:200; display:grid; gap:9px; }
.toast { max-width:360px; border-radius:13px; padding:12px 14px; background:#102238; border:1px solid var(--line-strong); box-shadow:var(--shadow); animation:slideIn .2s ease; }
.toast.error { border-color:rgba(255,111,125,.42); }
@keyframes slideIn { from { transform:translateY(10px); opacity:0; } }

.mobile-nav-toggle { display:none; }
@media (max-width: 1180px) {
  .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .squad-layout, .dashboard-grid, .growth-grid { grid-template-columns:1fr; }
  .squad-side { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .auth-card, .setup-card { grid-template-columns:1fr; }
  .auth-brand { min-height:auto; padding:34px; }
  .auth-brand h1 { font-size:3.4rem; }
  .shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; bottom:0; width:270px; transform:translateX(-105%); transition:.22s ease; box-shadow:25px 0 70px rgba(0,0,0,.5); }
  .sidebar.open { transform:translateX(0); }
  .mobile-nav-toggle { display:inline-flex; }
  .topbar { padding:12px 16px; }
  .content { padding:20px 14px; }
  .player-editor { grid-template-columns:1fr; }
  .player-preview-wrap { position:relative; top:auto; max-width:330px; margin:auto; }
}
@media (max-width: 680px) {
  .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid.two, .form-grid.three { grid-template-columns:1fr; }
  .career-picker { padding:22px 14px; }
  .picker-head, .page-head { align-items:flex-start; flex-direction:column; }
  .auth-form { padding:30px 22px; }
  .auth-brand { padding:30px 22px; }
  .squad-side { grid-template-columns:1fr; }
  .pitch-wrap { overflow:auto; }
  .pitch { width:620px; min-height:875px; }
  .topbar-right .email { display:none; }
  .season-control .select { max-width:130px; }
  .modal-backdrop { padding:6px; }
  .modal { border-radius:18px; max-height:97vh; }
  .modal-body { padding:14px; }
  .attr-grid { grid-template-columns:1fr; }
}