@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; }
}

/* 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%; } }

.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; }
.convocation-officials { margin:0 0 18px; padding:11px 13px; border:1px solid #edf0f4; border-radius:11px; background:#fafbfc; }
.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; }
}