:root {
    color-scheme: light;

    --bg: #f6faff;
    --panel: #ffffff;
    --panel-2: #f3f8ff;
    --border: #c9def7;

    --text: #24364b;
    --muted: #71849b;

    --accent: #4f9ee8;
    --accent-hover: #378bd8;

    --green: #35a875;
    --yellow: #c5902f;
    --red: #dc6670;

    --shadow:
        0 10px 35px
        rgba(51, 105, 160, .08);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;
}


body {
    background: var(--bg);
    color: var(--text);
}


button,
input {
    font: inherit;
}


button,
a {
    transition:
        background .15s,
        border-color .15s,
        color .15s;
}


.hidden {
    display: none !important;
}


/* Login */

.login-body {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;
}


.login-card {
    width: 100%;
    max-width: 430px;

    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;

    padding: 36px;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .35);
}


.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}


.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: var(--accent);

    color: white;
    font-weight: 800;
    font-size: 15px;
}


.brand h1 {
    margin: 0;
    font-size: 25px;
}


.brand p {
    margin: 3px 0 0;
    color: var(--muted);
}


.login-form {
    display: flex;
    flex-direction: column;

    gap: 18px;

    margin-top: 32px;
}


.login-form label {
    display: flex;
    flex-direction: column;

    gap: 8px;

    color: var(--muted);
    font-size: 14px;
}


.login-form input {
    width: 100%;

    background: var(--panel-2);
    color: var(--text);

    border: 1px solid var(--border);
    border-radius: 9px;

    padding: 12px 13px;

    outline: none;
}


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


.alert {
    margin-top: 22px;

    padding: 12px 14px;

    border-radius: 9px;
}


.alert.error {
    background: rgba(237,101,114,.1);
    border: 1px solid rgba(237,101,114,.3);
    color: #ff9aa4;
}


/* Buttons */

.primary-button,
.secondary-button,
.link-button {
    cursor: pointer;
}


.primary-button {
    border: 0;
    border-radius: 9px;

    background: var(--accent);
    color: white;

    padding: 11px 18px;

    font-weight: 600;
}


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


.primary-button:disabled {
    opacity: .5;
    cursor: default;
}


.secondary-button {
    display: inline-flex;
    align-items: center;

    border: 1px solid var(--border);
    border-radius: 8px;

    background: var(--panel-2);
    color: var(--text);

    padding: 8px 13px;

    text-decoration: none;
}


.secondary-button:hover {
    border-color: #43506a;
}


.link-button {
    border: 0;
    background: none;

    color: var(--accent);

    padding: 4px;
}


.link-button:hover {
    color: var(--accent-hover);
}


/* Header */

.topbar {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;

    border-bottom:
        1px solid var(--border);

    background:
        rgba(11,14,19,.9);
}


.brand.compact .brand-mark {
    width: 36px;
    height: 36px;

    border-radius: 9px;

    font-size: 12px;
}


.brand.compact > div:last-child {
    display: flex;
    flex-direction: column;
}


.brand.compact span {
    color: var(--muted);
    font-size: 11px;
}


.topbar-right {
    display: flex;
    align-items: center;

    gap: 18px;

    color: var(--muted);
    font-size: 14px;
}


.api-state {
    display: flex;
    align-items: center;
    gap: 7px;
}


.api-state span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--red);
}


.api-state.online span {
    background: var(--green);
}


/* Main */

.container {
    width: min(1400px, calc(100% - 40px));

    margin: 30px auto 80px;

    display: flex;
    flex-direction: column;

    gap: 24px;
}


.panel {
    background: var(--panel);

    border:
        1px solid var(--border);

    border-radius: 14px;

    padding: 24px;
}


.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 20px;
}


.panel-header h2 {
    margin: 0;
    font-size: 18px;
}


.panel-header p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 13px;
}


/* Drop area */

.drop-zone {
    min-height: 240px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border:
        1px dashed #354159;

    border-radius: 12px;

    background:
        rgba(255,255,255,.015);

    transition:
        border-color .15s,
        background .15s;
}


.drop-zone.dragging {
    border-color: var(--accent);

    background:
        rgba(79,140,255,.07);
}


.drop-icon {
    font-size: 34px;
    color: var(--accent);
}


.drop-zone > span,
.drop-zone small {
    color: var(--muted);
}


.drop-zone small {
    margin-top: 10px;
}


/* Selection */

.selection-panel {
    margin-top: 22px;

    border-top:
        1px solid var(--border);

    padding-top: 20px;
}


.selection-header {
    display: flex;
    justify-content: space-between;

    margin-bottom: 12px;
}


.selected-files {
    display: flex;
    flex-direction: column;

    margin-bottom: 18px;
}


.selected-file {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 9px 4px;

    border-bottom:
        1px solid var(--border);

    font-size: 13px;
}


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


/* Jobs */

.jobs-table-wrap {
    overflow-x: auto;
}


.jobs-table {
    width: 100%;
    border-collapse: collapse;

    font-size: 13px;
}


.jobs-table th {
    text-align: left;

    color: var(--muted);

    font-weight: 500;

    padding:
        0 10px 10px;

    border-bottom:
        1px solid var(--border);
}


.jobs-table td {
    padding: 14px 10px;

    vertical-align: middle;

    border-bottom:
        1px solid var(--border);
}


.jobs-table tbody tr:last-child td {
    border-bottom: 0;
}


.jobs-table td:first-child strong,
.jobs-table td:first-child small {
    display: block;
}


.jobs-table td:first-child small {
    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;
}


.job-error {
    max-width: 550px;

    margin-top: 7px;

    color: var(--red);

    font-size: 11px;

    white-space: normal;
}


.empty {
    text-align: center;
    color: var(--muted);

    padding: 35px !important;
}


.status {
    display: inline-block;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 11px;
}


.status.queued {
    background:
        rgba(224,184,75,.1);

    color: var(--yellow);
}


.status.running {
    background:
        rgba(79,140,255,.12);

    color: #82aeff;
}


.status.completed {
    background:
        rgba(54,201,135,.1);

    color: var(--green);
}


.status.failed {
    background:
        rgba(237,101,114,.1);

    color: var(--red);
}


.progress-cell {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 150px;
}


.progress {
    width: 110px;
    height: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #252c38;
}


.progress-value {
    height: 100%;

    border-radius: inherit;

    background: var(--accent);

    transition: width .3s;
}


.progress-cell span {
    min-width: 34px;

    color: var(--muted);

    font-size: 11px;
}


.job-actions {
    text-align: right;
}


/* Transcript */

.result-actions {
    display: flex;
    gap: 8px;
}


.transcript {
    max-height: 600px;

    overflow: auto;

    margin: 0;

    background: var(--bg);

    border:
        1px solid var(--border);

    border-radius: 10px;

    padding: 20px;

    color: #e8edf5;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;

    font-size: 13px;

    line-height: 1.7;

    white-space: pre-wrap;
}


@media (
    max-width: 700px
) {

    .topbar {
        padding: 0 14px;
    }

    .username,
    .brand.compact span {
        display: none;
    }

    .container {
        width:
            calc(100% - 20px);

        margin-top: 10px;
    }

    .panel {
        padding: 16px;
    }

    .panel-header {
        align-items: flex-start;
    }

    .drop-zone {
        min-height: 200px;
        padding: 20px;
        text-align: center;
    }
}


/* Speech2Text UI v0.2 additions */

.section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 24px;
    height: 22px;

    margin-left: 6px;
    padding: 0 7px;

    border-radius: 999px;

    background: var(--panel-2);
    border: 1px solid var(--border);

    color: var(--muted);
    font-size: 11px;
    font-weight: 500;

    vertical-align: 2px;
}


.batch-notice {
    margin-top: 18px;

    padding: 12px 14px;

    border-radius: 9px;

    border:
        1px solid
        rgba(54, 201, 135, .28);

    background:
        rgba(54, 201, 135, .08);

    color: var(--green);

    font-size: 13px;
}


.batch-notice.error {
    border-color:
        rgba(237, 101, 114, .3);

    background:
        rgba(237, 101, 114, .08);

    color: var(--red);
}


.job-action-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    gap: 10px;

    white-space: nowrap;
}


.history-time {
    white-space: nowrap;

    color: var(--muted);

    font-size: 12px;
}


.artifacts-list {
    display: flex;
    flex-direction: column;
}


.artifact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 4px;

    border-bottom:
        1px solid var(--border);
}


.artifact-row:last-child {
    border-bottom: 0;
}


.artifact-row > div {
    min-width: 0;
}


.artifact-row strong {
    display: block;

    overflow-wrap: anywhere;
}


.artifact-row small {
    display: block;

    margin-top: 4px;

    color: var(--muted);
}


.artifact-error {
    padding: 20px;

    border-radius: 8px;

    background:
        rgba(237, 101, 114, .08);

    color: var(--red);
}


@media (
    max-width: 900px
) {

    .jobs-table {
        min-width: 800px;
    }
}


/* Administration */

.topbar-link {
    color: var(--muted);

    text-decoration: none;

    font-size: 13px;
}


.topbar-link:hover {
    color: var(--text);
}


.admin-create-form {
    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(180px, 1fr)
        150px
        auto;

    align-items: end;

    gap: 14px;
}


.admin-create-form label {
    display: flex;
    flex-direction: column;

    gap: 7px;

    color: var(--muted);

    font-size: 12px;
}


.admin-create-form input,
.admin-create-form select,
.admin-select,
.modal-card input {
    width: 100%;

    padding: 10px 11px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    outline: none;

    background: var(--panel-2);
    color: var(--text);
}


.admin-create-form input:focus,
.admin-create-form select:focus,
.admin-select:focus,
.modal-card input:focus {
    border-color: var(--accent);
}


.admin-select {
    min-width: 90px;

    padding: 6px 8px;

    font-size: 12px;
}


.admin-select:disabled {
    opacity: .6;
}


.admin-message {
    margin-top: 16px;

    padding: 11px 13px;

    border-radius: 8px;

    border:
        1px solid
        rgba(54, 201, 135, .28);

    background:
        rgba(54, 201, 135, .08);

    color: var(--green);

    font-size: 13px;
}


.admin-message.error {
    border-color:
        rgba(237, 101, 114, .3);

    background:
        rgba(237, 101, 114, .08);

    color: var(--red);
}


.admin-users-table {
    min-width: 1050px;
}


.admin-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    white-space: nowrap;
}


.danger-link {
    color: var(--red);
}


.danger-link:hover {
    color: #ff8c96;
}


.link-button:disabled {
    opacity: .35;
    cursor: default;
}


.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, .66);
}


.modal-card {
    width: min(
        420px,
        100%
    );

    padding: 24px;

    border:
        1px solid var(--border);

    border-radius: 14px;

    background: var(--panel);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .55);
}


.modal-card h3 {
    margin:
        0 0 6px;
}


.modal-card p {
    margin:
        0 0 18px;

    color: var(--muted);
}


.modal-actions {
    display: flex;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 18px;
}


@media (
    max-width: 900px
) {

    .admin-create-form {
        grid-template-columns:
            1fr;
    }
}


/* Job owner */

.job-owner {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--panel-2);

    color: var(--text);

    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}


/* History management */

.history-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin:
        -4px 0 20px;
}


.history-filters input,
.history-filters select {
    min-height: 38px;

    padding: 8px 11px;

    border:
        1px solid var(--border);

    border-radius: 8px;

    background: var(--panel-2);
    color: var(--text);

    outline: none;
}


.history-filters input {
    min-width: 280px;
    flex: 1;
}


.history-filters select {
    min-width: 170px;
}


.history-filters input:focus,
.history-filters select:focus {
    border-color: var(--accent);
}


.job-action-group a.link-button {
    text-decoration: none;
}


/* Light theme refinements */

body {
    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #eef6ff 100%
        );

    color: var(--text);
}


.topbar {
    background:
        rgba(255, 255, 255, .94);

    border-bottom:
        1px solid var(--border);

    box-shadow:
        0 4px 18px
        rgba(51, 105, 160, .06);

    backdrop-filter: blur(10px);
}


.panel,
.login-card,
.modal-card {
    background: #ffffff;

    border:
        1px solid var(--border);

    box-shadow: var(--shadow);
}


.brand-mark {
    background:
        linear-gradient(
            135deg,
            #63aff0,
            #318bdc
        );

    color: #ffffff;
}


.drop-zone {
    background:
        linear-gradient(
            180deg,
            #fbfdff,
            #f4f9ff
        );

    border:
        2px dashed #a9cdef;
}


.drop-zone:hover,
.drop-zone.dragging {
    background: #edf7ff;
    border-color: var(--accent);
}


.secondary-button {
    background: #f6faff;
    border-color: #b8d6f4;
    color: #31577e;
}


.secondary-button:hover {
    background: #eaf5ff;
    border-color: #8cbce8;
}


.primary-button {
    background:
        linear-gradient(
            135deg,
            #5eacf0,
            #378fdc
        );

    color: #ffffff;

    box-shadow:
        0 6px 16px
        rgba(55, 143, 220, .20);
}


.primary-button:hover {
    background:
        linear-gradient(
            135deg,
            #4ca2ed,
            #2d82cf
        );
}


.login-form input,
.admin-create-form input,
.admin-create-form select,
.admin-select,
.modal-card input,
.history-filters input,
.history-filters select {
    background: #ffffff;
    color: var(--text);

    border:
        1px solid #bdd8f2;
}


.jobs-table th {
    color: #6c8299;

    background: #f7fbff;
}


.jobs-table td {
    border-bottom:
        1px solid #e2edf8;
}


.jobs-table tbody tr:hover td {
    background: #f8fbff;
}


.progress {
    background: #e2eef9;
}


.progress-value {
    background:
        linear-gradient(
            90deg,
            #65b0ef,
            #3d91da
        );
}


.transcript {
    background: #fbfdff;
    color: #294057;

    border:
        1px solid #c9def7;
}


.job-owner {
    background: #edf6ff;
    color: #34618c;

    border:
        1px solid #c1dcf5;
}


.file-size {
    color: #617992;
    white-space: nowrap;
}


.status.queued {
    background: #fff7df;
    color: #9d741f;
}


.status.running {
    background: #e8f3ff;
    color: #3479b9;
}


.status.completed {
    background: #e8f8f1;
    color: #268158;
}


.status.failed {
    background: #fff0f1;
    color: #c14f5b;
}


.batch-notice {
    background: #effbf5;
}


.artifact-row {
    border-bottom:
        1px solid #e1edf8;
}


.permission-toggle,
.permission-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 90px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 600;
}


.permission-toggle {
    cursor: pointer;
}


.permission-toggle.allowed,
.permission-badge.allowed {
    background: #e8f8f1;
    border: 1px solid #adddc9;
    color: #267c57;
}


.permission-toggle.denied {
    background: #f5f7f9;
    border: 1px solid #d5dee7;
    color: #7b8997;
}


.modal-backdrop {
    background:
        rgba(57, 86, 117, .28);

    backdrop-filter:
        blur(4px);
}


/* =========================================================
   V1.4 — softer light theme + viewers
   ========================================================= */


:root {
    --bg: #e5edf5;
    --panel: #ffffff;
    --panel-2: #f2f7fb;
    --border: #b8d2ea;

    --text: #263b50;
    --muted: #687f95;

    --shadow:
        0 8px 28px
        rgba(47, 79, 111, .09);
}


body {
    background:
        linear-gradient(
            180deg,
            #e9f0f6 0%,
            #dfe8f1 100%
        );

    background-attachment: fixed;
}


.topbar {
    background:
        rgba(248, 251, 254, .96);

    border-bottom:
        1px solid #b8d2ea;
}


.panel {
    background: #ffffff;

    border:
        1px solid #b8d2ea;

    box-shadow:
        0 8px 28px
        rgba(47, 79, 111, .08);
}


.jobs-table th {
    background: #edf4fa;
}


.jobs-table tbody tr:hover td {
    background: #f1f7fc;
}


.drop-zone {
    background:
        linear-gradient(
            180deg,
            #f7fbfe,
            #edf5fb
        );
}


/* ----- Modal viewers ----- */


.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 2000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px;

    background:
        rgba(46, 67, 89, .38);

    backdrop-filter:
        blur(5px);
}


.modal-backdrop.hidden {
    display: none !important;
}


.viewer-modal {
    display: flex;
    flex-direction: column;

    width:
        min(
            900px,
            calc(100vw - 40px)
        );

    max-height:
        calc(100vh - 56px);

    overflow: hidden;

    border:
        1px solid #a9c7e2;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 26px 80px
        rgba(32, 55, 78, .24);
}


.viewer-modal-large {
    width:
        min(
            1100px,
            calc(100vw - 40px)
        );
}


.viewer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    flex: 0 0 auto;

    padding:
        20px 22px;

    border-bottom:
        1px solid #d5e3ef;

    background:
        linear-gradient(
            180deg,
            #f8fbfe,
            #f1f6fa
        );
}


.viewer-header h2 {
    margin: 0;

    color: #294760;
}


.viewer-header p {
    margin:
        5px 0 0;

    color: var(--muted);

    font-size: 12px;
}


/* ----- Markdown ----- */


.markdown-body {
    overflow: auto;

    padding:
        28px 34px 40px;

    color: #273d51;

    font-size: 15px;
    line-height: 1.72;

    background: #ffffff;
}


.markdown-body > :first-child {
    margin-top: 0;
}


.markdown-body > :last-child {
    margin-bottom: 0;
}


.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: #244968;

    line-height: 1.3;
}


.markdown-body h1 {
    margin:
        0 0 24px;

    padding-bottom: 12px;

    border-bottom:
        1px solid #cfe0ef;

    font-size: 28px;
}


.markdown-body h2 {
    margin:
        30px 0 14px;

    font-size: 22px;
}


.markdown-body h3 {
    margin:
        24px 0 12px;

    font-size: 18px;
}


.markdown-body p {
    margin:
        0 0 14px;
}


.markdown-body strong {
    color: #1f425f;
}


.markdown-body blockquote {
    margin:
        18px 0;

    padding:
        10px 16px;

    border-left:
        4px solid #79afe0;

    background: #eef6fc;

    color: #45627b;
}


.markdown-body code {
    padding:
        2px 5px;

    border-radius: 5px;

    background: #edf3f8;

    font-family:
        ui-monospace,
        SFMono-Regular,
        Consolas,
        monospace;
}


.markdown-body pre {
    overflow: auto;

    padding: 16px;

    border:
        1px solid #cfdeea;

    border-radius: 9px;

    background: #eef3f7;
}


.markdown-body pre code {
    padding: 0;
    background: transparent;
}


.markdown-body ul,
.markdown-body ol {
    padding-left: 26px;
}


.markdown-body table {
    width: 100%;

    margin:
        18px 0;

    border-collapse: collapse;
}


.markdown-body th,
.markdown-body td {
    padding:
        8px 10px;

    border:
        1px solid #d4e2ee;

    text-align: left;
}


.markdown-body th {
    background: #eef5fa;
}


/* ----- Artifacts inside modal ----- */


.viewer-modal .artifacts-list {
    overflow: auto;

    padding:
        10px 22px 22px;
}


/* ----- Player ----- */


.media-modal {
    width:
        min(
            720px,
            calc(100vw - 40px)
        );
}


.media-player-shell {
    padding:
        30px 28px 34px;

    background:
        linear-gradient(
            180deg,
            #f9fcfe,
            #edf4f9
        );
}


.media-player-shell audio {
    display: block;

    width: 100%;
}


.player-state {
    min-height: 20px;

    margin:
        14px 0 0;

    color: var(--muted);

    text-align: center;

    font-size: 13px;
}


.play-button {
    white-space: nowrap;
}


@media (
    max-width: 700px
) {
    .modal-backdrop {
        padding: 10px;
    }

    .viewer-modal,
    .viewer-modal-large,
    .media-modal {
        width:
            calc(100vw - 20px);

        max-height:
            calc(100vh - 20px);
    }

    .viewer-header {
        flex-direction: column;

        padding: 16px;
    }

    .markdown-body {
        padding:
            20px 18px 28px;
    }
}