/* ======================================================================
   Interactive Code of Points — Uneven Bars — v2 design system
   "The judge's table": FIG paperwork precision meets broadcast scoreboard.
   Archivo (UI) + IBM Plex Mono (every number). Light + dark. No emoji —
   all glyphs are inline SVG from icons.js.
   ====================================================================== */

/* ---------- tokens ---------- */
:root {
    --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

    --bg: #f2efe7;
    --bg-accent: #ece8dd;
    --surface: #fdfcf8;
    --surface-2: #f5f2ea;
    --ink: #1b2437;
    --ink-strong: #10182a;
    --muted: #6b7284;
    --line: #d9d4c6;
    --line-strong: #b9b2a0;
    --accent: #0f4c81;          /* judge's ink blue */
    --gold: #a4770e;            /* CV & bonus */
    --gold-bg: #f4e8c8;
    --danger: #b3382e;
    --danger-bg: #f6e0dd;
    --ok: #2e6b40;
    --ok-bg: #dfeadf;
    --shadow: 0 1px 2px rgba(20, 26, 46, .06), 0 8px 28px -12px rgba(20, 26, 46, .18);
    --shadow-lg: 0 2px 6px rgba(16, 20, 36, .08), 0 24px 60px -20px rgba(16, 20, 36, .35);

    --g1: #2d7d76; --g2: #3765a8; --g3: #6d5aa8;
    --g4: #4a7d3c; --g5: #a4770e; --g6: #a84a3e;

    --dA: #7d8799; --dB: #5f7791; --dC: #3a7286; --dD: #2f6ea0;
    --dE: #4f5da5; --dF: #7a4f9e; --dG: #a03d70; --dH: #b3452f;
    --dI: #a4770e; --dJ: #8f6400;

    --radius: 12px;
    --radius-sm: 8px;

    /* Apparatus accent: app.js points --app-accent at the active
       apparatus' group color (registry `accent` in apparatus.js), so the
       room subtly changes color on VT/UB/BB/FX. --accent-ink is that
       accent folded into the ink pill color — dark in light theme, pale
       in dark theme — so active pills stay AA against --bg/--bg-accent. */
    --app-accent: var(--accent);
    --accent-ink: color-mix(in srgb, var(--app-accent) 42%, var(--ink-strong));
}

:root[data-theme="dark"] {
    --bg: #0f1420;
    --bg-accent: #0a0e18;
    --surface: #171e2e;
    --surface-2: #1e2739;
    --ink: #e4e2d8;
    --ink-strong: #f6f4ec;
    --muted: #8d94a6;
    --line: #2a3347;
    --line-strong: #3d4761;
    --accent: #6ba3d6;
    --gold: #d9ac3a;
    --gold-bg: #33290f;
    --danger: #d96b5f;
    --danger-bg: #3a1d1a;
    --ok: #7dbb8e;
    --ok-bg: #16301d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 60px -18px rgba(0, 0, 0, .7);

    --g1: #4fa39b; --g2: #6a92cf; --g3: #9b89d3;
    --g4: #77ab68; --g5: #d9ac3a; --g6: #d07a6e;

    --dA: #8d97a9; --dB: #7d95af; --dC: #5aa0b5; --dD: #5b95c9;
    --dE: #7f8dd6; --dF: #a97fce; --dG: #cf6d9f; --dH: #d97757;
    --dI: #d9ac3a; --dJ: #c29732;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    background:
        radial-gradient(1200px 500px at 85% -10%, color-mix(in srgb, var(--app-accent) 8%, transparent), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, color-mix(in srgb, var(--app-accent) 5%, transparent), transparent 60%),
        var(--bg);
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum"; }
:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--app-accent) 25%, transparent); }

/* ---------- header ---------- */
.masthead {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.masthead-inner {
    max-width: 1280px; margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand-mark {
    width: 38px; height: 38px; border-radius: 10px;
    background: var(--accent-ink); color: var(--bg);
    display: grid; place-items: center; flex: none;
    transition: background .25s;
}
:root[data-theme="dark"] .brand-mark { color: var(--bg-accent); }
.brand-mark .icon { width: 22px; height: 22px; }
.brand-text { line-height: 1.12; }
.brand-title { font-weight: 800; font-size: 16px; letter-spacing: .01em; color: var(--ink-strong); }
.brand-sub { font-size: 11px; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }

/* ---------- apparatus switcher ---------- */
.apparatus-switch {
    display: flex; gap: 2px; padding: 3px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface-2); flex: none;
}
.apparatus-switch button {
    padding: 5px 14px; border-radius: 999px;
    font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
    color: var(--muted);
    transition: color .15s, background .15s;
}
.apparatus-switch button:hover { color: var(--ink); }
.apparatus-switch button.active { background: var(--accent-ink); color: var(--bg); }
:root[data-theme="dark"] .apparatus-switch button.active { color: var(--bg-accent); }

.nav-tabs { display: flex; gap: 3px; margin-left: auto; }
.nav-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px; border-radius: 999px;
    font-weight: 600; font-size: 13.5px; color: var(--muted);
    transition: color .15s, background .25s;
}
.nav-tab:hover { color: var(--ink); background: var(--surface-2); }
.nav-tab.active { background: var(--accent-ink); color: var(--bg); }
:root[data-theme="dark"] .nav-tab.active { color: var(--bg-accent); }
.nav-tab .icon { width: 16px; height: 16px; }
.theme-toggle {
    width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center;
    color: var(--muted); border: 1px solid var(--line);
}
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }

/* ---------- layout ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 22px 20px 80px; }
.view { display: none; }
.view.active { display: block; animation: view-in .22s ease both; }
@keyframes view-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}
.view-title { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-strong); }
.view-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; max-width: 760px; }
.view-head { margin-bottom: 18px; }
/* accent signature under every view title — follows the apparatus color */
.view-head::after {
    content: ""; display: block; width: 54px; height: 3px; border-radius: 2px;
    margin-top: 10px;
    background: linear-gradient(90deg, var(--app-accent), color-mix(in srgb, var(--app-accent) 15%, transparent));
}

/* ---------- shared bits ---------- */
.card {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.diff-badge {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px; flex: none;
    font-family: var(--font-mono); font-weight: 700; font-size: 15px;
    color: #fff; background: var(--dD);
}
:root[data-theme="dark"] .diff-badge { color: #0d1220; }
.diff-A { background: var(--dA); } .diff-B { background: var(--dB); }
.diff-C { background: var(--dC); } .diff-D { background: var(--dD); }
.diff-E { background: var(--dE); } .diff-F { background: var(--dF); }
.diff-G { background: var(--dG); } .diff-H { background: var(--dH); }
.diff-I { background: var(--dI); } .diff-J { background: var(--dJ); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    background: var(--surface-2); border: 1px solid var(--line);
    padding: 3px 9px; border-radius: 999px;
}
.chip .icon { width: 13px; height: 13px; }
.chip.gold { color: var(--gold); background: var(--gold-bg); border-color: transparent; }
.chip.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.chip.danger { color: var(--danger); background: var(--danger-bg); border-color: transparent; }

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: 13.5px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    transition: transform .06s, background .15s, border-color .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); }
:root[data-theme="dark"] .btn.primary { color: var(--bg-accent); }
.btn.primary:hover { opacity: .92; }
.btn.subtle { border-color: transparent; background: var(--surface-2); color: var(--muted); }
.btn.subtle:hover { color: var(--ink); }
.btn .icon { width: 15px; height: 15px; }

/* ---------- shared card rhythm ----------
   JS-rendered panels (Meets / Judge / Fantasy) open with a
   .calc-pane-title and put their content in a .pane-body, so every card
   shares the same internal padding instead of per-view one-offs. */
.pane-body { padding: 2px 16px 16px; }
.pane-body > .palette-hint { padding: 10px 0 4px; text-align: left; }
.pane-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.pane-actions .btn { padding: 6px 13px; font-size: 12.5px; }

/* ---------- search inputs ---------- */
.search-field {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: 12px; padding: 10px 14px;
    box-shadow: var(--shadow);
}
.search-field:focus-within {
    border-color: var(--app-accent);
    box-shadow: var(--shadow), 0 0 0 3px color-mix(in srgb, var(--app-accent) 14%, transparent);
}
.search-field .icon { color: var(--muted); }
.search-field input {
    flex: 1; border: none; outline: none; background: none; font-size: 15px; color: var(--ink);
}
.search-field input::placeholder { color: var(--muted); opacity: .8; }

/* ---------- browse ---------- */
.browse-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-right: 2px; }
.group-btn {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--muted);
    padding: 5px 12px 5px 6px; font-size: 12.5px; font-weight: 600;
    transition: all .12s;
}
.group-btn .group-dot {
    width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--muted);
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
}
.group-btn.active { color: var(--ink-strong); border-color: var(--line-strong); background: var(--surface-2); }
.group-btn.active .group-dot { background: var(--gc, var(--ink)); color: #fff; }
.group-btn .group-count { color: var(--muted); font-family: var(--font-mono); font-size: 11px; }
.diff-btn {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
    font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--muted);
    background: var(--surface);
    transition: background .12s, color .12s, border-color .12s;
}
/* idle letters carry a hint of their ramp color, so the Value filter
   reads as a spectrum before anything is selected (kept mixed toward
   ink/line for contrast; the .active rules below still win) */
.diff-btn.diff-A { color: color-mix(in srgb, var(--dA) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dA) 40%, var(--line)); }
.diff-btn.diff-B { color: color-mix(in srgb, var(--dB) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dB) 40%, var(--line)); }
.diff-btn.diff-C { color: color-mix(in srgb, var(--dC) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dC) 40%, var(--line)); }
.diff-btn.diff-D { color: color-mix(in srgb, var(--dD) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dD) 40%, var(--line)); }
.diff-btn.diff-E { color: color-mix(in srgb, var(--dE) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dE) 40%, var(--line)); }
.diff-btn.diff-F { color: color-mix(in srgb, var(--dF) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dF) 40%, var(--line)); }
.diff-btn.diff-G { color: color-mix(in srgb, var(--dG) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dG) 40%, var(--line)); }
.diff-btn.diff-H { color: color-mix(in srgb, var(--dH) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dH) 40%, var(--line)); }
.diff-btn.diff-I { color: color-mix(in srgb, var(--dI) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dI) 40%, var(--line)); }
.diff-btn.diff-J { color: color-mix(in srgb, var(--dJ) 50%, var(--ink)); border-color: color-mix(in srgb, var(--dJ) 40%, var(--line)); }
.diff-btn.active { color: #fff; border-color: transparent; }
:root[data-theme="dark"] .diff-btn.active { color: #0d1220; }
.diff-btn.active.diff-A { background: var(--dA); } .diff-btn.active.diff-B { background: var(--dB); }
.diff-btn.active.diff-C { background: var(--dC); } .diff-btn.active.diff-D { background: var(--dD); }
.diff-btn.active.diff-E { background: var(--dE); } .diff-btn.active.diff-F { background: var(--dF); }
.diff-btn.active.diff-G { background: var(--dG); }
.diff-btn.active.diff-H { background: var(--dH); }
.diff-btn.active.diff-I { background: var(--dI); }
.diff-btn.active.diff-J { background: var(--dJ); }
.result-count { color: var(--muted); font-size: 12.5px; margin-left: auto; font-family: var(--font-mono); }

.group-header {
    display: flex; align-items: baseline; gap: 10px;
    margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--gc, var(--line-strong));
}
.group-header:first-child { margin-top: 0; }
.group-header .g-num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--gc, var(--muted)); }
.group-header h3 { font-size: 17px; font-weight: 800; color: var(--ink-strong); }
.group-header .g-count { color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

.element-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.element-card {
    position: relative; cursor: pointer; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--gc, var(--line-strong));
    transition: transform .1s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column;
}
.element-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ec-top { display: flex; align-items: center; gap: 9px; padding: 11px 12px 0; }
.ec-box { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ec-add {
    margin-left: auto; width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center; color: var(--muted);
    border: 1px solid var(--line); opacity: 0; transition: opacity .12s;
}
.element-card:hover .ec-add, .ec-add:focus-visible { opacity: 1; }
.ec-add:hover { color: var(--accent); border-color: var(--accent); }
.ec-add .icon { width: 14px; height: 14px; }
.ec-eponym { font-weight: 800; font-size: 16.5px; color: var(--ink-strong); padding: 7px 12px 0; letter-spacing: -.01em; }
.ec-name { font-size: 12.5px; color: var(--muted); padding: 4px 12px 0; line-height: 1.4; }
.ec-name.solo { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.ec-variants { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px 0; }
.ec-variant { font-size: 11px; font-weight: 700; color: var(--gc, var(--muted)); background: color-mix(in srgb, var(--gc, var(--muted)) 12%, transparent); border-radius: 6px; padding: 2px 7px; }
.ec-img {
    margin-top: 10px; background: #fff; border-top: 1px solid var(--line);
    height: 110px; display: grid; place-items: center; overflow: hidden;
}
.ec-img img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .ec-img { background: #e9e7df; }
.ec-img .no-img { color: var(--muted); }

.element-list-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    border-left: 4px solid var(--gc, var(--line-strong));
    cursor: pointer; margin-bottom: 8px;
}
.element-list-row:hover { box-shadow: var(--shadow); }
.el-row-name { font-weight: 600; color: var(--ink-strong); }
.el-row-sub { color: var(--muted); font-size: 12.5px; }
.el-row-box { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

.empty-note { text-align: center; color: var(--muted); padding: 60px 0; }

/* ---------- modal ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: color-mix(in srgb, var(--bg-accent) 55%, rgba(8, 10, 18, .55));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    padding: 4vh 16px;
    overflow-y: auto;
}
.modal-overlay.open { display: block; }
.modal {
    max-width: 720px; margin: 0 auto;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.modal-close { margin-left: auto; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); flex: none; }
.modal-close:hover { color: var(--ink); background: var(--surface-2); }
.modal-eponym { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink-strong); line-height: 1.15; }
.modal-copname { padding: 10px 22px 0; color: var(--ink); font-size: 14.5px; line-height: 1.5; }
.modal-copname em { color: var(--muted); font-style: normal; font-size: 12px; display: block; margin-bottom: 3px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.modal-img { margin: 16px 22px 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; min-height: 140px; overflow: hidden; }
:root[data-theme="dark"] .modal-img { background: #e9e7df; }
.modal-img img { max-height: 340px; object-fit: contain; mix-blend-mode: multiply; }
.modal-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 16px 22px 0; }
.modal-section { padding: 18px 22px 0; }
.modal-section h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.modal-variant { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 8px; }
.modal-variant:first-of-type { border-top: none; }
.modal-variant .v-eponym { font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
.modal-variant .v-name { color: var(--muted); font-size: 13px; }
.modal-variant .v-shown { color: var(--accent); font-weight: 700; }
.modal-variant.clickable { cursor: pointer; }
.modal-variant.clickable:hover, .modal-variant.clickable:focus-visible { background: var(--surface-2); outline: none; }
.modal-variant .v-view { margin-left: auto; align-self: center; color: var(--accent); font-weight: 700; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .12s; }
.modal-variant.clickable:hover .v-view, .modal-variant.clickable:focus-visible .v-view { opacity: 1; }
.modal-aliases { color: var(--muted); font-size: 13px; line-height: 1.7; }
.modal-aliases b { color: var(--ink); font-weight: 600; }
.modal-foot { display: flex; gap: 8px; padding: 20px 22px 22px; flex-wrap: wrap; }

/* ---------- calculator ---------- */
.calc-layout { display: grid; grid-template-columns: 320px 1fr 320px; gap: 16px; align-items: start; }
.calc-pane-title { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding: 14px 16px 10px; }
.calc-pane-title .icon { width: 14px; height: 14px; }

.palette { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
.palette .search-field { margin: 0 12px; box-shadow: none; }
.palette-results { overflow-y: auto; padding: 10px 12px 12px; flex: 1; }
.palette-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 8px 9px; border-radius: 9px; border: 1px solid transparent;
}
.palette-row:hover { background: var(--surface-2); border-color: var(--line); }
.palette-row .diff-badge { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }
.pr-name { font-weight: 600; font-size: 13.5px; color: var(--ink-strong); line-height: 1.25; }
.pr-sub { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.pr-add { margin-left: auto; color: var(--muted); }
.pr-add .icon { width: 15px; height: 15px; }
.palette-hint { color: var(--muted); font-size: 12.5px; padding: 14px; text-align: center; }

.routine-board { min-height: 320px; }
.routine-empty { text-align: center; color: var(--muted); padding: 70px 20px; }
.routine-empty .icon { width: 34px; height: 34px; opacity: .5; margin-bottom: 10px; }
.routine-list { padding: 6px 14px 14px; }
.routine-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
    padding: 9px 12px; position: relative;
}
.routine-item.dragging { opacity: .45; }
.routine-item.drag-over { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.routine-item .drag-handle { color: var(--muted); cursor: grab; touch-action: none; }
.routine-item .drag-handle .icon { width: 15px; height: 15px; }
.ri-ord { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); width: 18px; text-align: right; flex: none; }
.ri-main { flex: 1; min-width: 0; }
.ri-name { font-weight: 700; font-size: 14.5px; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-sub { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ri-sub .mono { font-size: 11px; }
.ri-counting { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
.ri-counting.no { background: var(--line-strong); }
.routine-item.excluded { border-style: dashed; }
.routine-item.excluded .ri-name { text-decoration: line-through; color: var(--muted); }
.ri-status { font-size: 11px; color: var(--danger); font-weight: 600; }
.ri-controls { display: flex; align-items: center; gap: 6px; }
.ri-btn { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--muted); border: 1px solid transparent; }
.ri-btn:hover { color: var(--ink); border-color: var(--line); background: var(--surface-2); }
.ri-btn.danger:hover { color: var(--danger); border-color: var(--danger); }
.ri-btn .icon { width: 14px; height: 14px; }
.ri-select {
    font-size: 11.5px; border: 1px solid var(--line); background: var(--surface-2);
    color: var(--ink); border-radius: 6px; padding: 2px 5px; max-width: 180px;
}
.connector { display: flex; align-items: center; gap: 8px; padding: 1px 0 1px 34px; height: 26px; }
.conn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; color: var(--muted);
    border: 1px dashed var(--line-strong); border-radius: 999px; padding: 3px 10px;
}
.conn-btn:hover { color: var(--ink); border-color: var(--muted); }
.conn-btn.on { color: var(--gold); background: var(--gold-bg); border: 1px solid transparent; }
.conn-btn .icon { width: 13px; height: 13px; }
.conn-cv { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold); font-weight: 700; }

/* score panel */
.score-panel { position: sticky; top: 76px; overflow: hidden; }
.score-hero {
    position: relative;
    background: linear-gradient(140deg, var(--accent-ink), var(--ink-strong) 72%);
    color: var(--bg);
    padding: 18px 18px 14px;
}
:root[data-theme="dark"] .score-hero { color: var(--bg-accent); }
/* a faint diagonal sheen across the hero — pure presentation */
.score-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .07) 45%, transparent 62%);
}
:root[data-theme="dark"] .score-hero::after {
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 62%);
}
.score-hero .label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .65; font-weight: 700; }
.score-hero .total { font-family: var(--font-mono); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; }
.score-parts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.score-part { padding: 10px 6px 12px; text-align: center; border-right: 1px solid var(--line); }
.score-part:last-child { border-right: none; }
.score-part .k { font-size: 10.5px; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.score-part .v { font-family: var(--font-mono); font-weight: 700; font-size: 16.5px; color: var(--ink-strong); }
.score-part.gold .v { color: var(--gold); }
.score-body { padding: 4px 16px 12px; max-height: 46vh; overflow-y: auto; }
.score-block h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 7px; }
.cr-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13px; }
.cr-mark {
    width: 20px; height: 20px; border-radius: 6px; flex: none;
    display: grid; place-items: center; border: 1.5px solid var(--line-strong); color: transparent;
}
.cr-row.ok .cr-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.cr-mark .icon { width: 12px; height: 12px; }
.cr-row .cr-label { flex: 1; color: var(--ink); line-height: 1.3; }
.cr-row .cr-by { color: var(--muted); font-size: 11px; display: block; }
.cr-row .cr-val { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.cr-row.ok .cr-val { color: var(--ok); font-weight: 700; }
.cr-override { display: block; font-size: 11px; color: var(--muted); cursor: pointer; }
.cr-why {
    display: block; margin-top: 5px; max-width: 230px; padding: 3px 6px;
    font-family: var(--font-ui); font-size: 11.5px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.cr-unlearn {
    background: none; border: none; padding: 0; margin-left: 6px;
    font-family: var(--font-ui); font-size: 10.5px; color: var(--muted);
    text-decoration: underline; cursor: pointer;
}
.cr-unlearn:hover { color: var(--ink); }
.cv-row { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 12.5px; }
.cv-row .cv-pair { flex: 1; color: var(--ink); line-height: 1.35; }
.cv-row .cv-pair small { color: var(--muted); display: block; font-size: 11px; }
.cv-row .cv-val { font-family: var(--font-mono); font-weight: 700; color: var(--gold); }
.cv-row.zero .cv-val { color: var(--muted); font-weight: 500; }
.warning-row { display: flex; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--ink); align-items: flex-start; line-height: 1.4; }
.warning-row .icon { width: 14px; height: 14px; color: var(--danger); margin-top: 2px; }
.score-actions { display: flex; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); }

/* ---------- rules ---------- */
.rules-layout { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; }
.rules-nav { position: sticky; top: 76px; padding: 8px; }
.rules-nav button {
    display: flex; width: 100%; text-align: left; gap: 8px; align-items: center;
    padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.rules-nav button:hover { background: var(--surface-2); color: var(--ink); }
.rules-nav button.active { background: var(--accent-ink); color: var(--bg); }
:root[data-theme="dark"] .rules-nav button.active { color: var(--bg-accent); }
.rules-nav .sec-num { font-family: var(--font-mono); font-size: 11px; opacity: .7; width: 34px; flex: none; }
.rules-content { padding: 26px 30px; }
.rules-content h2 { font-size: 20px; font-weight: 800; color: var(--ink-strong); margin-bottom: 4px; }
.rules-content .source { color: var(--muted); font-size: 12px; font-family: var(--font-mono); margin-bottom: 18px; }
.rules-content h3 { font-size: 15px; font-weight: 700; color: var(--ink-strong); margin: 20px 0 8px; }
.rules-content p, .rules-content li { font-size: 14px; line-height: 1.65; color: var(--ink); }
.rules-content ul { padding-left: 22px; margin: 8px 0; }
.rules-content li { margin: 4px 0; }
.rules-content .ded { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #fff; background: var(--danger); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.rules-content .award { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }
.rules-content table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 13.5px; }
.rules-content th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 2px solid var(--line-strong); }
.rules-content td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.rules-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 13px; color: var(--ink); }
.rules-note b { color: var(--ink-strong); }

/* ---------- live-tweet ---------- */
.tweet-layout { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.tweet-input-card { padding: 16px; }
.tweet-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.tweet-meta-field { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: 4px; }
.tweet-meta-field > span {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 700; color: var(--muted);
}
.tweet-meta-field input {
    width: 100%; background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 8px 12px; font-size: 14px; outline: none; font-family: var(--font-ui);
}
.tweet-meta-field input::placeholder { color: var(--muted); opacity: .8; }
.tweet-meta-field input:focus { border-color: var(--accent); }
.tweet-meta .btn { flex: none; }
.tweet-input-card textarea {
    width: 100%; min-height: 76px; resize: vertical;
    background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 10px;
    padding: 12px 14px; font-size: 15px; line-height: 1.5; outline: none;
    font-family: var(--font-ui);
}
.tweet-input-card textarea:focus { border-color: var(--accent); }
.tweet-help { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.55; }
.tweet-help .mono { font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.tweet-skills { padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 62px; }
.tw-seq-break { font-family: var(--font-mono); color: var(--muted); font-weight: 700; padding: 0 2px; }
.tw-implied { align-self: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 3px 5px; white-space: nowrap; cursor: help; }
.tw-conn { color: var(--gold); display: grid; place-items: center; }
.tw-conn .icon { width: 14px; height: 14px; }
.tw-skill {
    display: flex; flex-direction: column; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 7px 10px;
}
.tw-skill.excluded { border-style: dashed; opacity: .75; }
.tw-skill-top { display: flex; align-items: center; gap: 7px; }
.tw-skill .diff-badge { width: 22px; height: 22px; font-size: 11.5px; border-radius: 6px; }
.tw-skill select {
    border: none; background: none; font-weight: 700; font-size: 13.5px; color: var(--ink-strong);
    max-width: 210px; padding: 0; cursor: pointer;
}
.tw-typed { font-size: 10.5px; color: var(--muted); font-family: var(--font-mono); }
.tw-skill .not-counting { color: var(--danger); font-size: 10.5px; font-weight: 700; }
.tw-skill.unmatched { border-color: var(--danger); }
.tw-skill.unmatched .tw-phrase { color: var(--danger); font-weight: 700; font-size: 13px; }

/* Teach-my-shorthand: inline picker on an unmatched phrase + "learned" pill */
.tw-teach { position: relative; margin-top: 4px; }
.tw-teach-input {
    width: 100%; min-width: 170px; font-size: 12px; font-family: var(--font-ui);
    background: var(--surface); border: 1px solid var(--line); border-radius: 7px;
    padding: 4px 8px; color: var(--ink);
}
.tw-teach-input::placeholder { color: var(--muted); }
.tw-teach-input:focus { border-color: var(--accent); outline: none; }
.tw-teach-results {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
    min-width: 250px; max-height: 240px; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 6px;
}
.tw-teach-results:empty { display: none; }
.tw-teach-results .palette-row { padding: 6px 8px; }
.tw-teach-results .palette-row .diff-badge { width: 22px; height: 22px; font-size: 11.5px; border-radius: 6px; }
.tw-teach-results .pr-name { font-size: 12.5px; }
.tw-learned {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: var(--font-ui); font-size: 9.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--ok); background: var(--ok-bg);
    border-radius: 999px; padding: 1px 6px; vertical-align: 1px;
}
.tw-learned-x { color: inherit; font-size: 11px; font-weight: 700; padding: 0 0 0 1px; line-height: 1; opacity: .7; }
.tw-learned-x:hover { opacity: 1; }
.tweet-summary pre {
    font-family: var(--font-ui); font-size: 13.5px; white-space: pre-wrap; line-height: 1.55;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 12px 14px; margin: 0 16px; color: var(--ink);
}
.tweet-actions { display: flex; gap: 8px; padding: 12px 16px 16px; flex-wrap: wrap; }

/* ---------- share lightbox ---------- */
.share-overlay {
    position: fixed; inset: 0; z-index: 120; display: none; place-items: center;
    background: rgba(8, 10, 18, .72); backdrop-filter: blur(8px); padding: 20px;
}
.share-overlay.open { display: grid; }
.share-box { max-width: 560px; width: 100%; }
.share-box img { width: 100%; border-radius: 14px; box-shadow: var(--shadow-lg); }
.share-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.share-actions .btn { background: var(--surface); }

/* ---------- toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
    background: var(--ink-strong); color: var(--bg); font-weight: 600; font-size: 13.5px;
    border-radius: 999px; padding: 10px 18px; opacity: 0; pointer-events: none;
    transition: opacity .18s, transform .18s; z-index: 200; display: flex; gap: 8px; align-items: center;
}
:root[data-theme="dark"] .toast { color: var(--bg-accent); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .icon { width: 15px; height: 15px; }

/* ---------- responsive ---------- */
/* with eight tabs the nav needs its own masthead row a little earlier */
@media (max-width: 1180px) {
    .masthead-inner { flex-wrap: wrap; row-gap: 4px; }
    .nav-tabs { order: 3; width: 100%; overflow-x: auto; margin-left: 0; scrollbar-width: none; }
    .nav-tabs::-webkit-scrollbar { display: none; }
    .nav-tab { white-space: nowrap; }
    .theme-toggle { margin-left: auto; }
}
@media (max-width: 1080px) {
    .calc-layout { grid-template-columns: 300px 1fr; }
    .score-panel { grid-column: 1 / -1; position: static; order: 3; }
    .score-body { max-height: none; }
}
@media (max-width: 860px) {
    .masthead-inner { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
    .nav-tabs { order: 3; width: 100%; overflow-x: auto; margin-left: 0; }
    .nav-tab { padding: 7px 12px; white-space: nowrap; }
    .calc-layout { grid-template-columns: 1fr; }
    .palette { position: static; max-height: 420px; }
    .rules-layout { grid-template-columns: 1fr; }
    .rules-nav { position: static; display: flex; overflow-x: auto; gap: 4px; }
    .rules-nav button { white-space: nowrap; width: auto; }
    .rules-nav .sec-num { display: none; }
    .tweet-layout { grid-template-columns: 1fr; }
    .wrap { padding: 16px 14px 60px; }
}
@media (max-width: 560px) {
    .element-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .brand-sub { display: none; }
    .score-hero .total { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---------- vault (VT — mode:"vault") ---------- */
.diff-badge.diff-vt {
    width: auto; min-width: 42px; padding: 0 8px;
    font-size: 13px; background: var(--gold); border-radius: 8px;
    color: #fff;
}
:root[data-theme="dark"] .diff-badge.diff-vt { color: #0d1220; }
.palette-row .diff-badge.diff-vt { min-width: 38px; height: 26px; font-size: 12px; }
.tw-skill .diff-badge.diff-vt { min-width: 32px; height: 22px; font-size: 11px; }

.vt-mode-toggle {
    margin-left: auto; display: inline-flex; gap: 4px;
    background: var(--surface-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 3px;
}
.vt-mode-toggle button {
    border: none; background: none; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--muted);
    padding: 3px 11px; border-radius: 999px;
}
.vt-mode-toggle button:hover { color: var(--ink); }
.vt-mode-toggle button.active { background: var(--ink-strong); color: var(--bg); }
:root[data-theme="dark"] .vt-mode-toggle button.active { color: var(--bg-accent); }

.vt-slot {
    border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 12px; margin: 10px 14px;
    background: var(--surface-2);
}
.vt-slot[data-el] { cursor: pointer; }
.vt-slot[data-el]:hover { border-color: var(--gold); }
.vt-slot.empty {
    display: flex; flex-direction: column; gap: 4px;
    border-style: dashed; background: none;
    padding: 18px 14px;
}
.vt-slot-label {
    display: block; font-size: 10.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
}
.vt-slot-hint { font-size: 12.5px; color: var(--muted); }
.vt-slot-body { display: flex; align-items: center; gap: 12px; }
.vt-slot-img { width: 118px; flex: none; }
.vt-slot-img .no-img { color: var(--muted); }
.vt-slot-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vt-slot-name { font-weight: 700; font-size: 14.5px; color: var(--ink-strong); }
.vt-slot-cop { font-size: 12px; color: var(--muted); font-style: italic; line-height: 1.3; }
.vt-slot-sub { font-size: 11px; color: var(--muted); }
.vt-slot-d {
    font-family: var(--font-mono); font-weight: 700; font-size: 21px;
    color: var(--gold); flex: none;
}
.vt-swap-row { text-align: center; margin: -2px 0; }
.vt-swap-row .btn { font-size: 11.5px; padding: 4px 12px; }

.score-body .vt-tiles { border-top: none; margin-bottom: 4px; }

@media (max-width: 720px) {
    .vt-slot-img { width: 84px; }
    .vt-slot-cop { display: none; }
}

/* ===================== LIVE MEETS ===================== */
.mr-userline { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 10px; }
.mr-user { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); }
.mr-sync { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.mr-sync.ok { color: var(--accent); border-color: transparent; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mr-sync.offline { color: var(--danger); border-color: transparent; background: color-mix(in srgb, var(--danger) 12%, transparent); }
.mr-sync.syncing { color: var(--gold); }
.mr-banner { border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.mr-banner.ok { border-left-color: var(--accent); }
.mr-banner.err { border-left-color: var(--danger); color: var(--danger); }

.mr-auth { max-width: 460px; margin: 30px auto; padding: 26px; }
.mr-auth h3 { margin: 0 0 6px; font-size: 20px; }
.mr-authsub { color: var(--muted); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.mr-authform { display: flex; flex-direction: column; gap: 10px; }
.mr-authform input { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font: inherit; color: var(--ink); }
.mr-authform input:focus { border-color: var(--accent); outline: none; }
.mr-authswap { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.mr-authswap a { color: var(--accent); text-decoration: none; }

.mr-newmeet-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; }
.mr-newmeet-row input { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; color: var(--ink); min-width: 0; }
.mr-newmeet-row input:focus { border-color: var(--accent); outline: none; }

.mr-meetcard { position: relative; padding: 14px 44px 14px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .15s; }
.mr-meetcard:hover { border-color: var(--muted); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.mr-meetname { font-weight: 700; font-size: 15px; color: var(--ink-strong); }
.mr-meetname.big { font-size: 19px; }
.mr-meetmeta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mr-del { position: absolute; top: 10px; right: 10px; font-size: 15px; line-height: 1; padding: 5px 10px; }
.mr-meethead { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }

.mr-cap-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.mr-cap-row input[type="text"] { flex: 1; min-width: 160px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; font: inherit; color: var(--ink); }
.mr-cap-row input:focus { border-color: var(--accent); outline: none; }
.mr-cap-apps { display: inline-flex; }
.mr-capture textarea { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); resize: vertical; }
.mr-capture textarea:focus { border-color: var(--accent); outline: none; }
.mr-preview { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.mr-score { margin-top: 10px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mr-d { font-family: var(--font-mono); font-weight: 800; font-size: 20px; color: var(--ink-strong); }
.mr-d.small { font-size: 13px; margin-left: auto; }
.mr-dparts { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }

.mr-notechip { display: inline-flex; flex-direction: column; gap: 2px; border: 1px dashed var(--line); border-radius: 10px; padding: 7px 10px; background: transparent; align-self: center; }
.mr-notetext { font-size: 12.5px; font-style: italic; color: var(--muted); }
.mr-note-x, .mr-marknote { border: none; background: none; color: var(--accent); font-size: 10.5px; cursor: pointer; padding: 0; text-align: left; font-family: inherit; }
.mr-note-x:hover, .mr-marknote:hover { text-decoration: underline; }
.mr-note-inline { font-style: italic; color: var(--muted); font-size: .92em; }
.mr-sep { color: var(--muted); font-family: var(--font-mono); }

.mr-routine { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); }
.mr-routine.editing { border-color: var(--accent); }
.mr-r-order { display: flex; flex-direction: column; gap: 2px; }
.mr-r-order button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 9px; padding: 2px; }
.mr-r-order button:hover:not(:disabled) { color: var(--ink); }
.mr-r-order button:disabled { opacity: .25; cursor: default; }
.mr-r-main { flex: 1; min-width: 0; }
.mr-r-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mr-appchip { font-size: 10px; font-weight: 800; letter-spacing: .06em; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; color: var(--muted); font-family: var(--font-mono); }
.mr-r-line { font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.5; }
.mr-r-actions { display: flex; gap: 4px; }

@media (max-width: 720px) {
    .mr-newmeet-row { grid-template-columns: 1fr; }
    .mr-cap-row input[type="text"] { min-width: 120px; }
    .mr-r-actions { flex-direction: column; }
}

/* ===================== CROWD D/E SCORING (Judge tab + meets tallies) ===================== */
.mr-headbtns { margin-left: auto; display: flex; gap: 6px; }

.sc-chip {
    font-size: 9.5px; font-weight: 800; letter-spacing: .08em; font-family: var(--font-mono);
    border-radius: 6px; padding: 2px 7px;
}
.sc-chip.open { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); animation: sc-pulse 2s ease-in-out infinite; }
.sc-chip.closed { color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
@keyframes sc-pulse { 50% { opacity: .55; } }

.sc-aggline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sc-agg { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-strong); }
.sc-agg-sub { font-size: 11px; color: var(--muted); }
.sc-agg-empty { font-size: 11.5px; color: var(--muted); font-style: italic; }
.sc-total { color: var(--gold); }
.sc-statebtn { font-size: 11px; padding: 3px 10px; margin-left: auto; }
.sc-stand-note { font-size: 11px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 8px; }

.sc-joinrow { grid-template-columns: 1fr auto; }
.sc-routine { align-items: flex-start; }
.sc-routine.open { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.sc-panel { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }
.sc-panel-head { display: flex; align-items: center; gap: 12px; }
.sc-modes { display: inline-flex; }
.sc-bigval { margin-left: auto; font-family: var(--font-mono); font-weight: 800; font-size: 26px; color: var(--ink-strong); }
.sc-direct { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.sc-direct input[type="range"] { flex: 1; accent-color: var(--accent); }
.sc-direct input[type="number"] {
    width: 74px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 8px 10px; font: inherit; font-family: var(--font-mono); color: var(--ink);
}
.sc-direct input[type="number"]:focus { border-color: var(--accent); outline: none; }
.sc-guided { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sc-guided-hint { font-size: 11.5px; color: var(--muted); width: 100%; }
.sc-ded { font-family: var(--font-mono); font-size: 12px; }
.sc-panel-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.sc-mine { font-size: 12px; color: var(--muted); }
.sc-mine b { font-family: var(--font-mono); color: var(--ink-strong); }

.sc-hist { display: flex; align-items: flex-end; gap: 4px; margin-top: 10px; }
.sc-hist-col { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 26px; }
.sc-hist-n { font-size: 10px; color: var(--muted); font-family: var(--font-mono); min-height: 13px; }
.sc-hist-bar { width: 100%; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 55%, transparent); }
.sc-hist-x { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }

.sc-stand-row { display: flex; align-items: baseline; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sc-stand-row:last-child { border-bottom: none; }
.sc-stand-rank { font-family: var(--font-mono); font-weight: 800; color: var(--muted); width: 20px; text-align: right; }
.sc-stand-name { font-weight: 700; color: var(--ink-strong); }
.sc-stand-apps { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.sc-stand-total { margin-left: auto; font-family: var(--font-mono); font-weight: 800; font-size: 16px; color: var(--gold); }

@media (max-width: 720px) {
    .mr-headbtns { flex-direction: column; }
    .sc-statebtn { margin-left: 0; }
    .sc-stand-apps { display: none; }
}

/* ============================== FANTASY (FG-2 dice toy) ============================== */
/* gymnast creation + attribute editing */
.fg-new { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.fg-new > input[type="text"] {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 9px 11px; font: inherit; color: var(--ink);
}
.fg-new > input[type="text"]:focus { border-color: var(--accent); outline: none; }
/* label / track / value columns — shared by the create+edit sliders and
   the read-only bars so numbers line up no matter which is showing */
.fg-attr-row { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; }
.fg-attr-k { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.fg-attr-v { font-family: var(--font-mono); font-weight: 700; text-align: right; color: var(--ink-strong); }
.fg-attr-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.fg-budget { font-size: 12px; color: var(--muted); }
.fg-budget b { color: var(--ink-strong); }
.fg-budget.over { color: var(--danger); font-weight: 700; }
.fg-hint { font-size: 12px; color: var(--muted); margin: 0; }
.fg-new .btn.primary { align-self: flex-start; }
.fg-sub { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0; text-transform: none; margin-left: 8px; }
/* inside a score-block h4 the note gets its own line instead of wrapping
   the uppercase heading mid-phrase */
.score-block h4 .fg-sub { display: block; margin: 2px 0 0; }
/* back-button pills never wrap their label; the title block shrinks instead */
.mr-meethead .btn { white-space: nowrap; flex: none; }
.mr-meethead > div { min-width: 0; }

/* roster cards: mini attribute bars + per-apparatus D chips */
.fg-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-width: 340px; }
.fg-bar { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; }
/* on the gymnast detail screen the bars sit in a padded pane and get
   room to breathe; roster mini-cards keep the compact 340px form */
.pane-body > .fg-bars { max-width: 480px; margin-top: 6px; gap: 7px; }
.pane-body > .fg-bars .fg-bar-track { height: 8px; border-radius: 4px; }
.fg-bar-k { font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.fg-bar-v { font-family: var(--font-mono); font-size: 11px; text-align: right; color: var(--ink); }
.fg-bar-track { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.fg-bar-fill { display: block; height: 100%; border-radius: 3px; }
.fg-bar-fill.fg-exe { background: var(--accent); }
.fg-bar-fill.fg-con { background: var(--ok); }
.fg-bar-fill.fg-pow { background: var(--gold); }
.fg-appchips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.fg-appchip {
    font-size: 10.5px; font-family: var(--font-mono); color: var(--muted);
    border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px;
}
.fg-appchip.has { color: var(--ink); border-color: var(--line-strong); }
.fg-appchip b { color: var(--gold); }

/* gymnast detail */
.fg-approw { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); min-height: 54px; }
.fg-approw:first-child { padding-top: 4px; }
.fg-approw:last-child { border-bottom: none; padding-bottom: 0; }
.fg-approw-main { font-size: 13.5px; color: var(--ink); }
.fg-approw-main.muted { color: var(--muted); }
.fg-approw-main b { color: var(--ink-strong); }
.fg-approw-btns { margin-left: auto; display: flex; gap: 8px; }
.fg-approw-btns .btn { min-width: 118px; justify-content: center; }
/* results: a real grid — chip / scores / falls / date / delete — so the
   date column never truncates under the delete button */
.fg-result {
    display: grid; grid-template-columns: auto 1fr auto auto auto;
    align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px;
    border-radius: 8px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.fg-result:last-child { border-bottom: none; }
.fg-result:hover { background: color-mix(in srgb, var(--app-accent) 6%, transparent); }
.fg-result-scores { font-size: 13px; color: var(--ink); min-width: 0; }
.fg-result-scores b { color: var(--gold); font-size: 15px; }
.fg-result-falls { font-size: 11px; font-weight: 700; color: var(--danger); white-space: nowrap; }
.fg-result-clean { font-size: 11px; color: var(--ok); white-space: nowrap; }
.fg-result-date { font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.fg-result .mr-del { position: static; transform: none; }

/* builder */
.fg-risk { font-weight: 700; }
.fg-risk.safe { color: var(--ok); }
.fg-risk.edge { color: var(--gold); }
.fg-risk.risky { color: var(--danger); }
.fg-ritem .ri-btn { font-size: 10px; }

/* roll screen */
.fg-rollcard { padding: 18px; }
.fg-run { display: flex; gap: 24px; align-items: baseline; justify-content: center; margin-bottom: 12px; }
.fg-run-part { font-size: 14px; color: var(--muted); }
.fg-run-part b { font-size: 24px; color: var(--ink-strong); font-family: var(--font-mono); }
.fg-run-part.total b { color: var(--gold); font-size: 30px; }
.fg-timeline { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.fg-tl {
    min-width: 30px; text-align: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
    border-radius: 6px; padding: 3px 4px; border: 1px solid var(--line); color: var(--muted);
}
.fg-tl.current { border-color: var(--accent); color: var(--accent); animation: sc-pulse 1.2s ease-in-out infinite; }
.fg-tl-stuck    { color: var(--ok);    background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: transparent; }
.fg-tl-small    { color: var(--ink);   background: var(--surface-2); border-color: transparent; }
.fg-tl-medium   { color: var(--gold);  background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: transparent; }
.fg-tl-large    { color: var(--gold);  background: color-mix(in srgb, var(--gold) 26%, transparent); border-color: transparent; }
.fg-tl-nearfall { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); border-color: transparent; }
.fg-tl-fall     { color: #fff;         background: var(--danger); border-color: transparent; }

.fg-stage { text-align: center; padding: 10px 0 4px; }
.fg-stage-count { font-size: 11px; font-family: var(--font-mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.fg-stage-el { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 16px; }
.fg-stage-name { font-size: 19px; font-weight: 700; color: var(--ink-strong); }
.fg-stage-fall .fg-stage-name { color: var(--danger); }
.fg-die {
    width: 76px; height: 76px; margin: 0 auto; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--line-strong); background: var(--surface-2);
    font-family: var(--font-mono); font-weight: 800; font-size: 26px; color: var(--muted);
}
.fg-die.rolling { animation: fg-tumble .5s ease-in-out infinite; }
@keyframes fg-tumble {
    0%   { transform: rotate(-9deg)  translateY(0); }
    25%  { transform: rotate(5deg)   translateY(-7px); }
    50%  { transform: rotate(-4deg)  translateY(0); }
    75%  { transform: rotate(9deg)   translateY(-4px); }
    100% { transform: rotate(-9deg)  translateY(0); }
}
.fg-die.settled { animation: fg-land .25s ease-out; border-color: transparent; }
@keyframes fg-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.fg-die-stuck    { background: color-mix(in srgb, var(--ok) 18%, transparent);    color: var(--ok); }
.fg-die-small    { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.fg-die-medium   { background: color-mix(in srgb, var(--gold) 18%, transparent);  color: var(--gold); }
.fg-die-large    { background: color-mix(in srgb, var(--gold) 32%, transparent);  color: var(--gold); }
.fg-die-nearfall { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
.fg-die-fall     { background: var(--danger); color: #fff; animation: fg-shake .4s ease-in-out; }
@keyframes fg-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.fg-stage-out { margin-top: 12px; min-height: 26px; }
.fg-out {
    font-size: 12px; font-weight: 800; letter-spacing: .04em; border-radius: 7px; padding: 4px 10px;
    font-family: var(--font-mono);
}
.fg-out b { font-weight: 800; }
.fg-out-rolling  { color: var(--muted); }
.fg-out-stuck    { color: var(--ok);    background: color-mix(in srgb, var(--ok) 14%, transparent); }
.fg-out-small    { color: var(--ink);   background: var(--surface-2); }
.fg-out-medium   { color: var(--gold);  background: color-mix(in srgb, var(--gold) 14%, transparent); }
.fg-out-large    { color: var(--gold);  background: color-mix(in srgb, var(--gold) 26%, transparent); }
.fg-out-nearfall { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.fg-out-fall     { color: #fff;         background: var(--danger); }

/* result card */
.fg-final { text-align: center; padding-top: 4px; }
.fg-final-score { font-family: var(--font-mono); font-weight: 800; font-size: 54px; color: var(--gold); line-height: 1.1; }
.fg-final-parts { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.fg-final-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.fg-breakdown { max-width: 640px; margin: 16px auto 0; text-align: left; }
.fg-br-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    border-bottom: 1px solid var(--line); font-size: 13px;
}
.fg-br-row:last-child { border-bottom: none; }
.fg-br-row.fall { background: color-mix(in srgb, var(--danger) 7%, transparent); border-radius: 8px; }
.fg-br-row .diff-badge { width: 22px; height: 22px; font-size: 11.5px; border-radius: 6px; flex: none; }
.fg-br-name { color: var(--ink-strong); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-br-q { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); flex: none; }
.fg-br-row .fg-out { flex: none; font-size: 10.5px; padding: 3px 7px; }
.fg-final-btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.fg-seed { margin-top: 14px; font-size: 10px; color: var(--muted); }

@media (max-width: 720px) {
    .fg-approw { flex-wrap: wrap; }
    .fg-approw-btns { margin-left: 0; width: 100%; justify-content: flex-end; }
    .fg-run { gap: 14px; }
}
@media (max-width: 560px) {
    .fg-result { grid-template-columns: auto 1fr auto auto; }
    .fg-result-date { display: none; }
}

/* ============================== HOME (landing) ============================== */
/* The front door: hero + apparatus entry + one tile per section. Built
   entirely from the system tokens; the group-color spectrum strip is the
   only place all six --g colors appear together on purpose. */
.home-hero {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: 16px;
    background:
        radial-gradient(720px 320px at 88% -20%, color-mix(in srgb, var(--app-accent) 16%, transparent), transparent 65%),
        radial-gradient(520px 300px at -8% 120%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%),
        var(--surface);
    box-shadow: var(--shadow);
    padding: 40px 36px 34px;
}
.home-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4), var(--g5), var(--g6));
}
.home-eyebrow {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 800; color: var(--app-accent); margin-bottom: 10px;
}
.home-title {
    font-size: clamp(26px, 4.4vw, 42px); font-weight: 800; letter-spacing: -.02em;
    line-height: 1.08; color: var(--ink-strong); max-width: 720px;
}
.home-title .num { color: var(--app-accent); font-weight: 700; white-space: nowrap; }
.home-lede { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: 620px; }
.home-hero-mark {
    position: absolute; right: -28px; bottom: -34px; pointer-events: none;
    color: var(--app-accent); opacity: .1;
}
.home-hero-mark .icon { width: 240px; height: 240px; stroke-width: 1.1; }

/* apparatus entry points */
.home-apps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; max-width: 760px; }
.home-app {
    display: flex; align-items: center; gap: 11px; text-align: left;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.home-app:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--ac) 55%, var(--line)); }
.home-app.active { border-color: color-mix(in srgb, var(--ac) 65%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ac) 45%, transparent); }
.home-app .ha-mark {
    width: 34px; height: 34px; border-radius: 9px; flex: none;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--ac) 15%, transparent); color: var(--ac);
}
.home-app .ha-name { font-weight: 800; font-size: 13.5px; color: var(--ink-strong); line-height: 1.15; }
.home-app .ha-sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }

/* section tiles — 3-up on desktop (six tiles balance as 3×2), fluid below */
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin-top: 16px; }
@media (min-width: 1000px) { .home-grid { grid-template-columns: repeat(3, 1fr); } }
.home-tile {
    position: relative; display: flex; flex-direction: column; gap: 9px; text-align: left;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    border-top: 3px solid var(--tc, var(--accent));
    box-shadow: var(--shadow); padding: 17px 18px 15px;
    transition: transform .12s, box-shadow .15s, border-color .15s;
}
.home-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.home-tile .ht-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--tc, var(--accent)) 13%, transparent);
    color: var(--tc, var(--accent));
}
.home-tile .ht-icon .icon { width: 19px; height: 19px; }
.home-tile h3 { font-size: 16px; font-weight: 800; color: var(--ink-strong); letter-spacing: -.01em; }
.home-tile p { font-size: 13px; color: var(--muted); line-height: 1.55; flex: 1; }
.home-tile .ht-go {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 13px; color: var(--tc, var(--accent));
}
.home-tile .ht-go .icon { width: 15px; height: 15px; transition: transform .15s; }
.home-tile:hover .ht-go .icon { transform: translateX(3px); }
.home-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }

@media (max-width: 860px) {
    .home-hero { padding: 26px 20px 24px; }
    .home-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero-mark { display: none; }
}
@media (max-width: 560px) {
    .home-grid { grid-template-columns: 1fr; }
}

/* animated roll screen (anim-renderer canvas gymnast) */
.fg-animcard { padding: 14px 18px 18px; }
.fg-anim-ctl { margin-left: auto; display: flex; gap: 8px; }
.fg-anim-head {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 32px; margin-bottom: 10px; flex-wrap: wrap;
}
.fg-anim-count { font-size: 11px; font-family: var(--font-mono); color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.fg-anim-name { font-size: 16px; font-weight: 700; color: var(--ink-strong); }
#fg-anim-el { display: inline-flex; align-items: center; gap: 8px; }
#fg-anim-el .diff-badge { width: 22px; height: 22px; font-size: 11.5px; border-radius: 6px; }
.fg-anim-wrap { position: relative; }
#fg-anim-canvas {
    width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 14px;
    background: linear-gradient(color-mix(in srgb, var(--surface-2) 60%, transparent), var(--surface-2));
    border: 1px solid var(--line);
}
#fg-anim-chips { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; }
.fg-anim-chip {
    position: absolute; transform: translate(-50%, -50%);
    animation: fg-chip-float 1.8s ease-out forwards;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
@keyframes fg-chip-float {
    0%   { opacity: 0; transform: translate(-50%, -30%) scale(.7); }
    12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    24%  { transform: translate(-50%, -55%) scale(1); }
    80%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -160%) scale(.95); }
}