:root {
    color-scheme: light;
    font-family: Inter, "Segoe UI", sans-serif;
    color: #243342;
    background: #eef2f3;
    --auth-ink: #17332a;
    --auth-green: #267a50;
    --auth-green-dark: #0f3529;
    --auth-cream: #f6f2e9;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 6px; padding: 10px 12px; background: #e4e9ec; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #e0a94f;
    outline-offset: 2px;
}
button.primary { color: white; background: #27864b; }
button.danger { color: white; background: #c94a40; }
button.coach { color: white; background: #7d3c98; width: 100%; }
.error { color: #b93228; min-height: 1.2em; }
[hidden] { display: none !important; }
.auth-screen {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 42px);
    background:
        radial-gradient(circle at 15% 12%, #e4d8bd 0, transparent 28%),
        radial-gradient(circle at 88% 82%, #d9e8df 0, transparent 30%),
        var(--auth-cream);
}
.auth-shell {
    width: min(1160px, 100%);
    min-height: min(720px, calc(100svh - 48px));
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
    overflow: hidden;
    border: 1px solid #ffffff80;
    border-radius: 28px;
    background: #fbfaf7;
    box-shadow: 0 28px 80px #18332824;
}
.auth-story {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: clamp(34px, 5vw, 64px);
    overflow: hidden;
    color: #f9fbf7;
    background:
        linear-gradient(145deg, #173e31 0%, #0d2d24 58%, #0a261f 100%);
}
.auth-story::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 520px;
    height: 520px;
    right: -210px;
    top: -160px;
    border: 1px solid #ffffff12;
    border-radius: 50%;
    box-shadow: 0 0 0 76px #ffffff07, 0 0 0 152px #ffffff05;
}
.auth-story::after {
    content: "♞";
    position: absolute;
    z-index: -1;
    right: -18px;
    bottom: -96px;
    color: #ffffff08;
    font-family: Georgia, serif;
    font-size: 340px;
    line-height: 1;
    transform: rotate(-8deg);
}
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-manifest-link {
    margin-left: auto;
    color: #f3dfad;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}
.auth-manifest-link:hover { text-decoration: underline; }
.auth-logo {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--auth-ink);
    background: #e7c57b;
    font-family: Georgia, serif;
    font-size: 29px;
    box-shadow: inset 0 0 0 1px #ffffff70;
}
.auth-brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 700; }
.auth-alpha {
    margin-left: 3px;
    padding: 5px 9px;
    border: 1px solid #ffffff24;
    border-radius: 999px;
    color: #dce7e0;
    background: #ffffff0d;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.topbar-manifest {
    margin-left: 12px;
    color: #a8cbbb;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}
.topbar-manifest:hover { text-decoration: underline; }
.auth-story-copy { max-width: 570px; margin: 64px 0 48px; }
.auth-eyebrow {
    margin: 0 0 18px;
    color: #e7c57b;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.auth-story h1 {
    max-width: 570px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.4rem, 4.5vw, 4.35rem);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .98;
}
.auth-story h1 span { display: block; margin-top: 10px; color: #e7c57b; }
.auth-lead { max-width: 535px; margin: 26px 0 0; color: #d9e5de; font-size: 1.05rem; line-height: 1.65; }
.auth-entry-grid { display: grid; gap: 9px; margin-top: 28px; }
.auth-entry {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #ffffff18;
    border-radius: 13px;
    color: #f7faf8;
    background: #ffffff0b;
    text-align: left;
    transition: background .15s, border-color .15s, transform .15s;
}
.auth-entry:hover:not(:disabled) { border-color: #e7c57b63; background: #ffffff14; transform: translateX(2px); }
.auth-entry > span:nth-child(2) { min-width: 0; }
.auth-entry-copy { display: grid; gap: 3px; }
.auth-entry strong, .auth-entry small { display: block; }
.auth-entry strong { font-size: .88rem; }
.auth-entry small { color: #bdcec4; font-size: .72rem; line-height: 1.35; }
.auth-entry > span:last-child { color: #e7c57b; font-size: 1.1rem; }
.auth-entry-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #173e31;
    background: #e7c57b;
    font-family: Georgia, serif;
    font-size: 21px;
}
.auth-coach-preview {
    max-width: 560px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid #ffffff18;
    border-radius: 16px;
    background: #ffffff0d;
    backdrop-filter: blur(8px);
}
.auth-coach-icon {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: #173e31;
    background: #e7c57b;
    font-family: Georgia, serif;
    font-size: 25px;
}
.auth-coach-preview strong { display: block; margin: 1px 0 4px; font-size: .86rem; }
.auth-coach-preview p { margin: 0; color: #cfddd5; font-size: .84rem; line-height: 1.45; }
.auth-panel { display: grid; place-items: center; padding: clamp(30px, 5vw, 68px); background: #fbfaf7; }
.auth-card { position: relative; width: min(410px, 100%); }
.auth-close {
    position: absolute;
    right: -14px;
    top: -16px;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    color: #617069;
    background: #ecefe9;
    font-size: 1.5rem;
    line-height: 1;
}
.auth-card-header { margin-bottom: 25px; }
.auth-access {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    color: #5b6d64;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.auth-access span { width: 8px; height: 8px; border-radius: 50%; background: #45a66d; box-shadow: 0 0 0 4px #45a66d1c; }
.auth-card h2 { margin: 0; color: var(--auth-ink); font-family: Georgia, "Times New Roman", serif; font-size: 2.35rem; letter-spacing: -.02em; }
.auth-card-header > p:last-child { margin: 9px 0 0; color: #66756e; line-height: 1.5; }
.guest-start {
    margin-bottom: 20px;
    border-color: #2d7d56;
    color: white;
    background: linear-gradient(135deg, #287a52, #1d6141);
    box-shadow: 0 9px 24px #276e4a2e;
}
.guest-start:hover:not(:disabled) { border-color: #2d7d56; background: linear-gradient(135deg, #226b48, #185438); transform: translateY(-1px); }
.guest-start .auth-entry-icon, .guest-start > span:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #173e31;
    background: #e7c57b;
    font-family: Georgia, serif;
    font-size: 25px;
}
.guest-start small { color: #d5e5db; }
.guest-start[aria-busy="true"] { cursor: wait; opacity: .72; }
.auth-divider, .section-divider { display: flex; align-items: center; gap: 12px; color: #85918b; font-size: .7rem; text-transform: uppercase; }
.auth-divider { margin-bottom: 18px; }
.auth-divider::before, .auth-divider::after, .section-divider::before, .section-divider::after { content: ""; height: 1px; flex: 1; background: #dde2dd; }
.auth-divider span, .section-divider span { white-space: nowrap; }
.auth-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 24px;
    padding: 5px;
    border: 1px solid #e0e3dd;
    border-radius: 13px;
    background: #f0f1ec;
}
.auth-tabs button {
    flex: 1;
    border-radius: 9px;
    padding: 10px 12px;
    color: #65726c;
    background: transparent;
    font-size: .9rem;
    font-weight: 700;
}
.auth-tabs button.active { color: var(--auth-ink); background: white; box-shadow: 0 3px 12px #17332a12; }
.auth-card form { gap: 9px; }
.auth-card form > label { margin-top: 7px; color: #263d34; }
.auth-card input {
    min-height: 50px;
    border-color: #ccd4cf;
    border-radius: 11px;
    padding: 12px 14px;
    color: #172e25;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.auth-card input::placeholder { color: #98a29d; }
.auth-card input:hover { border-color: #aab9b1; }
.auth-card input:focus { border-color: var(--auth-green); box-shadow: 0 0 0 4px #267a5017; }
.auth-password-field { position: relative; }
.auth-password-field input { padding-right: 96px; }
.password-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    min-width: 78px;
    padding: 7px 9px;
    border-radius: 8px;
    color: #426155;
    background: transparent;
    font-size: .78rem;
    font-weight: 700;
    transform: translateY(-50%);
}
.password-toggle:hover { background: #edf3ef; }
.auth-field-note { margin: 1px 0 5px; color: #77847e; font-size: .78rem; line-height: 1.4; }
.auth-submit {
    position: relative;
    min-height: 52px;
    margin-top: 13px;
    border-radius: 11px;
    background: var(--auth-green) !important;
    box-shadow: 0 8px 20px #267a502e;
    font-weight: 750;
    transition: background .15s, transform .15s, box-shadow .15s;
}
.auth-submit:hover:not(:disabled) { background: #1f6843 !important; box-shadow: 0 10px 24px #267a5038; transform: translateY(-1px); }
.auth-submit[aria-busy="true"]::after {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-left: 10px;
    border: 2px solid #ffffff60;
    border-top-color: white;
    border-radius: 50%;
    vertical-align: -2px;
    animation: auth-spin .7s linear infinite;
}
.auth-error { min-height: 0; margin: 14px 0 0; font-size: .86rem; line-height: 1.45; }
.auth-error:not(:empty) { padding: 10px 12px; border: 1px solid #d7675f4a; border-radius: 9px; background: #fff1ef; }
.auth-privacy { margin: 18px 0 0; color: #78857f; font-size: .78rem; text-align: center; }
.auth-privacy span { margin-right: 7px; color: #4b9369; font-size: .55rem; vertical-align: 2px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.button-row { display: flex; gap: 8px; }
form, .tab-content { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; font-weight: 600; }
label.check { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #d9e1dd; border-radius: 8px; background: #f6f8f7; font-weight: 600; cursor: pointer; }
label.check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: #27864b; }
input, select, textarea { width: 100%; border: 1px solid #c7d0d5; border-radius: 6px; padding: 9px; background: white; }
textarea { min-height: 90px; resize: vertical; }
.topbar { min-height: 64px; display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; padding: 8px clamp(16px, 2vw, 32px); background: #233342; color: white; }
.topbar-brand { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.alpha-badge { margin-left: 8px; padding: 2px 6px; font-size: .7rem; border-radius: 8px; background: #27864b; }
.link-btn { color: white; background: transparent; }
.mode-nav { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.mode-nav .tab-btn { flex: 0 0 auto; padding: 9px 12px; border-radius: 7px; color: #cad5dc; background: transparent; font-weight: 650; white-space: nowrap; }
.mode-nav .tab-btn:hover { color: white; background: #ffffff0d; }
.mode-nav .tab-btn.active { color: white; background: #ffffff1a; box-shadow: inset 0 0 0 1px #ffffff14; }
.topbar-account { display: flex; min-width: 0; align-items: center; justify-self: end; gap: 7px; }
.topbar-account #current-user { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-account .link-btn { flex: none; }
.guest-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 52px;
    padding: 9px 20px;
    color: #244136;
    background: #fff6dc;
    border-bottom: 1px solid #ead9a8;
    font-size: .84rem;
}
.guest-banner strong { margin-right: 8px; }
.guest-banner span { color: #68756f; }
.guest-banner button, .upgrade-btn { color: white; background: #267a50; }
.workspace { --board-size: min(840px, calc(100vh - 145px), calc(100vw - 580px)); --module-width: clamp(420px, 26vw, 500px); display: flex; justify-content: center; gap: clamp(24px, 2vw, 36px); padding: clamp(20px, 2.2vw, 36px); }
.board-section { display: flex; gap: 12px; align-items: flex-start; }
#board-wrapper { width: var(--board-size); flex: 0 0 auto; }
#board { width: 100%; touch-action: none; }
#eval-bar-container { width: 28px; height: var(--board-size); background: #20262b; position: relative; overflow: hidden; border-radius: 4px; }
#eval-bar-fill { position: absolute; bottom: 0; width: 100%; height: 50%; background: white; transition: height .25s; }
#eval-score-text { position: absolute; z-index: 2; width: 100%; padding-top: 5px; text-align: center; font-size: .68rem; font-weight: bold; color: #e8eef1; mix-blend-mode: difference; }
#game-status-line, #variation-nav { margin-top: 10px; padding: 10px; text-align: center; background: white; border-radius: 7px; }
#variation-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
#sidebar { width: var(--module-width); height: calc(var(--board-size) + 49px); min-height: 0; background: white; border-radius: 12px; box-shadow: 0 8px 28px #1d2b361a; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.tab-content { display: none; padding: clamp(22px, 2vw, 30px); }
.tab-content.active { display: flex; }
.tab-content h3 { margin: 0; }
.section-kicker { margin: 0 0 4px; color: #27864b; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hint { margin: 0; color: #61717d; font-size: .85rem; }
.puzzle-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.puzzle-feedback { min-height: 52px; padding: 12px; border-radius: 8px; color: #52645b; background: #f0f4f1; line-height: 1.45; }
.puzzle-feedback.success { color: #175f39; background: #e7f5ec; }
.puzzle-feedback.error { color: #9c3029; background: #fff0ee; }
.pgn-import-card { gap: 9px; padding: 14px; border: 1px solid #dce3de; border-radius: 9px; background: #f6f8f6; }
.pgn-import-card textarea { min-height: 104px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.full-review-card { display: grid; gap: 10px; padding: 15px; border: 1px solid #d7dfd9; border-radius: 11px; background: #fbfaf5; }
.full-review-card h3, .full-review-card h4 { margin: 0; }
.full-review-card label { display: grid; gap: 5px; }
.review-progress { display: grid; gap: 7px; }
.review-progress > div { display: flex; justify-content: space-between; gap: 10px; color: #526159; font-size: .78rem; }
.review-progress progress { width: 100%; accent-color: #27864b; }
.review-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.review-count { padding: 5px 8px; border-radius: 999px; background: #e7eee9; font-size: .72rem; font-weight: 700; }
.review-stale { padding: 9px; border-radius: 7px; color: #775313; background: #fff1cc; font-size: .78rem; }
.review-critical { display: grid; gap: 7px; }
.review-critical-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; border: 1px solid #d6ded8; background: white; text-align: left; }
.review-critical-card:hover { border-color: #7aa28a; }
.review-critical-card .review-ply { color: #77847d; font-size: .72rem; }
.review-critical-copy { min-width: 0; display: grid; gap: 2px; }
.review-critical-copy strong { overflow-wrap: anywhere; font-size: .78rem; }
.review-critical-copy small { color: #77847d; font-size: .68rem; }
.review-critical-card .review-loss { color: #9c3f36; font-size: .72rem; font-weight: 700; }
.review-moment { padding: 12px; border-left: 4px solid #d3a94f; background: #fffaf0; }
.review-moment p { margin: 5px 0; }
.review-moment > small { display: block; margin-bottom: 5px; color: #6b776f; }
.review-line-button { width: 100%; overflow-wrap: anywhere; text-align: left; }
.move-btn.quality-inaccuracy { box-shadow: inset 0 -3px #d6b54c; }
.move-btn.quality-mistake { box-shadow: inset 0 -3px #dc7a45; }
.move-btn.quality-blunder { box-shadow: inset 0 -3px #c8463e; }
.section-divider { margin: 4px 0; }
.move-history { max-height: 230px; overflow: auto; display: grid; grid-template-columns: 32px 1fr 1fr; gap: 4px; }
.move-number { padding: 7px 3px; color: #7b8992; }
.move-btn { padding: 7px; text-align: left; background: #f1f4f5; }
.move-btn.user-move::after { content: " •"; color: #27864b; }
.move-btn.selected { color: white; background: #27864b; }
.button-row > * { flex: 1; }
.analysis-output { border-left: 4px solid #27864b; padding: 12px; background: #f3f8f5; }
.quality { font-weight: 700; text-transform: uppercase; }
.candidate { display: block; width: 100%; margin: 6px 0; text-align: left; background: white; border: 1px solid #cbd8d0; }
#coach-commentary { white-space: pre-wrap; line-height: 1.45; }
.thread { margin-top: 10px; border: 1px solid #d8dfe2; border-radius: 7px; padding: 10px; }
.thread h4 { margin: 0 0 5px; }
.message { margin: 6px 0; padding: 7px; border-radius: 5px; background: #f2f5f6; white-space: pre-wrap; }
.message strong { display: block; font-size: .75rem; color: #61717d; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-section-heading > div { min-width: 0; }
.admin-section-heading button { flex: 0 0 auto; }
.analytics-period { flex: 0 0 auto; color: #66756e; font-size: .7rem; }
.analytics-period select { width: auto; min-width: 104px; padding: 7px 8px; }
.analytics-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.analytics-section-heading h4 { margin: 0; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.analytics-metric { min-width: 0; display: grid; align-content: start; gap: 3px; padding: 12px; border: 1px solid #d9e3dd; border-radius: 9px; background: #f7faf8; }
.analytics-metric strong { overflow-wrap: anywhere; color: #1f573d; font-size: 1.3rem; line-height: 1.05; }
.analytics-metric span { color: #4f5e56; font-size: .74rem; font-weight: 650; }
.analytics-metric small { color: #7b8780; font-size: .66rem; line-height: 1.3; }
#admin-analytics-audience .analytics-metric:first-child,
#admin-analytics-ai .analytics-metric:last-child { grid-column: 1 / -1; }
.operations-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.operations-metric { display: grid; gap: 2px; padding: 11px 12px; border: 1px solid #dbe2de; border-radius: 9px; background: #f6f8f7; }
.operations-metric strong { color: #293a31; font-size: 1.35rem; line-height: 1; }
.operations-metric span { color: #67746e; font-size: .72rem; }
.operations-metric.queued { border-left: 4px solid #d1a341; }
.operations-metric.running { border-left: 4px solid #3b7fc4; }
.operations-metric.completed { border-left: 4px solid #27864b; }
.operations-metric.failed { border-left: 4px solid #c94a40; }
.operations-facts { grid-column: 1 / -1; display: grid; gap: 5px; padding: 10px 12px; border-radius: 9px; color: #526159; background: #edf2ef; font-size: .75rem; }
.operations-events-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.operations-events-heading h4 { margin: 0; }
.operations-events-heading span { color: #748079; font-size: .68rem; text-align: right; }
.operations-events { display: grid; gap: 8px; }
.operations-event { display: grid; gap: 5px; padding: 11px; border: 1px solid #dce2df; border-left: 4px solid #c94a40; border-radius: 8px; background: #fff; }
.operations-event.warning { border-left-color: #d1a341; }
.operations-event > div { display: flex; justify-content: space-between; gap: 10px; }
.operations-event p { margin: 0; font-size: .82rem; line-height: 1.4; }
.operations-event time, .operations-event small { color: #758078; font-size: .68rem; }
.operations-event code { max-width: 100%; overflow-wrap: anywhere; color: #4b5b52; font-size: .67rem; white-space: normal; }
.operations-empty { margin: 0; padding: 12px; border: 1px dashed #d3dcd7; border-radius: 8px; }
.highlight-hint { box-shadow: inset 0 0 4px 4px #f1c40f !important; }
@media (max-width: 1050px) {
    .auth-screen { padding: 0; place-items: stretch; }
    .auth-shell { min-height: 100svh; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .auth-story { min-height: auto; padding: 28px clamp(22px, 7vw, 54px) 34px; }
    .auth-story-copy { margin: 54px 0 0; }
    .auth-story h1 { max-width: 680px; font-size: clamp(2.25rem, 8vw, 4rem); }
    .auth-lead { max-width: 680px; }
    .auth-entry-grid, .auth-coach-preview { display: none; }
    .auth-panel { padding: 42px clamp(22px, 7vw, 54px) 56px; place-items: start center; }
    .guest-banner { align-items: flex-start; justify-content: space-between; }
    .guest-banner > div { display: flex; flex-direction: column; gap: 3px; }
    .guest-banner strong { margin: 0; }
    .workspace { --board-size: min(760px, calc(100vw - 60px), calc(100vh - 145px)); flex-direction: column; align-items: center; padding: 14px; }
    #sidebar { width: min(760px, calc(100vw - 28px)); height: auto; min-height: 420px; overflow-y: visible; }
}
@media (max-width: 1100px) {
    .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 12px 0; }
    .topbar-brand { grid-column: 1; grid-row: 1; }
    .topbar-account { grid-column: 2; grid-row: 1; max-width: 50vw; }
    .mode-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: thin; }
    .mode-nav .tab-btn { padding: 8px 11px; }
}
@media (max-width: 520px) {
    .auth-brand { gap: 9px; }
    .auth-logo { width: 38px; height: 38px; font-size: 25px; }
    .auth-brand-name { font-size: 1.25rem; }
    .auth-alpha { padding: 4px 7px; font-size: .6rem; }
    .auth-story-copy { margin-top: 38px; }
    .auth-story h1 { font-size: clamp(2rem, 11vw, 3rem); }
    .auth-lead { margin-top: 18px; font-size: .94rem; }
    .auth-panel { padding-top: 34px; }
    .auth-card h2 { font-size: 2rem; }
    .auth-close { right: -4px; }
    .topbar-manifest { display: none; }
    .guest-banner { flex-direction: column; gap: 8px; }
    .guest-banner button { width: 100%; }
    .admin-section-heading { align-items: flex-start; }
}
@media (min-width: 761px) and (max-width: 1050px) and (orientation: landscape) {
    .workspace { --board-size: min(620px, calc(100vh - 145px), calc(100vw - 500px)); flex-direction: row; align-items: flex-start; gap: 16px; padding: 14px; }
    #sidebar { width: min(460px, calc(100vw - var(--board-size) - 84px)); height: calc(var(--board-size) + 49px); min-height: 0; overflow-y: auto; }
}
@media (max-width: 1050px) and (max-height: 520px) and (orientation: landscape) {
    .topbar { min-height: 52px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 4px 8px; }
    .topbar-brand { grid-column: 1; grid-row: 1; }
    .topbar-manifest { display: none; }
    .mode-nav { grid-column: 2; grid-row: 1; justify-content: flex-start; width: auto; margin: 0; padding: 0; }
    .mode-nav .tab-btn { padding: 6px 8px; }
    .topbar-account { grid-column: 3; grid-row: 1; max-width: 24vw; }
    .workspace { --board-size: min(420px, calc(100vh - 110px), calc(48vw - 20px)); flex-direction: row; align-items: flex-start; gap: 12px; padding: 8px; }
    #sidebar { width: min(480px, calc(100vw - var(--board-size) - 72px)); height: calc(var(--board-size) + 49px); min-height: 0; overflow-y: auto; }
    .tab-content { padding: 14px; }
    .guest-banner { min-height: 44px; flex-direction: row; align-items: center; gap: 8px; padding: 4px 8px; }
    .guest-banner span { display: none; }
    .guest-banner button { width: auto; }
    #guest-banner:not([hidden]) + .workspace { --board-size: min(420px, calc(100vh - 154px), calc(48vw - 20px)); }
}
@media (pointer: coarse) {
    button, select, input:not([type="checkbox"]):not([type="range"]) { min-height: 44px; }
    input[type="range"] { min-height: 44px; padding-block: 0; }
    label.check, .mode-nav .tab-btn, .topbar-manifest { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}