body.app { --primary:#176653; --soft:#edf3ef; --line:#dce3df; --muted:#64716a; background:#f3f5f2; color:#202d27; padding:18px 24px; font-family:'Segoe UI',sans-serif; font-size:14px; }
.app main { max-width:1440px; gap:12px; }
.app h1 { font-size:24px; margin:0 0 5px; letter-spacing:-.6px; }
.app h2 { font-size:18px; margin:0 0 10px; }
.app h3 { font-size:15px; margin:4px 0; }
.app p { margin:4px 0 10px; line-height:1.5; }
.app .card { padding:16px; border-radius:10px; border-color:var(--line); box-shadow:0 2px 3px #20362b03; }
.app .grid,.app .stack { gap:10px; }
.app label { font-size:13px; gap:5px; min-width:0; }
.app input,.app select,.app textarea { border-color:var(--line); border-radius:6px; padding:9px 11px; font-size:14px; min-width:0; }
.app textarea { min-height:96px; }
.app button,.app .button { border:1px solid #d9e2dc; border-radius:6px; min-height:38px; padding:8px 14px; font-size:14px; line-height:1.2; background:#edf3ef; color:#244c3c; }
.app button:hover:not(:disabled),.app .button:hover { background:#dcebe2; }
.app .primary { background:#176653; color:white; border-color:#176653; }
.app .primary:hover:not(:disabled) { background:#104d3e; }
.app button:disabled { background:#eff1ef; color:#9ba39e; border-color:#e6eae7; opacity:1; }
.app .danger,.app .reset-confirm { background:#faeded; color:#9d343a; border-color:#e9c8cb; }
.app :focus-visible { outline:3px solid #46a78d; outline-offset:2px; }
.app .notice { background:#f5f8f5; border-color:#dce6dd; }
.app .app-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:8px; padding:4px 0 12px; border-bottom:1px solid #dce3df; }
.app-brand { font-size:18px; font-weight:750; letter-spacing:-.5px; }
.app-brand small { display:block; font-size:11px; font-weight:500; color:#64716a; letter-spacing:1.2px; margin-top:3px; }
.app-nav { display:flex; gap:6px; flex-wrap:wrap; }
.app .app-nav a { text-decoration:none; color:#52665a; padding:9px 12px; border-radius:6px; }
.app .app-nav a[aria-current=page] { background:#dcebe2; color:#155440; font-weight:650; }
.app .tabs { display:flex; gap:5px; border-bottom:1px solid #dce3df; padding-bottom:10px; }
.app .tabs button[aria-selected=true] { background:#176653; color:white; }
.app .admin-header { background:none; border:0; padding:4px 0; box-shadow:none; }
.app #names { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app .dictionary-layout { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(360px,1.2fr); gap:22px; align-items:start; }
.app .team-list { display:grid; gap:4px; max-height:470px; overflow:auto; margin-top:10px; }
.app .team-list button { text-align:left; display:flex; justify-content:space-between; gap:12px; background:white; border-color:transparent; }
.app .team-list button[aria-pressed=true] { border-color:#86b5a1; background:#eaf3ed; color:#155440; }
.app .team-list small { color:#64716a; }
.app .team-inspector { padding-left:22px; border-left:1px solid #dce3df; display:grid; gap:12px; }
.app .team-inspector > .stack > p { font-size:12px; }
.app .lineup-editor-row { gap:8px; grid-template-columns:60px minmax(0,1fr) auto; }
.app .lineup-editor-row > div { display:grid; grid-template-columns:minmax(0,1fr) 80px; gap:10px; align-items:end; }
.app .lineup-editor-row > div > label:last-child { font-size:10px; text-align:center; justify-items:center; }
.app .lineup-editor-row { display:grid; align-items:end; }
.app .lineup-editor-row button { min-height:32px; padding:5px 9px; }
.app input[type=checkbox] { width:17px; height:17px; accent-color:#176653; }
.app .save-bar { position:sticky; bottom:10px; padding:12px; border:1px solid #dce3df; background:#fffffff5; border-radius:8px; z-index:2; }
.app button.save-bar.primary { background:#176653; color:white; }
.app .welcome { padding:32px; margin-top:24px; }
.app .welcome h1 { font-size:36px; }
.app .welcome > .grid { margin-top:24px; }
.app .welcome .card { padding:24px; align-content:start; }
.app .eyebrow { font-size:11px; letter-spacing:1.5px; color:#176653; font-weight:700; }
.app .wizard-steps { display:flex; gap:24px; padding:12px 24px; color:#718078; }
.app .wizard-steps [aria-current=step] { color:#176653; font-weight:700; }
.app .sport-choice { display:flex; align-items:center; gap:12px; padding:22px; border:1px solid #dce3df; border-radius:8px; background:white; cursor:pointer; font-size:18px; }
.app .sport-choice:has(:checked) { background:#e4f1e9; border-color:#176653; }
.app .wizard-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid #dce3df; padding-top:16px; }
.app .slot-row { grid-template-columns:1fr 1fr auto; align-items:end; }
.app #review { white-space:pre-line; line-height:1.8; }
.app .reset-warning { padding:20px; border:1px solid #dfb4b8; color:#852e38; background:#fff3f3; border-radius:8px; }
.app .inline-check { display:flex; gap:12px; align-items:center; }
.app .team-inspector { min-width:0; }
@media(max-width:600px) { .app .slot-row { grid-template-columns:1fr; } .app .welcome { padding:16px; } .app .welcome > .grid { grid-template-columns:1fr; } .app .wizard-steps { gap:16px; font-size:12px; } }
.app .dictionary-layout > div:first-child { display:grid; gap:8px; }
.app details { border:1px solid #e1e7e2; border-radius:7px; padding:10px; }
.app summary { cursor:pointer; font-weight:600; }
.app details[open] summary { margin-bottom:12px; }
.app .appearance-layout { display:grid; grid-template-columns:minmax(350px,1fr) minmax(350px,1.1fr); gap:22px; align-items:start; }
.app #appearance_colors { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app #appearance_colors label { display:flex; flex-direction:row; align-items:center; justify-content:space-between; font-size:11px; }
.app input[type=color] { width:40px; height:30px; padding:3px; flex-shrink:0; }
.app .logo-preview-slot { height:60px; }
.app .logo-preview-slot:has(img[hidden]) { display:none; }
.app .logo-preview-slot img { max-width:180px; }
.app .preview-panel { position:sticky; top:16px; }
.app .preview-board { aspect-ratio:16/9; border-radius:8px; padding:18px; background:var(--p-background); color:white; display:grid; gap:12px; grid-template-rows:50px 1fr 35px; overflow:hidden; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; background:var(--p-header_bg); color:var(--p-header_text); padding:8px; }
.preview-heading img { width:70px; height:36px; object-fit:contain; }
.preview-scores { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:center; }
.preview-scores > div { display:grid; align-content:center; gap:10px; border-radius:7px; background:var(--p-team_a_bg); color:var(--p-team_a_text); }
.preview-scores > div+div { background:var(--p-team_b_bg); color:var(--p-team_b_text); }
.preview-scores b { font-size:64px; line-height:1; background:var(--p-score_a_bg); color:var(--p-score_a_text); }
.preview-scores > div+div b { background:var(--p-score_b_bg); color:var(--p-score_b_text); }
.preview-clock { text-align:center; background:var(--p-clock_bg); color:var(--p-clock_text); font-size:24px; font-weight:700; }
.preview-pause { background:var(--p-pause_bg); color:var(--p-pause_text); padding:5px; font-size:10px; }
.app .preview-slate { width:100%; aspect-ratio:16/9; object-fit:contain; background:#101826; }
.app .field-card { padding:14px; grid-template-columns:1fr 1fr; gap:8px; }
.app .field-card > strong,.app .field-card > div,.app .field-card > a:first-of-type { grid-column:1/-1; }
.app .field-card > strong { font-size:18px; }
.app .field-card > div:nth-child(3) { font-size:12px; color:#64716a; }
.app .field-card a,.app .field-card button { font-size:12px; }
.app .operator-score-actions { display:grid; grid-template-columns:2fr 1fr; gap:8px; width:100%; }
.app .score-card { min-height:190px; gap:8px; padding:14px; }
.app .score { font-size:78px; }
.app .team-name { font-size:24px; }
.app .score-card .logo { width:35px; height:35px; }
.app .score-button { min-height:48px; font-size:24px; }
.app .clock { font-size:52px; }
.app .operator-screen main { max-width:1300px; }
.app #side_a,.app #side_b { gap:8px; text-align:center; display:grid; grid-template-columns:1fr 1fr; }
.app #side_a h2,.app #side_b h2,.app [id^=points_],.app [id^=fouls_],.app #side_a>.grid,.app #side_b>.grid { grid-column:1/-1; }
.app #side_a>.grid,.app #side_b>.grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.app #side_a,.app #side_b { padding:12px; gap:6px; }
.app #side_a h2,.app #side_b h2 { margin:0; }
.app [id^=points_] { font-size:54px !important; line-height:1; }
.app #attack { padding:8px 14px; }
.app #attack h2 { margin:0; }
.app #time { font-size:48px; margin:0; font-variant-numeric:tabular-nums; }
.app.operator-screen header:has(#summary),.app.operator-screen header:has(#time) { display:grid; grid-template-columns:1fr auto; column-gap:24px; row-gap:2px; align-items:center; }
.app.operator-screen header #field_name,.app.operator-screen header #title { grid-column:1; grid-row:1; }
.app.operator-screen header #info,.app.operator-screen header #state { grid-column:1; grid-row:2; margin:0; }
.app.operator-screen header #summary,.app.operator-screen header #time { grid-column:2; grid-row:1/3; margin:0; }
.app.operator-screen header #history:empty,.app.operator-screen header #timer:empty { display:none; }
.app.operator-screen header #status { grid-column:1; }
.app.operator-screen header #timer { grid-column:2; margin:0; font-size:16px; }
.app.operator-screen .score-card p { margin:0; }
.app.operator-screen .score-card { min-height:180px; gap:6px; }
.app.operator-screen .keyboard-hint { font-size:11px; margin:0; }
.app.operator-screen main > .grid:has(#finish) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.app #draw { grid-template-columns:1fr 1fr 1fr; align-items:end; }
.app #draw h2 { grid-column:1/-1; }
.app #correct { grid-template-columns:1fr 1fr 1fr; align-items:end; }
.app #attack { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.app #attack p { font-size:12px; margin:0; }
.app #shot { font-size:32px; }
.app #setup_form>p { font-size:12px; }
.app #setup_form>label { max-width:650px; }
.app #setup_form .stack .stack { border-top:1px solid #dce3df; padding-top:10px; }
.app #message:empty { display:none; }
@media(pointer:coarse) { .app button,.app .button { min-height:46px; } .app .keyboard-hint { display:none; } }
@media(max-width:900px) { .app .dictionary-layout,.app .appearance-layout { grid-template-columns:1fr; } .app .team-inspector { border-left:0; padding-left:0; } .app .preview-panel { position:static; } .app .team-list { max-height:220px; } .app #names { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { body.app { padding:10px; } .app .app-bar { align-items:start; flex-direction:column; gap:8px; } .app .app-nav a { padding:8px; } .app .tabs { flex-wrap:wrap; } .app #appearance_colors { grid-template-columns:repeat(2,minmax(0,1fr)); } .app #names { grid-template-columns:1fr; } .app .score { font-size:62px; } .app .team-name { font-size:18px; } .app #draw,.app #correct { grid-template-columns:1fr; } }