:root {
    --surface: #2b2927;
    --surface-soft: #252321;
    --surface-raised: #36312e;
    --surface-hover: #403934;
    --line: #ffffff20;
    --line-strong: #ffffff36;
    --text: #f9f5ee;
    --muted: #c1b8ae;
    --quiet: #91877d;
    --accent: #ffad25;
    --accent-bright: #ffc45a;
    --accent-ink: #231503;
    --header: #36120b;
    --notice: #5f250f;
    --notice-border: #a94b1c;
    --radius: .45rem;
    --radius-large: .75rem;
    --shadow: 0 1rem 2.5rem #0006;
}

* { box-sizing: border-box; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
button, input, textarea { font: inherit; }

table { width: 100%; min-width: 38rem; border-collapse: separate; border-spacing: 0; }
th, td { padding: .78rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th {
    color: var(--muted);
    background: #1615148c;
    border-top: 1px solid var(--line);
    border-bottom-color: var(--line-strong);
    font-family: Jura, sans-serif;
    font-size: .77rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}
th:first-child { border-top-left-radius: .35rem; }
th:last-child { border-top-right-radius: .35rem; }
tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
tbody tr:last-child td { border-bottom: 0; }
.legacy-table { min-width: 43rem; }
.legacy-table th { padding-inline: .75rem; background: transparent; border-top: 0; }
.legacy-table td { padding: .55rem .75rem; }
.legacy-table tbody tr:nth-child(even) { background: #00000024; }
.legacy-table tbody tr:is(:hover, :focus-within) { background: var(--surface-hover); box-shadow: inset 3px 0 var(--accent); }

.saysounds-table audio { width: min(100%, 300px); height: 32px; }
.saysound-clips { display: grid; gap: .3rem; }
.saysound-clips--single { gap: 0; }
.saysounds-catalog-table { width: 100%; min-width: 52rem; table-layout: fixed; }
.saysounds-catalog-table tbody > tr.saysound-catalog-row--plain { background: transparent; }
.saysounds-catalog-table tbody > tr.saysound-catalog-row--alternate { background: #00000024; }
.saysounds-catalog-table--voting th:nth-child(1) { width: 15%; }
.saysounds-catalog-table--voting th:nth-child(2) { width: 47%; }
.saysounds-catalog-table--voting th:nth-child(3) { width: 15%; text-align: center; }
.saysounds-catalog-table--voting th:nth-child(4) { width: 10%; text-align: center; }
.saysounds-catalog-table--voting th:nth-child(5) { width: 13%; }
.saysounds-catalog-table:not(.saysounds-catalog-table--voting) th:nth-child(1) { width: 15%; }
.saysounds-catalog-table:not(.saysounds-catalog-table--voting) th:nth-child(2) { width: 55%; }
.saysounds-catalog-table:not(.saysounds-catalog-table--voting) th:nth-child(3) { width: 12%; text-align: center; }
.saysounds-catalog-table:not(.saysounds-catalog-table--voting) th:nth-child(4) { width: 18%; }
.sort-link { display: inline-flex; gap: .3rem; align-items: center; color: inherit; font: inherit; }
.sort-link:hover { color: var(--accent-bright); }
.sort-link.is-active { color: var(--accent-bright); }
.sort-link.is-active .sort-indicator { font-weight: 700; }
.saysounds-table td { color: var(--text); font-size: 1rem; }
.storage-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .75rem; margin: 0; }
.storage-stats > div { padding: .8rem; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.storage-stats dt { color: var(--muted); font-size: .88rem; }
.storage-stats dd { margin: .25rem 0 0; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.saysounds-table code { color: inherit; font-family: inherit; font-size: inherit; }
.saysounds-catalog-table td:first-child > span { display: block; overflow-wrap: anywhere; }
.saysound-clip { display: grid; grid-template-columns: minmax(18.75rem, 2fr) minmax(0, 1fr); gap: .8rem; align-items: center; }
.saysounds-catalog-table .saysound-player { width: 100%; max-width: none; }
.saysound-clip-details { display: grid; gap: .15rem; min-width: 0; }
.saysound-file-name { color: var(--text); font-size: 1rem; overflow-wrap: anywhere; }
.saysound-file-name--disabled { color: var(--quiet); text-decoration: line-through; }
.saysound-file-chance { color: var(--quiet); font-size: .82rem; }
.saysound-admin-only { color: var(--quiet); font-size: .82rem; white-space: nowrap; }
.saysound-play-count { color: var(--quiet); white-space: nowrap; text-align: center; }
.saysound-vote-cell { vertical-align: top; }
.saysound-vote-form { display: inline-flex; align-items: center; gap: .35rem; }
.saysound-vote-button { min-width: 1.6rem; padding: .28rem .4rem; color: var(--text); background: #292522; border: 1px solid var(--line-strong); border-radius: .25rem; box-shadow: none; cursor: pointer; line-height: 1; }
.saysound-vote-button:hover { color: var(--text); background: var(--surface-hover); border-color: var(--accent); }
.saysound-vote-count { min-width: 2ch; color: var(--text); font-variant-numeric: tabular-nums; text-align: center; }
.saysound-trigger-row { cursor: pointer; }
.saysound-trigger-row:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.saysound-added-cell { position: relative; padding-right: 2.1rem !important; }
.saysound-edit-indicator { display: inline-flex; flex: 0 0 auto; width: 1rem; height: 1rem; margin-left: auto; color: var(--accent-bright); transition: transform .15s ease; }
.saysound-added-cell .saysound-edit-indicator { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); }
.saysound-edit-indicator svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.saysound-trigger-row[aria-expanded="true"] .saysound-edit-indicator { transform: translateY(-50%) rotate(180deg); }
.saysound-trigger-editor-row > td { padding-block: .45rem; }
.saysound-trigger-editor { padding: .65rem .75rem; margin: .1rem .45rem; background: var(--surface-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.saysound-trigger-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; color: var(--text); }
.saysound-trigger-controls label { display: inline-flex; gap: .4rem; align-items: center; }
.saysound-trigger-controls input[type="number"] { width: 5.5rem; padding: .35rem .45rem; color: var(--text); background: #171615; border: 1px solid #ffffff32; border-radius: var(--radius); }
.saysound-trigger-controls input[type="text"] { width: min(20rem, 55vw); padding: .35rem .45rem; color: var(--text); background: #171615; border: 1px solid #ffffff32; border-radius: var(--radius); }
.saysound-trigger-save { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.saysound-trigger-controls button, .submission-editor button, .submission-reject-button, .submission-promote-button { width: fit-content; padding: .48rem .75rem; color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-bright), var(--accent)); border: 1px solid #ffd477; border-radius: var(--radius); box-shadow: inset 0 1px #fff7; font-weight: 700; cursor: pointer; }
.saysound-trigger-controls button:disabled { opacity: .55; cursor: not-allowed; }
.submission-editor button:disabled { opacity: .55; cursor: not-allowed; }
.saysound-trigger-status, .submission-editor-status, .submission-reject-status, .submission-promote-status { min-height: 1.2rem; color: var(--muted); }
.saysound-trigger-status.error, .submission-editor-status.error, .submission-reject-status.error, .submission-promote-status.error { color: var(--danger, #ff8a7c); }
.submission-table { min-width: 0; table-layout: fixed; }
.submission-table th:nth-child(1) { width: 17%; }
.submission-table th:nth-child(2) { width: 30%; }
.submission-table th:nth-child(3) { width: 13%; }
.submission-table th:nth-child(4) { width: 16%; }
.submission-table th:nth-child(5) { width: 24%; }
.submission-table td { padding: .45rem .55rem; }
.submission-table .saysound-player { width: 100%; max-width: none; }
.submission-table tbody > tr.submission-row--plain { background: transparent; }
.submission-table tbody > tr.submission-row--alternate { background: #00000024; }
.submission-row { cursor: pointer; }
.submission-row:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.submission-note { min-width: 14rem; padding: .6rem .75rem; margin: .1rem .45rem; overflow-wrap: anywhere; color: var(--muted); background: var(--surface-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.submission-note > div { white-space: pre-wrap; }
.submission-note-label { display: block; margin-bottom: .3rem; color: var(--accent-bright); font-family: Jura, sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.submission-stats { display: grid; gap: .1rem; color: var(--text); line-height: 1.25; }
.submission-submitter-content { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.submission-note-indicator { display: inline-flex; flex: 0 0 auto; width: 1rem; height: 1rem; margin-left: auto; color: var(--accent-bright); transition: transform .15s ease; }
.submission-note-indicator svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.submission-row[aria-expanded="true"] .submission-note-indicator { transform: rotate(180deg); }
.submission-details { display: grid; gap: .65rem; }
.submission-editor { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; padding: .65rem .75rem; margin: .1rem .45rem; color: var(--text); background: var(--surface-soft); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.submission-editor-fields { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
.submission-editor-fields label { display: inline-flex; align-items: center; gap: .4rem; }
.submission-editor-fields input { width: min(15rem, 38vw); min-width: 8rem; padding: .35rem .45rem; color: var(--text); background: #171615; border: 1px solid #ffffff32; border-radius: var(--radius); font: 1rem/1.25 inherit; }
.submission-editor-save { display: flex; align-items: center; gap: .65rem; margin-left: auto; }
.submission-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem 1rem; margin: .1rem .45rem; }
.submission-reject, .submission-promote { display: flex; align-items: center; gap: .65rem; }
.submission-reject-button { color: #fff4f1; background: #8b3028; border-color: #d76c61; }
.submission-reject-button:hover { background: #a93b31; }
@media (max-width: 42rem) { .submission-editor-fields { flex-basis: 100%; } .submission-editor-fields input { flex: 1 1 12rem; } .submission-editor-save, .saysound-trigger-save { margin-left: 0; } }
code { color: var(--text); }

.submission-card { width: 100%; }
.submission-filter-links { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: center; margin: -.55rem 0 .4rem; padding: .5rem; color: var(--quiet); font-size: .84rem; }
.submission-filter-links a { padding: .15rem .35rem; border-radius: .25rem; color: var(--accent); }
.submission-filter-links a:is(:hover, .is-active) { color: #19120a; background: var(--accent-bright); text-decoration: none; }
.editor-field { display: grid; gap: .4rem; margin: 1rem 0; }
.editor-field input, .editor-field textarea {
    color: var(--text);
    background: #171615;
    border: 1px solid #ffffff32;
    border-radius: var(--radius);
    box-shadow: inset 0 1px #0008;
}
.editor-field input { padding: .55rem .65rem; }
.editor-field textarea { padding: .65rem; resize: vertical; }
.editor-field button, #submit-saysound {
    width: fit-content;
    padding: .66rem .9rem;
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border: 1px solid #ffd477;
    border-radius: var(--radius);
    box-shadow: inset 0 1px #fff7;
    font-weight: 700;
    cursor: pointer;
}
.editor-field button:hover, #submit-saysound:hover { color: #17110a; background: linear-gradient(180deg, #ffda8a, var(--accent-bright)); }
.editor-field button:disabled, #submit-saysound:disabled { opacity: .55; cursor: not-allowed; }
.submission-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.submission-status { min-height: 1.4rem; color: var(--muted); }
.submission-status.error { color: var(--danger, #ff8a7c); }
.waveform-player { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: start; margin: 1rem 0; }
.waveform-content { min-width: 0; }
.waveform-selection { position: relative; padding-bottom: 1.5rem; }
.waveform { min-height: 96px; background: #1716158c; border: 1px solid var(--line); border-radius: var(--radius); }
.preview-volume { display: grid; grid-template-rows: auto 96px; place-items: center; align-self: start; gap: .25rem; color: var(--muted); }
.preview-volume svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
#preview-volume { width: 1rem; height: 96px; margin: 0; accent-color: var(--accent); cursor: pointer; writing-mode: vertical-lr; direction: rtl; }
.trim-pin {
    position: absolute;
    top: calc(100% - 1.4rem);
    z-index: 1;
    padding: .25rem .45rem;
    color: var(--accent-ink);
    background: var(--accent-bright);
    border-radius: 999px;
    box-shadow: 0 .2rem .5rem #0005;
    font-family: Jura, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    white-space: nowrap;
}
.trim-pin::before { content: ''; position: absolute; top: -.3rem; width: 2px; height: .3rem; background: var(--accent-bright); }
.trim-pin--start { transform: translateX(0); }
.trim-pin--start::before { left: 0; }
.trim-pin--end { transform: translateX(-100%); }
.trim-pin--end::before { right: 0; }
.waveform-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.waveform-play-button {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border: 1px solid #ffd477;
    border-radius: 50%;
    box-shadow: inset 0 1px #fff7;
    cursor: pointer;
}
.waveform-play-button:hover { color: #17110a; background: linear-gradient(180deg, #ffda8a, var(--accent-bright)); }
.waveform-play-button:disabled { opacity: .55; cursor: not-allowed; }
.waveform-play-button svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
.waveform-play-button .pause-icon, .waveform-play-button[data-playing="true"] .play-icon { display: none; }
.waveform-play-button[data-playing="true"] .pause-icon { display: block; }
#preview-scrubber { width: 100%; accent-color: var(--accent); cursor: pointer; }
#preview-scrubber:disabled { cursor: not-allowed; }
.preview-time { min-width: 6.8rem; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.editor-status { min-height: 1.4rem; color: var(--muted); }
.editor-status.error { color: var(--danger, #ff8a7c); }
.editor-help { margin: 0; color: var(--quiet); }

@media (max-width: 38rem) {
    .legacy-table { min-width: 32rem; }
    .saysounds-catalog-table .saysound-clip { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
    .waveform-controls { gap: .5rem; }
    .preview-time { min-width: 5.8rem; font-size: .82rem; }
    .saysounds-table audio { min-width: 11.25rem; }
}