.abt-posting-panel .abt-upload-slot {
    display: block;
    margin: 0 0 8px;
}

.abt-posting-panel .abt-upload-slot label {
    display: block;
    font-weight: bold;
    margin: 0 0 3px;
}

.abt-posting-panel .abt-upload-slot input {
    display: block;
    margin: 0 0 6px;
    max-width: 100%;
}

.abt-posting-panel .abt-upload-slot input[type="radio"] {
    display: inline-block;
    margin: 0 5px 0 0;
}

.abt-posting-panel .abt-upload-slot label:last-child {
    display: inline-flex;
    font-weight: normal;
}

.abt-posting-panel.abt-dark-theme {
    color: #d9e2ea;
}

.abt-file-hint {
    color: #53616d;
    display: block;
    margin-top: 4px;
}

.abt-existing-files {
    display: grid;
    gap: 6px;
}

.abt-existing-file {
    align-items: center;
    background: #f3f6f8;
    border: 1px solid #d7dee4;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    max-width: 640px;
    padding: 6px 8px;
}

.abt-existing-file-marked {
    background: #fff1f1;
    border-color: #d98a8a;
}

.abt-delete-state {
    color: #a82a2a;
    font-weight: bold;
}

.abt-delete-file {
    color: #a82a2a;
    font-weight: bold;
}

.abt-admin-actions {
    border-top: 1px solid #d7dee4;
    margin-top: 12px;
    padding-top: 10px;
}

.abt-player {
    border: 1px solid #c7d0d7;
    border-radius: 6px;
    margin: 14px 0;
    padding: 12px;
    background: #f7f9fb;
}

.abt-player.abt-dark-theme {
    background: #1c2229;
    border-color: #3b4652;
    color: #d9e2ea;
}

.abt-player.abt-split-closed {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.abt-player.abt-split-closed .abt-summary-panel,
.abt-player.abt-split-closed .abt-playback-panel {
    background: #f7f9fb;
    border: 1px solid #c7d0d7;
    border-radius: 6px;
    padding: 12px;
}

.abt-player.abt-split-closed .abt-playback-panel {
    margin-top: 18px;
}

.abt-player.abt-split-closed.abt-dark-theme {
    background: transparent;
    border-color: transparent;
}

.abt-player.abt-split-closed.abt-dark-theme .abt-summary-panel,
.abt-player.abt-split-closed.abt-dark-theme .abt-playback-panel {
    background: #1c2229;
    border-color: #3b4652;
}

.abt-player [hidden] {
    display: none !important;
}

.abt-header {
    align-items: baseline;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.abt-header h3 {
    margin: 0;
}

.abt-header span {
    color: #53616d;
    font-size: 0.9em;
}

.abt-dark-theme .abt-header span,
.abt-dark-theme .abt-vote-count,
.abt-dark-theme .abt-results-total,
.abt-posting-panel.abt-dark-theme .abt-file-hint {
    color: #aebbc7;
}

.abt-description,
.abt-question,
.abt-vote-count {
    margin: 8px 0;
}

.abt-vote-count {
    color: #53616d;
    font-weight: bold;
}

.abt-planned-close {
    background: #edf5fb;
    border: 1px solid #bed6ea;
    border-radius: 6px;
    color: #245475;
    font-weight: bold;
    margin: 14px 0;
    padding: 10px 12px;
}

.abt-planned-close-passed {
    background: #fff4e8;
    border-color: #e5bc83;
    color: #7a4a12;
}

.abt-dark-theme .abt-planned-close,
.abt-planned-close.abt-dark-theme {
    background: #1d2a34;
    border-color: #38586f;
    color: #b8d8ef;
}

.abt-dark-theme .abt-planned-close-passed,
.abt-planned-close.abt-dark-theme.abt-planned-close-passed {
    background: #33281d;
    border-color: #76562b;
    color: #efd0a6;
}

.abt-status {
    margin: 10px 0;
}

.abt-progress {
    display: grid;
    gap: 5px;
    margin: 8px 0;
}

.abt-progress-row {
    background: #dfe7ee;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.abt-dark-theme .abt-progress-row {
    background: #303a44;
}

.abt-progress-row span {
    background: #2f7dbd;
    display: block;
    height: 100%;
    width: 0;
}


.abt-progress-complete .abt-progress-row span {
    box-shadow: 0 0 6px rgba(47, 125, 189, 0.35);
}

.abt-progress-compact {
    display: block;
    margin: 8px 0 10px;
}

.abt-progress-ready {
    background: linear-gradient(90deg, rgba(47, 125, 189, 0.35), rgba(47, 125, 189, 0.95), rgba(47, 125, 189, 0.35));
    border-radius: 999px;
    height: 2px;
    width: 100%;
}

.abt-dark-theme .abt-progress-ready {
    background: linear-gradient(90deg, rgba(91, 166, 224, 0.35), rgba(91, 166, 224, 0.95), rgba(91, 166, 224, 0.35));
}

.abt-controls,
.abt-switches,
.abt-loop {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
}

.abt-controls .abt-load {
    background: #c73030;
    background-image: none;
    border-color: #9f2424;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    color: #fff;
    font-weight: bold;
    padding-left: 14px;
    padding-right: 14px;
}

.abt-controls .abt-load:hover,
.abt-controls .abt-load:focus {
    background: #ad2828;
    background-image: none;
    border-color: #841d1d;
    color: #fff;
}

.abt-controls .abt-load:disabled {
    box-shadow: none;
    opacity: 0.7;
}

.abt-controls .button:not(.abt-load),
.abt-switches .button,
.abt-loop .button {
    background: #24834a;
    background-image: none;
    border-color: #1d683b;
    color: #fff;
    font-weight: bold;
    text-shadow: none;
}

.abt-controls .button:not(.abt-load):hover,
.abt-controls .button:not(.abt-load):focus,
.abt-switches .button:hover,
.abt-switches .button:focus,
.abt-loop .button:hover,
.abt-loop .button:focus {
    background: #1d6f3e;
    background-image: none;
    border-color: #165631;
    color: #fff;
}

.abt-switches .button.active {
    background: #145a32;
    background-image: none;
    border-color: #0f4325;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
    color: #fff;
}

.abt-controls .button:not(.abt-load):disabled,
.abt-switches .button:disabled,
.abt-loop .button:disabled,
.abt-controls .button:not(.abt-load):disabled:hover,
.abt-controls .button:not(.abt-load):disabled:focus,
.abt-switches .button:disabled:hover,
.abt-switches .button:disabled:focus,
.abt-loop .button:disabled:hover,
.abt-loop .button:disabled:focus,
.abt-switches .button.active:disabled {
    background: #b8c1c9;
    background-image: none;
    border-color: #9aa6b0;
    box-shadow: none;
    color: #edf2f5;
    cursor: not-allowed;
    opacity: 0.72;
}

.abt-dark-theme .abt-controls .button:not(.abt-load):disabled,
.abt-dark-theme .abt-switches .button:disabled,
.abt-dark-theme .abt-loop .button:disabled,
.abt-dark-theme .abt-controls .button:not(.abt-load):disabled:hover,
.abt-dark-theme .abt-controls .button:not(.abt-load):disabled:focus,
.abt-dark-theme .abt-switches .button:disabled:hover,
.abt-dark-theme .abt-switches .button:disabled:focus,
.abt-dark-theme .abt-loop .button:disabled:hover,
.abt-dark-theme .abt-loop .button:disabled:focus,
.abt-dark-theme .abt-switches .button.active:disabled {
    background: #3b4650;
    border-color: #4c5964;
    color: #9facb7;
}

.abt-loop label {
    align-items: center;
    border: 1px solid #1d683b;
    border-radius: 4px;
    color: #145a32;
    display: inline-flex;
    font-weight: bold;
    gap: 4px;
    padding: 3px 8px;
}

.abt-dark-theme .abt-loop label {
    background: #18231d;
    color: #8fd3aa;
}

.abt-player-locked .abt-loop label {
    border-color: #9aa6b0;
    color: #6f7b86;
    cursor: not-allowed;
    opacity: 0.72;
}

.abt-dark-theme.abt-player-locked .abt-loop label {
    background: #202831;
    border-color: #4c5964;
    color: #9facb7;
}

.abt-switches .active {
    font-weight: bold;
}

.abt-switches {
    border-top: 1px solid #d7dee4;
    margin: 12px 0 0;
    padding: 12px 0;
}

.abt-dark-theme .abt-switches {
    border-top-color: #3a4650;
}

.abt-timeline {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    margin: 10px 0;
}

.abt-seek-wrap {
    display: block;
    height: 22px;
    position: relative;
}

.abt-seek-wrap::before {
    background: #dfe7ee;
    border-radius: 4px;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.abt-dark-theme .abt-seek-wrap::before {
    background: #303a44;
}

.abt-loop-range {
    background: rgba(37, 116, 184, 0.34);
    border: 1px solid rgba(30, 95, 152, 0.45);
    border-radius: 4px;
    height: 8px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.abt-loop-range.active {
    background: rgba(37, 116, 184, 0.52);
}

.abt-loop-marker {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
    height: 12px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    z-index: 2;
}

.abt-loop-marker-start {
    background: #24834a;
}

.abt-loop-marker-end {
    background: #d45b18;
}

.abt-dark-theme .abt-loop-marker {
    border-color: #1c2229;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}

.abt-seek-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 22px;
    margin: 0;
    position: relative;
    width: 100%;
    z-index: 3;
}

.abt-seek-wrap input[type="range"]:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.abt-seek-wrap input[type="range"]::-webkit-slider-runnable-track {
    background: transparent;
    height: 8px;
}

.abt-seek-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #2574b8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    height: 16px;
    margin-top: -4px;
    width: 16px;
}

.abt-seek-wrap input[type="range"]::-moz-range-track {
    background: transparent;
    height: 8px;
}

.abt-seek-wrap input[type="range"]::-moz-range-thumb {
    background: #2574b8;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    height: 12px;
    width: 12px;
}

.abt-vote {
    border-top: 1px solid #d7dee4;
    margin-top: 12px;
    padding-top: 12px;
}

.abt-dark-theme .abt-vote,
.abt-dark-theme .abt-results,
.abt-dark-theme .abt-admin-actions {
    border-top-color: #3b4652;
}

.abt-closed-reveal {
    border-top: 1px solid #d7dee4;
    margin-top: 10px;
    padding-top: 10px;
}

.abt-closed-heading {
    font-weight: bold;
    margin: 0 0 10px;
}

.abt-closed-playback-note h4 {
    font-size: 15px;
    margin: 0 0 6px;
}

.abt-closed-playback-note p {
    margin: 6px 0;
}

.abt-selfplay-mode {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 10px 0;
}

.abt-selfplay-mode > span {
    margin-right: 8px;
}

.abt-selfplay-mode .button {
    align-items: center;
    background: #eef7ff;
    border: 1px solid #a9d8ff;
    border-radius: 0;
    box-shadow: none;
    color: #245475;
    display: inline-flex;
    font-weight: 600;
    gap: 6px;
    margin: 0;
    padding: 6px 12px;
    text-shadow: none;
}

.abt-selfplay-mode .button::before {
    background: transparent;
    border: 1px solid rgba(36, 84, 117, .45);
    border-radius: 50%;
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    height: 5px;
    width: 5px;
}

.abt-selfplay-mode .button:first-of-type {
    border-radius: 6px 0 0 6px;
}

.abt-selfplay-mode .button:last-of-type {
    border-radius: 0 6px 6px 0;
    margin-left: -1px;
}

.abt-selfplay-mode .button:hover,
.abt-selfplay-mode .button:focus {
    background: #d9efff;
    border-color: #7fc4f3;
    color: #1f4f72;
}

.abt-selfplay-mode .button:hover::before,
.abt-selfplay-mode .button:focus::before,
.abt-selfplay-mode .active::before {
    background: #111111;
    border-color: #111111;
}

.abt-selfplay-mode .active,
.abt-selfplay-mode .active:hover,
.abt-selfplay-mode .active:focus {
    background: #62afe7;
    border-color: #3e95d2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
    color: #ffffff;
    text-shadow: none;
}

.abt-selfcheck-answer {
    border-top: 1px solid #d7dee4;
    margin-top: 12px;
    padding-top: 12px;
}

.abt-selfcheck-answer label {
    display: block;
    margin: 6px 0;
}

.abt-selfcheck-answer .button1,
.abt-selfcheck-new {
    background: rgba(36, 84, 117, .08);
    border: 1px solid rgba(36, 84, 117, .26);
    border-radius: 5px;
    box-shadow: none;
    color: #245475;
    cursor: pointer;
    font-weight: 600;
    padding: 6px 12px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.abt-selfcheck-answer .button1 {
    margin-top: 8px;
}

.abt-selfcheck-answer .button1:hover,
.abt-selfcheck-answer .button1:focus,
.abt-selfcheck-new:hover,
.abt-selfcheck-new:focus {
    background: rgba(36, 84, 117, .18);
    border-color: rgba(36, 84, 117, .42);
    color: #163a52;
    text-decoration: none;
}

.abt-selfcheck-result {
    border-radius: 6px;
    font-weight: bold;
    margin-top: 12px;
    padding: 10px 12px;
}

.abt-selfcheck-result.correct {
    background: #e6f4ea;
    color: #146c2e;
}

.abt-selfcheck-result.wrong {
    background: #fdecea;
    color: #9f1c16;
}

.abt-selfcheck-result.neutral {
    background: #edf3fb;
    color: #1f5f8b;
}

.abt-selfcheck-new {
    margin-top: 10px;
}

.abt-dark-theme .abt-selfcheck-answer .button1,
.abt-dark-theme .abt-selfcheck-new {
    background: rgba(181, 207, 227, .12);
    border-color: rgba(181, 207, 227, .34);
    color: #cfe3f3;
}

.abt-dark-theme .abt-selfcheck-answer .button1:hover,
.abt-dark-theme .abt-selfcheck-answer .button1:focus,
.abt-dark-theme .abt-selfcheck-new:hover,
.abt-dark-theme .abt-selfcheck-new:focus {
    background: rgba(181, 207, 227, .22);
    border-color: rgba(181, 207, 227, .52);
    color: #ffffff;
}

.abt-dark-theme .abt-selfcheck-answer {
    border-top-color: #3b4652;
}

.abt-player.abt-dark-theme .abt-selfcheck-answer input[type="radio"] {
    accent-color: #60a5fa;
}

.abt-player.abt-dark-theme .abt-selfcheck-answer input[type="radio"]:disabled:checked {
    filter: drop-shadow(0 0 2px rgba(96, 165, 250, .75));
    opacity: 1;
}

.abt-dark-theme .abt-selfcheck-result.correct {
    background: #183323;
    color: #a8e2b9;
}

.abt-dark-theme .abt-selfcheck-result.wrong {
    background: #3a1d1d;
    color: #f0b2ad;
}

.abt-dark-theme .abt-selfcheck-result.neutral {
    background: #1d2a34;
    color: #b8d8ef;
}

.abt-closed-playback-note {
    background: #eef6ec;
    border: 1px solid #b9d6b2;
    border-radius: 4px;
    color: #2f5e2a;
    margin: 12px 0 8px;
    padding: 8px;
}

.abt-dark-theme .abt-closed-playback-note {
    background: #1f2d20;
    border-color: #456941;
    color: #c9e4c2;
}

.abt-correct-answer {
    font-weight: bold;
}

.abt-share-actions {
    margin-top: 12px;
}

.abt-share-result {
    background: #2574b8;
    background-image: none;
    border-color: #1d5d94;
    color: #fff;
    font-weight: bold;
    padding: 7px 16px;
    text-shadow: none;
}

.abt-share-result:hover,
.abt-share-result:focus {
    background: #1d5d94;
    background-image: none;
    border-color: #174b78;
    color: #fff;
}

.abt-vote label {
    display: block;
    margin: 0 0 6px;
}

.abt-vote .button1 {
    background: #d45b18;
    background-image: none;
    border-color: #a94612;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
    color: #fff;
    font-weight: bold;
    padding: 6px 18px;
    text-shadow: none;
}

.abt-vote .button1:hover,
.abt-vote .button1:focus {
    background: #b94e14;
    background-image: none;
    border-color: #8f3b0e;
    color: #fff;
}

.abt-login-message {
    background: #fff8e5;
    border: 1px solid #e0c36f;
    border-radius: 4px;
    margin: 8px 0;
    padding: 8px;
}

.abt-dark-theme .abt-login-message {
    background: #2b2718;
    border-color: #6b5a2b;
    color: #eadca9;
}

.abt-login-message a {
    display: inline-block;
    margin-left: 6px;
}

.abt-my-choice {
    font-weight: bold;
    margin: 0 0 8px;
}

.abt-results-total {
    color: #53616d;
    margin: 0 0 10px;
}

.abt-results {
    border-top: 1px solid #d7dee4;
    margin-top: 12px;
    padding-top: 12px;
}

.abt-result-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(70px, 160px) 1fr auto;
    margin: 6px 0;
}

.abt-result-row.selected {
    font-weight: bold;
}

.abt-result-bar {
    background: #dfe7ee;
    border-radius: 4px;
    overflow: hidden;
}

.abt-dark-theme .abt-result-bar {
    background: #303a44;
}

.abt-posting-panel.abt-dark-theme .abt-existing-file {
    background: #1c2229;
    border-color: #3b4652;
}

.abt-posting-panel.abt-dark-theme .abt-existing-file-marked {
    background: #332020;
    border-color: #7a4141;
}

.abt-posting-panel.abt-dark-theme .abt-delete-state,
.abt-posting-panel.abt-dark-theme .abt-delete-file {
    color: #ff9c9c;
}

.abt-result-bar span {
    background: #2f7dbd;
    display: block;
    height: 100%;
    min-height: 18px;
}

.abt-result-count {
    min-width: 78px;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .abt-header,
    .abt-timeline,
    .abt-result-row {
        display: block;
    }

    .abt-timeline input {
        width: 100%;
    }
}

/* ========================================================================== 
   Modern player skin (v1.0.58)
   Visual-only redesign. Existing player logic and controls are unchanged.
   ========================================================================== */

.abt-player {
    --abt-accent: #2563eb;
    --abt-accent-hover: #1d4ed8;
    --abt-danger: #dc2626;
    --abt-danger-hover: #b91c1c;
    --abt-surface: #ffffff;
    --abt-surface-soft: #f8fafc;
    --abt-border: #dbe3ee;
    --abt-border-strong: #c9d4e2;
    --abt-text: #172033;
    --abt-muted: #64748b;
    --abt-disabled-bg: #eef2f6;
    --abt-disabled-border: #d7dee8;
    --abt-disabled-text: #a5afbd;
    background: var(--abt-surface);
    border: 1px solid var(--abt-border);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .08);
    color: var(--abt-text);
    margin: 16px 0;
    overflow: hidden;
    padding: 18px;
}

.abt-player.abt-dark-theme {
    --abt-accent: #3b82f6;
    --abt-accent-hover: #60a5fa;
    --abt-danger: #ef4444;
    --abt-danger-hover: #f87171;
    --abt-surface: #18202a;
    --abt-surface-soft: #202a36;
    --abt-border: #344151;
    --abt-border-strong: #465568;
    --abt-text: #edf3fa;
    --abt-muted: #a9b7c7;
    --abt-disabled-bg: #293440;
    --abt-disabled-border: #3a4757;
    --abt-disabled-text: #718094;
    background: var(--abt-surface);
    border-color: var(--abt-border);
    color: var(--abt-text);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.abt-player .abt-playback-panel {
    min-width: 0;
}

.abt-player .abt-status {
    color: var(--abt-muted);
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
}

.abt-player .abt-progress {
    margin: 0 0 14px;
}

.abt-player .abt-progress-ready {
    background: linear-gradient(90deg, transparent, var(--abt-accent), transparent);
    height: 2px;
    opacity: .75;
}

.abt-player .abt-controls {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.abt-player .abt-controls .button,
.abt-player .abt-loop .button {
    align-items: center;
    appearance: none;
    background: var(--abt-surface);
    background-image: none;
    border: 1px solid var(--abt-border-strong);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    color: var(--abt-text);
    display: inline-flex;
    font-size: 16px;
    font-weight: 650;
    gap: 9px;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
    padding: 10px 18px;
    text-shadow: none;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease, transform .08s ease;
}

.abt-player .abt-controls .button:hover,
.abt-player .abt-controls .button:focus,
.abt-player .abt-loop .button:hover,
.abt-player .abt-loop .button:focus {
    background: var(--abt-surface-soft);
    border-color: var(--abt-accent);
    color: var(--abt-accent);
    box-shadow: 0 4px 12px rgba(37, 99, 235, .12);
    outline: none;
    text-decoration: none;
}

.abt-player .abt-controls .button:active,
.abt-player .abt-loop .button:active {
    transform: translateY(1px);
}

.abt-player .abt-controls .button::before,
.abt-player .abt-loop .button::before {
    color: currentColor;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 700;
    justify-content: center;
    line-height: 1;
    min-width: 18px;
}

.abt-player .abt-controls [data-abt-start]::before,
.abt-player .abt-controls [data-abt-play]::before {
    content: "▶";
}

.abt-player .abt-controls [data-abt-pause]::before {
    content: "Ⅱ";
    letter-spacing: -2px;
}

.abt-player .abt-controls [data-abt-stop]::before {
    content: "■";
    font-size: 15px;
}

.abt-player .abt-loop [data-abt-loop-start]::before {
    content: "↤";
}

.abt-player .abt-loop [data-abt-loop-end]::before {
    content: "↦";
}

.abt-player .abt-loop [data-abt-loop-reset]::before {
    content: "↻";
    font-size: 21px;
}

.abt-player .abt-controls .abt-load {
    background: var(--abt-danger);
    background-image: none;
    border-color: var(--abt-danger);
    box-shadow: 0 5px 14px rgba(220, 38, 38, .22);
    color: #fff;
    font-weight: 700;
    min-width: 165px;
}

.abt-player .abt-controls .abt-load:hover,
.abt-player .abt-controls .abt-load:focus {
    background: var(--abt-danger-hover);
    border-color: var(--abt-danger-hover);
    box-shadow: 0 6px 18px rgba(220, 38, 38, .28);
    color: #fff;
}

.abt-player:not(.abt-player-locked) .abt-controls [data-abt-play] {
    background: var(--abt-accent);
    border-color: var(--abt-accent);
    box-shadow: 0 5px 14px rgba(37, 99, 235, .22);
    color: #fff;
}

.abt-player:not(.abt-player-locked) .abt-controls [data-abt-play]:hover,
.abt-player:not(.abt-player-locked) .abt-controls [data-abt-play]:focus {
    background: var(--abt-accent-hover);
    border-color: var(--abt-accent-hover);
    color: #fff;
}

.abt-player .abt-controls .button:disabled,
.abt-player .abt-controls .button:disabled:hover,
.abt-player .abt-controls .button:disabled:focus,
.abt-player .abt-loop .button:disabled,
.abt-player .abt-loop .button:disabled:hover,
.abt-player .abt-loop .button:disabled:focus {
    background: var(--abt-disabled-bg);
    background-image: none;
    border-color: var(--abt-disabled-border);
    box-shadow: none;
    color: var(--abt-disabled-text);
    cursor: not-allowed;
    opacity: 1;
    transform: none;
}

.abt-player .abt-controls .abt-load:disabled,
.abt-player .abt-controls .abt-load:disabled:hover,
.abt-player .abt-controls .abt-load:disabled:focus {
    background: var(--abt-disabled-bg);
    border-color: var(--abt-disabled-border);
    color: var(--abt-disabled-text);
}

.abt-player .abt-timeline {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(86px, auto) minmax(150px, 1fr) minmax(86px, auto);
    margin: 4px 0 18px;
}

.abt-player .abt-timeline > span {
    color: var(--abt-text);
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
}

.abt-player .abt-seek-wrap {
    height: 28px;
}

.abt-player .abt-seek-wrap::before {
    background: #e3eaf2;
    border-radius: 999px;
    height: 8px;
}

.abt-player.abt-dark-theme .abt-seek-wrap::before {
    background: #334050;
}

.abt-player .abt-loop-range {
    background: rgba(37, 99, 235, .26);
    border: 0;
    border-radius: 999px;
    height: 8px;
}

.abt-player .abt-loop-range.active {
    background: rgba(37, 99, 235, .42);
}

.abt-player .abt-seek-wrap input[type="range"] {
    height: 28px;
}

.abt-player .abt-seek-wrap input[type="range"]::-webkit-slider-thumb {
    background: var(--abt-accent);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .28);
    height: 22px;
    margin-top: -7px;
    width: 22px;
}

.abt-player .abt-seek-wrap input[type="range"]::-moz-range-thumb {
    background: var(--abt-accent);
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .28);
    height: 16px;
    width: 16px;
}

.abt-player.abt-dark-theme .abt-seek-wrap input[type="range"]::-webkit-slider-thumb,
.abt-player.abt-dark-theme .abt-seek-wrap input[type="range"]::-moz-range-thumb {
    border-color: #dbeafe;
}

.abt-player .abt-seek-wrap input[type="range"]:disabled {
    opacity: .48;
}

.abt-player .abt-loop {
    align-items: stretch;
    background: var(--abt-surface-soft);
    border: 1px solid var(--abt-border);
    border-radius: 12px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 10px;
}

.abt-player .abt-loop .button {
    background: var(--abt-surface);
    font-size: 15px;
    min-width: 0;
    width: 100%;
}

.abt-player .abt-loop label {
    align-items: center;
    background: var(--abt-surface);
    border: 1px solid var(--abt-border-strong);
    border-radius: 10px;
    color: var(--abt-text);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    font-weight: 650;
    gap: 10px;
    justify-content: center;
    min-height: 44px;
    padding: 0 14px;
}

.abt-player .abt-loop input[type="checkbox"] {
    appearance: none;
    background: #cbd5e1;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    flex: 0 0 auto;
    height: 24px;
    margin: 0;
    outline: none;
    position: relative;
    transition: background-color .16s ease;
    width: 42px;
}

.abt-player .abt-loop input[type="checkbox"]::after {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .28);
    content: "";
    height: 18px;
    left: 3px;
    position: absolute;
    top: 3px;
    transition: transform .16s ease;
    width: 18px;
}

.abt-player .abt-loop input[type="checkbox"]:checked {
    background: var(--abt-accent);
}

.abt-player .abt-loop input[type="checkbox"]:checked::after {
    transform: translateX(18px);
}

.abt-player .abt-loop input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .22);
}

.abt-player .abt-loop input[type="checkbox"]:disabled {
    background: var(--abt-disabled-border);
    cursor: not-allowed;
}

.abt-player .abt-loop input[type="checkbox"]:disabled::after {
    background: var(--abt-disabled-bg);
    box-shadow: none;
}

.abt-player.abt-player-locked .abt-loop label {
    background: var(--abt-disabled-bg);
    border-color: var(--abt-disabled-border);
    color: var(--abt-disabled-text);
    cursor: not-allowed;
    opacity: 1;
}

.abt-player .abt-switches {
    border-top: 1px solid var(--abt-border);
    gap: 8px;
    margin: 16px 0 0;
    padding: 16px 0 0;
}

.abt-player .abt-switches .button {
    align-items: center;
    border-radius: 9px;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    min-height: 44px;
    min-width: 52px;
    padding: 0 14px;
}


.abt-player .abt-loop-label-mobile {
    display: none;
}

@media (max-width: 850px) {
    .abt-player .abt-loop {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .abt-player {
        border-radius: 12px;
        margin: 12px 0;
        padding: 14px;
    }

    .abt-player .abt-selfplay-mode {
        align-items: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .abt-player .abt-selfplay-mode > span {
        grid-column: 1 / -1;
        margin: 0 0 6px;
    }

    .abt-player .abt-selfplay-mode .button {
        justify-content: center;
        min-width: 0;
        padding-left: 8px;
        padding-right: 8px;
        text-align: center;
        white-space: normal;
        width: 100%;
    }

    .abt-player .abt-controls {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 16px;
    }

    .abt-player .abt-controls .abt-load {
        grid-column: 1 / -1;
        min-width: 0;
        width: 100%;
    }

    .abt-player .abt-controls .button {
        font-size: 14px;
        min-height: 44px;
        padding: 9px 8px;
        width: 100%;
    }

    .abt-player .abt-timeline {
        gap: 8px 10px;
        grid-template-columns: 1fr 1fr;
    }

    .abt-player .abt-timeline .abt-seek-wrap,
    .abt-player .abt-timeline > input[type="range"] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .abt-player .abt-timeline > span:first-child {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .abt-player .abt-timeline > span:last-child {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }

    .abt-player .abt-loop {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow: hidden;
        padding: 6px;
    }

    .abt-player .abt-loop .button,
    .abt-player .abt-loop label {
        flex: 1 1 0;
        font-size: 12px;
        gap: 4px;
        min-height: 36px;
        min-width: 0;
        padding: 6px 4px;
        white-space: nowrap;
        width: auto;
    }

    .abt-player .abt-loop label {
        align-items: center;
        background: var(--abt-surface);
        border: 1px solid var(--abt-border-strong);
        border-radius: 10px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
        box-sizing: border-box;
        color: var(--abt-text);
        display: inline-flex;
        font-weight: 650;
        height: 36px;
        justify-content: center;
        line-height: 1.2;
        min-height: 36px;
        padding: 6px 4px;
    }

    .abt-player .abt-loop input[type="checkbox"] {
        flex: 0 0 auto;
        height: 20px;
        width: 36px;
    }

    .abt-player .abt-loop input[type="checkbox"]::after {
        height: 14px;
        left: 2px;
        top: 2px;
        width: 14px;
    }

    .abt-player .abt-loop input[type="checkbox"]:checked::after {
        transform: translateX(16px);
    }

    .abt-player .abt-loop-label-desktop {
        display: none;
    }

    .abt-player .abt-loop-label-mobile {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    .abt-player .abt-controls .button,
    .abt-player .abt-loop .button,
    .abt-player .abt-loop input[type="checkbox"],
    .abt-player .abt-loop input[type="checkbox"]::after {
        transition: none;
    }
}