/* Historical Chess Opening Forge visuals reused by ChessOpeningSmith. */

/* lines 3996-4500 from historical app.css */
.opening-mobile-hero {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 22px 16px 28px;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 92% 18%, rgba(96, 165, 250, .35), transparent 32%),
        linear-gradient(145deg, #0f172a 0%, #1e3a5f 62%, #164e63 100%);
}

.opening-mobile-hero::after {
    content: "♞";
    position: absolute;
    right: -12px;
    bottom: -42px;
    color: rgba(255, 255, 255, .08);
    font-size: 9rem;
    line-height: 1;
    transform: rotate(-8deg);
}

.opening-hero-icon {
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(8px);
}

.opening-hero-icon .mud-icon-root {
    font-size: 28px;
}

.opening-hero-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(2, 6, 23, .32));
}

.opening-hero-copy {
    z-index: 1;
    min-width: 0;
}

.opening-hero-copy .mud-typography-overline {
    color: #7dd3fc;
    font-weight: 800;
    letter-spacing: .08em;
}

.opening-hero-copy .mud-typography-h4 {
    margin: -2px 0 3px;
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
}

.opening-hero-copy .mud-typography-body2 {
    color: #cbd5e1;
}

.opening-desktop-create {
    display: none !important;
}

.opening-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -12px 12px 14px;
    position: relative;
    z-index: 2;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.opening-overview > div {
    display: grid;
    justify-items: center;
    padding: 12px 5px;
    text-align: center;
}

.opening-overview > div + div {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.opening-overview .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 18px;
}

.opening-overview strong {
    margin-top: 2px;
    font-size: 1.05rem;
}

.opening-overview span {
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    line-height: 1.15;
}

.opening-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px !important;
}

.opening-color-filters {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.opening-color-filters .mud-button-root {
    flex: 1 0 auto;
    border-radius: 999px;
}

.opening-page > .mud-grid {
    margin: 0 4px;
}

.opening-quota-overage {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 12px 22px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, #f59e0b 50%, var(--mud-palette-lines-default));
    border-radius: 20px;
    background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 13%, var(--mud-palette-surface)), var(--mud-palette-surface));
    box-shadow: 0 12px 28px rgba(120, 53, 15, .09);
}

.opening-quota-overage-icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(145deg, #f59e0b, #ea580c);
    box-shadow: 0 9px 22px rgba(234, 88, 12, .28);
}

.opening-quota-overage h6 { margin: 2px 0 5px; font-weight: 850; }
.opening-quota-overage p { max-width: 760px; color: var(--mud-palette-text-secondary); }
.opening-quota-overage-actions { display: grid; gap: 8px; }
.opening-quota-overage-actions .mud-button-root { justify-content: flex-start; border-radius: 12px; }

.opening-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08) !important;
}

.opening-card.quota-readonly {
    border-color: color-mix(in srgb, #f59e0b 46%, var(--mud-palette-lines-default));
    background: linear-gradient(145deg, color-mix(in srgb, #f59e0b 4%, var(--mud-palette-surface)), var(--mud-palette-surface));
}

.opening-card.quota-readonly::before { background: #f59e0b; }

.opening-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: #d9e2ec;
}

.opening-card.color-b::before {
    background: #334155;
}

.opening-card-heading {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto 40px;
    align-items: center;
    gap: 12px;
}

.opening-quota-readonly-badge {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border: 1px solid rgba(245, 158, 11, .38);
    border-radius: 999px;
    color: #f59e0b;
    background: rgba(245, 158, 11, .09);
    font-size: .68rem;
    font-weight: 850;
    white-space: nowrap;
}

.opening-quota-readonly-badge .mud-icon-root { font-size: 15px; }
.opening-card-heading > .mud-menu { grid-column: 4; grid-row: 1; }

.opening-quota-modal { width: min(760px, 100%); max-height: min(88vh, 880px); overflow: auto; padding: clamp(20px, 3vw, 30px); }
.opening-quota-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.opening-quota-modal-header h5 { margin: 4px 0 6px; font-weight: 850; }
.opening-quota-modal-header p { color: var(--mud-palette-text-secondary); }
.opening-quota-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.opening-quota-choice-grid > button {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    min-width: 0;
    min-height: 82px;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.opening-quota-choice-grid > button:hover { border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default)); }
.opening-quota-choice-grid > button.selected { border-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.opening-quota-choice-grid > button > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.opening-quota-choice-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opening-quota-choice-grid small { color: var(--mud-palette-text-secondary); }
.opening-quota-choice-grid .mud-icon-root { color: var(--mud-palette-primary); }
.opening-quota-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--mud-palette-lines-default); }

@media (max-width: 900px) {
    .opening-quota-overage { grid-template-columns: 50px minmax(0, 1fr); }
    .opening-quota-overage-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .opening-quota-overage { margin-inline: 0; padding: 15px; }
    .opening-quota-overage-actions, .opening-quota-choice-grid { grid-template-columns: 1fr; }
    .opening-card-heading { grid-template-columns: 52px minmax(0, 1fr) 40px; }
    .opening-quota-readonly-badge { grid-column: 1 / -1; justify-self: start; }
    .opening-card-heading > .mud-menu { grid-column: 3; }
    .opening-quota-modal-actions { display: grid; }
}

.opening-color-avatar {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 17px;
    color: #0f172a;
    background: linear-gradient(145deg, #fff, #dbe6f1);
    font-size: 2rem;
    text-shadow: 0 1px 0 #fff;
}

.color-b .opening-color-avatar {
    color: #fff;
    background: linear-gradient(145deg, #334155, #0f172a);
    text-shadow: 0 1px 1px #000;
}

.opening-card-title .mud-typography-h6 {
    font-weight: 800;
    line-height: 1.2;
}

.opening-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.opening-card-stats > div {
    display: grid;
    grid-template-columns: 18px 1fr;
    padding: 9px 8px;
    border-radius: 12px;
    background: var(--mud-palette-background);
}

.opening-card-stats .mud-icon-root {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--mud-palette-primary);
    font-size: 17px;
}

.opening-card-stats strong {
    font-size: .9rem;
    line-height: 1;
}

.opening-card-stats span {
    color: var(--mud-palette-text-secondary);
    font-size: .64rem;
}

.opening-mastery-status {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(74, 222, 128, .24);
    border-radius: 11px;
    color: #86d993;
    background: rgba(34, 197, 94, .08);
    font-size: .78rem;
    font-weight: 700;
}

.opening-mastery-status .mud-icon-root {
    flex: 0 0 auto;
    font-size: 1.1rem;
}

.opening-mastery-status.never {
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background: rgba(148, 163, 184, .06);
}

.opening-last-update {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
}

.opening-last-update .mud-icon-root {
    font-size: 14px;
}

.opening-card-actions {
    gap: 4px;
    padding: 0 16px 16px !important;
}

.opening-train-cta {
    flex: 1;
    min-height: 44px;
    border-radius: 12px !important;
    font-weight: 800 !important;
}

.opening-empty-state {
    margin: 0 12px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 22px !important;
    background: linear-gradient(145deg, var(--mud-palette-surface), rgba(37, 99, 235, .06));
}

.opening-empty-illustration {
    position: relative;
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #0891b2);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .25);
}

.opening-empty-illustration span {
    font-size: 3.5rem;
}

.opening-empty-illustration .mud-icon-root {
    position: absolute;
    right: -6px;
    bottom: -6px;
    padding: 5px;
    box-sizing: content-box;
    border: 3px solid var(--mud-palette-surface);
    border-radius: 50%;
    color: #fff;
    background: #16a34a;
}

.opening-mobile-fab {
    position: fixed !important;
    z-index: 1100;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    min-height: 50px;
    border-radius: 999px !important;
    box-shadow: 0 10px 28px rgba(37, 99, 235, .4) !important;
}

.opening-create-modal {
    width: min(100%, 620px);
}

.opening-create-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 4px;
    border-radius: 15px;
    background: rgba(148, 163, 184, .1);
}

.opening-create-mode button {
    display: flex;
    min-width: 0;
    min-height: 58px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    text-align: left;
    background: transparent;
}

.opening-create-mode button.active {
    border-color: rgba(96, 165, 250, .38);
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .12);
}

.opening-create-mode button > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.opening-create-mode button span {
    display: grid;
    min-width: 0;
}

.opening-create-mode button small {
    overflow: hidden;
    font-size: .67rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pgn-source-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.pgn-source-choice button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    min-width: 0;
    min-height: 62px;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}

.pgn-source-choice button:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 48%, var(--mud-palette-lines-default));
}

.pgn-source-choice button:active {
    transform: scale(.985);
}

.pgn-source-choice button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    outline-offset: 2px;
}

.pgn-source-choice button.active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, var(--mud-palette-surface));
}

.pgn-source-choice button > .mud-icon-root {
    color: var(--mud-palette-primary);
}

.pgn-source-choice button span {
    display: grid;
    min-width: 0;
}

.pgn-source-choice button strong,
.pgn-source-choice button small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pgn-source-choice button small {
    font-size: .67rem;
}

.pgn-paste-panel {
    display: grid;
    gap: 11px;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.pgn-paste-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pgn-paste-heading > span {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
}

.pgn-paste-heading > div {
    display: grid;
    min-width: 0;
}

.pgn-paste-heading small,
.pgn-paste-actions > small {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.pgn-paste-textarea textarea {
    min-height: 150px;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    line-height: 1.45;
    resize: vertical;
}

.pgn-paste-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pgn-paste-actions .mud-button-root {
    min-height: 44px;
    border-radius: 12px;
}

.pgn-file-drop {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 82px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px;
    overflow: hidden;
    border: 2px dashed rgba(96, 165, 250, .48);
    border-radius: 16px;
    color: var(--mud-palette-text-primary);
    background: rgba(37, 99, 235, .07);
    cursor: pointer;
}

.pgn-file-drop.ready {
    border-style: solid;
    border-color: rgba(74, 222, 128, .42);
    background: rgba(34, 197, 94, .07);
}

.pgn-file-drop input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.pgn-file-drop > .mud-icon-root,
.pgn-file-drop > .mud-progress-circular {
    justify-self: center;
    color: var(--mud-palette-primary);
    font-size: 2rem;
}

.pgn-file-drop.ready > .mud-icon-root { color: #4ade80; }

.pgn-file-drop > span { display: grid; min-width: 0; }
.pgn-file-drop strong, .pgn-file-drop small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pgn-file-drop small { color: var(--mud-palette-text-secondary); font-size: .72rem; }

.pgn-import-preview {
    display: grid; gap: 10px; margin-bottom: 15px; padding: 13px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 17px;
    background: rgba(15, 23, 42, .22);
}
.pgn-import-heading { display: flex; align-items: center; gap: 9px; }
.pgn-import-heading > span {
    display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center;
    border-radius: 10px; color: #60a5fa; background: rgba(37, 99, 235, .15);
}
.pgn-import-heading > div, .pgn-evaluation-choice > span { display: grid; }
.pgn-import-heading small, .pgn-evaluation-choice small {
    color: var(--mud-palette-text-secondary); font-size: .72rem;
}
.pgn-import-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.pgn-import-stats > div {
    display: grid; justify-items: center; padding: 7px 3px; border-radius: 10px;
    background: rgba(148, 163, 184, .08);
}
.pgn-import-stats strong { font-size: .93rem; }
.pgn-import-stats span { color: var(--mud-palette-text-secondary); font-size: .62rem; }
.pgn-evaluation-choice {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px;
    padding-top: 5px; border-top: 1px solid var(--mud-palette-lines-default);
}
.pgn-preserved-data { display: flex; align-items: center; gap: 6px; color: #86d993; font-size: .72rem; }
.pgn-preserved-data .mud-icon-root { font-size: 1rem; }

.opening-sheet-handle { display: none; }

.opening-color-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opening-color-choice-button {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; align-items: center;
    gap: 8px; min-height: 76px; padding: 10px; border: 2px solid var(--mud-palette-lines-default);
    border-radius: 16px; color: var(--mud-palette-text-primary); text-align: left;
    background: var(--mud-palette-surface);
}
.opening-color-choice-button.selected {
    border-color: var(--mud-palette-primary); background: rgba(37, 99, 235, .08);
}
.opening-color-choice-button > span:nth-child(2) { display: grid; }
.opening-color-choice-button small { color: var(--mud-palette-text-secondary); line-height: 1.2; }
.opening-color-choice-button > .mud-icon-root { color: var(--mud-palette-primary); }
.opening-choice-piece {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.8rem;
}
.opening-choice-piece.white { color: #0f172a; background: #e8edf3; }
.opening-choice-piece.black { color: #fff; background: #1e293b; }

.opening-create-actions {
    position: sticky; bottom: -20px; display: flex; padding: 12px 0 4px;
    background: var(--mud-palette-surface);
}
.opening-create-actions .mud-button-root {
    width: 100%; min-height: 50px; border-radius: 14px;
}

.opening-create-modal { width: min(100%, 720px); }

.responsive-modal-overlay {
    position: fixed; inset: 0; z-index: 1400; display: flex;
    align-items: flex-start; justify-content: center;
    padding: 6vh 16px 16px; background: rgba(0, 0, 0, 0.45);
}
.responsive-modal {
    max-height: calc(100vh - 8vh); overflow-y: auto; border-radius: 22px !important;
}

/* lines 5681-5729 from historical app.css */
@media (min-width: 600px) {
    .opening-page {
        padding: 24px 16px 48px !important;
    }

    .opening-mobile-hero {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        align-items: center;
        border-radius: 24px;
    }

    .opening-desktop-create {
        z-index: 1;
        display: inline-flex !important;
    }

    .opening-mobile-fab {
        display: none !important;
    }

    .opening-overview {
        max-width: 620px;
        margin-inline: auto;
    }

    .opening-filters {
        grid-template-columns: minmax(220px, 1fr) auto;
        align-items: center;
        margin-inline: 0;
    }
}

/* Opening training launcher and guided sessions */
.opening-hero-actions {
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
}

.opening-global-training {
    min-height: 46px;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .13) !important;
    backdrop-filter: blur(8px);
}

/* lines 7070-7520 from historical app.css */
/* ChessOpeningSmith — guide */
.cof-guide-page {
    padding-block: clamp(1rem, 3vw, 2rem) 3rem;
}

.cof-guide-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr);
    align-items: center;
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(249, 115, 22, .22);
    border-radius: 28px;
    color: #f8fafc;
    background:
        radial-gradient(circle at 18% 45%, rgba(249, 115, 22, .23), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(96, 165, 250, .2), transparent 35%),
        linear-gradient(135deg, #050b15, #101d2d 58%, #172033);
    box-shadow: 0 24px 60px rgba(2, 6, 23, .18);
}

.cof-guide-hero::after {
    content: "";
    position: absolute;
    inset: auto -8% -60% 25%;
    height: 290px;
    background: radial-gradient(ellipse, rgba(249, 115, 22, .13), transparent 65%);
    pointer-events: none;
}

.cof-guide-brand {
    z-index: 1;
    display: grid;
    place-items: center;
    align-self: stretch;
    min-height: 260px;
    background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 58%);
}

.cof-guide-brand img {
    width: min(86%, 245px);
    max-height: 245px;
    object-fit: contain;
    filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .38));
}

.cof-guide-hero-copy {
    z-index: 1;
    max-width: 760px;
    padding: clamp(1.5rem, 4vw, 3.5rem);
}

.cof-guide-hero-copy .mud-typography-overline,
.cof-guide-section-heading > span {
    color: #fb923c;
    font-weight: 850;
    letter-spacing: .11em;
}

.cof-guide-hero-copy h1 {
    max-width: 18ch;
    margin: .25rem 0 .85rem;
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: -.04em;
}

.cof-guide-hero-copy > .mud-typography-body1 {
    max-width: 65ch;
    color: #cbd5e1;
    line-height: 1.65;
}

.cof-guide-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.35rem;
}

.cof-guide-hero-actions .mud-button-root {
    min-height: 44px;
    border-radius: 12px;
}

.cof-guide-hero-actions .mud-button-outlined {
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.cof-guide-section {
    margin-top: clamp(2rem, 5vw, 4rem);
}

.cof-guide-section-heading {
    margin-bottom: 1.25rem;
}

.cof-guide-section-heading h2 {
    margin: .25rem 0 .35rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.cof-guide-section-heading .mud-typography-body2 {
    color: var(--mud-palette-text-secondary);
}

.cof-guide-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.cof-guide-steps article,
.cof-guide-features article,
.cof-guide-practical-grid > div {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.cof-guide-steps article {
    position: relative;
    min-height: 220px;
    padding: 1.25rem;
    overflow: hidden;
    border-radius: 20px;
}

.cof-guide-steps article > span {
    position: absolute;
    top: .8rem;
    right: .9rem;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
}

.cof-guide-steps article > .mud-icon-root {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 13px;
    color: #f97316;
    background: color-mix(in srgb, #f97316 12%, var(--mud-palette-surface));
    font-size: 24px;
}

.cof-guide-steps h3,
.cof-guide-features h3,
.cof-guide-practical h3 {
    margin: 1rem 0 .45rem;
    font-size: 1.05rem;
    font-weight: 850;
}

.cof-guide-steps p,
.cof-guide-features p,
.cof-guide-practical li {
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
}

.cof-guide-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.cof-guide-features article {
    display: flex;
    gap: 1rem;
    min-width: 0;
    padding: 1.2rem;
    border-radius: 18px;
}

.cof-guide-feature-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #f97316, #ea580c);
    box-shadow: 0 9px 20px rgba(249, 115, 22, .22);
}

.cof-guide-features h3 {
    margin-top: 0;
}

.cof-guide-features p {
    margin: 0;
}

.cof-guide-practical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.cof-guide-spaced-review {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, var(--mud-palette-lines-default));
    border-radius: 24px;
    padding: clamp(20px, 3vw, 34px);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.cof-guide-review-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.cof-guide-review-timeline article {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    min-height: 188px;
    padding: 1.2rem 1.25rem 1.3rem;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-surface);
}

.cof-guide-review-timeline article > span {
    position: absolute;
    top: .55rem;
    right: .85rem;
    width: auto;
    height: auto;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    background: transparent;
    font-size: 4.2rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.cof-guide-review-timeline article > .mud-icon-root {
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 13px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
    font-size: 24px;
}

.cof-guide-review-timeline article.retry > .mud-icon-root {
    color: #f59e0b;
    background: rgba(245, 158, 11, .14);
}

.cof-guide-review-timeline article.mastered > .mud-icon-root {
    color: #22c55e;
    background: rgba(34, 197, 94, .13);
}

.cof-guide-review-timeline h3 {
    position: relative;
    margin: 1rem 0 .45rem;
    font-size: 1.05rem;
    font-weight: 850;
}

.cof-guide-review-timeline p {
    position: relative;
    margin: 0;
    max-width: 42ch;
    color: var(--mud-palette-text-secondary);
    font-size: .9rem;
    line-height: 1.55;
}

.cof-guide-review-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.cof-guide-review-tip p,
.cof-guide-review-tip span {
    margin: 0;
}

.cof-guide-review-tip p {
    display: grid;
    gap: 2px;
}

.cof-guide-review-tip span {
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 1099.98px) {
    .cof-guide-review-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599.98px) {
    .cof-guide-spaced-review {
        border-radius: 18px;
        padding: 18px 14px;
    }

    .cof-guide-review-timeline {
        grid-template-columns: 1fr;
    }

    .cof-guide-review-tip {
        align-items: flex-start;
    }
}

.cof-guide-practical-grid > div {
    padding: 1.3rem;
    border-radius: 20px;
}

.cof-guide-practical-grid > div > .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 30px;
}

.cof-guide-practical ul {
    margin: .65rem 0 0;
    padding-left: 1.15rem;
}

.cof-guide-practical li + li {
    margin-top: .45rem;
}

.cof-guide-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.2rem 1.35rem;
    border: 1px solid color-mix(in srgb, #f97316 28%, var(--mud-palette-lines-default));
    border-radius: 20px;
    background: color-mix(in srgb, #f97316 7%, var(--mud-palette-surface));
}

.cof-guide-help > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1rem;
}

.cof-guide-help > div > .mud-icon-root {
    flex: 0 0 auto;
    color: #f97316;
    font-size: 32px;
}

.cof-guide-help span {
    display: grid;
    gap: .2rem;
}

.cof-guide-help strong {
    font-size: 1.05rem;
}

.cof-guide-help small {
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

@media (max-width: 959px) {
    .cof-guide-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cof-guide-practical-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599px) {
    .cof-guide-page {
        padding: .75rem .75rem 5rem;
    }

    .cof-guide-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        border-radius: 22px;
    }

    .cof-guide-brand {
        min-height: 145px;
        padding-top: .7rem;
    }

    .cof-guide-brand img {
        width: 150px;
        height: 150px;
    }

    .cof-guide-hero-copy {
        padding: 1rem 1.15rem 1.35rem;
        text-align: center;
    }

    .cof-guide-hero-copy h1 {
        margin-inline: auto;
        font-size: clamp(1.85rem, 9vw, 2.45rem);
    }

    .cof-guide-hero-actions {
        display: grid;
    }

    .cof-guide-hero-actions .mud-button-root {
        width: 100%;
    }

    .cof-guide-steps,
    .cof-guide-features {
        grid-template-columns: 1fr;
    }

    .cof-guide-steps article {
        min-height: 180px;
    }

    .cof-guide-features article {
        padding: 1rem;
    }

    .cof-guide-help {
        align-items: stretch;
        flex-direction: column;
    }

    .cof-guide-help > .mud-button-root,
    .cof-guide-start {
        width: 100%;
        min-height: 48px;
    }
}

.cof-guide-start.mud-button-root,
.cof-guide-help .cof-guide-start {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    min-width: max-content;
    min-height: 48px;
    padding: 0 1.35rem;
    border: 0;
    border-radius: 14px;
    color: #fff !important;
    background: linear-gradient(145deg, #fb923c, #ea580c) !important;
    box-shadow: 0 12px 24px rgba(234, 88, 12, .28);
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
}

.cof-guide-start .mud-button-label,
.cof-guide-start .mud-button-text {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    white-space: nowrap;
}

.cof-guide-start.mud-button-root:hover,
.cof-guide-help .cof-guide-start:hover {
    background: linear-gradient(145deg, #fdba74, #c2410c) !important;
    box-shadow: 0 14px 28px rgba(234, 88, 12, .34);
}

/* historical stats modal */
/* Training mastery, spaced reviews and advanced repertoire statistics */
.opening-line-card.mastery-mastered { border-left: 4px solid #39b56b; }
.opening-line-card.mastery-learning { border-left: 4px solid #e6a829; }
.opening-line-card.mastery-struggling { border-left: 4px solid #e0525f; }
.opening-line-card.mastery-new { border-left: 4px solid rgba(148, 163, 184, .45); }
.opening-line-identical-end.mastery-mastered { border-left: 4px solid #39b56b; }
.opening-line-identical-end.mastery-learning { border-left: 4px solid #e6a829; }
.opening-line-identical-end.mastery-struggling { border-left: 4px solid #e0525f; }
.opening-line-mastery { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.opening-line-mastery i, .opening-review-summary i, .opening-stats-line > i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.opening-line-mastery.mastered { color: #31a862; background: rgba(49, 168, 98, .13); }
.opening-line-mastery.learning { color: #c58913; background: rgba(229, 168, 41, .14); }
.opening-line-mastery.struggling { color: #dc4655; background: rgba(224, 82, 95, .14); }
.training-review-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 12px; }
.training-review-mode button { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); text-align: left; cursor: pointer; }
.training-review-mode button.active { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface)); }
.training-review-mode button:disabled { opacity: .48; cursor: not-allowed; }
.training-review-mode button > svg { color: var(--mud-palette-primary); }
.training-review-mode button span { display: grid; gap: 2px; }
.training-review-mode button small { color: var(--mud-palette-text-secondary); }
.training-line-option.mastery-mastered { border-left: 4px solid #39b56b; }
.training-line-option.mastery-learning { border-left: 4px solid #e6a829; }
.training-line-option.mastery-struggling { border-left: 4px solid #e0525f; }
.training-line-length em { display: block; color: #c58913; font-style: normal; font-weight: 800; }
.opening-review-summary { width: 100%; display: flex; align-items: center; gap: 14px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 13px; color: var(--mud-palette-text-primary); background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-primary) 12%); cursor: pointer; }
.opening-review-summary span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 750; }
.opening-review-summary .due { color: #e6a829; }
.opening-review-summary .struggling { color: #e0525f; }
.opening-review-summary > svg { margin-left: auto; }
.opening-stats-modal { width: min(720px, calc(100vw - 24px)); max-height: min(88dvh, 860px); overflow: auto; padding: 22px; }
.opening-stats-header { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.opening-stats-header > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: white; background: var(--mud-palette-primary); }
.opening-stats-header > div { flex: 1; min-width: 0; }
.opening-stats-header small { color: var(--mud-palette-primary); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.opening-stats-header h2 { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opening-stats-loading { display: grid; place-items: center; gap: 12px; min-height: 220px; }
.opening-advanced-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.opening-advanced-stats > div { display: grid; gap: 4px; padding: 14px; border-radius: 15px; background: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-primary) 12%); }
.opening-advanced-stats svg { color: var(--mud-palette-primary); }
.opening-advanced-stats strong { font-size: 1.22rem; }
.opening-advanced-stats span { color: var(--mud-palette-text-secondary); font-size: .75rem; }
.opening-stats-explanation { display: flex; gap: 12px; margin: 16px 0; padding: 14px; border-radius: 14px; color: var(--mud-palette-text-primary); background: rgba(78, 155, 255, .11); }
.opening-stats-explanation svg { color: var(--mud-palette-primary); flex: 0 0 auto; }
.opening-stats-explanation p { display: grid; gap: 3px; margin: 0; }
.opening-stats-explanation span { color: var(--mud-palette-text-secondary); font-size: .82rem; }
.opening-stats-lines { display: grid; gap: 8px; margin: 10px 0 18px; max-height: 310px; overflow-y: auto; }
.opening-stats-line { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid var(--mud-palette-lines-default); border-radius: 13px; }
.opening-stats-line.mastery-mastered > i { color: #39b56b; }
.opening-stats-line.mastery-learning > i { color: #e6a829; }
.opening-stats-line.mastery-struggling > i { color: #e0525f; }
.opening-stats-line > span { display: grid; flex: 1; min-width: 0; }
.opening-stats-line small { color: var(--mud-palette-text-secondary); }
.opening-stats-line em { font-style: normal; font-size: .74rem; font-weight: 850; }
.opening-stats-empty { padding: 28px; text-align: center; color: var(--mud-palette-text-secondary); }
@media (max-width: 600px) {
    .training-review-mode { grid-template-columns: 1fr; gap: 8px; }
    .training-review-mode button { min-height: 62px; padding: 10px 13px; }
    .opening-line-mastery { font-size: 0; padding: 7px; }
    .opening-line-mastery i { width: 10px; height: 10px; }
    .opening-stats-modal { width: 100%; max-height: 92dvh; padding: 16px; border-radius: 22px 22px 0 0; align-self: end; }
    .opening-advanced-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opening-review-summary { gap: 9px; }
    .opening-review-summary span { font-size: .72rem; }
}

/* === historical editor + training (from Phelipot app.css) === */
.opening-line-card.mastery-mastered { border-left: 4px solid #39b56b; }

.opening-line-card.mastery-learning { border-left: 4px solid #e6a829; }

.opening-line-card.mastery-struggling { border-left: 4px solid #e0525f; }

.opening-line-card.mastery-new { border-left: 4px solid rgba(148, 163, 184, .45); }

.opening-line-identical-end.mastery-mastered { border-left: 4px solid #39b56b; }

.opening-line-identical-end.mastery-learning { border-left: 4px solid #e6a829; }

.opening-line-identical-end.mastery-struggling { border-left: 4px solid #e0525f; }

.opening-line-mastery { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }

.opening-line-mastery i, .opening-review-summary i, .opening-stats-line > i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.opening-line-mastery.mastered { color: #31a862; background: rgba(49, 168, 98, .13); }

.opening-line-mastery.learning { color: #c58913; background: rgba(229, 168, 41, .14); }

.opening-line-mastery.struggling { color: #dc4655; background: rgba(224, 82, 95, .14); }

.training-review-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0 12px; }

.training-review-mode button { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 13px 16px; border: 1px solid var(--mud-palette-lines-default); border-radius: 16px; color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); text-align: left; cursor: pointer; }

.training-review-mode button.active { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent); background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface)); }

.training-review-mode button:disabled { opacity: .48; cursor: not-allowed; }

.training-review-mode button > svg { color: var(--mud-palette-primary); }

.training-review-mode button span { display: grid; gap: 2px; }

.training-review-mode button small { color: var(--mud-palette-text-secondary); }

.training-line-option.mastery-mastered { border-left: 4px solid #39b56b; }

.training-line-option.mastery-learning { border-left: 4px solid #e6a829; }

.training-line-option.mastery-struggling { border-left: 4px solid #e0525f; }

.training-line-length em { display: block; color: #c58913; font-style: normal; font-weight: 800; }

@media (max-width: 600px) {
    .training-review-mode { grid-template-columns: 1fr; gap: 8px; }
    .training-review-mode button { min-height: 62px; padding: 10px 13px; }
    .opening-line-mastery { font-size: 0; padding: 7px; }
    .opening-line-mastery i { width: 10px; height: 10px; }
    .opening-stats-modal { width: 100%; max-height: 92dvh; padding: 16px; border-radius: 22px 22px 0 0; align-self: end; }
    .opening-advanced-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .opening-review-summary { gap: 9px; }
    .opening-review-summary span { font-size: .72rem; }
}

.opening-incomplete-summary {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}

.opening-incomplete-summary:hover {
    color: #d97706;
    background: rgba(245, 158, 11, .19);
    transform: translateY(-1px);
}

.opening-incomplete-summary:focus-visible {
    outline: 3px solid rgba(245, 158, 11, .35);
    outline-offset: 2px;
}

.opening-incomplete-help {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 0 0 10px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 32%, var(--mud-palette-lines-default));
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-warning) 7%, transparent);
    font-size: .72rem;
    line-height: 1.45;
}

.opening-incomplete-help .mud-icon-root {
    margin-top: 1px;
    color: var(--mud-palette-warning);
}

.opening-incomplete-help div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.opening-incomplete-help strong {
    color: var(--mud-palette-text-primary);
}

.opening-editor-board {
    padding-inline-end: 30px;
    box-sizing: border-box;
}

.stockfish-evaluation-only {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
    border-radius: 13px;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-background));
}

.stockfish-evaluation-only > span,
.stockfish-evaluation-only > small {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
}

.stockfish-evaluation-only > strong {
    grid-row: 1 / 3;
    grid-column: 2;
    color: var(--mud-palette-primary);
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
}

.opening-mobile-evaluation {
    display: none;
}

@media (max-width: 599.98px) {
    .opening-editor-board {
        padding-inline-end: 2px;
    }

    .opening-board-panel.board-size-compact .chess-board-shell {
        width: min(78vw, 330px) !important;
    }

    .opening-board-panel.board-size-normal .chess-board-shell {
        width: min(90vw, 400px) !important;
    }

    .opening-board-panel.board-size-large .chess-board-shell,
    .opening-board-panel.board-size-auto .chess-board-shell {
        width: 100% !important;
    }

    .opening-board-panel.board-size-custom .chess-board-shell {
        width: min(100%, var(--opening-board-custom-size, 100%)) !important;
    }

    .opening-mobile-evaluation {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(92px, 34%) 22px;
        width: min(100%, 520px);
        min-height: 54px;
        align-items: center;
        gap: 9px;
        margin: 7px auto 2px;
        padding: 7px 10px;
        border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-lines-default));
        border-radius: 14px;
        color: var(--mud-palette-text-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
        font: inherit;
        text-align: left;
    }

    .opening-mobile-evaluation-score {
        display: grid;
        grid-template-columns: 22px auto;
        min-width: 0;
        align-items: center;
        column-gap: 6px;
    }

    .opening-mobile-evaluation-score > .mud-icon-root {
        grid-row: 1 / 3;
        color: var(--mud-palette-primary);
        font-size: 20px;
    }

    .opening-mobile-evaluation-score strong {
        font-size: .88rem;
        font-variant-numeric: tabular-nums;
    }

    .opening-mobile-evaluation-score small {
        overflow: hidden;
        color: var(--mud-palette-text-secondary);
        font-size: .59rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opening-mobile-evaluation-gauge {
        display: flex;
        height: 12px;
        overflow: hidden;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 999px;
        background: #111827;
    }

    .opening-mobile-evaluation-gauge i:first-child {
        width: var(--stockfish-white, 50%);
        background: #f8fafc;
        transition: width 180ms ease;
    }

    .opening-mobile-evaluation-gauge i:last-child {
        flex: 1;
        background: #111827;
    }

    .board-color-editor {
        padding: .7rem;
    }

    .board-color-picker {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .board-color-picker code {
        display: none;
    }

    .board-color-suggestions button {
        width: 34px;
        height: 34px;
    }
}

.responsive-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 16px 16px;
    background: rgba(0, 0, 0, 0.45);
}

.responsive-modal {
    max-height: calc(100vh - 10vh);
    overflow-y: auto;
}

.opening-editor-toast {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    z-index: 1350;
    transform: translateX(-50%);
    min-width: min(480px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.24);
    animation: opening-editor-toast-in 160ms ease-out;
}

@keyframes opening-editor-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .opening-editor-toast {
        animation: none;
    }
}

.opening-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.opening-training-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.2fr) minmax(280px, .8fr);
    gap: 20px;
    align-items: start;
}

.opening-board-panel {
    min-width: 0;
}

.chess-board-shell.is-board-resizing {
    width: min(100%, var(--opening-board-live-size)) !important;
    max-width: none;
    transition: none !important;
}

.opening-board-panel.board-size-auto .chess-board-shell {
    width: min(100%, clamp(320px, calc(100dvh - 220px), 620px));
}

.opening-editor-board.board-size-auto .chess-board-shell {
    width: min(100%, clamp(320px, calc(100dvh - 220px), 760px));
    max-width: none;
}

.opening-training-board.board-size-auto .chess-board-shell {
    width: min(100%, clamp(320px, calc(100dvh - 250px), 580px));
}

.opening-board-panel.board-size-compact .chess-board-shell {
    width: min(100%, 430px, max(320px, calc(100dvh - 230px)));
}

.opening-board-panel.board-size-normal .chess-board-shell {
    width: min(100%, 530px, max(320px, calc(100dvh - 205px)));
}

.opening-board-panel.board-size-large .chess-board-shell {
    width: min(100%, 720px, max(320px, calc(100dvh - 145px)));
}

.opening-board-panel.board-size-custom .chess-board-shell {
    width: min(100%, var(--opening-board-custom-size, 560px), max(280px, calc(100dvh - 230px)));
}

.opening-board-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
}

.opening-board-markup-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    width: min(100%, 720px);
    margin: 10px auto 2px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 76%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    box-sizing: border-box;
    min-width: 0;
}

.opening-board-markup-tools,
.opening-board-markup-colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.opening-board-markup-tool,
.opening-board-markup-clear {
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
    min-width: 0;
    white-space: normal;
}

.opening-board-markup-tool {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.opening-board-markup-tool > span:first-child {
    font-size: 1.15rem;
    line-height: 1;
}

.opening-board-markup-tool.active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.opening-board-markup-color {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 3px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--markup-color);
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
    cursor: pointer;
}

.opening-board-markup-color.color-green { --markup-color: #22c55e; }

.opening-board-markup-color.color-red { --markup-color: #ef4444; }

.opening-board-markup-color.color-blue { --markup-color: #3b82f6; }

.opening-board-markup-color.color-yellow { --markup-color: #facc15; }

.opening-board-markup-color.active {
    box-shadow: 0 0 0 3px var(--mud-palette-primary);
    transform: scale(1.06);
}

.opening-board-markup-clear:disabled,
.opening-board-markup-tool:disabled,
.opening-board-markup-color:disabled {
    cursor: default;
    opacity: .48;
}

.opening-board-markup-toolbar > small {
    flex: 1 0 100%;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    .opening-board-markup-toolbar {
        flex-direction: column;
        gap: 7px;
        margin-top: 7px;
        padding: 8px;
    }

    .opening-board-markup-tools {
        justify-content: stretch;
    }

    .opening-board-markup-tool {
        flex: 1;
        justify-content: center;
        padding-inline: 7px;
    }

    .opening-board-markup-colors {
        justify-content: center;
    }

    .opening-board-markup-clear {
        justify-self: center;
        min-height: 34px;
        padding-inline: 8px;
    }
}

.opening-board-size-menu .mud-button-root,
.opening-board-palette-menu .mud-button-root {
    min-height: 38px;
    border-radius: 11px;
    color: var(--mud-palette-text-secondary);
}

.opening-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.opening-tree-panel,
.opening-details-panel,
.opening-training-panel {
    min-width: 0;
    max-height: calc(100dvh - 120px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.opening-tree-panel {
    padding: 18px;
}

.opening-journey-header,
.opening-next-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.opening-journey-header {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: -18px -18px 0;
    padding: 18px 18px 10px;
    background: var(--mud-palette-surface);
}

.opening-journey-eyebrow {
    color: var(--mud-palette-primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.opening-journey-header h2,
.opening-next-heading h3 {
    margin: 1px 0 0;
    color: var(--mud-palette-text-primary);
    font-size: 1.12rem;
    line-height: 1.25;
}

.opening-journey-header p,
.opening-next-heading p {
    margin: 3px 0 0;
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.opening-incomplete-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding: 4px 7px;
    border-radius: 999px;
    color: #f59e0b;
    background: rgba(245, 158, 11, .12);
    font-size: .68rem;
    font-weight: 800;
}

.opening-journey-reset {
    flex: 0 0 auto;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.opening-journey-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.opening-journey-overview {
    white-space: nowrap;
}

.opening-path {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 16px -4px 14px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.opening-path::-webkit-scrollbar {
    display: none;
}

.opening-path-step {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    font: inherit;
    cursor: pointer;
    scroll-snap-align: center;
}

.opening-path-step:hover {
    background: var(--mud-palette-action-default-hover);
}

.opening-path-step.active {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 38%, transparent);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.opening-path-step small {
    opacity: .72;
    font-size: .67rem;
}

.opening-path-step strong {
    color: inherit;
    font-size: .88rem;
}

.opening-path-arrow {
    flex: 0 0 auto;
    color: var(--mud-palette-text-disabled);
}

.opening-current-position {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mud-palette-primary) 12%, transparent),
            color-mix(in srgb, var(--mud-palette-primary) 4%, transparent));
}

.opening-current-position.incomplete {
    border-color: rgba(245, 158, 11, .52);
    background: linear-gradient(135deg, rgba(245, 158, 11, .13), rgba(245, 158, 11, .04));
}

.opening-current-position.incomplete .opening-current-marker {
    background: #d97706;
    box-shadow: 0 7px 16px rgba(217, 119, 6, .24);
}

.opening-current-position .opening-incomplete-text {
    color: #f59e0b;
    font-weight: 750;
}

.opening-current-position .opening-current-evaluation {
    color: #14b8a6;
    font-weight: 800;
}

.opening-current-marker {
    display: grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.opening-current-position > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.opening-current-position span:not(.opening-current-marker) {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opening-current-position strong,
.opening-current-position small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-current-position strong {
    font-size: .96rem;
}

.opening-current-position small {
    color: var(--mud-palette-text-secondary);
}

.opening-next-heading {
    margin: 20px 2px 10px;
}

.opening-next-heading h3 {
    font-size: .94rem;
}

.opening-next-heading > span {
    display: grid;
    min-width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-size: .78rem;
    font-weight: 800;
}

.opening-next-moves {
    display: grid;
    gap: 8px;
}

.opening-next-move-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: stretch;
    gap: 5px;
}

.opening-next-move-row > .mud-menu {
    display: flex;
    align-items: stretch;
}

.opening-next-move-row > .mud-menu > .mud-button-root,
.opening-move-menu .mud-button-root {
    width: 44px;
    min-width: 44px;
    height: 100%;
    min-height: 60px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 13px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
}

.opening-menu-danger {
    color: var(--mud-palette-error) !important;
}

.opening-next-move {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-height: 60px;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 10px 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 15px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.opening-next-move:hover {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default));
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
}

.opening-next-move.main-line {
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 9px;
}

.opening-next-move.incomplete {
    border-color: rgba(245, 158, 11, .48);
    background: color-mix(in srgb, #f59e0b 6%, var(--mud-palette-surface));
}

.opening-next-number {
    min-width: 31px;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 700;
}

.opening-next-content {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.opening-next-content strong {
    font-size: 1rem;
}

.opening-next-content small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .73rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-next-content .opening-next-note {
    color: var(--mud-palette-text-primary);
    font-style: italic;
    opacity: .82;
}

.opening-next-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--mud-palette-text-secondary);
}

.opening-next-meta em {
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    font-size: .61rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.opening-next-meta em .mud-icon-root {
    margin-right: 2px;
    font-size: .75rem;
    vertical-align: text-bottom;
}

.opening-next-meta em.incomplete {
    color: #f59e0b;
    background: rgba(245, 158, 11, .13);
}

.opening-next-meta em.evaluation {
    color: #14b8a6;
    background: rgba(20, 184, 166, .13);
}

.opening-next-meta em.excluded {
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-disabled-background);
}

.opening-next-move.incomplete .opening-next-meta em:not(.incomplete) {
    display: none;
}

.opening-next-meta small {
    font-size: .68rem;
    white-space: nowrap;
}

.opening-empty-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    border-radius: 15px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.opening-empty-line > div {
    display: grid;
    gap: 2px;
}

.opening-empty-line strong {
    font-size: .88rem;
}

.opening-empty-line span {
    color: var(--mud-palette-text-secondary);
    font-size: .74rem;
}

.opening-empty-line.incomplete {
    border-color: rgba(245, 158, 11, .5);
    background: rgba(245, 158, 11, .08);
}

.opening-empty-line.complete {
    border-color: rgba(34, 197, 94, .42);
    background: rgba(34, 197, 94, .07);
}

.opening-training-options-overlay {
    align-items: center;
    padding-top: 16px;
}

.opening-training-options-modal {
    width: min(100%, 620px);
    padding: 22px;
    border-radius: 22px !important;
}

.opening-training-options-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opening-training-options-header > div {
    min-width: 0;
}

.opening-training-options-header > div > span {
    color: var(--mud-palette-primary);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
}

.opening-training-options-header h2 {
    margin: 3px 0 5px;
    font-size: 1.25rem;
}

.opening-training-options-header p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
}

.opening-training-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.opening-training-scope-choice {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 82px;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.opening-training-scope-choice > .mud-icon-root {
    color: var(--mud-palette-primary);
}

.opening-training-scope-choice > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.opening-training-scope-choice strong {
    font-size: .78rem;
}

.opening-training-scope-choice small {
    color: var(--mud-palette-text-secondary);
    font-size: .67rem;
}

.opening-training-scope-choice.active {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.opening-training-scope-choice:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

.opening-training-options-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.opening-overview-overlay {
    align-items: center;
    padding-top: 16px;
    overflow: hidden;
    overscroll-behavior: contain;
}

.opening-overview-modal {
    display: flex;
    width: min(980px, calc(100vw - 32px));
    height: min(90dvh, 900px);
    max-height: min(90dvh, 900px);
    min-height: min(620px, calc(100dvh - 32px));
    flex-direction: column;
    padding: 22px;
    overflow: hidden;
    border-radius: 24px !important;
}

@media (min-width: 960px) {
    .opening-overview-overlay {
        justify-content: flex-end;
        align-items: stretch;
        padding: 0;
        background: transparent;
        pointer-events: none;
    }

    .opening-overview-modal {
        pointer-events: auto;
        width: min(540px, 44vw);
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        border-radius: 24px 0 0 24px !important;
        box-shadow: -18px 0 48px rgba(2, 6, 23, .22);
    }
}

.opening-overview-header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.opening-overview-header > div {
    min-width: 0;
}

.opening-overview-header > div > span {
    color: var(--mud-palette-primary);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
}

.opening-overview-header h2 {
    margin: 2px 0;
    font-size: 1.35rem;
}

.opening-overview-header p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .78rem;
}

.opening-overview-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.opening-overview-search .mud-input-control {
    margin-top: 0;
}

.opening-overview-search-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: inherit;
    background: var(--mud-palette-background);
    font: inherit;
}

.opening-overview-search-input:focus {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 1px;
}

.opening-simple-list {
    display: grid;
    gap: 6px;
}

.opening-simple-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.opening-simple-line.is-current {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.opening-simple-moves {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 2px 2px;
    min-width: 0;
}

.opening-simple-ply {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
    padding: 3px 6px;
    border: 0;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.opening-simple-ply:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.opening-simple-ply.is-on {
    color: #fff;
    background: var(--mud-palette-primary);
}

.opening-simple-ply.is-on small {
    color: inherit;
    opacity: .8;
}

.opening-simple-ply small {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
}

.opening-simple-ply strong {
    font-size: .92rem;
    font-weight: 750;
}

.opening-simple-flag {
    flex: 0 0 auto;
    margin-top: 3px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #b45309;
    background: rgba(245, 158, 11, .16);
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
}

.opening-overview-reset {
    margin-top: 8px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    color: var(--mud-palette-primary);
    background: transparent;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.opening-overview-start {
    min-height: 42px;
    border-radius: 12px !important;
}

.opening-overview-filters {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.opening-overview-filters::-webkit-scrollbar {
    display: none;
}

.opening-overview-filter {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 40px;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
}

.opening-overview-filter > span {
    display: grid;
    min-width: 21px;
    height: 21px;
    place-items: center;
    padding-inline: 4px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    font-size: .68rem;
}

.opening-overview-filter.active {
    border-color: var(--mud-palette-primary);
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.opening-overview-filter.active > span {
    background: rgba(255, 255, 255, .2);
}

.opening-overview-explanation {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-background-gray));
}

.opening-overview-explanation > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.opening-overview-explanation p {
    margin: 0;
    font-size: .74rem;
    line-height: 1.45;
}

.opening-overview-explanation strong {
    color: var(--mud-palette-text-primary);
}

.opening-overview-scroll {
    width: 100%;
    height: 0;
    min-height: 0;
    flex: 1 1 0;
    padding: 2px 5px 14px 2px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.opening-overview-load-more {
    display: flex;
    width: 100%;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
    border-radius: 16px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    font: inherit;
    cursor: pointer;
}

.opening-overview-load-more > span {
    display: grid;
    gap: 1px;
    text-align: left;
}

.opening-overview-load-more strong {
    font-size: .82rem;
}

.opening-overview-load-more small {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
}

.opening-overview-load-more:hover,
.opening-overview-load-more:focus-visible {
    border-style: solid;
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, var(--mud-palette-surface));
}

.opening-overview-load-more:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    outline-offset: 2px;
}

.opening-line-group {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 42%, var(--mud-palette-lines-default));
    border-radius: 20px;
    background: var(--mud-palette-surface);
    box-shadow: 0 7px 22px rgba(15, 23, 42, .07);
}

.opening-line-group.contains-selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

.opening-line-group-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-background-gray));
}

.opening-line-group-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--mud-palette-primary);
}

.opening-line-group-header > div:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.opening-line-group-header > div:nth-child(2) > strong {
    font-size: .9rem;
}

.opening-line-group-header > div:nth-child(2) > span {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-line-group-statuses {
    display: flex;
    align-items: center;
    gap: 5px;
}

.opening-line-group-statuses > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 5px 7px;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 850;
}

.opening-line-group-statuses .notes {
    color: #a78bfa;
    background: rgba(139, 92, 246, .12);
}

.opening-line-group-statuses .incomplete {
    color: #f59e0b;
    background: rgba(245, 158, 11, .13);
}

.opening-line-group-toggle {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-lines-default));
    border-radius: 11px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    font: inherit;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}

.opening-line-group-trunk {
    padding: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}

.opening-line-group-trunk-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 0 3px 7px;
}

.opening-line-group-trunk-label span {
    color: var(--mud-palette-primary);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.opening-line-group-trunk-label small {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
}

.opening-line-group-trunk .opening-line-moves {
    padding: 0;
}

.opening-line-group-trunk .opening-line-insights {
    padding: 9px 0 0;
}

.opening-line-group-branches {
    display: grid;
    gap: 9px;
    padding: 0 12px 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 55%, var(--mud-palette-surface));
}

.opening-line-group-branches-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 10px;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 850;
}

.opening-line-group-branches-title .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 18px;
}

.opening-line-card.compact {
    border-radius: 14px;
    box-shadow: none;
}

.opening-line-card.compact .opening-line-header {
    min-height: 48px;
    padding-block: 7px;
}

.opening-line-card.compact .opening-line-footer {
    display: none;
}

.opening-line-identical-end {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    color: inherit;
    background: var(--mud-palette-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.opening-line-identical-end > div {
    display: grid;
    min-width: 0;
}

.opening-line-identical-end strong {
    font-size: .82rem;
}

.opening-line-identical-end small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-line-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.opening-line-card.contains-selected {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 58%, var(--mud-palette-lines-default));
    box-shadow: 0 7px 22px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.opening-line-card.incomplete {
    border-color: rgba(245, 158, 11, .52);
}

.opening-line-header {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 54px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.opening-line-index {
    position: relative;
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--mud-palette-primary);
    font-size: .84rem;
    font-weight: 900;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--mud-palette-primary) 23%, transparent);
    cursor: pointer;
}

.opening-line-index.main::after {
    content: "★";
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 2px solid var(--mud-palette-background-gray);
    border-radius: 999px;
    color: #1e3a8a;
    background: #facc15;
    font-size: 8px;
    line-height: 1;
}

.opening-line-title {
    display: grid;
    min-width: 0;
    gap: 1px;
    margin: 0 auto 0 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.opening-line-title strong {
    font-size: .86rem;
}

.opening-line-title span {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-line-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 850;
    white-space: nowrap;
}

.opening-line-status.main {
    color: #60a5fa;
    background: rgba(59, 130, 246, .13);
}

.opening-line-status.complete {
    color: #22c55e;
    background: rgba(34, 197, 94, .12);
}

.opening-line-status.incomplete {
    color: #f59e0b;
    background: rgba(245, 158, 11, .14);
}

.opening-line-moves {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 2px;
    padding: 14px;
}

.opening-line-move {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto auto;
    min-height: 46px;
    align-content: center;
    align-items: center;
    gap: 0 5px;
    padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    font: inherit;
    cursor: pointer;
    transition: transform 130ms ease, border-color 130ms ease, background 130ms ease;
}

.opening-line-move:hover {
    z-index: 1;
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    transform: translateY(-1px);
}

.opening-line-move.selected {
    border-color: var(--mud-palette-primary);
    color: #fff;
    background: var(--mud-palette-primary);
    box-shadow: 0 5px 13px color-mix(in srgb, var(--mud-palette-primary) 28%, transparent);
}

.opening-line-move.has-note {
    padding-right: 27px;
}

.opening-line-move-prefix {
    color: var(--mud-palette-text-secondary);
    font-size: .64rem;
    font-weight: 800;
}

.opening-line-move.selected .opening-line-move-prefix {
    color: rgba(255, 255, 255, .72);
}

.opening-line-move strong {
    font-size: .88rem;
}

.opening-line-evaluation {
    grid-column: 1 / -1;
    color: #14b8a6;
    font-size: .61rem;
    font-weight: 850;
    text-align: right;
}

.opening-line-move.selected .opening-line-evaluation {
    color: #ccfbf1;
}

.opening-line-note-icon {
    position: absolute;
    top: 4px;
    right: 5px;
    color: #a78bfa;
    font-size: 14px !important;
}

.opening-line-arrow {
    flex: 0 0 auto;
    color: var(--mud-palette-text-disabled);
    font-size: 16px !important;
}

.opening-line-insights {
    display: grid;
    gap: 6px;
    padding: 0 14px 13px;
}

.opening-line-insight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 9px;
    border: 0;
    border-radius: 11px;
    color: var(--mud-palette-text-primary);
    background: rgba(139, 92, 246, .09);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.opening-line-insight > span:first-child {
    color: #a78bfa;
    font-size: .7rem;
    font-weight: 900;
    white-space: nowrap;
}

.opening-line-insight-copy {
    display: grid;
    min-width: 0;
}

.opening-line-insight-copy strong,
.opening-line-insight-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-line-insight-copy strong {
    font-size: .76rem;
}

.opening-line-insight-copy small {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.opening-line-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 13px;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-background-gray) 74%, transparent);
    font-size: .67rem;
}

.opening-line-footer span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.opening-line-footer strong {
    color: #f59e0b;
}

.opening-overview-results {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 3px 0;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.opening-overview-results > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.opening-overview-results strong {
    color: var(--mud-palette-text-primary);
}

.opening-overview-results .mud-button-root {
    flex: 0 0 auto;
    min-height: 42px;
    border-radius: 12px !important;
    white-space: nowrap;
}

.opening-overview-empty {
    display: grid;
    min-height: 250px;
    place-items: center;
    align-content: center;
    gap: 5px;
    padding: 24px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.opening-overview-empty > .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 40px;
}

.opening-overview-empty strong {
    color: var(--mud-palette-text-primary);
}

.opening-overview-empty span {
    font-size: .76rem;
}

.opening-engine-evaluation .mud-input-adornment-text {
    font-size: .72rem;
}

.stockfish-analysis {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 25%, var(--mud-palette-lines-default));
    border-radius: 16px;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)),
            var(--mud-palette-surface));
}

.stockfish-analysis > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.stockfish-analysis-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.stockfish-analysis-title > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.stockfish-analysis-title > div {
    display: grid;
    min-width: 0;
}

.stockfish-analysis-title strong {
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
}

.stockfish-analysis-title small,
.stockfish-analysis > p,
.stockfish-analysis-legal {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
}

.stockfish-analysis > p {
    margin: 0;
    line-height: 1.45;
}

.stockfish-analysis-state {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, transparent);
    font-size: .66rem;
    font-weight: 800;
}

.stockfish-analysis-state.state-analyzing,
.stockfish-analysis-state.state-loading {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
}

.stockfish-analysis-state.state-complete {
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 13%, transparent);
}

.stockfish-analysis-state.state-error {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 13%, transparent);
}

.stockfish-analysis-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stockfish-analysis-progress {
    border-radius: 999px;
    overflow: hidden;
}

.stockfish-analysis-lines {
    display: grid;
    gap: 7px;
}

.stockfish-analysis-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 11px;
    color: inherit;
    background: color-mix(in srgb, var(--mud-palette-background) 55%, transparent);
    font: inherit;
    text-align: left;
}

.stockfish-analysis-line.is-explorable {
    transition: border-color .16s ease, background .16s ease;
}

.stockfish-analysis-line.is-explorable:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
}

.stockfish-analysis-score {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.stockfish-analysis-score:focus-visible,
.stockfish-analysis-ply:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

.stockfish-analysis-score:disabled,
.stockfish-analysis-ply:disabled {
    cursor: default;
}

.stockfish-analysis-line strong {
    color: var(--mud-palette-primary);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.stockfish-analysis-line small {
    color: var(--mud-palette-text-secondary);
    font-size: .62rem;
}

.stockfish-analysis-pv {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
    align-items: center;
}

.stockfish-analysis-ply {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent);
    font: inherit;
    cursor: pointer;
}

.stockfish-analysis-ply:hover {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
}

.stockfish-analysis-ply small {
    opacity: .72;
}

.stockfish-analysis-ply strong {
    color: var(--mud-palette-text-primary);
    font-size: .78rem;
    font-weight: 750;
}

.stockfish-analysis-legal {
    padding-top: 2px;
}

.stockfish-analysis-legal summary {
    width: fit-content;
    cursor: pointer;
}

.stockfish-analysis-legal span {
    display: block;
    margin-top: 6px;
    line-height: 1.45;
}

.stockfish-analysis-legal a {
    color: var(--mud-palette-primary);
}

.stockfish-analysis-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

.stockfish-analysis-header-actions .mud-icon-button {
    color: var(--mud-palette-text-secondary);
    min-width: 44px;
    min-height: 44px;
}

.stockfish-analysis-header-actions .mud-icon-button.active {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 13%, transparent);
}

.stockfish-settings {
    display: grid;
    gap: 15px;
    padding: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-background) 72%, transparent);
}

.stockfish-setting-heading {
    display: grid;
    gap: 2px;
}

.stockfish-setting-heading strong {
    font-size: .83rem;
}

.stockfish-setting-heading span {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
}

.stockfish-engine-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stockfish-engine-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 68px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    text-align: left;
    cursor: pointer;
}

.stockfish-engine-option > .mud-icon-root {
    grid-row: 1 / span 2;
    color: var(--mud-palette-primary);
}

.stockfish-engine-option > span {
    display: grid;
    min-width: 0;
}

.stockfish-engine-option strong {
    font-size: .76rem;
}

.stockfish-engine-option small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stockfish-engine-option em {
    grid-column: 2;
    width: fit-content;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    font-size: .6rem;
    font-style: normal;
    font-weight: 800;
}

.stockfish-engine-option.active {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.stockfish-engine-option:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
    outline-offset: 2px;
}

.stockfish-engine-option:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.stockfish-capability-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: var(--mud-palette-text-secondary);
    font-size: .67rem;
    line-height: 1.4;
}

.stockfish-capability-note > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-info);
    font-size: 17px;
}

.stockfish-range-setting {
    display: grid;
    gap: 6px;
}

.stockfish-range-setting > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .73rem;
}

.stockfish-range-setting em {
    color: var(--mud-palette-primary);
    font-size: .65rem;
    font-style: normal;
    font-weight: 800;
}

.stockfish-range-setting small {
    color: var(--mud-palette-text-secondary);
    font-size: .64rem;
    line-height: 1.35;
}

.stockfish-range-setting input[type="range"] {
    width: 100%;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.opening-analysis-mode-launch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: min(100%, 520px);
    min-height: 54px;
    margin: 10px auto 0;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, #14b8a6 40%, var(--mud-palette-lines-default));
    border-radius: 14px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, #14b8a6 8%, var(--mud-palette-surface));
    text-align: left;
    cursor: pointer;
}

.opening-analysis-mode-launch > .mud-icon-root:first-child {
    color: #14b8a6;
}

.opening-analysis-mode-launch > .mud-icon-root:last-child {
    color: var(--mud-palette-text-secondary);
}

.opening-analysis-mode-launch > span {
    display: grid;
}

.opening-analysis-mode-launch strong {
    font-size: .77rem;
}

.opening-analysis-mode-launch small {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
}

.opening-analysis-mode-launch:hover {
    border-color: #14b8a6;
    background: color-mix(in srgb, #14b8a6 13%, var(--mud-palette-surface));
}

.opening-analysis-mode-launch:focus-visible {
    outline: 3px solid color-mix(in srgb, #14b8a6 45%, transparent);
    outline-offset: 2px;
}

.opening-analysis-mode-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, #14b8a6 45%, var(--mud-palette-lines-default));
    border-radius: 15px;
    background: color-mix(in srgb, #14b8a6 11%, var(--mud-palette-surface));
}

.opening-analysis-mode-banner > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.opening-analysis-mode-banner > div:first-child > .mud-icon-root {
    color: #14b8a6;
}

.opening-analysis-mode-banner span {
    display: grid;
}

.opening-analysis-mode-banner strong {
    font-size: .77rem;
}

.opening-analysis-mode-banner small {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
}

.opening-analysis-plies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
}

.opening-analysis-plies button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}

.opening-analysis-plies button.active {
    border-color: #14b8a6;
    color: #0f766e;
    background: color-mix(in srgb, #14b8a6 16%, var(--mud-palette-surface));
}

.opening-editor-board.is-analysis-mode .chess-board {
    box-shadow:
        0 0 0 3px color-mix(in srgb, #14b8a6 65%, transparent),
        0 12px 28px rgba(15, 23, 42, .28);
}

.opening-analysis-mode-details {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 13px;
    border-radius: 14px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, #14b8a6 9%, var(--mud-palette-background));
}

.opening-analysis-mode-details > .mud-icon-root {
    flex: 0 0 auto;
    color: #14b8a6;
}

.opening-analysis-mode-details > div {
    display: grid;
    gap: 4px;
}

.opening-analysis-mode-details strong {
    font-size: .82rem;
}

.opening-analysis-mode-details span,
.opening-analysis-mode-details small {
    color: var(--mud-palette-text-secondary);
    font-size: .69rem;
    line-height: 1.45;
}

.opening-analysis-mode-details small {
    color: #14b8a6;
    font-weight: 800;
}

.opening-bulk-analysis-overlay {
    align-items: center;
    padding-top: 16px;
}

.opening-bulk-analysis-modal {
    width: min(680px, calc(100vw - 32px));
    padding: 22px;
    border-radius: 24px !important;
}

.opening-bulk-analysis-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

.opening-bulk-analysis-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #14b8a6);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22);
}

.opening-bulk-analysis-header > div {
    min-width: 0;
}

.opening-bulk-analysis-header > div > span {
    color: var(--mud-palette-primary);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .11em;
}

.opening-bulk-analysis-header h2 {
    margin: 2px 0 3px;
    font-size: 1.25rem;
}

.opening-bulk-analysis-header p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
}

.opening-bulk-analysis-summary,
.opening-bulk-review-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.opening-bulk-analysis-summary > div,
.opening-bulk-review-stats > div {
    display: grid;
    gap: 2px;
    padding: 13px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-background) 58%, transparent);
}

.opening-bulk-analysis-summary strong,
.opening-bulk-review-stats strong {
    color: var(--mud-palette-primary);
    font-size: 1.3rem;
    font-variant-numeric: tabular-nums;
}

.opening-bulk-analysis-summary span,
.opening-bulk-review-stats span {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    font-weight: 700;
}

.opening-bulk-analysis-explanation,
.opening-bulk-conflict-note,
.opening-bulk-current-position {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
}

.opening-bulk-analysis-explanation .mud-icon-root,
.opening-bulk-conflict-note .mud-icon-root,
.opening-bulk-current-position .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.opening-bulk-analysis-explanation p,
.opening-bulk-conflict-note span {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
    line-height: 1.5;
}

.opening-bulk-depth {
    margin-top: 16px;
}

.opening-bulk-save-choice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    cursor: pointer;
}

.opening-bulk-save-choice input,
.opening-bulk-conflicts input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    accent-color: var(--mud-palette-primary);
}

.opening-bulk-save-choice > span {
    display: grid;
    gap: 3px;
}

.opening-bulk-save-choice strong {
    font-size: .78rem;
}

.opening-bulk-save-choice small {
    color: var(--mud-palette-text-secondary);
    font-size: .67rem;
    line-height: 1.45;
}

.opening-bulk-analysis-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.opening-bulk-progress-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0 14px;
}

.opening-bulk-progress-ring {
    position: relative;
    display: grid;
    width: 82px;
    height: 82px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--mud-palette-primary) calc(var(--progress) * 1%), color-mix(in srgb, var(--mud-palette-primary) 12%, transparent) 0);
}

.opening-bulk-progress-ring::after {
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: var(--mud-palette-surface);
    content: "";
}

.opening-bulk-progress-ring strong {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.opening-bulk-progress-hero > div:last-child {
    display: grid;
    gap: 3px;
}

.opening-bulk-progress-hero span,
.opening-bulk-progress-hero small {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.opening-bulk-progress-hero > div:last-child > strong {
    font-size: 1.08rem;
    font-variant-numeric: tabular-nums;
}

.opening-bulk-progress-bar {
    border-radius: 999px;
}

.opening-bulk-current-position > span {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.opening-bulk-current-position strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.opening-bulk-current-position small,
.opening-bulk-keep-open {
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
}

.opening-bulk-keep-open {
    margin: 13px 0;
    line-height: 1.5;
}

.opening-bulk-review-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opening-bulk-review-stats .new strong {
    color: #14b8a6;
}

.opening-bulk-review-stats .changed strong {
    color: #f59e0b;
}

.opening-bulk-review-stats .same strong {
    color: #22c55e;
}

.opening-bulk-selection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    font-size: .74rem;
}

.opening-bulk-selection-summary > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.opening-bulk-conflicts {
    display: grid;
    gap: 3px;
    margin-top: 13px;
}

.opening-bulk-conflicts > strong {
    font-size: .77rem;
}

.opening-bulk-conflicts > small {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
}

.opening-bulk-conflicts > div {
    display: grid;
    gap: 6px;
    max-height: 260px;
    margin-top: 7px;
    padding-right: 4px;
    overflow-y: auto;
}

.opening-bulk-conflicts label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 9px 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    cursor: pointer;
}

.opening-bulk-conflicts label > span {
    display: grid;
    min-width: 0;
}

.opening-bulk-conflicts label strong {
    font-size: .73rem;
}

.opening-bulk-conflicts label small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
}

.opening-bulk-conflicts label small .mud-icon-root {
    font-size: 15px;
}

.opening-bulk-saving,
.opening-bulk-done {
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 36px 12px 24px;
    text-align: center;
}

.opening-bulk-saving small,
.opening-bulk-done p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.opening-bulk-done > .mud-icon-root {
    color: #22c55e;
    font-size: 54px;
}

.opening-bulk-done h3 {
    margin: 0;
}

.opening-delete-overlay {
    align-items: center;
    padding-top: 16px;
}

.opening-delete-modal {
    width: min(580px, calc(100vw - 32px));
    padding: 24px;
    border-radius: 24px !important;
}

.opening-delete-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
}

.opening-delete-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: var(--mud-palette-error);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
}

.opening-delete-header > div {
    min-width: 0;
}

.opening-delete-header > div > span {
    color: var(--mud-palette-error);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.opening-delete-header h2 {
    margin: 2px 0;
    font-size: 1.3rem;
    line-height: 1.25;
}

.opening-delete-header p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .82rem;
}

.opening-delete-header p strong {
    color: var(--mud-palette-text-primary);
}

.opening-delete-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    border-radius: 15px;
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 9%, transparent);
}

.opening-delete-warning p {
    margin: 0;
    color: var(--mud-palette-text-primary);
    font-size: .82rem;
    line-height: 1.45;
}

.opening-delete-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}

.opening-delete-stats > div {
    display: grid;
    min-width: 0;
    gap: 1px;
    padding: 11px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 13px;
    background: var(--mud-palette-background-gray);
}

.opening-delete-stats strong {
    font-size: 1.25rem;
}

.opening-delete-stats span {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
    line-height: 1.25;
}

.opening-delete-preview {
    margin-top: 16px;
}

.opening-delete-preview > span {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.opening-delete-preview > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.opening-delete-preview small {
    padding: 5px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    background: var(--mud-palette-background-gray);
    font-size: .73rem;
    font-weight: 700;
}

.opening-delete-final {
    display: grid;
    gap: 2px;
    margin-top: 16px;
    padding-left: 11px;
    border-left: 3px solid var(--mud-palette-error);
}

.opening-delete-final strong {
    color: var(--mud-palette-error);
    font-size: .84rem;
}

.opening-delete-final span {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.opening-delete-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.opening-editor-mobile-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    min-width: 0;
    padding: 4px;
    border-radius: 15px;
    background: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
}

.opening-editor-mobile-tabs .mud-button-root {
    min-width: 0;
    min-height: 44px;
    border-radius: 11px;
    font-size: .78rem;
    font-weight: 800;
}

.opening-editor-grid .mobile-panel-hidden {
    display: none;
}

@media (max-width: 1399.98px) {
    .opening-editor-header-actions .mud-button-root {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 13px;
        font-size: 0;
    }

    .opening-editor-header-actions .mud-button-root .mud-icon-root {
        margin: 0;
        font-size: 22px;
    }

    .opening-journey-actions {
        flex-direction: row;
        align-items: center;
    }

    .opening-journey-actions .mud-button-root,
    .opening-journey-reset {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 13px;
    }

    .opening-journey-overview .opening-action-label {
        display: none;
    }

    .opening-journey-overview .mud-icon-root {
        margin: 0;
    }

    .opening-path-home-label {
        display: none;
    }
}

@media (min-width: 960px) {
    .opening-editor-grid {
        grid-template-columns: minmax(280px, 1.2fr) minmax(280px, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 10px 14px;
    }

    .opening-editor-board {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .opening-editor-mobile-tabs {
        grid-column: 2;
        grid-row: 1;
    }

    .opening-tree-panel,
    .opening-details-panel {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 190px);
    }
}

@media (max-width: 959.98px) {
    .app-shell-desktop-actions {
        display: none;
    }

    .app-shell-mobile-only {
        display: block;
    }

    .app-shell-mobile-language {
        display: flex;
        margin-inline-end: .2rem;
    }

    .app-shell-bar .mud-toolbar {
        min-width: 0;
        padding-right: 8px;
        padding-left: 8px;
    }

    .app-shell-title {
        font-size: 1rem;
    }

    .app-shell-content {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .mud-container {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    .mud-container.mt-8 {
        margin-top: 16px !important;
    }

    .mud-paper.pa-6,
    .mud-paper.pa-5 {
        padding: 16px !important;
    }

    .mud-typography-h4 {
        font-size: 1.65rem;
        line-height: 1.25;
    }

    .mud-typography-h5 {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .mud-table-toolbar,
    .mud-table-pagination,
    .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
        min-height: 52px;
    }

    .mud-table-cell {
        overflow-wrap: anywhere;
    }

    .responsive-modal-overlay {
        align-items: stretch;
        padding: 8px;
    }

    .responsive-modal {
        width: 100% !important;
        max-height: calc(100dvh - 16px);
        border-radius: 12px !important;
    }

    .elo-id-field {
        width: 100%;
        max-width: none !important;
    }

    .opening-editor-grid,
    .opening-training-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-editor-grid > .opening-editor-board,
    .opening-editor-grid > .opening-editor-mobile-tabs,
    .opening-editor-grid > .opening-tree-panel,
    .opening-editor-grid > .opening-details-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .opening-tree-panel,
    .opening-details-panel,
    .opening-training-panel {
        max-height: none;
    }

    .opening-journey-header {
        top: 56px;
    }
}

@media (max-width: 599.98px) {
    .mud-button-root {
        max-width: 100%;
    }

    .mud-alert {
        overflow-wrap: anywhere;
    }

    .opening-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-page .mud-card-actions {
        flex-wrap: wrap;
        gap: 4px;
    }

    .opening-workspace,
    .opening-training-page {
        margin-top: 12px !important;
    }

    .chess-board {
        border-radius: 6px;
    }

}

.opening-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: -12px 12px 14px;
    position: relative;
    z-index: 2;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.opening-overview > div {
    display: grid;
    justify-items: center;
    padding: 12px 5px;
    text-align: center;
}

.opening-overview > div + div {
    border-left: 1px solid var(--mud-palette-lines-default);
}

.opening-overview .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 18px;
}

.opening-overview strong {
    margin-top: 2px;
    font-size: 1.05rem;
}

.opening-overview span {
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    line-height: 1.15;
}

.opening-sheet-handle {
    display: none;
}

.opening-editor-header,
.opening-training-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 10px;
}

.opening-editor-heading {
    min-width: 0;
}

.opening-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.opening-editor-mobile-tabs {
    display: grid;
}

.opening-annotation-mobile {
    display: none;
}

@media (min-width: 600px) and (max-width: 1399.98px) {
    .opening-editor-mobile-tabs {
        display: grid;
    }
}

@media (max-width: 599.98px) {
    html,
    body {
        overscroll-behavior-x: none;
        touch-action: manipulation;
    }

    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    .opening-page {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
        padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
        overflow-x: clip;
    }

    .opening-page > .mud-grid {
        display: grid !important;
        width: auto !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 0 12px !important;
    }

    .opening-page > .mud-grid > .mud-grid-item {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }

    .opening-card {
        width: 100%;
        max-width: 100%;
    }

    .opening-card .mud-card-content {
        padding: 16px !important;
    }

    .opening-card-stats {
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 5px;
    }

    .opening-card-actions {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px !important;
    }

    .opening-card-actions .opening-train-cta {
        width: 100%;
        min-width: 0;
        grid-column: 1 / -1;
    }

    .opening-card-actions > .mud-icon-button {
        width: 100%;
        min-width: 0;
        min-height: 46px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 12px;
        background: rgba(148, 163, 184, .06);
    }

    .opening-hero-actions .opening-desktop-create {
        display: inline-flex !important;
        min-width: 0;
        flex: 1;
        min-height: 46px;
        border: 1px solid rgba(255, 255, 255, .28);
        border-radius: 13px;
        color: #fff;
        background: rgba(255, 255, 255, .13);
        font-size: .72rem;
    }

    .opening-mobile-fab {
        display: none !important;
    }

    .opening-create-modal {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100% !important;
        max-height: min(92dvh, 760px);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
        border-radius: 24px 24px 0 0 !important;
    }

    .opening-create-mode {
        margin-bottom: 12px;
    }

    .opening-create-mode button {
        min-height: 54px;
        padding-inline: 8px;
    }

    .opening-create-mode button > .mud-icon-root {
        display: none;
    }

    .pgn-source-choice button {
        grid-template-columns: minmax(0, 1fr);
        min-height: 56px;
        padding: 8px;
        text-align: center;
    }

    .pgn-source-choice button > .mud-icon-root {
        display: none;
    }

    .pgn-source-choice button small {
        white-space: normal;
    }

    .pgn-paste-panel {
        padding: 11px;
    }

    .pgn-paste-textarea textarea {
        min-height: 132px;
        resize: none;
    }

    .pgn-paste-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pgn-paste-actions .mud-button-root {
        width: 100%;
        min-height: 48px;
    }

    .pgn-file-drop {
        min-height: 74px;
    }

    .pgn-import-preview {
        padding: 10px;
    }

    .responsive-modal-overlay:has(.opening-create-modal) {
        align-items: flex-end;
        padding: 0;
    }

    .opening-delete-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .opening-overview-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .opening-overview-modal {
        width: 100% !important;
        height: 100dvh;
        min-height: 0;
        max-height: 100dvh;
        padding: calc(10px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
        border-radius: 0 !important;
    }

    .opening-overview-header h2 {
        font-size: 1.1rem;
    }

    .opening-overview-toolbar {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        margin-top: 12px;
    }

    .opening-overview-start {
        display: none !important;
    }

    .opening-overview-filters {
        margin: 8px -2px;
        padding-inline: 2px;
    }

    .opening-overview-filter {
        min-height: 44px;
        gap: 4px;
        padding-inline: 8px;
        font-size: .71rem;
    }

    .opening-overview-filter > .mud-icon-root {
        font-size: 18px;
    }

    .opening-overview-filter > span {
        min-width: 19px;
        height: 19px;
        padding-inline: 3px;
    }

    .opening-overview-explanation {
        align-items: flex-start;
        margin-bottom: 8px;
        padding: 8px 9px;
    }

    .opening-overview-explanation > .mud-icon-root {
        display: none;
    }

    .opening-overview-scroll {
        margin-inline: -2px;
        padding-right: 2px;
        padding-bottom: 10px;
        scrollbar-gutter: auto;
    }

    .opening-lines-list {
        gap: 10px;
    }

    .opening-line-group-header {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 8px;
        padding: 9px;
    }

    .opening-line-group-icon {
        width: 36px;
        height: 36px;
    }

    .opening-line-group-statuses {
        justify-content: flex-end;
    }

    .opening-line-group-statuses .notes {
        display: none;
    }

    .opening-line-group-toggle {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 44px;
    }

    .opening-line-group-trunk {
        padding: 10px 9px;
    }

    .opening-line-group-trunk-label small {
        display: none;
    }

    .opening-line-group-branches {
        gap: 8px;
        padding: 0 8px 9px;
    }

    .opening-line-identical-end {
        min-height: 58px;
        padding-inline: 9px;
    }

    .opening-line-header {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .opening-line-status.main {
        display: none;
    }

    .opening-line-status.complete,
    .opening-line-status.incomplete {
        grid-column: 3;
        grid-row: 1;
        padding-inline: 7px;
    }

    .opening-line-moves {
        gap: 6px 2px;
        padding: 11px 9px;
    }

    .opening-line-move {
        min-height: 48px;
        padding-inline: 9px;
    }

    .opening-line-move.has-note {
        padding-right: 25px;
    }

    .opening-line-arrow {
        font-size: 14px !important;
    }

    .opening-line-insights {
        padding: 0 9px 10px;
    }

    .opening-line-insight {
        min-height: 48px;
    }

    .opening-line-footer {
        min-height: 38px;
        padding-inline: 10px;
    }

    .opening-line-footer span {
        display: none;
    }

    .opening-overview-results {
        min-height: 36px;
        padding-top: 7px;
    }

    .opening-overview-results small {
        display: none;
    }

    .opening-overview-load-more {
        min-height: 58px;
        margin-top: 9px;
    }

    .opening-delete-modal {
        width: 100% !important;
        max-height: 92dvh;
        padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0 !important;
    }

    .opening-delete-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .opening-delete-header {
        gap: 10px;
    }

    .opening-delete-header h2 {
        font-size: 1.12rem;
    }

    .opening-delete-stats > div {
        padding: 9px;
    }

    .opening-delete-actions {
        flex-direction: column-reverse;
    }

    .opening-delete-actions .mud-button-root {
        width: 100%;
        min-height: 48px;
    }

    .opening-sheet-handle {
        display: block;
        width: 42px;
        height: 5px;
        margin: 0 auto 14px;
        border-radius: 999px;
        background: var(--mud-palette-lines-default);
    }

    .opening-color-choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-workspace,
    .opening-training-page {
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        overflow-x: clip;
    }

    .opening-workspace {
        padding: 0 0 calc(32px + env(safe-area-inset-bottom)) !important;
    }

    .opening-editor-header {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        height: 64px;
        min-height: 64px;
        max-height: 64px;
        margin: 0 -8px 8px;
        padding: 6px 8px 8px;
        overflow: hidden;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        background: var(--mud-palette-background);
    }

    .opening-training-header {
        position: sticky;
        z-index: 8;
        top: 56px;
        margin: 0 -8px 8px;
        padding: 8px;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        background: color-mix(in srgb, var(--mud-palette-background) 92%, transparent);
        backdrop-filter: blur(12px);
    }

    .opening-editor-header .mud-typography-h5,
    .opening-training-header .mud-typography-h5 {
        max-width: 100%;
        overflow: hidden;
        font-size: 1rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opening-editor-heading .mud-typography-caption {
        display: none;
    }

    .opening-editor-header-actions {
        gap: 2px;
        margin-left: 0;
    }

    .opening-editor-header-actions .mud-button-root {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 13px;
        font-size: 0;
    }

    .opening-editor-header-actions .mud-button-root .mud-icon-root {
        margin: 0;
        font-size: 22px;
    }

    .opening-editor-board {
        width: 100%;
        margin: 0;
        padding: 4px 2px 0;
        box-sizing: border-box;
        overflow: visible;
        background: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    }

    .opening-editor-board .chess-board-shell {
        width: 100%;
        max-width: none;
    }

    .opening-editor-board .chess-coordinate-frame {
        grid-template-columns: 20px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 21px;
    }

    .opening-editor-board .chess-board {
        border-width: 2px;
        border-radius: 4px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .2);
    }

    .opening-editor-board .chess-rank-coordinates span,
    .opening-editor-board .chess-file-coordinates span {
        font-size: .67rem;
    }

    .opening-board-panel[class*="board-size-"] .chess-board-shell {
        width: 100%;
        max-width: none;
    }

    .chess-board-resize-handle {
        display: none;
    }

    .opening-board-toolbar {
        display: flex;
        margin-top: 4px;
    }

    .opening-board-toolbar .mud-button-root {
        width: 48px;
        min-width: 48px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--mud-palette-lines-default);
        font-size: 0;
    }

    .opening-board-toolbar .mud-button-root .mud-icon-root {
        margin: 0;
        font-size: 21px;
    }

    .opening-editor-board .opening-navigation {
        display: grid;
        grid-template-columns: repeat(3, 48px) minmax(0, 1fr);
        gap: 4px;
        min-height: 56px;
        margin: 0 !important;
        padding: 4px 8px;
        background: var(--mud-palette-surface);
    }

    .opening-editor-board .opening-navigation .mud-icon-button {
        width: 48px;
        height: 48px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 14px;
        background: var(--mud-palette-background);
    }

    .opening-position-caption {
        display: grid;
        min-width: 0;
        height: 48px;
        place-items: center;
        padding-inline: 8px;
        overflow: hidden;
        border-radius: 12px;
        color: var(--mud-palette-text-secondary);
        background: var(--mud-palette-background-gray);
        font-weight: 700;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opening-editor-mobile-tabs {
        position: static;
        z-index: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin: 10px 0 8px;
        padding: 4px;
        border: 0;
        border-radius: 16px;
        background: var(--mud-palette-surface);
        box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
    }

    .opening-editor-mobile-tabs .mud-button-root {
        min-height: 50px;
        border-radius: 12px;
        font-size: .82rem;
        font-weight: 800;
    }

    .opening-editor-grid .mobile-panel-hidden {
        display: none;
    }

    .opening-tree-panel,
    .opening-details-panel,
    .opening-training-panel {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none !important;
        overflow: visible;
        position: static;
        z-index: auto;
        border-radius: 16px !important;
    }

    .opening-tree-panel {
        padding: 10px 10px calc(12px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        min-width: 0;
    }

    .opening-journey-header {
        align-items: center;
        gap: 8px;
        margin: -10px -10px 0;
        padding: 8px 10px 6px;
    }

    .opening-journey-eyebrow {
        display: none;
    }

    .opening-journey-header h2 {
        margin: 0;
        font-size: .95rem;
        line-height: 1.25;
    }

    .opening-journey-count {
        color: var(--mud-palette-text-secondary);
        font-size: .8rem;
        font-weight: 650;
    }

    .opening-incomplete-summary {
        margin-top: 4px;
        padding: 2px 6px;
        font-size: .65rem;
    }

    .opening-journey-actions {
        flex-direction: row;
        align-items: center;
        gap: 4px;
    }

    .opening-journey-overview .opening-action-label {
        display: inline !important;
        font-size: .72rem;
    }

    .opening-journey-actions .mud-button-root,
    .opening-journey-reset {
        width: auto !important;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0 8px !important;
        border-radius: 11px;
    }

    .opening-path {
        margin: 4px -4px 6px;
    }

    .opening-path-step {
        min-height: 36px;
        padding: 4px 8px;
    }

    .opening-current-position {
        gap: 8px;
        margin-top: 4px;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .opening-next-heading {
        margin: 8px 2px 6px;
    }

    .opening-next-heading p {
        display: none;
    }

    .opening-next-move {
        min-height: 52px;
        padding: 6px 8px 6px 10px;
        border-radius: 12px;
    }

    .opening-next-move-row {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 4px;
    }

    .opening-next-move-row > .mud-menu > .mud-button-root,
    .opening-move-menu .mud-button-root {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        height: 100%;
        border-radius: 12px;
    }

    .opening-editor-mobile-tabs {
        margin: 6px 0;
        padding: 3px;
    }

    .opening-editor-mobile-tabs .mud-button-root {
        min-height: 44px;
        font-size: .78rem;
    }

    .opening-next-meta {
        max-width: 96px;
        flex-wrap: wrap;
    }

    .opening-details-panel {
        padding: 16px 12px !important;
    }

    .opening-details-panel.mobile-panel-active {
        display: block;
        min-height: 0;
    }

    .opening-annotation-desktop {
        display: none !important;
    }

    .opening-annotation-mobile {
        display: grid;
        gap: 7px;
        margin-top: 14px;
    }

    .opening-annotation-mobile > span {
        color: var(--mud-palette-text-secondary);
        font-size: .78rem;
        font-weight: 700;
    }

    .opening-annotation-mobile > div {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .opening-annotation-choice {
        display: grid;
        min-width: 0;
        min-height: 54px;
        place-items: center;
        gap: 1px;
        padding: 5px 2px;
        border: 2px solid transparent;
        border-radius: 12px;
        color: #fff;
        background: rgba(148, 163, 184, .18);
    }

    .opening-annotation-choice strong {
        font-size: 1rem;
        line-height: 1;
    }

    .opening-annotation-choice small {
        max-width: 100%;
        overflow: hidden;
        font-size: .58rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .opening-annotation-choice.nag-1 {
        background: #78a94f;
    }

    .opening-annotation-choice.nag-2 {
        background: #d17b36;
    }

    .opening-annotation-choice.nag-3 {
        background: #18a999;
    }

    .opening-annotation-choice.nag-4 {
        background: #df4b4b;
    }

    .opening-annotation-choice.nag-5 {
        background: #9aaa4f;
    }

    .opening-annotation-choice.nag-6 {
        background: #d6a13d;
    }

    .opening-annotation-choice.nag-13 {
        background: #64748b;
    }

    .opening-annotation-choice.nag-40 {
        background: #e8590c;
    }

    .opening-annotation-choice.nag-146 {
        background: #7c3aed;
    }

    .opening-annotation-choice.nag-none {
        color: var(--mud-palette-text-secondary);
        background: rgba(148, 163, 184, .1);
    }

    .opening-annotation-choice.active {
        border-color: #fff;
        box-shadow: 0 0 0 2px rgba(96, 165, 250, .6);
    }

    .opening-annotation-choice:disabled {
        opacity: .72;
    }

    .opening-tree-panel button,
    .opening-details-panel .mud-button-root {
        min-height: 46px;
    }

    .opening-details-panel .mud-input-control input,
    .opening-details-panel .mud-input-control textarea,
    .opening-details-panel .mud-select-input {
        font-size: 16px !important;
    }

    .opening-details-panel .d-flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-details-panel .d-flex.flex-wrap.gap-2 .mud-button-root {
        width: 100%;
        min-height: 50px;
    }

    .stockfish-analysis {
        margin-inline: -4px;
        padding: 12px;
        border-radius: 14px;
    }

    .stockfish-analysis > header {
        align-items: flex-start;
    }

    .stockfish-analysis-title small {
        white-space: normal;
    }

    .stockfish-analysis-header-actions {
        gap: 1px;
    }

    .stockfish-settings {
        gap: 13px;
        padding: 11px;
    }

    .stockfish-engine-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .stockfish-engine-option {
        min-height: 60px;
    }

    .stockfish-analysis-line {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        padding-inline: 8px;
    }

    .stockfish-analysis > .mud-button-root {
        width: 100%;
        min-height: 48px;
    }

    .opening-analysis-mode-launch {
        width: 100%;
        min-height: 44px;
        margin-top: 6px;
        padding: 6px 10px;
        border-radius: 12px;
    }

    .opening-analysis-mobile-launch small {
        display: none;
    }

    .opening-analysis-mode-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
        padding: 11px;
    }

    .opening-analysis-mode-banner > div:last-child {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .opening-analysis-mode-banner > div:last-child .mud-button-root {
        min-height: 44px;
        margin: 0 !important;
    }

    .opening-analysis-mode-details {
        padding: 11px;
    }

    .opening-bulk-analysis-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .opening-bulk-analysis-modal {
        width: 100%;
        max-height: 94dvh;
        padding: 16px 12px calc(14px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0 !important;
    }

    .opening-bulk-analysis-header {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 9px;
    }

    .opening-bulk-analysis-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .opening-bulk-analysis-summary {
        gap: 7px;
        margin-top: 14px;
    }

    .opening-bulk-analysis-summary > div,
    .opening-bulk-review-stats > div {
        padding: 10px;
    }

    .opening-bulk-analysis-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-bulk-analysis-actions .mud-button-root {
        width: 100%;
        min-height: 48px;
    }

    .opening-bulk-progress-hero {
        margin-top: 18px;
    }

    .opening-bulk-progress-ring {
        width: 72px;
        height: 72px;
    }

    .opening-bulk-selection-summary {
        align-items: stretch;
        flex-direction: column;
    }

    .opening-bulk-selection-summary > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opening-bulk-conflicts > div {
        max-height: 34dvh;
    }

    .opening-training-options-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .opening-training-options-modal {
        width: 100%;
        max-height: 92dvh;
        padding: 16px 12px calc(14px + env(safe-area-inset-bottom));
        border-radius: 24px 24px 0 0 !important;
    }

    .opening-training-scope {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        margin-top: 13px;
    }

    .opening-training-scope-choice {
        min-height: 68px;
    }

    .opening-training-options-actions .mud-button-root {
        min-height: 48px;
    }

    .opening-next-meta small {
        display: none;
    }

    .opening-training-grid {
        display: flex;
        flex-direction: column;
    }

    .opening-training-panel {
        order: -1;
    }

    .opening-training-board.is-complete {
        display: none;
    }
}

@media (min-width: 600px) {
    .opening-page {
        padding: 24px 16px 48px !important;
    }

    .opening-mobile-hero {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        align-items: center;
        border-radius: 24px;
    }

    .opening-desktop-create {
        z-index: 1;
        display: inline-flex !important;
    }

    .opening-mobile-fab {
        display: none !important;
    }

    .opening-overview {
        max-width: 620px;
        margin-inline: auto;
    }

    .opening-filters {
        grid-template-columns: minmax(220px, 1fr) auto;
        align-items: center;
        margin-inline: 0;
    }
}

.opening-global-training {
    min-height: 46px;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .13) !important;
    backdrop-filter: blur(8px);
}

.opening-training-loading {
    display: grid;
    min-height: 55dvh;
    place-items: center;
    align-content: center;
    gap: 9px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.opening-training-loading strong {
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
}

.opening-training-loading span {
    font-size: .78rem;
}

.training-setup-hero {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 18px 12px 24px;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    color: #f8fafc;
    background:
        radial-gradient(circle at 92% 16%, rgba(45, 212, 191, .32), transparent 34%),
        linear-gradient(145deg, #0f172a, #172554 62%, #164e63);
}

.training-setup-hero > .mud-icon-button {
    z-index: 1;
    color: #fff;
}

.training-setup-hero > div {
    z-index: 1;
    min-width: 0;
}

.training-setup-hero > div > span,
.training-panel-eyebrow,
.training-session-heading > span {
    color: #67e8f9;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .12em;
}

.training-setup-hero h1 {
    margin: 3px 0 6px;
    font-size: clamp(1.4rem, 6vw, 2rem);
    line-height: 1.12;
}

.training-setup-hero p {
    max-width: 620px;
    margin: 0;
    color: #cbd5e1;
    font-size: .82rem;
    line-height: 1.5;
}

.training-setup-hero-icon {
    position: absolute;
    right: -22px;
    bottom: -34px;
    color: rgba(255, 255, 255, .08);
}

.training-setup-hero-icon .mud-icon-root {
    font-size: 9rem;
}

.training-setup-guide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.training-setup-guide > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
}

.training-setup-guide > div > span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--mud-palette-primary);
    font-size: .75rem;
    font-weight: 900;
}

.training-setup-guide p {
    display: grid;
    min-width: 0;
    margin: 0;
}

.training-setup-guide strong {
    font-size: .78rem;
}

.training-setup-guide small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-setup-empty {
    display: grid;
    min-height: 320px;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed var(--mud-palette-primary);
    border-radius: 20px !important;
    text-align: center;
}

.training-setup-empty > .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 48px;
}

.training-setup-empty h2,
.training-setup-empty p {
    margin: 0;
}

.training-setup-empty p {
    max-width: 480px;
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

.training-catalog {
    display: grid;
    gap: 10px;
    padding-bottom: 96px;
}

.training-repertoire-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    background: var(--mud-palette-surface);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.training-repertoire-card.selected {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 65%, var(--mud-palette-lines-default));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.training-repertoire-card.disabled {
    opacity: .62;
}

.training-repertoire-select {
    display: grid;
    grid-template-columns: 30px 44px minmax(0, 1fr) 24px;
    width: 100%;
    min-height: 74px;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 0;
    color: var(--mud-palette-text-primary);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.training-repertoire-select:disabled {
    cursor: default;
}

.training-repertoire-check {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 9px;
    color: var(--mud-palette-text-secondary);
}

.selected .training-repertoire-check {
    border-color: var(--mud-palette-primary);
    color: #fff;
    background: var(--mud-palette-primary);
}

.training-repertoire-check .mud-icon-root {
    font-size: 18px;
}

.training-repertoire-piece {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 13px;
    font-size: 1.75rem;
}

.training-repertoire-piece.color-w {
    color: #0f172a;
    background: #e8edf3;
}

.training-repertoire-piece.color-b {
    color: #fff;
    background: #1e293b;
}

.training-repertoire-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.training-repertoire-copy strong {
    overflow: hidden;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-repertoire-copy small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-repertoire-expand {
    color: var(--mud-palette-text-secondary);
}

.training-line-picker {
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-background-gray));
}

.training-line-picker-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.training-line-picker-heading > div {
    display: grid;
}

.training-line-picker-heading strong {
    font-size: .8rem;
}

.training-line-picker-heading small {
    color: var(--mud-palette-text-secondary);
    font-size: .67rem;
}

.training-line-picker-heading > span {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
    font-size: .68rem;
    font-weight: 900;
}

.training-line-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.training-line-mode button {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.training-line-mode button.active {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
}

.training-line-mode button > span {
    display: grid;
}

.training-line-mode strong {
    font-size: .73rem;
}

.training-line-mode small {
    color: var(--mud-palette-text-secondary);
    font-size: .62rem;
}

.training-lines-list {
    display: grid;
    gap: 6px;
    margin-top: 9px;
}

.training-line-option {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 22px;
    min-height: 58px;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.training-line-option.selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

.training-line-number {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: var(--mud-palette-primary);
    font-size: .75rem;
    font-weight: 900;
}

.training-line-option > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.training-line-option strong {
    font-size: .77rem;
}

.training-line-option small {
    overflow: hidden;
    color: var(--mud-palette-text-secondary);
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-line-length {
    color: var(--mud-palette-text-secondary);
    font-size: .65rem;
    white-space: nowrap;
}

.training-line-option > .mud-icon-root {
    color: var(--mud-palette-primary);
    font-size: 20px;
}

/* Do not create a second scroll container above the training page's sticky bar. */
.app-shell-content:has(.opening-training-page) { overflow-x: clip; }

.training-start-bar {
    position: fixed;
    z-index: 12;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
    backdrop-filter: blur(14px);
}

.training-start-bar > div {
    display: grid;
}

.training-start-bar strong {
    font-size: .8rem;
}

.training-start-bar span {
    color: var(--mud-palette-text-secondary);
    font-size: .68rem;
}

.training-start-bar .mud-button-root {
    min-height: 48px;
    border-radius: 13px;
}

.training-start-primary {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 74%, #0f172a) !important;
    color: #fff !important;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--mud-palette-primary) 88%, #fff),
        color-mix(in srgb, var(--mud-palette-primary) 86%, #0f172a)
    ) !important;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.training-start-primary:hover:not(:disabled) {
    filter: brightness(1.04);
    box-shadow: 0 9px 22px color-mix(in srgb, var(--mud-palette-primary) 31%, transparent);
    transform: translateY(-1px);
}

.training-start-primary:active:not(:disabled) {
    filter: brightness(.96);
    transform: translateY(0);
}

.training-start-primary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mud-palette-primary) 42%, transparent);
    outline-offset: 3px;
}

.training-start-primary:disabled {
    border-color: var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-disabled) !important;
    background: var(--mud-palette-action-disabled-background) !important;
    box-shadow: none;
}

.training-session-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    flex-wrap: nowrap;
    min-height: 66px;
    padding-inline: 6px;
}

.training-session-heading {
    display: grid;
    min-width: 0;
}

.training-session-heading .mud-typography-h5,
.training-session-heading .mud-typography-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-session-heading .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

.training-session-score {
    display: grid;
    min-width: 152px;
    justify-items: center;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    cursor: help;
    outline: none;
}

.training-session-score:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.training-session-score strong {
    font-size: .9rem;
}

.training-session-score-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.training-session-score-label .mud-icon-root {
    width: 11px;
    height: 11px;
    font-size: 11px;
}

.training-session-score-detail {
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.training-session-progress {
    height: 5px;
    margin: 0 4px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
}

.training-session-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mud-palette-primary), #14b8a6);
    transition: width 220ms ease;
}

.training-session-grid {
    align-items: start;
}

.training-coach-panel {
    max-height: none;
    padding: 18px !important;
    border-radius: 20px !important;
}

.training-coach-panel h2 {
    margin: 3px 0 12px;
    font-size: 1.2rem;
}

.training-line-context {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
}

.training-line-context > .mud-icon-root {
    flex: 0 0 auto;
    color: var(--mud-palette-primary);
}

.training-line-context > span {
    display: grid;
    min-width: 0;
}

.training-line-context strong {
    color: var(--mud-palette-text-primary);
    font-size: .75rem;
}

.training-line-context small {
    overflow: hidden;
    font-size: .65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training-feedback {
    display: flex;
    min-height: 70px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border: 1px solid transparent;
    border-radius: 14px;
}

.training-feedback > .mud-icon-root,
.training-feedback > .mud-progress-circular {
    flex: 0 0 auto;
}

.training-feedback > span {
    display: grid;
}

.training-feedback strong {
    font-size: .8rem;
}

.training-feedback small {
    margin-top: 2px;
    font-size: .68rem;
}

.training-feedback.info,
.training-feedback.thinking {
    border-color: rgba(59, 130, 246, .32);
    color: #60a5fa;
    background: rgba(59, 130, 246, .09);
}

.training-feedback.success {
    border-color: rgba(34, 197, 94, .35);
    color: #22c55e;
    background: rgba(34, 197, 94, .09);
}

.training-feedback.error {
    border-color: rgba(244, 63, 94, .38);
    color: #fb7185;
    background: rgba(244, 63, 94, .09);
}

.training-feedback.known {
    border-color: rgba(245, 158, 11, .42);
    color: #f59e0b;
    background: rgba(245, 158, 11, .1);
}

.training-line-celebration {
    display: flex;
    min-height: 116px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px;
    border: 1px solid rgba(34, 197, 94, .38);
    border-radius: 16px;
    color: #22c55e;
    background:
        radial-gradient(circle at 16% 20%, rgba(250, 204, 21, .16), transparent 38%),
        rgba(34, 197, 94, .09);
}

.training-line-celebration > span {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    color: #facc15;
    background: rgba(250, 204, 21, .13);
}

.training-line-celebration > span .mud-icon-root {
    font-size: 29px;
}

.training-line-celebration > div {
    display: grid;
}

.training-line-celebration .mud-button-root {
    min-height: 42px;
    margin-left: auto;
    border-radius: 11px;
}

.training-line-celebration strong {
    font-size: 1rem;
}

.training-line-celebration small {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.training-line-celebration.is-retry {
    border-color: rgba(245, 158, 11, .46);
    color: #f59e0b;
    background: rgba(245, 158, 11, .1);
}

.training-line-celebration.is-retry > span {
    color: #f59e0b;
    background: rgba(245, 158, 11, .15);
}

.training-help-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.training-help-actions .mud-button-root {
    min-height: 46px;
    border-radius: 12px;
}

.training-help-actions .mud-button-root:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.training-solution {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-background-gray));
}

.training-solution span {
    color: var(--mud-palette-text-secondary);
    font-size: .7rem;
}

.training-solution strong {
    color: var(--mud-palette-primary);
    font-size: 1.1rem;
}

.training-comment-panel {
    display: grid;
    gap: 8px;
    margin-top: 9px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-lines-default));
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.training-comment-panel > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 5px;
    color: var(--mud-palette-primary);
}

.training-comment-panel > div > strong {
    color: var(--mud-palette-text-primary);
    font-size: .78rem;
}

.training-comment-panel > strong {
    font-size: .82rem;
}

.training-comment-panel p {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-size: .76rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.training-comment-nag {
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    color: #fff;
    background: var(--mud-palette-primary);
    font-size: .69rem;
    font-weight: 800;
}

.training-comment-nag.nag-1 { background: #78a94f; }

.training-comment-nag.nag-2 { background: #d17b36; }

.training-comment-nag.nag-3 { background: #18a999; }

.training-comment-nag.nag-4 { background: #df4b4b; }

.training-comment-nag.nag-5 { background: #9aaa4f; }

.training-comment-nag.nag-6 { background: #d6a13d; }

.training-review-return {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: min(100%, 560px);
    margin: 8px auto 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    font: inherit;
    font-size: .75rem;
    font-weight: 800;
    cursor: pointer;
}

.training-rule-reminder {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    color: var(--mud-palette-text-secondary);
}

.training-rule-reminder > .mud-icon-root {
    flex: 0 0 auto;
    font-size: 18px;
}

.training-rule-reminder p {
    margin: 0;
    font-size: .66rem;
    line-height: 1.5;
}

.training-complete-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    place-items: center;
    border-radius: 18px;
    color: #facc15;
    background: rgba(250, 204, 21, .12);
}

.training-complete-icon .mud-icon-root {
    font-size: 34px;
}

.training-coach-panel > p {
    color: var(--mud-palette-text-secondary);
    font-size: .8rem;
}

.training-complete-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 14px;
}

.training-complete-stats > div {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 5px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    text-align: center;
}

.training-complete-stats strong {
    color: var(--mud-palette-primary);
    font-size: 1.05rem;
}

.training-complete-stats span {
    color: var(--mud-palette-text-secondary);
    font-size: .61rem;
}

.training-complete-actions {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.training-complete-actions .mud-button-root {
    min-height: 48px;
    border-radius: 13px;
}

.training-success-modal-backdrop {
    position: fixed;
    z-index: 1500;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(2, 6, 23, .72);
    backdrop-filter: blur(5px);
    animation: training-modal-fade-in .18s ease-out;
}

.training-success-modal {
    display: flex;
    width: min(100%, 390px);
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 22px 22px;
    border: 1px solid rgba(96, 165, 250, .4);
    border-radius: 24px;
    background: var(--mud-palette-surface);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    text-align: center;
    animation: training-modal-pop-in .24s cubic-bezier(.2, .8, .2, 1);
}

.training-success-modal-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    color: #fbbf24;
    background: rgba(251, 191, 36, .14);
}

.training-success-modal-icon .mud-icon-root {
    font-size: 2.25rem;
}

.training-success-modal h2 {
    margin: -4px 0 0;
    font-size: 2rem;
}

.training-success-modal p {
    margin: 0 0 2px;
    color: var(--mud-palette-text-secondary);
}

.training-success-modal .mud-progress-linear {
    width: 100%;
}

.training-success-modal .mud-button-root {
    width: 100%;
    min-height: 48px;
    margin-top: 3px;
    border-radius: 13px;
}

.training-success-modal.is-retry {
    border-color: rgba(245, 158, 11, .5);
}

.training-success-modal.is-retry .training-success-modal-icon {
    color: #f59e0b;
    background: rgba(245, 158, 11, .15);
}

@media (max-width: 599.98px) {
    .opening-hero-actions {
        margin-top: 2px;
    }

    .opening-global-training {
        width: 100%;
    }

    .training-setup-guide {
        grid-template-columns: minmax(0, 1fr);
        margin-inline: 8px;
    }

    .training-setup-guide > div {
        min-height: 52px;
    }

    .training-catalog {
        gap: 8px;
        padding-inline: 8px;
    }

    .training-repertoire-select {
        grid-template-columns: 28px 40px minmax(0, 1fr) 20px;
        min-height: 72px;
        gap: 7px;
        padding-inline: 9px;
    }

    .training-repertoire-piece {
        width: 40px;
        height: 40px;
    }

    .training-line-picker {
        padding: 10px 8px;
    }

    .training-line-mode {
        grid-template-columns: minmax(0, 1fr);
    }

    .training-line-mode button {
        min-height: 54px;
    }

    .training-line-option {
        grid-template-columns: 34px minmax(0, 1fr) 22px;
        min-height: 62px;
    }

    .training-line-length {
        display: none;
    }

    .training-start-bar > div {
        max-width: 115px;
    }

    .training-start-bar .mud-button-root {
        padding-inline: 12px;
        font-size: .75rem;
    }

    .training-session-header {
        position: relative;
        top: auto;
        height: 66px;
        min-height: 66px;
        max-height: 66px;
        margin: 0 -8px;
        padding: 5px 8px;
        overflow: hidden;
    }

    .training-session-heading .mud-typography-h5 {
        font-size: .92rem;
    }

    .training-session-score {
        min-width: 96px;
        padding-inline: 6px;
    }

    .training-session-score-label {
        font-size: .48rem;
    }

    .training-session-score-detail {
        max-width: 94px;
        overflow: hidden;
        font-size: .54rem;
        text-overflow: ellipsis;
    }

    .training-session-progress {
        margin: 0 0 6px;
    }

    .training-session-grid {
        gap: 9px;
    }

    .training-session-grid .training-coach-panel {
        order: 0;
        margin-inline: 8px;
        padding: 15px 12px !important;
    }

    .training-session-grid .opening-training-board {
        order: 0;
        width: 100%;
        padding-inline: 0;
    }

    .training-session-grid .chess-board-shell {
        width: 100%;
        max-width: none;
    }

    .training-session-grid .chess-coordinate-frame {
        grid-template-columns: 20px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) 21px;
    }

    .training-session-grid .chess-board {
        border-width: 2px;
        border-radius: 4px;
    }

    .training-help-actions .mud-button-root {
        font-size: .7rem;
        padding-inline: 8px;
    }

    .training-line-celebration {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .training-line-celebration .mud-button-root {
        width: 100%;
        margin-left: 0;
    }

    .promotion-modal-backdrop {
        align-items: end;
        padding: 0;
    }

    .promotion-picker {
        width: 100%;
        padding: 18px 14px calc(14px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
    }

    .promotion-choices {
        gap: 6px;
    }

    .promotion-choices button {
        min-height: 84px;
        border-radius: 12px;
    }
}

@media (min-width: 600px) {
    .opening-hero-actions {
        grid-column: auto;
    }

    .opening-global-training {
        min-width: 140px;
    }

    .training-setup-hero {
        grid-template-columns: 48px minmax(0, 1fr) 80px;
        margin-bottom: 16px;
        padding: 26px 22px;
        border-radius: 24px;
    }

    .training-start-bar {
        position: sticky;
        right: auto;
        left: auto;
        bottom: 14px;
        width: 100%;
        margin-top: 18px;
        padding: 12px 14px;
        border: 1px solid var(--mud-palette-lines-default);
        border-radius: 18px;
    }
}

.opening-edit-modal {
    display: grid;
    width: min(100%, 620px);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 38%, var(--mud-palette-lines-default));
    border-radius: 22px !important;
    background: var(--mud-palette-surface);
    box-shadow: 0 28px 90px #0008;
}
.opening-edit-modal > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: 1.05rem 1.15rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.opening-edit-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}
.opening-edit-modal h2, .opening-edit-modal p { margin: 0; }
.opening-edit-modal h2 { font-size: 1.28rem; line-height: 1.25; }
.opening-edit-modal p { margin-top: .18rem; color: var(--mud-palette-text-secondary); font-size: .78rem; }
.opening-edit-modal header small { color: var(--mud-palette-primary); font-size: .61rem; font-weight: 900; letter-spacing: .11em; }
.opening-edit-fields { display: grid; gap: .85rem; padding: 1.05rem 1.15rem; }
.opening-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .95rem 1.15rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.opening-analysis-mobile-launch {
    display: none;
}

.opening-path {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent) transparent;
}

.opening-path::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.opening-path::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
}

@media (min-width: 960px) {
    .opening-editor-grid.board-focus {
        grid-template-columns: minmax(0, 1fr);
    }

    .opening-editor-grid.board-focus .opening-editor-board {
        grid-column: 1;
        grid-row: 1;
    }

    .opening-editor-grid.board-focus .opening-editor-mobile-tabs,
    .opening-editor-grid.board-focus .opening-tree-panel,
    .opening-editor-grid.board-focus .opening-details-panel {
        display: none !important;
    }

    .opening-editor-grid.board-focus .opening-board-panel.board-size-normal .chess-board-shell {
        width: min(100%, 570px, max(320px, calc(100dvh - 180px)));
    }

    .opening-editor-grid.board-focus .opening-board-panel.board-size-large .chess-board-shell {
        width: min(100%, 780px, max(320px, calc(100dvh - 110px)));
    }
}

@media (max-width: 959px) {
    .board-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-settings-preview {
        position: static;
        width: min(100%, 480px);
        margin-inline: auto;
    }

    .opening-board-focus-toggle,
    .opening-analysis-desktop-launch {
        display: none !important;
    }

    .opening-analysis-mobile-launch {
        display: grid;
        grid-column: 1;
        width: min(100%, 520px);
        margin: 18px auto calc(12px + env(safe-area-inset-bottom));
    }

    .board-notation-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .board-notation-card {
        min-height: 106px;
    }
}

/* === historical legal / security page === */
.legal-page {
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
}

.legal-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
}

.legal-hero-icon,
.legal-section-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    aspect-ratio: 1;
    border-radius: 1.35rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
}

.legal-hero-icon .mud-icon-root {
    font-size: 2.35rem;
}

.legal-hero h1 {
    margin-bottom: .65rem;
    font-weight: 800;
    letter-spacing: -.035em;
}

.legal-hero p {
    max-width: 62ch;
    color: var(--mud-palette-text-secondary);
}

.legal-highlight {
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    padding: 1.4rem;
    margin-bottom: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 36%, transparent);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--mud-palette-success) 9%, var(--mud-palette-surface));
}

.legal-highlight > .mud-icon-root {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--mud-palette-success);
    font-size: 2rem;
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.legal-card {
    padding: 1.35rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 1.2rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 94%, var(--mud-palette-primary) 6%);
}

.legal-card h2 {
    margin: .55rem 0 .65rem;
}

.legal-card p,
.legal-card li {
    color: var(--mud-palette-text-secondary);
    line-height: 1.65;
}

.legal-card ol {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
}

.legal-card li + li {
    margin-top: .45rem;
}

.legal-warning {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 36%, transparent);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-surface));
}

.legal-section-heading {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.2rem;
}

.legal-section-icon {
    width: 3.7rem;
    font-size: 2rem;
}

.legal-license > p {
    color: var(--mud-palette-text-secondary);
    line-height: 1.7;
}

.legal-license-box {
    padding: 1.35rem;
    margin-top: 1.2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 1.2rem;
}

.legal-license-box p {
    margin-top: .55rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.65;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.15rem;
}

.legal-updated {
    display: block;
    max-width: 80ch;
    margin: 2rem auto 0;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 700px) {
    .legal-page {
        padding-inline: .75rem;
        padding-block: 1.25rem 2rem;
    }

    .legal-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .legal-hero-icon {
        width: 3.5rem;
        border-radius: 1rem;
    }

    .legal-hero h1 {
        font-size: clamp(2rem, 10vw, 2.65rem);
    }

    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-highlight,
    .legal-card,
    .legal-license-box {
        padding: 1.05rem;
        border-radius: 1rem;
    }

    .legal-links {
        display: grid;
    }

    .legal-links .mud-button-root {
        width: 100%;
    }
}

/* Friends and encrypted shares — historical Chess Opening Forge layout. */
.friends-page {
    padding-bottom: 4rem;
}

.friends-hero .opening-hero-actions {
    z-index: 1;
}

.friends-hero .opening-hero-actions .mud-button-root,
.friends-list-heading .mud-button-root,
.friends-section-filters .mud-button-root,
.friends-tabs .mud-button-root {
    flex: 0 0 auto;
    white-space: nowrap;
}

.friends-session-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    background: var(--mud-palette-surface);
}

.friends-session-state > .mud-icon-root {
    width: 52px;
    height: 52px;
    padding: 12px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, var(--mud-palette-primary), #0891b2);
    font-size: 28px;
}

.friends-code-banner {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin: 0 12px 16px;
    padding: 16px 18px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 32%, var(--mud-palette-lines-default));
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
}

.friends-code-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #f97316, #ea580c);
}

.friends-code-icon .mud-icon-root { font-size: 28px; }

.friends-code-copy {
    flex: 1 1 220px;
    min-width: 0;
}

.friends-code-banner strong {
    display: block;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(1.15rem, 4vw, 1.55rem);
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friends-copy-code,
.friends-code-banner .mud-button-root,
.friends-code-banner button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    min-height: 44px;
    margin-left: auto;
    padding-inline: 18px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.friends-copy-code .mud-button-label,
.friends-code-banner button .mud-button-label {
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.friends-toolbar {
    align-items: center;
}

.friends-toolbar-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-secondary);
}

.friends-toolbar-copy .mud-icon-root { color: var(--mud-palette-primary); }

.friends-section-filters,
.friends-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.friends-section-filters .mud-button-root,
.friends-tabs .mud-button-root {
    border-radius: 999px !important;
}

.friends-list-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 12px 16px;
}

.friends-empty,
.friends-empty-state {
    margin: 0 12px;
}

.friends-empty-icon {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #0891b2);
    box-shadow: 0 14px 30px rgba(37, 99, 235, .25);
}

.friends-empty-icon .mud-icon-root { font-size: 2.2rem; }

.friends-card,
.friends-request-card,
.friends-share-card {
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .08) !important;
}

.friends-avatar {
    background: linear-gradient(145deg, #f97316, #ea580c) !important;
    color: #fff !important;
    font-weight: 800;
}

.friends-card-club {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: .86rem;
}

.friends-card-note {
    margin-top: 10px;
    min-height: 3.2em;
}

.friends-card-note.empty { font-style: italic; }

.friends-private-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--mud-palette-primary);
    font-size: .78rem;
    font-weight: 700;
}

.friends-card-actions,
.friends-request-actions {
    gap: 6px;
    padding: 0 16px 16px !important;
}

.friends-card-actions .mud-button-root { flex: 1; min-height: 44px; border-radius: 12px !important; }

.friends-request-card.incoming { border-left: 5px solid #22c55e; }
.friends-request-card.outgoing { border-left: 5px solid #f59e0b; }

.friends-share-sections {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0 12px;
}

.friends-subheading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.friends-subheading .mud-icon-root { color: var(--mud-palette-primary); }

.friends-share-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 16px !important;
    color: var(--mud-palette-text-secondary);
}

.friends-share-list { display: grid; gap: 12px; }

.friends-share-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.friends-sent-table {
    display: grid;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px !important;
    overflow: hidden;
}

.friends-sent-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.friends-sent-row + .friends-sent-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.friends-sent-row > div { display: grid; min-width: 0; }
.friends-sent-row span { color: var(--mud-palette-text-secondary); font-size: .75rem; }

.friends-share-preview-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.friends-share-preview-stats > div {
    display: grid;
    gap: 2px;
    padding: 12px;
    border-radius: 14px;
    background: var(--mud-palette-background);
    text-align: center;
}

.friends-share-preview-stats span {
    color: var(--mud-palette-text-secondary);
    font-size: .72rem;
}

.friends-confirm-dialog,
.friends-share-preview,
.friends-modal {
    width: min(620px, 100%);
}

@media (min-width: 600px) {
    .friends-hero .opening-hero-actions {
        grid-column: auto;
    }

    .friends-code-banner {
        flex-wrap: nowrap;
        margin-inline: 0;
    }

    .friends-share-sections {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
    }

    .friends-list-heading { margin-inline: 0; }
}

@media (max-width: 599.98px) {
    .friends-copy-code,
    .friends-code-banner .mud-button-root,
    .friends-code-banner button {
        width: 100% !important;
        margin-left: 0;
        justify-content: center;
    }

    .friends-session-state {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .friends-share-preview-stats { grid-template-columns: 1fr; }

    .friends-sent-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .friends-sent-row > :last-child { grid-column: 2; }
}

/* COS_MOVE_QUALITY_20260830 */
.opening-bulk-quality-choice { border-color: color-mix(in srgb, #f59e0b 35%, var(--mud-palette-lines-default)); }
.opening-bulk-quality-ok {
    display: flex; align-items: center; gap: .55rem; padding: .75rem .9rem;
    border: 1px solid #22c55e55; border-radius: 12px; color: #bbf7d0; background: #14532d33;
}
.opening-bulk-quality-alerts {
    display: grid; gap: .45rem; padding: .8rem;
    border: 1px solid #f59e0b55; border-radius: 14px; background: #78350f1f;
}
.opening-bulk-quality-alerts > header { display: flex; align-items: center; gap: .55rem; }
.opening-bulk-quality-alerts > header div { display: grid; }
.opening-bulk-quality-alerts > header small { color: var(--mud-palette-text-secondary); }
.opening-bulk-quality-item {
    display: flex; justify-content: space-between; align-items: center; gap: .75rem;
    padding: .6rem .7rem; border-radius: 10px; border-left: 4px solid #f59e0b;
    background: #f59e0b12;
}
.opening-bulk-quality-item > span { display: grid; min-width: 0; }
.opening-bulk-quality-item small { color: var(--mud-palette-text-secondary); }
.opening-bulk-quality-item b { color: #fbbf24; font-variant-numeric: tabular-nums; }
.opening-bulk-quality-item.quality-critical { border-left-color: #ef4444; background: #ef444414; }
.opening-bulk-quality-item.quality-critical b { color: #fca5a5; }
.opening-next-move-row.quality-warning { border-left: 3px solid #f59e0b; border-radius: 12px; }
.opening-next-move-row.quality-critical { border-left: 3px solid #ef4444; border-radius: 12px; }
.move-quality-warning { color: #fbbf24 !important; font-weight: 800; }
.quality-critical .move-quality-warning { color: #fca5a5 !important; }

/* COS_FLOAT_DB_20260831 */
.opening-database-launch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;min-height:48px;padding:.45rem .65rem;border:2px solid #60a5fa90;border-radius:13px;color:#dbeafe;background:linear-gradient(130deg,#2563eb28,#7c3aed20);font:inherit;text-align:left;cursor:pointer;box-shadow:0 7px 18px #2563eb22}
.opening-database-launch:hover{border-color:#60a5fa;background:linear-gradient(130deg,#2563eb3a,#7c3aed2e)}.opening-database-launch-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#2563eb,#7c3aed)}.opening-database-launch>span:nth-child(2){display:grid;min-width:0}.opening-database-launch strong{font-size:.77rem}.opening-database-launch small{color:#93c5fd;font-size:.6rem}.opening-database-launch>.mud-icon-root:last-child{font-size:17px;color:#93c5fd}
.opening-database-prominent{width:min(100%,640px);min-height:54px;margin:0 auto .55rem;padding:.4rem .6rem;border-width:1px;border-color:#818cf8;background:radial-gradient(circle at 92% 20%,#a78bfa2d,transparent 34%),linear-gradient(130deg,#1d4ed844,#7c3aed35);box-shadow:0 7px 18px #4f46e526}
.opening-database-prominent:hover{border-color:#c4b5fd;background:radial-gradient(circle at 92% 20%,#c4b5fd45,transparent 36%),linear-gradient(130deg,#2563eb66,#8b5cf655);transform:translateY(-1px)}
.opening-database-prominent .opening-database-launch-icon{width:34px;height:34px;border-radius:9px;box-shadow:0 5px 12px #4f46e54d}.opening-database-prominent .opening-database-launch-icon>.mud-icon-root{font-size:20px}.opening-database-prominent>span:nth-child(2){gap:0}.opening-database-prominent strong{font-size:.82rem;line-height:1.15}.opening-database-prominent small{font-size:.53rem;font-weight:900;letter-spacing:.08em;line-height:1.15}.opening-database-prominent>.mud-icon-root:last-child{font-size:18px}.opening-database-sources{display:flex;flex-wrap:wrap;gap:.18rem;margin-top:.16rem;color:#dbeafe;font-size:.54rem;font-style:normal}.opening-database-sources span{padding:.08rem .28rem;border:1px solid #93c5fd36;border-radius:999px;background:#0f172a55;white-space:nowrap}
.opening-reference-window-layer{position:fixed;z-index:1450;inset:0;pointer-events:none;background:transparent!important;backdrop-filter:none!important}
.opening-reference-floating-window{position:fixed!important;top:clamp(72px,9vh,120px);right:clamp(18px,3vw,54px);width:min(760px,48vw);height:auto;min-width:520px;min-height:380px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 88px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden!important;resize:none;pointer-events:auto;border:1px solid #60a5fa75!important;border-radius:18px!important;background:var(--mud-palette-surface);box-shadow:0 24px 70px #0008!important}
.cos-floating-resize-handle{position:absolute;right:4px;bottom:4px;z-index:3;width:22px;height:22px;padding:0;border:0;border-radius:3px 0 14px 0;cursor:nwse-resize;background:linear-gradient(135deg,transparent 38%,#60a5fa 39%,#60a5fa 48%,transparent 49%),linear-gradient(135deg,transparent 62%,#93c5fd 63%,#93c5fd 72%,transparent 73%);background-color:transparent}
.cos-floating-resize-handle:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}
.opening-reference-floating-window .opening-reference-dialog-header{cursor:move;user-select:none;touch-action:none}.opening-reference-floating-window .opening-reference-dialog-header.is-dragging{cursor:grabbing}.opening-reference-floating-window .opening-reference-dialog-header p em{display:block;margin-top:2px;color:#60a5fa;font-size:.65rem;font-style:normal}.opening-reference-floating-window .opening-reference-dialog-content{min-height:0;overflow:auto}.opening-reference-floating-window .opening-reference-header{display:none!important}.opening-reference-floating-window .opening-reference-body{max-height:none!important;min-height:0;overflow:visible!important}.opening-reference-floating-window .opening-reference-moves{max-height:none!important}
@media(max-width:959.98px){.opening-database-launch{width:100%;min-height:52px;padding:.4rem .55rem}.opening-database-prominent{margin-bottom:.45rem}.opening-database-launch-icon{width:34px;height:34px}.opening-database-launch strong{font-size:.8rem}.opening-database-launch small{font-size:.55rem}.opening-database-sources{gap:.15rem}.opening-database-sources span{font-size:.52rem}.opening-reference-window-layer{pointer-events:auto;display:grid;align-items:stretch;background:rgba(2,6,23,.72)!important;backdrop-filter:blur(6px)!important}.opening-reference-floating-window{position:relative!important;inset:auto!important;width:100vw!important;height:100dvh!important;min-width:0;min-height:0;max-width:none;max-height:none;resize:none;border:0!important;border-radius:0!important}.opening-reference-floating-window .opening-reference-dialog-header{cursor:default;touch-action:auto}.opening-reference-floating-window .opening-reference-dialog-header p em{display:none}.cos-floating-resize-handle{display:none!important}}

/* COS_OVERVIEW_QUALITY_FINAL */
.opening-simple-line.quality-warning{border-color:#f59e0b!important;box-shadow:0 0 0 1px #f59e0b45,0 8px 20px #f59e0b16!important}
.opening-simple-line.quality-critical{border-color:#ef4444!important;box-shadow:0 0 0 2px #ef444450,0 10px 24px #ef444420!important}
.opening-overview-quality-banner{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;margin:-1px -1px .55rem;padding:.65rem .8rem;border-radius:12px 12px 8px 8px}.opening-overview-quality-banner>.mud-icon-root{font-size:28px}.opening-overview-quality-banner>span{display:grid;gap:.04rem}.opening-overview-quality-banner strong{font-size:.77rem;letter-spacing:.045em}.opening-overview-quality-banner small{font-size:.68rem}.opening-overview-quality-banner.quality-warning{color:#fde68a;background:linear-gradient(90deg,#d9770638,#f59e0b12)}.opening-overview-quality-banner.quality-critical{color:#fecaca;background:linear-gradient(90deg,#dc262648,#ef444418)}

.friends-fingerprint { display: block; overflow-wrap: anywhere; }
.friends-fingerprint code { font-size: .72rem; word-spacing: .15em; }