@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --bg:#f5f7fb; --surface:#fff; --surface-soft:#f8faff; --text:#172033; --muted:#7a8499; --line:#e7ebf2; --primary:#5166e8; --primary-dark:#3f52ce; --sidebar:#101a2c; --sidebar-text:#95a2bc; --green:#29a77a; --orange:#ee9b43; --purple:#9874e8; --shadow:0 12px 34px rgba(23,32,51,.06); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button { border:0; cursor:pointer; }
.app-shell { display:none; min-height:100vh; }
.app-shell.ready { display:flex; }
.auth-view { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at 15% 10%,#e9edff 0,#f5f7fb 42%,#f5f7fb 100%); }
.auth-view.hidden { display:none; }
.auth-card { width:min(430px,100%); padding:34px 34px 25px; border:1px solid rgba(229,233,242,.9); border-radius:16px; background:#fff; box-shadow:0 22px 60px rgba(35,50,85,.12); }
.auth-brand { display:flex; align-items:center; gap:11px; margin-bottom:34px; }.auth-brand strong { display:block; font:700 15px Manrope,sans-serif; }.auth-brand span { display:block; margin-top:3px; color:#8993a5; font-size:10px; }.auth-intro h1 { margin:0; font:800 25px Manrope,sans-serif; letter-spacing:-1px; }.auth-intro p:last-child { margin:8px 0 25px; color:#8490a3; font-size:11px; line-height:1.5; }.auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:9px; background:#f4f6fa; margin-bottom:20px; }.auth-tab { height:32px; border-radius:7px; background:transparent; color:#8993a5; font-size:10px; font-weight:600; }.auth-tab.active { color:#5265da; background:#fff; box-shadow:0 3px 9px rgba(32,46,78,.08); }.auth-form { display:flex; flex-direction:column; gap:14px; }.auth-form label { display:flex; flex-direction:column; gap:6px; color:#69758a; font-size:10px; font-weight:600; }.auth-form input { height:40px; padding:0 12px; border:1px solid #e0e5ed; border-radius:7px; outline:0; color:#4d5a70; font-size:11px; }.auth-form input:focus { border-color:#7887ee; box-shadow:0 0 0 3px #edf0ff; }.auth-submit { width:100%; margin-top:5px; }.auth-message { min-height:16px; margin:14px 0 0; color:#d06b58; font-size:10px; text-align:center; }.auth-note { margin:20px 0 0; padding-top:16px; border-top:1px solid #eef0f4; color:#a0a8b7; font-size:9px; text-align:center; }
.sidebar { width:250px; flex:0 0 250px; background:var(--sidebar); color:#fff; padding:27px 16px 18px; display:flex; flex-direction:column; min-height:100vh; }
.brand { display:flex; align-items:center; gap:12px; padding:0 12px 36px; }
.brand-mark { width:37px; height:37px; border-radius:11px; background:linear-gradient(135deg,#6b7eff,#4d5ddd); display:grid; place-items:center; font-family:Manrope,sans-serif; font-weight:800; font-size:20px; box-shadow:0 7px 18px rgba(81,102,232,.35); }
.brand-name { font:700 15px Manrope,sans-serif; letter-spacing:-.2px; }
.brand-tagline { font-size:10px; color:#6f7d9b; margin-top:3px; }
.sidebar-section-label { text-transform:uppercase; font-size:10px; letter-spacing:1.3px; font-weight:700; color:#596984; padding:0 14px 11px; }
.resources-label { margin-top:29px; }
.nav-list { display:flex; flex-direction:column; gap:5px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; border-radius:8px; padding:11px 13px; background:transparent; color:var(--sidebar-text); text-align:left; font-size:13px; transition:.2s ease; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.07); }
.nav-item.active { color:#fff; background:linear-gradient(90deg,rgba(81,102,232,.95),rgba(81,102,232,.78)); box-shadow:0 8px 18px rgba(0,0,0,.12); }
.nav-icon { width:16px; text-align:center; font-size:15px; color:#8998b3; line-height:1; }
.nav-item.active .nav-icon { color:#fff; }.nav-count { margin-left:auto; min-width:21px; height:20px; border-radius:9px; padding:0 6px; display:grid; place-items:center; background:rgba(255,255,255,.12); font-size:10px; }.new-dot { width:6px; height:6px; background:#f4a75e; border-radius:50%; margin-left:auto; }
.sidebar-bottom { margin-top:auto; }.theme-switch { width:100%; display:flex; gap:10px; align-items:center; color:#8290a9; background:transparent; padding:12px 13px 18px; font-size:12px; text-align:left; }.theme-switch>span:first-child { font-size:15px; }.switch { margin-left:auto; width:30px; height:17px; padding:2px; border-radius:10px; background:#2b3850; }.switch i { display:block; width:13px; height:13px; border-radius:50%; background:#8592ad; }.sidebar-user { border-top:1px solid rgba(255,255,255,.09); padding:18px 8px 2px; display:flex; align-items:center; gap:9px; }.avatar,.topbar-avatar { background:linear-gradient(135deg,#f5bf8b,#df855e); color:#fff; font-weight:700; display:grid; place-items:center; border-radius:50%; }.avatar { width:32px; height:32px; font-size:10px; }.sidebar-user-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }.sidebar-user-copy strong { font-size:11px; font-weight:600; }.sidebar-user-copy span { font-size:9px; color:#71809b; }.more-button { margin-left:auto; color:#7f8da5; background:transparent; font-weight:700; letter-spacing:1px; }
.main-content { flex:1; min-width:0; }.topbar { height:76px; padding:0 39px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.76); display:flex; align-items:center; justify-content:space-between; }.breadcrumb { display:flex; align-items:center; gap:11px; font-size:12px; color:#a0a8b8; }.breadcrumb strong { color:#353f54; font-weight:600; }.breadcrumb-separator { color:#cdd2de; }.topbar-actions { display:flex; align-items:center; gap:17px; }.season-select { display:flex; align-items:center; gap:8px; font-size:11px; color:#939daf; }.season-select select { border:0; background:transparent; color:#49536a; font-size:11px; font-weight:600; outline:none; }.icon-button { position:relative; width:28px; height:28px; border-radius:50%; color:#738098; background:transparent; font-size:21px; }.icon-button:hover { background:#f0f2f7; }.notification-button { font-size:20px; }.notification-button i { position:absolute; right:3px; top:2px; width:5px; height:5px; border-radius:50%; background:#ef9b62; border:1px solid #fff; }.topbar-avatar { width:30px; height:30px; font-size:10px; }.mobile-menu { display:none; background:transparent; color:#546079; font-size:20px; }
.page-content { padding:38px 39px 56px; max-width:1550px; margin:0 auto; }.view { display:none; animation:fade-in .25s ease; }.view.active { display:block; }@keyframes fade-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.eyebrow { margin:0 0 8px; color:#9aa4b7; font-size:10px; font-weight:700; letter-spacing:1.25px; }.page-heading h1 { margin:0; font:800 clamp(24px,2.4vw,31px) Manrope,sans-serif; letter-spacing:-1.2px; color:#1c263a; }.page-heading p.muted { margin:7px 0 0; font-size:12px; }.wave { font-size:23px; vertical-align:2px; }.muted { color:var(--muted); }.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:39px; padding:0 17px; border-radius:8px; font-size:12px; font-weight:600; white-space:nowrap; }.primary-button { color:#fff; background:var(--primary); box-shadow:0 7px 16px rgba(81,102,232,.2); }.primary-button:hover { background:var(--primary-dark); transform:translateY(-1px); }.secondary-button { border:1px solid #e1e5ed; color:#536078; background:#fff; }.secondary-button:hover { border-color:#bdc5d5; }.text-button { background:transparent; color:#6073de; font-size:11px; font-weight:600; }.round-action { width:31px; height:31px; border-radius:50%; color:#6a79da; background:#eff1ff; font-size:16px; }.pill { color:#69748b; padding:7px 10px; border-radius:6px; background:#f5f7fb; font-size:10px; font-weight:600; }.kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:17px; margin-bottom:22px; }.kpi-card { position:relative; min-height:147px; overflow:hidden; padding:20px 19px 17px; border-radius:11px; background:var(--surface); box-shadow:var(--shadow); }.kpi-card:before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; }.accent-blue:before { background:#5c72ed; }.accent-purple:before { background:#9974e7; }.accent-orange:before { background:#ef9b48; }.accent-green:before { background:#2eaf81; }.kpi-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }.kpi-label { font-size:11px; color:#7c869b; }.kpi-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:7px; font-size:12px; font-weight:700; }.accent-blue .kpi-icon { color:#5e72e6; background:#edf0ff; }.accent-purple .kpi-icon { color:#936dde; background:#f1ecff; }.accent-orange .kpi-icon { color:#dd8a3c; background:#fff4e8; }.accent-green .kpi-icon { color:#299f76; background:#e8f8f1; }.kpi-card>strong { display:block; font:800 26px Manrope,sans-serif; letter-spacing:-.9px; }.kpi-card>strong small { font:600 13px 'DM Sans'; letter-spacing:0; color:#606c80; }.kpi-trend { display:flex; align-items:center; gap:5px; margin-top:13px; font-size:10px; color:#a0a7b5; }.kpi-trend b { font-size:10px; }.positive { color:#3baf87; }.positive b { color:#2e9c77; }.neutral { color:#9099aa; }.neutral b { color:#5e6a80; }.progress-track { height:5px; border-radius:3px; background:#edf0f4; margin-top:14px; overflow:hidden; }.progress-track span { display:block; height:100%; border-radius:3px; background:#45b18a; }
.dashboard-grid { display:grid; grid-template-columns:1.42fr 1fr; gap:18px; margin-bottom:18px; }.panel { background:var(--surface); border-radius:11px; box-shadow:var(--shadow); }.upcoming-panel,.finance-panel,.chart-panel,.quick-panel { padding:22px 22px 20px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:21px; }.panel h2 { margin:0; font:700 14px Manrope,sans-serif; letter-spacing:-.2px; }.panel-heading p { margin:5px 0 0; font-size:10px; }.match-list { display:flex; flex-direction:column; }.match-row { display:grid; grid-template-columns:55px 1fr auto; gap:13px; align-items:center; padding:13px 0; border-top:1px solid #f0f2f6; }.match-row:first-child { border-top:0; padding-top:2px; }.match-date { display:flex; flex-direction:column; align-items:center; justify-content:center; width:47px; height:45px; background:#f3f5ff; border-radius:8px; color:#5a6be1; }.match-date small { font-size:9px; text-transform:uppercase; font-weight:700; }.match-date strong { font:700 18px Manrope,sans-serif; line-height:17px; }.match-main { min-width:0; }.match-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.match-main span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:4px; color:#8d96a8; font-size:10px; }.match-side { text-align:right; }.match-side strong { display:block; font-size:11px; }.match-side span { display:block; margin-top:4px; color:#a1a9b7; font-size:9px; }.status { display:inline-flex; align-items:center; padding:4px 7px; border-radius:5px; font-size:9px; font-weight:600; }.paid-status,.done-status { color:#268765; background:#e8f8f1; }.pending-status,.active-status { color:#ba7a32; background:#fff3e2; }.upcoming-status { color:#5d6fdb; background:#eef0ff; }.empty-state { padding:34px 20px 22px; text-align:center; color:#8490a4; display:flex; flex-direction:column; align-items:center; gap:7px; }.empty-icon { width:39px; height:39px; border-radius:12px; display:grid; place-items:center; background:#f0f2ff; color:#6072e1; font-size:18px; margin-bottom:3px; }.empty-state strong { color:#526079; font-size:12px; }.empty-state span { max-width:240px; font-size:10px; line-height:1.5; }.hidden { display:none !important; }
.finance-total { display:flex; align-items:flex-end; justify-content:space-between; margin-top:11px; }.finance-total span { color:#8b95a7; font-size:10px; }.finance-total strong { font:800 24px Manrope,sans-serif; letter-spacing:-1px; }.finance-bar { display:flex; height:12px; gap:2px; overflow:hidden; margin:24px 0 14px; border-radius:6px; background:#f1f3f6; }.finance-bar span { display:block; height:100%; }.paid { background:#3caa83; }.pending { background:#a17ae6; }.finance-legend { display:flex; flex-direction:column; gap:8px; font-size:10px; color:#8b94a5; }.finance-legend span { display:flex; align-items:center; }.finance-legend b { margin-left:auto; color:#556075; font-weight:600; }.legend-dot { width:7px; height:7px; border-radius:50%; margin-right:7px; }.paid-dot { background:#3caa83; }.pending-dot { background:#a17ae6; }.due-dot { background:#d9dee7; }.finance-foot { display:flex; align-items:center; justify-content:space-between; margin-top:21px; padding-top:13px; border-top:1px solid #f0f2f6; color:#a1a9b7; font-size:9px; }.lower-grid { grid-template-columns:1.42fr 1fr; }.chart-panel { min-height:262px; }.bar-chart { height:130px; display:flex; align-items:flex-end; justify-content:space-around; gap:9px; padding:0 8px 0; border-bottom:1px solid #edf0f4; background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,#f2f4f7 32px); }.bar-wrap { height:100%; flex:1; max-width:33px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; }.bar-wrap .bar { width:100%; min-height:9px; border-radius:4px 4px 0 0; background:#dfe4fb; transition:height .25s ease; }.bar-wrap.active .bar { background:linear-gradient(#6173ef,#8f9df3); box-shadow:0 4px 10px rgba(92,114,237,.2); }.bar-wrap small { color:#9ba4b4; font-size:9px; }.chart-summary { display:flex; gap:12px; align-items:center; margin-top:15px; }.chart-summary strong { font:700 13px Manrope,sans-serif; }.chart-summary span { font-size:10px; color:#36a77f; }.quick-actions { display:flex; flex-direction:column; gap:10px; }.quick-actions button { display:flex; align-items:center; gap:11px; padding:11px 4px; background:transparent; text-align:left; border-top:1px solid #f1f3f6; }.quick-actions button:first-child { border-top:0; padding-top:2px; }.quick-actions button>b { margin-left:auto; color:#a6afbd; font-size:16px; }.quick-actions button>span:nth-child(2) { display:flex; flex-direction:column; gap:4px; }.quick-actions strong { color:#4c586d; font-size:11px; }.quick-actions small { color:#9da6b5; font-size:9px; }.quick-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; font-weight:700; font-size:14px; }.quick-icon.blue { background:#edf0ff; color:#6072e1; }.quick-icon.purple { background:#f2edff; color:#9673df; }.quick-icon.orange { background:#fff3e4; color:#e19442; }
.generic-view .page-heading { margin-bottom:25px; }.toolbar { display:flex; align-items:center; gap:10px; margin-bottom:17px; }.search-field { display:flex; align-items:center; gap:8px; flex:1; max-width:310px; height:39px; padding:0 12px; border:1px solid #e1e5ed; background:#fff; border-radius:8px; color:#9ca5b5; }.search-field input { width:100%; border:0; outline:0; color:#536078; font-size:11px; }.toolbar select { height:39px; padding:0 11px; border:1px solid #e1e5ed; border-radius:8px; color:#637087; background:#fff; font-size:11px; }.toolbar .secondary-button { margin-left:auto; }.table-panel { overflow:hidden; }.table-wrap { overflow-x:auto; }.table-wrap table { width:100%; border-collapse:collapse; min-width:680px; }.table-wrap th { padding:14px 20px; background:#fafbfc; color:#9da6b5; text-align:left; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.55px; }.table-wrap td { padding:16px 20px; border-top:1px solid #f0f2f6; color:#7e899c; font-size:11px; }.table-wrap td strong { color:#4c586d; font-weight:600; }.finance-overview { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }.finance-big-card { padding:20px 21px; border-radius:10px; background:#fff; box-shadow:var(--shadow); border-left:4px solid; }.finance-big-card.green { border-color:#37a980; }.finance-big-card.purple { border-color:#9b79e5; }.finance-big-card.orange { border-color:#e9a255; }.finance-big-card span,.finance-big-card small { display:block; color:#8e98aa; font-size:10px; }.finance-big-card strong { display:block; margin:9px 0 7px; font:800 23px Manrope,sans-serif; letter-spacing:-.8px; }.finance-big-card small { color:#a1a9b7; }.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }.stat-highlight { min-height:173px; padding:21px; position:relative; overflow:hidden; }.stat-overline { display:block; color:#9da6b5; font-size:9px; font-weight:700; letter-spacing:1px; }.stat-highlight>strong { display:block; margin-top:10px; font:800 28px Manrope,sans-serif; letter-spacing:-1px; }.stat-highlight>strong small { font:600 13px 'DM Sans'; color:#8a94a6; letter-spacing:0; }.mini-line-chart { height:55px; margin:12px 0 4px; display:flex; align-items:flex-end; gap:6px; }.mini-line-chart i { flex:1; background:linear-gradient(#91a0fa,#6174eb); border-radius:3px 3px 0 0; }.positive-text { color:#31a57d; font-size:10px; }.donut { width:72px; height:72px; margin:5px 0 6px; border-radius:50%; background:conic-gradient(#687bee 0 76%,#edf0f8 76%); position:relative; display:grid; place-items:center; }.donut:after { content:''; width:50px; height:50px; background:#fff; border-radius:50%; position:absolute; }.donut span { position:relative; z-index:1; font-size:8px; color:#8993a6; }.rating-stars { color:#f0ad59; letter-spacing:2px; font-size:13px; margin:21px 0 17px; }.full-chart { min-height:280px; }.competition-rows { display:flex; flex-direction:column; gap:19px; padding-top:9px; }.competition-rows>div { display:grid; grid-template-columns:125px 1fr 25px; gap:14px; align-items:center; font-size:11px; color:#717d92; }.competition-rows b { color:#4e5b72; text-align:right; font-size:11px; }.row-track { height:8px; border-radius:4px; background:#eef0f4; overflow:hidden; }.row-track i { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#6375ed,#9faafa); }.progress-banner { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; margin-bottom:18px; border-radius:11px; color:#fff; background:linear-gradient(110deg,#5569e7,#7888ee); box-shadow:0 12px 25px rgba(81,102,232,.2); }.progress-banner .eyebrow { color:#d7ddff; }.progress-banner h2 { margin:0; font:700 18px Manrope,sans-serif; }.progress-banner p { margin:7px 0 0; color:#e0e5ff; font-size:11px; }.level-score { font:800 39px Manrope,sans-serif; }.level-score span { font:500 13px 'DM Sans'; opacity:.72; }.goal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.goal-card { padding:20px; }.goal-header { display:flex; justify-content:space-between; align-items:center; }.goal-icon,.report-icon { width:31px; height:31px; display:grid; place-items:center; border-radius:9px; font-weight:700; }.goal-icon.blue,.report-icon.blue { color:#6073e5; background:#edf0ff; }.goal-icon.purple,.report-icon.purple { color:#9673de; background:#f2edff; }.goal-icon.green { color:#2b9d76; background:#e8f8f1; }.goal-card h3 { margin:17px 0 7px; font:700 13px Manrope,sans-serif; }.goal-card p { margin:0; font-size:10px; line-height:1.5; min-height:31px; }.goal-progress { height:7px; margin:21px 0 10px; background:#eef0f4; border-radius:4px; overflow:hidden; }.goal-progress>span { display:block; height:100%; border-radius:4px; background:#6476eb; }.purple-track>span { background:#9877e2; }.green-track>span { background:#38a980; }.goal-foot { display:flex; justify-content:space-between; color:#9aa3b3; font-size:9px; }.simple-view .page-heading { margin-bottom:27px; }.quiz-hero { min-height:263px; display:flex; align-items:center; gap:28px; padding:33px 40px; border-radius:12px; color:#fff; background:linear-gradient(112deg,#192a4b,#2e4174); position:relative; overflow:hidden; }.quiz-hero:after { content:''; position:absolute; width:340px; height:340px; right:100px; top:-185px; border-radius:50%; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 0 30px rgba(255,255,255,.03),0 0 0 60px rgba(255,255,255,.03); }.quiz-orb { width:92px; height:92px; flex:0 0 auto; display:grid; place-items:center; border-radius:27px; background:linear-gradient(135deg,#7e90ff,#4c60db); box-shadow:0 14px 30px rgba(0,0,0,.2); font:800 48px Manrope,sans-serif; }.quiz-hero .eyebrow { color:#b8c4ee; }.quiz-hero h2 { margin:0; font:700 22px Manrope,sans-serif; }.quiz-hero p { margin:9px 0 22px; color:#c3ccee; font-size:11px; }.quiz-hero .primary-button { background:#fff; color:#4d60d9; }.quiz-score { position:relative; z-index:1; margin-left:auto; padding-right:20px; display:flex; flex-direction:column; text-align:right; }.quiz-score strong { font:800 34px Manrope,sans-serif; }.quiz-score span { color:#b9c4e5; font-size:10px; margin-top:5px; }.map-placeholder { height:410px; border-radius:12px; background:#e6ebf1; overflow:hidden; position:relative; background-image:linear-gradient(24deg,transparent 46%,rgba(190,201,212,.7) 47%,rgba(190,201,212,.7) 48%,transparent 49%),linear-gradient(115deg,transparent 42%,rgba(194,204,214,.7) 43%,rgba(194,204,214,.7) 44%,transparent 45%); }.map-grid { position:absolute; inset:0; opacity:.7; background:repeating-linear-gradient(0deg,transparent 0 44px,rgba(255,255,255,.6) 45px),repeating-linear-gradient(90deg,transparent 0 72px,rgba(255,255,255,.55) 73px); }.map-pin { position:absolute; width:28px; height:28px; display:grid; place-items:center; border:5px solid rgba(97,117,234,.25); border-radius:50%; background:#6074e9; color:#fff; box-shadow:0 4px 8px rgba(64,81,184,.25); }.pin-1 { left:35%; top:42%; }.pin-2 { left:58%; top:28%; }.pin-3 { left:68%; top:66%; }.map-label { position:absolute; top:20px; left:22px; display:flex; flex-direction:column; padding:13px 17px; border-radius:9px; background:#fff; box-shadow:var(--shadow); }.map-label strong { font:800 18px Manrope,sans-serif; }.map-label span { color:#8490a5; font-size:10px; margin-top:3px; }.report-list { display:flex; flex-direction:column; gap:14px; }.report-row { display:flex; align-items:center; gap:14px; padding:18px 21px; }.report-row>div { flex:1; }.report-row strong { font-size:12px; }.report-row p { margin:5px 0 0; font-size:10px; }.report-row .secondary-button { height:33px; font-size:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:20; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(15,25,43,.5); backdrop-filter:blur(3px); }.modal-backdrop.open { display:flex; }.modal { width:min(560px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:25px; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(20,33,56,.25); }.modal-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:23px; }.modal-header h2 { margin:0; font:800 21px Manrope,sans-serif; }.close-button { width:28px; height:28px; border-radius:50%; color:#7b869b; background:#f3f5f8; font-size:20px; line-height:1; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }.form-grid label { display:flex; flex-direction:column; gap:7px; color:#69758b; font-size:10px; font-weight:600; }.form-grid label.full { grid-column:1 / -1; }.form-grid input,.form-grid select { width:100%; height:38px; border:1px solid #e1e5ed; border-radius:7px; outline:0; color:#4f5b70; padding:0 11px; font-size:11px; }.form-grid input:focus,.form-grid select:focus { border-color:#7a89ed; box-shadow:0 0 0 3px #eef0ff; }.modal-footer { display:flex; justify-content:flex-end; gap:9px; margin-top:25px; padding-top:18px; border-top:1px solid #edf0f4; }.toast { position:fixed; z-index:30; right:22px; bottom:22px; max-width:320px; padding:12px 16px; border-radius:8px; background:#17243a; color:#fff; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s ease; font-size:11px; box-shadow:0 10px 22px rgba(23,36,58,.2); }.toast.show { opacity:1; transform:none; }
.modal-subtitle { margin:7px 0 0; color:#8b95a7; font-size:10px; line-height:1.45; }.import-modal { width:min(680px,100%); }.import-status { display:flex; align-items:center; gap:10px; margin:-4px 0 20px; padding:11px 13px; border:1px solid #e5edcf; border-radius:9px; background:#f8fbeF; color:#56634a; }.import-status-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#1f3211; background:#b7f34a; font-weight:800; }.import-status strong,.import-status span { display:block; }.import-status strong { font-size:11px; }.import-status span { margin-top:3px; color:#879277; font-size:9px; }.import-details { margin-top:19px; padding:14px; border:1px solid #edf0f4; border-radius:9px; background:#fafbfc; }.import-details-heading { margin-bottom:9px; color:#7d8799; font-size:9px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }.import-official { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid #edf0f4; }.import-official:first-of-type { border-top:0; }.import-official strong,.import-official span { display:block; }.import-official strong { color:#47546a; font-size:11px; }.import-official span { margin-top:3px; color:#929bab; font-size:9px; }.import-official b { color:#5368dc; font-size:11px; white-space:nowrap; }.import-warnings { margin-top:11px; }.import-warning,.import-success { padding:9px 11px; border-radius:7px; font-size:9px; line-height:1.45; }.import-warning { color:#8d692e; background:#fff6e7; }.import-success { color:#2e8567; background:#edf9f3; }
.dark .auth-view { background:radial-gradient(circle at 15% 10%,#1d2a4a 0,#111b2e 44%,#111b2e 100%); }.dark .auth-card { border-color:#2a3a55; background:#18243a; }.dark .auth-intro h1 { color:#edf1fc; }.dark .auth-tabs { background:#1d2a42; }.dark .auth-tab.active { background:#243451; color:#aeb8ff; }.dark .auth-form input { background:#1d2a42; border-color:#30405b; color:#d7deee; }.dark .auth-note { border-color:#2c3b55; }
@media (max-width:1150px) { .sidebar { width:220px; flex-basis:220px; }.page-content { padding:31px 28px 45px; }.topbar { padding:0 28px; }.kpi-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.lower-grid { grid-template-columns:1fr; }.finance-panel { min-height:0; }.quick-panel { min-height:0; }.stats-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px) { .sidebar { position:fixed; z-index:10; left:-255px; top:0; bottom:0; width:250px; transition:left .25s ease; box-shadow:12px 0 30px rgba(0,0,0,.16); }.sidebar.open { left:0; }.main-content { width:100%; }.topbar { height:65px; padding:0 17px; }.mobile-menu { display:block; }.breadcrumb { margin-right:auto; margin-left:11px; }.breadcrumb span:first-child,.breadcrumb-separator { display:none; }.topbar-actions { gap:6px; }.season-select { display:none; }.page-content { padding:26px 17px 38px; }.page-heading { align-items:flex-start; flex-direction:column; margin-bottom:22px; }.page-heading .primary-button,.page-heading .secondary-button { align-self:stretch; }.kpi-grid { gap:10px; }.kpi-card { min-height:136px; padding:16px 14px; }.kpi-card>strong { font-size:22px; }.kpi-label { font-size:10px; }.kpi-trend { display:block; line-height:1.5; }.kpi-trend span { display:block; }.dashboard-grid { gap:12px; margin-bottom:12px; }.upcoming-panel,.finance-panel,.chart-panel,.quick-panel { padding:17px 15px; }.match-row { grid-template-columns:48px 1fr auto; gap:9px; }.match-date { width:42px; height:43px; }.match-main strong { font-size:11px; }.match-side strong { font-size:10px; }.finance-foot { gap:8px; flex-direction:column; align-items:flex-start; }.lower-grid { gap:12px; }.toolbar { flex-wrap:wrap; }.search-field { max-width:none; flex-basis:100%; }.toolbar .secondary-button { margin-left:0; }.finance-overview,.stats-grid,.goal-grid { grid-template-columns:1fr; gap:11px; }.finance-big-card { padding:16px 18px; }.progress-banner { padding:20px; }.level-score { font-size:30px; }.quiz-hero { align-items:flex-start; flex-direction:column; padding:24px; gap:18px; }.quiz-hero:after { right:-100px; }.quiz-score { margin:0; padding:0; text-align:left; }.map-placeholder { height:300px; }.form-grid { grid-template-columns:1fr; }.form-grid label.full { grid-column:auto; }.modal { padding:20px; }.modal-footer { flex-direction:column-reverse; }.modal-footer button { width:100%; } }
@media (max-width:420px) { .kpi-grid { grid-template-columns:1fr 1fr; }.kpi-card { min-height:146px; }.kpi-card>strong { font-size:20px; }.topbar-avatar { display:none; } }

/* Navigation and data-first UX */
.sidebar-close { display:none; }
.sidebar-overlay { display:none; }
.data-empty { min-height:180px; justify-content:center; }
.trips-total { position:relative; inset:auto; margin-bottom:16px; width:max-content; }
.trips-list { display:flex; flex-direction:column; gap:0; padding:8px 20px; }
.trip-row { display:grid; grid-template-columns:25px 1fr auto; gap:12px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:11px; }
.trip-row:last-child { border-bottom:0; }.trip-row span { color:var(--primary); }.trip-row strong { color:var(--text); font-weight:600; }.trip-row b { color:var(--primary); font-size:11px; }
@media (max-width:760px) {
  body.menu-open { overflow:hidden; }
  .sidebar { z-index:25; }
  .sidebar-close { position:absolute; top:18px; right:14px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#dfe4f4; background:rgba(255,255,255,.08); font-size:22px; line-height:1; }
  .sidebar-overlay { position:fixed; inset:0; z-index:20; display:block; background:rgba(6,9,18,.55); opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .sidebar-overlay.show { opacity:1; pointer-events:auto; }
  .sidebar.open { left:0; }
  .toolbar .secondary-button { width:100%; }
  .trip-row { grid-template-columns:22px 1fr; }.trip-row b { grid-column:2; }
}

/* Progression: real performance signals, optimized for small screens */
.progress-lens-tabs { display:flex; gap:6px; margin:-4px 0 18px; padding:4px; overflow-x:auto; border-radius:12px; background:var(--surface-soft); }
.progress-lens-tab { flex:1 0 auto; min-height:38px; padding:0 16px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:11px; font-weight:700; white-space:nowrap; }
.progress-lens-tab.active { color:var(--text); background:var(--surface); box-shadow:var(--shadow); }
.progress-kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.progress-kpi { position:relative; min-height:132px; padding:17px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.progress-kpi::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:var(--primary); }
.progress-kpi.orange::before { background:var(--orange); }.progress-kpi.blue::before { background:#4d8dff; }.progress-kpi.green::before { background:var(--green); }.progress-kpi.yellow::before { background:#f1ca4b; }
.progress-kpi span,.progress-kpi small { display:block; color:var(--muted); font-size:10px; }.progress-kpi strong { display:block; margin:12px 0 6px; color:var(--text); font:800 26px/1 Manrope,sans-serif; letter-spacing:-1px; }.progress-kpi small { line-height:1.35; }
.progress-chart-card { margin-bottom:18px; }.progress-chart { min-height:235px; padding:6px 4px 0; }.progress-chart svg { display:block; width:100%; height:auto; overflow:visible; }.progress-chart line { stroke:var(--line); stroke-dasharray:4 6; }.progress-chart text { fill:var(--muted); font:11px 'DM Sans',sans-serif; }.progress-line { fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.progress-point { fill:var(--orange); stroke:var(--surface); stroke-width:3; }
.progress-two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }.progress-two-columns > .panel { min-width:0; }.progress-rows,.progress-score-list { display:flex; flex-direction:column; gap:8px; }.progress-data-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:40px; padding:8px 10px; border-radius:9px; background:var(--surface-soft); }.progress-data-row strong { color:#f1ca4b; font:800 15px Manrope,sans-serif; }.progress-data-row small { min-width:43px; color:var(--muted); text-align:right; font-size:9px; }.progress-chip { max-width:190px; overflow:hidden; color:#76a9ff; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }.progress-score-row { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); }.progress-score-row:last-child { border-bottom:0; }.progress-score-row strong,.progress-score-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.progress-score-row strong { color:var(--text); font-size:11px; }.progress-score-row small { margin-top:4px; color:var(--muted); font-size:9px; }.progress-rank { color:var(--muted); font:800 16px Manrope,sans-serif; }.progress-score-badge { min-width:55px; padding:5px 8px; border:1px solid rgba(241,202,75,.32); border-radius:999px; color:#f1ca4b; background:rgba(241,202,75,.1); text-align:center; font-size:10px; font-weight:800; }.progress-tips { padding:24px; margin-bottom:18px; }.progress-tips h2 { margin:0 0 8px; }
.form-grid textarea { width:100%; min-height:84px; padding:10px 11px; border:1px solid #e1e5ed; border-radius:7px; outline:0; resize:vertical; color:#4f5b70; background:#fff; font:11px 'DM Sans',sans-serif; }.form-grid textarea:focus { border-color:#7a89ed; box-shadow:0 0 0 3px #eef0ff; }
body.dark .form-grid textarea { border-color:var(--line); color:var(--text); background:#10131f; } body.dark .form-grid textarea::placeholder { color:#6f768b; }
body.dark .progress-lens-tab.active { background:#1c2130; } body.dark .progress-data-row { background:#171b29; }
@media (max-width:900px) { .progress-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .progress-lens-tabs { margin-left:-2px; margin-right:-2px; }.progress-kpi-grid { gap:10px; }.progress-kpi { min-height:121px; padding:14px; }.progress-kpi strong { font-size:22px; }.progress-two-columns { grid-template-columns:1fr; gap:12px; margin-bottom:12px; }.progress-chart { min-height:190px; }.progress-chart-card { padding:17px 15px; }.progress-data-row { grid-template-columns:minmax(0,1fr) auto; }.progress-data-row small { grid-column:1 / -1; text-align:left; margin-top:-5px; }.progress-chip { max-width:150px; } }

/* Full application dark theme */
body.dark {
  color-scheme: dark;
  --bg:#090b16;
  --surface:#141724;
  --surface-soft:#1b1f2f;
  --text:#f4f5f7;
  --muted:#9da3b5;
  --line:#2b3042;
  --primary:#b7f34a;
  --primary-dark:#d1ff72;
  --shadow:0 18px 42px rgba(0,0,0,.24);
  background:var(--bg);
}
body.dark .main-content { background:var(--bg); }
body.dark .topbar { border-color:var(--line); background:var(--surface); box-shadow:0 8px 18px rgba(0,0,0,.18); }
body.dark .breadcrumb strong,
body.dark .page-heading h1,
body.dark .panel h2,
body.dark .kpi-card>strong,
body.dark .finance-total strong,
body.dark .finance-big-card strong,
body.dark .stat-highlight>strong,
body.dark .match-card h3,
body.dark .match-card-footer strong { color:var(--text); }
body.dark .breadcrumb { color:#747b90; }
body.dark .mobile-menu,
body.dark .icon-button { color:#b6bdcf; }
body.dark .icon-button:hover { background:#1a1e2d; }
body.dark .kpi-card,
body.dark .panel,
body.dark .finance-big-card { background:var(--surface); box-shadow:var(--shadow); }
body.dark .kpi-label,
body.dark .finance-total span,
body.dark .finance-big-card span,
body.dark .finance-big-card small { color:#9da3b5; }
body.dark .kpi-card>strong small { color:#aab0bf; }
body.dark .progress-track,
body.dark .goal-progress,
body.dark .row-track { background:#292e40; }
body.dark .finance-bar { background:#292e40; }
body.dark .finance-foot,
body.dark .match-row,
body.dark .quick-actions button,
body.dark .form-section + .form-section,
body.dark .modal-footer,
body.dark .table-wrap td { border-color:var(--line); }
body.dark .quick-actions strong,
body.dark .table-wrap td strong,
body.dark .trip-row strong { color:#edf0f5; }
body.dark .quick-actions button { color:var(--muted); }
body.dark .search-field,
body.dark .toolbar select,
body.dark .secondary-button,
body.dark .form-grid input,
body.dark .form-grid select { border-color:var(--line); color:var(--text); background:#10131f; }
/* Native select menus keep a light popup on several mobile browsers. Keep
   their option text dark so season choices never disappear on white popups. */
body.dark select option,
body.dark select optgroup { color:#172033; background:#fff; }
body.dark .search-field input { color:var(--text); background:transparent; }
body.dark .search-field input::placeholder,
body.dark .form-grid input::placeholder { color:#6f768b; }
body.dark .secondary-button:hover { border-color:#576079; background:#1b1f2f; }
body.dark .pill,
body.dark .match-filter,
body.dark .onboarding-grid button,
body.dark .mobile-season-strip { color:var(--muted); background:var(--surface-soft); border-color:var(--line); }
body.dark .match-filter.active { color:var(--text); background:var(--surface); }
body.dark .match-chip.role-chip { color:#cbd1df; background:#202538; border-color:#3b4258; }
body.dark .table-wrap th { color:#9299ac; background:#1a1e2d; }
body.dark .table-wrap td { color:#aeb4c3; }
body.dark .table-action { color:#c9d0df; background:#1b1f2f; border-color:#3a4155; }
body.dark .table-action:hover { color:#11131e; background:var(--green); border-color:var(--green); }
body.dark .danger-action { color:#f08b95; }
body.dark .danger-action:hover { color:#fff; background:#b34f5c; border-color:#b34f5c; }
body.dark .modal { background:#151827; color:var(--text); box-shadow:0 28px 80px rgba(0,0,0,.5); }
body.dark .convocation-officials { border-color:var(--line); background:#10131f; }
body.dark .convocation-official-row { border-color:var(--line); }
body.dark .convocation-official-option { border-color:var(--line); background:#151827; }
body.dark .convocation-official-option.selected { border-color:#8f7aff; background:linear-gradient(135deg,rgba(143,122,255,.18),rgba(183,243,74,.08)); }
body.dark .convocation-official-radio { border-color:#3b4258; background:#202538; }
body.dark .convocation-official-option.selected .convocation-official-radio { border-color:#8f7aff; background:#8f7aff; }
body.dark .onboarding-card { border-color:#2a3042; }
body.dark .onboarding-grid button:hover { border-color:var(--green); }
body.dark .empty-state strong { color:#e9ecf3; }
body.dark .empty-icon { background:#202538; color:#b7f34a; }
body.dark .mobile-nav-add { border-color:var(--surface); }
body.dark .theme-switch { color:#aeb5c7; }
body.dark .switch { background:#30374d; }
body.dark .switch i { transform:translateX(13px); background:var(--green); }

/* Callside brand layer */
:root { --bg:#f4f3ed; --surface:#fffefa; --surface-soft:#faf9f3; --text:#141722; --muted:#7d7e85; --line:#e5e4dc; --primary:#1a1d2d; --primary-dark:#30354c; --sidebar:#11131f; --sidebar-text:#a1a4b5; --green:#b7f34a; --orange:#ff7d5c; --purple:#8f7aff; --shadow:0 16px 42px rgba(18,21,35,.08); }
body { background:var(--bg); color:var(--text); }
.brand-mark { background:linear-gradient(135deg,#d6ff62,#82c830); color:#131722; box-shadow:0 8px 22px rgba(139,206,47,.3); }
.primary-button { color:#11131e; background:var(--green); box-shadow:0 10px 22px rgba(126,180,38,.22); }
.primary-button:hover { color:#11131e; background:#c7ff67; }
.app-shell .brand-mark { color:#11131e; }
.nav-item.active { color:#11131e; background:linear-gradient(90deg,#c9fb5c,#a8e747); box-shadow:0 9px 22px rgba(183,243,74,.13); }
.nav-item.active .nav-icon { color:#11131e; }
.auth-view { background:#0b0d18; }
.auth-card { border:1px solid rgba(255,255,255,.11); background:#151827; box-shadow:0 28px 90px rgba(0,0,0,.34); color:#fff; }
.auth-brand strong { color:#fff; letter-spacing:.4px; text-transform:uppercase; }.auth-brand span { color:#969aaa; }.auth-intro h1 { color:#fff; }.auth-intro p:last-child { color:#a7aaba; }.auth-tabs { background:#202337; }.auth-tab { color:#8f94a9; }.auth-tab.active { color:#11131e; background:var(--green); box-shadow:none; }.auth-form label { color:#b4b7c5; }.auth-form input { border-color:#34384d; background:#1d2031; color:#fff; }.auth-form input::placeholder { color:#74798e; }.auth-form input:focus { border-color:#b7f34a; box-shadow:0 0 0 3px rgba(183,243,74,.14); }.auth-note { border-color:#303449; color:#858b9f; }.back-to-landing { display:inline-flex; margin:0 0 22px; padding:0; color:#8e94a9; background:transparent; font-size:10px; }.back-to-landing:hover { color:#d6ff62; }
.landing-view { min-height:100vh; overflow:hidden; color:#f7f8f2; background:#090b16; }
.landing-view.hidden { display:none; }
.landing-nav { position:relative; z-index:5; width:min(1240px,calc(100% - 64px)); height:86px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.landing-brand { display:inline-flex; align-items:center; gap:10px; color:#f7f8f2; text-decoration:none; }.landing-brand .brand-mark { width:35px; height:35px; border-radius:10px; font:800 19px Manrope,sans-serif; display:grid; place-items:center; }.landing-brand strong { display:block; font:800 15px Manrope,sans-serif; letter-spacing:2px; line-height:1; }.landing-brand small { display:block; margin-top:5px; color:#767b91; font-size:7px; font-weight:700; letter-spacing:1.8px; }.landing-nav-links { display:flex; align-items:center; gap:32px; }.landing-nav-links a { color:#9296aa; font-size:11px; text-decoration:none; transition:color .2s ease; }.landing-nav-links a:hover { color:#fff; }.nav-login { display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 16px; border:1px solid #34384d; border-radius:7px; color:#f7f8f2; background:transparent; font-size:11px; }.nav-login span { color:#b7f34a; font-size:15px; }.nav-login:hover { border-color:#b7f34a; }
.landing-hero { position:relative; width:min(1240px,calc(100% - 64px)); min-height:650px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px; }.landing-hero:before { content:''; position:absolute; z-index:0; left:-12%; top:-20%; width:65%; height:90%; background:radial-gradient(ellipse,rgba(65,77,153,.28),transparent 68%); filter:blur(5px); pointer-events:none; }.hero-copy,.hero-visual { position:relative; z-index:1; }.hero-copy { padding:44px 0 80px; max-width:620px; }.hero-kicker { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:#aeb3c2; font-size:9px; font-weight:800; letter-spacing:1.55px; }.kicker-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(183,243,74,.11); }.hero-copy h1 { margin:0; font:800 clamp(42px,5.1vw,74px)/.98 Manrope,sans-serif; letter-spacing:-4px; }.hero-copy h1 em,.section-intro h2 em { color:var(--green); font-style:normal; }.hero-lead { max-width:440px; margin:27px 0 29px; color:#a9adbc; font-size:15px; line-height:1.65; }.hero-actions { display:flex; align-items:center; gap:18px; }.hero-cta { height:49px; padding:0 22px; border-radius:9px; font-size:12px; }.hero-cta span { margin-left:8px; font-size:16px; }.ghost-button { display:inline-flex; align-items:center; gap:10px; color:#dfe2e8; background:transparent; font-size:11px; }.ghost-button span { color:var(--green); font-size:17px; }.hero-proof { display:flex; align-items:center; gap:13px; margin-top:43px; color:#777c90; font-size:9px; line-height:1.55; }.hero-proof strong { color:#c5c8d1; font-weight:600; }.proof-avatars { display:flex; align-items:center; }.proof-avatars span,.proof-avatars b { width:27px; height:27px; display:grid; place-items:center; margin-left:-5px; border:2px solid #090b16; border-radius:50%; color:#11131d; background:#9ca4bc; font-size:7px; font-weight:800; }.proof-avatars span:first-child { margin-left:0; background:#ff9a79; }.proof-avatars span:nth-child(2) { background:#b6f34b; }.proof-avatars span:nth-child(3) { background:#8f7aff; }.proof-avatars b { color:#aab0c1; background:#202337; font-size:12px; }
.hero-visual { min-height:570px; display:flex; align-items:center; justify-content:center; }.hero-glow { position:absolute; width:430px; height:430px; border-radius:50%; background:radial-gradient(circle,rgba(183,243,74,.12),rgba(87,91,178,.13) 39%,transparent 69%); filter:blur(2px); }.orbit { position:absolute; border:1px solid rgba(194,204,255,.11); border-radius:50%; transform:rotate(-24deg); }.orbit-one { width:510px; height:250px; }.orbit-two { width:420px; height:530px; transform:rotate(42deg); }.hero-card { position:absolute; border:1px solid rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(36,40,63,.96),rgba(20,23,38,.97)); box-shadow:0 26px 70px rgba(0,0,0,.38); backdrop-filter:blur(10px); }.hero-card-main { width:min(370px,78%); min-height:286px; padding:23px 24px; border-radius:17px; transform:rotate(-4deg); }.hero-card-top { display:flex; justify-content:space-between; align-items:center; }.live-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; border-radius:4px; color:#b9f656; background:rgba(183,243,74,.09); font-size:8px; font-weight:800; letter-spacing:.9px; }.live-chip i { width:5px; height:5px; border-radius:50%; background:#b7f34a; box-shadow:0 0 0 4px rgba(183,243,74,.13); }.hero-card-menu { color:#7e849b; letter-spacing:3px; }.hero-card-label { margin:37px 0 9px; color:#7e849b; font-size:8px; font-weight:800; letter-spacing:1.4px; }.hero-card h3 { margin:0; color:#fff; font:700 27px Manrope,sans-serif; letter-spacing:-1px; }.hero-card h3 span { color:#70758b; font:500 11px 'DM Sans'; margin:0 4px; }.hero-match-meta { display:flex; flex-direction:column; gap:7px; margin-top:14px; color:#aeb3c2; font-size:9px; }.hero-card-footer { display:flex; align-items:flex-end; justify-content:space-between; margin-top:25px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }.hero-role { color:#8f96ac; font-size:8px; font-weight:800; letter-spacing:1px; }.hero-card-footer strong { color:#b7f34a; font:700 17px Manrope,sans-serif; }.hero-card-footer small { display:block; margin-top:2px; color:#7e849b; font:400 8px 'DM Sans'; text-align:right; }.hero-card-float { right:4%; top:20%; display:flex; align-items:center; gap:10px; padding:12px; border-radius:11px; transform:rotate(7deg); }.float-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#11131e; background:#b7f34a; font-weight:800; }.hero-card-float small,.hero-card-side small { display:block; color:#8389a0; font-size:7px; font-weight:800; letter-spacing:1px; }.hero-card-float strong { display:block; margin-top:4px; color:#fff; font:700 15px Manrope,sans-serif; }.float-bars { display:flex; align-items:flex-end; gap:2px; height:22px; margin-left:8px; }.float-bars i { width:3px; border-radius:2px; background:#8f7aff; }.float-bars i:nth-child(1) { height:8px; }.float-bars i:nth-child(2) { height:13px; }.float-bars i:nth-child(3) { height:10px; }.float-bars i:nth-child(4) { height:19px; background:#b7f34a; }.float-bars i:nth-child(5) { height:15px; }.hero-card-side { left:0; bottom:20%; display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:11px; transform:rotate(-7deg); }.side-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#10131f; background:#8f7aff; }.hero-card-side strong { display:block; margin-top:4px; color:#fff; font:700 14px Manrope,sans-serif; }.hero-card-side div>span { display:block; margin-top:3px; color:#8389a0; font-size:8px; }
.landing-marquee { display:flex; justify-content:center; align-items:center; gap:28px; min-height:66px; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); color:#666b7e; font-size:9px; font-weight:800; letter-spacing:2px; }.landing-marquee i { color:var(--green); font-style:normal; font-size:10px; }.landing-section { width:min(1240px,calc(100% - 64px)); margin:0 auto; }.feature-section { padding:125px 0 138px; }.section-intro { max-width:610px; }.section-intro h2 { margin:0; font:800 clamp(35px,4vw,59px)/1.02 Manrope,sans-serif; letter-spacing:-3px; }.section-intro>p:last-child { max-width:410px; margin:23px 0 0; color:#858a9d; font-size:13px; line-height:1.65; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:62px; }.feature-card { position:relative; min-height:335px; padding:27px 27px 25px; border-radius:14px; overflow:hidden; }.feature-card-dark { color:#fff; background:#171a2b; }.feature-card-lime { color:#11131d; background:var(--green); }.feature-card-light { color:#11131d; background:#f3f0e6; }.feature-index { position:absolute; top:25px; right:27px; color:inherit; opacity:.45; font-size:9px; font-weight:800; letter-spacing:1px; }.feature-icon { width:45px; height:45px; display:grid; place-items:center; margin-bottom:64px; border-radius:12px; color:#11131d; background:#b7f34a; font:700 20px Manrope,sans-serif; }.feature-card-lime .feature-icon { background:#11131d; color:#b7f34a; }.feature-card-light .feature-icon { background:#ded8c7; }.feature-card h3 { margin:0; font:700 22px/1.1 Manrope,sans-serif; letter-spacing:-1px; }.feature-card p { max-width:245px; margin:13px 0 0; color:inherit; opacity:.62; font-size:10px; line-height:1.6; }.feature-link { position:absolute; bottom:25px; left:27px; color:inherit; font-size:9px; font-weight:800; }.feature-link b { margin-left:8px; font-size:14px; }.promise-section { display:grid; grid-template-columns:1.4fr 1fr; gap:30px; padding:88px 0 130px; border-top:1px solid rgba(255,255,255,.08); }.promise-quote { position:relative; max-width:660px; }.quote-mark { position:absolute; top:-39px; left:-3px; color:#b7f34a; font:800 76px Georgia,serif; line-height:1; }.promise-quote h2 { position:relative; margin:0; font:700 clamp(26px,3.1vw,45px)/1.12 Manrope,sans-serif; letter-spacing:-2px; }.promise-quote p { max-width:430px; margin:22px 0 27px; color:#858a9d; font-size:12px; line-height:1.6; }.promise-stats { align-self:end; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; padding-bottom:5px; }.promise-stats div { padding-top:18px; border-top:1px solid #34384d; }.promise-stats strong { display:block; color:#b7f34a; font:700 23px Manrope,sans-serif; }.promise-stats span { display:block; margin-top:7px; color:#83899c; font-size:9px; line-height:1.45; }.landing-footer { width:min(1240px,calc(100% - 64px)); min-height:100px; margin:0 auto; display:flex; align-items:center; gap:35px; border-top:1px solid rgba(255,255,255,.08); color:#6f7487; font-size:9px; }.landing-footer .landing-brand { margin-right:auto; }.landing-footer .landing-brand .brand-mark { width:28px; height:28px; font-size:14px; }.landing-footer .landing-brand strong { font-size:12px; }.landing-footer .landing-brand small { font-size:6px; }
.dark .landing-view { background:#070810; }.dark .auth-view { background:#070810; }.dark .auth-card { background:#151827; }
@media (max-width:900px) { .landing-hero { min-height:auto; grid-template-columns:1fr; padding-top:58px; }.hero-copy { padding:20px 0 0; }.hero-visual { min-height:535px; }.feature-grid { grid-template-columns:1fr; }.feature-card { min-height:275px; }.feature-icon { margin-bottom:48px; }.promise-section { grid-template-columns:1fr; }.promise-stats { margin-top:35px; }.landing-footer { gap:14px; flex-wrap:wrap; padding:22px 0; } }
@media (max-width:620px) { .landing-nav,.landing-hero,.landing-section,.landing-footer { width:min(100% - 34px,1240px); }.landing-nav { height:72px; }.landing-nav-links a { display:none; }.landing-hero { padding-top:36px; }.hero-copy h1 { font-size:43px; letter-spacing:-2.4px; }.hero-lead { font-size:13px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:16px; }.hero-proof { margin-top:31px; }.hero-visual { min-height:420px; }.hero-card-main { width:86%; min-height:260px; padding:19px; }.hero-card-main h3 { font-size:22px; }.hero-card-label { margin-top:25px; }.hero-card-float { right:-2%; top:10%; }.hero-card-side { left:-1%; bottom:12%; }.orbit-one { width:380px; }.orbit-two { width:330px; height:420px; }.landing-marquee { gap:13px; justify-content:flex-start; overflow:hidden; padding-left:22px; white-space:nowrap; }.landing-marquee span:nth-of-type(n+4),.landing-marquee i:nth-of-type(n+4) { display:none; }.feature-section { padding:83px 0 89px; }.section-intro h2 { letter-spacing:-2px; }.feature-grid { margin-top:38px; }.promise-section { padding:75px 0 90px; }.promise-stats { gap:9px; }.promise-stats strong { font-size:19px; }.promise-stats span { font-size:8px; }.landing-footer { font-size:8px; }.landing-footer>span:last-child { margin-left:auto; }.auth-card { padding:26px 22px 22px; }.back-to-landing { margin-bottom:18px; } }

/* Unified match / convocation form */
.convocation-prefill { display:flex; align-items:center; gap:11px; margin:-4px 0 18px; padding:11px 13px; border:1px solid rgba(143,122,255,.3); border-radius:14px; background:linear-gradient(135deg,rgba(143,122,255,.12),rgba(183,243,74,.08)); }
.convocation-prefill.hidden { display:none; }
.convocation-prefill-icon { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:9px; color:#11131e; background:linear-gradient(135deg,#b7f34a,#8f7aff); font-size:15px; }
.convocation-prefill-copy { display:grid; gap:2px; min-width:0; }
.convocation-prefill-copy strong { color:var(--text); font-size:13px; }
.convocation-prefill-copy span { color:var(--muted); font-size:12px; line-height:1.35; }
.convocation-prefill .text-button { margin-left:auto; white-space:nowrap; }
@media (max-width:760px) { .convocation-prefill { align-items:flex-start; flex-wrap:wrap; }.convocation-prefill .text-button { margin-left:39px; } }

.convocation-import-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-4px 0 16px; padding:12px 13px; border:1px solid rgba(183,243,74,.26); border-radius:13px; background:linear-gradient(135deg,rgba(183,243,74,.11),rgba(143,122,255,.09)); }
.convocation-import-copy { display:flex; align-items:center; gap:10px; min-width:0; }
.convocation-import-copy > div { display:grid; gap:3px; min-width:0; }
.convocation-import-copy strong { color:var(--text); font-size:12px; }
.convocation-import-copy span:not(.convocation-import-icon) { color:var(--muted); font-size:10px; line-height:1.35; }
.convocation-import-icon { display:grid; place-items:center; flex:0 0 29px; width:29px; height:29px; border-radius:9px; color:#11131e; background:var(--green); font-size:15px; }
.convocation-import-bar .secondary-button { flex:0 0 auto; height:34px; padding:0 13px; }
@media (max-width:620px) { .convocation-import-bar { align-items:flex-start; flex-direction:column; gap:11px; }.convocation-import-bar .secondary-button { width:100%; } }

.convocation-batch { margin:-3px 0 18px; padding:12px 13px; border:1px solid rgba(143,122,255,.28); border-radius:13px; background:var(--surface-soft); }
.convocation-batch.hidden { display:none; }
.convocation-batch-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.convocation-batch-head h3 { margin:1px 0 3px; color:var(--text); font-size:13px; }
.convocation-batch-head p:not(.eyebrow) { margin:0; color:var(--muted); font-size:10px; line-height:1.35; }
.convocation-batch-head .text-button { flex:0 0 auto; white-space:nowrap; }
.convocation-batch-list { display:grid; gap:7px; margin-top:11px; }
.convocation-batch-item { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:9px; min-width:0; padding:8px 9px; border:1px solid var(--line); border-radius:9px; background:var(--surface); text-align:left; }
button.convocation-batch-item { width:100%; color:var(--text); cursor:pointer; }
.convocation-batch-item:hover,.convocation-batch-item:focus-visible { border-color:rgba(143,122,255,.72); outline:0; }
.convocation-batch-item.is-active { border-color:var(--green); box-shadow:0 0 0 2px rgba(183,243,74,.12); }
.convocation-batch-item.is-warning { border-color:#d79a48; }
.convocation-batch-item.is-saved { opacity:.64; }
.convocation-batch-status { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; color:var(--muted); background:var(--surface-soft); font-size:11px; font-weight:900; }
.convocation-batch-item.is-saved .convocation-batch-status { color:#11131e; background:var(--green); }
.convocation-batch-copy { display:grid; min-width:0; gap:2px; }
.convocation-batch-copy strong,.convocation-batch-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.convocation-batch-copy strong { color:var(--text); font-size:10px; }
.convocation-batch-copy span { color:var(--muted); font-size:9px; }
.convocation-batch-action { color:var(--muted); font-size:9px; font-weight:800; white-space:nowrap; }
.convocation-batch-item.is-active .convocation-batch-action { color:var(--green); }
.convocation-batch-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.convocation-batch-actions:empty { display:none; }
.convocation-batch-actions .secondary-button,.convocation-batch-actions .primary-button { min-height:35px; font-size:10px; }
@media (max-width:520px) { .convocation-batch-head { flex-direction:column; gap:7px; }.convocation-batch-head .text-button { align-self:flex-start; }.convocation-batch-item { grid-template-columns:22px minmax(0,1fr); }.convocation-batch-action { grid-column:2; } }

.form-section { min-width:0; margin:0; padding:0; border:0; }
.form-section + .form-section { margin-top:20px; padding-top:18px; border-top:1px solid #edf0f4; }
.form-section legend { margin:0 0 13px; padding:0; color:var(--text); font-size:11px; font-weight:800; letter-spacing:.2px; }
.match-validation { display:grid; gap:9px; margin-top:18px; padding:12px 13px; border:1px solid rgba(238,155,67,.45); border-radius:12px; background:rgba(238,155,67,.08); }
.match-validation.hidden { display:none; }
.match-validation.is-error { border-color:rgba(198,93,103,.58); background:rgba(198,93,103,.08); }
.match-validation.is-success { border-color:rgba(41,167,122,.5); background:rgba(41,167,122,.08); }
.match-validation-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.match-validation-head strong { color:var(--text); font-size:12px; }
.match-validation-head span { color:var(--muted); font-size:10px; line-height:1.4; }
.match-validation-list { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.match-validation-list li { display:flex; gap:7px; align-items:flex-start; color:var(--text); font-size:10px; line-height:1.4; }
.match-validation-list li::before { content:'!'; display:grid; place-items:center; flex:0 0 16px; width:16px; height:16px; border-radius:50%; color:#6f4718; background:#f2b968; font-size:9px; font-weight:900; }
.match-validation.is-error .match-validation-list li::before { color:#fff; background:#c65d67; }
.match-validation-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:2px; }
.match-validation-actions button { min-height:32px; padding:0 11px; font-size:10px; }
body.dark .match-validation { background:rgba(238,155,67,.1); }
body.dark .match-validation.is-error { background:rgba(198,93,103,.12); }
body.dark .match-validation.is-success { background:rgba(41,167,122,.12); }
@media (max-width:520px) { .match-validation-actions { flex-direction:column; }.match-validation-actions button { width:100%; } }
.convocation-officials { margin:0 0 18px; padding:11px 13px; border:1px solid #edf0f4; border-radius:11px; background:#fafbfc; }
.convocation-officials.hidden { display:none; }
.convocation-officials-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.convocation-officials-head h3 { margin:1px 0 4px; color:var(--text); font-size:14px; letter-spacing:-.2px; }
.convocation-officials-head p:not(.eyebrow) { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.convocation-officials-badge { flex:0 0 auto; padding:6px 8px; border:1px solid rgba(143,122,255,.25); border-radius:999px; color:#7867d8; background:rgba(143,122,255,.1); font-size:9px; font-weight:800; white-space:nowrap; }
.convocation-official-list { display:grid; gap:8px; margin-top:13px; }
.convocation-official-option { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; padding:10px 11px; border:1px solid #e4e8ef; border-radius:11px; color:var(--text); background:var(--surface); text-align:left; transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease; }
.convocation-official-option:hover { border-color:rgba(143,122,255,.58); transform:translateY(-1px); }
.convocation-official-option.observer { cursor:default; border-style:dashed; border-color:rgba(41,167,122,.45); background:rgba(41,167,122,.06); }
.convocation-official-option.observer:hover { transform:none; border-color:rgba(41,167,122,.62); }
.convocation-official-option.observer .convocation-official-radio { color:#16865f; border-color:rgba(41,167,122,.45); background:rgba(41,167,122,.1); }
.convocation-official-option.selected { border-color:#8f7aff; background:linear-gradient(135deg,rgba(143,122,255,.13),rgba(183,243,74,.08)); box-shadow:0 7px 18px rgba(108,91,211,.1); }
.convocation-official-option:focus-visible { outline:3px solid rgba(143,122,255,.25); outline-offset:2px; }
.convocation-official-radio { display:grid; place-items:center; width:24px; height:24px; border:1px solid #cfd5e0; border-radius:50%; color:#11131e; background:var(--surface-soft); font-size:13px; font-weight:900; }
.convocation-official-option.selected .convocation-official-radio { border-color:#8f7aff; background:#8f7aff; }
.convocation-official-copy { min-width:0; }
.convocation-official-copy strong,.convocation-official-copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.convocation-official-copy strong { color:var(--text); font-size:11px; }
.convocation-official-copy span { margin-top:3px; color:var(--muted); font-size:9px; }
.convocation-official-meta { display:grid; justify-items:end; gap:3px; min-width:56px; }
.convocation-official-meta b { padding:3px 6px; border-radius:999px; color:#6974d8; background:rgba(105,116,216,.1); font-size:9px; }
.convocation-official-meta span { color:var(--muted); font-size:9px; white-space:nowrap; }
@media (max-width:520px) {
  .convocation-officials-head { flex-direction:column; gap:8px; }
  .convocation-officials-badge { align-self:flex-start; }
  .convocation-official-option { grid-template-columns:26px minmax(0,1fr); }
  .convocation-official-meta { grid-column:2; display:flex; align-items:center; justify-content:flex-start; gap:7px; min-width:0; }
}
.convocation-officials summary { cursor:pointer; color:var(--text); font-size:11px; font-weight:700; }
.convocation-official-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0 0; margin-top:10px; border-top:1px solid #edf0f4; }
.convocation-official-row strong,.convocation-official-row span { display:block; }
.convocation-official-row strong { color:var(--text); font-size:11px; }
.convocation-official-row span { margin-top:3px; color:var(--muted); font-size:9px; }
.convocation-official-row b { color:var(--primary); font-size:10px; white-space:nowrap; }
.modal-backdrop { align-items:flex-start; overflow-y:auto; padding:12px; }
.modal { margin:auto; max-height:calc(100dvh - 24px); min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
body.modal-open { overflow:hidden; }
@media (max-width:760px) {
  .modal-backdrop { align-items:flex-start; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); }
.modal.match-modal { width:100%; height:calc(100vh - 16px); height:calc(100dvh - 16px); max-height:none; margin:0; padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); border-radius:16px; overflow-y:auto; }
  .match-modal .modal-header { margin-bottom:18px; }
  .match-modal .modal-footer { padding-bottom:4px; }
}

/* Match list: fast scan on mobile, precise actions on desktop */
.match-view-tabs { display:flex; align-items:center; gap:6px; margin:-8px 0 14px; padding:4px; width:max-content; border-radius:11px; background:var(--surface-soft); }
.match-filter { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:8px; color:var(--muted); background:transparent; font-size:11px; }
.match-filter span { min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center; border-radius:9px; color:inherit; background:rgba(125,126,133,.1); font-size:9px; }
.match-filter.active { color:var(--text); background:var(--surface); box-shadow:0 3px 10px rgba(18,21,35,.08); }
.table-wrap th:last-child,.table-wrap td:last-child { text-align:right; }
.table-action { height:29px; padding:0 9px; border:1px solid var(--line); border-radius:7px; color:var(--primary); background:var(--surface-soft); font-size:10px; font-weight:700; }
.table-action:hover { border-color:var(--green); background:rgba(183,243,74,.12); }
.preview-action { color:var(--orange); border-color:rgba(238,155,67,.34); }
.preview-action:hover { color:var(--text); border-color:var(--orange); background:rgba(238,155,67,.12); }
.match-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.danger-action { color:#c65d67; }
.danger-action:hover { border-color:rgba(198,93,103,.45); background:rgba(198,93,103,.1); }
.matches-cards { display:none; }
.match-card { display:grid; grid-template-columns:66px 1fr; gap:14px; padding:17px 0; border-top:1px solid var(--line); }
.match-card:first-child { border-top:0; padding-top:4px; }
.match-card-date { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:72px; border-right:1px solid var(--line); }
.match-card-date strong { font:800 27px/1 Manrope,sans-serif; letter-spacing:-1px; }
.match-card-date span { margin-top:4px; color:var(--orange); font-size:10px; font-weight:800; text-transform:uppercase; }
.match-card-date small { margin-top:4px; color:var(--muted); font-size:9px; }
.match-card-main { min-width:0; }
.match-card-tags { display:flex; align-items:center; gap:5px; min-width:0; overflow:hidden; }
.match-chip { display:inline-flex; align-items:center; max-width:125px; height:23px; padding:0 8px; overflow:hidden; border:1px solid var(--line); border-radius:999px; text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; }
.competition-chip { color:var(--orange); border-color:rgba(255,125,92,.35); background:rgba(255,125,92,.08); }
.role-chip { color:var(--primary); background:var(--surface-soft); }
.match-card h3 { margin:9px 0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 14px Manrope,sans-serif; }
.match-card h3 span { color:var(--muted); font:500 10px 'DM Sans'; }
.match-card p { margin:0; overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.match-source-document { display:block; max-width:100%; margin-top:5px; overflow:hidden; color:var(--primary); text-overflow:ellipsis; white-space:nowrap; font-size:9px; font-weight:700; }
.match-card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px; }
.match-card-footer strong { color:var(--text); font:700 12px Manrope,sans-serif; }
@media (max-width:760px) {
  .match-view-tabs { width:100%; margin-top:-7px; }
  .match-filter { flex:1; justify-content:center; padding:0 7px; font-size:10px; }
  .matches-cards { display:block; padding:0 15px 4px; }
  .generic-view[data-page="matches"] .table-wrap { display:none; }
  .table-panel { overflow:visible; }
  .generic-view[data-page="matches"] .toolbar { gap:8px; }
  .generic-view[data-page="matches"] .toolbar .search-field { flex-basis:100%; }
  .generic-view[data-page="matches"] #matchStatus { display:none; }
  .match-card { grid-template-columns:54px 1fr; gap:10px; padding:15px 0; }
  .match-card-date { min-height:82px; }
  .match-card-date strong { font-size:25px; }
  .match-card h3 { font-size:13px; }
  .match-card-tags .status { padding:4px 7px; }
  .match-card-footer { align-items:flex-end; }
  .match-card-footer .match-actions { flex-wrap:wrap; justify-content:flex-end; }
  .match-card-footer .table-action { height:31px; padding:0 9px; }
}

/* Mobile-first navigation and guided start */
.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; }
.mobile-season-strip { display:none; }
.mobile-bottom-nav { display:none; }
.onboarding-card { padding:20px 22px; margin-bottom:18px; border:1px solid transparent; }
.onboarding-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.onboarding-top h2 { margin:0; font:700 15px Manrope,sans-serif; }
.onboarding-top p { margin:4px 0 0; font-size:10px; }
.onboarding-dismiss { flex:0 0 auto; }
.onboarding-progress { height:6px; margin:13px 0 14px; overflow:hidden; border-radius:999px; background:var(--line); }
.onboarding-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--orange),var(--green)); transition:width .3s ease; }
.onboarding-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.onboarding-grid button { display:flex; align-items:center; gap:8px; min-width:0; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); color:var(--text); text-align:left; transition:.2s ease; }
.onboarding-grid button:hover { border-color:var(--green); transform:translateY(-1px); }
.onboarding-grid button > span:nth-child(2) { display:grid; gap:3px; min-width:0; }
.onboarding-grid strong,.onboarding-grid small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.onboarding-grid strong { color:var(--text); font-size:10px; }
.onboarding-grid small { color:var(--muted); font-size:9px; }
.onboarding-grid b { margin-left:auto; color:var(--muted); font-size:13px; }
.onboarding-task-icon { display:grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border-radius:8px; color:var(--primary); background:rgba(183,243,74,.18); background:color-mix(in srgb,var(--green) 18%,transparent); font-size:13px; }
.onboarding-grid button.completed { opacity:.68; }
.onboarding-grid button.completed .onboarding-task-icon { color:#fff; background:var(--green); font-size:0; }
.onboarding-grid button.completed .onboarding-task-icon::after { content:'✓'; font-size:13px; }
.onboarding-card.fully-complete { border-color:color-mix(in srgb,var(--green) 32%,transparent); }
@media (max-width:760px) {
  .mobile-season-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-8px 0 18px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface); font-size:10px; }
  .mobile-season-strip label { min-width:0; }
  .mobile-season-strip select { max-width:145px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--surface-soft); font-size:10px; font-weight:700; outline:none; }
  .onboarding-card { padding:17px 15px; }
  .onboarding-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .onboarding-grid button { padding:9px; }
  .app-shell.ready .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:24; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; height:70px; padding:7px 8px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,254,250,.96); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(18px); }
  .mobile-nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; padding:4px 2px; border-radius:10px; color:var(--muted); background:transparent; font-size:9px; }
  .mobile-nav-item:hover { background:transparent; }
  .mobile-nav-item.active { color:var(--text); background:rgba(183,243,74,.14); background:color-mix(in srgb,var(--green) 14%,transparent); }
  .mobile-nav-icon { font-size:17px; line-height:1; }
  .mobile-nav-add { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:52px; height:52px; margin:-20px auto 0; border:4px solid var(--surface); border-radius:50%; color:#11131e; background:var(--green); box-shadow:0 8px 20px rgba(0,0,0,.28); font-size:25px; }
  .mobile-nav-add small { margin-top:-2px; font-size:8px; font-weight:700; }
  .page-content { padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
  .topbar { position:sticky; top:0; z-index:12; background:var(--surface); box-shadow:0 8px 18px rgba(0,0,0,.12); }
}

/* Global statistics dashboard */
.stats-page-heading { align-items:flex-end; }
.page-season-control { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:186px; height:39px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--surface); font-size:10px; font-weight:700; }
.page-season-control select { min-width:112px; border:0; outline:0; color:var(--text); background:transparent; font-size:11px; font-weight:800; }
.stats-season-control { display:flex; align-items:center; gap:10px; min-width:186px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--surface); font-size:10px; font-weight:700; }
.stats-season-control select { min-width:110px; border:0; outline:0; color:var(--text); background:transparent; font-size:12px; font-weight:800; }
.stats-kpi-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
.stats-kpi { position:relative; min-height:134px; padding:18px 16px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); }
.stats-kpi::before { content:''; position:absolute; inset:0 auto 0 0; width:4px; background:#8390a6; }.stats-kpi.orange::before { background:var(--orange); }.stats-kpi.blue::before { background:#3d86ef; }.stats-kpi.green::before { background:var(--green); }.stats-kpi.net::before { background:#b04bd6; }
.stats-kpi span,.stats-kpi small { display:block; color:var(--muted); font-size:10px; }.stats-kpi strong { display:block; margin:12px 0 7px; color:var(--text); font:800 24px/1 Manrope,sans-serif; letter-spacing:-.8px; }.stats-kpi strong em { color:var(--muted); font:600 11px 'DM Sans'; font-style:normal; letter-spacing:0; }.stats-kpi small { line-height:1.35; }
.stats-tabs { display:flex; gap:5px; margin-bottom:18px; padding:4px; overflow-x:auto; border-radius:11px; background:var(--surface-soft); }.stats-tab { flex:1 0 auto; min-height:39px; padding:0 15px; border:0; border-radius:8px; color:var(--muted); background:transparent; font-size:11px; font-weight:700; white-space:nowrap; }.stats-tab.active { color:var(--text); background:var(--surface); box-shadow:var(--shadow); }
.stats-panel-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px; margin-bottom:18px; }.stats-chart-card,.stats-detail-card,.stats-wide-card { min-width:0; padding:22px; }.stats-pie-layout { display:grid; grid-template-columns:minmax(220px,1fr) minmax(180px,1fr); align-items:center; gap:22px; min-height:300px; }.stats-pie { width:min(270px,100%); aspect-ratio:1; display:grid; place-items:center; margin:auto; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.75); }.stats-pie::after { content:''; position:absolute; width:126px; height:126px; border-radius:50%; background:var(--surface); }.stats-pie { position:relative; }.stats-pie > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }.stats-pie strong { color:var(--text); font:800 28px Manrope,sans-serif; }.stats-pie span { margin-top:3px; color:var(--muted); font-size:10px; }.stats-legend { display:flex; flex-direction:column; gap:10px; }.stats-legend-row { display:grid; grid-template-columns:11px minmax(0,1fr) auto auto; align-items:center; gap:8px; min-width:0; }.stats-legend-row i { width:11px; height:11px; border-radius:50%; }.stats-legend-row span { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.stats-legend-row strong { color:var(--text); font-size:11px; }.stats-legend-row small { min-width:38px; color:var(--muted); text-align:right; font-size:9px; }
.stats-detail-list { display:flex; flex-direction:column; gap:2px; }.stats-detail-row { display:grid; grid-template-columns:minmax(0,1fr) auto 54px 82px; align-items:center; gap:9px; min-height:46px; padding:7px 0; border-bottom:1px solid var(--line); }.stats-detail-row:last-child { border-bottom:0; }.stats-detail-label { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.stats-detail-row strong { color:var(--text); font-size:11px; }.stats-detail-row > span:not(.stats-detail-label) { color:var(--muted); text-align:right; font-size:9px; }.stats-detail-row b { color:var(--orange); text-align:right; font-size:10px; }.stats-wide-card { margin-bottom:18px; }.stats-bars { display:flex; flex-direction:column; gap:14px; }.stats-bar-row > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }.stats-bar-row span { overflow:hidden; color:var(--text); text-overflow:ellipsis; white-space:nowrap; font-size:11px; }.stats-bar-row strong { color:var(--orange); font-size:10px; white-space:nowrap; }.stats-bar-track { height:9px; overflow:hidden; border-radius:999px; background:var(--surface-soft); }.stats-bar-track i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#3d86ef,#a04bd4); transition:width .25s ease; }.stats-extra-list { margin-top:22px; }.stats-status-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:22px; }.stats-status-grid > div { display:flex; flex-direction:column; gap:7px; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }.stats-status-grid span { color:var(--muted); font-size:10px; }.stats-status-grid strong { color:var(--text); font:800 22px Manrope,sans-serif; }.stats-finance-highlight { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }.stats-finance-highlight > div { display:flex; flex-direction:column; gap:5px; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }.stats-finance-highlight span,.stats-finance-highlight small { color:var(--muted); font-size:10px; }.stats-finance-highlight strong { color:var(--text); font:800 20px Manrope,sans-serif; }.stats-note { margin-top:18px; color:var(--muted); font-size:10px; line-height:1.5; }
body.dark .stats-season-control select { color:var(--text); } body.dark .stats-season-control { background:var(--surface); } body.dark .stats-tab.active { background:#1c2130; }
@media (max-width:1100px) { .stats-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px) { .stats-page-heading { gap:14px; }.stats-season-control,.page-season-control { width:100%; justify-content:space-between; }.page-season-control select { flex:1; min-width:0; text-align:right; }.stats-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.stats-kpi { min-height:124px; padding:15px 13px; }.stats-kpi strong { font-size:20px; }.stats-panel-grid { grid-template-columns:1fr; gap:12px; }.stats-chart-card,.stats-detail-card,.stats-wide-card { padding:17px 15px; }.stats-pie-layout { grid-template-columns:1fr; gap:20px; min-height:0; }.stats-pie { width:min(245px,82vw); }.stats-legend { padding:0 4px; }.stats-detail-row { grid-template-columns:minmax(0,1fr) auto 47px; }.stats-detail-row b { grid-column:2 / -1; }.stats-finance-highlight { grid-template-columns:1fr; gap:9px; }.stats-status-grid { margin-top:16px; } }

/* Referee roles, observation and trend chart */
.role-chip.role-cc { color:#fff; border-color:#d34b58; background:#c43e4c; }.role-chip.role-a2 { color:#fff; border-color:#2675d9; background:#2675d9; }.role-chip.role-observer { color:#fff; border-color:#9a5bd1; background:#8f50c7; }
.role-chip.role-otm { color:#fff; border-color:#1d9e9f; background:#158182; }
.role-field-hidden { display:none !important; }.field-hint { color:var(--muted); font-size:9px; font-weight:400; line-height:1.35; }.form-grid select[multiple] { height:auto; min-height:92px; padding:7px 10px; }.form-grid select[multiple] option { padding:4px 2px; }
.stats-trend-card { margin-bottom:18px; padding:22px; }.stats-trend-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }.stats-trend-select { min-width:145px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; outline:0; color:var(--text); background:var(--surface-soft); font-size:10px; font-weight:700; }.stats-trend-chart { min-height:235px; padding:6px 0 0; }.stats-trend-chart svg { display:block; width:100%; height:auto; overflow:visible; }.stats-trend-chart line.stats-trend-grid { stroke:var(--line); stroke-dasharray:4 6; opacity:.8; }.stats-trend-chart text { fill:var(--muted); font:12px 'DM Sans',sans-serif; }.stats-trend-axis-label { font-size:10px !important; font-weight:800; letter-spacing:.03em; }.stats-trend-axis-left { fill:var(--orange) !important; }.stats-trend-axis-right { fill:var(--green) !important; }.stats-trend-axis-left:not(.stats-trend-axis-label),.stats-trend-axis-right:not(.stats-trend-axis-label) { font-size:14px !important; font-weight:800; paint-order:stroke fill; stroke:var(--surface); stroke-width:3px; stroke-opacity:.95; }.stats-trend-axis-line { stroke-width:2; stroke-dasharray:none !important; opacity:.65; }.stats-trend-axis-line-left { stroke:var(--orange) !important; }.stats-trend-axis-line-right { stroke:var(--green) !important; }.stats-trend-line,.stats-trend-cumulative-line { fill:none; stroke:var(--orange); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.stats-trend-cumulative-line { stroke:var(--green); stroke-width:4.5; filter:drop-shadow(0 0 2px rgba(41,167,122,.55)); }.stats-trend-point { fill:var(--orange); stroke:var(--surface); stroke-width:3; pointer-events:none; }.stats-trend-point.cumulative-point { fill:var(--green); }.stats-trend-bar { fill:rgba(238,155,67,.82); cursor:pointer; outline:0; transition:fill .15s ease,opacity .15s ease; }.stats-trend-bar:hover,.stats-trend-bar:focus { fill:var(--orange); }.stats-trend-hit,.progress-hit { fill:transparent; stroke:transparent; cursor:pointer; outline:0; }.stats-trend-hit:focus,.progress-hit:focus { fill:rgba(238,155,67,.16); stroke:var(--orange); stroke-width:1.5; }.stats-trend-legend { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:8px; color:var(--muted); font-size:10px; }.stats-trend-legend span { display:inline-flex; align-items:center; gap:7px; }.stats-trend-legend i { display:inline-block; flex:none; }.stats-trend-legend-bar { width:11px; height:11px; border-radius:3px; background:var(--orange); }.stats-trend-legend-line { width:20px; height:3px; border-radius:99px; background:var(--green); }.stats-trend-scale-summary { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }.stats-trend-scale-summary span { display:inline-flex; align-items:center; gap:7px; min-height:27px; padding:4px 9px; border:1px solid var(--line); border-radius:7px; background:var(--surface-soft); font-size:10px; }.stats-trend-scale-summary b { font-size:10px; }.stats-trend-scale-summary small { color:var(--muted); font-size:10px; }.stats-trend-scale-month { border-color:rgba(238,155,67,.55) !important; }.stats-trend-scale-month b { color:var(--orange); }.stats-trend-scale-total { border-color:rgba(41,167,122,.6) !important; }.stats-trend-scale-total b { color:var(--green); }
.stats-bar-row,.stats-legend-row { cursor:pointer; outline:0; border-radius:7px; }.stats-bar-row:focus,.stats-bar-row:hover,.stats-legend-row:focus,.stats-legend-row:hover { background:var(--surface-soft); }
.chart-tooltip { position:fixed; z-index:90; max-width:min(240px,calc(100vw - 20px)); padding:9px 11px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:#171b2a; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transform:translateY(4px); transition:opacity .14s ease,transform .14s ease; }.chart-tooltip.visible { opacity:1; transform:translateY(0); }.chart-tooltip strong,.chart-tooltip span { display:block; }.chart-tooltip strong { color:#fff; font-size:10px; font-weight:700; }.chart-tooltip span { margin-top:3px; color:#dfe5f4; font-size:12px; font-weight:800; }.chart-tooltip.series-monthly { border-color:rgba(238,155,67,.72); }.chart-tooltip.series-monthly span { color:var(--orange); }.chart-tooltip.series-cumulative { border-color:rgba(41,167,122,.78); }.chart-tooltip.series-cumulative span { color:var(--green); }
body:not(.dark) .chart-tooltip { border-color:rgba(23,32,51,.1); background:#172033; }
body.dark .stats-trend-select { border-color:var(--line); color:var(--text); background:#10131f; }
body.dark .match-chip.role-chip.role-cc { color:#fff; border-color:#d34b58; background:#a93242; } body.dark .match-chip.role-chip.role-a2 { color:#fff; border-color:#2675d9; background:#2068bd; } body.dark .match-chip.role-chip.role-observer { color:#fff; border-color:#9a5bd1; background:#7d45ae; }
@media (max-width:760px) { .stats-trend-card { padding:17px 15px; }.stats-trend-card .panel-heading { flex-direction:column; }.stats-trend-controls { width:100%; flex-direction:column; align-items:stretch; }.stats-trend-select { width:100%; }.stats-trend-chart { min-height:185px; }.stats-trend-chart svg { min-width:520px; }.stats-trend-chart { overflow-x:auto; } }

/* Mobile navigation polish: a scrollable drawer and a clearer bottom dock. */
@media (max-width:760px) {
  .sidebar {
    top:env(safe-area-inset-top);
    bottom:0;
    height:calc(100dvh - env(safe-area-inset-top));
    max-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-top:calc(27px + env(safe-area-inset-top));
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  .sidebar-close { top:calc(18px + env(safe-area-inset-top)); }
  .sidebar-bottom { margin-top:24px; padding-bottom:env(safe-area-inset-bottom); }

  .app-shell.ready .mobile-bottom-nav {
    height:calc(78px + env(safe-area-inset-bottom));
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    gap:4px;
    border-top:1px solid color-mix(in srgb,var(--line) 88%,transparent);
    box-shadow:0 -10px 30px rgba(18,21,35,.08);
  }
  .mobile-nav-item {
    position:relative;
    min-height:54px;
    padding:4px 3px 3px;
    gap:4px;
    border-radius:12px;
    font-size:9px;
    font-weight:600;
  }
  .mobile-nav-item.active { color:var(--text); background:transparent; }
  .mobile-nav-icon {
    display:grid;
    place-items:center;
    width:34px;
    height:28px;
    border-radius:10px;
    font-size:18px;
    line-height:1;
    transition:background .2s ease,transform .2s ease;
  }
  .mobile-nav-item.active .mobile-nav-icon {
    background:color-mix(in srgb,var(--green) 22%,transparent);
    transform:translateY(-1px);
  }
  .mobile-nav-add {
    position:relative;
    width:64px;
    height:64px;
    margin:-23px auto 0;
    padding:5px 4px 4px;
    gap:2px;
    border:1px solid color-mix(in srgb,var(--line) 86%,transparent);
    border-radius:20px;
    color:var(--text);
    background:var(--surface);
    box-shadow:0 12px 24px rgba(18,21,35,.18);
    font-size:9px;
  }
  .mobile-nav-add span {
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:50%;
    color:#11131e;
    background:var(--green);
    box-shadow:0 5px 12px rgba(126,180,38,.28);
    font-size:27px;
    line-height:1;
  }
  .mobile-nav-add small { margin:0; color:var(--muted); font-size:8px; font-weight:800; line-height:1; }
  .page-content { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
}

body.dark .app-shell.ready .mobile-bottom-nav { box-shadow:0 -10px 30px rgba(0,0,0,.28); }
body.dark .mobile-nav-add { border-color:var(--line); background:#151827; }

/* The match modal must always sit above the mobile dock, with an always reachable footer. */
.modal-backdrop { z-index:60; }
.toast { z-index:70; }
@media (max-width:760px) {
  .modal.match-modal {
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
    scroll-padding-bottom:0;
  }
  .match-modal .modal-footer {
    position:static;
    z-index:auto;
    margin-left:0;
    margin-right:0;
    padding:14px 0 calc(4px + env(safe-area-inset-bottom));
    background:transparent;
    box-shadow:none;
  }
}

/* Responsive trend chart: keep the complete scale visible on every viewport. */
.stats-trend-chart { width:100%; max-width:100%; overflow:hidden; }
.stats-trend-chart svg { width:100%; max-width:100%; min-width:0; height:220px; }
@media (max-width:760px) {
  .stats-trend-chart { min-height:185px; overflow:hidden; }
  .stats-trend-chart svg { width:100%; min-width:0; height:185px; }
  .stats-page-heading { align-items:flex-start; width:100%; }
  .stats-page-heading > div { width:100%; }
}

.payment-bulk-bar{display:grid;grid-template-columns:minmax(190px,1fr) auto auto;align-items:center;gap:16px;margin:14px 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.payment-bulk-copy{display:flex;flex-direction:column;gap:4px}.payment-bulk-copy strong{font-size:12px}.payment-bulk-copy span{font-size:10px;color:var(--muted)}.payment-bulk-copy b{color:var(--text)}
.payment-bulk-totals{display:flex;gap:14px;align-items:center;font-size:10px;color:var(--muted);white-space:nowrap}.payment-bulk-totals span{display:flex;flex-direction:column;gap:3px}.payment-bulk-totals b{color:var(--text);font-size:12px}
.payment-bulk-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}.payment-bulk-actions button:disabled{opacity:.45;cursor:not-allowed}.payment-bulk-actions .text-button{font-size:10px}
.payment-select-cell,.payment-select-heading{width:62px;text-align:center}.payment-select-control,.payment-card-select{display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:var(--muted);font-size:10px}.payment-select-control input,.payment-card-select input{position:absolute;opacity:0;pointer-events:none}.payment-select-control>span[aria-hidden],.payment-card-select>span[aria-hidden]{width:18px;height:18px;border:1px solid var(--line);border-radius:5px;background:var(--surface);display:inline-grid;place-items:center;transition:.18s ease}.payment-select-control input:checked+span[aria-hidden],.payment-card-select input:checked+span[aria-hidden]{background:var(--green);border-color:var(--green);box-shadow:0 2px 8px rgba(193,255,53,.28)}.payment-select-control input:checked+span[aria-hidden]::after,.payment-card-select input:checked+span[aria-hidden]::after{content:'✓';font-size:12px;font-weight:800;color:#10130d}.payment-not-applicable{color:var(--muted)}.payment-state{display:inline-flex;align-items:center;margin-top:4px;padding:3px 6px;border-radius:5px;font-size:9px;font-weight:700}.match-card-payment{margin-top:12px}.payment-card-select span:last-child{font-size:10px}
.finance-payment-selection{margin-bottom:18px;overflow:hidden}.finance-payment-selection .panel-heading{padding:20px 20px 0}.finance-payment-selection .payment-bulk-bar{margin:14px 20px}.finance-payment-table-wrap{border-top:1px solid var(--line)}.finance-payment-table-wrap table{min-width:620px}.finance-payment-select-cell,.finance-payment-select-heading{width:82px;text-align:center}.finance-payment-select-control{position:relative;justify-content:center;min-width:42px;min-height:40px;margin:auto}.finance-payment-select-control input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:auto;cursor:pointer}.finance-payment-select-control input:focus-visible + span[aria-hidden]{outline:3px solid rgba(81,102,232,.28);outline-offset:2px}
body.dark .payment-bulk-bar{border-color:var(--line);background:var(--surface)}
@media (max-width:760px){.payment-bulk-bar{grid-template-columns:1fr;gap:12px;padding:14px}.payment-bulk-totals{justify-content:space-between}.payment-bulk-actions{justify-content:flex-start;flex-wrap:wrap}.payment-bulk-actions .secondary-button{flex:1}.payment-select-heading,.payment-select-cell{display:none}.match-card-payment{display:flex}.payment-card-select{width:100%;padding:8px 0}.payment-card-select span:last-child{font-size:11px}.match-card-tags .payment-state{margin-top:0}}
@media (max-width:760px){.finance-payment-selection .panel-heading{padding:17px 15px 0}.finance-payment-selection .payment-bulk-bar{margin:12px 15px}.finance-payment-table-wrap{overflow-x:auto}.finance-payment-select-cell,.finance-payment-select-heading{display:table-cell}.finance-payment-select-cell{width:64px}.finance-payment-table-wrap table{min-width:560px}}
@media (max-width:760px){
  .finance-payment-table-wrap,.finance-history-table-wrap{overflow:visible}
  .finance-payment-table-wrap table,.finance-history-table-wrap table{display:block;width:100%;min-width:0}
  .finance-payment-table-wrap thead,.finance-history-table-wrap thead{display:none}
  .finance-payment-table-wrap tbody,.finance-history-table-wrap tbody{display:flex;flex-direction:column}
  .finance-payment-table-wrap tbody tr,.finance-history-table-wrap tbody tr{display:grid;align-items:center;border-top:1px solid var(--line);border-top:0}
  .finance-payment-table-wrap tbody tr+tr,.finance-history-table-wrap tbody tr+tr{border-top:1px solid var(--line)}
  .finance-payment-table-wrap tbody td,.finance-history-table-wrap tbody td{padding:12px 10px;border-top:0;min-width:0}
  .finance-payment-table-wrap tbody td[colspan],.finance-history-table-wrap tbody td[colspan]{grid-column:1 / -1}
  .finance-payment-table-wrap tbody tr{grid-template-columns:42px minmax(0,1fr) auto}
  .finance-payment-table-wrap tbody td:nth-child(1){grid-column:1;grid-row:1 / span 2;padding-left:4px;padding-right:3px}
  .finance-payment-table-wrap tbody td:nth-child(2){grid-column:2;grid-row:1;padding-bottom:2px;color:var(--text);font-weight:700}
  .finance-payment-table-wrap tbody td:nth-child(3){grid-column:2;grid-row:2;padding-top:2px;overflow:hidden}
  .finance-payment-table-wrap tbody td:nth-child(3) strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .finance-payment-table-wrap tbody td:nth-child(4){grid-column:3;grid-row:1 / span 2;padding-left:8px;padding-right:10px;text-align:right;white-space:nowrap}
  .finance-history-table-wrap tbody tr{grid-template-columns:minmax(0,1fr) auto}
  .finance-history-table-wrap tbody td:nth-child(1){grid-column:1;grid-row:1;padding-bottom:2px;color:var(--text);font-weight:700}
  .finance-history-table-wrap tbody td:nth-child(2){grid-column:1;grid-row:2;padding-top:2px;overflow:hidden}
  .finance-history-table-wrap tbody td:nth-child(2) strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .finance-history-table-wrap tbody td:nth-child(3){grid-column:2;grid-row:2;padding-left:8px;padding-right:4px;white-space:nowrap}
  .finance-history-table-wrap tbody td:nth-child(4){grid-column:2;grid-row:1;padding-left:8px;padding-right:10px;text-align:right;white-space:nowrap}
}
/* Trend chart interaction polish */
.stats-trend-point { stroke:rgba(255,255,255,.78); stroke-width:2.5; }
.stats-trend-bar { fill:var(--orange); }
.stats-trend-legend-bar { background:var(--orange); }
.chart-tooltip.series-monthly { border-color:rgba(238,155,67,.72); }
.chart-tooltip.series-monthly span { color:var(--orange); }

/* Finance uses the same match cards as the match list. */
.finance-payment-selection,.finance-history-panel,.finance-upcoming-panel { overflow:hidden; }
.finance-history-panel,.finance-upcoming-panel { margin-bottom:18px; }
.finance-payment-selection .panel-heading,.finance-history-panel .panel-heading,.finance-upcoming-panel .panel-heading { margin-bottom:0; padding:20px 20px 0; }
.finance-payment-cards,.finance-history-cards,.finance-upcoming-cards { padding:0 20px 14px; }
.finance-payment-selection .payment-bulk-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 20px; }
.finance-payment-selection .payment-bulk-copy span { color:var(--orange); font:800 13px Manrope,sans-serif; }
.finance-payment-selection .payment-bulk-actions { margin-left:auto; }
.finance-match-card { padding-top:15px; padding-bottom:15px; }
.finance-match-payment { display:flex; align-items:center; justify-content:flex-end; gap:9px; min-width:0; }
.finance-match-payment .status { white-space:nowrap; }
.finance-payment-card-select { flex:none; }
.finance-payment-card-select span:last-child { color:var(--muted); font-size:10px; font-weight:700; }
.finance-payment-card-select:hover span:last-child { color:var(--text); }
.finance-payment-action { min-height:30px; }
@media (max-width:760px) {
  .finance-payment-selection .panel-heading,.finance-history-panel .panel-heading,.finance-upcoming-panel .panel-heading { padding:17px 15px 0; }
  .finance-payment-selection .payment-bulk-bar { margin:12px 15px; flex-direction:column; align-items:stretch; gap:12px; }
  .finance-payment-selection .payment-bulk-actions { width:100%; margin-left:0; }
  .finance-payment-selection .payment-bulk-actions button { width:100%; }
  .finance-payment-cards,.finance-history-cards,.finance-upcoming-cards { padding:0 15px 5px; }
  .finance-match-card { padding-top:15px; padding-bottom:15px; }
  .finance-match-payment { flex-wrap:wrap; gap:6px; }
  .finance-payment-card-select { width:auto; padding:0; }
  .finance-payment-card-select span:last-child { font-size:10px; }
}

/* Shared responsive pagination for every long list. */
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px 18px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:10px;
}
.pagination-summary { white-space:nowrap; }
.pagination-controls { display:flex; align-items:center; gap:4px; }
.pagination-button {
  min-width:29px;
  height:29px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--muted);
  background:var(--surface);
  font:700 10px/1 Manrope,sans-serif;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}
.pagination-button:hover:not(:disabled) { color:var(--text); border-color:var(--primary); transform:translateY(-1px); }
.pagination-button.active { color:#11131e; border-color:var(--green); background:var(--green); box-shadow:0 3px 12px rgba(193,255,53,.18); }
.pagination-button:disabled { opacity:.38; cursor:not-allowed; }
.pagination-ellipsis { padding:0 3px; color:var(--muted); }
.table-panel > [data-pagination-host="matches"] .pagination { margin-top:0; }
.stats-detail-list > .pagination { margin:4px -1px -1px; }
.stats-bars + .pagination { margin-top:4px; }
.progress-rows > .pagination { margin:4px -1px -1px; }
.trips-list > .pagination { margin:4px -1px -1px; }
@media (max-width:760px) {
  .pagination { flex-direction:column; align-items:stretch; padding:12px 15px 15px; }
  .pagination-controls { justify-content:space-between; gap:5px; }
  .pagination-button { flex:1; max-width:42px; }
  .pagination-arrow { flex:0 0 36px; }
}

/* Calendar integrations */
.calendar-page-heading { align-items:flex-end; }
.calendar-intro { display:flex; align-items:center; gap:16px; margin-bottom:18px; padding:20px 22px; border:1px solid rgba(81,102,232,.18); background:linear-gradient(135deg,var(--surface),var(--surface-soft)); }
.calendar-intro h2 { margin:0; font:800 16px Manrope,sans-serif; }
.calendar-intro p { margin:6px 0 0; font-size:11px; line-height:1.55; }
.calendar-intro-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--primary),#8b75ec); font-size:22px; box-shadow:0 8px 20px rgba(81,102,232,.2); }
.calendar-connection-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:18px; }
.calendar-connection-card { min-width:0; padding:20px 22px; }
.calendar-connection-top { display:flex; align-items:flex-start; gap:11px; min-width:0; }
.calendar-connection-top > div:nth-child(2) { min-width:0; flex:1; }
.calendar-connection-top h2 { margin:3px 0 0; font:800 14px Manrope,sans-serif; }
.calendar-connection-top p { margin:5px 0 0; font-size:10px; line-height:1.45; }
.calendar-provider-icon { width:35px; height:35px; flex:0 0 auto; display:grid; place-items:center; border-radius:10px; font:800 18px Manrope,sans-serif; }
.google-calendar-icon { color:#4285f4; background:rgba(66,133,244,.12); }
.apple-calendar-icon { color:var(--text); background:var(--surface-soft); }
.calendar-status { flex:0 0 auto; display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border-radius:999px; font-size:9px; font-weight:800; white-space:nowrap; }
.calendar-status-connected { color:#278b68; background:rgba(41,167,122,.13); }
.calendar-status-muted { color:var(--muted); background:var(--surface-soft); }
.calendar-meta { margin:17px 0 12px; color:var(--muted); font-size:10px; line-height:1.5; }
.calendar-card-actions { display:flex; align-items:center; gap:9px; min-height:32px; }
.calendar-card-actions .primary-button,.calendar-card-actions .secondary-button { min-height:34px; }
.calendar-help,.calendar-error { margin:11px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.calendar-error { color:#c65d67; }
.calendar-feed-row { display:flex; align-items:center; gap:7px; min-width:0; }
.calendar-feed-row input { min-width:0; flex:1; height:35px; padding:0 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:var(--surface-soft); font-size:9px; }
.calendar-feed-row button { flex:0 0 auto; height:35px; padding:0 11px; }
.calendar-settings { margin-bottom:18px; padding:22px; }
.calendar-settings .panel-heading { margin-bottom:17px; }
.calendar-setting-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.calendar-setting { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); cursor:pointer; }
.calendar-setting input { width:17px; height:17px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--primary); }
.calendar-setting span { display:flex; flex-direction:column; gap:5px; min-width:0; }
.calendar-setting strong { color:var(--text); font-size:11px; }
.calendar-setting small { color:var(--muted); font-size:9px; line-height:1.45; }
.calendar-reminder-list { display:flex; flex-direction:column; gap:9px; }
.calendar-reminder-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; min-width:0; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:var(--surface-soft); }
.calendar-reminder-toggle { display:flex; align-items:flex-start; gap:10px; min-width:0; cursor:pointer; }
.calendar-reminder-toggle input { width:17px; height:17px; flex:0 0 auto; margin:1px 0 0; accent-color:var(--primary); }
.calendar-reminder-toggle span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.calendar-reminder-toggle strong { color:var(--text); font-size:11px; }
.calendar-reminder-toggle small { color:var(--muted); font-size:9px; line-height:1.4; }
.calendar-reminder-duration { display:flex; align-items:center; gap:6px; min-width:0; }
.calendar-reminder-duration input,.calendar-reminder-duration select { height:34px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface); font:700 10px Manrope,sans-serif; }
.calendar-reminder-duration input { width:72px; padding:0 8px; }
.calendar-reminder-duration select { width:96px; padding:0 7px; }
.calendar-reminder-duration span { color:var(--muted); font-size:9px; white-space:nowrap; }
.calendar-reminder-remove { color:var(--muted); font-size:9px; white-space:nowrap; }
.calendar-reminder-remove:hover { color:var(--danger,#d75d6b); }
.calendar-reminder-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.calendar-reminder-actions .secondary-button { min-height:34px; }
.calendar-reminder-actions .calendar-help { margin:0; }
.calendar-settings-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; }
.calendar-settings-footer > span { font-size:9px; }
.calendar-settings-footer .primary-button { min-height:35px; }
.calendar-howto { display:flex; align-items:flex-start; justify-content:space-between; gap:26px; padding:22px; }
.calendar-howto h2 { margin:0; font:800 14px Manrope,sans-serif; }
.calendar-howto-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; flex:1; }
.calendar-howto-grid > div { display:flex; align-items:flex-start; gap:9px; min-width:0; }
.calendar-howto-grid b { width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--primary); font-size:10px; }
.calendar-howto-grid span { color:var(--muted); font-size:10px; line-height:1.5; }
.calendar-error-state { padding:10px; }
.calendar-loading { min-height:170px; }
@media (max-width:760px) {
  .calendar-page-heading { align-items:stretch; gap:13px; }
  .calendar-page-heading .secondary-button { width:100%; }
  .calendar-intro { align-items:flex-start; padding:17px; }
  .calendar-connection-grid { grid-template-columns:1fr; gap:12px; }
  .calendar-connection-card,.calendar-settings,.calendar-howto { padding:17px 15px; }
  .calendar-connection-top { flex-wrap:wrap; }
  .calendar-connection-top > .calendar-status { margin-left:46px; }
  .calendar-setting-list { grid-template-columns:1fr; }
  .calendar-reminder-row { grid-template-columns:minmax(0,1fr) auto; gap:10px; }
  .calendar-reminder-duration { grid-column:1 / -1; }
  .calendar-reminder-duration input { flex:1; width:auto; }
  .calendar-reminder-duration select { flex:1; width:auto; }
  .calendar-reminder-actions { align-items:stretch; flex-direction:column; }
  .calendar-reminder-actions .secondary-button { width:100%; }
  .calendar-settings-footer { align-items:stretch; flex-direction:column; }
  .calendar-settings-footer .primary-button { width:100%; }
  .calendar-howto { flex-direction:column; gap:17px; }
  .calendar-howto-grid { grid-template-columns:1fr; width:100%; gap:10px; }
}

/* Annuaire des collègues */
.colleague-page-heading { align-items:flex-end; }
.colleague-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 18px; }
.colleague-search { flex:1; max-width:560px; position:relative; }
.colleague-search input { width:100%; min-height:42px; padding:0 38px 0 38px; }
.colleague-search > span { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:17px; pointer-events:none; }
.colleague-search .clear-search { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:27px; height:27px; border:0; border-radius:50%; color:var(--muted); background:transparent; cursor:pointer; font-size:17px; }
.colleague-search .clear-search:hover { color:var(--text); background:var(--surface-strong); }
.colleague-control { display:grid; grid-template-columns:auto minmax(150px,1fr); align-items:center; gap:7px; color:var(--muted); font-size:9px; white-space:nowrap; }
.colleague-control select { min-height:40px; min-width:150px; padding:0 10px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface); font:700 10px Manrope,sans-serif; }
.colleague-count { color:var(--muted); font-size:11px; white-space:nowrap; }
.colleague-layout { display:grid; grid-template-columns:minmax(270px, .8fr) minmax(0, 1.45fr); align-items:start; gap:18px; }
.colleague-list-panel,.colleague-detail-panel { min-width:0; padding:20px; }
.colleague-list { display:grid; gap:8px; }
.colleague-card { display:grid; grid-template-columns:40px minmax(0,1fr) 18px; align-items:center; gap:11px; width:100%; padding:11px; border:1px solid transparent; border-radius:13px; text-align:left; color:var(--text); background:transparent; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.colleague-card:hover { border-color:var(--line); background:var(--surface-strong); transform:translateY(-1px); }
.colleague-card.is-selected { border-color:color-mix(in srgb,var(--primary) 55%,var(--line)); background:color-mix(in srgb,var(--primary) 10%,var(--surface)); }
.colleague-avatar { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#102015; background:linear-gradient(135deg,#c3ff3f,#75d5ac); font:800 12px Manrope,sans-serif; }
.colleague-avatar.large { width:52px; height:52px; font-size:15px; flex:0 0 auto; }
.colleague-card-copy { min-width:0; display:grid; gap:4px; }
.colleague-card-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 12px Manrope,sans-serif; }
.colleague-card-copy > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:10px; }
.colleague-card-roles { display:inline-flex; gap:3px; vertical-align:middle; }
.colleague-card-roles .colleague-role-tag { font-size:8px; padding:2px 5px; }
.colleague-card-arrow { color:var(--muted); font-size:20px; line-height:1; }
.colleague-detail-panel { min-height:420px; }
.colleague-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; margin-bottom:17px; }
.colleague-profile-title { display:flex; align-items:center; gap:13px; min-width:0; }
.colleague-profile-title h2 { margin:3px 0 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 20px Manrope,sans-serif; }
.colleague-role-list,.colleague-contact-list,.colleague-chip-list { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.colleague-role-tag { display:inline-flex; align-items:center; min-height:22px; padding:3px 8px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-strong); font:800 9px Manrope,sans-serif; letter-spacing:.02em; }
.colleague-role-tag.is-cc { color:#ffdce0; border-color:color-mix(in srgb,#df5260 70%,var(--line)); background:color-mix(in srgb,#df5260 25%,var(--surface)); }
.colleague-role-tag.is-a2 { color:#d5e7ff; border-color:color-mix(in srgb,#3e8dff 70%,var(--line)); background:color-mix(in srgb,#3e8dff 23%,var(--surface)); }
.colleague-contact-list { margin:0 0 18px; gap:8px 15px; }
.colleague-contact-list a { color:var(--text); text-decoration:none; font-size:10px; }
.colleague-contact-list a:hover { color:var(--primary); }
.colleague-stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:21px; }
.colleague-stat-grid > div { min-width:0; padding:12px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface-strong); }
.colleague-stat-grid span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; }
.colleague-stat-grid strong { display:block; margin-top:5px; color:var(--text); font:800 15px Manrope,sans-serif; }
.colleague-section { border-top:1px solid var(--line); padding-top:17px; margin-top:17px; }
.colleague-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.colleague-section h3 { margin:0 0 4px; font:800 13px Manrope,sans-serif; }
.colleague-section-heading p { margin:0; font-size:10px; }
.colleague-section-heading > .muted { font-size:10px; white-space:nowrap; }
.colleague-chip { padding:6px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface-strong); font-size:9px; }
.colleague-match-list { display:grid; gap:0; }
.colleague-match-row { display:grid; grid-template-columns:86px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.colleague-match-row:last-child { border-bottom:0; padding-bottom:0; }
.colleague-match-row > div:first-child { display:grid; gap:3px; }
.colleague-match-row > div:first-child strong { font-size:10px; }
.colleague-match-row > div:first-child span,.colleague-match-main span { color:var(--muted); font-size:9px; }
.colleague-match-main { min-width:0; display:grid; gap:4px; }
.colleague-match-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.colleague-match-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.colleague-match-meta { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.colleague-match-meta > strong { font-size:10px; }
.colleague-edit-form { display:grid; gap:13px; max-width:520px; }
.colleague-edit-form label { display:grid; gap:6px; }
.colleague-edit-form label > span { color:var(--muted); font-size:10px; }
.colleague-edit-form input { width:100%; min-height:40px; padding:0 11px; }
.colleague-edit-actions { display:flex; justify-content:flex-end; padding-top:4px; }
.colleague-duplicates { padding:17px 20px; margin-bottom:18px; border-color:color-mix(in srgb,#e3a34e 35%,var(--line)); }
.colleague-duplicate-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.colleague-duplicate-heading h3 { margin:3px 0 0; font:800 13px Manrope,sans-serif; }
.colleague-duplicate-heading > span { color:var(--muted); font-size:10px; }
.colleague-duplicate-list { display:grid; gap:8px; }
.colleague-duplicate-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-top:1px solid var(--line); }
.colleague-duplicate-row:first-child { border-top:0; }
.colleague-duplicate-row > div { min-width:0; display:grid; gap:6px; }
.colleague-duplicate-row .muted { font-size:9px; }
.colleague-duplicate-chips { display:flex; flex-wrap:wrap; gap:6px; }
.colleague-duplicate-chip { padding:5px 8px; border-radius:8px; background:var(--surface-strong); color:var(--muted); font-size:9px; }
.colleague-duplicate-chip strong { color:var(--text); }
.colleague-loading { min-height:180px; display:grid; place-items:center; }
.colleague-error { min-height:280px; display:grid; place-items:center; }
@media (max-width:900px) { .colleague-layout { grid-template-columns:1fr; }.colleague-detail-panel { min-height:0; }.colleague-list-panel { padding-bottom:15px; } }
@media (max-width:760px) { .colleague-page-heading { align-items:stretch; gap:13px; }.colleague-toolbar { align-items:stretch; flex-direction:column; }.colleague-search { max-width:none; }.colleague-control { grid-template-columns:1fr; gap:5px; }.colleague-control select { width:100%; }.colleague-list-panel,.colleague-detail-panel { padding:16px 14px; }.colleague-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.colleague-duplicate-row { align-items:stretch; flex-direction:column; }.colleague-duplicate-row .secondary-button { width:100%; }.colleague-match-row { grid-template-columns:70px minmax(0,1fr); gap:9px; }.colleague-match-meta { grid-column:2; justify-content:space-between; }.colleague-profile-title h2 { font-size:17px; } }

/* Assistant avant-match : une seule vue courte, lisible et actionnable. */
.preview-modal { width:min(850px,100%); padding:28px; }
.preview-modal .modal-header { margin-bottom:20px; }
.preview-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,var(--surface-soft),var(--surface)); }
.preview-hero h3 { margin:0; color:var(--text); font:800 20px/1.25 Manrope,sans-serif; letter-spacing:-.5px; }
.preview-hero h3 span { color:var(--muted); font:500 12px 'DM Sans'; }
.preview-hero p:not(.eyebrow) { margin:7px 0 0; color:var(--muted); font-size:11px; }
.preview-role-chip { flex:0 0 auto; padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:var(--primary); background:var(--surface); font-size:10px; font-weight:800; text-align:right; }
.preview-role-chip.role-cc { color:#fff; border-color:#c43e4c; background:#c43e4c; }
.preview-role-chip.role-a2 { color:#fff; border-color:#2675d9; background:#2675d9; }
.preview-role-chip.role-observer { color:#fff; border-color:#8f50c7; background:#8f50c7; }
.preview-kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0; }
.preview-kpi-grid article { min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.preview-kpi-grid span,.preview-kpi-grid small { display:block; color:var(--muted); font-size:10px; }
.preview-kpi-grid strong { display:block; margin:6px 0 2px; color:var(--text); font:800 22px Manrope,sans-serif; }
.preview-public-note { display:flex; align-items:center; gap:10px; padding:12px 14px; margin:12px 0; border:1px solid rgba(183,243,74,.32); border-radius:12px; background:rgba(183,243,74,.08); }
.preview-public-note > span { display:grid; place-items:center; flex:0 0 26px; width:26px; height:26px; border-radius:8px; color:#11131e; background:var(--green); font-weight:800; }
.preview-public-note > div { min-width:0; flex:1; }
.preview-public-note strong,.preview-public-note small { display:block; }
.preview-public-note strong { color:var(--text); font-size:11px; }
.preview-public-note small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.4; }
.preview-public-note a,.preview-section-link,.preview-links a { color:var(--primary); font-size:10px; font-weight:700; white-space:nowrap; }
.preview-cache-action { flex:0 0 auto; padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface); font:700 10px 'DM Sans',sans-serif; cursor:pointer; }
.preview-cache-action:hover { border-color:var(--primary); color:var(--primary); }
.preview-cache-action:disabled { opacity:.6; cursor:wait; }
.preview-public-note.muted-note { border-color:var(--line); background:var(--surface-soft); }
.preview-public-note.muted-note > span { color:var(--text); background:var(--line); }
.preview-public-note.stale-note { border-color:rgba(238,155,67,.42); background:rgba(238,155,67,.08); }
.preview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.preview-section { min-width:0; padding:17px; margin-top:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.preview-grid .preview-section { margin-top:0; }
.preview-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.preview-section-heading .eyebrow { margin-bottom:5px; }
.preview-section h3 { margin:0; color:var(--text); font:700 14px Manrope,sans-serif; }
.preview-source-badge { flex:0 0 auto; padding:4px 7px; border-radius:999px; color:#268765; background:rgba(41,167,122,.12); font-size:9px; font-weight:700; }
.preview-source-badge-muted { color:var(--muted); background:var(--surface-soft); }
.preview-results { display:flex; flex-direction:column; gap:7px; padding:0; margin:0; list-style:none; }
.preview-result-row { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; border-radius:9px; background:var(--surface-soft); }
.preview-result-row > div { min-width:0; flex:1; }
.preview-result-row strong,.preview-result-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.preview-result-row strong { color:var(--text); font-size:11px; }
.preview-result-row small { margin-top:3px; color:var(--muted); font-size:9px; }
.preview-result-state { flex:0 0 auto; color:var(--muted); font-size:9px; font-weight:700; }
.preview-result-score { flex:0 0 auto; color:var(--orange); font-size:9px; font-weight:700; }
.preview-result-state.preview-win { color:#29a77a; }.preview-result-state.preview-loss { color:#d15a69; }.preview-result-state.preview-draw { color:#bd8b42; }
.preview-note { margin:11px 0 0; color:var(--muted); font-size:10px; }.preview-note strong { color:var(--text); }
.preview-local-history { display:grid; gap:7px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.preview-local-history .eyebrow { margin:0; }
.preview-inline-empty { padding:12px; border-radius:9px; color:var(--muted); background:var(--surface-soft); font-size:10px; line-height:1.45; }
.preview-confrontation { display:flex; flex-direction:column; gap:5px; padding:14px; border-left:3px solid var(--orange); border-radius:8px; background:var(--surface-soft); }
.preview-confrontation strong { color:var(--text); font-size:12px; }.preview-confrontation span { color:var(--muted); font-size:10px; }
.preview-tips { display:grid; gap:8px; padding:0 0 0 17px; margin:0; color:var(--muted); font-size:10px; line-height:1.45; }.preview-tips strong { color:var(--text); }
.preview-scorers { display:grid; gap:7px; padding:0; margin:0; list-style:none; }
.preview-scorers li { display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:9px; align-items:center; padding:9px 10px; border-radius:9px; background:var(--surface-soft); }
.preview-scorer-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.preview-scorer-team { margin:0 0 7px; overflow:hidden; color:var(--muted); font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.preview-scorers li > div { min-width:0; }.preview-scorers strong,.preview-scorers small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.preview-scorers strong { color:var(--text); font-size:11px; }.preview-scorers strong a { color:inherit; }.preview-scorers small { margin-top:3px; color:var(--muted); font-size:9px; }.preview-scorers b { color:var(--orange); font-size:11px; }.preview-rank { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:var(--text); background:var(--line); font:800 10px Manrope,sans-serif; }
.preview-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; padding:0 2px; }.preview-links a { padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
@media (max-width:760px) {
  .preview-modal { width:100%; height:calc(100dvh - 16px); max-height:none; margin:0; padding:calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); border-radius:16px; }
  .preview-hero { flex-direction:column; gap:12px; padding:16px; }.preview-hero h3 { font-size:17px; }.preview-role-chip { text-align:left; }
  .preview-kpi-grid { gap:7px; }.preview-kpi-grid article { padding:11px 9px; }.preview-kpi-grid strong { font-size:18px; }.preview-kpi-grid span,.preview-kpi-grid small { font-size:9px; }
  .preview-grid { grid-template-columns:1fr; gap:0; }.preview-grid .preview-section + .preview-section { margin-top:12px; }.preview-section { padding:14px; }
  .preview-scorer-columns { grid-template-columns:1fr; gap:12px; }
  .preview-public-note { align-items:flex-start; flex-wrap:wrap; }.preview-public-note a,.preview-public-note .preview-cache-action { align-self:center; }.preview-public-note > div { flex-basis:calc(100% - 36px); }
}
/* RefStats lot: responsive charts, planning and personalisation */
:root{--panel-bg:var(--surface);--border-color:var(--line);--text-primary:var(--text);--text-secondary:var(--muted);--surface-2:var(--surface-soft)}
body.dark{--panel-bg:#151824;--border-color:#2b3041;--text-primary:#f5f6fb;--text-secondary:#a7adbf;--surface-2:#202434}
.stats-season-picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;padding:12px 14px;border:1px solid var(--border-color,#2b3041);border-radius:14px;background:var(--panel-bg,#151824)}
.stats-season-picker-label{font-weight:700;color:var(--text-primary,#f5f6fb)}
.stats-season-options{display:flex;gap:8px;flex-wrap:wrap}.stats-season-options label{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:var(--surface-2,#202434);color:var(--text-secondary,#a7adbf);cursor:pointer}.stats-season-options input{accent-color:var(--primary,#b8ff38)}.stats-season-options label:has(input:checked){color:#10120c;background:var(--primary,#b8ff38)}
.stats-pie-svg-wrap{width:min(100%,300px);aspect-ratio:1;margin:auto}.stats-pie-svg{display:block;width:100%;height:100%;overflow:visible}.stats-pie-segment{stroke:var(--panel-bg,#151824);stroke-width:2;cursor:pointer;transition:filter .18s,transform .18s;transform-origin:120px 120px}.stats-pie-segment:hover,.stats-pie-segment:focus{filter:brightness(1.18);outline:none}.stats-pie-hole{fill:var(--panel-bg,#151824)}.stats-pie-total{font-size:28px;font-weight:800;fill:var(--text-primary,#f5f6fb)}.stats-pie-caption{font-size:12px;fill:var(--text-secondary,#a7adbf)}
.competition-role-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--border-color,#2b3041)}.competition-role-row:last-child{border-bottom:0}.role-mini{border-radius:999px;padding:5px 9px;font-size:12px;font-weight:700}.role-mini b{margin-left:4px}.role-mini-cc{color:#fff;background:#c43e4c}.role-mini-a2{color:#fff;background:#2675d9}.role-mini-other{color:#fff;background:#7a8498}
.stats-trend-chart{width:100%;overflow:hidden}.stats-trend-chart svg{display:block;width:100%;height:auto;min-width:0}.stats-trend-hit,.stats-trend-bar,.progress-hit{cursor:pointer}.stats-trend-hit{fill:transparent;stroke:transparent}.stats-trend-bar{fill:#ff7354;opacity:.88}.stats-trend-bar:hover{opacity:1;filter:brightness(1.12)}
.planning-heading-actions{display:flex;align-items:flex-end;gap:12px}.planning-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}.planning-summary article{padding:18px 20px;border:1px solid var(--border-color,#2b3041);border-radius:16px;background:var(--panel-bg,#151824)}.planning-summary span{display:block;color:var(--text-secondary,#a7adbf);font-size:13px}.planning-summary strong{display:block;margin-top:5px;font-size:25px}.planning-summary small{display:block;color:var(--text-secondary,#a7adbf);margin-top:4px}.planning-events-list{display:grid;gap:12px}.planning-event-card{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px;border:1px solid var(--border-color,#2b3041);border-radius:18px;background:var(--panel-bg,#151824)}.planning-event-date{display:flex;flex-direction:column;align-items:center;padding-right:16px;border-right:1px solid var(--border-color,#2b3041)}.planning-event-date strong{font-size:30px;line-height:1}.planning-event-date span{text-transform:uppercase;color:var(--primary,#b8ff38);font-weight:700}.planning-event-date small{color:var(--text-secondary,#a7adbf)}.planning-event-tags{display:flex;gap:8px;flex-wrap:wrap}.planning-event-type,.planning-event-fee{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700}.planning-event-type{background:rgba(184,255,56,.14);color:var(--primary,#b8ff38)}.type-training{background:rgba(76,154,255,.15);color:#74b2ff}.type-meeting{background:rgba(165,108,255,.15);color:#c0a1ff}.planning-event-fee{background:rgba(52,194,143,.14);color:#55d9a5}.planning-event-main h3{margin:8px 0 4px}.planning-event-main p,.planning-event-main small{color:var(--text-secondary,#a7adbf)}.planning-event-actions{display:flex;gap:8px;align-items:center}.danger-text{color:#ff7d83}.planning-event-modal{max-width:720px}.checkbox-line{display:flex;align-items:center;gap:8px}.checkbox-line input{width:auto}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.settings-card h3{margin:20px 0 10px}.accent-options{display:flex;gap:10px;flex-wrap:wrap}.accent-choice{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border-color,#2b3041);background:transparent;color:var(--text-primary,#f5f6fb);border-radius:12px;padding:9px 12px;cursor:pointer}.accent-choice i{width:16px;height:16px;border-radius:50%;background:var(--choice-color)}.accent-choice.active{border-color:var(--choice-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-color) 25%,transparent)}.theme-options{display:flex;gap:10px}.danger-button{border-color:rgba(255,125,131,.45);color:#ff7d83}.convocation-batch-item{position:relative}.convocation-batch-select{display:grid;grid-template-columns:32px minmax(0,1fr) auto;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}.convocation-batch-remove{border:0;background:transparent;color:#ff7d83;font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;position:absolute;right:5px;top:50%;transform:translateY(-50%)}
@media (max-width:760px){.stats-season-picker{align-items:flex-start}.stats-season-options{width:100%}.planning-heading-actions{align-items:stretch;flex-direction:column}.planning-summary{grid-template-columns:1fr}.planning-event-card{grid-template-columns:54px minmax(0,1fr);gap:11px;padding:14px}.planning-event-actions{grid-column:2;justify-content:flex-start}.planning-event-date{padding-right:10px}.planning-event-date strong{font-size:24px}.settings-grid{grid-template-columns:1fr}.competition-role-row{grid-template-columns:minmax(0,1fr) auto auto}.role-mini-other{grid-column:2 / -1}.stats-pie-svg-wrap{width:min(100%,240px)}}

/* Paramètres RefStats : apparence cohérente, utilisable en clair comme en sombre. */
:root { --on-primary:#10150a; }
body .primary-button { color:var(--on-primary); background:var(--primary); box-shadow:0 9px 22px color-mix(in srgb,var(--primary) 30%,transparent); }
body .primary-button:hover { color:var(--on-primary); background:var(--primary-dark); }
body .brand-mark,body .avatar,body .topbar-avatar { color:var(--on-primary); background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 88%,white),var(--primary-dark)); box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 30%,transparent); }
body .nav-item.active { color:var(--on-primary); background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 72%,var(--primary-dark))); box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 18%,transparent); }
body .nav-item.active .nav-icon { color:var(--on-primary); }

.settings-page { max-width:1180px; margin:0 auto; padding-bottom:16px; }
.settings-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 22px; padding:27px 29px; overflow:hidden; border:1px solid var(--line); border-radius:18px; color:var(--text); background:linear-gradient(118deg,var(--surface),color-mix(in srgb,var(--primary) 10%,var(--surface))); box-shadow:var(--shadow); }
.settings-hero h1 { margin:3px 0 7px; color:var(--text); font:800 clamp(27px,3vw,37px) Manrope,sans-serif; letter-spacing:-1.35px; }
.settings-hero > div:first-child > p:not(.eyebrow) { max-width:570px; margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.settings-hero .eyebrow { margin-bottom:4px; color:color-mix(in srgb,var(--primary) 70%,var(--muted)); }
.settings-hero-profile { display:flex; flex:0 0 auto; align-items:center; gap:11px; min-width:215px; padding:11px 14px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--primary) 8%,var(--surface)); }
.settings-avatar { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; color:var(--on-primary); background:linear-gradient(135deg,var(--primary),var(--primary-dark)); font:800 13px Manrope,sans-serif; }
.settings-hero-profile strong,.settings-hero-profile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.settings-hero-profile strong { max-width:175px; color:var(--text); font-size:12px; }
.settings-hero-profile small { max-width:175px; margin-top:4px; color:var(--muted); font-size:10px; }
.settings-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.settings-card { min-width:0; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.settings-card-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:21px; }
.settings-card-heading h2 { margin:2px 0 5px; color:var(--text); font:800 18px Manrope,sans-serif; letter-spacing:-.45px; }
.settings-card-heading .eyebrow { margin-bottom:0; color:var(--muted); }
.settings-card-heading .muted { margin:0; font-size:11px; line-height:1.45; }
.settings-card-icon { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:11px; color:var(--on-primary); background:linear-gradient(135deg,var(--primary),var(--primary-dark)); font-size:16px; font-weight:800; }
.settings-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-form label { display:flex; flex-direction:column; gap:7px; min-width:0; color:var(--text); font-size:10px; font-weight:700; }
.settings-form label small { color:var(--muted); font-size:9px; font-weight:500; line-height:1.35; }
.settings-form input { width:100%; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:10px; outline:0; color:var(--text); background:var(--surface-soft); font:600 12px 'DM Sans',sans-serif; transition:border-color .18s ease,box-shadow .18s ease; }
.settings-form input::placeholder { color:var(--muted); }
.settings-form input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); }
.settings-full { grid-column:1 / -1; }
.settings-form-footer { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:3px; padding-top:15px; border-top:1px solid var(--line); }
.settings-form-footer > span { max-width:280px; color:var(--muted); font-size:9px; line-height:1.45; }
.settings-form-footer .primary-button,.settings-form-footer .secondary-button { min-height:40px; }
.settings-theme-preview { display:flex; align-items:center; gap:10px; margin:-2px 0 20px; padding:12px; border:1px solid color-mix(in srgb,var(--primary) 20%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--primary) 7%,var(--surface-soft)); }
.settings-preview-dot { width:9px; height:9px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent); }
.settings-theme-preview div { min-width:0; flex:1; }
.settings-theme-preview strong,.settings-theme-preview small { display:block; }
.settings-theme-preview strong { color:var(--text); font-size:11px; }
.settings-theme-preview small { margin-top:3px; color:var(--muted); font-size:9px; }
.settings-preview-swatch { width:36px; height:22px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(135deg,var(--surface),var(--primary)); }
.settings-control-group + .settings-control-group { margin-top:20px; }
.settings-control-label { display:block; margin-bottom:9px; color:var(--text); font-size:10px; font-weight:700; }
.theme-options-large { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.theme-choice { display:flex; align-items:center; gap:9px; min-height:59px; padding:10px 11px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:var(--surface-soft); cursor:pointer; text-align:left; transition:.18s ease; }
.theme-choice:hover { border-color:color-mix(in srgb,var(--primary) 55%,var(--line)); transform:translateY(-1px); }
.theme-choice.active { border-color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 14%,transparent); }
.theme-choice i { width:29px; height:29px; flex:0 0 29px; display:grid; place-items:center; border-radius:9px; color:var(--on-primary); background:var(--primary); font-size:16px; font-style:normal; }
.theme-choice > span { display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700; }
.theme-choice small { color:var(--muted); font-size:9px; font-weight:500; }
.accent-options-large { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.accent-options-large .accent-choice { position:relative; justify-content:center; min-height:68px; padding:9px 5px; border-radius:11px; background:var(--surface-soft); flex-direction:column; gap:5px; }
.accent-options-large .accent-choice:hover { border-color:var(--choice-color); }
.accent-options-large .accent-choice i { width:23px; height:23px; border:2px solid color-mix(in srgb,var(--choice-color) 55%,white); box-shadow:0 4px 10px color-mix(in srgb,var(--choice-color) 30%,transparent); }
.accent-options-large .accent-choice span { color:var(--text); font-size:9px; font-weight:700; }
.accent-options-large .accent-choice b { position:absolute; top:5px; right:7px; color:var(--choice-color); font-size:11px; }
.accent-options-large .accent-choice.active { border-color:var(--choice-color); background:color-mix(in srgb,var(--choice-color) 10%,var(--surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--choice-color) 16%,transparent); }
.settings-logout-button { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:0 14px; border:1px solid #ee9aa2; border-radius:11px; color:#d85564; background:color-mix(in srgb,#d85564 6%,var(--surface)); font:700 11px 'DM Sans',sans-serif; transition:.18s ease; }
.settings-logout-button:hover { color:#fff; border-color:#d85564; background:#d85564; }
.settings-logout-button span { font-size:18px; }
body.dark .settings-card,body.dark .settings-hero { box-shadow:0 12px 30px rgba(0,0,0,.17); }
body.dark .settings-form input,body.dark .theme-choice,body.dark .accent-options-large .accent-choice { background:var(--surface-soft); }
@media (max-width:940px) { .settings-hero { align-items:flex-start; flex-direction:column; }.settings-hero-profile { width:100%; }.settings-hero-profile strong,.settings-hero-profile small { max-width:none; }.accent-options-large { grid-template-columns:repeat(5,minmax(54px,1fr)); } }
@media (max-width:700px) { .settings-hero { padding:21px 18px; border-radius:15px; }.settings-hero h1 { font-size:28px; }.settings-layout { grid-template-columns:1fr; gap:12px; }.settings-card { padding:19px 16px; border-radius:14px; }.settings-form { grid-template-columns:1fr; gap:12px; }.settings-form-footer { align-items:stretch; flex-direction:column; }.settings-form-footer > span { max-width:none; }.settings-form-footer button { width:100%; }.accent-options-large { grid-template-columns:repeat(5,minmax(0,1fr)); }.accent-options-large .accent-choice { min-height:62px; }.accent-options-large .accent-choice span { font-size:8px; }.settings-session-card { padding-bottom:16px; } }
/* Dashboard activity chart */
.dashboard-activity-svg{width:100%;min-height:190px;padding:8px 4px 0;overflow:hidden}.dashboard-activity-svg svg{display:block;width:100%;height:auto;min-width:0}.dashboard-activity-svg line{stroke:var(--line);stroke-dasharray:3 5;stroke-width:1}.dashboard-activity-svg text{fill:var(--muted);font:600 10px 'DM Sans',sans-serif}.dashboard-activity-bar{fill:var(--primary);opacity:.86;cursor:pointer;transition:opacity .18s,filter .18s}.dashboard-activity-bar:hover,.dashboard-activity-bar:focus{opacity:1;filter:brightness(1.08);outline:none}.dashboard-activity-line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.66;pointer-events:none}.activity-legend{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:var(--muted);font-size:10px}.activity-legend span{display:inline-flex;align-items:center;gap:7px}.activity-legend span i{width:9px;height:9px;border-radius:3px;background:var(--primary);display:inline-block}.activity-legend small{font-size:9px;text-align:right}
@media (max-width:760px){.dashboard-activity-svg{min-height:165px;padding-top:4px}.activity-legend{align-items:flex-start;flex-direction:column;gap:5px}.activity-legend small{text-align:left}}

/* Sélecteur de périodes des statistiques : compact, lisible, multi-saisons. */
.stats-season-picker { position:relative; align-items:center; justify-content:space-between; min-height:64px; padding:12px 14px; border-color:var(--line); background:var(--surface); }
.stats-season-picker-label { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.02em; }
.stats-season-menu { position:relative; min-width:235px; }
.stats-season-menu-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:39px; gap:12px; padding:0 12px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--surface-soft); font:800 11px 'DM Sans',sans-serif; text-align:left; }
.stats-season-menu-trigger:hover { border-color:color-mix(in srgb,var(--primary) 65%,var(--line)); }
.stats-season-menu-trigger b { color:var(--primary); font-size:15px; line-height:1; transition:transform .18s ease; }
.stats-season-menu-trigger[aria-expanded="true"] b { transform:rotate(180deg); }
.stats-season-menu-popover { position:absolute; z-index:28; top:calc(100% + 7px); right:0; display:none; width:min(340px,calc(100vw - 46px)); padding:13px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 18px 42px rgba(10,14,28,.22); }
.stats-season-menu-popover.is-open { display:block; }
.stats-season-menu-head { display:flex; flex-direction:column; gap:3px; padding:1px 2px 11px; border-bottom:1px solid var(--line); }
.stats-season-menu-head strong { color:var(--text); font-size:11px; }
.stats-season-menu-head small { color:var(--muted); font-size:9px; line-height:1.35; }
.stats-season-menu-all,.stats-season-menu-options label { display:flex; align-items:center; gap:8px; min-height:36px; color:var(--text); font-size:10px; font-weight:700; cursor:pointer; }
.stats-season-menu-all { margin-top:8px; padding:0 8px; border-radius:8px; background:color-mix(in srgb,var(--primary) 9%,var(--surface-soft)); }
.stats-season-menu-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; margin:9px 0 10px; }
.stats-season-menu-options label { padding:0 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface-soft); }
.stats-season-menu-all input,.stats-season-menu-options input { width:15px; height:15px; margin:0; accent-color:var(--primary); }
.stats-season-menu .text-button { width:100%; min-height:31px; border-top:1px solid var(--line); color:var(--muted); text-align:center; }
.accent-options-large { grid-template-columns:repeat(6,minmax(0,1fr)); }
@media (max-width:700px) { .stats-season-picker { align-items:stretch; flex-direction:column; gap:8px; }.stats-season-menu { width:100%; }.stats-season-menu-popover { right:auto; left:0; width:100%; }.stats-season-menu-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.accent-options-large { grid-template-columns:repeat(4,minmax(0,1fr)); }.accent-options-large .accent-choice { min-height:64px; } }

/* Comparaison de saisons : une carte = une échelle indépendante. */
.stats-trend-comparison { display:grid; gap:14px; margin-bottom:18px; }
.stats-trend-comparison-heading { margin-bottom:0; }
.stats-trend-season-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.stats-trend-card-season { margin-bottom:0; min-width:0; padding:18px; }
.stats-trend-card-season .panel-heading { align-items:flex-start; }
.stats-trend-card-season .stats-trend-chart { min-height:205px; }
.stats-season-menu-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; padding-top:2px; }
.stats-season-menu-actions .text-button { min-height:34px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface-soft); font-weight:700; }
.stats-season-menu-actions .text-button:last-child { color:#d85564; }
.settings-feedback { display:block; margin-top:7px; font-size:10px; font-weight:700; line-height:1.35; }
.settings-feedback.success { color:#239b68; }
.settings-feedback.error { color:#d85564; }

/* La couleur choisie suit aussi le bouton central de la navigation mobile. */
@media (max-width:760px) {
  .mobile-nav-item.active .mobile-nav-icon { background:color-mix(in srgb,var(--primary) 22%,transparent); }
  .mobile-nav-add span { color:var(--on-primary); background:var(--primary); box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 38%,transparent); }
}
@media (max-width:700px) { .stats-trend-season-grid { grid-template-columns:1fr; }.stats-trend-card-season { padding:17px 15px; }.stats-trend-card-season .stats-trend-chart { min-height:185px; } }

/* Centre de notifications : nouveautés et contrôles utiles, sans interrompre le travail. */
.topbar { position:relative; }
.notification-center { position:absolute; z-index:180; top:64px; right:20px; width:min(390px,calc(100vw - 32px)); max-height:min(560px,calc(100dvh - 94px)); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:0 22px 60px rgba(17,24,39,.22); }
.notification-center-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:1px 1px 13px; border-bottom:1px solid var(--line); }
.notification-center-header .eyebrow { margin-bottom:4px; font-size:8px; }
.notification-center-header h2 { margin:0; color:var(--text); font:800 16px Manrope,sans-serif; letter-spacing:-.4px; }
.notification-center-header .text-button { min-height:30px; padding:0 5px; color:var(--primary-dark); }
.notification-center-header .text-button:disabled { opacity:.42; cursor:default; }
.notification-list { display:grid; gap:9px; padding-top:12px; }
.notification-item { position:relative; display:flex; align-items:flex-start; gap:10px; min-height:83px; padding:11px 29px 11px 11px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); transition:opacity .18s ease; }
.notification-item.is-read { opacity:.62; }
.notification-item-icon { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:8px; color:var(--on-primary); background:var(--primary); font:800 13px Manrope,sans-serif; }
.notification-alert .notification-item-icon { color:#fff; background:#d85564; }
.notification-note .notification-item-icon { color:#fff; background:#5c72ed; }
.notification-item-copy { min-width:0; flex:1; }
.notification-item-copy strong { display:block; color:var(--text); font-size:11px; line-height:1.3; }
.notification-item-copy p { margin:4px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.notification-item-action { display:inline-flex; align-items:center; gap:5px; margin-top:7px; padding:0; color:var(--primary-dark); background:transparent; font:800 9px 'DM Sans',sans-serif; }
.notification-item-action span { font-size:12px; line-height:0; }
.notification-item-unread { position:absolute; top:12px; right:12px; width:6px; height:6px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent); }
.notification-button.has-unread { color:var(--primary-dark); }
.notification-button i[hidden] { display:none; }
body.dark .notification-center { box-shadow:0 24px 64px rgba(0,0,0,.48); }
@media (max-width:760px) { .notification-center { position:fixed; top:66px; right:10px; width:calc(100vw - 20px); max-height:calc(100dvh - 82px); padding:14px; border-radius:14px; }.notification-item { min-height:78px; }.notification-center-header h2 { font-size:15px; } }