/* ===== 1. Tokens ===== */
:root{color-scheme:dark;--bg:#010c22;--panel:#0c1d30;--panel2:#10243b;--line:#1e344d;--muted:#9aacc4;--text:#f2f5fc;--blue:#4d8dff;--blue-light:#91b7ff;--green:#64ccac;--amber:#edbd72;--sidebar:226px;--control-border:#526b89;
 --fs-meta:12px;--fs-body:14px;--fs-section:15px;--fs-date:15px;--fs-title:16px;--fs-amount:16px;--fs-input:16px;
 --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--gutter:var(--space-4);
 --radius-xs:5px;--radius-sm:7px;--radius-md:9px;--radius-lg:12px;--radius:14px;--radius-sheet:20px;
 --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;
 --ease-out:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--ease-in-out:cubic-bezier(.4,0,.2,1)}


/* ===== 2. Base: reset, typography, auth screen ===== */
*{box-sizing:border-box}
html{scroll-padding-block:90px}
body{margin:0;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:#315d91;color:#fff}
button,input,select,textarea{font:inherit;touch-action:manipulation}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;padding:0;min-width:44px;min-height:44px;color:inherit;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.6}
a{color:inherit;text-decoration:none}
input,select,textarea{color:var(--text);background:#09192b;border:1px solid var(--control-border);border-radius:var(--radius-md);min-width:0}
input,select{height:48px;min-height:44px;padding:0 13px}
input,textarea{caret-color:var(--blue-light)}
textarea{padding:12px 13px;resize:vertical;min-height:104px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:2px solid #4d8dff75;outline-offset:1px;border-color:var(--blue)}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue-light);outline-offset:3px}
#main:focus{outline:none}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238c9fb9' stroke-width='1.7'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:35px}
option{background:#10243b}
h1,h2,h3,p{margin:0}
h1{font-size:36px;letter-spacing:-1px;line-height:1.15;font-weight:650}
h2{font-size:18px;font-weight:600;letter-spacing:-.4px}
h3{font-size:var(--fs-title);font-weight:600}
small{font-size:var(--fs-meta)}
.icon{flex-shrink:0;vertical-align:middle}
.muted{color:var(--muted)}
.blue{color:var(--blue-light)}
.green{color:var(--green)}
.amber{color:var(--amber)}
.tiny{font-size:var(--fs-meta)}
.eyebrow{font-size:var(--fs-meta);font-weight:650;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}
.full{width:100%}
.skip{color:var(--bg);position:fixed;top:-100px;left:15px;z-index:100;background:var(--blue);padding:12px}
.skip:focus{top:15px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.auth-screen{min-height:100dvh;display:grid;place-items:center;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:radial-gradient(circle at top,#102d50 0,#010c22 55%)}
.auth-card{width:min(100%,420px);padding:32px;border:1px solid #1d3857;border-radius:var(--radius);background:var(--bg);box-shadow:0 24px 70px #0008}
.auth-card .brand-image{margin-bottom:22px}
.auth-card h1{margin:7px 0 10px;font-size:28px}
.auth-card>p{color:#9db1ca;line-height:1.5}
.auth-card form{display:grid;gap:9px;margin-top:24px}
.auth-card label{margin-top:8px;color:#c7d6e9;font-size:var(--fs-meta);font-weight:600}
.auth-card input{width:100%;min-height:48px;padding:11px 13px;border:1px solid #294967;border-radius:var(--radius-sm);background:#0c2139;color:#fff;font:inherit}
.auth-card input:focus{outline:2px solid #63a4ff;outline-offset:2px}
.auth-card .btn{margin-top:14px;justify-content:center}
.btn.pwa-install,.popover-item.pwa-install{display:none}
.pwa-install-available .pwa-install{display:inline-flex}
@media(display-mode:standalone){.pwa-install-available .pwa-install{display:none}
html,body{overscroll-behavior-y:contain}
}


/* ===== 3. Layout: sidebar, topbar, main, bottom navigation ===== */
.sidebar{position:fixed;inset:0 auto 0 env(safe-area-inset-left);width:var(--sidebar);overflow-y:auto;background:#010c22;border-right:1px solid var(--line);padding:34px 20px 20px;display:flex;flex-direction:column;z-index:30}
.brand{display:block;color:var(--text)}
.sidebar .brand{align-self:center}
.brand-image{display:block;width:98px;height:164.5px;background:#010c22 url("./unidos-logo.jpeg") no-repeat -56px -21px;background-size:203px 203px}
.side-label{margin:18px 14px 14px;font-size:var(--fs-meta);font-weight:600;letter-spacing:2px;color:var(--muted)}
.side-nav{display:grid;gap:7px}
.nav-item{display:flex;align-items:center;gap:13px;text-align:left;padding:14px 15px;border-radius:var(--radius-md);color:#92a5bf;position:relative}
.nav-item .icon{width:21px;height:21px}
.nav-item.active{background:#163258;color:#9ec3ff}
.nav-item.active:before{content:'';height:18px;width:3px;background:var(--blue);border-radius:2px;position:absolute;left:-20px}
.nav-count{font-size:var(--fs-meta);margin-left:auto;color:#a9caff;background:#25508655;padding:2px 6px;border-radius:var(--radius-xs)}
.side-bottom{margin-top:auto}
.window-card{border-top:1px solid var(--line);padding:23px 9px 25px}
.window-title{display:flex;align-items:center;gap:10px;margin:10px 0 7px;font-weight:550}
.window-title .icon{color:var(--blue)}
.shell{margin-left:var(--sidebar);min-height:100dvh}
.topbar{height:calc(85px + env(safe-area-inset-top));border-bottom:1px solid var(--line);padding:env(safe-area-inset-top) 36px 0;display:flex;align-items:center;justify-content:space-between;background:#010c22}
.breadcrumb{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:var(--fs-meta);font-weight:550;letter-spacing:1.5px}
.breadcrumb .current{color:#b2c0d3}
.top-right{display:flex;align-items:center;gap:21px}
.today{font-size:var(--fs-meta);color:var(--muted)}
.bell{position:relative}
.notification-count{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border:2px solid var(--bg);border-radius:var(--radius-md);background:#ff3b4f;color:#fff;font-size:10px;font-weight:650;line-height:1}
.top-user{display:flex;align-items:center;justify-content:center;gap:10px;border-left:1px solid var(--line);padding-left:22px;text-align:left;min-width:44px;min-height:44px}
.top-user strong{display:block;font-weight:550}
.top-user small{display:block;font-size:var(--fs-meta);color:var(--muted)}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#213e62;color:#c8ddff;font-size:var(--fs-meta);flex-shrink:0;width:35px;height:35px;font-weight:550}
.avatar.owner{width:27px;height:27px;border:1px solid #41638a;background:#203753}
.avatar.small{width:26px;height:26px}
.mobile-brand{display:none}
.mobile-brand .brand{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
main{padding:34px 36px 40px;max-width:1700px;margin:auto}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}
.page-head .head-copy{min-width:0}
.head-copy p{color:var(--muted);margin-top:8px}
.head-actions{display:flex;gap:10px;align-items:center}
.content-split{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:var(--space-5);align-items:start}
.content-split>*,.scouting-layout>*,.transfer-layout>*,.needs-grid>*{min-width:0}
.bottom-nav{display:none}


/* ===== 4. Components: buttons, inputs, chips, cards, skeletons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;padding:11px 17px;min-height:44px;min-width:44px;border-radius:var(--radius-md);font-size:var(--fs-body);font-weight:550;white-space:nowrap}
.btn.primary{background:var(--blue);color:var(--bg);font-weight:650}
.btn.secondary{border-color:#2a425f;background:#10243b;color:#b6c9e3}
.btn.ghost{color:#9cbbdf;padding-left:0;padding-right:0}
.btn.danger{background:#68313b;border-color:#854452;color:#ffe2e7}
.btn.small{padding:7px 11px;font-size:var(--fs-meta);gap:7px}
.btn .icon{height:17px;width:17px}
.icon-btn{height:44px;width:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:#92a7c2}
.toolbar{display:flex;gap:var(--space-3);align-items:center;margin-bottom:18px}
.searchbox{display:flex;align-items:center;gap:10px;position:relative;flex:1;min-width:0}
.searchbox>.icon{position:absolute;left:14px;width:17px;height:17px;color:#7391b2;pointer-events:none}
.searchbox input{width:100%;height:44px;padding-left:42px;padding-right:60px;background:#0c1d30;border-color:var(--line);border-radius:var(--radius-md);font-size:var(--fs-input)}
.search-hint{position:absolute;right:13px;font-size:var(--fs-meta);border:1px solid #29405b;color:#7087a3;padding:1px 5px;border-radius:4px;pointer-events:none}
.view-toggle,.segmented{display:flex;padding:4px;border:1px solid var(--control-border);background:#0a1a2b;border-radius:var(--radius-md);gap:3px}
.view-toggle button{gap:7px;padding:0 10px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);color:var(--muted);width:auto;height:44px}
.view-toggle .active{background:#1b3553;color:#c5dcff}
.view-toggle .icon{width:16px;height:16px}
.segmented button{padding:7px 20px;min-height:44px;color:#829ab8;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;gap:var(--space-2);font-size:var(--fs-body)}
.segmented button .icon{width:15px;height:15px}
.segmented button.active{background:#214672;color:#c8deff;font-weight:650}
.chips{scroll-padding-inline:4px;display:flex;gap:7px;align-items:center;overflow:auto;scrollbar-width:none;max-width:100%;padding:5px 4px 8px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid var(--control-border);color:#8ea4bf;border-radius:var(--radius-sm);white-space:nowrap;padding:8px 13px;min-height:44px;font-size:var(--fs-body)}
.chip.active{color:#bad4ff;background:#183761;border-color:#2b5286;font-weight:650}
.chip .count{margin-left:5px;font-size:var(--fs-meta);opacity:1}
.filter-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:18px}
.filter-label{font-size:var(--fs-meta);letter-spacing:.3px;color:var(--muted);white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-xs);padding:3px 7px;background:#15352f;color:#77c7af;font-size:var(--fs-meta);font-weight:500;white-space:nowrap}
.status:before{content:'';width:4px;height:4px;background:currentColor;border-radius:50%;flex-shrink:0}
.status.amber{background:#4335248c;color:#edbd72}
.status.blue{color:#8db5ff;background:#203d638c}
.status.gray{color:#91a1b9;background:#263549}
.status.purple{color:#b6a9ef;background:#342b508c}
.status.red{color:#dc929e;background:#462631}
.empty{border:1px dashed #2a4360;border-radius:var(--radius-lg);text-align:center;padding:45px 20px;color:var(--muted);grid-column:1/-1}
.empty>.icon{width:30px;height:30px;margin-bottom:12px;color:#5e87b8}
.empty h3{color:#c9d8e9;margin-bottom:6px}
.empty p{margin-bottom:15px}
.side-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:#0b1c2e;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:19px 18px 15px}
.panel-head .icon{width:16px;height:16px;color:#6f8ba9}
.panel-body{padding:0 18px 18px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.section-title small{color:var(--muted);font-size:var(--fs-meta)}
.panel-head h2,.section-title h2{font-size:var(--fs-section)}
.skeleton{background:linear-gradient(90deg,#10243b 0,#173252 50%,#10243b 100%);background-size:200% 100%;border-radius:8px}
.skeleton-card{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-lg);padding:18px;display:grid;grid-template-columns:52px 1fr;gap:10px 14px;align-items:center}
.skeleton-card .skeleton-photo{width:52px;height:56px;grid-row:span 2;border-radius:var(--radius-lg)}
.skeleton-card .skeleton-line{height:14px}
.skeleton-card .skeleton-line.short{width:55%}
.skeleton-list{display:grid;gap:11px}
/* Shared agent selector: anchored on desktop, bottom sheet on phones. */
.agent-picker{width:300px;max-width:100%;min-width:0}
.agent-label{display:block;color:var(--muted);font-size:var(--fs-meta);margin-bottom:6px}
.agent-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:44px;padding:10px 12px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md)}
.agent-trigger span{overflow-wrap:anywhere}
.agent-trigger>.icon{flex-shrink:0;transform:rotate(90deg)}


/* ===== 5. Views ===== */
/* --- Players --- */
.players-split{grid-template-areas:"list attention" "list aside";grid-template-rows:auto 1fr;row-gap:18px}
.players-list{grid-area:list}
.attention-panel{grid-area:attention}
.players-aside{grid-area:aside}
.sort-picker{display:grid;gap:6px;width:200px;min-width:0}
.sort-picker label{color:var(--muted);font-size:var(--fs-meta)}
.sort-picker select{height:44px;background-color:var(--panel)}
.filter-row .agent-picker{margin-right:auto}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.player-card{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.player-upper{display:flex;gap:14px;align-items:center;padding:21px 20px 17px;position:relative}
.player-upper>div,.profile-hero>div{min-width:0;overflow-wrap:anywhere}
.player-avatar{height:53px;width:53px;border-radius:var(--radius-lg);background:linear-gradient(140deg,#24496e,#142c45);border:1px solid #345273;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#b9d7fc;position:relative;overflow:hidden;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:25px;letter-spacing:1px}
.player-avatar:after{content:'';position:absolute;width:80px;height:1px;background:#91c0ff24;transform:rotate(-45deg);top:35px;left:-9px}
.player-avatar.has-photo{height:auto;aspect-ratio:10/13;background:var(--panel2)}
.player-avatar.has-photo::after{display:none}
.player-avatar img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.player-name{font-size:var(--fs-title);font-weight:600;letter-spacing:-.3px;line-height:1.4;margin-bottom:4px;padding-right:12px}
.player-club{color:var(--muted)}
.player-chevron{position:absolute;right:13px;top:27px;color:#557393}
.player-chevron .icon{width:14px;height:14px}
.player-facts{display:grid;grid-template-columns:.8fr 1.5fr;padding:0 20px 17px;gap:10px}
.fact-label{font-size:var(--fs-meta);letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.fact-value{margin-top:3px;color:#b9c9dd;white-space:nowrap}
.fact-value.position{white-space:normal}
.card-status{display:flex;align-items:center;gap:7px;padding:0 20px 17px;min-height:35px}
.card-footer{border-top:1px solid #1d344c;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;padding:11px 18px;background:#0a192a65;color:#8ba1bd;font-variant-numeric:tabular-nums}
.card-urgency{display:none}
.owner-line{display:flex;align-items:center;gap:7px}
.contract{display:flex;align-items:center;gap:5px;white-space:nowrap}
.contract .icon{width:13px;height:13px}
.contract.urgent{color:var(--amber)}
.cards.list{grid-template-columns:1fr}
.cards.list .player-card{display:grid;grid-template-columns:1.3fr 1.2fr .6fr;align-items:center}
.cards.list .player-upper{padding:18px}
.cards.list .player-facts{padding:10px}
.cards.list .card-status{padding:10px;justify-self:end}
.cards.list .card-footer{grid-column:1/-1;padding:8px 18px}
.cards.list .player-chevron{display:none}
.aside{display:grid;gap:18px}
.attention{display:block;text-align:left;padding:14px 0;width:100%;border-top:1px solid var(--line)}
.attention:first-child{border-top:0;padding-top:0}
.attention-top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.attention strong{font-weight:550}
.attention p{color:#8298b2;line-height:1.7}
.attention small{font-size:var(--fs-meta);color:#8199b6}
.alert-icon{width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#44372470;color:var(--amber)}
.alert-icon .icon{width:14px;height:14px}
.alert-icon.blue{background:#203e6270;color:#94baff}
.side-team{display:flex;align-items:center;gap:10px;padding:9px 0}
.side-team strong{font-weight:500}
.side-team small{margin-left:auto;color:#778fae;font-size:var(--fs-meta)}
.side-team-bar{width:47px;height:3px;background:#1e344e;border-radius:2px;overflow:hidden;margin-left:auto}
.side-team-bar span{height:100%;background:#508bdf;display:block}
.side-team-count{font-size:var(--fs-meta);color:#b0c5df;width:15px;text-align:right}
.window-note{position:relative;overflow:hidden;border:1px solid #24426a;background:#102748;border-radius:var(--radius-lg);padding:20px}
.window-note .icon{color:#80aeff;width:25px;height:25px;margin-bottom:17px}
.window-note p{font-size:var(--fs-meta);color:#86a4cb;margin-top:4px}
.window-note h3{font-size:var(--fs-title)}

/* --- Scouting --- */
.scout-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.scouting-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--space-5);align-items:start}
.pitch-wrap{position:relative;border:1px solid #233e5e;padding:16px;background:#0a1d30;border-radius:var(--radius);overflow:hidden}
.pitch-wrap:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 76px,#4071a307 76px,#4071a307 152px);pointer-events:none}
.pitch{position:relative;height:600px}
.pitch-lines{position:absolute;inset:0;width:100%;height:100%;color:#284766;pointer-events:none}
.pitch-node{position:absolute;transform:translate(-50%,-50%);width:22%;max-width:105px;padding:9px 5px 7px;min-height:49px;background:#102940ed;border:1px solid #325275;border-radius:8px;text-align:center;z-index:1}
.pitch-node.active{background:#1a3c69;border-color:#609fff}
.node-position{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-family:'Barlow Condensed',sans-serif;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-xs);background:#0c2037;border:1px solid #34577e;font-size:var(--fs-meta);min-width:25px;padding:1px 4px;color:#8fb6e9}
.pitch-node.active .node-position{background:var(--blue);border-color:var(--blue);color:var(--bg)}
.node-name{display:block;font-family:'Barlow Condensed',sans-serif;font-size:19px;font-weight:700;line-height:1.2}
.pitch-node.empty-node{border-style:dashed;background:#0a2034a0;color:var(--muted);min-height:44px}
.pitch-caption{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #203b58;padding-top:13px;margin-top:10px;color:var(--muted);font-size:var(--fs-meta);letter-spacing:.6px}
.pitch-caption strong{color:#91b8e8;font-weight:500}
.scout-detail{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden}
.candidate-list{padding:8px 12px}
.candidate-option{width:100%;display:flex;align-items:center;gap:10px;border-radius:var(--radius-sm);text-align:left;padding:10px}
.candidate-option.active{background:#1b3a60}
.candidate-option .player-avatar{width:32px;height:34px;border-radius:var(--radius-sm);font-size:var(--fs-title)}
.candidate-option strong{display:block;font-weight:550}
.candidate-option small{font-size:var(--fs-meta);color:var(--muted)}
.candidate-option .icon{margin-left:auto;width:13px;height:13px;color:#7998bd}
.candidate-profile{padding:19px;border-top:1px solid var(--line)}
.candidate-profile h3{font-size:21px;letter-spacing:-.4px;margin-bottom:4px}
.candidate-profile form{margin-top:18px}
.candidate-profile form .btn{margin-top:10px}
.recommendation{display:inline-flex;align-items:center;gap:6px;color:#9cb9e1;font-size:var(--fs-meta)}
.rec-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}
.recommendation.rec-0{color:#49db96}
.recommendation.rec-1{color:#f8d95a}
.recommendation.rec-2{color:#ffa454}
.recommendation.rec-3{color:#ff626c}
.recommendation-options{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2);min-width:0}
.recommendation-options legend{font-size:var(--fs-body);margin-bottom:8px}
.recommendation-option{position:relative;flex:1 1 130px;min-height:44px;cursor:pointer}
.recommendation-option input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.recommendation-option span{display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:var(--fs-body)}
.recommendation-option input:checked+span{background:#204c76;border-color:#67b5ff;color:#fff}
.recommendation-option input:focus-visible+span{outline:2px solid #fff;outline-offset:3px}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:21px 0}
.details-grid a{color:var(--blue-light);text-underline-offset:3px;overflow-wrap:anywhere}
.detail-field dt{font-size:var(--fs-meta);margin-bottom:4px;color:var(--muted)}
.detail-field dd{margin:0;color:#c6d5e7;font-size:var(--fs-body);overflow-wrap:anywhere}
.note{color:#a3b6ce}
.note,.contact-note,.need-description{font-size:var(--fs-body);line-height:1.7;overflow-wrap:anywhere}
.scout-list-table{display:grid;gap:10px}
.scout-list-row{display:flex;align-items:center;gap:15px;padding:17px;background:var(--panel);border:1px solid var(--line);border-radius:10px;text-align:left;width:100%}
.scout-list-row .name-col{flex:1;min-width:0;overflow-wrap:anywhere}
.scout-list-row strong{font-weight:550;display:block}
.scout-list-row small{font-size:var(--fs-body);color:var(--muted)}
.pos-tag{font-family:'Barlow Condensed',sans-serif;color:#94b8e9;font-size:16px;letter-spacing:.4px;padding:4px 9px;border:1px solid #2d4869;border-radius:var(--radius-xs);display:inline-block;min-width:32px;text-align:center}

/* --- Costs --- */
.cost-overview{display:grid;grid-template-columns:1.1fr 1.8fr;gap:25px;align-items:center;border:1px solid #254568;background:linear-gradient(110deg,#112c4b,#0d2137);padding:28px 30px;border-radius:13px;margin-bottom:23px}
.cost-total .eyebrow{color:#8ca8c8;font-size:var(--fs-meta)}
.total-value{font-family:'Barlow Condensed',sans-serif;font-size:50px;line-height:1.25;font-weight:600;letter-spacing:.3px;margin:5px 0}
.total-value span{font-family:'DM Sans',sans-serif;font-size:20px;color:#769bca;margin-left:5px}
.total-value>span:first-child{font-family:'Barlow Condensed',sans-serif;font-size:inherit;color:inherit;margin:0}
.cost-total small{font-size:var(--fs-meta);color:#7798be}
.owner-bars{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;height:98px;align-items:end}
.owner-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.bar{width:28px;border-radius:4px 4px 0 0;background:#386ebb;min-height:2px}
.owner-bar:nth-child(1) .bar{background:#76a9f8}
.owner-bar:nth-child(2) .bar{background:#548de0}
.owner-bar:nth-child(3) .bar{background:#366cba}
.owner-bar:nth-child(4) .bar{background:#2c5797}
.owner-bar:nth-child(5) .bar{background:#244a80}
.owner-bar small{font-size:var(--fs-meta);color:#7b9abd}
.owner-bar strong{font-size:var(--fs-meta);color:#afc9eb;font-weight:500}
.cost-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:18px}
.expense-groups{display:grid;gap:var(--space-4)}
.expense-group{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--panel)}
.expense-group-head{display:flex;align-items:center;gap:11px;padding:16px 20px;background:#10243a80}
.expense-group-head strong{font-weight:550}
.expense-group-head small{font-size:var(--fs-meta);color:var(--muted)}
.expense-group-head .expense-month-total{margin-left:auto}
.expense-group-amount{margin-left:auto;text-align:right}
.expense-group-amount strong{display:block}
.expense-group-amount small{font-size:var(--fs-meta)}
.expense-day h3{display:flex;justify-content:space-between;gap:var(--space-3);margin:0;padding:12px 16px;font-size:var(--fs-section);background:#10243a}
.expense-day h3 span{white-space:nowrap}
.expense-row-actions{display:flex;align-items:center;gap:var(--space-1)}
.expense-row-actions>.expense-row{flex:1;min-width:0}
.expense-row-actions>.icon-btn{flex-shrink:0;margin-right:8px}
.expense-row{width:100%;display:grid;grid-template-columns:1fr 1.4fr .65fr .6fr 15px;gap:14px;align-items:center;text-align:left;padding:17px 20px;border-top:1px solid var(--line)}
.expense-row .description{color:#8ba4c2}
.expense-row .date{font-size:var(--fs-meta);color:#6c88a9}
.expense-row .amount{white-space:nowrap}
.expense-row>.icon{width:13px;height:13px;color:#7495be}
.expense-row small{display:block;font-size:var(--fs-meta);color:var(--muted)}
.settlement-box{border:1px solid #2c4e77;background:#132e4d;border-radius:10px;padding:20px;margin:17px 0}
.settlement-box strong{font-family:'Barlow Condensed',sans-serif;font-size:33px;font-weight:550;display:block;margin:4px 0}
.settlement-box small{font-size:var(--fs-meta);color:#8fb0d7}
.total-value,.expense-group-amount,.amount,.salary{font-variant-numeric:tabular-nums}

/* --- Transfers --- */
.transfer-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:25px}
.transfer-budget{color:#a9c2df;margin-top:4px}
.timeline{padding-left:25px;position:relative}
.timeline:before{position:absolute;content:'';width:1px;background:#26486e;left:6px;top:20px;bottom:20px}
.timeline-item{position:relative;margin-bottom:18px}
.timeline-item:before{content:'';position:absolute;width:9px;height:9px;background:#4e8fff;border:4px solid #16335a;border-radius:50%;left:-27px;top:25px;box-sizing:content-box}
.contact-card{border:1px solid var(--line);border-left:4px solid var(--transfer-status-color);background:var(--panel);border-radius:var(--radius-lg);padding:20px}
.status-offered{--transfer-status-color:#7fbfff}
.status-negotiating{--transfer-status-color:#f0bf66}
.status-finalizing{--transfer-status-color:#73d9ad}
.status-not_interested{--transfer-status-color:#e68f9e}
.contact-top{flex-wrap:wrap;display:flex;gap:var(--space-3);align-items:center;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}
.club-mark{display:flex;align-items:center;justify-content:center;width:39px;height:44px;background:#1a3553;border:1px solid #3c5c7e;color:#cee2ff;clip-path:polygon(50% 0%,95% 17%,95% 72%,50% 100%,5% 72%,5% 17%);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:20px;flex-shrink:0}
.club-mark.red{background:#59303b;color:#f7c5ce}
.club-mark.gold{background:#4a422c;color:#f7dfa4}
.club-mark.green{background:#234a41;color:#b7e7ce}
.contact-top h3{font-size:var(--fs-section)}
.contact-top small{color:var(--muted)}
.contact-top time{white-space:nowrap;color:var(--muted);margin-left:auto;align-self:flex-start}
.contact-meta{flex-wrap:wrap;display:flex;align-items:center;gap:9px;color:#a4bad6}
.contact-meta .on-player{margin-left:auto;color:var(--muted)}
.contact-note{color:#879fbc;margin:13px 0 16px}
.contact-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.contact-status{height:32px;min-height:44px;max-width:100%;padding-left:10px;background-color:#102740;border-radius:24px;border:1px solid var(--transfer-status-color)}
.status-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);width:100%}
.status-options .contact-status{width:100%;white-space:normal;line-height:1.25;padding:8px}
.contact-person{overflow-wrap:anywhere;color:#879db7;display:flex;align-items:center;gap:7px}
.contact-person .icon{height:13px;width:13px;color:#6185af}
.contact-person small{display:block;margin-top:var(--space-3)}
.contact-actions{display:flex;gap:5px}
.contact-actions .icon-btn{border:1px solid #284562;border-radius:6px}
.contact-actions .icon{height:14px;width:14px}
.mini-metric{padding:16px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.mini-metric:last-child{border:0;padding-bottom:0}
.mini-metric span{color:#8ca6c4}
.mini-metric strong{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:550}
.transfer-player{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.transfer-player:last-child{border:0}
.transfer-player strong{display:block;font-weight:550}
.transfer-player small{font-size:var(--fs-meta);color:var(--muted)}
.transfer-player>.icon{margin-left:auto;width:14px;height:14px;color:var(--muted)}

/* --- Needs --- */
.needs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.need-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);padding:21px}
.need-card .eyebrow,.profile-block .eyebrow{display:block;font-size:var(--fs-meta)}
.need-club{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;padding:0}
.need-club h3{font-size:var(--fs-title)}
.need-club small{color:var(--muted)}
.need-club>.icon{margin-left:auto;width:16px;height:16px;color:#5d81ab}
.need-profile-tabs{display:flex;gap:6px;margin:20px 0 14px}
.need-profile-tabs button{padding:4px 11px;min-height:44px;border:1px solid #2a4668;border-radius:var(--radius-xs);font-family:'Barlow Condensed',sans-serif;font-size:var(--fs-body);color:#7897bd}
.need-profile-tabs button{background:#dce9ff;color:#0b2a55;border-color:#dce9ff;font-size:20px;font-weight:800;letter-spacing:.6px}
.need-profile-tabs button.active{background:#3d8bff;color:#fff;border-color:#9cc3ff;box-shadow:0 0 0 2px #0c1d30,0 0 0 4px #3d8bff}
.need-card .pos-tag,.profile-block .pos-tag{background:#3d8bff;border-color:#9cc3ff;color:#fff;font-size:20px;font-weight:800}
.youth-tag{display:inline-block;background:var(--green);color:#06231a;font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;letter-spacing:.4px;padding:1px 7px;border-radius:var(--radius-xs);line-height:1.3;vertical-align:middle}
.need-profile-tabs button .youth-tag{margin-left:6px}
.field.checkbox-field{justify-content:flex-end}
.field.checkbox-field label{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--text);cursor:pointer}
.field.checkbox-field input{appearance:none;width:44px;height:44px;flex:none;margin:0;border:2px solid var(--control-border);border-radius:var(--radius-xs);background:var(--panel2);display:grid;place-items:center;cursor:pointer}
.field.checkbox-field input:checked{background:var(--green);border-color:var(--green)}
.field.checkbox-field input:checked::before{content:'';width:11px;height:20px;border:solid #06231a;border-width:0 3px 3px 0;transform:translateY(-2px) rotate(45deg)}
.field.checkbox-field input:focus-visible{outline:2px solid var(--blue-light);outline-offset:2px}
.window-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:8px}
.window-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel2)}
.window-row.active{border-color:#2f6a57}
.window-row small{display:block;color:var(--muted);margin-top:2px}
.salary{font-size:19px;font-weight:600;letter-spacing:-.4px;margin:5px 0 2px}
.salary small{font-weight:400;color:#86a5c9;font-size:var(--fs-meta);letter-spacing:0}
.need-description{color:#8aa2bf;min-height:40px;margin-top:13px}
.need-footer{flex-wrap:wrap;border-top:1px solid var(--line);padding-top:14px;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);color:var(--muted)}
.need-footer .owner-line{color:#8aa8cb}
.window-select{height:42px;background-color:#10243a;border-color:var(--control-border);font-size:var(--fs-body)}
.country-tabs{padding:5px 4px 8px;display:flex;gap:var(--space-2);overflow:auto;scrollbar-width:none}
.country-tabs .chip{display:flex;gap:7px;align-items:center}
.needs-controls{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.flag{font-size:13px}


/* ===== 6. Overlays: drawers, sheets, forms, popover, toasts, dialogs ===== */
.overlay{position:fixed;inset:0;top:var(--drawer-viewport-top);bottom:auto;height:var(--drawer-viewport-height);background:#020915a8;z-index:60;display:flex;justify-content:flex-end}
.drawer{background:#0a192b;border-left:1px solid #29415f;width:550px;max-width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));margin-right:env(safe-area-inset-right);height:100%;max-height:100%;display:flex;flex-direction:column;box-shadow:-20px 0 80px #0005}
.drawer.wide{width:650px}
/* Drawer header: close on the right for desktop, back arrow on the left for phones. */
.drawer-header{display:flex;align-items:center;justify-content:flex-start;gap:15px;padding:max(20px,env(safe-area-inset-top)) 28px 25px;border-bottom:1px solid var(--line);flex-shrink:0}
.drawer-header h2{font-size:19px;letter-spacing:-.5px}
.drawer-header small{font-size:var(--fs-meta);color:var(--muted);display:block;margin-bottom:4px}
.drawer-title{min-width:0;flex:1}
.drawer-close{order:2;flex-shrink:0;width:44px;height:44px}
.drawer-close .icon-back{display:none}
.drawer-scroll{overflow-y:auto;overscroll-behavior:contain;padding:25px 28px;flex:1;min-height:0;scroll-padding-block:20px;scrollbar-width:thin;scrollbar-color:#28486e transparent}
.drawer-footer{padding:18px 28px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;gap:10px;background:#0d2035;flex-shrink:0}
.drawer-footer .btn{min-height:45px}
.drawer form{display:contents}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{color:#a4b9d3;font-size:var(--fs-body);font-weight:500}
.field label b{color:#6494cd;font-size:var(--fs-meta);font-weight:400}
.field input,.field select,.field textarea{width:100%;font-size:var(--fs-input)}
.field-hint{font-size:var(--fs-meta);color:var(--muted)}
.form-section{margin:26px 0 16px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:var(--space-3)}
.form-section:after{content:'';height:1px;background:var(--line);flex:1}
.form-section:first-child{margin-top:0}
.drawer-scroll>input[type="hidden"]+.form-section{margin-top:0}
.form-accordion{border-bottom:1px solid var(--line);padding-block:8px}
.form-accordion>summary{min-height:44px;display:list-item;align-content:center;cursor:pointer;font-weight:700;font-size:var(--fs-section);padding:10px 0}
.form-accordion>.form-grid{padding-block:12px}
.form-error{padding:12px;color:#ffc0cb;background:#422a36;border-radius:var(--radius-sm);font-size:var(--fs-meta);margin-bottom:16px}
.profile-hero{display:flex;gap:17px;align-items:center;margin-bottom:23px}
.profile-hero .player-avatar{width:72px;height:76px;font-size:36px;border-radius:var(--radius)}
.profile-hero .player-avatar.has-photo{width:88px;height:auto}
.profile-hero h2{font-size:25px;letter-spacing:-.8px;margin:3px 0}
.profile-hero p{color:var(--muted);margin-bottom:9px}
.quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:-6px 0 22px}
.quick-actions .btn{flex-direction:column;gap:5px;padding:10px 4px;min-height:64px;white-space:normal;text-align:center;line-height:1.2}
.quick-actions .btn .icon{width:20px;height:20px}
.quick-actions .btn:disabled{opacity:.45}
.profile-tabs{display:flex;gap:var(--space-3);padding-top:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow:auto;scrollbar-width:none}
.profile-tabs button{color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;padding:8px 4px 12px;font-size:var(--fs-body)}
.profile-tabs button.active{color:#a3c5ff;border-bottom-color:var(--blue)}
.contract-box{background:#0f253f;border:1px solid #294361;border-radius:var(--radius-md);padding:17px;margin-bottom:12px}
.contract-box .label{font-size:var(--fs-meta);color:#799bc4;display:flex;align-items:center;gap:7px;margin-bottom:7px}
.contract-box .label .icon{width:15px;height:15px}
.contract-box strong{letter-spacing:-.2px}
.contract-box p{color:var(--muted);margin-top:4px}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.profile-actions .btn{white-space:normal}
.activity-note{padding:16px 0;border-bottom:1px solid var(--line)}
.activity-note p{color:#92abca;margin:7px 0;line-height:1.8}
.activity-note small{font-size:var(--fs-meta);color:var(--muted)}
.profile-block{border:1px solid var(--line);border-radius:var(--radius-md);padding:16px;margin-bottom:14px}
.profile-block h3{font-size:13px;margin-bottom:10px}
.profile-block .salary{font-size:20px}
.profile-block p{font-size:var(--fs-meta);color:#96adca;line-height:1.8;margin:10px 0}
.repeat-profile{border:1px solid #25415f;border-radius:10px;padding:17px;margin-bottom:16px;background:#0d2138}
.repeat-profile-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:var(--fs-meta);color:#8eabd0}
.repeat-profile .form-grid{gap:14px}
.contact-info{display:flex;align-items:center;justify-content:space-between;gap:15px;background:#10263e;border:1px solid #294360;border-radius:8px;padding:15px;margin:15px 0}
.contact-info small{color:var(--muted);font-size:var(--fs-meta)}
.contact-info p{margin-top:5px}
.contact-info .icon-btn{flex-shrink:0}
/* --- Player portraits and Transfermarkt --- */
.player-photo-field{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
.player-photo-field .player-avatar{width:96px;height:auto}
.photo-empty{color:var(--muted)}
.transfermarkt-profile{grid-column:1/-1;min-width:0}
.club-options{display:flex;flex-direction:column;max-height:264px;overflow-y:auto;margin-top:var(--space-1);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel2)}
.club-option{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:44px;padding:8px 12px;text-align:left;overflow-wrap:anywhere}
.club-option img{flex-shrink:0;object-fit:contain}
.club-option small{margin-left:auto;flex-shrink:0;font-size:var(--fs-meta);color:var(--muted)}
.club-option[aria-selected="true"],.club-option:hover{background:#132b45}
.transfermarkt-lookup{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-2)}
.transfermarkt-lookup>.field{flex:1;min-width:0}
.transfermarkt-lookup>button{flex-shrink:0;width:100%;min-height:44px}
.transfermarkt-feedback:has([data-transfermarkt-status]:empty){display:none}
.transfermarkt-results{display:flex;flex-direction:column;gap:var(--space-2)}
.transfermarkt-result{width:100%;display:flex;gap:var(--space-3);white-space:normal;text-align:left;justify-content:flex-start;min-height:64px}
.transfermarkt-result img{flex-shrink:0;object-fit:contain;background:#10243a;border-radius:4px}
.transfermarkt-result span{overflow-wrap:anywhere}
.transfermarkt-preview{width:96px;height:auto;aspect-ratio:10/13;object-fit:contain;background:var(--panel2);border-radius:var(--radius-lg)}
[data-transfermarkt-preview]{color:var(--muted);font-size:13px}
.transfermarkt-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--fs-body);font-weight:600}
.details-grid .transfermarkt-link{color:var(--blue-light);text-decoration:none}
.transfermarkt-empty{color:var(--muted)}
/* --- Popover, sheets content, filters --- */
.popover{max-height:calc(100dvh - 160px);overflow-y:auto;overscroll-behavior:contain;position:fixed;z-index:65;right:max(36px,env(safe-area-inset-right));top:calc(73px + env(safe-area-inset-top));width:330px;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 28px);border:1px solid #2a4665;background:#0e2239;border-radius:var(--radius-lg);padding:8px;box-shadow:0 20px 70px #0008}
.popover-head{padding:12px 10px 16px;display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between;align-items:center;font-weight:550}
.popover-item{width:100%;display:flex;align-items:flex-start;gap:11px;padding:14px 10px;border-radius:var(--radius-sm);text-align:left}
.popover-item.static{cursor:default}
.popover-item.unread-item{background:#132d49}
.popover-item .icon{color:#82acdf;width:17px;height:17px}
.popover-item strong{display:block;font-weight:500}
.popover-item small{font-size:var(--fs-meta);color:var(--muted);display:block;margin-top:4px}
.popover-divider{height:1px;background:var(--line);margin:7px}
.popover-muted{padding:9px 10px;color:var(--muted)}
.popover-error{margin:4px 10px 8px;padding:10px;border-radius:var(--radius-sm);background:#422a36;color:#ffc0cb;font-size:var(--fs-meta);line-height:1.5}
.filters-button,.active-filters,.popover-backdrop{display:none}
.filter-sheet-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:24px}
.sheet-list{display:grid;gap:6px}
.sheet-list .candidate-option{min-height:56px;background:#0f2640}
.sheet-list .candidate-option .player-avatar{width:36px;height:40px;font-size:17px}
.sheet-list .recommendation{margin-left:auto;font-size:13px}
.sheet-list .candidate-option>.icon{margin-left:6px}
.pull-indicator{position:fixed;left:50%;top:calc(-44px + env(safe-area-inset-top));z-index:45;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#10243b;border:1px solid var(--line);color:var(--muted);transform:translate(-50%,0);pointer-events:none}
.pull-indicator.ready{color:var(--blue-light)}
.pull-indicator .icon{width:20px;height:20px}
.agent-dialog{position:fixed;inset:var(--agent-top) auto auto var(--agent-left);margin:0;width:340px;max-width:calc(100vw - 24px);max-height:min(480px,var(--agent-space));padding:16px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:auto;overscroll-behavior:contain}
.agent-dialog::backdrop{background:transparent}
.agent-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:12px}
.agent-dialog-head h2{font-size:var(--fs-title)}
.agent-search{width:100%;min-height:44px;margin-bottom:10px}
.agent-options{display:grid;gap:var(--space-1)}
.agent-option{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 12px;text-align:left;border-radius:var(--radius-md);overflow-wrap:anywhere}
.agent-option>span:first-child{flex:1;min-width:0}
.agent-option .icon{flex-shrink:0}
.agent-option .count{color:var(--muted);font-variant-numeric:tabular-nums}
.agent-option[aria-pressed="true"]{background:#183761;color:#bad4ff}
.agent-option[hidden],.agent-empty[hidden]{display:none}
.agent-empty{padding:16px 0;color:var(--muted)}
body:has(.agent-dialog[open]){overflow:hidden}
/* --- Toasts and dialogs --- */
.toast{display:flex;align-items:center;gap:11px;position:fixed;bottom:28px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);padding:14px 18px;background:#173c38;color:#c8f0e2;border:1px solid #2f6c5e;border-radius:10px;box-shadow:0 10px 40px #0005;z-index:90;white-space:nowrap}
.toast .icon{width:16px;height:16px;color:#8ce4c6}
.toast button{font-size:var(--fs-meta);font-weight:600;text-decoration:underline;color:#a5e5d3;margin-left:8px}
.offline-banner{position:fixed;z-index:45;top:12px;left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 16px;background:#3d2f0e;color:#ffe2a3;border:1px solid #7a5d1c;border-radius:var(--radius-md);font-size:var(--fs-meta);font-weight:600;text-align:center;box-shadow:0 10px 30px #0008}
.more-menu{position:relative;display:inline-flex}
.more-menu>summary{list-style:none;cursor:pointer}
.more-menu>summary::-webkit-details-marker{display:none}
.more-menu-list{position:absolute;z-index:20;right:0;bottom:calc(100% + 6px);width:max-content;min-width:200px;max-width:min(320px,calc(100vw - 2*var(--gutter)));padding:6px;background:#153654;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:0 12px 32px #020915a8}
.more-menu-item{width:100%;min-height:44px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);text-align:left;color:#ffc0cb;overflow-wrap:anywhere}
.more-menu-item:hover{background:#183451}
.archive-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.archive-row>span:not(.avatar){flex:1;min-width:0}
.archive-row strong{display:block;font-weight:500;overflow-wrap:anywhere}
.archive-row small{display:block;margin-top:4px;font-size:var(--fs-meta);color:var(--muted);overflow-wrap:anywhere}
.deletion-root:empty{display:none}
.deletion-root{position:fixed;z-index:90;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));margin-inline:auto;max-width:620px;padding:16px;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;background:#153654;border:1px solid #7fbfff;border-radius:var(--radius-lg);box-shadow:0 8px 32px #0008;font-size:var(--fs-body)}
.deletion-root>span{flex:1 1 240px}
.dialog-overlay{align-items:center;justify-content:center}
.dialog{background:#10243b;border:1px solid #36516f;border-radius:var(--radius);max-width:400px;margin:20px;padding:26px}
.dialog h2{margin-bottom:12px}
.dialog p{color:var(--muted);line-height:1.8;margin-bottom:23px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
.install-dialog{width:min(480px,calc(100vw - 32px));max-width:480px;max-height:calc(100dvh - 32px);margin:auto;overflow:auto}
.install-dialog p{margin-top:16px;line-height:1.65}
.install-dialog::backdrop{background:#0009}
.discard-dialog{margin:auto;width:calc(100% - 32px);max-width:460px;color:var(--text)}
.discard-dialog::backdrop{background:#020915bf}
.discard-dialog .dialog-actions{flex-wrap:wrap}
.discard-dialog .btn{white-space:normal;flex:1}

/* Readability: content text >= 14px, contract dates and amounts 15-16px bold; 12px stays for secondary metadata. */
.player-club,.fact-value,.card-footer,.owner-line,.attention p,.attention strong,.side-team strong,.mini-metric span,.transfer-player strong,.candidate-option strong,.scout-list-row strong,.contact-meta,.contact-meta .on-player,.contact-person,.contact-person small,.contact-top small,.need-club small,.need-footer,.expense-row,.expense-row .description,.expense-group-head strong,.popover-item strong,.popover-muted,.popover-head,.popover-head button,.empty p,.empty h3,.head-copy p,.profile-hero p,.contract-box p,.activity-note h3,.activity-note p,.dialog p,.toast,.top-user strong,.window-title,.transfer-budget,.contact-info p,.photo-empty{font-size:var(--fs-body)}
.contract,.contact-top time,.expense-row .date>span:first-child,.contract-box strong{font-size:var(--fs-date);font-weight:650;font-variant-numeric:tabular-nums}
.expense-row .amount,.expense-group-amount strong{font-size:var(--fs-amount);font-weight:650;text-align:right}


/* ===== 7. Interaction states ===== */
/* Hover only for real pointers; touch gets :active feedback instead of sticky hover. */
@media(hover:hover){.nav-item:hover{background:#10253c;color:white}
.icon-btn:hover{background:#18314c;color:white}
.btn:hover{transform:translateY(-1px)}
.btn.primary:hover{background:#629aff}
.btn.secondary:hover{background:#17304d}
.chip:hover{background:#142c46;color:white}
.player-card:hover{transform:translateY(-3px);border-color:#42648c;background:#0f243b}
.pitch-node:hover{background:#193957}
/* Sheet candidates keep their own background on hover, as before the move into this section. */
.candidate-option:not(.sheet-list *):hover{background:#15314f}
.expense-row:hover{background:#132b45}
.popover-item:hover{background:#183451}
.popover-item.unread-item:hover{background:#193a5e}
}
.agent-option:hover,.agent-trigger:hover{background:#1b3553}
.btn:active,.chip:active,.icon-btn:active,.nav-item:active,.bottom-nav button:active{transform:scale(.97)}
.player-card:active,.expense-row:active,.scout-list-row:active,.popover-item:active,.attention:active,.transfer-player:active,.candidate-option:active{background:#132b45}


/* ===== 8. Responsive breakpoints, widest first ===== */
@media(min-width:1650px){.content-split{grid-template-columns:minmax(0,1fr) 290px}
.cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.list{grid-template-columns:1fr}
.pitch{height:680px}
.scouting-layout{grid-template-columns:minmax(0,1fr) 350px}
}

@media(max-width:1200px){:root{--sidebar:202px}
.sidebar{padding-left:16px;padding-right:16px}
.nav-item.active:before{left:-16px}
.topbar{padding:env(safe-area-inset-top) 25px 0}
main{padding:28px 25px 35px}
.content-split{grid-template-columns:minmax(0,1fr) 230px;gap:18px}
.player-upper{padding:17px 15px 14px;gap:10px}
.player-facts{padding:0 15px 15px;gap:7px}
.player-avatar{width:43px;height:46px;font-size:22px}
.card-status{padding-left:15px}
.card-footer{padding:10px 13px}
.scouting-layout{grid-template-columns:minmax(0,1fr) 270px;gap:17px}
.pitch{height:565px}
.transfer-layout{grid-template-columns:minmax(0,1fr) 230px;gap:18px}
.head-actions .btn{padding-left:13px;padding-right:13px}
.expense-row{grid-template-columns:1.1fr 1.2fr .7fr .6fr 12px;gap:10px}
}

@media(max-width:1100px){.cards.list .player-card{grid-template-columns:1fr}
.cards.list .card-status{justify-self:start;padding:0 18px 14px}
.cards.list .player-facts{padding:0 18px 14px}
.cards.list .card-footer{grid-column:1}
}

@media(max-width:1050px){.content-split{grid-template-columns:1fr}
.players-split{grid-template-areas:"attention" "list" "aside";grid-template-rows:auto}
/* Above the list the attention panel becomes a swipeable strip of alert cards. */
.attention-panel{border:0;background:none;overflow:visible}
.attention-panel:has(.panel-body:empty){display:none}
.attention-panel .panel-head{padding:0 0 10px}
.attention-panel .panel-body{display:flex;gap:10px;padding:0 0 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.attention-panel .attention,.attention-panel .attention:first-child{flex:0 0 min(260px,80%);scroll-snap-align:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-md);background:#0b1c2e}
.attention-panel .attention-top{margin-bottom:4px}
.attention-panel .attention p{line-height:1.4}
.attention-panel .attention small{display:none}
.scouting-layout{grid-template-columns:minmax(0,1fr) 250px}
.pitch-wrap{padding:10px}
.pitch{height:540px}
.scout-toolbar{flex-wrap:wrap}
.transfer-layout{grid-template-columns:1fr}
.transfer-aside{display:none}
.cost-overview{grid-template-columns:1fr 1fr}
.needs-grid{gap:14px}
.need-card{padding:18px}
.needs-controls{flex-wrap:wrap}
.need-club h3{font-size:var(--fs-body)}
}

@media(max-width:800px){:root{--sidebar:0px}
.sidebar{display:none}
.shell{margin:0}
.topbar{height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 22px 0;position:sticky;top:0;z-index:30;background:#010c22;backdrop-filter:blur(15px)}
.breadcrumb{display:none}
.mobile-brand{display:block}
.brand-mobile-image{display:block;width:auto;height:40px;flex:none}
.top-right{gap:10px}
.today{display:none}
.top-user{padding:0;border:0}
.top-user .user-text,.top-user>.icon{display:none}
.top-user .avatar{width:31px;height:31px}
main{padding:25px 22px 108px}
.bottom-nav{position:fixed;bottom:0;inset-inline:0;display:grid;grid-template-columns:repeat(5,1fr);padding:11px max(7px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));z-index:40;background:#010c22;border-top:1px solid #20364f;backdrop-filter:blur(20px)}
.bottom-nav button{color:#728aaa;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:var(--fs-meta);position:relative;padding:3px 0;min-height:48px}
.bottom-nav button .icon{height:21px;width:21px}
.bottom-nav button.active{color:#76a8ff}
.bottom-nav button.active:before{content:'';position:absolute;top:-11px;height:2px;width:25px;background:var(--blue)}
.nav-badge{position:absolute;top:0;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--amber);color:#1d1404;font-size:var(--fs-meta);font-weight:700;line-height:18px;text-align:center}
.toast{left:50%;bottom:96px;max-width:calc(100vw - 30px);white-space:normal;min-width:220px;justify-content:center}
.offline-banner{left:50%;top:calc(64px + env(safe-area-inset-top));width:calc(100vw - 32px)}
.page-head{margin-bottom:23px}
h1{font-size:32px;letter-spacing:-.8px}
.head-copy p{margin-top:7px}
.scouting-layout{grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)}
.pitch{height:565px}
.expense-row{grid-template-columns:1fr 1.4fr .7fr .6fr 12px}
.needs-controls{gap:14px}
/* Bottom sheets: forms and the account and notification popovers slide up from the bottom edge. */
.overlay:has(.drawer.sheet){align-items:flex-end}
.drawer.sheet{width:100%;height:auto;max-height:calc(100% - env(safe-area-inset-top) - 16px);margin:0;border-left:0;border-top:1px solid #29415f;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0}
.drawer.sheet::before,.popover::before{content:'';display:block;flex-shrink:0;width:40px;height:5px;margin:8px auto 0;border-radius:3px;background:#3b5676}
.drawer.sheet .drawer-header{padding-top:10px;touch-action:none}
.popover-backdrop{display:block;position:fixed;inset:0;z-index:64;background:#020915a8}
.popover{left:0;right:0;top:auto;bottom:0;width:100%;max-width:none;max-height:85dvh;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;border-width:1px 0 0;padding:4px max(8px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
.popover-item{min-height:56px;align-items:center}
}

@media(max-width:700px){.transfer-filters{flex-wrap:wrap}
.transfer-filters .searchbox{flex-basis:100%}
.transfer-filters .window-select{flex:1;max-width:none}
}

@media(max-width:600px){
.topbar{padding:env(safe-area-inset-top) 18px 0}
h1{font-size:24px;letter-spacing:-.4px}
main{padding:24px var(--gutter) calc(170px + env(safe-area-inset-bottom))}
.page-head{align-items:stretch;flex-direction:column;gap:var(--space-1);margin-bottom:16px}
.head-copy p{margin-top:2px}
.head-actions{gap:7px;width:100%;flex-wrap:wrap}
.head-actions .btn.primary{min-height:46px;padding:11px 16px;border-radius:var(--radius-md);width:100%}
.head-actions .btn.primary .icon{width:21px;height:21px}
.head-actions [data-action="settle-costs"]{min-height:44px;width:100%}
/* The page's add action becomes a floating button above the bottom navigation. */
.head-actions .btn.primary[data-action^="add-"]{position:fixed;z-index:35;right:max(16px,env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));width:auto;min-height:56px;padding:0 20px 0 16px;border-radius:28px;box-shadow:0 10px 28px #0009}
.toast{bottom:calc(152px + env(safe-area-inset-bottom))}
.toolbar{gap:var(--space-2);margin-bottom:14px;flex-wrap:wrap}
.toolbar .searchbox{flex-basis:100%}
.searchbox input{height:48px;padding-right:14px}
.search-hint{display:none}
.view-toggle{padding:3px}
/* Players toolbar: search with a compact icon view switch beside it. */
.toolbar:has(.view-toggle){flex-wrap:nowrap}
.toolbar:has(.view-toggle) .searchbox{flex-basis:auto}
.toolbar .view-toggle{width:auto;flex-shrink:0}
.toolbar .view-toggle button{flex:none;width:44px;padding:0}
.view-toggle button span{display:none}
.filter-row{margin-bottom:14px;gap:var(--space-2)}
.filter-label{display:none}
.filter-row .agent-picker,.filter-row .sort-picker{flex:1;width:auto}
.chips{gap:6px}
.chip{border-radius:6px;padding:8px 12px}
.chips,.country-tabs{scrollbar-width:thin;scrollbar-color:#526b89 transparent}
.chips::-webkit-scrollbar{display:block;height:3px}
/* Fade the trailing edge of horizontally scrolled filters; padding keeps the last chip unfaded at scroll end. */
.chips,.country-tabs{mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);padding-right:28px}
.filters-button{display:inline-flex;flex-shrink:0}
.transfer-filters,.needs-filters{flex-wrap:nowrap}
.transfer-filters .searchbox,.needs-filters .searchbox{flex-basis:auto}
.transfer-filters .window-select,.needs-filters .window-select,.transfer-filters label.sr-only+select{display:none}
.inline-filters{display:none}
.active-filters{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:-4px 0 14px}
.active-filters .chip{display:inline-flex;align-items:center;gap:6px}
.active-filters .chip .icon{width:14px;height:14px}
.agent-picker{width:100%}
.agent-dialog{inset:auto 0 0;margin:0;width:100%;max-width:100%;max-height:75dvh;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0}
.agent-dialog::backdrop{background:#0008}
.cards{grid-template-columns:1fr;gap:11px}
.player-upper{padding:17px 17px 13px;gap:13px}
.player-avatar{width:49px;height:51px;font-size:24px}
.player-chevron{right:13px;top:30px}
.player-facts{padding:0 17px 13px}
.player-facts,.cards.list .player-facts{grid-template-columns:.8fr 1.4fr}
.card-status{position:static;min-height:0;padding:0 17px 14px}
.card-footer{padding:10px 16px}
.status{padding:4px 6px}
.cards.list .player-club{overflow-wrap:anywhere}
.cards.list .card-footer{padding:8px 16px}
/* Compact list card: photo, name, club, status and one urgency line. */
.cards.list .player-card{display:grid;grid-template-columns:1fr;padding-bottom:12px}
.cards.list .player-upper{padding:14px 16px 8px}
.cards.list .player-facts,.cards.list .card-footer{display:none}
.cards.list .card-status{padding:0 16px}
.cards.list .card-urgency{display:flex;align-items:center;gap:6px;padding:6px 16px 0;color:var(--amber);font-size:var(--fs-body);font-weight:600}
.cards.list .card-urgency .icon{width:15px;height:15px}
.cards.list .player-chevron{display:block;top:24px}
.scout-toolbar{margin-bottom:19px;gap:13px}
.scout-toolbar .segmented{width:100%}
.scout-toolbar .segmented button{flex:1;padding:8px}
.scouting-layout{grid-template-columns:1fr;gap:18px}
.scouting-layout .scout-detail{display:none}
.pitch-wrap{padding:10px}
.pitch{height:490px}
.pitch-node{padding:9px 4px 6px;min-height:45px}
.node-position{min-width:23px;top:-11px}
.pitch-caption{gap:var(--space-3);letter-spacing:0}
.pitch-caption span{text-align:right}
.scout-detail .panel-head{padding:17px 17px 10px}
.candidate-list{display:flex;overflow:auto;gap:7px;padding:7px 13px 14px}
.candidate-option{min-width:148px;width:auto;padding:9px;background:#102a45}
.candidate-option .icon{display:none}
.candidate-profile{padding:20px}
.candidate-profile h3{font-size:23px}
.candidate-profile .details-grid{grid-template-columns:1fr 1fr;gap:15px}
.candidate-profile .detail-field dd{font-size:var(--fs-meta)}
.scout-list-row{flex-wrap:wrap;gap:10px;padding:14px 12px}
.scout-list-row .name-col{flex-basis:calc(100% - 80px)}
.scout-list-row>.icon{width:12px;height:12px}
.cost-overview{grid-template-columns:1fr;padding:22px 18px;gap:20px;margin-bottom:19px}
.cost-total .eyebrow{letter-spacing:1.1px}
.total-value{font-size:43px}
.total-value span{font-size:var(--fs-title)}
.owner-bars{height:115px;gap:var(--space-2)}
.bar{width:18px}
.cost-controls{align-items:center;flex-wrap:wrap;margin-bottom:14px;gap:10px}
.cost-controls .segmented{flex:1;flex-basis:100%}
.cost-controls .segmented button{flex:1;padding:7px 8px}
.cost-controls>.btn{padding:8px 10px;min-height:37px;width:100%}
.drawer-footer .btn,.drawer .profile-actions .btn,.cost-controls .segmented button,.cost-controls>.btn{font-size:var(--fs-body)}
.expense-group-head{padding:14px 15px;gap:9px}
.expense-group-head .avatar{width:31px;height:31px}
.expense-row{grid-template-columns:1fr auto 12px;padding:14px 15px;gap:4px 10px}
.expense-row .description{grid-column:1;grid-row:2}
.expense-row>span{min-width:0;overflow-wrap:anywhere}
.expense-row .date{grid-column:1;grid-row:3;margin-top:4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
.expense-row .date small:first-of-type{display:none}
.expense-row .amount{grid-column:2;grid-row:1/4;align-self:center}
.expense-row>.icon{grid-column:3;grid-row:1/4}
.expense-groups{gap:13px}
.transfer-layout{gap:15px}
.timeline{padding-left:20px}
.timeline:before{left:4px}
.timeline-item:before{left:-23px;border-width:3px;width:8px;height:8px}
.contact-card{padding:16px}
.contact-top{gap:9px;padding-bottom:13px;margin-bottom:13px}
.club-mark{width:33px;height:38px;font-size:18px}
.contact-top h3{font-size:var(--fs-body)}
.contact-meta{gap:7px}
.contact-meta .avatar{width:23px;height:23px}
.contact-meta .on-player{max-width:100%;text-align:left}
.contact-note{margin-top:12px}
.contact-status{height:30px;width:100%;border-radius:24px}
.contact-actions{margin-left:auto}
.needs-grid{grid-template-columns:1fr;gap:14px}
.need-card{padding:20px}
.need-club h3{font-size:var(--fs-title)}
.need-club .club-mark{width:38px;height:43px}
.salary{font-size:22px}
.need-description{min-height:0}
.need-footer{margin-top:17px;padding-top:13px}
.need-footer button{padding:8px 0}
.needs-controls{gap:13px;margin-bottom:18px}
.country-tabs{width:100%}
.window-select{height:38px;max-width:none;flex:1;min-height:44px}
.need-profile-tabs{margin-top:17px}
.drawer{width:100%;border-left:0}
.drawer-header{padding:max(20px,env(safe-area-inset-top)) var(--gutter) 19px;gap:6px}
.drawer-header h2{font-size:18px}
.drawer-close{order:0;margin-left:-10px}
.drawer-close .icon-back{display:block}
.drawer-close .icon-close{display:none}
.drawer-scroll{padding:22px var(--gutter)}
.drawer-footer{padding:15px var(--gutter) calc(15px + env(safe-area-inset-bottom))}
.drawer-footer .btn{flex:1 1 0;min-width:0;white-space:normal;padding:10px 12px}
.drawer-footer .btn.primary{flex-grow:2}
.drawer-footer .button-label{min-width:0;overflow-wrap:anywhere}
.form-grid{grid-template-columns:1fr;gap:17px}
.field.full{grid-column:auto}
.form-grid.compact .field.full{grid-column:1/-1}
.form-grid.compact,.repeat-profile .form-grid{grid-template-columns:1fr}
.profile-hero{gap:14px}
.profile-hero .player-avatar{width:66px;height:71px;font-size:33px}
.profile-hero h2{font-size:22px}
.profile-tabs{gap:var(--space-2)}
.repeat-profile{padding:15px}
.repeat-profile .field.full{grid-column:1/-1}
.drawer .profile-actions .btn{padding-left:8px;padding-right:8px}
.dialog{padding:23px}
}

@media(max-width:360px){
.filter-row{flex-wrap:wrap}
.filter-row .agent-picker,.filter-row .sort-picker{flex-basis:100%}
}


/* ===== 9. Motion: every transition and animation, driven by the tokens in section 1 =====
   Only transform and opacity move (the accordion's row track is the one exception). Entry motion
   runs on navigation only: app.js adds .view-enter, .list-enter, .content-enter and .overlay.entering
   for one render, so data refreshes never replay it. */
.nav-item,.icon-btn,.btn,.chip,.expense-row{transition:transform var(--dur-fast) var(--ease-out)}
.player-card,.pull-indicator{transition:transform var(--dur-base) var(--ease-out)}
.popover,.dialog{animation:enter var(--dur-base) var(--ease-out)}
.toast{animation:toast-in var(--dur-base) var(--ease-out)}
.toast.leaving{animation:toast-out var(--dur-base) var(--ease-in) forwards}
/* 6.2 the offline banner drops in; it leaves at once because the connection is already back. */
.offline-banner{animation:banner-in var(--dur-base) var(--ease-out)}
.deletion-root{animation:deletion-in var(--dur-base) var(--ease-out)}
/* Undo countdown: the bar shrinks over the remaining part of the Undo window. */
.deletion-root>.deletion-countdown{flex-basis:100%;height:3px;border-radius:2px;background:#7fbfff;transform-origin:left;animation:countdown linear forwards}
/* Skeleton shimmer is a moving highlight, so it stays on the compositor. */
.skeleton{position:relative;overflow:hidden}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#173252,transparent);transform:translateX(-100%);animation:shimmer 1.4s linear infinite}
/* 5.1 view entry. The page head's actions only fade: a transform there would re-anchor the fixed add button. */
.view-enter .head-copy,.view-enter .page-head~*{animation:view-in var(--dur-base) var(--ease-out) var(--entry-elapsed,0ms) backwards}
.view-enter .head-actions{animation:fade-in var(--dur-base) var(--ease-out) var(--entry-elapsed,0ms) backwards}
/* 5.4 and 5.5: the list cross-fades and its first eight items cascade in. */
.list-enter{--stagger:0ms;animation:fade-in 150ms var(--ease-out) var(--entry-elapsed,0ms) backwards}
.list-enter>:nth-child(-n+8){animation:item-in var(--dur-fast) var(--ease-out) calc(var(--entry-elapsed,0ms) + var(--stagger)) backwards}
.list-enter>:nth-child(2){--stagger:30ms}
.list-enter>:nth-child(3){--stagger:60ms}
.list-enter>:nth-child(4){--stagger:90ms}
.list-enter>:nth-child(5){--stagger:120ms}
.list-enter>:nth-child(6){--stagger:150ms}
.list-enter>:nth-child(7){--stagger:180ms}
.list-enter>:nth-child(8){--stagger:210ms}
/* 5.8 skeleton replaced by content. */
.content-enter{animation:fade-in 150ms var(--ease-out)}
/* 5.2 drawers: backdrop fades, panel slides from the right; on phones sheets rise from the bottom. */
.overlay.entering{animation:fade-in var(--dur-base) var(--ease-out)}
.overlay.entering .drawer{animation:drawer-in var(--dur-slow) var(--ease-out)}
/* 5.9 the player photo flies into the drawer, so the panel itself only fades. */
.overlay.entering.morph .drawer{animation:fade-in var(--dur-slow) var(--ease-out)}
/* 5.10 accordion rows open from 0fr; browsers without ::details-content open instantly. */
.form-accordion::details-content{display:grid;grid-template-rows:0fr;overflow:clip;overflow-clip-margin:6px;transition:grid-template-rows var(--dur-base) var(--ease-out),content-visibility var(--dur-base) allow-discrete}
.form-accordion[open]::details-content{grid-template-rows:1fr}
.form-accordion>.form-grid{min-height:0}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes item-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes drawer-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes sheet-up{from{transform:translateY(100%);opacity:.4}to{transform:none;opacity:1}}
@keyframes fab-in{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes deletion-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes shimmer{to{transform:translateX(100%)}}
@keyframes banner-in{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toast-out{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,12px)}}
@media(max-width:800px){
.drawer.sheet{transition:transform var(--dur-base) var(--ease-out)}
.overlay.entering .drawer.sheet{animation:sheet-up var(--dur-slow) var(--ease-out)}
.popover{animation:sheet-up var(--dur-slow) var(--ease-out)}
}
@media(max-width:600px){
/* 5.6 the floating add button pops in with the view and steps aside while the user scrolls down. */
.head-actions .btn.primary[data-action^="add-"]{transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out)}
.view-enter .head-actions .btn.primary[data-action^="add-"]{animation:fab-in var(--dur-base) var(--ease-out) var(--entry-elapsed,0ms) backwards}
.scroll-hidden .head-actions .btn.primary[data-action^="add-"]:not(:focus-visible){transform:translateY(calc(100% + 100px));opacity:0;pointer-events:none}
/* 6.1 the top bar slides up with it; the safe-area strip stays so content never runs under the status bar. */
.topbar{transition:transform var(--dur-base) var(--ease-out)}
.scroll-hidden .topbar:not(:focus-within){transform:translateY(calc(env(safe-area-inset-top) - 100%))}
}


/* ===== 10. Accessibility overrides; must stay last ===== */
/* 5.11: the universal selector does not reach ::details-content or view-transition pseudo-elements. */
/* Separate rules: one unsupported pseudo-element would invalidate a whole selector list. */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
::details-content{transition:none!important}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
.deletion-countdown{display:none}
}