:root {
    color-scheme: light;
    --bg: #edf1f3;
    --panel: #ffffff;
    --ink: #17201b;
    --muted: #66736b;
    --line: #dce4df;
    --accent: #0f766e;
    --accent-strong: #0b5f59;
    --warn: #a14418;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 220px;
    z-index: -1;
    background: linear-gradient(135deg, #101716, #0b5f59 52%, #b4913d);
}

button,
input,
select {
    font: inherit;
}

.uploadJob progress {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 8px;
    accent-color: var(--accent);
}

.uploadJob em {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-style: normal;
}

.checkLine {
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
}

.checkLine input {
    width: auto;
    min-height: 0;
}

.shell {
    width: min(1600px, calc(100vw - 32px));
    margin: 0 auto;
    padding: 22px 0 32px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: rgba(10, 20, 18, 0.92);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.15;
}

.brandLink {
    color: #fff;
    text-decoration: none;
}

.brandLink:hover {
    color: #d8b24c;
}

.topbar .eyebrow,
.topbar .summary {
    color: #d9eee8;
}

.summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--muted);
}

.summary select {
    width: min(360px, 42vw);
}

.ghostBtn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.28);
}

.ghostBtn:hover {
    background: #050807;
    color: #fff;
}

.toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 20;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
    padding: 10px 14px;
    background: #101716;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.toast.isVisible {
    transform: translateY(0);
    opacity: 1;
}

.syncDialog {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: grid;
    place-items: center;
    background: rgba(9, 18, 16, 0.42);
    backdrop-filter: blur(3px);
}

.syncDialog.isHidden {
    display: none;
}

.syncDialog > div {
    display: grid;
    gap: 10px;
    width: min(460px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid #cfe0da;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}

.syncDialog strong {
    color: #10231f;
    font-size: 22px;
}

.syncDialog span,
.syncDialog small {
    color: var(--muted);
}

.syncDialogOptions {
    display: grid;
    gap: 8px;
}

.syncDialogOptions button {
    display: grid;
    gap: 2px;
    justify-items: start;
    min-height: 46px;
    padding: 8px 11px;
    border-color: #cfe0da;
    background: #f7fbf9;
    color: #10231f;
    text-align: left;
}

.syncDialogOptions button.isActive,
.syncDialogOptions button:hover {
    background: #0f241f;
    color: #fff;
}

.syncDialogOptions button.isActive span,
.syncDialogOptions button:hover span {
    color: rgba(255, 255, 255, 0.78);
}

.exportOverlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    background: rgba(9, 18, 16, 0.38);
    backdrop-filter: blur(3px);
}

.exportOverlay.isHidden {
    display: none;
}

.exportOverlay > div {
    position: relative;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid #cfe0da;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.exportStatusClose {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 999px;
    background: #0f241f;
    color: #fff;
    font-weight: 900;
    line-height: 1;
}

.exportStatusClose:hover {
    background: #000;
    color: #fff;
}

.exportOverlay strong {
    color: #10231f;
    font-size: 22px;
}

.exportOverlay span {
    color: var(--muted);
    font-size: 14px;
}

.exportOverlay i {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #e4eeea;
}

.exportOverlay i::after {
    content: "";
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0f766e, #d8b24c);
    animation: exportPulse 1.1s infinite ease-in-out;
}

.exportOverlay.isDone i::after {
    width: 100%;
    animation: none;
}

.exportStatusActions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 0;
}

.exportStatusActions.isHidden {
    display: none;
}

.exportStatusActions button {
    min-height: 32px;
    padding: 6px 12px;
    background: #0f766e;
    color: #fff;
}

.exportStatusActions button:hover {
    background: #0f241f;
    color: #fff;
}


.exportCancelActions {
    display: flex;
    justify-content: center;
    margin: 2px 0 0;
}

.exportCancelActions.isHidden {
    display: none;
}

.exportCancelActions button {
    min-height: 32px;
    padding: 6px 14px;
    border: 1px solid #b42318;
    background: #fff;
    color: #b42318;
    font-weight: 800;
}

.exportCancelActions button:hover:not(:disabled) {
    background: #b42318;
    color: #fff;
}

.exportCancelActions button:disabled {
    cursor: wait;
    opacity: 0.62;
}

.exportFolderLink {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #0f766e;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exportFolderLink.isHidden {
    display: none;
}

.templateDialog,
.templatePanel {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: calc(var(--karakashkov-topbar-height, 72px) + 18px) 24px 24px;
    background: rgba(8, 19, 17, .56);
    backdrop-filter: blur(10px);
}

.templateDialog.isHidden,
.templatePanel.isHidden {
    display: none;
}

.templateCard,
.templatePanelShell {
    position: relative;
    width: min(1380px, 96vw);
    max-height: calc(100vh - var(--karakashkov-topbar-height, 72px) - 42px);
    overflow: auto;
    background: #f8fafc;
    color: #10231f;
    border: 1px solid rgba(15, 23, 42, .18);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .42);
    border-radius: 8px;
    padding: 18px;
}

.templateCard .exportStatusClose,
.templatePanelShell .exportStatusClose {
    position: static;
    justify-self: end;
    align-self: start;
    width: 30px;
    height: 30px;
    min-height: 30px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #10231f;
}

.templateCard .exportStatusClose:hover,
.templatePanelShell .exportStatusClose:hover {
    background: #f5cf5f;
    color: #10241f;
}

.linkTemplateCard {
    width: min(560px, 94vw);
}

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

.templateDialogHead h2 {
    margin: 0;
    color: #10231f;
}

.linkTemplateChoices,
.templateToolbar,
.templateMontageActions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
    gap: 10px;
    align-items: center;
}

.linkTemplateChoices button,
.templateToolbar button,
.templateItemActions button,
.templateMontageActions button,
.templateMontageExport {
    border: 1px solid #0b7068;
    background: #0b7068;
    color: #fff;
    border-radius: 6px;
    padding: 9px 12px;
    font-weight: 800;
    cursor: pointer;
}

.linkTemplateChoices button {
    min-height: 96px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    text-align: left;
}

.linkTemplateChoices button span {
    grid-row: 1 / 3;
    font-size: 26px;
}

.linkTemplateChoices button small,
.templateMontage small,
.templateItem small {
    color: #5b6b66;
}

.linkTemplateChoices button:hover,
.templateToolbar button:hover,
.templateItemActions button:hover,
.templateMontageActions button:hover,
.templateMontageExport:hover {
    background: #f5cf5f;
    color: #10241f;
}

.linkTemplateChoices button:hover small,
.templateToolbar button:hover small,
.templateItemActions button:hover small,
.templateMontageActions button:hover small,
.templateMontageExport:hover small {
    color: #7f1d1d;
}

.templateToolbar {
    grid-template-columns: minmax(260px, 1fr) repeat(3, max-content);
    margin-bottom: 14px;
}

.templateToolbar input,
.templateMontage select {
    width: 100%;
    border: 1px solid #cbd5e1;
    background: #f7faf8;
    color: #10241f;
    color-scheme: light;
    border-radius: 6px;
    padding: 10px 12px;
}

.templateToolbar input {
    background: #fff;
    color: #10231f;
    color-scheme: light;
}

.templateMontage select option {
    background: #fff;
    color: #10241f;
}

.templateExportOptions {
    display: grid;
    grid-template-columns: repeat(2, minmax(76px, 1fr));
    gap: 8px;
}

.templateExportOptions label {
    display: grid;
    gap: 5px;
    color: #42524e;
    font-size: 12px;
    font-weight: 800;
}

.templateExportOptions input[type="number"] {
    width: 100%;
    border: 1px solid #cbd5e1;
    background: #f7faf8;
    color: #10241f;
    color-scheme: light;
    border-radius: 6px;
    padding: 9px 10px;
    font-weight: 900;
}

.templateExportOptions .templateCheckLine {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid rgba(245, 207, 95, .32);
    border-radius: 6px;
    background: #fff;
    color: #10231f;
}

.templateExportOptions .templateCheckLine span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.templateExportOptions .templateCheckLine input {
    appearance: none;
    display: inline-block;
    flex: 0 0 auto;
    width: 42px;
    height: 22px;
    margin: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #eef4f2;
    position: relative;
    cursor: pointer;
}

.templateExportOptions .templateCheckLine input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    transform: translateY(-50%);
    transition: transform .16s ease;
}

.templateExportOptions .templateCheckLine input:checked {
    border-color: #f5cf5f;
    background: #f5cf5f;
}

.templateExportOptions .templateCheckLine input:checked::after {
    transform: translate(20px, -50%);
    background: #10241f;
}

.templatePanelGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: 16px;
    align-items: start;
}

.templateList {
    display: grid;
    gap: 5px;
    max-height: min(640px, 68vh);
    overflow: auto;
    padding-right: 4px;
}

.templateItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px;
    align-items: center;
    border: 1px solid #dbe4e1;
    background: #fff;
    border-radius: 6px;
    padding: 4px 5px;
    min-height: 46px;
}

.templateMain {
    display: grid;
    align-content: center;
    gap: 1px;
    min-width: 0;
    text-align: center;
    border: 0;
    background: transparent;
    color: #10231f;
    cursor: pointer;
    padding: 4px 6px;
    min-height: 38px;
}

.templateMain strong {
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.templateMain small {
    min-width: 0;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.templateMain:hover strong {
    color: #fff;
}

.templateItemActions {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 3px;
}

.templateItemActions button {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 10px;
    line-height: 1;
}

.templateMontage {
    display: grid;
    gap: 10px;
    border: 1px solid #dbe4e1;
    background: #eef4f2;
    border-radius: 8px;
    padding: 12px;
}

.templateMontageQueue {
    display: grid;
    gap: 7px;
    min-height: 140px;
    max-height: 320px;
    overflow: auto;
}

.templateMontageQueue button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    text-align: left;
    border: 1px solid #dbe4e1;
    background: #fff;
    color: #10231f;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
}

.templateMontageQueue button.isActive {
    border-color: #f5cf5f;
    background: #f5cf5f;
    color: #10241f;
}

.templateMontageQueue button:hover {
    border-color: #0b7068;
    background: #0b7068;
    color: #fff;
}

.templateMontageQueue button:hover span,
.templateMontageQueue button:hover strong {
    color: #fff;
}

.templateMontageQueue span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .22);
    font-weight: 900;
}

.templateEmpty {
    margin: 0;
    padding: 16px;
    color: rgba(255, 255, 255, .72);
    border: 1px dashed rgba(255, 255, 255, .2);
    border-radius: 8px;
}

@media (max-width: 900px) {
    .templateToolbar,
    .templatePanelGrid,
    .templateItem {
        grid-template-columns: 1fr;
    }

    .templateItemActions {
        grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
    }
}

.newMatchDialog {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(8, 12, 18, 0.68);
    backdrop-filter: blur(8px);
}

.newMatchDialog.isHidden {
    display: none;
}

.newMatchDialog form {
    width: min(1180px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #f8fafc;
    color: #111827;
    border: 1px solid rgba(15, 23, 42, 0.18);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.32);
    padding: 18px;
}

.newMatchHead,
.newMatchActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.newMatchHead h2 {
    margin: 0;
    font-size: 28px;
    color: #ffffff;
}

#nextSetTitle {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.newMatchGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.newMatchGrid label,
.starterGrid section {
    display: grid;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.newMatchGrid input,
.newMatchGrid select,
.starterGrid select {
    width: 100%;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #111827;
    padding: 7px 9px;
    font: inherit;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}

.newMatchGrid input.isHidden {
    display: none;
}

.newMatchVideoSource {
    grid-column: 1 / -1;
}

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

.videoSourceRow button {
    min-height: 36px;
    border: 0;
    background: #0f172a;
    color: #fff;
    padding: 0 14px;
    font-weight: 900;
    cursor: pointer;
}

.newMatchVideoSource small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.starterGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}

.starterGrid section {
    border: 1px solid #d6dee9;
    background: #fff;
    padding: 12px;
}

.starterGrid section > div:not(.starterCourtEditor):not(.starterTeamHead) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.starterTeamHead {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.starterTeamHead span,
.nextSetTeamHead span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.starterTeamHead button,
.nextSetTeamHead button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #acb8b5;
    border-radius: 4px;
    background: #fff;
    color: #10231f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.starterTeamHead button:hover,
.nextSetTeamHead button:hover {
    background: #10231f;
    color: #fff;
}

.starterTeamHead input[type="color"] {
    width: 54px;
    min-height: 34px;
    padding: 2px;
}

.starterCourtEditor {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(78px, 1fr));
    grid-template-areas:
        "z1 z6 z5"
        "z2 z3 z4";
    gap: 9px !important;
    margin-top: 5px;
    padding: 15px;
    border: 3px solid var(--starter-color, #00008f);
    background:
        linear-gradient(90deg, transparent 33%, rgba(15,23,42,.12) 33%, rgba(15,23,42,.12) 34%, transparent 34%, transparent 66%, rgba(15,23,42,.12) 66%, rgba(15,23,42,.12) 67%, transparent 67%),
        linear-gradient(180deg, transparent 49.5%, #111 49.5%, #111 50.5%, transparent 50.5%),
        #f1f5f9;
}

.starterCourtEditor label:nth-of-type(1) { grid-area: z1; }
.starterCourtEditor label:nth-of-type(2) { grid-area: z2; }
.starterCourtEditor label:nth-of-type(3) { grid-area: z3; }
.starterCourtEditor label:nth-of-type(4) { grid-area: z4; }
.starterCourtEditor label:nth-of-type(5) { grid-area: z5; }
.starterCourtEditor label:nth-of-type(6) { grid-area: z6; }

.starterCourtEditor label {
    display: grid;
    gap: 5px;
    align-content: center;
    justify-items: center;
    text-align: center;
    min-height: 76px;
    border: 1px solid rgba(15, 35, 31, 0.14);
    background: rgba(255, 255, 255, 0.72);
    padding: 7px;
}

.starterCourtEditor label.isSetterZone {
    border-color: #d8a931;
    background:
        linear-gradient(180deg, rgba(255, 246, 183, 0.96), rgba(255, 255, 255, 0.86));
    box-shadow: 0 0 0 3px rgba(216, 169, 49, 0.32), 0 8px 18px rgba(74, 57, 8, 0.16);
}

.starterCourtEditor label.isSetterZone > span::after {
    content: " S";
    color: #9a6a00;
    font-weight: 1000;
}

.starterCourtEditor label.isSetterZone input {
    border-color: #b78308;
    background: #fff8c8;
    color: #111827;
}

.starterCourtEditor label > span {
    font-size: 14px;
    font-weight: 900;
    color: #334155;
    letter-spacing: 0;
}

.starterRotationAuto span {
    display: grid;
    place-items: center;
    min-height: 36px;
    border: 1px solid #cbd5e1;
    background: #edf5f3;
    color: #10231f;
    font-size: 14px;
    font-weight: 900;
}

.starterCourtEditor input {
    width: min(100%, 92px);
    height: 54px;
    min-width: 0;
    min-height: 0;
    border: 2px solid #cbd5e1;
    border-radius: 999px;
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    padding: 0;
    line-height: 54px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.starterCourtEditor input::-webkit-outer-spin-button,
.starterCourtEditor input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.starterTeam.home { --starter-color: #00008f; }
.starterTeam.away { --starter-color: #ef1d23; }

.teamEditor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.teamPlayersInput,
#configTeamList {
    grid-column: 1 / -1;
}

#configTeamList {
    display: grid;
    gap: 6px;
}

.teamListItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
}

.teamListPick {
    min-height: 34px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #fff;
    color: #10231f;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    text-align: left;
    font-weight: 800;
    cursor: pointer;
}

.teamListPick:hover {
    background: #eef7f4;
}

.teamDeleteBtn {
    min-height: 34px;
    border: 1px solid #9f1d1d;
    border-radius: 6px;
    background: #b32626;
    color: #fff;
    padding: 0 10px;
    font-weight: 900;
    cursor: pointer;
}

.teamDeleteBtn:hover {
    background: #7f1d1d;
}

.teamSourceBadge {
    min-height: 30px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #f3f7f6;
    color: #52625f;
    display: grid;
    place-items: center;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 900;
}

#configTeamNew {
    justify-self: start;
    background: #10231f;
    color: #fff;
}

.teamEditor > label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 900;
}

.teamEditor > label input {
    min-height: 34px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    padding: 5px 8px;
}

.teamEditor textarea {
    width: 100%;
    box-sizing: border-box;
    font: 13px/1.5 Consolas, monospace;
}

.starterGrid strong {
    font-size: 13px;
}

.newMatchActions {
    margin-top: 18px;
    border-top: 1px solid #d6dee9;
    padding-top: 14px;
}

.newMatchActions span {
    color: #475569;
    font-size: 13px;
    min-width: 220px;
}

.newMatchProgress {
    flex: 1;
    min-width: 180px;
    height: 12px;
    accent-color: #0f766e;
}

.newMatchActions button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    background: #0f172a;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

.newMatchActions button:hover {
    background: #111;
}

@keyframes exportPulse {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(240%); }
}

.matchPicker {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.matchPicker.isCollapsed {
    display: none;
}

.matchPickerHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.matchSearchBar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.matchSearchBar input {
    min-height: 34px;
    border-radius: 6px;
}

.matchSearchBar span {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.cacheProgress {
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    background: #eef8f4;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 7px;
}

.matchQuick {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 72px;
    overflow: auto;
    padding-right: 4px;
}

.matchQuick button {
    min-height: 24px;
    padding: 3px 7px;
    background: #fff;
    color: var(--accent-strong);
    font-size: 11px;
    font-weight: 700;
}

.matchQuick button:hover {
    background: #0a1412;
    color: #fff;
}

.matchChecklist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    max-height: 44vh;
    overflow: auto;
    padding-right: 4px;
}

.matchCheck {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-height: 42px;
    padding: 5px 7px;
    background: #f7faf8;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font-size: 12px;
}

.matchCheck.isDisabled {
    opacity: 0.72;
    background: #f1f4f2;
    cursor: not-allowed;
}

.matchCheck input {
    width: auto;
    min-height: 0;
}

.matchCheck em {
    color: var(--warn);
    font-style: normal;
    font-size: 11px;
}

.matchCheck span {
    display: block;
    min-width: 0;
}

.matchCheck b,
.matchCheck small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.matchCheck small {
    display: block;
    color: var(--muted);
    font-size: 11px;
}

.matchStatusBadge,
.folderMediaBadge {
    display: inline-grid;
    min-height: 18px;
    place-items: center;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff2cf;
    color: #8a5800;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.matchStatusBadge.only-scout,
.folderMediaBadge.only-scout {
    background: #e7f0ff;
    color: #164e9d;
}

.matchStatusBadge.only-video,
.folderMediaBadge.only-video {
    background: #fff1df;
    color: #9a4b00;
}

.folderMediaBadge.ready {
    background: #e4f8ed;
    color: #096237;
}

.folderMediaBadge.empty {
    background: #f0f2f1;
    color: #56635f;
}

.modeLink {
    color: #d9eee8;
    font-weight: 700;
    text-decoration: none;
}

.miniControl {
    display: grid;
    grid-template-columns: auto 56px;
    align-items: center;
    gap: 6px;
    color: #d9eee8;
    font-size: 12px;
}

.miniControl input {
    min-height: 30px;
    padding: 4px 6px;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    gap: 16px;
    align-items: start;
    min-height: clamp(600px, calc(100vh - 145px), 860px);
}

.workspace:fullscreen {
    width: 100vw;
    height: 100vh;
    max-height: none;
    padding: 12px;
    background: #10231f;
    box-sizing: border-box;
}

.shell:fullscreen {
    width: 100vw;
    height: 100vh;
    padding: 12px;
    overflow: auto;
    background:
        radial-gradient(circle at 16% 0%, rgba(15, 118, 110, 0.16), transparent 34%),
        linear-gradient(180deg, #10231f, #e8edf0 28%, #f5f7f8 100%);
}

.shell:fullscreen .topbar {
    top: 0;
}

.shell:fullscreen .workspace {
    min-height: calc(100vh - 105px);
}

.shell:fullscreen .newMatchDialog,
.shell:fullscreen .syncDialog,
.shell:fullscreen .exportOverlay {
    z-index: 9999;
}

.shell.videoHidden .workspace,
.shell.hasNoVideo .workspace {
    grid-template-columns: minmax(300px, 390px) minmax(520px, 760px);
    justify-content: center;
}

.shell.videoHidden .workspace {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    grid-template-columns: none;
    overflow: auto;
}

.shell.videoHidden .videoPanel,
.shell.hasNoVideo .videoPanel {
    min-width: 300px;
}

.shell.videoHidden .videoPanel {
    flex: 0 1 clamp(340px, 32vw, 760px);
    width: clamp(340px, 32vw, 760px);
    max-width: calc(100vw - 32px);
    min-height: 300px;
}

.shell.videoHidden .actionsPanel {
    flex: 1 1 clamp(560px, 56vw, 1180px);
    width: clamp(560px, 56vw, 1180px);
    max-width: calc(100vw - 32px);
    height: clamp(560px, calc(100vh - 170px), 920px);
}

.shell.videoHidden .videoPanel video,
.shell.videoHidden .videoSubtitle {
    display: none !important;
}

.videoPanel,
.actionsPanel,
.filters,
.tableWrap {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.videoPanel,
.actionsPanel {
    transform: translate(var(--panel-offset-x, 0), var(--panel-offset-y, 0));
    transition: box-shadow .12s ease;
}

.videoPanel.isPanelDragging,
.actionsPanel.isPanelDragging {
    z-index: 20;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .24);
    transition: none;
}

.panelMoveHandle {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 12;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: rgba(16, 35, 31, .92);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: move;
    user-select: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.panelMoveHandle:hover {
    background: #13a89a;
    color: #05211d;
}

.actionsPanel .panelMoveHandle {
    right: auto;
    left: 6px;
}

.actionsPanel {
    min-width: 0;
    align-self: start;
}

.scoutConsole {
    display: grid;
    gap: 8px;
    margin: 10px;
    padding: 10px;
    border: 1px solid #cddbd7;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fbfa, #eef5f2);
}

.scoutConsoleStatus,
.scoutStatusPanel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title action"
        "meta action";
    align-items: center;
    gap: 10px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #d6e3de;
    border-radius: 7px;
    background: #10231f;
    color: #fff;
    font-size: 12px;
}

.scoutConsoleStatus strong,
.scoutStatusPanel strong {
    grid-area: title;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0;
}

.scoutConsoleStatus span,
.scoutStatusPanel span {
    grid-area: meta;
    color: #d9eee8;
    font-weight: 800;
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scoutConsoleStatus #autoSetterCallsButton {
    grid-area: action;
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}

.scoutConsoleStatus #scoutSaveButton {
    display: none;
}

.scoutConsoleStatus #scoutSaveButton.isSaving {
    background: #f2c94c;
    color: #10231f;
}

.scoutStatusPanel {
    display: flex;
    justify-content: space-between;
}

.scoutStatusPanel strong {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scoutStatusPanel span {
    text-align: right;
}

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

.scoutConsoleInput input {
    min-height: 44px;
    border: 1px solid #adc3bd;
    border-radius: 7px;
    padding: 8px 11px;
    background: #fff;
    color: #10231f;
    font-family: Consolas, "Courier New", monospace;
    font-size: 17px;
    font-weight: 800;
}

.scoutConsoleInput button {
    min-width: 86px;
    min-height: 44px;
    border-radius: 7px;
    background: #0f4f49;
    color: #fff;
    border: 0;
    font-weight: 900;
}

.scoutConsoleInput button:hover {
    background: #111;
}

.scoutStatusPanel {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
}

.scoutStatusPanel.isHidden {
    display: none;
}

.scoutStatusPanel button {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: #fff;
    color: #10231f;
    border-radius: 6px;
    min-height: 28px;
    padding: 4px 9px;
    font-weight: 900;
}

.scoutStatusPanel button:hover {
    background: #111;
    color: #fff;
}

.scoutStatusPanel button.isActive {
    background: #14b8a6;
    border-color: #14b8a6;
    color: #06231f;
}

.actionsPanel {
    position: relative;
}

.actionsPanelClose {
    position: absolute;
    z-index: 7;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #10231f;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    display: none;
}

.actionsPanelClose {
    top: 8px;
    right: 8px;
}

.courtSideTool {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #10231f;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

.courtGridFlip {
    position: absolute;
    left: -38px;
    top: 50%;
    z-index: 7;
    transform: translateY(-50%);
    font-size: 0;
}

.courtGridFlip,
.courtGridFlip:hover,
.courtGridFlip:active,
.courtGridFlip:focus {
    transform: translateY(-50%) !important;
}

.courtGridFlip::before {
    content: "\2195";
    font-size: 16px;
    line-height: 1;
}

.courtSideTool.isActive {
    background: #14b8a6;
    color: #06231f;
}

.actionsPanelClose:hover,
.courtSideTool:hover {
    background: #111;
    color: #fff;
}

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

.nextSetTeamHead span {
    display: inline-flex;
    gap: 6px;
}

.nextSetTeamHead button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #c8d8d4;
    border-radius: 4px;
    background: #fff;
    color: #10231f;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.nextSetTeamHead button:hover {
    background: #111;
    color: #fff;
}

.scoutLineupCourt {
    display: grid;
    grid-template-columns: minmax(86px, 1fr) 158px minmax(86px, 1fr);
    gap: 6px;
    align-items: stretch;
    padding: 7px 7px 7px 42px;
    border: 1px solid #d5e2de;
    border-radius: 8px;
    background: #f5f8f7;
    min-height: 0;
    max-height: none;
    overflow: auto;
    resize: vertical;
    --home-team-color: #00008f;
    --away-team-color: #ef1d23;
    margin-bottom: 14px;
}

.courtScoreStrip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin: 0 34px 2px 0;
    padding: 4px 7px;
    border: 1px solid #d2e0db;
    border-radius: 7px;
    background: #fff;
    color: #10231f;
}

.courtScoreStrip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 900;
}

.courtScoreStrip > span:last-child {
    text-align: right;
}

.courtScoreStrip div {
    display: grid;
    justify-items: center;
    line-height: 1.05;
}

.courtScoreStrip strong {
    font-size: 20px;
}

.courtScoreStrip small {
    color: #53615e;
    font-size: 10px;
    font-weight: 900;
}

.scoutLineupCourt.isHidden {
    display: none;
}

.scoutTeamList {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    font-size: 10px;
}

.scoutTeamList b {
    display: block;
    margin-bottom: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 15px;
    line-height: 1.1;
}

.scoutTeamList.home b {
    background: var(--home-team-color);
    color: var(--home-team-text, #fff);
}

.scoutTeamList.away b {
    background: var(--away-team-color);
    color: var(--away-team-text, #fff);
}

.scoutTeamList.away {
    text-align: right;
}

.scoutTeamList span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #53615e;
}

.scoutTeamList > small {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 3px;
    align-items: center;
    margin: 2px 0 4px;
    padding: 3px 5px;
    border: 1px solid #c5d2ce;
    border-radius: 4px;
    background: #fff;
    color: #10231f;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.teamCourtMeta button {
    min-width: 34px;
    min-height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid #b8c8c3;
    border-radius: 4px;
    background: #f7fbfa;
    color: #10231f;
    font-size: 12px;
    font-weight: 1000;
    cursor: pointer;
}

.teamCourtMeta button:hover {
    background: #10231f;
    color: #fff;
}

.scoutTeamList .liberoMark,
.scoutTeamList .setterMark,
.scoutTeamList .captainMark {
    display: inline;
    margin: 0 2px 0 1px;
    padding: 0;
    background: transparent;
    font-size: inherit;
}

.scoutTeamList .liberoMark { color: #0f766e; }
.scoutTeamList .setterMark { color: #b45309; }
.scoutTeamList .captainMark { color: #7c3aed; }

.lineupCourtGrid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 48px);
    gap: 4px;
    padding: 4px;
    border: 2px solid #1f2a28;
    background:
        linear-gradient(90deg, transparent 33%, rgba(16, 35, 31, .2) 33%, rgba(16, 35, 31, .2) 34%, transparent 34%, transparent 66%, rgba(16, 35, 31, .2) 66%, rgba(16, 35, 31, .2) 67%, transparent 67%),
        #e6e9eb;
    align-self: center;
    justify-self: center;
    box-sizing: border-box;
    margin-block: 20px 23px;
}

.courtCenterScore {
    position: absolute;
    left: 50%;
    top: -47px;
    z-index: 5;
    display: grid;
    min-width: 112px;
    transform: translateX(-50%);
    justify-items: center;
    padding: 3px 10px 4px;
    border: 1px solid rgba(16, 35, 31, .25);
    border-radius: 7px;
    background: rgba(255, 255, 255, .97);
    color: #10231f;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.scoutLineupCourt > .courtCenterScore {
    top: 20px;
    margin-left: 18px;
}

.lineupCourtGrid > .courtCenterScore {
    display: none;
}

.courtCenterScore strong {
    font-size: 23px;
    font-weight: 1000;
}

.courtCenterScore small {
    margin-top: 1px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.lineupCourtGrid::before {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    top: calc(50% - 1px);
    height: 3px;
    background: #111;
    z-index: 1;
}

.serviceBall,
.serviceSpot {
    position: absolute;
    left: 50%;
    z-index: 3;
    width: 17px;
    height: 17px;
    border: 2px solid #17201b;
    border-radius: 50%;
    background:
        linear-gradient(35deg, transparent 44%, #2b77bd 45%, #2b77bd 55%, transparent 56%),
        linear-gradient(145deg, transparent 44%, #f2c94c 45%, #f2c94c 55%, transparent 56%),
        #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    transform: translateX(-50%);
}

.serviceSpot {
    padding: 0;
    min-width: 17px;
    min-height: 17px;
    max-width: 17px;
    max-height: 17px;
    border: 0;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
}

.serviceSpot::after {
    content: "";
    position: absolute;
    inset: 1px;
    border: 2px solid #17201b;
    border-radius: 50%;
    background: transparent;
}

.serviceSpot::before {
    content: attr(data-side-marker);
    position: absolute;
    top: 50%;
    color: #10231f;
    font-size: 20px;
    font-weight: 1000;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.serviceSpot.topServe::before {
    left: 34px;
}

.serviceSpot.bottomServe::before {
    right: 34px;
}

.serviceSpot.isServing {
    background:
        linear-gradient(35deg, transparent 44%, #2b77bd 45%, #2b77bd 55%, transparent 56%),
        linear-gradient(145deg, transparent 44%, #f2c94c 45%, #f2c94c 55%, transparent 56%),
        #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

.serviceSpot.isServing::after {
    display: none;
}

.serviceBall.topServe,
.serviceSpot.topServe {
    top: -24px;
    left: 16.7%;
}

.serviceBall.bottomServe,
.serviceSpot.bottomServe {
    bottom: -24px;
    left: 83.3%;
}

.lineupPlayer {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    align-self: center;
    justify-self: center;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.lineupPlayer:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.lineupPlayer i {
    position: absolute;
    right: -5px;
    top: -5px;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    border: 1px solid currentColor;
    font: 900 8px/1 sans-serif;
}

.lineupPlayer i:nth-of-type(2) {
    top: 11px;
}

.lineupPlayer i:nth-of-type(3) {
    top: 27px;
}

.lineupPlayer i.roleCaptain {
    right: auto;
    left: -5px;
    top: -5px;
}

.lineupPlayer.isSetter {
    outline: 3px solid #ffd400;
}

.lineupPlayer.isLibero {
    box-shadow: 0 0 0 3px #14b8a6, 0 2px 5px rgba(0, 0, 0, .15);
}

.lineupPlayer.isCaptain {
    outline-offset: 3px;
}

.teamCourtControls {
    display: grid;
    grid-template-columns: repeat(4, 36px);
    justify-content: center;
    gap: 4px;
    align-items: center;
    margin: 3px 0;
}

.teamCourtControls button,
.teamCourtControls strong {
    min-width: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #acb8b5;
    border-radius: 4px;
    background: #fff;
    color: #10231f;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    padding: 0;
}

.teamCourtControls button[data-scout-control^="rotate"] {
    font-size: 0;
}

.teamCourtControls button[data-scout-control^="rotate"]::before {
    content: "\21bb";
    font-size: 18px;
    line-height: 1;
}

.teamCourtControls button:hover,
.teamCourtControls button:active,
.teamCourtControls button:focus {
    transform: none !important;
}

.teamCourtControls button:hover {
    background: #10231f;
    color: #fff;
}

.keyboardDialogForm {
    width: min(1240px, calc(100vw - 28px)) !important;
    height: min(820px, calc(100vh - var(--karakashkov-topbar-height) - 74px));
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden !important;
}

.keyboardTabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 0 18px 12px;
    overflow-x: auto;
    background: #f8fafc;
    z-index: 2;
}

.keyboardTabs button {
    border: 1px solid #b9c9c4;
    border-radius: 4px;
    padding: 7px 12px;
    background: #fff;
    color: #10231f;
}

.keyboardTabs button.isActive {
    background: #10231f;
    color: #fff;
}

.keyboardPane {
    min-height: 0;
    overflow: auto;
    padding: 0 18px 16px;
}

.keyboardDialogForm .newMatchActions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 0;
}

.keyboardPane.isHidden {
    display: none;
}

.keyboardBindings,
.attackZoneBindings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
}

.configStrip,
.comboEditor,
.teamImportExport,
.teamPlayerGridHead {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, max-content));
    gap: 8px;
    align-items: end;
    margin-bottom: 10px;
}

#configTeamNew,
#configTeamImportSq,
#configTeamExportSq,
#configTeamSave {
    justify-self: start;
    width: auto;
    min-width: 118px;
    padding-inline: 12px;
}

.teamImportExport {
    grid-template-columns: repeat(3, max-content) minmax(160px, 1fr);
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 8px 0;
    background: #f8fafc;
    border-bottom: 1px solid #dbe7e3;
}

.teamImportExport button {
    min-height: 32px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #fff;
    color: #10231f;
    font-weight: 900;
    cursor: pointer;
}

.teamImportExport button:hover {
    background: #111;
    color: #fff;
}

#configTeamStatus {
    color: #53615e;
    font-size: 12px;
    font-weight: 800;
}

#configTeamSave {
    margin: 8px 0 10px;
    min-height: 34px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #10231f;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
}

#configTeamSave:hover {
    background: #111;
}

.configStrip {
    grid-template-columns: auto auto auto 1fr;
    align-items: center;
}

.configStrip button,
.comboEditor button,
.teamPlayerGridHead button,
.attackZoneBindings button,
.teamPlayerRow button {
    min-height: 30px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    background: #fff;
    color: #10231f;
    font-weight: 900;
    cursor: pointer;
}

.configStrip button.isActive,
.configStrip button:hover,
.comboEditor button:hover,
.teamPlayerGridHead button:hover,
.attackZoneBindings button:hover,
.teamPlayerRow button:hover {
    background: #111;
    color: #fff;
}

.comboEditor label {
    display: grid;
    gap: 4px;
    font-size: 12px;
    font-weight: 900;
}

.comboEditor input,
.comboEditor select {
    min-height: 32px;
    border: 1px solid #c8d8d4;
    border-radius: 6px;
    padding: 5px 7px;
}

.teamPlayerGrid {
    display: grid;
    gap: 5px;
    max-height: 310px;
    overflow: auto;
    padding-right: 4px;
    width: 100%;
}

.teamPlayerGridLabels,
.teamPlayerRow {
    display: grid;
    grid-template-columns: minmax(76px, .55fr) minmax(260px, 2fr) minmax(92px, .7fr) minmax(130px, .9fr) 34px;
    gap: 5px;
    align-items: center;
}

.teamPlayerGridLabels {
    color: #53615e;
    font-size: 11px;
    text-transform: uppercase;
}

.teamPlayerRow input {
    min-height: 30px;
    border: 1px solid #c8d8d4;
    border-radius: 5px;
    padding: 4px 6px;
}

.keyboardBindings label,
.attackZoneBindings label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.attackZoneBindings label {
    grid-template-columns: 46px minmax(0, 1fr) 105px auto;
}

.keyboardBindings input,
.attackZoneBindings select {
    width: 100%;
    box-sizing: border-box;
}

.keyboardHint {
    margin-top: 0;
    color: #596763;
}

.starterGrid input.isInvalid {
    border-color: #d11f1f;
    background: #fff1f1;
}

.lineupPlayer.home {
    background: var(--home-team-color);
    color: var(--home-team-text, #fff);
}

.lineupPlayer.away {
    background: var(--away-team-color);
    color: var(--away-team-text, #fff);
}

.matchScoreBoard {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 5px 10px;
    border: 1px solid #cbd8d4;
    background: #fff;
    text-align: center;
}

.matchScoreBoard > span {
    color: #31413d;
    font-size: 12px;
    font-weight: 900;
}

.matchScoreBoard > div {
    display: grid;
}

.matchScoreBoard strong {
    color: #10231f;
    font-size: 28px;
    line-height: 1;
}

.matchScoreBoard small {
    margin-top: 4px;
    color: #64736f;
    font-weight: 900;
}

.actionsPanel {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    position: relative;
    overflow: auto;
    resize: both;
    width: clamp(420px, 32vw, 760px);
    max-width: min(760px, calc(100vw - 430px));
    min-height: 360px;
    height: clamp(560px, calc(100vh - 170px), 860px);
    box-sizing: border-box;
    overscroll-behavior: contain;
}

.panelBottom .workspace {
    display: block;
}

.panelBottom .actionsPanel {
    margin-top: 16px;
}

.panelBottom .tableWrap {
    max-height: 46vh;
}

.reportBoard {
    margin-top: 16px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 246, 0.98)),
        var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 16px 42px rgba(18, 35, 31, 0.08);
}

.reportHead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.reportHead h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: 0;
}

.reportHeadActions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: end;
}

.reportTeamScopeLabel {
    display: grid;
    gap: 3px;
    font-size: 11px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
}

.reportTeamScopeLabel select {
    min-width: 190px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 800;
}

.reportStudio {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: #f8fbfa;
}

.reportStudio strong {
    display: block;
    margin-bottom: 8px;
    color: #172d28;
    font-size: 12px;
    text-transform: uppercase;
}

.reportTemplates,
.reportQueue {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.reportTemplates button {
    min-height: 30px;
    padding: 5px 10px;
    background: #fff;
    color: #0f4f49;
    border-color: #cfe0da;
    font-size: 12px;
    font-weight: 800;
}

.reportTemplates button:hover {
    background: #10231f;
    color: #fff;
}

.magicAnalysisButton,
.magicAnalyze,
.magicAnalysisHead button,
.magicQuickButtons button,
.magicInsight button,
.magicPlanItem button {
    border: 1px solid #c8d9d2;
    background: #ffffff;
    color: #10231f;
    font-weight: 900;
}

.magicAnalysisDialog button:not(:disabled):hover,
.magicAnalysisDialog button:not(:disabled):focus-visible,
.magicQuickButtons button:not(:disabled):hover,
.magicQuickButtons button:not(:disabled):focus-visible,
.magicInsight button:not(:disabled):hover,
.magicInsight button:not(:disabled):focus-visible,
.magicPlanItem button:not(:disabled):hover,
.magicPlanItem button:not(:disabled):focus-visible {
    background: #0f6b5f;
    border-color: #0f6b5f;
    color: #fff;
}

.magicAnalysisButton {
    min-height: 34px;
    border-color: #0f6b5f;
    background: #10231f;
    color: #fff;
}

.magicAnalysisButton:hover,
.magicAnalysisButton:focus-visible {
    background: #f5c84b;
    border-color: #f5c84b;
    color: #111;
}

.magicAnalysisDialog {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: start center;
    padding: 76px 18px 28px;
    background: rgba(8, 18, 16, 0.58);
    overflow: auto;
}

.magicAnalysisDialog.isHidden {
    display: none;
}

.magicAnalysisShell {
    width: min(1380px, 100%);
    min-height: min(820px, calc(100vh - 110px));
    padding: 18px;
    border-radius: 8px;
    background: #f7faf8;
    color: #10231f;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.magicAnalysisHead,
.magicSetup {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.magicAnalysisHead {
    position: relative;
    padding-right: 44px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dbe7e2;
}

.magicAnalysisHead h2 {
    margin: 0;
    font-size: 30px;
    letter-spacing: 0;
}

.magicAnalysisHead span {
    display: block;
    color: #58706a;
    font-weight: 800;
}

.magicAnalysisHead > div:last-child {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-right: 34px;
}

.magicAnalysisHead .exportStatusClose {
    top: 0;
    right: 0;
}

.magicSetup {
    justify-content: flex-start;
    gap: 20px;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: #ffffff;
}

.magicSetup label {
    display: grid;
    gap: 5px;
    flex: 1 1 340px;
    min-width: min(340px, 100%);
    font-size: 12px;
    font-weight: 900;
    color: #58706a;
    text-transform: uppercase;
}

.magicSetup select {
    min-height: 38px;
    border: 1px solid #cadbd5;
    border-radius: 6px;
    padding: 0 10px;
    background: #fff;
    color: #10231f;
    font-size: 14px;
    font-weight: 900;
}

.magicQuickButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 7px;
}

.magicClear,
.magicAnalyze {
    min-height: 40px;
    padding: 0 18px;
}

.magicClear {
    border-color: #c8d9d2;
    background: #ffffff;
    color: #10231f;
}

.magicClear:hover,
.magicClear:focus,
.magicClear:focus-visible {
    background: #0f6b5f;
    border-color: #0f6b5f;
    color: #fff;
}

.magicAnalyze {
    border-color: #f5c84b;
    background: #f5c84b;
    color: #111;
}

.magicAnalyze:hover,
.magicAnalyze:focus,
.magicAnalyze:focus-visible {
    background: #0f6b5f;
    border-color: #0f6b5f;
    color: #fff;
}

.magicAnalyze:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.magicResultActions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.magicResultActions button {
    min-height: 34px;
    border: 1px solid #c8d9d2;
    border-radius: 6px;
    padding: 0 12px;
    background: #ffffff;
    color: #10231f;
    font-weight: 900;
}

.magicResultActions button:hover,
.magicResultActions button:focus-visible {
    background: #0f6b5f;
    border-color: #0f6b5f;
    color: #fff;
}

.magicMatchList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow: auto;
    padding: 10px;
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: #eef6f2;
}

.magicMatchChoice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-height: 54px;
    padding: 8px;
    border: 1px solid #d2e1dc;
    border-radius: 6px;
    background: #fff;
}

.magicMatchChoice input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 3px;
}

.magicMatchChoice span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.magicMatchChoice strong,
.magicMatchChoice small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.magicMatchChoice small {
    color: #58706a;
    font-weight: 700;
}

.magicResult {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.magicSummary,
.magicQualityGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 8px;
}

.magicSummary div,
.magicQualityGrid div,
.magicSection,
.magicInsight,
.magicPlanItem {
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: #fff;
}

.magicSummary div,
.magicQualityGrid div {
    padding: 10px;
}

.magicSummary small,
.magicQualityGrid small,
.magicInsight small,
.magicPlanItem small,
.magicBaseline {
    color: #58706a;
    font-weight: 800;
}

.magicSummary strong,
.magicQualityGrid strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
}

.magicSection {
    padding: 12px;
}

.magicSection h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

.magicInsight,
.magicPlanItem {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px;
    margin-top: 8px;
}

.magicInsight p,
.magicPlanItem p {
    margin: 4px 0;
}

.magicPlanItem > span {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #10231f;
    color: #fff;
    font-weight: 900;
}

.magicEmpty {
    margin: 0;
    color: #6b7f7a;
    font-weight: 800;
}

@media print {
    body:has(.magicAnalysisDialog:not(.isHidden)) > *:not(main),
    body:has(.magicAnalysisDialog:not(.isHidden)) .topbar,
    body:has(.magicAnalysisDialog:not(.isHidden)) #workspace,
    body:has(.magicAnalysisDialog:not(.isHidden)) #reportBoard,
    body:has(.magicAnalysisDialog:not(.isHidden)) .poweredFooter {
        display: none !important;
    }
    .magicAnalysisDialog {
        position: static;
        display: block;
        padding: 0;
        background: #fff;
    }
    .magicAnalysisShell {
        box-shadow: none;
        min-height: 0;
        width: 100%;
    }
}

.queueItem {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 6px 4px 9px;
    border: 1px solid #cfe0da;
    border-radius: 999px;
    background: #fff;
    color: #1c332e;
    font-size: 12px;
    font-weight: 800;
    cursor: grab;
}

.queueItem.isDragging {
    opacity: 0.55;
    cursor: grabbing;
}

.queueItem.isDropTarget {
    background: #e9f5f0;
    border-color: #0f4f49;
    box-shadow: 0 0 0 2px rgba(15, 79, 73, 0.14);
}

.queueItem b {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #0f241f;
    color: #fff;
    font-size: 10px;
}

.queueItem button {
    width: 22px;
    min-height: 22px;
    padding: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--accent-strong);
    border-color: #d4e2dc;
    font-weight: 900;
}

.queueItem button:hover {
    background: #0a1412;
    color: #fff;
    border-color: #0a1412;
}

.emptyQueue {
    color: var(--muted);
    font-size: 12px;
}

.reportGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.reportSection {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(19, 35, 31, 0.06);
}

.reportSectionHead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6eee9;
}

.reportSectionHead h3 {
    margin: 0;
    color: #10231f;
    font-size: 18px;
}

.reportSectionHead p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.printFilterSummary {
    display: none;
}

.reportInlineFilters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 8px;
    width: 100%;
}

.reportInlineFilters label {
    display: grid;
    gap: 5px;
    color: #52635e;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.reportInlineFilters label span,
.topFilterPanel label {
    position: relative;
}

.clearMini {
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    color: var(--accent-strong);
    border-color: #d4e2dc;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.clearMini:hover {
    background: #0a1412;
    color: #fff;
}

.reportInlineFilters .clearMini {
    float: right;
}

.topFilterPanel .clearMini {
    justify-self: start;
    width: fit-content;
}

.reportInlineFilters select[multiple] {
    min-height: 74px;
    border-color: #d8e4df;
    background: #f8fbfa;
    font-size: 12px;
    overscroll-behavior: contain;
}

.directionModeControl {
    display: flex;
    align-items: center;
    width: fit-content;
    margin: -3px 0 0;
}

.directionModeControl > div {
    display: inline-flex;
    gap: 3px;
}

.directionModeControl button {
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid #d8e4df;
    border-radius: 999px;
    background: #f8fbfa;
    color: #20332e;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.directionModeControl button:hover,
.directionModeControl button.isActive {
    background: #0a1412;
    color: #fff;
    border-color: #0a1412;
}

.substituteSetMark {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-weight: 900;
    color: #111;
}

.directionSvg .percentInfo text:last-child {
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.4px;
    stroke-linejoin: round;
}

.rotationGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.reportCard {
    min-height: 220px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.reportCard h3 {
    margin: 0 0 10px;
    font-size: 15px;
}

.metricGrid,
.summaryGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.metricCard {
    display: grid;
    gap: 5px;
    min-height: 98px;
    padding: 12px;
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f3f8f6);
}

.metricCard span {
    color: #60736d;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.metricCard strong {
    color: #0f241f;
    font-size: 34px;
    line-height: 1;
}

.metricCard em {
    color: var(--muted);
    font-size: 12px;
    font-style: normal;
}

.playerMatrixWrap {
    overflow: auto;
    border: 1px solid #dbe7e2;
    border-radius: 8px;
    background: #fff;
}

.playerMatrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.playerMatrix th,
.playerMatrix td {
    padding: 7px;
    border-bottom: 1px solid #e7efeb;
    border-right: 1px solid #eef4f1;
    vertical-align: top;
}

.playerMatrix th {
    background: #f2f7f5;
    color: #12231f;
    text-align: left;
}

.playerMatrix th small,
.playerMatrix td small {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
}

.playerMatrix td b {
    display: block;
    color: #0f241f;
    font-size: 14px;
}

.playerMatrix td span {
    padding: 1px 5px;
    border-radius: 999px;
    background: #edf5f2;
    color: #31534b;
    font-weight: 800;
}

.playerImpactGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.playerImpactCard {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d5e2dd;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(20, 111, 89, 0.1), rgba(255, 255, 255, 0) 58%),
        #fbfdfc;
}

.playerImpactCard span {
    color: #172823;
    font-size: 13px;
    font-weight: 900;
}

.playerImpactCard strong {
    color: #0d5b49;
    font-size: 32px;
    line-height: 1;
}

.playerImpactCard div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.playerImpactCard b {
    padding: 3px 7px;
    border-radius: 999px;
    background: #10231f;
    color: #fff;
    font-size: 11px;
}

.playerImpactCard small {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

.skillAnalysisWrap {
    overflow: visible;
    border: 1px solid #aeb8b4;
    background: #fff;
}

.skillAnalysisTable {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    color: #171b1a;
    font-size: 10px;
}

.skillAnalysisTable th,
.skillAnalysisTable td {
    padding: 3px 3px;
    border-right: 1px solid #b9c2bf;
    border-bottom: 1px solid #e1e6e4;
    text-align: right;
    white-space: normal;
    line-height: 1.15;
}

.skillAnalysisTable th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #e0e3e2;
    color: #111;
    font-weight: 900;
}

.playerSortBtn {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
}

.playerSortBtn:hover,
.playerSortBtn.isActive {
    color: #0d5b49;
    text-decoration: underline;
}

.skillAnalysisTable th:nth-child(1),
.skillAnalysisTable th:nth-child(2),
.skillAnalysisTable th:nth-child(3),
.skillAnalysisTable td:nth-child(1),
.skillAnalysisTable td:nth-child(2),
.skillAnalysisTable td:nth-child(3) {
    text-align: left;
}

.skillAnalysisTable th:nth-child(3),
.skillAnalysisTable td:nth-child(3) {
    width: 138px;
    min-width: 0;
}

.skillAnalysisTable th:nth-child(4),
.skillAnalysisTable td:nth-child(4),
.skillAnalysisTable th:nth-child(7),
.skillAnalysisTable td:nth-child(7),
.skillAnalysisTable th:nth-child(11),
.skillAnalysisTable td:nth-child(11),
.skillAnalysisTable th:nth-child(15),
.skillAnalysisTable td:nth-child(15),
.skillAnalysisTable th:nth-child(17),
.skillAnalysisTable td:nth-child(17),
.skillAnalysisTable th:nth-child(19),
.skillAnalysisTable td:nth-child(19),
.skillAnalysisTable th:nth-child(21),
.skillAnalysisTable td:nth-child(21) {
    border-left: 2px solid #7c8783;
}

.skillAnalysisTable .skillStart td {
    border-top: 2px solid #111;
    background: #fafafa;
    font-weight: 900;
}

.skillAnalysisTable .typeStart td {
    border-top: 1px dashed #8b9692;
    background: #fcfdfc;
    font-weight: 800;
}

.skillAnalysisTable .playerNameCell {
    color: #16231f;
    font-weight: 700;
}

.officialReport {
    display: grid;
    gap: 12px;
    color: #151817;
}

.officialReportTitle {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid #aeb8b4;
    background: #f1f4f3;
}

.officialReportTitle strong {
    font-size: 17px;
    text-transform: uppercase;
}

.officialReportTitle span {
    color: #5a6662;
    font-size: 12px;
    text-align: right;
}

.officialReportTitle em {
    color: #111;
    font-size: 15px;
    font-style: normal;
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
}

.officialScoreBoard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 8px;
}

.officialScoreBoardSingle {
    grid-template-columns: 1fr;
}

.officialScoreGroups {
    display: grid;
    gap: 10px;
}

.officialScoreGroup {
    display: grid;
    gap: 7px;
}

.officialScoreGroup h4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 6px 9px;
    border: 1px solid #aeb8b4;
    background: #e7eeeb;
    color: #101716;
    font-size: 12px;
    text-transform: uppercase;
}

.officialScoreGroup h4 span {
    display: inline-grid;
    min-width: 24px;
    height: 22px;
    place-items: center;
    background: #101716;
    color: #fff;
    font-size: 11px;
}

.officialScoreLine {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.officialScorePill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 320px;
    padding: 4px 7px;
    border: 1px solid #c6d2cd;
    background: #fbfdfc;
    color: #101716;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.officialScorePill b {
    overflow: hidden;
    max-width: 260px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.officialScoreCard {
    display: grid;
    gap: 7px;
    padding: 10px 12px;
    border: 1px solid #aeb8b4;
    background: #fbfdfc;
}

.officialScoreCard strong {
    color: #121918;
    font-size: 13px;
    text-transform: uppercase;
}

.officialScoreCard div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.officialScoreCard span {
    overflow: hidden;
    color: #24332f;
    font-size: 13px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.officialScoreCard span:last-child {
    text-align: right;
}

.officialScoreCard b {
    padding: 4px 12px;
    background: #101716;
    color: #fff;
    font-size: 18px;
    line-height: 1;
}

.officialScoreCard small {
    color: #5a6662;
    font-size: 12px;
    font-weight: 700;
}

.officialScoreBoardSingle .officialScoreCard {
    padding: 12px 14px;
}

.officialScoreBoardSingle .officialScoreCard b {
    font-size: 24px;
}

.officialTeamBlock {
    overflow: auto;
    border: 1px solid #9ea8a4;
    background: #fff;
}

.officialPlayerTable,
.officialSetTable {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    font-size: 13px;
}

.officialPlayerTable th,
.officialPlayerTable td,
.officialSetTable th,
.officialSetTable td {
    padding: 4px 6px;
    border-right: 1px solid #aeb8b4;
    border-bottom: 1px solid #d5ddda;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.officialPlayerTable th,
.officialSetTable th {
    background: #e6e9e8;
    color: #111;
    font-weight: 900;
}

.officialPlayerTable .officialTeamHead th {
    background: #d7dcda;
    font-size: 16px;
    text-align: center;
}

.officialPlayerTable .officialTeamHead th:first-child {
    text-align: left;
}

.officialPlayerTable .playerNameCell {
    min-width: 190px;
    text-align: left;
}

.officialPlayerTable .playerHeaderCell {
    text-align: left;
}

.officialPlayerTable .playerHeaderCell,
.officialPlayerTable .setHeaderCell {
    text-align: center;
    vertical-align: middle;
}

.officialPlayerTable td:first-child,
.officialPlayerTable th:first-child {
    text-align: center;
}

.setGrid,
.setCell {
    display: grid;
    grid-template-columns: repeat(5, 18px);
    justify-content: center;
    gap: 2px;
    min-width: 102px;
}

.setHead span,
.setCell span,
.setCell button {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid #aeb8b4;
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 900;
}

.setCell span:not(.active) {
    color: transparent;
}

.reportStatBtn {
    min-height: 0;
    padding: 1px 4px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    line-height: 1.1;
    cursor: pointer;
}

.reportStatBtn:hover,
.reportStatBtn:focus-visible {
    background: #0a1412;
    color: #fff;
    outline: none;
}

.setCell .reportStatBtn {
    padding: 0;
    border-color: #aeb8b4;
    background: #f8fbfa;
}

.setCell .reportStatBtn:hover {
    background: #0a1412;
    color: #fff;
}

.officialTotalRow th,
.officialTotalRow td {
    border-top: 2px solid #111;
    background: #f7f8f8;
    font-weight: 900;
}

.officialSetBreakdownGroup th,
.officialSetBreakdownHead th,
.officialSetBreakdownRow th,
.officialSetBreakdownRow td {
    background: #fafafa;
}

.officialSetBreakdownGroup th {
    border-top: 2px solid #111;
    font-weight: 900;
}

.officialSetBreakdownHead th {
    font-weight: 900;
}

.officialSetBreakdownRow th {
    text-transform: uppercase;
}

.officialSetTable {
    min-width: 1080px;
    margin: 0;
    border-top: 2px solid #111;
    table-layout: fixed;
}

.officialSetTable th,
.officialSetTable td,
.officialSetTable th:first-child {
    text-align: center;
    vertical-align: middle;
}

.officialLegend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 7px 14px;
    padding: 9px 10px;
    border: 1px solid #aeb8b4;
    background: #fafafa;
    color: #35413d;
    font-size: 12px;
    text-align: center;
}

.officialLegend b {
    color: #111;
}

.officialReportFooter {
    margin-top: 10px;
    border: 1px solid #aeb8b4;
    background: #fff;
}

.officialFooterTeams {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0;
}

.officialFooterTeam {
    padding: 8px;
    border-right: 1px solid #c8d0cd;
    border-bottom: 1px solid #c8d0cd;
}

.officialFooterTeam h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
}

.officialFooterMiniGrid {
    display: grid;
    grid-template-columns: 0.85fr 1fr 1fr;
    gap: 7px;
}

.officialFooterMiniGrid table,
.officialFooterAttacks table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.officialFooterMiniGrid th,
.officialFooterMiniGrid td,
.officialFooterAttacks th,
.officialFooterAttacks td {
    padding: 3px 5px;
    border: 1px solid #c8d0cd;
    text-align: center;
    vertical-align: middle;
}

.officialFooterMiniGrid th,
.officialFooterAttacks th {
    background: #e6e9e8;
    color: #111;
    font-weight: 900;
}

.officialFooterAttacks {
    padding: 8px;
}

.officialFooterAttacks th:nth-child(5) {
    min-width: 230px;
}

.directionCard {
    min-height: 320px;
    position: relative;
    overflow: hidden;
}

.rotationGrid .directionCard {
    min-height: 260px;
}

.directionCard h3 {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #0f241f;
    color: #fff;
    font-size: 13px;
}

.directionSvg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    background: #2b77bd;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.directionSvg .heatSpot {
    mix-blend-mode: multiply;
}

.rotationGrid .directionSvg {
    max-height: 260px;
}

.directionMeta {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.barRow {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 1.4fr 42px 36px;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    font-size: 12px;
}

.barTrack {
    height: 9px;
    overflow: hidden;
    background: #e3ebe7;
    border-radius: 999px;
}

.barTrack i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0f766e, #d8b24c);
}

.barRow b,
.barRow em {
    text-align: right;
}

.barRow em {
    color: var(--muted);
    font-style: normal;
}

.syncBadge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #d8b24c;
    color: #10231f;
    font-size: 10px;
    font-weight: 900;
    vertical-align: middle;
}

.videoPanel {
    position: relative;
    min-width: 420px;
    min-height: 280px;
    overflow: auto;
    resize: both;
    box-sizing: border-box;
}

.videoEmptyState {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    min-height: 260px;
    background: #17201e;
    color: #fff;
}

.videoEmptyState.isHidden {
    display: none;
}

.videoPanel video.isHidden {
    display: none;
}

.subsToggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 8;
    min-height: 30px;
    padding: 5px 11px;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(8, 15, 14, 0.82);
    color: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.subsToggle:hover {
    background: #050807;
    color: #fff;
}

.subsMenu {
    position: absolute;
    top: 46px;
    left: 10px;
    z-index: 9;
    display: grid;
    gap: 8px;
    min-width: 214px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(12, 22, 20, 0.96);
    color: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.subsMenu.isHidden {
    display: none;
}

.subsMenu label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.2;
}

.subsMenu input {
    min-height: 0;
}

.videoSubtitle {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    bottom: auto;
    z-index: 7;
    display: grid;
    justify-items: center;
    gap: 5px;
    pointer-events: none;
    text-align: center;
}

.videoSubtitle.isHidden {
    display: none;
}

.videoSubtitle strong,
.videoSubtitle span {
    max-width: min(920px, calc(100% - 16px));
    padding: 5px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.68);
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.videoSubtitle strong {
    font-size: clamp(15px, 1.8vw, 22px);
}

.videoSubtitle span {
    font-size: clamp(12px, 1.25vw, 16px);
}

video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #101816;
}

.now {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
}

.now strong {
    color: var(--accent-strong);
    font-size: 18px;
}

.now span {
    color: var(--muted);
}

.filterBody {
    display: grid;
    gap: 12px;
}

.filterBody.isCollapsed {
    display: none;
}

.topFilterPanel {
    margin-bottom: 16px;
    padding: 14px;
    grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
    align-items: start;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.topFilterPanel label {
    min-width: 0;
    align-self: start;
}

.topFilterPanel select[multiple] {
    min-height: 104px;
}

.courtPanel {
    position: absolute;
    top: 12px;
    right: auto;
    left: 12px;
    z-index: 40;
    width: 300px;
    cursor: move;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(23, 32, 27, 0.18);
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.courtPanel.isHidden {
    display: none;
}

.courtPanel canvas {
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f9fbfa;
    cursor: crosshair;
}

.courtPanel p {
    min-height: 32px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
}

label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

input,
select {
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 9px;
    background: #fff;
    color: var(--ink);
}

select[multiple] {
    min-height: 92px;
    padding: 6px;
    overscroll-behavior: contain;
}

button {
    min-height: 36px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 7px 12px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}

button:hover {
    background: var(--accent-strong);
}

.filterActions button {
    width: 100%;
    background: #fff;
    color: var(--accent-strong);
}

.filterActions {
    display: grid;
    gap: 8px;
}

#saveFilterTemplate {
    background: #f5cf5f;
    color: #10241f;
    border-color: #f5cf5f;
    font-weight: 900;
}

#saveFilterTemplate:hover {
    background: #ffe188;
}

.tableWrap {
    overflow: auto;
    max-height: none;
    min-height: 0;
    height: 100%;
    resize: none;
    overscroll-behavior: contain;
}

.playerWorkspace {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.playerSide {
    position: sticky;
    top: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

th,
td {
    padding: 7px 7px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.iconBtn,
.rowCourtBtn {
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border-radius: 6px;
    background: #17201b;
    border-color: #17201b;
    line-height: 1;
}

.iconBtn[aria-pressed="true"],
.rowCourtBtn:hover {
    background: var(--warn);
    border-color: var(--warn);
}

td small {
    display: block;
    max-width: 180px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    text-overflow: ellipsis;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #edf4f0;
    color: #3e4d45;
    font-size: 12px;
    text-transform: uppercase;
}

tr {
    cursor: pointer;
}

tbody tr:hover,
tr.selected {
    background: #e5f4ef;
}

.codeBtn {
    min-height: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--accent-strong);
    font-weight: 700;
    white-space: nowrap;
}

.codeBtn:hover {
    background: transparent;
    color: var(--warn);
}

.modifyCodeForm {
    width: min(980px, calc(100vw - 28px));
    background: #f4f6f5;
    border: 1px solid #263732;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.modifyCodeTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #050807;
    color: #fff;
    min-height: 34px;
    font-weight: 900;
}

.modifyCodeTitle .exportStatusClose {
    position: absolute;
    right: 6px;
    top: 4px;
}

.modifyCodeGrid {
    display: grid;
    grid-template-columns: 1.65fr 1.85fr 1.45fr 0.9fr 1.55fr;
    gap: 8px;
    padding: 12px;
    align-items: start;
}

.modifyPanel,
.modifyPreview {
    border: 2px solid #163cff;
    background: #fff;
    padding: 6px;
}

.modifyPanel.main {
    border-color: #8b1111;
}

.modifyPanel.custom {
    border-color: #f04c24;
}

.modifyPanel h3,
.modifyPreview h3 {
    grid-column: 1 / -1;
    margin: -6px -6px 6px;
    padding: 4px 6px;
    background: #163cff;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

.modifyPanel.main h3 {
    background: #8b1111;
}

.modifyPanel.custom h3 {
    background: #f04c24;
}

.modifyPanel label {
    display: grid;
    gap: 3px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    color: #10231f;
}

.modifyPanel.main {
    display: grid;
    grid-template-columns: repeat(5, minmax(58px, 1fr));
    gap: 6px;
}

.modifyPanel.advanced {
    display: grid;
    grid-template-columns: minmax(138px, 1fr) 58px 72px;
    gap: 6px;
}

.modifyPanel.extended {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 6px;
}

.modifyPanel.custom {
    display: grid;
    grid-template-columns: 1fr;
}

.modifyPanel input,
.modifyPanel select {
    min-width: 0;
    width: 100%;
    height: 34px;
    border: 1px solid #9aa9a4;
    border-radius: 3px;
    padding: 3px 5px;
    background: #fff;
    color: #10231f;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
}

.modifyPanel select {
    font-size: 15px;
}

.modifyClassicRow {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 10px;
    align-items: end;
    padding: 0 12px 10px;
}

.modifyClassicRow button {
    height: 34px;
    border: 1px solid #b9c3c0;
    border-radius: 3px;
    background: #fff;
    color: #10231f;
    font-weight: 900;
}

.modifyClassicRow button.isActive {
    background: #111;
    color: #fff;
    border-color: #111;
}

.modifyClassicRow label {
    display: grid;
    gap: 3px;
    font-size: 11px;
    font-weight: 900;
    color: #10231f;
}

.modifyClassicRow input {
    height: 34px;
    border: 1px solid #9aa9a4;
    border-radius: 3px;
    padding: 3px 8px;
    font: 900 15px Consolas, monospace;
}

.modifyClassicRow input.isReadOnly,
.modifyPanel input.isReadOnly,
.modifyPanel select.isReadOnly {
    background: #eef3f1;
    color: #5b6965;
    cursor: default;
}

.modifyCodeForm.isClassicMode .modifyCodeGrid {
    opacity: 0.72;
}

.modifyCodeForm.isClassicMode .modifyPanel input,
.modifyCodeForm.isClassicMode .modifyPanel select {
    pointer-events: none;
}

.modifyPreview {
    background: #edf7ff;
}

.modifyPreview canvas {
    display: block;
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    background: #f6fbfa;
}

.modifyPreview p {
    margin: 6px 0 0;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    color: #163cff;
    word-break: break-all;
}

#modifyCodeSave {
    background: #0a8d24;
    color: #fff;
}

#modifyCodeCancel {
    background: #fff;
    color: #10231f;
}

/* Final product polish layer. Keep this before responsive and print rules. */
:root {
    --bg: #e9eef1;
    --panel: #ffffff;
    --ink: #12201c;
    --muted: #60706a;
    --line: #d6e1dd;
    --accent: #0f766e;
    --accent-strong: #0a4f49;
    --accent-soft: #e4f3ef;
    --gold: #d8a931;
    --danger: #c83232;
    --blue: #1646a3;
    --shadow-soft: 0 14px 36px rgba(14, 31, 27, 0.10);
    --shadow-strong: 0 24px 70px rgba(9, 18, 16, 0.24);
    --radius: 10px;
}

body {
    background:
        radial-gradient(circle at 16% 0%, rgba(15, 118, 110, 0.18), transparent 34%),
        radial-gradient(circle at 86% 6%, rgba(216, 169, 49, 0.18), transparent 30%),
        linear-gradient(180deg, #eef4f2 0%, #e8edf0 42%, #f5f7f8 100%);
    letter-spacing: 0;
}

body::before {
    height: 245px;
    background:
        linear-gradient(135deg, rgba(9, 18, 16, 0.98), rgba(10, 79, 73, 0.96) 54%, rgba(118, 99, 41, 0.92)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 42px);
}

.shell {
    width: min(1680px, calc(100vw - 26px));
    padding-top: 18px;
}

.topbar {
    position: sticky;
    top: 10px;
    z-index: 25;
    padding: 13px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: rgba(8, 18, 16, 0.92);
    box-shadow: var(--shadow-strong);
    backdrop-filter: blur(10px);
}

.topbar h1 {
    font-size: 27px;
    font-weight: 900;
}

.brandLink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.brandLink::before {
    content: "";
    width: 10px;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--gold), #f3d677);
    box-shadow: 0 0 0 4px rgba(216, 169, 49, 0.13);
}

.summary {
    gap: 8px;
}

.summary #eventCount {
    min-height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #f0fbf7;
    font-weight: 900;
}

button,
.ghostBtn,
.clearMini,
.reportTemplates button,
.queueItem button,
.scoutConsoleInput button,
.scoutStatusPanel button,
.teamCourtControls button,
.actionsPanelClose,
.courtSideTool {
    transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

button {
    border-radius: 7px;
    font-weight: 900;
    box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}

button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(8, 18, 16, .13);
}

button:active {
    transform: translateY(0);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(216, 169, 49, 0.42);
    outline-offset: 2px;
}

.ghostBtn {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255,255,255,0.09);
    color: #eef8f5;
}

.ghostBtn:hover {
    border-color: rgba(216, 169, 49, .7);
    background: rgba(216, 169, 49, .16);
    color: #fff;
}

.topIconBtn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    min-width: 38px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border-radius: 8px;
    font-size: 17px;
    line-height: 1;
}

.topIconBtn span {
    display: block;
    transform: translateY(-1px);
}

a.topIconBtn {
    color: #eef8f5;
    text-decoration: none;
}

.serviceSpot,
.serviceSpot:hover,
.serviceSpot:active,
.serviceSpot:focus {
    transform: none !important;
}

.serviceSpot:hover {
    box-shadow: none;
}

.serviceSpot.isServing:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
}

#newMatchButton,
#copyLink,
#exportVideo,
#keyboardConfigButton {
    border-color: transparent;
    background: linear-gradient(180deg, #13a89a, #0b7068);
    color: #fff;
}

#exportVideo {
    background: linear-gradient(180deg, #e2b63a, #a97914);
    color: #10231f;
}

.primaryTopAction {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 18px;
}

.primaryTopAction span {
    line-height: 1;
}

.exportTopAction {
    font-size: 17px;
}

.topLinkBtn {
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 7px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.topLinkBtn:hover {
    background: rgba(255, 255, 255, .16);
}

.topLinkBtn.userLogout {
    color: #cfeee8;
}

.isReadOnlyUser [data-admin-only="true"],
.isReadOnlyUser #scoutCommandInput,
.isReadOnlyUser #scoutCommandSubmit,
.isReadOnlyUser #scoutSaveButton,
.isReadOnlyUser #autoSetterCallsButton,
.isReadOnlyUser #scoutDictateButton,
.isReadOnlyUser #attachVideoButton {
    display: none !important;
}

.isReadOnlyUser [data-scout-control],
.isReadOnlyUser [data-scout-team-sub],
.isReadOnlyUser [data-scout-team-timeout],
.isReadOnlyUser [data-team-color-side],
.isReadOnlyUser .courtGridFlip {
    pointer-events: none;
}

.isReadOnlyUser [data-scout-control],
.isReadOnlyUser [data-scout-team-sub],
.isReadOnlyUser [data-scout-team-timeout],
.isReadOnlyUser .courtGridFlip {
    opacity: .72;
}

.isReadOnlyUser [data-team-color-side] {
    cursor: default;
}

.isReadOnlyUser .scoutConsoleStatus::after {
    content: "Read only";
    font-weight: 800;
    color: #486158;
}

.userMenu {
    position: relative;
    display: inline-grid;
}

.userMenu summary {
    list-style: none;
    cursor: pointer;
}

.userMenu summary::-webkit-details-marker {
    display: none;
}

.userMenu[open] summary {
    border-color: rgba(216, 169, 49, .72);
    background: rgba(216, 169, 49, .18);
}

.userMenu > div {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
    display: grid;
    gap: 8px;
    min-width: 180px;
    padding: 10px;
    border: 1px solid rgba(16, 35, 31, .16);
    border-radius: 8px;
    background: #fff;
    color: #10231f;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}

.userMenu strong {
    font-size: 12px;
    color: #51625e;
}

.userMenu a {
    display: grid;
    min-height: 34px;
    place-items: center;
    border-radius: 6px;
    background: #0f766d;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.miniControl {
    min-height: 34px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    color: #e7f3ef;
}

.miniControl input {
    border: 0;
    border-radius: 5px;
    background: #fff;
    font-weight: 900;
}

.videoPanel,
.actionsPanel,
.filters,
.tableWrap,
.reportBoard,
.reportSection,
.newMatchDialog > form,
.syncDialog > div,
.exportOverlay > div {
    border-color: rgba(20, 44, 38, 0.12);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.videoPanel {
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff, #f6faf8);
}

.videoPanel video {
    background: #06100e;
}

.scoutConsole {
    margin: 10px;
    border-color: #c5d7d1;
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(238,247,244,.96)),
        var(--panel);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.scoutConsoleStatus,
.scoutStatusPanel {
    border-color: rgba(255,255,255,.08);
    background: linear-gradient(180deg, #10231f, #071310);
    box-shadow: 0 8px 22px rgba(7, 19, 16, .18);
}

.scoutConsoleInput input {
    border-color: #b9ccc6;
    border-radius: 8px;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(5, 18, 14, .06);
}

.scoutConsoleInput input:focus {
    border-color: var(--accent);
}

.actionsPanel {
    background: linear-gradient(180deg, #ffffff, #f7faf9);
    border-color: rgba(15, 79, 73, .17);
}

.scoutLineupCourt {
    border-radius: var(--radius);
}

.courtScoreStrip {
    border-radius: 8px;
    background: linear-gradient(180deg, #0f241f, #081411);
    color: #fff;
}

.tableWrap {
    border-radius: 8px;
    background: #fff;
}

table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    background: linear-gradient(180deg, #eef7f3, #dfeae6);
    color: #203630;
    font-size: 11px;
    letter-spacing: .02em;
}

td {
    border-bottom-color: #e5ece9;
}

tbody tr:nth-child(even) {
    background: #fbfdfc;
}

tbody tr:hover {
    background: #e3f3ee;
}

tr.selected {
    background: #d8eee8 !important;
    box-shadow: inset 4px 0 0 var(--accent);
}

.codeBtn {
    color: #075e56;
    font-weight: 900;
}

.iconBtn,
.rowCourtBtn {
    background: #10231f;
    border-color: #10231f;
    color: #fff;
}

.iconBtn[aria-pressed="true"],
.rowCourtBtn:hover {
    background: var(--danger);
    border-color: var(--danger);
}

.filters,
.topFilterPanel,
.matchPicker,
.reportStudio {
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.matchQuick button {
    border-color: #c8d8d4;
    background: #fff;
    color: #10231f;
}

.matchQuick button:hover,
.matchQuick button.isActive {
    border-color: var(--accent);
    background: #10231f;
    color: #fff;
}

.reportBoard {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,249,247,.98)),
        var(--panel);
}

.reportHead h2,
.reportSectionHead h3 {
    font-weight: 900;
    color: #10231f;
}

.reportTemplates button,
.clearMini {
    border-color: #c8d8d4;
    background: #fff;
    color: #0b5f59;
}

.reportTemplates button:hover,
.clearMini:hover,
.queueItem button:hover {
    background: #10231f;
    border-color: #10231f;
    color: #fff;
}

.queueItem {
    border-color: #cbdcd6;
    background: linear-gradient(180deg, #fff, #f5faf8);
    box-shadow: 0 6px 18px rgba(9, 18, 16, .06);
}

.directionModeControl button.isActive {
    background: #10231f;
    border-color: #10231f;
    color: #fff;
}

.newMatchHead,
.modifyCodeTitle {
    background: linear-gradient(180deg, #10231f, #050a09);
}

.toast {
    border-radius: var(--radius);
    background: #071310;
    box-shadow: var(--shadow-strong);
}

@media (max-width: 950px) {
    .shell {
        width: min(100vw - 20px, 1500px);
        padding-top: 12px;
    }

    .topbar,
    .workspace {
        display: block;
    }

    .workspace {
        height: auto;
    }

    .summary {
        margin-top: 12px;
        justify-content: flex-start;
    }

    .filterActions {
        grid-column: 1 / -1;
    }

    .topFilterPanel {
        grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    }

    .matchChecklist {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matchSearchBar {
        grid-template-columns: 1fr;
    }

    .courtPanel {
        width: min(260px, 72vw);
    }

    .tableWrap {
        max-height: none;
        height: auto;
        min-height: 280px;
    }

    .actionsPanel {
        height: auto;
        width: auto;
        max-width: none;
        resize: vertical;
    }

    .reportGrid {
        grid-template-columns: 1fr;
    }

    .reportStudio {
        grid-template-columns: 1fr;
    }

    .rotationGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    h1 {
        font-size: 21px;
    }

    .topbar {
        padding: 12px;
    }

    .miniControl {
        grid-template-columns: 1fr;
        width: 72px;
    }

    .topFilterPanel {
        grid-template-columns: 1fr 1fr;
    }

    .matchChecklist {
        grid-template-columns: 1fr;
    }

    .courtPanel {
        width: min(220px, 80vw);
    }

    .rotationGrid {
        grid-template-columns: 1fr;
    }
}


/* v390 workflow polish */
.analysisStartPanel {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(320px, 1.4fr);
    gap: 18px;
    align-items: center;
    margin: 16px 0;
    padding: 24px;
    border: 1px solid #cfe0da;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff, #eef7f3);
    box-shadow: 0 18px 44px rgba(15, 79, 73, .10);
}
.analysisStartPanel.isHidden { display: none; }
.analysisStartIntro h2 { margin: 3px 0 8px; font-size: 28px; }
.analysisStartIntro p { margin: 0; color: var(--muted); }
.analysisStartChoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analysisStartChoice {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    text-align: left;
    min-height: 108px;
    padding: 16px;
    border: 1px solid #bed6ce;
    border-radius: 10px;
    background: #fff;
    color: #10231f;
}
.analysisStartChoice:hover { transform: translateY(-1px); border-color: #0f4f49; box-shadow: 0 10px 24px rgba(15,79,73,.12); }
.analysisStartIcon {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #10231f;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
}
.analysisStartChoice strong { align-self: end; font-size: 16px; }
.analysisStartChoice small { align-self: start; color: #63756f; }

.shell.analysisEmptyMode {
    min-height: 100vh;
}

.shell.analysisEmptyMode .workspace,
.shell.analysisEmptyMode #reportBoard,
.shell.analysisEmptyMode #filterBody {
    display: none !important;
}

.shell.analysisEmptyMode #matchPicker.isCollapsed {
    display: none;
}

.shell.analysisEmptyMode .analysisStartPanel {
    width: min(1600px, calc(100vw - 32px));
    min-height: min(460px, calc(100vh - 150px));
    margin: clamp(28px, 7vh, 76px) auto 0;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid rgba(11, 112, 104, 0.28);
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,248,244,.98)),
        radial-gradient(circle at 12% 16%, rgba(246, 195, 67, .18), transparent 34%);
    box-shadow: 0 28px 70px rgba(15, 79, 73, .16);
}

.shell.analysisEmptyMode .analysisStartIntro .eyebrow {
    color: #0b7068;
    font-weight: 950;
}

.shell.analysisEmptyMode .analysisStartIntro h2 {
    color: #10231f;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.02;
}

.shell.analysisEmptyMode .analysisStartIntro p {
    max-width: 440px;
    color: #53655f;
    font-size: 15px;
    line-height: 1.55;
}

.shell.analysisEmptyMode .analysisStartChoice {
    min-height: 142px;
    border-color: rgba(11, 112, 104, .24);
    border-radius: 8px;
    background: #fff;
}

.shell.analysisEmptyMode .analysisStartChoice:hover,
.shell.analysisEmptyMode .analysisStartChoice:focus-visible {
    border-color: #0b7068;
    background: #f6c343;
    color: #10231f;
    box-shadow: 0 14px 34px rgba(11,112,104,.18);
}

.shell.analysisEmptyMode .analysisStartChoice:hover small,
.shell.analysisEmptyMode .analysisStartChoice:focus-visible small {
    color: #10231f;
}

.scoutConsole.scoutConsoleFloating {
    position: absolute;
    z-index: 50;
    width: min(620px, calc(100vw - 24px));
    max-width: calc(100vw - 16px);
    margin: 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
}
.scoutConsoleDragHandle { cursor: move; user-select: none; touch-action: none; }
.scoutConsole.isDragging { opacity: .96; box-shadow: 0 22px 60px rgba(0,0,0,.36); }

@media (max-width: 760px) {
    .analysisStartPanel { grid-template-columns: 1fr; padding: 16px; }
    .analysisStartChoices { grid-template-columns: 1fr; }
    .scoutConsole.scoutConsoleFloating { width: calc(100vw - 16px); }
}

@media print {
    @page {
        size: A4 portrait;
        margin: 4mm;
    }

    body {
        background: #fff;
        color: #000;
    }

    body::before,
    .topbar,
    .workspace,
    .tableWrap,
    .matchPicker,
    .topFilterPanel,
    .scoutConsole,
    .scoutConsoleFloating {
        display: none !important;
    }

    .shell {
        width: 100%;
        padding: 0;
    }

    .reportBoard {
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .reportHead {
        display: none;
    }

    .reportStudio {
        display: none;
    }

    .reportGrid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .rotationGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2mm;
    }

    .reportCard {
        break-inside: avoid;
        min-height: 0;
        padding: 2mm;
        border-radius: 0;
    }

    .reportSection {
        gap: 2.5mm;
        break-inside: avoid;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .reportGrid > .reportSection:not(:first-child) {
        break-before: page;
    }

    .reportSectionHead {
        display: block;
        padding: 0 0 2mm;
        border-bottom: 1px solid #111;
    }

    .reportSectionHead h3 {
        text-align: center;
        font-size: 15px;
        line-height: 1.15;
    }

    .reportSectionHead p {
        text-align: center;
        font-size: 10px;
    }

    .reportInlineFilters {
        display: none !important;
    }

    .directionModeControl {
        display: none !important;
    }

    .printFilterSummary {
        display: block;
        margin-top: 1.2mm;
        color: #111;
        text-align: center;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.25;
        white-space: normal;
    }

    .officialReport {
        gap: 1mm;
    }

    .officialReportTitle,
    .officialScoreGroup h4 {
        padding: 1mm 1.5mm;
    }

    .officialPlayerTable,
    .officialSetTable {
        min-width: 0;
        width: 100%;
        table-layout: fixed;
        font-size: 8.1px;
    }

    .officialPlayerTable th,
    .officialPlayerTable td,
    .officialSetTable th,
    .officialSetTable td {
        padding: 0.35mm 0.25mm;
        white-space: normal;
        line-height: 1.05;
        text-align: center;
        vertical-align: middle;
        font-size: 7.8px !important;
        font-weight: 700;
    }

    .officialPlayerTable .playerNameCell {
        min-width: 0;
        text-align: left;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .officialPlayerTable .playerHeaderCell {
        text-align: left !important;
    }

    .officialPlayerTable .setHeaderCell,
    .officialPlayerTable .setHead,
    .officialPlayerTable .officialColVote,
    .officialPlayerTable td:nth-child(5),
    .officialPlayerTable th:nth-child(5) {
        text-align: center !important;
    }

    .officialPlayerTable .officialColNum {
        width: 3%;
    }

    .officialPlayerTable .officialColPlayerA,
    .officialPlayerTable .officialColPlayerB {
        width: 8.2%;
    }

    .officialPlayerTable .officialColSet {
        width: 9.2%;
    }

    .officialPlayerTable .officialColVote {
        width: 4.2%;
    }

    .officialPlayerTable .officialColStat {
        width: 4.25%;
    }

    .officialPlayerTable .officialTeamHead th {
        font-size: 7.8px !important;
    }

    .setGrid,
    .setCell {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.25mm;
        min-width: 0;
    }

    .setHead span {
        font-size: 7.8px !important;
    }

    .setCell span,
    .setCell button {
        width: 3.2mm;
        height: 3.2mm;
        font-size: 7.8px !important;
        font-weight: 700;
        line-height: 1;
    }

    .setCell .reportStatBtn {
        padding: 0;
        font-size: 7.8px !important;
    }

    .officialTotalRow th,
    .officialTotalRow td {
        font-size: 7.8px !important;
        font-weight: 800;
    }

    .officialReportTitle {
        grid-template-columns: 1fr;
        gap: 0.8mm;
        text-align: center;
    }

    .officialReportTitle strong,
    .officialReportTitle em,
    .officialReportTitle span {
        text-align: center;
        white-space: normal;
    }

    .reportSection[data-report-section="teamStats"] .reportSectionHead {
        padding-bottom: 1mm;
    }

    .reportSection[data-report-section="teamStats"] {
        min-height: 280mm;
        max-height: 288mm;
        display: flex;
        flex-direction: column;
    }

    .reportSection[data-report-section="teamStats"] .reportContent,
    .reportSection[data-report-section="teamStats"] .officialReport {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .reportSection[data-report-section="teamStats"] .officialTeamBlock {
        flex: 0 1 auto;
        display: block;
    }

    .reportSection[data-report-section="teamStats"] .reportSectionHead h3 {
        font-size: 11px;
    }

    .reportSection[data-report-section="teamStats"] .reportSectionHead p {
        font-size: 7px;
    }

    .officialReportTitle strong {
        font-size: 11px;
    }

    .officialReportTitle em {
        font-size: 10px;
    }

    .officialReportTitle span {
        font-size: 7px;
    }

    .officialLegend {
        justify-content: center;
        text-align: center;
        gap: 0.35mm 1mm;
        padding: 0.45mm;
        font-size: 6.4px;
        line-height: 1;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .officialReportFooter {
        margin-top: 0.5mm;
        break-inside: avoid;
        flex: 0 0 auto;
    }

    .officialFooterTeams {
        grid-template-columns: repeat(2, 1fr);
    }

    .officialFooterTeam {
        padding: 0.7mm;
    }

    .officialFooterTeam h4 {
        margin-bottom: 0.5mm;
        font-size: 7.2px;
    }

    .officialFooterMiniGrid {
        gap: 0.5mm;
    }

    .officialFooterMiniGrid table,
    .officialFooterAttacks table {
        width: 100%;
        font-size: 7.2px;
        table-layout: fixed;
    }

    .officialFooterMiniGrid th,
    .officialFooterMiniGrid td,
    .officialFooterAttacks th,
    .officialFooterAttacks td {
        padding: 0.3mm 0.22mm;
        line-height: 1.05;
        font-size: 7.2px;
        white-space: normal;
        overflow: hidden;
    }

    .officialFooterAttacks {
        padding: 0.5mm;
        clear: both;
    }

    .officialFooterAttacks th:nth-child(5),
    .officialFooterAttacks td:nth-child(5) {
        width: 44%;
        min-width: 0;
        white-space: nowrap;
        font-size: 6.8px;
    }

    .officialFooterAttacks .officialFooterStatCol {
        width: 7%;
    }

    .officialFooterAttacks .officialFooterKillCol {
        width: 44%;
    }

    .officialTeamBlock,
    .skillAnalysisWrap {
        overflow: visible;
    }

    .reportStatBtn {
        font-size: inherit;
        font-weight: inherit;
    }

    .directionCard {
        min-height: 0;
        overflow: visible;
    }

    .rotationGrid .directionCard {
        min-height: 0;
    }

    .directionCard h3 {
        min-height: 0;
        margin-bottom: 1mm;
        padding: 1mm 2mm;
        border: 0.2mm solid #000;
        border-radius: 3mm;
        background: transparent;
        color: #000;
        font-size: 10.5px;
        line-height: 1;
    }

    .directionSvg {
        max-height: 72mm;
        border-radius: 0;
    }

    .rotationGrid .directionSvg {
        max-height: 72mm;
    }

    .directionMeta {
        margin-top: 0.8mm;
        font-size: 8.5px;
        line-height: 1.1;
    }

    .summaryGrid,
    .metricGrid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2mm;
    }

    .barRow {
        grid-template-columns: minmax(20mm, 1fr) 1fr 8mm 8mm;
        gap: 1.5mm;
        min-height: 0;
        font-size: 7.5px;
    }

    .barTrack {
        height: 1.7mm;
    }

    .skillAnalysisTable {
        min-width: 0;
        table-layout: fixed;
        font-size: 5.5px;
    }

    .skillAnalysisTable th,
    .skillAnalysisTable td {
        padding: 0.35mm 0.25mm;
        white-space: normal;
        line-height: 1.02;
    }

    .skillAnalysisTable th:nth-child(3),
    .skillAnalysisTable td:nth-child(3) {
        min-width: 0;
        width: 20mm;
    }

    .playerImpactGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5mm;
    }

    .playerImpactCard {
        gap: 1mm;
        padding: 1.5mm;
        border-radius: 0;
    }

    .playerImpactCard strong {
        font-size: 16px;
    }

    .playerImpactCard span,
    .playerImpactCard small,
    .playerImpactCard b {
        font-size: 7px;
        line-height: 1.1;
    }

    .playerSortBtn {
        text-decoration: none !important;
    }
}

.authBody,
.adminBody {
    min-height: 100vh;
    margin: 0;
    background: #061311;
    color: #10231f;
    font-family: Inter, Arial, sans-serif;
}

.adminBody {
    background:
        linear-gradient(rgba(6, 19, 17, .84), rgba(6, 19, 17, .9)),
        linear-gradient(90deg, transparent 0 10%, rgba(255, 255, 255, .08) 10% 10.2%, transparent 10.2% 33.2%, rgba(255, 255, 255, .08) 33.2% 33.4%, transparent 33.4% 66.6%, rgba(255, 255, 255, .08) 66.6% 66.8%, transparent 66.8% 90%, rgba(255, 255, 255, .08) 90% 90.2%, transparent 90.2%),
        linear-gradient(0deg, transparent 0 18%, rgba(255, 255, 255, .08) 18% 18.2%, transparent 18.2% 50%, rgba(232, 45, 58, .5) 50% 50.45%, transparent 50.45% 82%, rgba(255, 255, 255, .08) 82% 82.2%, transparent 82.2%),
        radial-gradient(circle at 18% 10%, rgba(24, 163, 146, .3), transparent 28%),
        radial-gradient(circle at 86% 84%, rgba(238, 197, 56, .2), transparent 26%),
        linear-gradient(135deg, #071815, #153a34 58%, #a89431);
}

.authBody {
    display: grid;
    place-items: center;
    overflow-x: hidden;
    background:
        linear-gradient(rgba(7, 24, 21, .72), rgba(7, 24, 21, .88)),
        radial-gradient(circle at 78% 18%, rgba(245, 214, 86, .28), transparent 23%),
        radial-gradient(circle at 20% 72%, rgba(18, 148, 135, .32), transparent 28%),
        linear-gradient(135deg, #061613 0%, #0d332e 46%, #111f1b 100%);
}

.authBody::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .34;
    background:
        linear-gradient(90deg, transparent 0 9%, rgba(255, 255, 255, .18) 9% 9.35%, transparent 9.35% 33%, rgba(255, 255, 255, .18) 33% 33.35%, transparent 33.35% 66%, rgba(255, 255, 255, .18) 66% 66.35%, transparent 66.35% 91%, rgba(255, 255, 255, .18) 91% 91.35%, transparent 91.35%),
        linear-gradient(0deg, transparent 0 18%, rgba(255, 255, 255, .16) 18% 18.35%, transparent 18.35% 50%, rgba(239, 68, 68, .55) 50% 50.55%, transparent 50.55% 82%, rgba(255, 255, 255, .16) 82% 82.35%, transparent 82.35%);
    transform: perspective(900px) rotateX(58deg) translateY(12%);
    transform-origin: center bottom;
}

.authShell {
    position: relative;
    z-index: 1;
    width: min(1120px, calc(100vw - 32px));
    min-height: min(690px, calc(100vh - 44px));
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, .78fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 24px;
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 34px 95px rgba(0, 0, 0, .48);
    backdrop-filter: blur(18px);
}

.authHero {
    position: relative;
    display: grid;
    align-content: space-between;
    min-height: 660px;
    padding: 38px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(7, 22, 19, .08), rgba(7, 22, 19, .88)),
        linear-gradient(90deg, transparent 0 13%, rgba(255, 255, 255, .14) 13% 13.35%, transparent 13.35% 34%, rgba(255, 255, 255, .14) 34% 34.35%, transparent 34.35% 66%, rgba(255, 255, 255, .14) 66% 66.35%, transparent 66.35% 87%, rgba(255, 255, 255, .14) 87% 87.35%, transparent 87.35%),
        linear-gradient(0deg, transparent 0 20%, rgba(255, 255, 255, .12) 20% 20.35%, transparent 20.35% 50%, rgba(232, 45, 58, .68) 50% 50.6%, transparent 50.6% 80%, rgba(255, 255, 255, .12) 80% 80.35%, transparent 80.35%),
        radial-gradient(circle at 20% 18%, rgba(245, 214, 86, .34), transparent 25%),
        linear-gradient(135deg, rgba(8, 91, 80, .96), rgba(5, 18, 16, .96));
}

.authHero::after {
    content: "";
    position: absolute;
    right: -72px;
    bottom: -88px;
    width: 280px;
    height: 280px;
    border: 18px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 18px rgba(239, 68, 68, .22);
}

.authBrand {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.authBrand > span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f3c739;
    color: #061613;
    font-size: 27px;
    font-weight: 1000;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24);
}

.authBrand strong,
.authBrand small,
.authHeroCopy p,
.authHeroCopy h1,
.authHeroCopy small {
    display: block;
    margin: 0;
}

.authBrand strong {
    font-size: 18px;
    font-weight: 1000;
}

.authBrand small {
    margin-top: 2px;
    color: rgba(255, 255, 255, .72);
    font-weight: 800;
}

.authHeroCopy {
    position: relative;
    z-index: 1;
    max-width: 580px;
}

.authHeroCopy p {
    color: #f3c739;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.authHeroCopy h1 {
    margin-top: 10px;
    font-size: clamp(38px, 5.4vw, 68px);
    line-height: .95;
    font-weight: 1000;
}

.authHeroCopy small {
    max-width: 430px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .76);
    font-size: 15px;
    line-height: 1.5;
}

.authFeatureStrip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.authFeatureStrip span {
    min-height: 30px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .88);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.authCard {
    width: auto;
    margin: 0;
    display: grid;
    gap: 14px;
    align-content: center;
    padding: 48px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(242, 248, 246, .98));
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .72);
}

.authCardHead {
    display: grid;
    gap: 7px;
    margin-bottom: 6px;
}

.authCardHead span {
    color: #0f766d;
    font-size: 12px;
    font-weight: 1000;
    text-transform: uppercase;
}

.authCardHead h2,
.authCardHead p {
    margin: 0;
}

.authCardHead h2 {
    color: #10231f;
    font-size: 40px;
    line-height: 1;
    font-weight: 1000;
}

.authCardHead p {
    color: #61716d;
    font-size: 14px;
    line-height: 1.45;
}

.authCard label,
.adminCard label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    color: #435651;
}

.adminCard label.inlineOption,
.compressActions label.inlineOption {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #bcc9c5;
    border-radius: 6px;
    background: #f7faf9;
    color: #10231f;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.adminCard label.inlineOption input,
.compressActions label.inlineOption input {
    min-height: 0;
    width: 16px;
    height: 16px;
    padding: 0;
}

.authCard input,
.adminCard input,
.adminCard select {
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #bcc9c5;
    border-radius: 6px;
    background: #fff;
    color: #10231f;
    font: inherit;
    text-transform: none;
}

.authCard input {
    min-height: 50px;
    border-color: #cbd8d4;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(16, 35, 31, .04);
}

.authCard input:focus {
    outline: 3px solid rgba(15, 118, 109, .18);
    border-color: #0f766d;
}

.authCard button,
.adminCard button,
.adminHead a,
.adminHead button {
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: #0f766d;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.authCard button {
    min-height: 52px;
    margin-top: 4px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0e6e65, #12a08f);
    font-size: 15px;
    box-shadow: 0 16px 34px rgba(15, 118, 109, .28);
}

.authCard button:hover {
    filter: brightness(1.05);
}

.adminUserActions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.adminCard button.dangerBtn {
    min-width: 118px;
    padding: 0 12px;
    background: #b32626;
}

.adminCard button.dangerBtn:hover:not(:disabled) {
    background: #8f1d1d;
}

.adminCard button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.authError {
    padding: 9px 11px;
    border-radius: 6px;
    background: #fde7e7;
    color: #a51919;
}

@media (max-width: 820px) {
    .authShell {
        grid-template-columns: 1fr;
        min-height: 0;
        margin: 18px 0;
    }

    .authHero {
        min-height: 310px;
        padding: 26px;
    }

    .authCard {
        padding: 28px;
    }
}

.adminShell {
    width: min(1180px, calc(100vw - 32px));
    margin: 28px auto;
}

.adminHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.adminHead h1,
.adminHead p {
    margin: 0;
}

.engineStatus {
    display: inline-grid;
    min-height: 24px;
    margin-top: 8px;
    place-items: center;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff8df;
    color: #6b5310;
    font-size: 12px;
    font-weight: 950;
}

.engineStatus.isRunning {
    background: #e4f5f0;
    color: #0b7068;
}

.engineStatus.isStopped {
    background: #fdeaea;
    color: #9c1f1f;
}

.adminHead nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.adminHead a {
    display: inline-grid;
    place-items: center;
    padding: 0 13px;
}

.adminHead button {
    display: inline-grid;
    place-items: center;
    padding: 0 13px;
    font: inherit;
    font-weight: 950;
}

.adminHead .adminTopActivityBtn {
    min-width: 92px;
    font-weight: 1000;
}

.adminHead .adminTopActivityBtn.isActive {
    background: #10231f;
    color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
}

.adminMainContent.isHidden {
    display: none;
}

.adminGrid {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.adminHomeShell {
    display: grid;
    align-content: start;
    min-height: 100vh;
    max-width: 1120px;
    margin-block: 0;
    padding-top: 26px;
}

.adminHomeHead {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
    backdrop-filter: blur(14px);
}

.adminHomeHead p {
    color: rgba(255, 255, 255, .7);
    font-weight: 800;
}

.adminHomeHead a {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .12);
}

.adminHomeHead a:hover {
    background: rgba(255, 255, 255, .2);
}

.adminChoiceGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    gap: 18px;
}

.adminChoiceCard {
    position: relative;
    display: grid;
    place-items: center;
    gap: 16px;
    min-height: 210px;
    padding: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(238, 246, 243, .95));
    color: #0d2a25;
    text-decoration: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.adminChoiceCard::after {
    content: "";
    position: absolute;
    inset: auto 18px 16px 18px;
    height: 4px;
    border-radius: 999px;
    background: #0b7068;
    opacity: .9;
}

.adminChoiceCard:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, .42);
    box-shadow: 0 30px 75px rgba(0, 0, 0, .34);
}

.adminChoiceCard > span {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border-radius: 20px;
    background: #0b7068;
    color: #fff;
    font-size: 36px;
    font-weight: 900;
    box-shadow: 0 18px 34px rgba(11, 112, 104, .28);
}

.adminChoiceCard strong {
    text-align: center;
    font-size: 23px;
    line-height: 1.08;
    font-weight: 950;
}

.adminChoiceCard.uploadChoice > span {
    background: #d9ad28;
    color: #10231f;
    box-shadow: 0 18px 34px rgba(217, 173, 40, .26);
}

.adminChoiceCard.uploadChoice::after {
    background: #d9ad28;
}

.adminChoiceCard.settingsChoice > span {
    background: #253a75;
    color: #fff;
    box-shadow: 0 18px 34px rgba(37, 58, 117, .26);
}

.adminChoiceCard.settingsChoice::after {
    background: #253a75;
}

.adminHomeStatus {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 900;
}

.adminHomeStatus span,
.adminHomeStatus strong {
    min-height: 28px;
    padding: 7px 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
}

.uploadTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.uploadTabs button {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid #cad6d2;
    border-radius: 7px;
    background: #f8fbfa;
    color: #10231f;
    font-size: 14px;
    font-weight: 950;
    cursor: pointer;
}

.uploadTabs button:hover {
    border-color: #0b7068;
    background: #e4f5f0;
    color: #10231f;
}

.uploadTabs button.isActive {
    border-color: #0b7068;
    background: #0b7068;
    color: #fff;
}

.uploadTabPanel {
    display: none;
}

.uploadTabPanel.isActive {
    display: grid;
    gap: 16px;
}

.uploadTabPanel .adminGrid,
.uploadTabPanel .downloadManagerCard {
    margin-bottom: 0;
}

.uploadManagerGrid #uploadForm {
    grid-column: 1 / -1;
}

.uploadManagerGrid #folderForm {
    grid-column: 1 / -1;
    grid-template-columns: minmax(320px, 1.4fr) minmax(240px, .8fr) auto;
    align-items: end;
}

.uploadManagerGrid #folderForm h2 {
    grid-column: 1 / -1;
}

.uploadManagerGrid #folderForm button {
    min-width: 150px;
    padding: 0 18px;
}

.adminCard {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.adminCard h2 {
    margin: 0 0 4px;
}

.adminUsersCard {
    align-content: start;
    gap: 6px;
    padding: 12px;
}

.adminUsersCard h2 {
    margin: 0;
    font-size: 16px;
    line-height: 1.1;
}

.adminPermissionBox {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid #9fc8bf;
    border-radius: 8px;
    background: #edf8f5;
}

.adminPermissionBox legend {
    padding: 0 6px;
    color: #0d5f56;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.adminPermissionBox small {
    color: #405b55;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.adminPermissionBox input:disabled + span,
.adminPermissionBox:has(input:disabled) small {
    opacity: .65;
}

.adminHint {
    margin: 0;
    color: #596a66;
    font-size: 12px;
    font-weight: 800;
}

.uploadVideoProbeStatus {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #cdd8d4;
    border-radius: 6px;
    background: #f5f8f7;
    color: #43524e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.uploadVideoProbeStatus.isReady {
    border-color: #74b38f;
    background: #eaf8ef;
    color: #17633a;
}

.uploadVideoProbeStatus.needsCompression {
    border-color: #e0a1a1;
    background: #fff0f0;
    color: #8b1e1e;
}

.compressionPolicyCard {
    width: 100%;
    max-width: none;
}

.compressionPolicyGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
}

.adminOpsGrid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.adminOpsGrid > .networkPolicyCard,
.adminOpsGrid > .backupRestoreCard {
    width: 100%;
    max-width: none;
}

.networkPolicyGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 12px;
}

.networkPolicyGrid .checkLine {
    grid-column: 1 / -1;
}

.activityCard {
    align-content: start;
    max-height: none;
    overflow: visible;
}

.activityFloatingPanel {
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
    border-color: rgba(23, 71, 63, .2);
    box-shadow: 0 18px 46px rgba(0, 0, 0, .2);
}

.activityFloatingPanel.isHidden,
.onlineSessions.isHidden,
.activityLog.isHidden {
    display: none;
}

.activityCardHead {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.activityCardHead > span {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.activityTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.activitySearch {
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid #c4d1cd;
    border-radius: 7px;
    background: #fff;
    color: #10231f;
    font: inherit;
}

.activityTabs button {
    width: auto;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid #c7d4d0;
    border-radius: 999px;
    background: #f6faf8;
    color: #25423b;
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    cursor: pointer;
}

.activityTabs button.isActive {
    border-color: #17473f;
    background: #17473f;
    color: #fff;
}

.onlineSessions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 6px;
}

.onlineSession,
.activityRow {
    display: grid;
    gap: 2px;
    padding: 7px 9px;
    border: 1px solid #d2dbd8;
    border-radius: 7px;
    background: #f8fbfa;
    color: #10231f;
}

.onlineSession {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.onlineSession.isOnline {
    border-color: #63a987;
    background: #eaf8ef;
}

.onlineSession.isInactive {
    opacity: .72;
}

.onlineSession button {
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid #b93c3c;
    border-radius: 5px;
    background: #fff;
    color: #9b1f1f;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
}

.onlineSession strong,
.activityRow strong {
    font-size: 13px;
    font-weight: 950;
}

.onlineSession span,
.activityRow span,
.onlineSession small,
.activityRow small,
.activityRow em {
    color: #52635f;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.activityLog {
    display: grid;
    gap: 5px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.activityRow.isDanger {
    border-color: #c43232;
    background: #fdecec;
}

.activityRow.isDanger strong {
    color: #9f1f1f;
}

.activityRow.isWarn {
    border-color: #d49b27;
    background: #fff6df;
}

.activityRow.isGood {
    border-color: #64aa87;
    background: #eef9f2;
}

.checkLine {
    display: flex !important;
    grid-template-columns: auto 1fr;
    align-items: center;
    flex-direction: row;
}

.adminUsers,
.uploadJobs {
    display: grid;
    gap: 5px;
}

.adminUserTabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 2px;
}

.adminUserTabs button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 2px 7px;
    border: 1px solid #cbd8d4;
    border-radius: 999px;
    background: #f8fbfa;
    color: #10231f;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 950;
    cursor: pointer;
}

.adminUserTabs button.isActive,
.adminUserTabs button:hover {
    border-color: #0b7068;
    background: #0b7068;
    color: #fff;
}

.uploadQueueHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.uploadQueueHead h2 {
    margin: 0;
}

.uploadJob {
    display: grid;
    gap: 2px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #d2dbd8;
    border-radius: 7px;
    background: #f8fbfa;
    color: #10231f;
    text-align: left;
}

.adminUsers button {
    display: grid;
    grid-template-columns: minmax(56px, 96px) 1fr;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 6px;
    border: 1px solid #d2dbd8;
    border-radius: 6px;
    background: #f8fbfa;
    color: #10231f;
    text-align: left;
    cursor: pointer;
}

.adminUsers button:hover {
    border-color: #0b7068;
    background: #edf8f5;
}

.adminUsers strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.1;
}

.adminUsers span {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.adminUsers span b,
.adminUsers span i {
    display: inline-grid;
    min-height: 15px;
    place-items: center;
    padding: 0 4px;
    border-radius: 999px;
    background: #e5eee9;
    color: #37504a;
    font-size: 10px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
}

.adminUsers span i.ok,
.adminUsers span i:not(.off) {
    background: #dff4ec;
    color: #0f6c55;
}

.adminUsers span i.off {
    background: #f1e2e2;
    color: #8a3333;
}

.adminUsers span i.createdBy {
    background: #10231f;
    color: #fff;
}

.uploadJob span {
    color: #64736f;
    font-size: 12px;
    font-weight: 800;
}

.uploadJob.processing,
.uploadJob.queued {
    border-color: #d9ad28;
    background: #fff8df;
}

.uploadJob.ready {
    border-color: #1b8f76;
    background: #e9faf4;
}

.uploadJob.failed {
    border-color: #c83232;
    background: #fdeaea;
}

.uploadJob button {
    justify-self: start;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #aebbb8;
    border-radius: 5px;
    background: #fff;
    color: #10231f;
    font-weight: 900;
    cursor: pointer;
}

.uploadJob .jobLogLink {
    justify-self: start;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid #1b8f76;
    border-radius: 5px;
    background: #fff;
    color: #0b6b59;
    font-weight: 900;
    text-decoration: none;
}

.uploadJob.failed button {
    border-color: #c83232;
    color: #9c1f1f;
}

.compressAllCard {
    gap: 14px;
}

.compressList {
    display: grid;
    max-height: 340px;
    overflow: auto;
    gap: 8px;
    padding-right: 4px;
}

.compressVideo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #d2dbd8;
    border-radius: 7px;
    background: #f8fbfa;
}

.compressVideo.needs {
    border-color: #d9ad28;
    background: #fff8df;
}

.compressVideo.ready {
    border-color: #1b8f76;
    background: #e9faf4;
}

.compressVideo span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.compressVideo strong,
.compressVideo em {
    overflow-wrap: anywhere;
}

.compressVideo em {
    color: #64736f;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.compressActions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.downloadManagerCard {
    margin-bottom: 16px;
}

#uploadForm {
    gap: 12px;
}

#uploadForm .adminHint,
#uploadForm .uploadVideoProbeStatus {
    margin-block: 0;
}

#uploadForm label {
    gap: 4px;
}

#uploadForm input,
#uploadForm select {
    min-height: 36px;
    padding-block: 6px;
}

.downloadList {
    display: grid;
    max-height: 520px;
    overflow: auto;
    gap: 10px;
    padding-right: 4px;
}

.downloadBrowser {
    display: grid;
    grid-template-columns: minmax(260px, 36%) 1fr;
    gap: 14px;
    min-height: 360px;
}

.uploadTargetPicker {
    display: grid;
    grid-template-columns: minmax(230px, 34%) 1fr;
    gap: 14px;
    align-items: start;
}

.folderParentLine {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
}

.folderParentLine label {
    margin: 0;
}

.folderParentLine button {
    min-height: 38px;
    white-space: nowrap;
}

.uploadTargetPicker > div {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.uploadTargetPicker > div > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10231f;
    font-size: 13px;
    font-weight: 950;
}

.uploadTargetPicker > div > strong b,
.uploadFileChoice span b,
#uploadForm > button span,
.uploadFilePanel > button span {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 999px;
    background: #0b7068;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.uploadFolderSelectFallback {
    display: none !important;
}

.uploadRootFolders,
.uploadFolderChildren {
    max-height: min(620px, 68vh);
}

.uploadFolderFiles {
    max-height: min(420px, 46vh);
}

.uploadFolderExistingFiles {
    max-height: min(240px, 28vh);
}

.uploadExistingFile {
    grid-template-columns: 52px minmax(0, 1fr);
    background: #fff;
}

.uploadFolderEmpty {
    margin: 0;
    padding: 12px;
    border-top: 1px solid #dbe4e1;
    background: #fff;
    color: #64736f;
    font-size: 12px;
    font-weight: 850;
}

.uploadUseFolder {
    border-top-color: #9ecfc5;
    background: #e4f5f0;
}

.uploadUseFolder span {
    background: #0b7068;
    color: #fff;
}

.uploadFolderHint {
    padding: 12px;
    border-top: 1px solid #dbe4e1;
    background: #fff8df;
    color: #5d4811;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.35;
}

.uploadFlowSteps,
.uploadChecklist {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.uploadFlowSteps span,
.uploadChecklist span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 9px;
    border: 1px solid #d2dbd8;
    border-radius: 7px;
    background: #f8fbfa;
    color: #64736f;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.uploadFlowSteps i,
.uploadChecklist i {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    background: #dbe4e1;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    line-height: 1;
}

.uploadFlowSteps span.isDone,
.uploadChecklist span.isDone {
    border-color: #91cfaa;
    background: #e8f8ee;
    color: #0f5b36;
}

.uploadFlowSteps span.isDone i,
.uploadChecklist span.isDone i {
    background: #11a05f;
    color: #fff;
}

.uploadFilePanel {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid #d2dbd8;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f6faf8);
    scroll-margin-top: 16px;
}

.uploadFilePanel.isHidden {
    display: none;
}

.uploadFileGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

#uploadForm .uploadFileChoice {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid #d2dbd8;
    border-radius: 8px;
    background: #fff;
}

.uploadFileChoice span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10231f;
    font-size: 13px;
    font-weight: 950;
}

#uploadForm .uploadFileChoice input[type="file"] {
    width: 100%;
    min-height: 42px;
    padding: 7px;
    border: 1px dashed #9bb1ab;
    border-radius: 8px;
    background: #f8fbfa;
    color: #10231f;
    font-size: 13px;
    font-weight: 850;
}

#uploadForm .uploadFileChoice input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: #0b7068;
    color: #fff;
    font-weight: 950;
    cursor: pointer;
}

#uploadForm .uploadFileChoice input[type="file"]::file-selector-button:hover {
    background: #064f4a;
}

.uploadVideoParts {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(246, 195, 67, .7);
    border-radius: 8px;
    background: #fffaf0;
}

.uploadVideoParts.isHidden {
    display: none;
}

.uploadVideoParts > strong {
    color: #10231f;
    font-size: 13px;
}

.uploadVideoParts > small {
    color: #52635f;
    font-weight: 800;
}

.uploadVideoPart {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px;
    border: 1px solid #e6ddd0;
    border-radius: 8px;
    background: #fff;
}

.uploadVideoPart span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f6c343;
    color: #10231f;
    font-weight: 950;
}

.uploadVideoPart b {
    min-width: 0;
    overflow: hidden;
    color: #10231f;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploadVideoPart em {
    color: #52635f;
    font-size: 12px;
    font-style: normal;
    font-weight: 850;
}

.uploadVideoPart button {
    min-height: 30px;
    padding: 5px 10px;
}

.uploadMuteOption {
    width: fit-content;
}

.uploadFilePanel > button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: start;
    min-height: 42px;
}

.uploadProgressPanel {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(11, 112, 104, .22);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(237,248,244,.98)),
        radial-gradient(circle at 8% 12%, rgba(246, 195, 67, .24), transparent 32%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78);
}

.uploadProgressPanel.isHidden,
.uploadCompleteNotice.isHidden {
    display: none;
}

.uploadProgressHead,
.uploadProgressStats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.uploadProgressHead strong {
    color: #10231f;
    font-size: 14px;
    font-weight: 950;
}

.uploadProgressHead span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #10231f;
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.uploadProgressTrack {
    height: 13px;
    overflow: hidden;
    border-radius: 999px;
    background: #dfe9e5;
}

.uploadProgressTrack i {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b7068, #14a37a, #f6c343);
    transition: width .16s ease;
}

.uploadProgressStats span {
    color: #53655f;
    font-size: 12px;
    font-weight: 900;
}

.uploadCompleteNotice {
    display: grid;
    gap: 3px;
    padding: 13px 14px;
    border: 1px solid rgba(17, 160, 95, .35);
    border-left: 5px solid #11a05f;
    border-radius: 8px;
    background: #e8f8ee;
    color: #0f5b36;
}

.uploadCompleteNotice strong {
    font-size: 14px;
    font-weight: 950;
}

.uploadCompleteNotice span {
    font-size: 13px;
    font-weight: 800;
}

.downloadBrowser > div {
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
}

.downloadFolders {
    display: grid;
    max-height: 520px;
    overflow: auto;
    gap: 6px;
    padding-right: 4px;
}

.downloadFolderButton {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid #d2dbd8;
    border-radius: 6px;
    background: #f8fbfa;
    color: #10231f;
    font-size: 12px;
    font-weight: 850;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.downloadFolderButton:hover,
.downloadFolderButton.isActive {
    border-color: #0b7068;
    background: #0b7068;
    color: #fff;
}

.downloadFolderButton.isActive {
    box-shadow: 0 0 0 2px rgba(11, 112, 104, 0.28);
}

.uploadRootFolders .downloadFolderButton.isActive,
.downloadFolders .downloadFolderButton.isActive {
    border-color: #064f4a;
    background: #0b7068 !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(11, 112, 104, 0.36);
}

.downloadFolderFiles {
    border: 1px solid #d2dbd8;
    border-radius: 8px;
    background: #f8fbfa;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(620px, 62vh);
    scrollbar-gutter: stable;
}

.downloadFolderFiles header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #eaf2ef;
    position: sticky;
    top: 0;
    z-index: 1;
}

.downloadFolderFiles header.selectedFolderHeader {
    border: 1px solid #0b7068;
    box-shadow: inset 0 0 0 1px rgba(11, 112, 104, 0.25);
}

.downloadFolderFiles header strong {
    overflow-wrap: anywhere;
}

.downloadFolderFiles header span {
    color: #64736f;
    font-size: 12px;
    font-weight: 900;
}

.downloadChildFolder {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid #dbe4e1;
    background: #fff;
    color: #10231f;
    text-align: left;
    cursor: pointer;
}

.downloadChildFolder:hover {
    border-top-color: #0b7068;
    background: #0b7068;
    color: #fff;
}

.downloadChildFolder.isActive {
    position: relative;
    z-index: 0;
    background: #e4f5f0;
    color: #10231f;
    box-shadow: inset 0 0 0 2px #0b7068;
}

.downloadChildFolder span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 6px;
    background: #eaf2ef;
    color: #0b7068;
    font-weight: 950;
}

.downloadChildFolder:hover span {
    background: #064f4a;
    color: #fff;
}

.downloadChildFolder strong {
    overflow-wrap: anywhere;
    font-size: 13px;
}

.downloadChildFolder.up {
    background: #fff8df;
    color: #10231f;
}

.downloadChildFolder.up:hover {
    border-top-color: #d9ad28;
    background: #ffe9a8;
    color: #10231f;
}

.downloadChildFolder.up:hover span {
    background: #10231f;
    color: #fff;
}

.downloadFolder {
    border: 1px solid #d2dbd8;
    border-radius: 8px;
    background: #f8fbfa;
    overflow: hidden;
}

.downloadFolder summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #eaf2ef;
    cursor: pointer;
}

.downloadFolder summary strong {
    overflow-wrap: anywhere;
}

.downloadFolder summary span {
    color: #64736f;
    font-size: 12px;
    font-weight: 900;
}

.downloadFile {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-top: 1px solid #dbe4e1;
}

.downloadType {
    display: grid;
    height: 32px;
    place-items: center;
    border-radius: 6px;
    background: #10231f;
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.downloadFile strong,
.downloadFile small {
    display: block;
    overflow-wrap: anywhere;
}

.downloadFile small {
    color: #64736f;
    font-size: 12px;
    font-weight: 800;
}

.downloadFile a {
    display: inline-grid;
    min-height: 32px;
    place-items: center;
    padding: 0 12px;
    border-radius: 6px;
    background: #0b7068;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
}

.downloadFileActions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.downloadFileActions a,
.downloadPreviewButton {
    display: inline-grid;
    min-height: 32px;
    place-items: center;
    padding: 0 12px;
    border: 1px solid #0b7068;
    border-radius: 6px;
    background: #0b7068;
    color: #fff;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.downloadFileActions a:hover,
.downloadFileActions a:focus-visible,
.downloadPreviewButton:hover,
.downloadPreviewButton:focus-visible {
    background: #064f4a;
    border-color: #064f4a;
    color: #fff;
    text-decoration: none;
    outline: none;
}

.downloadPreviewModal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
}

.downloadPreviewModal.isHidden {
    display: none;
}

.downloadPreviewBackdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 12, 10, 0.72);
}

.downloadPreviewDialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    width: min(1100px, 94vw);
    max-height: 92vh;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: #0b1412;
    color: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

.downloadPreviewDialog header,
.downloadPreviewDialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.downloadPreviewDialog header small {
    display: block;
    color: #a9bbb6;
    font-weight: 800;
}

.downloadPreviewDialog video {
    width: 100%;
    max-height: 72vh;
    background: #000;
    border-radius: 6px;
}

.downloadPreviewDialog button,
.downloadPreviewDialog a {
    display: inline-grid;
    min-height: 34px;
    place-items: center;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    background: #0b7068;
    color: #fff;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

#downloadPreviewClose {
    min-width: 34px;
    padding: 0;
    background: #24332f;
    font-size: 22px;
}

@media (max-width: 780px) {
    .adminGrid,
    .adminHead,
    .adminChoiceGrid {
        grid-template-columns: 1fr;
        display: grid;
    }

    .downloadFile {
        grid-template-columns: 44px 1fr;
    }

    .downloadBrowser {
        grid-template-columns: 1fr;
    }

    .downloadFileActions {
        grid-column: 2;
        justify-self: start;
    }

    .uploadManagerGrid #folderForm {
        grid-template-columns: 1fr;
    }

    .uploadManagerGrid #folderForm h2 {
        grid-column: auto;
    }

    .compressionPolicyGrid {
        grid-template-columns: 1fr;
    }
}




/* v396 console layering */
.matchPicker:not(.isCollapsed) {
    position: relative;
    z-index: 120;
}

#filterBody:not(.isCollapsed) {
    position: relative;
    z-index: 120;
}


/* v399: direct close buttons for Matches and Video filters panels. */
.panelCloseButton {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #0f241f;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}
.panelCloseButton:hover {
    background: #000;
    color: #fff;
}
.matchPickerHead .panelCloseButton {
    margin-left: auto;
    flex: 0 0 auto;
}
.topFilterPanelHead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
    margin: -2px 0 2px;
}
.topFilterPanelHead strong {
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}


/* v406 attack-code converter */
.attackConvertForm {
    width: min(1080px, calc(100vw - 32px)) !important;
    max-height: min(88vh, 900px);
}
.attackConvertHint {
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #d5e2dd;
    border-radius: 7px;
    background: #f6faf8;
    color: #435650;
    font-size: 12px;
    font-weight: 700;
}
.attackConvertHeader,
.attackConvertRow {
    display: grid;
    grid-template-columns: minmax(210px, 1.3fr) minmax(92px, .45fr) minmax(260px, 1.45fr) minmax(90px, .45fr);
    gap: 10px;
    align-items: center;
}
.attackConvertHeader {
    padding: 0 10px;
    color: #65756f;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.attackConvertRows {
    display: grid;
    gap: 7px;
    max-height: 58vh;
    overflow: auto;
    padding-right: 4px;
}
.attackConvertRow {
    padding: 9px 10px;
    border: 1px solid #d9e4e0;
    border-radius: 8px;
    background: #fbfdfc;
}
.attackConvertRow.hasMismatch {
    border-color: #e0bd61;
    background: #fffaf0;
}
.attackConvertSource,
.attackConvertUsage {
    display: grid;
    gap: 2px;
}
.attackConvertSource strong {
    color: #10231f;
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
}
.attackConvertSource small,
.attackConvertUsage small {
    color: #71817b;
    font-size: 10px;
}
.attackConvertUsage {
    justify-items: center;
    text-align: center;
}
.attackConvertUsage strong {
    color: #10231f;
    font-size: 18px;
}
.attackConvertWarning,
.attackConvertKnown {
    width: fit-content;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}
.attackConvertWarning {
    background: #f3d273;
    color: #4b3700;
}
.attackConvertKnown {
    background: #e3eee9;
    color: #315249;
}
.attackConvertEmpty {
    padding: 30px;
    border: 1px dashed #cbd9d4;
    border-radius: 8px;
    color: #65756f;
    text-align: center;
}
@media (max-width: 760px) {
    .attackConvertHeader { display: none; }
    .attackConvertRow { grid-template-columns: 1fr 100px; }
    .attackConvertRow .attackConvertCombo { grid-column: 1 / -1; }
}
@media print {
    #attackConvertDialog { display: none !important; }
}


/* v408: readable hover states and non-clickable brand. */
.analysisStartChoice:hover,
.analysisStartChoice:focus-visible {
    background: #f3f8f6 !important;
    color: #10231f !important;
    border-color: #0f4f49 !important;
}
.analysisStartChoice:hover strong,
.analysisStartChoice:focus-visible strong {
    color: #10231f !important;
}
.analysisStartChoice:hover small,
.analysisStartChoice:focus-visible small {
    color: #526a63 !important;
}
.analysisStartChoice:hover .analysisStartIcon,
.analysisStartChoice:focus-visible .analysisStartIcon {
    background: #10231f !important;
    color: #fff !important;
}

.keyboardTabs button:hover,
.keyboardTabs button:focus-visible {
    background: #10231f !important;
    color: #fff !important;
    border-color: #10231f !important;
}
.keyboardTabs button.isActive,
.keyboardTabs button.isActive:hover,
.keyboardTabs button.isActive:focus-visible {
    background: #10231f !important;
    color: #fff !important;
}

.brandStatic {
    cursor: default;
    user-select: none;
}
.brandStatic:hover {
    color: #fff !important;
}


/* v414: fixed application chrome + responsive right scouting workspace. */
:root { --karakashkov-topbar-height: 72px; }

.shell {
    padding-top: calc(var(--karakashkov-topbar-height) + 18px);
}

.topbar {
    position: fixed;
    top: 8px;
    left: 50%;
    z-index: 2500;
    width: min(1600px, calc(100vw - 32px));
    margin: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
    backdrop-filter: blur(12px);
}

.topbar h1 { font-size: 19px; letter-spacing: .1px; }
.brandLink { white-space: nowrap; }

.actionsPanel {
    container-type: inline-size;
    container-name: scout-actions;
}

.scoutLineupCourt {
    grid-template-columns: minmax(76px, 1fr) minmax(132px, 158px) minmax(76px, 1fr);
    justify-content: center;
}

.lineupCourtGrid {
    width: min(100%, 158px);
    aspect-ratio: 158 / 212;
    grid-template-rows: repeat(4, minmax(32px, 48px));
}

/* Medium right panel: preserve roster numbers, reduce text and scale controls. */
@container scout-actions (max-width: 620px) {
    .scoutLineupCourt {
        grid-template-columns: minmax(62px, .72fr) minmax(126px, 148px) minmax(62px, .72fr);
        gap: 4px;
        padding-left: 36px;
    }
    .scoutTeamList { font-size: 9px; }
    .scoutTeamList b { font-size: 12px; padding-inline: 3px; }
    .scoutTeamList > .courtRosterPlayer {
        min-height: 14px;
        font-size: 8.5px;
    }
    .courtRosterNumber { font-size: 9.5px; }
    .courtRosterName { font-size: 7.8px; }
    .teamCourtControls { grid-template-columns: repeat(4, 29px); gap: 2px; }
    .teamCourtControls button,
    .teamCourtControls strong { width: 29px; height: 29px; font-size: 14px; }
    .teamCourtMeta button { min-width: 27px; min-height: 22px; font-size: 10px; }
    .lineupCourtGrid { width: 142px; grid-template-rows: repeat(4, 42px); }
    .lineupPlayer { width: 31px; height: 31px; font-size: 13px; }
    .courtCenterScore strong { font-size: 20px; }
}

/* Narrow panel: court + score are the priority. Hide roster columns completely
   and keep the court centered instead of squeezing it off-screen. */
@container scout-actions (max-width: 470px) {
    .scoutLineupCourt {
        position: relative;
        display: grid;
        grid-template-columns: minmax(54px, .7fr) minmax(112px, 132px) minmax(54px, .7fr);
        align-items: start;
        justify-items: stretch;
        gap: 3px;
        padding: 38px 4px 8px 34px;
        overflow-x: hidden;
    }
    .scoutTeamList {
        display: block;
        min-width: 0;
        overflow: hidden;
        font-size: 7.6px;
    }
    .scoutTeamList > b {
        font-size: 9px;
        line-height: 1.05;
        padding: 3px 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .scoutTeamList > .courtRosterPlayer {
        min-width: 0;
        min-height: 13px;
        gap: 2px;
    }
    .courtRosterNumber { font-size: 8.8px; }
    .courtRosterName { font-size: 6.9px; }
    .scoutTeamList .liberoMark { font-size: 7px; }
    .teamCourtControls {
        grid-template-columns: repeat(4, minmax(20px, 1fr));
        gap: 1px;
    }
    .teamCourtControls button,
    .teamCourtControls strong {
        width: auto;
        min-width: 20px;
        height: 23px;
        font-size: 10px;
    }
    .teamCourtMeta {
        font-size: 8px !important;
        gap: 1px !important;
        padding: 2px !important;
    }
    .teamCourtMeta button {
        min-width: 23px;
        min-height: 19px;
        font-size: 8px;
    }
    .scoutLineupCourt > .courtCenterScore { display: none; }
    .lineupCourtGrid {
        grid-column: 2;
        width: min(128px, 100%);
        max-width: 128px;
        margin: 20px auto 23px;
        grid-template-rows: repeat(4, clamp(28px, 9cqw, 39px));
        justify-self: center;
    }
    .lineupCourtGrid > .courtCenterScore {
        display: grid;
        top: -43px;
        min-width: 98px;
    }
    .lineupPlayer {
        width: clamp(27px, 9cqw, 34px);
        height: clamp(27px, 9cqw, 34px);
        font-size: clamp(11px, 4cqw, 14px);
    }
    .courtGridFlip { left: -32px; width: 26px; height: 26px; }
    .serviceSpot.topServe::before { left: 21px; }
    .serviceSpot.bottomServe::before { right: 21px; }
    .tableWrap table { font-size: 10px; }
    .tableWrap th, .tableWrap td { padding-inline: 4px; }
}

/* Very narrow code area: retain the operational columns and hide secondary data. */
@container scout-actions (max-width: 390px) {
    .tableWrap th:nth-child(3), .tableWrap td:nth-child(3),
    .tableWrap th:nth-child(6), .tableWrap td:nth-child(6) { display: none; }
    .lineupCourtGrid { width: min(136px, calc(100cqw - 24px)); }
}

@media (max-width: 900px) {
    .topbar { width: calc(100vw - 16px); top: 4px; padding: 9px 10px; gap: 10px; }
    .topbar h1 { font-size: 17px; }
    .summary { gap: 6px; }
}

.shell:fullscreen { padding-top: calc(var(--karakashkov-topbar-height) + 18px); }
.shell:fullscreen .topbar {
    position: fixed;
    top: 6px;
    width: calc(100vw - 24px);
}

@media print {
    .shell { padding-top: 0 !important; }
    .topbar { position: static !important; transform: none !important; }
}


/* v415: Flip court swaps the complete visual team side, not only the six players. */
.scoutTeamList.visualLeft { text-align: left; }
.scoutTeamList.visualRight { text-align: right; }
.scoutTeamList.visualLeft .teamCourtMeta { text-align: center; }
.scoutTeamList.visualRight .teamCourtMeta { text-align: center; }


/* v417: roster identity is always readable — full number + libero mark + compact name. */
.scoutTeamList > .courtRosterPlayer {
    display: flex;
    align-items: baseline;
    gap: 3px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    color: #53615e;
    line-height: 1.08;
}
.scoutTeamList.visualRight > .courtRosterPlayer {
    justify-content: flex-end;
}
.scoutTeamList.visualLeft > .courtRosterPlayer {
    justify-content: flex-start;
}
.courtRosterNumber {
    flex: 0 0 auto;
    min-width: 1.6em;
    color: #10231f;
    font-size: .96em;
    font-weight: 1000;
    text-align: right;
}
.scoutTeamList .liberoMark,
.scoutTeamList .setterMark,
.scoutTeamList .captainMark {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    min-width: 12px;
    height: 12px;
    margin: 0;
    padding: 0 2px;
    border-radius: 3px;
    background: #0f766e;
    color: #fff;
    font-size: 8px;
    font-weight: 1000;
    line-height: 1;
}
.scoutTeamList .setterMark { background: #b45309; }
.scoutTeamList .captainMark { background: #7c3aed; }
.courtRosterName {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82em;
    color: #53615e;
}
.scoutTeamList.visualRight .courtRosterName {
    flex: 0 1 auto;
}

/* Only at extremely tiny widths do we shorten the name further; the number and L never disappear. */
@container scout-actions (max-width: 360px) {
    .scoutLineupCourt {
        grid-template-columns: minmax(48px, .7fr) minmax(104px, 118px) minmax(48px, .7fr);
        padding-left: 31px;
    }
    .courtRosterNumber { font-size: 8px; }
    .courtRosterName { font-size: 6.2px; }
    .scoutTeamList .liberoMark,
    .scoutTeamList .setterMark,
    .scoutTeamList .captainMark {
        min-width: 10px;
        height: 10px;
        padding-inline: 1px;
        font-size: 6.5px;
    }
    .lineupCourtGrid { width: 116px; }
}


/* v418: live-scout score and side markers stay visible at every panel width. */
.scoutLineupCourt {
    position: relative;
    padding-top: 42px;
}
.scoutLineupCourt > .courtCenterScore.courtPanelScore {
    display: grid !important;
    top: 4px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 12;
    cursor: pointer;
}
.lineupCourtGrid > .courtCenterScore {
    display: none !important;
}
.serviceSpot::before {
    z-index: 8;
    min-width: 16px;
    padding: 1px 3px;
    border-radius: 4px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 1px 3px rgba(0,0,0,.14);
    text-align: center;
}
@container scout-actions (max-width: 620px) {
    .scoutLineupCourt {
        padding-top: 39px;
    }
    .scoutLineupCourt > .courtCenterScore.courtPanelScore {
        top: 3px !important;
        min-width: 96px;
    }
    .courtPanelScore strong { font-size: 18px; }
    .courtPanelScore small { font-size: 8.5px; }
    .serviceSpot.topServe::before { left: 26px; }
    .serviceSpot.bottomServe::before { right: 26px; }
}
@container scout-actions (max-width: 470px) {
    .scoutLineupCourt {
        padding-top: 39px !important;
    }
    .scoutLineupCourt > .courtCenterScore {
        display: grid !important;
    }
    .lineupCourtGrid > .courtCenterScore {
        display: none !important;
    }
    .serviceSpot.topServe::before { left: 22px; }
    .serviceSpot.bottomServe::before { right: 22px; }
    .serviceSpot::before {
        font-size: 15px;
        min-width: 13px;
        padding-inline: 2px;
    }
}


/* v418: IP camera streaming controls. */
.videoSourceButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.videoSourceButtons button {
    min-width: 120px;
}
#ipCamButton {
    background: #10231f;
    color: #fff;
}
.ipCamForm {
    width: min(760px, calc(100vw - 28px)) !important;
}
.ipCamGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 18px 4px;
}
.ipCamGrid label {
    display: grid;
    gap: 5px;
    color: #10231f;
    font-weight: 900;
}
.ipCamGrid input,
.ipCamGrid select {
    width: 100%;
    min-width: 0;
}
.ipCamUrlField {
    grid-column: 1 / -1;
}
.ipCamUrlField small {
    color: #64736f;
    font-size: 11px;
    font-weight: 700;
}
.ipCamStatus {
    margin: 10px 18px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #eef7f3;
    color: #27443d;
    font-size: 12px;
    font-weight: 800;
}
@media (max-width: 680px) {
    .ipCamGrid { grid-template-columns: 1fr; }
    .ipCamUrlField { grid-column: 1; }
}


/* v420: direct camera viewer. */
.ipCamImage {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(68vh, 760px);
    object-fit: contain;
    background: #000;
}
.ipCamImage.isHidden {
    display: none !important;
}
.ipCamEngineOnly {
    opacity: .46;
    pointer-events: none;
}
#ipCamUrl {
    font-family: Consolas, "Courier New", monospace;
}


/* v421: Chrome RTSP bridge player (go2rtc MSE/WebRTC). */
.ipCamBridgeFrame {
    display: block;
    width: 100%;
    min-height: 420px;
    height: min(68vh, 760px);
    border: 0;
    background: #000;
}
.ipCamBridgeFrame.isHidden {
    display: none !important;
}
@media (max-width: 900px) {
    .ipCamBridgeFrame {
        min-height: 300px;
        height: 52vh;
    }
}


/* v422: localhost bridge control without cross-origin fetch. */
.ipCamBridgeControlFrame {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    left: -10000px !important;
    top: -10000px !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.ipCamBridgeTools {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 18px 10px;
}
.ipCamBridgeTools button {
    flex: 0 0 auto;
}
.ipCamBridgeTools small {
    color: #64736f;
    font-size: 11px;
    font-weight: 700;
}


/* v424: Local RTSP DVR. The actual video/DVR controls are served by the local helper. */
.ipCamBridgeFrame {
    min-height: 460px;
}
.ipCamForm #ipCamDelay,
.ipCamForm #ipCamBuffer {
    font-weight: 800;
}

/* v429: unified modal spacing + video/IP source chooser + split New Match workspace. */
:root {
    --karakashkov-modal-gap: 16px;
}

/* All application dialogs start below the fixed top bar instead of hiding under it. */
.newMatchDialog,
.syncDialog,
.exportOverlay {
    top: calc(var(--karakashkov-topbar-height) + var(--karakashkov-modal-gap) + 8px);
    right: 8px;
    bottom: 8px;
    left: 8px;
    z-index: 9500;
    max-height: calc(100vh - var(--karakashkov-topbar-height) - var(--karakashkov-modal-gap) - 16px);
}

.toast {
    top: calc(var(--karakashkov-topbar-height) + var(--karakashkov-modal-gap) + 10px);
    z-index: 9700;
}

/* Makes every X button anchor to the actual dialog card. */
.newMatchDialog form,
.syncDialog > div,
.exportOverlay > div {
    position: relative;
}

.newMatchDialog form {
    max-height: 100%;
}

.newMatchHead {
    position: relative;
    padding-right: 38px;
}

.newMatchHead > .exportStatusClose,
.modifyCodeTitle > .exportStatusClose {
    top: 0;
    right: 0;
}

/* One consistent source chooser used by Change video and New match. */
/* v431: make the video-source chooser header readable on the dark UI. */
.mediaSourceDialog .newMatchHead {
    margin: -22px -22px 0;
    padding: 18px 58px 18px 22px;
    border-radius: 10px 10px 0 0;
    background: #10231f;
}

.mediaSourceDialog #mediaSourceTitle,
.mediaSourceDialog #mediaSourceText,
.mediaSourceDialog .eyebrow {
    color: #ffffff;
}

.mediaSourceDialog .newMatchHead > .exportStatusClose {
    top: 12px;
    right: 14px;
    color: #ffffff;
}

.mediaSourceDialog {
    z-index: 2920;
}

.mediaSourceDialog .mediaSourceCard {
    width: min(980px, calc(100vw - 40px));
    overflow: visible;
    padding: 22px;
}

.mediaSourceChoices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

@media (max-width: 860px) {
    .mediaSourceChoices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .mediaSourceChoices {
        grid-template-columns: 1fr;
    }
}

.mediaSourceChoice {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon title"
        "icon text";
    align-items: center;
    gap: 4px 12px;
    min-height: 112px;
    padding: 18px;
    border: 1px solid #c7d8d2;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #f1f7f5);
    color: #10231f;
    text-align: left;
    cursor: pointer;
}

.mediaSourceChoice:hover,
.mediaSourceChoice:focus-visible {
    border-color: #0f766e;
    background: #e9f5f2;
    box-shadow: 0 12px 28px rgba(15, 118, 110, .14);
}

.mediaSourceIcon {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #10231f;
    color: #fff;
    font-size: 27px;
}

.mediaSourceChoice strong {
    grid-area: title;
    font-size: 18px;
}

.mediaSourceChoice small {
    grid-area: text;
    color: #5f6f69;
    line-height: 1.35;
}

/* New Match becomes a two-pane workspace: live/video reference left, lineup form right. */
#newMatchDialog {
    place-items: stretch;
    padding: 10px;
    background: rgba(7, 15, 13, .38);
    backdrop-filter: blur(3px);
}

.newMatchSplit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, .96fr);
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.newMatchPreviewPane {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background: #06100e;
    box-shadow: 0 24px 70px rgba(0,0,0,.26);
}

.newMatchPreviewHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 13px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, #10231f, #081511);
    color: #fff;
}

.newMatchPreviewHead .eyebrow {
    margin-bottom: 2px;
}

.newMatchPreviewHead strong {
    font-size: 17px;
}

.newMatchPreviewHead button {
    min-height: 32px;
    padding: 6px 10px;
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.1);
    color: #fff;
}

.newMatchPreviewHead button:hover {
    background: #fff;
    color: #10231f;
}

.newMatchPreviewStage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    background: #020807;
}

.newMatchPreviewStage video,
.newMatchPreviewStage img,
.newMatchPreviewStage iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    background: #000;
    object-fit: contain;
}

.newMatchPreviewStage iframe {
    display: block;
}

.newMatchPreviewStage .isHidden {
    display: none !important;
}

.newMatchPreviewEmpty {
    display: grid;
    justify-items: center;
    gap: 8px;
    max-width: 420px;
    padding: 28px;
    color: #d9eee8;
    text-align: center;
}

.newMatchPreviewEmpty > span {
    font-size: 42px;
}

.newMatchPreviewEmpty small {
    color: #93aaa2;
    line-height: 1.45;
}

#newMatchDialog #newMatchForm {
    width: 100%;
    max-width: none;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    border-radius: 10px;
}

#newMatchForm .newMatchGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#newMatchForm .newMatchVideoSource {
    grid-column: 1 / -1;
}

#newMatchForm .starterGrid {
    gap: 10px;
}

#newMatchForm .starterGrid section {
    min-width: 0;
    padding: 10px;
}

#newMatchForm .starterCourtEditor {
    grid-template-columns: repeat(3, minmax(54px, 1fr));
    gap: 6px !important;
    padding: 10px;
}

/* Dialogs with a small card keep enough space for the top-right close button. */
.syncDialog > div,
.exportOverlay > div {
    padding-top: 28px;
}

@media (max-width: 1180px) {
    .newMatchSplit {
        grid-template-columns: minmax(0, .82fr) minmax(520px, 1fr);
    }
    #newMatchForm .starterGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    :root { --karakashkov-modal-gap: 12px; }
    .newMatchDialog,
    .syncDialog,
    .exportOverlay {
        top: calc(var(--karakashkov-topbar-height) + var(--karakashkov-modal-gap) + 4px);
        right: 4px;
        bottom: 4px;
        left: 4px;
        max-height: calc(100vh - var(--karakashkov-topbar-height) - var(--karakashkov-modal-gap) - 8px);
    }
    .newMatchSplit {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, 38vh) minmax(0, 1fr);
        overflow: auto;
    }
    .mediaSourceChoices {
        grid-template-columns: 1fr;
    }
    #newMatchForm .newMatchGrid,
    #newMatchForm .starterGrid {
        grid-template-columns: 1fr;
    }
    .uploadFlowSteps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .uploadFileGrid {
        grid-template-columns: 1fr;
    }
    .uploadTargetPicker {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

/* v430 DirectShow USB camera source. */
.usbCamForm .usbCamDeviceField {
    grid-column: 1 / -1;
}
.usbCamForm #usbCamDevice,
.usbCamForm #usbCamMode {
    width: 100%;
}
@media (max-width: 820px) {
    .mediaSourceChoices { grid-template-columns: 1fr; }
}

/* v442 production diagnostics. */
.diagnosticsShell {
    max-width: 1180px;
}

.diagnosticsCard {
    width: 100%;
}

.diagnosticsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
    margin: 0;
}

.diagnosticsGrid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,.82);
}

.diagnosticsGrid dt {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.diagnosticsGrid dd {
    margin: 0;
    color: var(--ink);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.backupRestoreCard {
    grid-column: 1 / -1;
}

.backupHead,
.backupSettingsGrid,
.backupStatsGrid {
    display: grid;
    gap: 10px;
}

.backupHead {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.backupSettingsGrid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: end;
    margin: 12px 0;
}

.backupSettingsGrid button,
.backupCreateButton,
.backupTable button {
    min-height: 34px;
}

.backupStatus {
    margin: 10px 0;
    font-weight: 850;
    color: var(--ink);
}

.backupStatsGrid {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin: 12px 0;
}

.backupStatsGrid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255,255,255,.82);
    padding: 10px 12px;
}

.backupStatsGrid dt {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.backupStatsGrid dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-weight: 900;
}

.backupTableWrap {
    overflow-x: auto;
    margin-top: 12px;
}

.backupTable {
    width: 100%;
    border-collapse: collapse;
    color: var(--ink);
}

.backupTable th,
.backupTable td {
    border-bottom: 1px solid var(--line);
    padding: 9px 10px;
    text-align: left;
    vertical-align: middle;
}

.backupTable th {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--muted);
}

.backupTable td:last-child {
    white-space: nowrap;
}

.backupOk {
    color: #057a55;
    font-weight: 950;
}

.backupWarn {
    color: #b45309;
    font-weight: 950;
}

/* Strong selected state for Upload/Download root folders. Keep this late so it wins over generic button styles. */
.uploadRootFolders button.downloadFolderButton.isActive,
.downloadFolders button.downloadFolderButton.isActive {
    border: 3px solid #064f4a !important;
    background: #f6c343 !important;
    color: #10231f !important;
    box-shadow:
        0 0 0 3px rgba(246, 195, 67, 0.92),
        0 8px 18px rgba(11, 112, 104, 0.22) !important;
    font-weight: 950 !important;
}

.uploadRootFolders button.downloadFolderButton.isActive:hover,
.downloadFolders button.downloadFolderButton.isActive:hover {
    border-color: #042f2c !important;
    background: #ffd86b !important;
    color: #10231f !important;
}

.downloadChildFolder.isActive {
    background: #f6c343 !important;
    color: #10231f !important;
    box-shadow:
        inset 0 0 0 2px #064f4a,
        0 0 0 3px rgba(246, 195, 67, 0.72) !important;
}

.downloadChildFolder.isActive span {
    background: #10231f !important;
    color: #fff !important;
}

/* Final start-screen override: hide the empty analysis workspace and keep the start choices premium. */
.shell.analysisEmptyMode .workspace,
.shell.analysisEmptyMode #reportBoard,
.shell.analysisEmptyMode #filterBody {
    display: none !important;
}

.shell.analysisEmptyMode .analysisStartPanel:not(.isHidden) {
    display: grid !important;
}

.shell.analysisEmptyMode #matchPicker:not(.isCollapsed) {
    display: block;
    position: relative;
    z-index: 95;
    width: min(1600px, calc(100vw - 32px));
    margin: 0 auto 14px;
    border-color: rgba(246, 195, 67, 0.72);
    box-shadow: 0 18px 46px rgba(16, 35, 31, 0.18);
}

.shell.analysisEmptyMode .analysisStartChoice:hover,
.shell.analysisEmptyMode .analysisStartChoice:focus-visible {
    background: #f6c343 !important;
    color: #10231f !important;
    border-color: #0b7068 !important;
}

.shell.analysisEmptyMode .analysisStartChoice:hover small,
.shell.analysisEmptyMode .analysisStartChoice:focus-visible small {
    color: #10231f !important;
}

body.analysisEmptyMode #scoutConsole {
    display: none !important;
}

.poweredFooter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 14px;
    background: rgba(16, 35, 31, 0.97);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: .02em;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .16);
}

.poweredFooter:hover,
.poweredFooter:focus-visible {
    background: #f6c343;
    color: #10231f;
    text-decoration: none;
}

.shell,
.adminShell,
.authShell {
    padding-bottom: max(42px, env(safe-area-inset-bottom));
}

/* v445.2.67: one-time Local Camera Helper Setup.exe activation on any Windows scouting PC. */
.localCameraHelperCard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 18px 10px;
    padding: 12px 13px;
    border: 1px solid #ccd7d3;
    border-radius: 8px;
    background: #f6f9f8;
    color: #18342d;
}
.localCameraHelperCard > div:first-child {
    display: grid;
    gap: 4px;
    min-width: 0;
}
.localCameraHelperCard strong {
    font-size: 13px;
    font-weight: 900;
}
.localCameraHelperCard small {
    color: #64736f;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}
.localCameraHelperCard[data-state="ready"] {
    border-color: #9bcdb9;
    background: #edf9f3;
}
.localCameraHelperCard[data-state="missing"] {
    border-color: #e1b4b4;
    background: #fff2f2;
}
.localCameraHelperCard[data-state="warning"] {
    border-color: #e2c88f;
    background: #fff9e8;
}
.localCameraHelperActions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.localCameraHelperActions .buttonLike {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 6px;
    background: #10231f;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
@media (max-width: 680px) {
    .localCameraHelperCard,
    .localCameraHelperActions {
        align-items: stretch;
        flex-direction: column;
    }
.localCameraHelperActions .buttonLike,
    .localCameraHelperActions button {
        width: 100%;
    }
}

/* v445.2.81: Magic Analysis Bulgarian report polish. */
.magicTopButton {
    position: relative;
    overflow: hidden;
    border-color: #f6c343 !important;
    background: linear-gradient(135deg, #10231f 0%, #0b7068 52%, #f6c343 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px rgba(246, 195, 67, .24), 0 10px 26px rgba(11, 112, 104, .24) !important;
}

.magicTopButton::after {
    content: "";
    position: absolute;
    inset: -40% auto -40% -70%;
    width: 42%;
    transform: rotate(18deg);
    background: rgba(255, 255, 255, .42);
    transition: left .32s ease;
}

.magicTopButton:hover::after,
.magicTopButton:focus-visible::after {
    left: 128%;
}

.magicTopButton:hover,
.magicTopButton:focus-visible {
    background: #f6c343 !important;
    color: #10231f !important;
}

.magicPrintTitle {
    display: none;
}

.magicBrandLine,
.magicPrintFooter {
    color: #0f172a;
    font-weight: 800;
    letter-spacing: 0;
}

.magicPrintFooter {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid rgba(15, 23, 42, 0.16);
    text-align: center;
}

.magicCoachText p {
    margin: 0;
    color: #223d37;
    font-weight: 800;
    line-height: 1.5;
}

.magicCoachClaims {
    margin: 12px 0 0;
    padding-left: 22px;
}

.magicCoachClaims li {
    margin: 7px 0;
    color: #10231f;
    font-weight: 760;
    line-height: 1.45;
}

.magicAllFindings .magicInsight {
    border-left: 4px solid #f6c343;
}

.magicInsight > div,
.magicPlanItem > div {
    min-width: 0;
}

@media print {
    .magicAnalysisHead > div:last-child,
    .magicSetup,
    .magicMatchList,
    .magicInsight button,
    .magicPlanItem button {
        display: none !important;
    }

    .magicPrintTitle {
        display: block;
        padding-bottom: 14px;
        border-bottom: 2px solid #10231f;
    }

    .magicPrintTitle h2 {
        margin: 0;
        color: #10231f;
    }

    .magicSection,
    .magicInsight,
    .magicPlanItem {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}