@font-face{font-family:Vazirmatn;src:url('/static/fonts/hardsub/Vazirmatn-Regular.ttf') format('truetype');font-weight:100 600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/static/fonts/hardsub/vazirmatn-Bold.ttf') format('truetype');font-weight:601 900;font-display:swap}

:root {
    --bg: #f3f5f7;
    --bg-soft: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-raised: #ffffff;
    --text: #111827;
    --text-soft: #374151;
    --muted: #4b5563;
    --muted-soft: #6b7280;
    --border: #e5e7eb;
    --border-strong: #cbd5e1;
    --primary: #0f6fec;
    --primary-dark: #1e40af;
    --primary-soft: #eff6ff;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --overlay: rgba(15, 23, 42, 0.08);
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-strong: 0 18px 40px rgba(15, 23, 42, 0.12);
    color-scheme: light;
}

.dark {
    --bg: #0d141c;
    --bg-soft: #121b25;
    --surface: #15202b;
    --surface-soft: #1b2734;
    --surface-raised: #223040;
    --text: #f8fafc;
    --text-soft: #dbe4ef;
    --muted: #aeb9c7;
    --muted-soft: #8f9cad;
    --border: #2b3a4a;
    --border-strong: #3d5065;
    --primary: #5d9cff;
    --primary-dark: #7bb0ff;
    --primary-soft: rgba(93, 156, 255, 0.16);
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --overlay: rgba(2, 6, 23, 0.45);
    --shadow-soft: 0 1px 2px rgba(2, 6, 23, 0.28);
    --shadow-strong: 0 18px 40px rgba(2, 6, 23, 0.42);
    color-scheme: dark;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: var(--bg) !important;
    color: var(--text);
    transition: background-color 150ms ease, color 150ms ease;
}

textarea::placeholder, input::placeholder { 
    color: var(--muted-soft); 
    font-weight: 300; 
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #4b5563; }

.theme-switch {
    position: relative;
    display: inline-flex;
    width: 3.5rem;
    height: 1.9rem;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #dbe6f2;
    border-radius: 999px;
    direction: ltr;
    color: #61748a;
    background: #eaf2fb;
    box-shadow: inset 0 1px 2px rgba(68, 94, 126, 0.08);
    cursor: pointer;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.theme-switch:hover {
    border-color: #c6d8ec;
    background: #e3eef9;
}

.theme-switch:active { transform: scale(0.97); }

.theme-switch:focus-visible {
    outline: 2px solid rgba(15, 111, 236, 0.52);
    outline-offset: 2px;
}

.theme-switch__thumb {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 75%;
    width: 1.48rem;
    height: 1.48rem;
    border: 1px solid rgba(189, 207, 228, 0.78);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.18rem 0.45rem rgba(40, 75, 116, 0.18);
    transform: translate(-50%, -50%);
    transition: left 210ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease, border-color 180ms ease;
}

.theme-switch__icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 1rem;
    height: 1rem;
    place-items: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: color 180ms ease;
}

.theme-switch__icon svg {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-switch__icon--sun { left: 75%; color: #0f6fec; }
.theme-switch__icon--moon { left: 25%; color: #52677f; }

.dark .theme-switch {
    border-color: #31465c;
    color: #91a4b9;
    background: #1c2b3a;
    box-shadow: inset 0 1px 3px rgba(2, 8, 16, 0.34);
}

.dark .theme-switch:hover {
    border-color: #3c5670;
    background: #213243;
}

.dark .theme-switch__thumb {
    left: 25%;
    border-color: #ccdaea;
    background: #f5f9ff;
}

.dark .theme-switch__icon--moon { color: #24405f; }
.dark .theme-switch__icon--sun { color: #8495a8; }

@media (prefers-reduced-motion: reduce) {
    .theme-switch,
    .theme-switch__thumb,
    .theme-switch__icon { transition: none; }
}

.brand-wordmark {
    display: block;
    width: auto;
}

.brand-wordmark-dark {
    display: block;
}

.brand-wordmark-light {
    display: none;
}

.dark .brand-wordmark-dark {
    display: none;
}

.dark .brand-wordmark-light {
    display: block;
}

.tool-workbench-form,
.tool-primary-column,
.tool-upload-panel,
.tool-settings-panel {
    min-height: 0;
}

.workspace-shell,
.workspace-tool-container {
    background-color: var(--bg);
}

.dark .workspace-shell,
.dark .workspace-tool-container {
    background-color: var(--bg) !important;
}

/* Dashboard and media tools share one page background in both themes. */
html body:has(.dashboard-page, #media-translate-form, #srt-translate-form, #transcript-form) {
    background-color: var(--bg) !important;
}

html.dark body:has(.dashboard-page, #media-translate-form, #srt-translate-form, #transcript-form) {
    background-color: var(--surface) !important;
}

html main:has(.dashboard-page, #media-translate-form, #srt-translate-form, #transcript-form),
html .workspace-shell:has(#media-translate-form, #srt-translate-form, #transcript-form),
html .workspace-tool-container:has(#media-translate-form, #srt-translate-form, #transcript-form) {
    background-color: transparent !important;
}

@media (min-width: 1280px) {
    .tool-workbench-form {
        height: calc(100vh - 7rem);
        max-height: calc(100vh - 7rem);
        overflow: hidden;
    }

    .tool-primary-column,
    .tool-upload-panel {
        min-height: 0 !important;
    }

    .tool-settings-panel {
        height: calc(100vh - 7.625rem);
        max-height: calc(100vh - 7.625rem);
        min-height: 0;
    }

    .tool-settings-scroll {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}

/* ========== کلاس‌های کمکی یکپارچه ========== */
.card {
    background-color: var(--surface);
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition-property: background-color, border-color;
    transition-duration: 150ms;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    font-weight: 500;
    padding: 0.375rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    transition-property: background-color, transform;
    transition-duration: 150ms;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary:hover { background-color: var(--primary-dark); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
    background-color: transparent;
    color: var(--muted);
    font-weight: 500;
    padding: 0.375rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    transition: background-color 150ms;
}

.btn-secondary:hover { background-color: rgba(0,0,0,0.05); }
.dark .btn-secondary:hover { background-color: rgba(255,255,255,0.1); }

.input-field {
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(0,0,0,0.02);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    outline: none;
    transition: border-color 150ms;
    color: var(--text);
}

.input-field:focus { border-color: var(--primary); }

.tool-dropdown-card {
    border-color: #d1d5db !important;
}
.tool-dropdown-card .chevron-icon {
    width: 1.15rem !important;
    height: 1.15rem !important;
    color: #475569 !important;
    stroke-width: 3 !important;
    flex-shrink: 0;
}
.tool-dropdown-card .dropdown-toggle:hover .chevron-icon {
    color: var(--primary) !important;
}
@media (min-width: 768px) {
.tool-dropdown-card--divided .custom-dropdown-container:not(:first-of-type)::before {
        content: "";
        position: absolute;
        inset-block: 0.55rem;
        inset-inline-start: 0;
        width: 2px;
        border-radius: 999px;
        background: #d1d5db;
        pointer-events: none;
    }
}

.app-sidebar {
    position: fixed;
    z-index: 40;
    inset: 0 0 0 auto;
    width: 260px;
    flex-direction: column;
    border-left: 1px solid #e5eaf1;
    background: #fff;
    color: #1e293b;
    box-shadow: -8px 0 28px rgba(30, 64, 110, 0.045);
}

.app-sidebar__main {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 1.35rem 0.9rem 1rem;
}

.app-sidebar__brand {
    display: flex;
    width: 100%;
    min-height: 3.2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.app-sidebar__nav,
.app-sidebar__group {
    display: flex;
    flex-direction: column;
}

.app-sidebar__nav { gap: 1.25rem; }
.app-sidebar__group { gap: 0.22rem; }

.app-sidebar__group--primary {
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #edf0f5;
}

.app-sidebar__label {
    margin: 0 0.65rem 0.38rem;
    color: #94a0b2;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1.5;
}

.sidebar-link,
.sidebar-menu__toggle {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 2.7rem;
    align-items: center;
    gap: 0.72rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: 0.7rem;
    color: #425168;
    background: transparent;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
    text-align: right;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, transform 150ms ease, box-shadow 180ms ease;
}

.sidebar-link > svg,
.sidebar-menu__toggle > svg:first-child {
    width: 1.22rem;
    height: 1.22rem;
    flex: 0 0 1.22rem;
    color: #758297;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-link:hover,
.sidebar-menu__toggle:hover {
    color: #173a6a;
    background: #f3f7fc;
}

.sidebar-link:active,
.sidebar-menu__toggle:active { transform: scale(0.985); }

.sidebar-link:focus-visible,
.sidebar-menu__toggle:focus-visible,
.sidebar-submenu-link:focus-visible,
.sidebar-register-link:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.55);
    outline-offset: 2px;
}

.sidebar-link--integration { gap: 0.62rem; }

.sidebar-brand-icon {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 1.65rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid #e4e9f1;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 2px 7px rgba(33, 57, 92, 0.08);
}

.sidebar-brand-icon img { width: 100%; height: 100%; object-fit: contain; }

.app-sidebar .sidebar-brand-icon--bare,
.dark .app-sidebar .sidebar-brand-icon--bare {
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Product icons share the brand logos' footprint without adding another tile. */
.app-sidebar .sidebar-product-icon {
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 1.65rem;
    stroke: none;
    --icon-strong: #47769f;
    --icon-soft: #b8cde0;
    --icon-detail: #fff;
    transition: filter 180ms ease;
}
.app-sidebar .sidebar-product-icon--dashboard,
.app-sidebar .sidebar-product-icon--media { --icon-strong: #2679df; --icon-soft: #b0d2fb; }
.app-sidebar .sidebar-product-icon--srt { --icon-strong: #139b70; --icon-soft: #ace5cd; }
.app-sidebar .sidebar-product-icon--transcript { --icon-strong: #8754db; --icon-soft: #d0bcf3; }
.app-sidebar .sidebar-product-icon--help { --icon-strong: #378e9a; --icon-soft: #b7dfe3; }
.app-sidebar .sidebar-product-icon--admin { --icon-strong: #61768e; --icon-soft: #bfccd9; }
.dark .app-sidebar .sidebar-product-icon { --icon-strong: #91b7dc; --icon-soft: #3e5e7c; --icon-detail: #142536; }
.dark .app-sidebar .sidebar-product-icon--dashboard,
.dark .app-sidebar .sidebar-product-icon--media { --icon-strong: #72b2ff; --icon-soft: #2d5d96; }
.dark .app-sidebar .sidebar-product-icon--srt { --icon-strong: #63d6ad; --icon-soft: #276e59; }
.dark .app-sidebar .sidebar-product-icon--transcript { --icon-strong: #b996ff; --icon-soft: #624390; }
.dark .app-sidebar .sidebar-product-icon--help { --icon-strong: #7bcbd4; --icon-soft: #345f6a; }
.dark .app-sidebar .sidebar-product-icon--admin { --icon-strong: #a4b7cb; --icon-soft: #4c6076; }
.app-sidebar .sidebar-link:hover .sidebar-product-icon,
.app-sidebar .sidebar-menu__toggle:hover .sidebar-product-icon { filter: saturate(1.12); }

.sidebar-link__external {
    width: 0.85rem !important;
    height: 0.85rem !important;
    flex-basis: 0.85rem !important;
    margin-right: auto;
    opacity: 0.55;
}

.sidebar-link--disabled {
    cursor: default;
    color: #9ca6b5;
    opacity: 0.72;
}

.sidebar-link--disabled:hover { color: #9ca6b5; background: transparent; }
.sidebar-link--disabled .sidebar-brand-icon { filter: grayscale(0.45); opacity: 0.7; }
.sidebar-link--disabled small {
    margin-right: auto;
    padding: 0.13rem 0.38rem;
    border-radius: 0.35rem;
    color: #8b96a6;
    background: #f1f3f6;
    font-size: 0.55rem;
    font-weight: 800;
}

.app-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 0 0 auto;
    padding: 0.75rem 0.9rem 1rem;
    border-top: 1px solid #e9edf3;
    background: rgba(255, 255, 255, 0.96);
}

.sidebar-link--admin { margin-bottom: 0.25rem; }

.sidebar-menu { position: relative; }
.sidebar-menu__toggle span { min-width: 0; flex: 1; }
.sidebar-menu__chevron {
    width: 0.95rem !important;
    height: 0.95rem !important;
    flex: 0 0 0.95rem !important;
    color: #9aa5b5 !important;
    transition: transform 180ms ease;
}

.sidebar-menu__toggle[aria-expanded="true"] .sidebar-menu__chevron { transform: rotate(180deg); }

.sidebar-menu__panel {
    position: absolute;
    z-index: 2;
    right: calc(100% + 0.7rem);
    bottom: 0;
    width: min(13.75rem, calc(100vw - 18rem));
    min-width: 11rem;
    margin: 0;
    padding: 0.42rem;
    border: 1px solid #dce3ec;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1rem 2.4rem rgba(35, 63, 99, 0.16), 0 0.15rem 0.5rem rgba(35, 63, 99, 0.08);
    animation: sidebar-flyout-in 160ms ease-out both;
}

.sidebar-menu__panel::before {
    content: "";
    position: absolute;
    right: -0.34rem;
    bottom: 1rem;
    width: 0.62rem;
    height: 0.62rem;
    border-top: 1px solid #dce3ec;
    border-right: 1px solid #dce3ec;
    background: inherit;
    transform: rotate(45deg);
}

.sidebar-menu__panel[hidden] { display: none; }

@keyframes sidebar-flyout-in {
    from { opacity: 0; transform: translateX(0.4rem); }
    to { opacity: 1; transform: translateX(0); }
}

.sidebar-submenu-link {
    display: flex;
    width: 100%;
    min-height: 2.35rem;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 0.48rem;
    color: #66758a;
    background: transparent;
    font-size: 0.69rem;
    font-weight: 700;
    text-align: right;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
}

.sidebar-submenu-link:hover { color: #1d4ed8; background: #f2f6fc; }
.sidebar-submenu-link--danger { color: #d94a59; cursor: pointer; }
.sidebar-submenu-link--danger:hover { color: #c53040; background: #fff1f2; }

.sidebar-register-link {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.35rem;
    border-radius: 0.72rem;
    color: #fff;
    background: #1769e8;
    box-shadow: 0 0.65rem 1.35rem rgba(23, 105, 232, 0.2);
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration: none;
}

.sidebar-active {
    position: relative;
    background-color: #eef4ff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.sidebar-active::after {
    content: "";
    position: absolute;
    inset: 0.48rem 0 auto auto;
    width: 0.18rem;
    height: calc(100% - 0.96rem);
    border-radius: 999px;
    background: #287cf0;
}

.sidebar-active svg {
    color: #2563eb !important;
}

.dark .sidebar-active {
    background-color: rgba(65, 127, 224, 0.16) !important;
    color: #dcebff !important;
    box-shadow:
        inset 0 0 0 1px rgba(93, 156, 255, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.02);
}

.dark .sidebar-active svg {
    color: #78adff !important;
}

.dark .app-sidebar { border-color: #293848; background: #15202b; color: #eef4fb; box-shadow: -8px 0 30px rgba(0,0,0,0.16); }
.dark .app-sidebar__group--primary,
.dark .app-sidebar__footer { border-color: #293848; }
.dark .app-sidebar__footer { background: rgba(21, 32, 43, 0.98); }
.dark .app-sidebar__label { color: #75859a; }
.dark .sidebar-link,
.dark .sidebar-menu__toggle { color: #c7d1de; }
.dark .sidebar-link > svg,
.dark .sidebar-menu__toggle > svg:first-child { color: #8f9eb1; }
.dark .sidebar-link:hover,
.dark .sidebar-menu__toggle:hover { color: #f4f8ff; background: rgba(255,255,255,0.055); }
.dark .sidebar-brand-icon { border-color: #334356; background: #fff; box-shadow: none; }
.dark .sidebar-link--disabled,
.dark .sidebar-link--disabled:hover { color: #718094; background: transparent; }
.dark .sidebar-link--disabled small { color: #8390a1; background: rgba(255,255,255,0.055); }
.dark .sidebar-menu__panel {
    border-color: #334356;
    background: rgba(24, 38, 52, 0.98);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.34), 0 0.15rem 0.5rem rgba(0, 0, 0, 0.2);
}
.dark .sidebar-menu__panel::before { border-color: #334356; }
.dark .sidebar-submenu-link { color: #98a8bb; }
.dark .sidebar-submenu-link:hover { color: #cfe1ff; background: rgba(93,156,255,0.08); }
.dark .sidebar-submenu-link--danger { color: #ff98a3; }
.dark .sidebar-submenu-link--danger:hover { color: #ffb0b8; background: rgba(239,68,68,0.08); }

@media (prefers-reduced-motion: reduce) {
    .sidebar-menu__panel { animation: none; }
}

@media (max-height: 760px) and (min-width: 768px) {
    .app-sidebar__main { padding-top: 0.85rem; }
    .app-sidebar__brand { min-height: 2.7rem; margin-bottom: 0.55rem; }
    .app-sidebar__nav { gap: 0.75rem; }
    .sidebar-link,
    .sidebar-menu__toggle { min-height: 2.35rem; padding-block: 0.4rem; }
    .app-sidebar__footer { padding-block: 0.55rem 0.65rem; }
}

.alert-success {
    background-color: rgba(16,185,129,0.1);
    border: 1px solid var(--success);
    color: var(--success);
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
}

.alert-error {
    background-color: rgba(239,68,68,0.1);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
}

.alert-warning {
    background-color: rgba(245,158,11,0.1);
    border: 1px solid var(--warning);
    color: var(--warning);
    padding: 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
}

.tab-button {
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    transition: all 150ms;
    white-space: nowrap;
}

.tab-button.active {
    background-color: var(--surface);
    color: var(--primary);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.dark .tab-button.active {
    background-color: var(--surface);
    color: var(--primary);
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.tab-button:not(.active) { color: var(--muted); }
.tab-button:not(.active):hover { background-color: rgba(0,0,0,0.03); }
.dark .tab-button:not(.active):hover { background-color: rgba(255,255,255,0.05); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in { animation: fadeIn 0.4s ease-out forwards; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: flex; }
.htmx-request.htmx-indicator { display: flex; }

html.dark body {
    background-color: var(--bg) !important;
    color: var(--text);
}

.dark .bg-white,
.dark .bg-white\/60,
.dark .bg-white\/80,
.dark .bg-white\/85,
.dark .bg-white\/95 {
    background-color: var(--surface) !important;
}

.dark .bg-gray-50,
.dark .bg-slate-50,
.dark .bg-gray-50\/50,
.dark .bg-gray-50\/60,
.dark .bg-gray-50\/70,
.dark .bg-slate-50\/70 {
    background-color: var(--surface-soft) !important;
}

.dark .bg-gray-100,
.dark .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.dark .bg-blue-50,
.dark .bg-blue-50\/50,
.dark .bg-blue-50\/60,
.dark .bg-blue-50\/70 {
    background-color: var(--primary-soft) !important;
}

.dark .bg-\[\#f6f9ff\] {
    background-color: #101925 !important;
}

.dark .bg-\[\#f8fafc\] {
    background-color: var(--bg-soft) !important;
}

.dark .text-gray-900,
.dark .text-slate-950,
.dark .text-slate-900,
.dark .text-gray-800,
.dark .text-slate-800 {
    color: var(--text) !important;
}

.dark .text-gray-700,
.dark .text-slate-700 {
    color: var(--text-soft) !important;
}

.dark .text-gray-600,
.dark .text-slate-600,
.dark .text-gray-500,
.dark .text-slate-500 {
    color: var(--muted) !important;
}

.dark .text-gray-400,
.dark .text-slate-400 {
    color: var(--muted-soft) !important;
}

.dark .border-gray-100,
.dark .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.04) !important;
}

.dark .border-gray-200,
.dark .border-slate-200 {
    border-color: var(--border) !important;
}

.dark .border-gray-300,
.dark .border-slate-300 {
    border-color: var(--border-strong) !important;
}

.dark .border-blue-100,
.dark .border-blue-100\/50 {
    border-color: rgba(93, 156, 255, 0.18) !important;
}

.dark .border-blue-200 {
    border-color: rgba(93, 156, 255, 0.3) !important;
}

.dark .ring-white {
    --tw-ring-color: rgba(255, 255, 255, 0.06) !important;
}

.dark .shadow-sm,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
    box-shadow: var(--shadow-strong) !important;
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-slate-50:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-slate-100:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .hover\:bg-gray-50\/30:hover,
.dark .hover\:bg-gray-50\/50:hover,
.dark .hover\:bg-blue-50\/50:hover,
.dark .hover\:bg-blue-50\/60:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .hover\:bg-red-50:hover {
    background-color: rgba(248, 113, 113, 0.14) !important;
}

.dark .hover\:text-gray-800:hover,
.dark .hover\:text-gray-900:hover,
.dark .hover\:text-slate-700:hover,
.dark .hover\:text-slate-800:hover {
    color: var(--text) !important;
}

.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .tool-dropdown-card {
    border-color: var(--border) !important;
    background-color: var(--surface) !important;
}

.dark .tool-dropdown-card .chevron-icon {
    color: var(--muted) !important;
}

.dark .tool-dropdown-card--divided .custom-dropdown-container:not(:first-of-type)::before {
    background: rgba(255, 255, 255, 0.08);
}

.dark .dropdown-menu,
.dark [data-overlay-root="body"] > .relative,
.dark #notifications-preview,
.dark .w-72.bg-white,
.dark .w-40.bg-white,
.dark .w-56.bg-white {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

.dark .dropdown-search,
.dark select,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea {
    background-color: var(--surface-soft);
    color: var(--text);
    border-color: var(--border);
}

.dark select:focus,
.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark textarea:focus,
.dark .dropdown-search:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft);
    outline: none;
}

.dark .bg-slate-900,
.dark .bg-slate-950 {
    background-color: #0a1017 !important;
}

.dark .bg-black\/75 {
    background-color: rgba(2, 6, 23, 0.82) !important;
}

.dark .text-white\/60 {
    color: rgba(226, 232, 240, 0.68) !important;
}

.dark .text-slate-300 {
    color: #cbd5e1 !important;
}

.dark .bg-emerald-50 {
    background-color: rgba(52, 211, 153, 0.14) !important;
}

.dark .bg-emerald-100 {
    background-color: rgba(52, 211, 153, 0.18) !important;
}

.dark .bg-amber-50,
.dark .bg-amber-100 {
    background-color: rgba(251, 191, 36, 0.14) !important;
}

.dark .bg-indigo-50,
.dark .bg-indigo-100\/50 {
    background-color: rgba(129, 140, 248, 0.14) !important;
}

.dark .bg-green-100\/50 {
    background-color: rgba(74, 222, 128, 0.16) !important;
}

.dark .bg-slate-100\/70 {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .bg-red-50 {
    background-color: rgba(248, 113, 113, 0.14) !important;
}

.dark .text-emerald-700 {
    color: #6ee7b7 !important;
}

.dark .text-green-600,
.dark .text-green-700 {
    color: #86efac !important;
}

.dark .text-amber-700,
.dark .text-amber-800,
.dark .text-amber-900 {
    color: #fcd34d !important;
}

.dark .text-indigo-600,
.dark .text-indigo-700 {
    color: #a5b4fc !important;
}

.dark .border-amber-200 {
    border-color: rgba(251, 191, 36, 0.24) !important;
}

.dark .border-emerald-100 {
    border-color: rgba(52, 211, 153, 0.2) !important;
}

.dark .border-indigo-100 {
    border-color: rgba(129, 140, 248, 0.2) !important;
}

.dark .text-red-600 {
    color: #fda4af !important;
}

.dark #pricing {
    background:
        radial-gradient(circle at top, rgba(93, 156, 255, 0.08), transparent 30%),
        var(--bg-soft) !important;
}

.dark #pricing > div {
    color: var(--text) !important;
}

.dark #pricing .bg-slate-950 {
    background-color: #0a1119 !important;
}

.dark #pricing .shadow-slate-200\/60,
.dark #pricing .shadow-slate-200\/70 {
    --tw-shadow-color: rgba(0, 0, 0, 0.34) !important;
}

.dark #pricing .border-blue-100 {
    border-color: rgba(93, 156, 255, 0.22) !important;
}

.dark #pricing .bg-blue-50,
.dark #pricing .bg-blue-50\/60 {
    background-color: rgba(93, 156, 255, 0.12) !important;
}

.dark #pricing .text-sky-700 {
    color: #8ec5ff !important;
}

.dark #pricing .text-amber-700,
.dark #pricing .text-amber-800 {
    color: #f6c36d !important;
}

.dark #pricing [data-pricing-panel="consumer"] {
    background-color: rgba(56, 139, 253, 0.1) !important;
    border-color: rgba(93, 156, 255, 0.22) !important;
}

.dark #pricing [data-pricing-panel="producer"] {
    background-color: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}

.dark #pricing [data-pricing-panel] .border-white {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark #pricing [data-pricing-panel] .bg-sky-50,
.dark #pricing [data-pricing-panel] .bg-amber-50,
.dark #pricing [data-pricing-panel] .bg-slate-100 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark #pricing [data-pricing-panel] .ring-white {
    --tw-ring-color: rgba(255, 255, 255, 0.08) !important;
}

.dark #pricing #plan-finder-modal .bg-sky-50,
.dark #pricing #plan-finder-modal .hover\:bg-sky-100:hover {
    background-color: rgba(56, 139, 253, 0.14) !important;
}

.dark #pricing #plan-finder-modal .bg-amber-50,
.dark #pricing #plan-finder-modal .hover\:bg-amber-100:hover {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

.dark #tool-container > .flex.items-center.justify-center,
.dark .max-w-7xl.mx-auto.py-8,
.dark .max-w-5xl.mx-auto.py-8 {
    color: var(--text) !important;
}

.dark .panel-tab {
    color: var(--muted) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.dark .panel-tab:hover {
    color: var(--text) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.dark .panel-tab.active {
    color: var(--primary) !important;
    background-color: var(--surface) !important;
    border-color: var(--primary) !important;
}

.dark #panel-loading,
.dark #history-loading {
    background-color: rgba(11, 17, 24, 0.72) !important;
}

.dark #admin-tabs-container,
.dark .flex.overflow-x-auto.border-b.border-gray-100.bg-gray-50\/50 {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--border) !important;
}

.dark #settings-modal {
    background-color: rgba(3, 7, 18, 0.66) !important;
}

.dark #wallet-widget > .flex,
.dark #notifications-widget > button {
    box-shadow: var(--shadow-soft) !important;
}

.dark form[id$="-form"],
.dark form[hx-post="/api/translate"] {
    color: var(--text) !important;
}

.dark form[id$="-form"] .bg-white,
.dark form[hx-post="/api/translate"] .bg-white {
    background-color: var(--surface) !important;
}

.dark form[id$="-form"] .bg-gray-50\/50,
.dark form[id$="-form"] .bg-gray-50,
.dark form[hx-post="/api/translate"] .bg-gray-50\/50,
.dark form[hx-post="/api/translate"] .bg-gray-50 {
    background-color: var(--surface-soft) !important;
}

.dark form[id$="-form"] .border-dashed.border-blue-200,
.dark form[id$="-form"] .border-dashed.border-gray-200 {
    border-color: rgba(93, 156, 255, 0.24) !important;
}

.dark form[id$="-form"] [id$="-dropzone"] {
    background-image: none !important;
    background-color: var(--surface) !important;
}

.dark form[id$="-form"] [id$="-dropzone"]:hover {
    background-color: var(--surface) !important;
}

.dark form[id$="-form"] [id$="-card"],
.dark form[id$="-form"] [id$="-card-container"] > .bg-white {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

.dark form[id$="-form"] [id$="-upload-pb-container"],
.dark form[id$="-form"] [id$="-progress-bar-bg"],
.dark form[id$="-form"] [id$="-indeterminate-bar"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

.dark form[id$="-form"] .stepper-btn:hover,
.dark form[id$="-form"] .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.dark form[id$="-form"] .stepper-toast {
    background-color: rgba(251, 191, 36, 0.12) !important;
    border-color: rgba(251, 191, 36, 0.24) !important;
    color: #fcd34d !important;
}

.dark form[id$="-form"] label:has(input[type="radio"]:checked),
.dark form[id$="-form"] label:has(input[type="checkbox"]:checked),
.dark form[hx-post="/api/translate"] label:has(input[type="radio"]:checked) {
    border-color: rgba(93, 156, 255, 0.5) !important;
    background-color: rgba(93, 156, 255, 0.12) !important;
    box-shadow: 0 0 0 1px rgba(93, 156, 255, 0.14) inset !important;
}

.dark form[id$="-form"] label:has(input[type="radio"]:checked) .text-gray-800,
.dark form[id$="-form"] label:has(input[type="radio"]:checked) .text-gray-700,
.dark form[id$="-form"] label:has(input[type="checkbox"]:checked) .text-gray-800,
.dark form[id$="-form"] label:has(input[type="checkbox"]:checked) .text-gray-700,
.dark form[hx-post="/api/translate"] label:has(input[type="radio"]:checked) .text-gray-800 {
    color: #dbeafe !important;
}

.dark form[id$="-form"] label:has(input[type="radio"]:checked) .text-gray-500,
.dark form[id$="-form"] label:has(input[type="checkbox"]:checked) .text-gray-500 {
    color: #bfdbfe !important;
}

.dark form[id$="-form"] input[type="checkbox"].peer + div.w-10.h-6.rounded-full {
    background-color: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    box-shadow: inset 0 1px 1px rgba(2, 6, 23, 0.22);
}

.dark form[id$="-form"] input[type="checkbox"].peer:checked + div.w-10.h-6.rounded-full {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: none !important;
}

.dark form[id$="-form"] .media-action-footer,
.dark form[id$="-form"] .mt-auto.flex.justify-between.items-center.pt-4.border-t.border-gray-100 {
    border-color: var(--border) !important;
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.dark form[id$="-form"] .media-primary-action-btn.bg-white {
    background-color: var(--surface-soft) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-soft) !important;
}

.dark form[id$="-form"] .media-primary-action-btn.bg-gray-400 {
    background-color: rgba(148, 163, 184, 0.28) !important;
    color: rgba(226, 232, 240, 0.82) !important;
}

.dark form[id$="-form"] [data-srt-more-download-menu] {
    background-color: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Media transcript editor widget */
.media-review-shell[data-review-mode="studio"] .media-review-cue-list { background: #171717; }
.media-review-cue-list { min-height: 7rem; }
.media-review-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.85rem 1rem 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(225, 29, 72, 0.24);
    border-radius: 0.7rem;
    color: #9f1239;
    background: linear-gradient(135deg, rgba(255, 241, 242, 0.98), rgba(255, 247, 237, 0.92));
    box-shadow: 0 8px 22px rgba(159, 18, 57, 0.08);
}
.media-review-error.hidden { display: none; }
.media-review-error__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    margin-top: 0.05rem;
    color: #e11d48;
}
.media-review-error__copy strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    font-weight: 900;
}
.media-review-error__copy p {
    margin: 0;
    color: #be123c;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.8;
}
.media-review-cue.has-validation-error {
    border-color: #fb7185 !important;
    background: #fff1f2 !important;
    box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.12);
}
.media-review-cue.has-validation-error textarea {
    border-color: #e11d48 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.11) !important;
}
.media-review-shell[data-review-mode="studio"] .media-review-cue {
    background: #202020;
    border-color: #333;
    color: #fff;
}
.media-review-shell[data-review-mode="studio"] .media-review-cue textarea {
    background: #121212;
    border-color: #3f3f46;
    color: #f8fafc;
}
.media-review-shell[data-review-mode="studio"] .media-review-error {
    border-color: rgba(251, 113, 133, 0.38);
    color: #fecdd3;
    background: linear-gradient(135deg, rgba(76, 5, 25, 0.96), rgba(67, 20, 7, 0.92));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}
.media-review-shell[data-review-mode="studio"] .media-review-error__copy p { color: #fda4af; }
.media-review-shell[data-review-mode="studio"] .media-review-cue.has-validation-error {
    border-color: #fb7185 !important;
    background: #35151c !important;
}
.media-review-shell[data-review-mode="studio"] .media-review-cue.has-validation-error textarea {
    border-color: #fb7185 !important;
    color: #fff1f2 !important;
    background: #1f0d12 !important;
}
.media-review-shell[data-review-mode="studio"] .media-review-cue.is-active {
    border-color: #67e8f9;
    box-shadow: 0 0 0 1px rgba(103,232,249,.5);
}
.media-review-shell[data-review-mode="simple"] .media-review-cue.is-active {
    border-color: #2563eb;
    background: #eff6ff;
}
.media-review-timeline-cue {
    user-select: none;
    touch-action: none;
    cursor: grab;
}
.media-review-timeline-cue.is-active {
    background: #06b6d4;
    border-color: #a5f3fc;
    color: #082f49;
}
.media-review-timeline-cue.is-dragging {
    cursor: grabbing;
    filter: brightness(1.12);
    z-index: 20;
}
.media-review-timeline-cue.is-trim-left::before,
.media-review-timeline-cue.is-trim-right::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 7px;
    border-color: rgba(255,255,255,.9);
    pointer-events: none;
}
.media-review-timeline-cue.is-trim-left::before {
    left: 3px;
    border-left: 2px solid rgba(255,255,255,.9);
    border-top: 2px solid rgba(255,255,255,.9);
    border-bottom: 2px solid rgba(255,255,255,.9);
}
.media-review-timeline-cue.is-trim-right::after {
    right: 3px;
    border-right: 2px solid rgba(255,255,255,.9);
    border-top: 2px solid rgba(255,255,255,.9);
    border-bottom: 2px solid rgba(255,255,255,.9);
}
.media-review-zoom-button {
    min-width: 1.75rem;
    height: 1.5rem;
    border-radius: 0.25rem;
    background: rgba(255,255,255,0.08);
    color: #e5e7eb;
    font-weight: 800;
    line-height: 1;
}
.media-review-zoom-button:hover:not(:disabled) {
    background: rgba(103,232,249,0.18);
    color: #cffafe;
}
.media-review-zoom-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.media-review-play-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 5rem;
    height: 1.9rem;
    padding: 0 0.7rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(103,232,249,0.35);
    background: rgba(8,47,73,0.72);
    color: #cffafe;
    font-weight: 900;
    line-height: 1;
}
.media-review-play-button:hover {
    background: rgba(14,116,144,0.82);
    border-color: rgba(165,243,252,0.72);
}
.media-review-play-button.is-playing {
    background: rgba(180,83,9,0.78);
    border-color: rgba(252,211,77,0.62);
    color: #fffbeb;
}
.media-review-split-button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 1.9rem;
    padding: 0 0.7rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(251,191,36,0.44);
    background: rgba(120,53,15,0.72);
    color: #fef3c7;
    font-weight: 900;
    line-height: 1;
}
.media-review-split-button:hover {
    background: rgba(180,83,9,0.82);
    border-color: rgba(252,211,77,0.72);
}
.media-review-shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.25rem;
    background: rgba(255,255,255,0.12);
    color: #fffbeb;
    font-size: 0.68rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.media-review-simple-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 5.5rem;
    height: 2.25rem;
    padding: 0 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15,23,42,0.05);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.media-review-simple-play-button:hover {
    border-color: #60a5fa;
    background: #eff6ff;
}
.media-review-simple-play-button.is-playing {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}
.media-review-simple-progress {
    position: relative;
    display: block;
    width: 100%;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,0.08);
    cursor: pointer;
}
.media-review-simple-progress span {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    box-shadow: 0 0 10px rgba(37,99,235,0.2);
}
.media-workspace {
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 4%, rgba(15, 111, 236, 0.07), transparent 30%),
        linear-gradient(180deg, var(--surface), var(--surface));
}

/* Media translation: keep language and tone with the rest of its settings. */
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-settings {
    overflow: visible;
    margin-top: 0;
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-settings .tool-settings-scroll {
    overflow: visible;
    padding: 1.25rem;
    gap: 1.25rem;
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-choice {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface);
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-choice:focus-within {
    border-color: var(--primary);
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-choice .dropdown-menu {
    z-index: 80;
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-choice[data-name="target_lang"] .dropdown-menu {
    right: auto;
    left: 0;
}
:is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-choice .dropdown-toggle {
    min-height: 4.1rem;
}
@media (min-width: 1280px) {
    #media-translate-form .media-translate-settings {
        overflow: hidden;
    }
    #media-translate-form .media-translate-settings > div:first-child {
        flex-shrink: 0;
    }
    #media-translate-form .media-translate-settings .tool-settings-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-block: 15px;
        gap: 16px;
    }
    #media-translate-form .media-translate-settings [data-advanced-settings-panel] {
        gap: 20px;
    }
    #media-translate-form .media-translate-settings .tool-settings-scroll > * {
        flex-shrink: 0;
    }
    :is(#media-translate-form, #srt-translate-form, #transcript-form) {
        height: calc(100vh - 10rem);
        max-height: calc(100vh - 10rem);
        margin-top: 2rem;
    }
    :is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-settings {
        height: 100%;
        max-height: 100%;
    }
    :is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-settings {
        width: 26rem;
        flex-basis: 26rem;
    }
}
@media (min-height: 900px) and (min-width: 1280px) {
    #media-translate-form .media-translate-settings .tool-settings-scroll {
        overflow-y: hidden;
        scrollbar-gutter: auto;
    }
}
@media (max-height: 760px) and (min-width: 1280px) {
    :is(#media-translate-form, #srt-translate-form, #transcript-form) .media-translate-settings .tool-settings-scroll {
        overflow-y: auto;
    }
}

.media-workspace #media-dropzone {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    background: color-mix(in srgb, var(--surface) 96%, var(--primary-soft));
    box-shadow: none;
}

.media-state-shell {
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: clamp(1rem, 4vw, 3.5rem);
}

.media-state-card {
    width: min(100%, 54rem);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 4px 20px rgba(21, 60, 105, 0.045);
}

.media-ready-details.hidden,
.media-progress-panel.hidden,
.media-processing-panel.hidden,
.media-complete-panel.hidden,
.media-inline-error.hidden,
.media-success-badge.hidden { display: none; }

.media-state-header {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border);
}

.media-file-mark,
.media-complete-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.9rem;
    color: var(--primary);
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent);
}

.media-file-mark svg { width: 1.65rem; height: 1.65rem; }
.media-file-summary { min-width: 0; }
.media-file-name, .media-file-meta { text-align: right; }
.media-state-card [hidden] { display: none !important; }
.media-eyebrow { color: var(--muted); font-size: 0.7rem; font-weight: 700; }
.media-file-name {
    max-width: 100%;
    overflow: hidden;
    margin-top: 0.15rem;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.media-file-meta { margin-top: 0.2rem; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.media-change-file-btn,
.media-success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    color: var(--text-soft);
    background: var(--surface);
    font-size: 0.72rem;
    font-weight: 750;
    transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.media-change-file-btn svg,
.media-success-badge svg { width: 1rem; height: 1rem; }
.media-change-file-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.media-change-file-btn:active { transform: translateY(1px); }
.media-success-badge { border-color: color-mix(in srgb, var(--success) 32%, var(--border)); color: var(--success); background: color-mix(in srgb, var(--success) 9%, var(--surface)); }

.media-ready-details {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1.5rem;
    overflow: hidden;
    border: 0;
    background: transparent;
}
.media-ready-details--compact { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.media-detail-item { min-width: 0; padding: 0; }
.media-detail-item span,
.media-detail-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-detail-item span { color: var(--muted); font-size: 0.67rem; font-weight: 650; }
.media-detail-item strong { margin-top: 0.35rem; color: var(--text); font-size: 0.8rem; font-weight: 600; }
.media-ready-details .media-detail-item:first-child strong { white-space: normal; line-height: 1.8; }
.media-detail-item--cost strong { color: var(--primary); font-variant-numeric: tabular-nums; }

.media-progress-panel,
.media-processing-panel,
.media-complete-panel { padding: 1.5rem; }
.media-progress-heading,
.media-processing-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.media-progress-heading > div { display: flex; flex-direction: column; gap: 0.2rem; }
.media-progress-heading strong,
.media-processing-copy h3 { color: var(--text); font-size: 0.9rem; font-weight: 600; }
.media-progress-heading span:not(.media-progress-value) { color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.media-progress-value,
.media-processing-percent { color: var(--primary); font-size: 0.82rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.media-progress-track { height: 6px; margin-top: 1rem; overflow: hidden; border-radius: 999px; background: var(--border); }
.media-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f6fec, #2dc8cf); box-shadow: 0 0 0.9rem rgba(15,111,236,0.2); transition: width 500ms ease; }

.media-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; }
.media-stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--muted); text-align: center; }
.media-stepper li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 0.5rem; right: 50%; width: 100%; height: 1px; background: var(--border); }
.media-stepper li span { position: relative; z-index: 1; display: grid; place-items: center; width: 1rem; height: 1rem; border: 3px solid var(--surface); border-radius: 50%; background: var(--border-strong); font-size: 0.65rem; line-height: 1; }
.media-stepper li b { font-size: 0.68rem; font-weight: 500; }
.media-stepper li.is-active { color: var(--primary); }
.media-stepper li.is-active span { color: #fff; background: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.media-stepper li.is-complete { color: var(--text-soft); }
.media-stepper li.is-complete span { border: 0; color: var(--primary); background: var(--surface); }
.media-stepper li.is-complete:not(:last-child)::after { background: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.media-stepper li.is-current { color: var(--primary); }
.media-stepper li.is-current span { background: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.media-stepper li.is-done { color: var(--text-soft); }
.media-stepper li.is-done span { background: var(--primary); }
.media-stepper li.is-done:not(:last-child)::after { background: color-mix(in srgb, var(--primary) 55%, var(--border)); }
.media-stepper--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.media-background-note {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding: 0;
    border-radius: 0.7rem;
    color: var(--muted);
    background: transparent;
    font-size: 0.7rem;
}
.media-background-note svg { width: 1rem; height: 1rem; color: var(--primary); }
.media-background-note a,
.media-retention-note a { color: var(--primary); font-weight: 800; }

.media-inline-error {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.8rem;
    margin: 1.35rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border));
    border-radius: 0.8rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.media-inline-error > svg { width: 1.25rem; height: 1.25rem; }
.media-inline-error strong { font-size: 0.78rem; }
.media-inline-error p { margin-top: 0.18rem; color: var(--text-soft); font-size: 0.7rem; line-height: 1.7; }
.media-inline-error button { min-height: 2.1rem; padding: 0.4rem 0.75rem; border: 1px solid currentColor; border-radius: 0.55rem; font-size: 0.7rem; font-weight: 800; }

.media-complete-heading { display: flex; align-items: center; gap: 0.85rem; }
.media-complete-icon { width: 1.5rem; height: 1.5rem; color: var(--success); background: transparent; box-shadow: none; }
.media-complete-icon svg { width: 1.35rem; height: 1.35rem; }
.media-complete-heading h3 { margin: 0; color: var(--text); font-size: 1rem; font-weight: 700; }
.media-downloads { margin-top: 1.25rem; }
.media-download-card { display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: 4rem; padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 0.75rem; color: var(--text-soft); background: var(--surface); transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease; }
.media-download-card:hover { border-color: color-mix(in srgb, var(--primary) 52%, var(--border)); background: var(--primary-soft); }
.media-download-card:active { transform: translateY(1px); }
.media-download-card > svg { width: 1.3rem; height: 1.3rem; flex: 0 0 auto; color: var(--primary); }
.media-download-card > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.12rem; }
.media-download-card strong { color: inherit; font-size: 0.75rem; font-weight: 820; }
.media-download-card small { overflow: hidden; color: var(--muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.media-download-card--primary { min-height: 4.5rem; padding-inline: 1rem; border-color: transparent; color: var(--text); background: var(--primary-soft); box-shadow: none; }
.media-download-card--primary:hover { border-color: var(--primary); background: var(--primary-soft); }
.media-download-card--primary > svg,
.media-download-card--primary small { color: var(--muted); }
.media-download-card--primary > b { padding: 0.7rem 1rem; border-radius: 0.5rem; background: var(--primary); color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.media-download-secondary { display: grid; grid-template-columns: 1fr; margin-top: 0.5rem; }
.media-download-secondary .media-download-card { min-height: 3.4rem; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding-inline: 0.5rem; }
.media-download-secondary .media-download-card::after { content: "دانلود ↓"; color: var(--primary); font-size: 0.75rem; white-space: nowrap; }
.media-download-card strong { font-weight: 600; }
.media-download-card > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.12rem; }
.media-download-card > div span { overflow: hidden; color: var(--muted); font-size: 0.65rem; text-overflow: ellipsis; white-space: nowrap; }
.media-download-secondary > a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.4rem; padding: 0.65rem 0.5rem; border-bottom: 1px solid var(--border); color: var(--text-soft); }
.media-download-secondary > a:hover { color: var(--primary); background: var(--primary-soft); }
.media-download-secondary > a b { color: var(--primary); font-size: 0.72rem; font-weight: 650; white-space: nowrap; }
.media-retention-note { margin-top: 1rem; color: var(--muted); font-size: 0.68rem; line-height: 1.75; }

.media-action-footer { display: flex; justify-content: flex-end; padding: 0 1.35rem 1.35rem; }
.media-state-card .media-action-footer { align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem 1.5rem; }
.media-state-card .media-action-footer.is-ready {
    margin: 1.75rem 1.5rem 1.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 0.8rem;
    background: var(--bg-soft);
}
.media-state-card #media-ready-cost {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}
.media-state-card #media-ready-cost span { font-size: 0.72rem; font-weight: 500; }
.media-state-card #media-ready-cost strong {
    margin: 0;
    color: var(--primary);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.2;
}
.media-state-card #srt-ready-cost { display: flex; align-items: baseline; gap: 0.65rem; }
.media-state-card #srt-ready-cost span { color: var(--text-soft); font-size: 0.72rem; font-weight: 500; }
.media-state-card #srt-ready-cost strong { color: var(--primary); font-size: 1.08rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.media-state-card .media-primary-action-btn { font-weight: 600; box-shadow: none; margin-inline-start: auto; }
.media-state-card .media-primary-action-btn.is-secondary { min-width: 0; min-height: 2rem; padding: 0; border: 0; background: transparent; color: var(--primary); }
.media-state-card .media-primary-action-btn.is-secondary:hover { text-decoration: underline; }
.media-state-card a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.media-primary-action-btn { min-width: 12.5rem; min-height: 2.85rem; padding: 0.7rem 1.4rem; border: 1px solid transparent; border-radius: 0.68rem; color: #fff; background: var(--primary); box-shadow: 0 0.6rem 1.35rem rgba(15,111,236,0.16); font-size: 0.78rem; font-weight: 850; line-height: 1; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; }
.media-primary-action-btn:hover { background: color-mix(in srgb, var(--primary) 88%, #07172b); }
.media-primary-action-btn:active { transform: translateY(1px); }
.media-primary-action-btn:disabled { cursor: not-allowed; color: var(--muted); background: var(--bg-soft); box-shadow: none; }
.media-primary-action-btn:disabled:active { transform: none; }
.media-primary-action-btn.is-secondary { border-color: var(--border-strong); color: var(--text-soft); background: var(--surface); box-shadow: none; }
.media-primary-action-btn.is-secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.media-change-file-btn:focus-visible,
.media-inline-error button:focus-visible,
.media-download-card:focus-visible,
.media-primary-action-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent); outline-offset: 3px; }

@media (max-width: 720px) {
    .media-state-shell { padding: 0.75rem; }
    .media-state-header { grid-template-columns: 2.75rem minmax(0, 1fr); padding: 1rem; }
    .media-file-mark { width: 2.75rem; height: 2.75rem; }
    .media-change-file-btn,
    .media-success-badge { grid-column: 1 / -1; justify-self: stretch; }
    .media-ready-details { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1rem 1rem 0; }
    .media-ready-details:not(.media-ready-details--compact) .media-detail-item:first-child { grid-column: 1 / -1; }
    .media-progress-panel,
    .media-processing-panel,
    .media-complete-panel { padding: 1.1rem 1rem 1.25rem; }
    .media-stepper b { max-width: 4.5rem; }
    .media-background-note { grid-template-columns: auto 1fr; }
    .media-background-note a { grid-column: 2; }
    .media-download-secondary { grid-template-columns: 1fr; }
    .media-inline-error { grid-template-columns: auto 1fr; margin: 1rem; }
    .media-inline-error button { grid-column: 1 / -1; }
    .media-action-footer { padding: 0 1rem 1rem; }
    .media-state-card .media-action-footer { flex-wrap: wrap; padding: 1.5rem 1rem 1rem; }
    .media-state-card .media-action-footer.is-ready { margin: 1.5rem 1rem 1rem; padding: 1rem; }
    .media-state-card #media-ready-cost { width: 100%; justify-content: flex-start; }
    .media-state-card .media-primary-action-btn.is-secondary { width: auto; }
    .media-download-card--primary { flex-wrap: wrap; }
    .media-download-card--primary > b { text-align: center; }
    .media-primary-action-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .media-state-card *, .media-state-card *::after { transition: none !important; animation: none !important; }
}
.srt-state-shell { width: 100%; min-height: 100%; }
.srt-state-card { margin-inline: auto; }
.srt-file-mark { flex: 0 0 auto; }
.srt-state-card .media-complete-heading small { display: block; color: var(--muted); font-size: 0.67rem; }
.srt-state-card .media-complete-heading h3 { margin-top: 0.15rem; }
.media-review-viewport-scrollbar {
    position: relative;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,0.45);
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.media-review-viewport-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 10px rgba(34,211,238,0.38);
    cursor: grab;
    touch-action: none;
}
.media-review-viewport-thumb.is-dragging {
    cursor: grabbing;
    filter: brightness(1.08);
}
.media-review-viewport-thumb.is-disabled {
    cursor: default;
    opacity: 0.7;
}
.media-review-playhead {
    z-index: 30;
    pointer-events: auto;
    cursor: ew-resize;
}
.media-review-playhead-handle {
    position: absolute;
    top: 0.2rem;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    transform: translateX(-50%);
    background: #67e8f9;
    border: 2px solid #ecfeff;
    box-shadow: 0 0 0 2px rgba(8,47,73,0.8), 0 0 14px rgba(103,232,249,0.8);
    pointer-events: auto;
}
.media-review-playhead.is-dragging .media-review-playhead-handle {
    transform: translateX(-50%) scale(1.08);
}

/* Dashboard account overview — Aurora Media / Midnight Glass */
.dashboard-page,
.dark .dashboard-page {
    background: transparent;
}

.dashboard-overview {
    position: relative;
    isolation: isolate;
    min-height: 16.75rem;
    overflow: hidden;
    border: 1px solid rgba(69, 190, 236, 0.58);
    border-radius: 1.15rem;
    color: #10233f;
    background:
        radial-gradient(circle at 9% 18%, rgba(105, 235, 224, 0.52) 0, rgba(105, 235, 224, 0) 31%),
        radial-gradient(circle at 54% -6%, rgba(123, 177, 255, 0.42) 0, rgba(123, 177, 255, 0) 39%),
        radial-gradient(circle at 94% 74%, rgba(152, 190, 255, 0.27) 0, rgba(152, 190, 255, 0) 34%),
        linear-gradient(112deg, #e8fdff 0%, #edf7ff 48%, #dcecff 100%);
    box-shadow:
        0 20px 42px rgba(41, 105, 162, 0.12),
        0 3px 10px rgba(15, 111, 236, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.dashboard-overview::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: 0.42;
    background-image:
        radial-gradient(circle, rgba(26, 122, 206, 0.35) 0.7px, transparent 0.8px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%);
    background-position: 0 0, 0 0;
    background-size: 11px 11px, 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 27%, transparent 72%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 27%, transparent 72%, #000 100%);
    pointer-events: none;
}

.dashboard-overview::after {
    position: absolute;
    z-index: 4;
    inset: 0.28rem;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 0.92rem;
    box-shadow: inset 0 0 22px rgba(255, 255, 255, 0.16);
    pointer-events: none;
}

.dashboard-overview__wave {
    position: absolute;
    z-index: 0;
    top: -0.35rem;
    left: -2%;
    width: 104%;
    height: 58%;
    overflow: visible;
    fill: none;
    stroke: rgba(255, 255, 255, 0.84);
    stroke-width: 1.15;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(52, 147, 228, 0.12));
    pointer-events: none;
}

.dashboard-overview__content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: minmax(7.4rem, 1fr) auto;
    min-height: 16.75rem;
    padding: 1.55rem 2rem 1.45rem;
}

.dashboard-overview__intro {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.95rem;
    padding-block-start: 0.2rem;
}

.dashboard-overview__intro-copy {
    min-width: 0;
    padding-block-start: 0.2rem;
}

.dashboard-overview__title {
    margin: 0;
    color: #10233f;
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.45;
    text-wrap: balance;
}

.dashboard-overview__title bdi,
.dashboard-overview__value {
    font-variant-numeric: tabular-nums;
}

.dashboard-overview__subtitle {
    margin: 0.2rem 0 0;
    color: #5f7188;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.7;
}

.dashboard-overview__avatar,
.dashboard-overview__icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #0f6fec;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dashboard-overview__avatar {
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1rem;
}

.dashboard-overview__avatar svg {
    width: 1.65rem;
    height: 1.65rem;
}

.dashboard-overview__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    min-height: 6.7rem;
    border: 1px solid rgba(66, 139, 205, 0.28);
    border-radius: 1.05rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(243, 250, 255, 0.34));
    box-shadow:
        0 8px 18px rgba(42, 102, 160, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        inset 0 -1px 0 rgba(55, 127, 194, 0.05);
}

.dashboard-overview__metric {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.2rem 0.85rem;
}

.dashboard-overview__metric:not(:last-child)::after {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0;
    width: 1px;
    content: "";
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95) 16%, rgba(255, 255, 255, 0.95) 84%, transparent);
    box-shadow: 1px 0 0 rgba(39, 116, 181, 0.06);
}

.dashboard-overview__metric-inner {
    display: flex;
    min-width: 0;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.dashboard-overview__metric-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-overview__icon {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
}

.dashboard-overview__icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.dashboard-overview__value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #10233f;
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-overview__value--plan {
    color: #0f6fec;
    font-size: 1.1rem;
}

.dashboard-overview__label {
    display: block;
    margin-block-start: 0.08rem;
    overflow: hidden;
    color: #526982;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.55;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-overview__metric--coin .dashboard-overview__icon {
    color: #e78809;
    box-shadow:
        0 0 24px rgba(245, 158, 11, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-overview__metric--plan .dashboard-overview__icon {
    box-shadow:
        0 0 26px rgba(15, 111, 236, 0.19),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-overview__metric--activity .dashboard-overview__icon {
    color: #1375df;
}

.dashboard-overview__progress {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    width: min(90%, 12.25rem);
    height: 0.34rem;
    margin-block-start: 0.55rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    color: #0f6fec;
    background: rgba(105, 131, 160, 0.23);
    box-shadow: inset 0 1px 2px rgba(15, 35, 63, 0.08);
}

.dashboard-overview__progress::-webkit-progress-bar {
    border-radius: inherit;
    background: rgba(105, 131, 160, 0.23);
}

.dashboard-overview__progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6fec 0%, #197ce5 56%, #35d5d0 100%);
    box-shadow: 0 0 10px rgba(15, 111, 236, 0.26);
    transition: width 320ms ease;
}

.dashboard-overview__progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, #0f6fec 0%, #197ce5 56%, #35d5d0 100%);
    box-shadow: 0 0 10px rgba(15, 111, 236, 0.26);
}

/* The selected dark reference keeps the same information architecture and turns
   the single card into one Midnight Glass surface. */
.dark .dashboard-overview {
    border-color: rgba(30, 131, 224, 0.5);
    color: #f8fbff;
    background:
        radial-gradient(circle at 48% -18%, rgba(39, 104, 238, 0.82) 0, rgba(39, 104, 238, 0) 45%),
        radial-gradient(circle at 3% 15%, rgba(3, 118, 128, 0.56) 0, rgba(3, 118, 128, 0) 34%),
        linear-gradient(104deg, #063843 0%, #0c346d 34%, #08285a 56%, #03132b 100%);
    box-shadow:
        0 24px 54px rgba(0, 11, 29, 0.42),
        0 5px 16px rgba(16, 93, 190, 0.18),
        inset 0 1px 0 rgba(73, 179, 255, 0.28);
}

.dark .dashboard-overview::before {
    opacity: 0.42;
    background-image:
        radial-gradient(circle, rgba(121, 202, 255, 0.55) 0.7px, transparent 0.9px),
        linear-gradient(156deg, transparent 0 36%, rgba(55, 129, 239, 0.11) 36.2% 58%, transparent 58.2% 100%);
    background-size: 78px 68px, 100% 100%;
    -webkit-mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.14) 42%, #000);
    mask-image: linear-gradient(90deg, #000, rgba(0, 0, 0, 0.14) 42%, #000);
}

.dark .dashboard-overview::after {
    border-color: rgba(44, 139, 248, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(137, 216, 255, 0.12),
        inset 0 0 30px rgba(3, 20, 48, 0.22);
}

.dark .dashboard-overview__wave {
    top: -1.2rem;
    opacity: 0.12;
    stroke: #75d8ff;
    filter: drop-shadow(0 0 9px rgba(42, 164, 255, 0.26));
}

.dark .dashboard-overview__title,
.dark .dashboard-overview__value {
    color: #f8fbff;
}

.dark .dashboard-overview__subtitle,
.dark .dashboard-overview__label {
    color: #adbed4;
}

.dark .dashboard-overview__value--plan {
    color: #f8fbff;
}

.dark .dashboard-overview__avatar,
.dark .dashboard-overview__icon {
    color: #8ad8ff;
    border-color: rgba(54, 143, 248, 0.26);
    background: rgba(4, 25, 57, 0.48);
    box-shadow:
        0 0 0 1px rgba(31, 122, 232, 0.08),
        0 0 24px rgba(15, 111, 236, 0.25),
        inset 0 1px 0 rgba(153, 220, 255, 0.08);
}

.dark .dashboard-overview__avatar {
    box-shadow:
        0 0 0 1px rgba(31, 122, 232, 0.1),
        0 0 28px rgba(15, 111, 236, 0.24),
        inset 0 1px 0 rgba(153, 220, 255, 0.1);
}

.dark .dashboard-overview__metrics {
    border: 1px solid rgba(40, 128, 232, 0.25);
    background: rgba(1, 15, 38, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(115, 197, 255, 0.06),
        inset 0 -14px 36px rgba(1, 11, 30, 0.14);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

.dark .dashboard-overview__metric:not(:last-child)::after {
    background: linear-gradient(180deg, transparent, rgba(29, 121, 236, 0.72) 17%, rgba(29, 121, 236, 0.72) 83%, transparent);
    box-shadow: 0 0 12px rgba(15, 111, 236, 0.42);
}

.dark .dashboard-overview__metric--coin .dashboard-overview__icon {
    color: #ffbc35;
    border-color: rgba(251, 180, 50, 0.2);
    background: rgba(95, 57, 7, 0.24);
    box-shadow:
        0 0 24px rgba(245, 158, 11, 0.35),
        inset 0 1px 0 rgba(255, 224, 153, 0.09);
}

.dark .dashboard-overview__metric--plan .dashboard-overview__icon {
    box-shadow:
        0 0 30px rgba(31, 150, 255, 0.42),
        inset 0 1px 0 rgba(162, 228, 255, 0.1);
}

.dark .dashboard-overview__metric--activity .dashboard-overview__icon {
    color: #6fc8ff;
}

.dark .dashboard-overview__progress {
    background: rgba(70, 119, 184, 0.2);
    box-shadow: inset 0 1px 2px rgba(0, 7, 22, 0.48);
}

.dark .dashboard-overview__progress::-webkit-progress-value,
.dark .dashboard-overview__progress::-moz-progress-bar {
    background: linear-gradient(90deg, #146cf6 0%, #159eff 55%, #19e1e1 100%);
    box-shadow: 0 0 14px rgba(22, 160, 255, 0.58);
}

.dark .dashboard-overview__progress::-webkit-progress-bar {
    background: rgba(70, 119, 184, 0.2);
}

/* Dashboard workflow launchers — soft background artwork, no foreground logo tiles. */
.dashboard-tools {
    position: relative;
    z-index: 5;
    margin-top: 1.55rem;
    margin-bottom: 2rem;
}

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

.dashboard-tool-card {
    --tool-accent: #0f6fec;
    --tool-accent-rgb: 15, 111, 236;
    --tool-soft-rgb: 185, 218, 255;
    --tool-cta-color: #0f6fec;
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    min-height: 16.6rem;
    overflow: hidden;
    border: 1px solid rgba(var(--tool-accent-rgb), 0.15);
    border-radius: 1.15rem;
    color: #10233f;
    background:
        radial-gradient(circle at 18% 10%, rgba(var(--tool-soft-rgb), 0.32), transparent 43%),
        linear-gradient(152deg, rgba(255, 255, 255, 0.99), rgba(251, 253, 255, 0.94));
    box-shadow:
        0 16px 32px rgba(var(--tool-accent-rgb), 0.1),
        0 3px 9px rgba(23, 53, 84, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 260ms ease,
        box-shadow 260ms ease;
}

.dashboard-tool-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: 0.38;
    background-image: radial-gradient(circle, rgba(var(--tool-accent-rgb), 0.28) 0.65px, transparent 0.8px);
    background-position: 0 0;
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 58%);
    mask-image: linear-gradient(135deg, #000 0%, transparent 58%);
    pointer-events: none;
}

.dashboard-tool-card::after {
    position: absolute;
    z-index: 4;
    inset: 0.22rem;
    content: "";
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 0.92rem;
    pointer-events: none;
}

.dashboard-tool-card--video {
    --tool-accent: #0f6fec;
    --tool-accent-rgb: 15, 111, 236;
    --tool-soft-rgb: 167, 207, 255;
    border-color: rgba(15, 111, 236, 0.44);
    box-shadow:
        0 18px 38px rgba(15, 111, 236, 0.18),
        0 4px 12px rgba(22, 70, 128, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.dashboard-tool-card--srt {
    --tool-accent: #16a36c;
    --tool-accent-rgb: 22, 163, 108;
    --tool-soft-rgb: 178, 239, 211;
    --tool-cta-color: #139661;
}

.dashboard-tool-card--transcript {
    --tool-accent: #7448e8;
    --tool-accent-rgb: 116, 72, 232;
    --tool-soft-rgb: 211, 196, 255;
    --tool-cta-color: #7042e4;
}

.dashboard-tool-card__art {
    position: absolute;
    z-index: 0;
    top: -1.15rem;
    right: auto;
    left: -3.4rem;
    width: 17rem;
    height: 10.75rem;
    color: var(--tool-accent);
    opacity: 0.115;
    filter: blur(0.1px) drop-shadow(0 0 16px rgba(var(--tool-accent-rgb), 0.18));
    transform: rotate(-3deg) scale(1.02);
    transform-origin: center;
    transition: opacity 260ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dashboard-tool-card--srt .dashboard-tool-card__art {
    top: -1.25rem;
    left: -2.65rem;
    width: 16rem;
}

.dashboard-tool-card--transcript .dashboard-tool-card__art {
    top: -1.4rem;
    left: -4rem;
    width: 17.4rem;
}

.dashboard-tool-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 16.6rem;
    flex-direction: column;
    padding: 7.65rem 1.15rem 1rem;
}

.dashboard-tool-card h3 {
    margin: 0;
    color: #10233f;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.6;
    text-wrap: balance;
}

.dashboard-tool-card p {
    display: -webkit-box;
    min-height: 3.25rem;
    margin: 0.35rem 0 0.85rem;
    overflow: hidden;
    color: #63748a;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.8;
    text-wrap: pretty;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.dashboard-tool-card__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3rem;
    align-items: center;
    margin-top: auto;
    gap: 0.55rem;
}

.dashboard-tool-card__action,
.dashboard-tool-card__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    color: var(--tool-accent);
    border: 1px solid rgba(var(--tool-accent-rgb), 0.08);
    background: rgba(var(--tool-soft-rgb), 0.43);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 18px rgba(var(--tool-accent-rgb), 0.08);
}

.dashboard-tool-card__action {
    border-radius: 0.88rem;
    color: var(--tool-cta-color);
    border-color: rgba(var(--tool-accent-rgb), 0.1);
    background: rgba(var(--tool-soft-rgb), 0.43);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 18px rgba(var(--tool-accent-rgb), 0.09);
}

.dashboard-tool-card__arrow {
    border-radius: 50%;
    color: var(--tool-cta-color);
    border-color: rgba(var(--tool-accent-rgb), 0.1);
    background: rgba(var(--tool-soft-rgb), 0.43);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 18px rgba(var(--tool-accent-rgb), 0.09);
}

.dashboard-tool-card__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-tool-card:hover {
    z-index: 3;
    transform: translateY(-0.4rem);
    border-color: rgba(var(--tool-accent-rgb), 0.44);
    box-shadow:
        0 22px 44px rgba(var(--tool-accent-rgb), 0.16),
        0 5px 14px rgba(19, 54, 88, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.dashboard-tool-card:hover .dashboard-tool-card__art {
    opacity: 0.15;
    transform: rotate(-3deg) scale(1.055);
}

.dashboard-tool-card:hover .dashboard-tool-card__arrow svg {
    transform: translateX(-0.18rem);
}

.dashboard-tool-card:active {
    transform: translateY(-0.15rem) scale(0.99);
}

.dashboard-tool-card:focus-visible {
    outline: 3px solid rgba(var(--tool-accent-rgb), 0.28);
    outline-offset: 3px;
}

.dark .dashboard-tool-card {
    color: #f3f8ff;
    border-color: rgba(var(--tool-accent-rgb), 0.21);
    background:
        radial-gradient(circle at 18% 6%, rgba(var(--tool-accent-rgb), 0.15), transparent 47%),
        linear-gradient(152deg, rgba(23, 37, 51, 0.98), rgba(15, 27, 40, 0.98));
    box-shadow:
        0 20px 42px rgba(0, 8, 20, 0.28),
        0 4px 13px rgba(var(--tool-accent-rgb), 0.08),
        inset 0 1px 0 rgba(151, 204, 255, 0.05);
}

.dark .dashboard-tool-card::after {
    border-color: rgba(138, 195, 255, 0.055);
}

.dark .dashboard-tool-card--video {
    border-color: rgba(45, 139, 255, 0.48);
    box-shadow:
        0 22px 48px rgba(0, 8, 22, 0.38),
        0 4px 18px rgba(15, 111, 236, 0.16),
        inset 0 1px 0 rgba(113, 190, 255, 0.08);
}

.dark .dashboard-tool-card__art {
    opacity: 0.17;
    filter: blur(0.1px) drop-shadow(0 0 20px rgba(var(--tool-accent-rgb), 0.3));
}

.dark .dashboard-tool-card h3 {
    color: #f5f9ff;
}

.dark .dashboard-tool-card p {
    color: #9eafc2;
}

.dark .dashboard-tool-card__action,
.dark .dashboard-tool-card__arrow {
    color: var(--tool-cta-color);
    border-color: rgba(var(--tool-accent-rgb), 0.18);
    background: rgba(var(--tool-accent-rgb), 0.13);
    box-shadow:
        inset 0 1px 0 rgba(195, 226, 255, 0.06),
        0 8px 22px rgba(0, 9, 24, 0.18);
}

.dark .dashboard-tool-card--video {
    --tool-cta-color: #72bdff;
}

.dark .dashboard-tool-card--srt {
    --tool-cta-color: #62dca8;
}

.dark .dashboard-tool-card--transcript {
    --tool-cta-color: #b39aff;
}

.dark .dashboard-tool-card:hover {
    border-color: rgba(var(--tool-accent-rgb), 0.52);
    box-shadow:
        0 25px 52px rgba(0, 7, 20, 0.42),
        0 5px 20px rgba(var(--tool-accent-rgb), 0.18),
        inset 0 1px 0 rgba(159, 211, 255, 0.08);
}

.dark .dashboard-tool-card:hover .dashboard-tool-card__art {
    opacity: 0.22;
}

/* Recent activity table */
.recent-activity {
    overflow: hidden;
    border: 1px solid rgba(71, 132, 190, 0.16);
    border-radius: 1.1rem;
    color: #263c55;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 16px 36px rgba(42, 83, 123, 0.08),
        0 2px 7px rgba(28, 58, 88, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.recent-activity__header {
    display: flex;
    min-height: 3.65rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.25rem;
    gap: 1rem;
    border-bottom: 1px solid rgba(73, 128, 180, 0.12);
    background:
        radial-gradient(circle at 92% 0%, rgba(164, 211, 255, 0.18), transparent 42%),
        rgba(252, 254, 255, 0.92);
}

.recent-activity__title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.55rem;
}

.recent-activity__title-mark {
    width: 0.3rem;
    height: 1.3rem;
    flex: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #0f6fec, #3a91f5);
    box-shadow: 0 0 12px rgba(15, 111, 236, 0.24);
}

.recent-activity__title h2 {
    margin: 0;
    color: #17314d;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.6;
}

.recent-activity__history-link {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    color: #0f6fec;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.6;
    transition: color 180ms ease, transform 180ms ease;
}

.recent-activity__history-link svg {
    width: 0.95rem;
    height: 0.95rem;
    transition: transform 180ms ease;
}

.recent-activity__history-link:hover {
    color: #0a56bd;
}

.recent-activity__history-link:hover svg {
    transform: translateX(-0.15rem);
}

.recent-activity__history-link:focus-visible,
.recent-activity__download:focus-visible {
    outline: 3px solid rgba(15, 111, 236, 0.24);
    outline-offset: 3px;
    border-radius: 0.45rem;
}

.recent-activity__scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(73, 128, 180, 0.28) transparent;
}

.recent-activity__table {
    width: 100%;
    min-width: 46rem;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    text-align: right;
}

.recent-activity__col--service { width: 30%; }
.recent-activity__col--cost { width: 12%; }
.recent-activity__col--status { width: 18%; }
.recent-activity__col--subtitle { width: 16%; }
.recent-activity__col--hardsub { width: 24%; }
.recent-activity__thumbnail{display:inline-grid;place-items:center;flex:0 0 48px;width:48px;height:27px;border-radius:5px;overflow:hidden;background:var(--surface-soft);color:var(--muted)}
.recent-activity__thumbnail img{width:48px;height:27px;object-fit:cover}
.recent-activity__thumbnail svg{width:20px;height:20px}
.recent-activity__thumbnail .is-hidden,.recent-activity__thumbnail [hidden]{display:none}
.recent-activity__actions{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;white-space:nowrap}
.recent-activity__action{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 0 62px;min-height:30px;padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--primary);font:700 11px/18px Vazirmatn,sans-serif;text-decoration:none;cursor:pointer}
.recent-activity__action--create{background:var(--primary-soft);border-color:color-mix(in srgb,var(--primary) 25%,var(--border))}
.recent-activity__action[aria-disabled="true"]{color:var(--muted);background:var(--surface-soft);border-color:var(--border);cursor:help}
.recent-activity__action:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.recent-activity__help{font-size:12px;line-height:1.9}
.recent-activity__actions button.recent-activity__download{border:0;background:transparent;font-family:inherit;cursor:pointer;padding:0}
.recent-activity__popover{box-sizing:border-box;position:fixed;inset:auto;margin:0;width:min(300px,calc(100vw - 24px));max-height:min(360px,calc(100dvh - 24px));overflow:auto;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);direction:rtl;box-shadow:0 8px 28px rgba(15,23,42,.18);font:13px Vazirmatn,sans-serif}
.recent-activity__popover::backdrop{background:transparent}
.recent-activity__version{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.recent-activity__version:last-child{border-bottom:0;padding-bottom:0}
.recent-activity__version small{display:block;color:var(--muted);margin-top:4px}
.recent-activity__actions .recent-activity__download:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

.recent-activity__table thead {
    color: #718197;
    background: rgba(239, 246, 252, 0.72);
}

.recent-activity__table th {
    padding: 0.62rem 1rem;
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}

.recent-activity__table th:nth-child(1),
.recent-activity__table td:nth-child(1),
.recent-activity__table th:nth-child(2),
.recent-activity__table td:nth-child(2),
.recent-activity__table th:nth-child(3),
.recent-activity__table td:nth-child(3),
.recent-activity__table th:nth-child(4),
.recent-activity__table td:nth-child(4) {
    text-align: center;
}

.recent-activity__table td {
    padding: 0.78rem 1rem;
    color: #52657a;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.55;
    vertical-align: middle;
    border-top: 1px solid rgba(92, 136, 177, 0.095);
    transition: background-color 180ms ease;
}

.recent-activity__table tbody tr:hover td {
    background: rgba(230, 242, 253, 0.48);
}

.recent-activity__service {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.55rem;
    color: #243b55;
    font-weight: 850;
    white-space: nowrap;
}

.recent-activity__service-dot {
    width: 0.48rem;
    height: 0.48rem;
    flex: none;
    border-radius: 50%;
    color: #718197;
    background: currentColor;
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, currentColor 12%, transparent);
}

.recent-activity__service--media .recent-activity__service-dot { color: #2784ed; }
.recent-activity__service--srt .recent-activity__service-dot { color: #19a66f; }
.recent-activity__service--transcript .recent-activity__service-dot { color: #7954df; }
.recent-activity__service--file .recent-activity__service-dot { color: #d58a18; }
.recent-activity__service--text .recent-activity__service-dot { color: #718197; }

.recent-activity__languages {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    width: 5.75rem;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid rgba(71, 123, 174, 0.16);
    border-radius: 0.55rem;
    color: #8291a2;
    background: rgba(237, 244, 250, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    font-variant-numeric: tabular-nums;
}

.recent-activity__languages--single {
    gap: 0;
}

.recent-activity__languages svg {
    width: 0.78rem;
    height: 0.78rem;
    flex: 0 0 auto;
    opacity: 0.72;
}

.recent-activity__language-code {
    min-width: 1.65rem;
    color: #49627a;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.025em;
    text-align: center;
    white-space: nowrap;
}

.recent-activity__numeric,
.recent-activity__cost {
    color: #344d67;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.recent-activity__cost {
    color: #dc7d0d;
}

.recent-activity__duration-group,
.recent-activity__cost-group {
    display: inline-grid;
    grid-template-columns: 5.25ch 2.35rem;
    align-items: baseline;
    justify-content: center;
    column-gap: 0.28rem;
    direction: rtl;
    min-width: 7.1rem;
    white-space: nowrap;
}

.recent-activity__duration-group .recent-activity__numeric,
.recent-activity__cost-group .recent-activity__cost {
    width: 100%;
    text-align: center;
    justify-self: stretch;
}

.recent-activity__duration-group .recent-activity__unit,
.recent-activity__cost-group .recent-activity__unit {
    margin-inline-start: 0;
    text-align: right;
}

.recent-activity__unit {
    margin-inline-start: 0.18rem;
    color: #8795a6;
    font-size: 0.62rem;
    font-weight: 650;
    white-space: nowrap;
}

.recent-activity__status {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    font-size: 0.65rem;
    font-weight: 850;
    white-space: nowrap;
}

.recent-activity__status svg {
    width: 1rem;
    height: 1rem;
}

.recent-activity__status--completed { color: #18a665; }
.recent-activity__status--failed { color: #dd5c68; }
.recent-activity__status--pending { color: #ca8415; }

.recent-activity__download {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #0f6fec;
    font-size: 0.66rem;
    font-weight: 850;
    transition: color 180ms ease, transform 180ms ease;
}

.recent-activity__download svg {
    width: 1rem;
    height: 1rem;
}

.recent-activity__download:hover {
    color: #094fae;
    transform: translateY(-1px);
}

.recent-activity__no-output {
    color: #a1adba;
}

.recent-activity__empty {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: #91a0b1;
    text-align: center;
}

.recent-activity__empty svg {
    width: 2.8rem;
    height: 2.8rem;
    margin-bottom: 0.65rem;
    color: #8eb4da;
}

.recent-activity__empty p {
    margin: 0;
    color: #526982;
    font-size: 0.82rem;
    font-weight: 850;
}

.recent-activity__empty span {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 600;
}

.dark .recent-activity {
    border-color: rgba(55, 116, 173, 0.28);
    color: #c6d5e5;
    background: rgba(18, 31, 44, 0.97);
    box-shadow:
        0 20px 44px rgba(0, 7, 18, 0.3),
        0 3px 10px rgba(13, 67, 122, 0.08),
        inset 0 1px 0 rgba(125, 190, 246, 0.035);
}

.dark .recent-activity__header {
    border-bottom-color: rgba(71, 128, 182, 0.22);
    background:
        radial-gradient(circle at 92% 0%, rgba(28, 107, 184, 0.13), transparent 44%),
        rgba(17, 31, 44, 0.96);
}

.dark .recent-activity__title h2 {
    color: #edf5fd;
}

.dark .recent-activity__history-link,
.dark .recent-activity__download {
    color: #69b9ff;
}

.dark .recent-activity__history-link:hover,
.dark .recent-activity__download:hover {
    color: #98d1ff;
}

.dark .recent-activity__table thead {
    color: #8fa2b7;
    background: rgba(8, 20, 32, 0.38);
}

.dark .recent-activity__table td {
    color: #aab9c9;
    border-top-color: rgba(82, 135, 184, 0.15);
}

.dark .recent-activity__table tbody tr:hover td {
    background: rgba(35, 64, 90, 0.28);
}

.dark .recent-activity__service,
.dark .recent-activity__numeric {
    color: #d4e0ec;
}

.dark .recent-activity__languages {
    color: #71869a;
    border-color: rgba(99, 161, 217, 0.2);
    background: rgba(34, 59, 82, 0.58);
    box-shadow: inset 0 1px 0 rgba(170, 209, 241, 0.05);
}

.dark .recent-activity__language-code {
    color: #c1d0de;
}

.dark .recent-activity__languages,
.dark .recent-activity__unit,
.dark .recent-activity__no-output {
    color: #7f93a7;
}

.dark .recent-activity__cost {
    color: #ffac42;
}

.dark .recent-activity__empty {
    color: #8194a8;
}

.dark .recent-activity__empty svg {
    color: #477ba8;
}

.dark .recent-activity__empty p {
    color: #b5c6d7;
}

@media (max-width: 767px) {
    .dashboard-overview,
    .dashboard-overview__content {
        min-height: 0;
    }

    .dashboard-overview__content {
        grid-template-rows: auto auto;
        gap: 1.15rem;
        padding: 1.25rem;
    }

    .dashboard-overview__wave {
        width: 135%;
        height: 38%;
        left: -26%;
    }

    .dashboard-overview__intro {
        align-items: center;
    }

    .dashboard-overview__metrics {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-inline: 0.4rem;
    }

    .dashboard-overview__metric {
        min-height: 5.7rem;
        padding-block: 0.85rem;
    }

    .dashboard-overview__metric:not(:last-child)::after {
        top: auto;
        right: 0.9rem;
        bottom: 0;
        left: 0.9rem;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92) 16%, rgba(255, 255, 255, 0.92) 84%, transparent);
    }

    .dark .dashboard-overview__metric:not(:last-child)::after {
        background: linear-gradient(90deg, transparent, rgba(29, 121, 236, 0.68) 16%, rgba(29, 121, 236, 0.68) 84%, transparent);
    }

    .dashboard-overview__progress {
        width: min(72%, 12rem);
    }

    .dashboard-tools {
        margin-top: 1.35rem;
    }

    .dashboard-tools__grid {
        grid-template-columns: 1fr;
    }

    .dashboard-tool-card,
    .dashboard-tool-card__content {
        min-height: 14rem;
    }

    .dashboard-tool-card__content {
        padding-top: 6.2rem;
    }

    .dashboard-tool-card__art {
        left: -2.8rem;
        width: 15.5rem;
        height: 9rem;
    }

    .recent-activity__header {
        min-height: 3.4rem;
        padding-inline: 1rem;
    }

    .recent-activity__title h2 {
        font-size: 0.84rem;
    }

    .recent-activity__history-link {
        font-size: 0.66rem;
    }
}

@media (max-width: 420px) {
    .dashboard-overview {
        border-radius: 1rem;
    }

    .dashboard-overview__content {
        padding: 1.05rem;
    }

    .dashboard-overview__avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 0.85rem;
    }

    .dashboard-overview__title {
        font-size: 1rem;
    }

    .dashboard-overview__subtitle {
        font-size: 0.73rem;
    }

    .dashboard-overview__value {
        font-size: 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-overview *,
    .dashboard-overview *::before,
    .dashboard-overview *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .dashboard-tool-card,
    .dashboard-tool-card *,
    .dashboard-tool-card *::before,
    .dashboard-tool-card *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Admin task reports */
.report-export-button,
.report-page-button {
    border: 1px solid #dbe3ee;
    border-radius: 0.75rem;
    background: #fff;
    color: #334155;
    padding: 0.58rem 0.9rem;
    font-size: 0.75rem;
    font-weight: 900;
    transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.report-export-button:hover,
.report-page-button:hover {
    border-color: #0f6fec;
    color: #0f6fec;
    transform: translateY(-1px);
}

.report-export-button--primary {
    border-color: #0f6fec;
    background: #0f6fec;
    color: #fff;
}

.report-export-button--primary:hover { color: #fff; }

.report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 900;
}

.report-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: #e8f2ff;
    color: #075cc8;
    padding: 0.28rem 0.55rem;
    font-size: 0.65rem;
    font-weight: 900;
}

.report-user-chip button {
    color: #e11d48;
    font-size: 0.9rem;
    line-height: 1;
}

.report-user-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.25rem);
    inset-inline: 0;
    max-height: 15rem;
    overflow-y: auto;
    border: 1px solid #dbe3ee;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.report-user-result,
.report-user-result-empty {
    display: block;
    width: 100%;
    padding: 0.7rem 0.85rem;
    color: #475569;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 800;
}

.report-user-result:hover { background: #f1f6fd; color: #0f6fec; }

.report-kpi {
    min-height: 6rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
}

.report-kpi span { display: block; color: #94a3b8; font-size: 0.66rem; font-weight: 900; }
.report-kpi strong { display: block; margin-top: 0.5rem; color: #0f172a; font-size: 1.12rem; font-weight: 950; direction: ltr; text-align: right; }

.report-table { width: 100%; min-width: 1120px; border-collapse: collapse; }
.report-table th { background: #f8fafc; color: #64748b; padding: 0.75rem; text-align: right; white-space: nowrap; font-size: 0.65rem; font-weight: 950; }
.report-table td { border-top: 1px solid #edf2f7; color: #475569; padding: 0.75rem; vertical-align: middle; font-size: 0.7rem; font-weight: 700; }
.report-table tbody > tr:not(.hidden):hover { background: #fbfdff; }

.report-detail-toggle {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    background: #eef5ff;
    color: #0f6fec;
    font-size: 1rem;
    font-weight: 950;
}

.report-status { display: inline-flex; border-radius: 999px; padding: 0.26rem 0.55rem; white-space: nowrap; font-size: 0.62rem; font-weight: 950; }
.report-status--completed { background: #dcfce7; color: #15803d; }
.report-status--failed { background: #fee2e2; color: #b91c1c; }
.report-status--processing { background: #dbeafe; color: #1d4ed8; }
.report-status--awaiting_review { background: #fef3c7; color: #a16207; }
.report-status--cancelled,
.report-status--unknown { background: #f1f5f9; color: #64748b; }

.report-atomic-detail {
    min-width: 0;
    border: 1px solid #dce8f7;
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.82);
    padding: 0.65rem;
}

.report-atomic-detail span { display: block; color: #6b7f99; font-family: monospace; font-size: 0.62rem; }
.report-atomic-detail b { display: block; margin-top: 0.25rem; overflow: hidden; color: #1e293b; font-size: 0.7rem; font-weight: 800; }
.report-empty-state { display: grid; min-height: 9rem; place-items: center; color: #94a3b8; font-size: 0.75rem; font-weight: 900; }

.dark [data-report-root] { color: #e2e8f0; }
.dark [data-report-root] section,
.dark .report-kpi,
.dark .report-user-results { border-color: #334155; background: #111827; }
.dark .report-kpi strong { color: #f8fafc; }
.dark .report-export-button,
.dark .report-page-button { border-color: #475569; background: #1e293b; color: #e2e8f0; }
.dark .report-filter-field .input-field { border-color: #475569; background: #1e293b; color: #e2e8f0; }
.dark .report-table th { background: #1e293b; color: #94a3b8; }
.dark .report-table td { border-color: #334155; color: #cbd5e1; }
.dark .report-atomic-detail { border-color: #334155; background: #1e293b; }
.dark .report-atomic-detail b { color: #e2e8f0; }

/* Full activity history */
.usage-history {
    overflow: hidden;
    border: 1px solid rgba(71, 132, 190, 0.18);
    border-radius: 1.15rem;
    color: #52657a;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(38, 77, 112, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.usage-history__hero {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(71, 132, 190, 0.14);
    background: radial-gradient(circle at 92% 0%, rgba(28, 129, 235, 0.09), transparent 42%), #fcfeff;
}

.usage-history__heading { display: flex; min-width: 0; align-items: flex-start; gap: 0.65rem; }
.usage-history__title-mark { width: 0.32rem; height: 1.5rem; flex: none; margin-top: 0.05rem; border-radius: 999px; background: #2784ed; box-shadow: 0 0 14px rgba(15, 111, 236, 0.28); }
.usage-history__heading h2 { margin: 0; color: #17314d; font-size: 1rem; font-weight: 950; line-height: 1.5; }
.usage-history__heading p { margin: 0.18rem 0 0; color: #7b8da1; font-size: 0.7rem; font-weight: 650; }
.usage-history__count { flex: none; border: 1px solid rgba(39, 132, 237, 0.13); border-radius: 0.65rem; padding: 0.38rem 0.65rem; color: #3974ad; background: rgba(233, 244, 255, 0.72); font-size: 0.66rem; font-weight: 900; font-variant-numeric: tabular-nums; }

.usage-history__notice { display: flex; align-items: center; gap: 0.55rem; margin: 1rem 1.25rem 0; border: 1px solid rgba(211, 151, 37, 0.18); border-radius: 0.75rem; padding: 0.66rem 0.78rem; color: #8a641d; background: rgba(255, 249, 232, 0.76); }
.usage-history__notice svg { width: 1.05rem; height: 1.05rem; flex: none; color: #d28a13; }
.usage-history__notice p { margin: 0; font-size: 0.68rem; font-weight: 700; line-height: 1.8; }
.usage-history__notice strong { color: #aa6b06; font-weight: 950; }

.usage-history__filters { display: grid; grid-template-columns: minmax(15rem, 1.75fr) repeat(2, minmax(8.2rem, 0.8fr)) auto; gap: 0.65rem; align-items: end; padding: 1rem 1.25rem 1.1rem; }
.usage-history__search { position: relative; display: flex; min-width: 0; align-items: center; }
.usage-history__search svg { position: absolute; inset-inline-start: 0.85rem; width: 1rem; height: 1rem; color: #8395a8; pointer-events: none; }
.usage-history__search input,
.usage-history__select select { width: 100%; height: 2.65rem; border: 1px solid #dce6f0; border-radius: 0.75rem; outline: none; color: #314b65; background: #f8fbfe; font-size: 0.69rem; font-weight: 750; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.usage-history__search input { padding: 0 2.55rem 0 0.85rem; }
.usage-history__select { display: flex; min-width: 0; flex-direction: column; gap: 0.32rem; color: #7a8b9e; font-size: 0.61rem; font-weight: 850; }
.usage-history__select select { padding: 0 0.75rem; }
.usage-history__search input:focus,
.usage-history__select select:focus { border-color: rgba(15, 111, 236, 0.58); background: #fff; box-shadow: 0 0 0 3px rgba(15, 111, 236, 0.11); }
.usage-history__clear { height: 2.65rem; border-radius: 0.72rem; padding: 0 0.8rem; color: #64788d; background: #eef4f9; font-size: 0.65rem; font-weight: 850; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.usage-history__clear:hover { color: #0f6fec; background: #e5f0fc; }
.usage-history__clear:active { transform: translateY(1px); }

.usage-history__desktop { overflow-x: auto; border-top: 1px solid rgba(71, 132, 190, 0.13); }
.usage-history__table { width: 100%; min-width: 52rem; border-collapse: collapse; table-layout: fixed; text-align: right; }
.usage-history__col--file { width: 27%; }
.usage-history__col--language { width: 12%; }
.usage-history__col--volume { width: 12%; }
.usage-history__col--cost { width: 9%; }
.usage-history__col--date { width: 15%; }
.usage-history__col--status { width: 13%; }
.usage-history__col--output { width: 12%; }
.usage-history__table thead { color: #718197; background: rgba(239, 246, 252, 0.74); }
.usage-history__table th { padding: 0.72rem 0.85rem; text-align: center; white-space: nowrap; font-size: 0.63rem; font-weight: 900; }
.usage-history__table th:first-child { text-align: right; }
.usage-history__table td { height: 4.2rem; padding: 0.7rem 0.85rem; border-top: 1px solid rgba(71, 132, 190, 0.11); text-align: center; vertical-align: middle; font-size: 0.68rem; font-weight: 700; }
.usage-history__table td:first-child { text-align: right; }
.usage-history__row { transition: background-color 180ms ease; }
.usage-history__row:hover { background: rgba(230, 242, 253, 0.43); }
.usage-history__file-cell { min-width: 0; }
.usage-history__file-cell > strong { display: block; overflow: hidden; color: #213b55; font-size: 0.71rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.usage-history__service { display: inline-flex; align-items: center; gap: 0.38rem; margin-top: 0.28rem; color: #718397; font-size: 0.61rem; font-weight: 750; white-space: nowrap; }
.usage-history__service i { width: 0.42rem; height: 0.42rem; flex: none; border-radius: 50%; color: #718197; background: currentColor; box-shadow: 0 0 0 0.18rem color-mix(in srgb, currentColor 12%, transparent); }
.usage-history__service--media i { color: #2784ed; }
.usage-history__service--srt i { color: #19a66f; }
.usage-history__service--transcript i { color: #7954df; }
.usage-history__service--dubbing i { color: #697b91; }
.usage-history__service--file i { color: #d58a18; }

.usage-history__languages { display: inline-flex; min-width: 4.7rem; height: 1.72rem; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid rgba(82, 141, 194, 0.2); border-radius: 0.5rem; color: #8394a6; background: rgba(237, 245, 252, 0.82); font-size: 0.61rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.usage-history__languages bdi { color: #405d78; }
.usage-history__languages--single { min-width: 3.3rem; color: #405d78; }
.usage-history__metric { display: inline-grid; grid-template-columns: minmax(3.4ch, 5.5ch) 2.3rem; align-items: baseline; justify-content: center; white-space: nowrap; }
.usage-history__metric bdi { color: #344d67; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.usage-history__metric small { color: #8795a6; text-align: right; font-size: 0.59rem; font-weight: 750; }
.usage-history__metric--cost bdi { color: #dc7d0d; }
.usage-history__date { color: #60758b; font-size: 0.62rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.usage-history__status { display: inline-flex; align-items: center; gap: 0.32rem; white-space: nowrap; font-size: 0.62rem; font-weight: 850; }
.usage-history__status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0.18rem color-mix(in srgb, currentColor 12%, transparent); }
.usage-history__status--completed { color: #18a665; }
.usage-history__status--failed { color: #dd5c68; }
.usage-history__status--in_queue,
.usage-history__status--processing { color: #277fd8; }
.usage-history__status--awaiting_transcript_review { color: #b7790b; background: rgba(245, 158, 11, 0.1); }
.usage-history__status--refunded { color: #9867d8; }
.usage-history__status--expired { color: #8c9bac; }
.usage-history__actions { display: flex; align-items: center; justify-content: center; gap: 0.45rem; }
.usage-history__download { display: inline-flex; align-items: center; gap: 0.26rem; color: #0f6fec; font-size: 0.64rem; font-weight: 900; transition: color 180ms ease, transform 180ms ease; }
.usage-history__download svg { width: 0.9rem; height: 0.9rem; }
.usage-history__download:hover { color: #094fae; transform: translateY(-1px); }
.usage-history__unavailable { color: #9aa8b6; font-size: 0.61rem; font-weight: 800; }
.usage-history__detail-toggle { display: grid; width: 1.8rem; height: 1.8rem; flex: none; place-items: center; border: 1px solid rgba(73, 135, 190, 0.16); border-radius: 0.55rem; color: #65809a; background: #f3f8fc; transition: color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.usage-history__detail-toggle svg { width: 0.9rem; height: 0.9rem; transition: transform 180ms ease; }
.usage-history__detail-toggle:hover { color: #0f6fec; background: #e9f3fd; }
.usage-history__detail-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.usage-history__detail-row td { height: auto; padding: 0 0.85rem 0.85rem; background: rgba(238, 246, 253, 0.46); }
.usage-history__details { display: grid; grid-template-columns: 1.35fr 1fr 0.75fr 0.75fr 1fr; gap: 0.6rem; padding: 0.72rem; border: 1px solid rgba(71, 132, 190, 0.13); border-radius: 0.75rem; text-align: right; background: rgba(255, 255, 255, 0.72); }
.usage-history__detail { min-width: 0; }
.usage-history__detail > span:first-child { display: block; margin-bottom: 0.23rem; color: #91a0af; font-size: 0.56rem; font-weight: 850; }
.usage-history__detail strong { display: block; overflow-wrap: anywhere; color: #40566d; font-size: 0.63rem; font-weight: 800; }
.usage-history__detail small { display: block; margin-top: 0.18rem; color: #a37a32; font-size: 0.54rem; font-weight: 700; }
.usage-history__detail--error { grid-column: 1 / -1; border-radius: 0.55rem; padding: 0.55rem; color: #b64d5a; background: rgba(255, 235, 237, 0.68); }
.usage-history__detail--error strong { color: inherit; }
.usage-history__copy-line { display: flex; min-width: 0; align-items: center; gap: 0.35rem; }
.usage-history__copy-line code { display: block; overflow: hidden; color: #536c83; font-size: 0.57rem; text-overflow: ellipsis; white-space: nowrap; }
.usage-history__copy-line button { flex: none; color: #0f6fec; font-size: 0.56rem; font-weight: 900; }

.usage-history__mobile { display: none; }
.usage-history__pagination { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 1rem; border-top: 1px solid rgba(71, 132, 190, 0.12); }
.usage-history__pagination button { min-width: 2rem; height: 2rem; border: 1px solid #dce6f0; border-radius: 0.58rem; padding: 0 0.55rem; color: #61768b; background: #fff; font-size: 0.62rem; font-weight: 850; transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease; }
.usage-history__pagination button:hover:not(:disabled):not(.is-active) { border-color: #a7c9ec; color: #0f6fec; background: #f0f7ff; }
.usage-history__pagination button.is-active { border-color: #0f6fec; color: #fff; background: #0f6fec; }
.usage-history__pagination button:disabled { cursor: not-allowed; opacity: 0.42; }
.usage-history__pagination span { color: #9aa9b8; }
.usage-history__empty,
.usage-history__error { display: flex; min-height: 20rem; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
.usage-history__empty svg { width: 3.2rem; height: 3.2rem; margin-bottom: 0.85rem; color: #8eb4da; }
.usage-history__empty h3,
.usage-history__error strong { margin: 0; color: #2e4964; font-size: 0.85rem; font-weight: 950; }
.usage-history__empty p,
.usage-history__error p { max-width: 27rem; margin: 0.4rem 0 1rem; color: #8091a3; font-size: 0.68rem; font-weight: 650; line-height: 1.8; }
.usage-history__empty a,
.usage-history__empty button,
.usage-history__error button { border-radius: 0.65rem; padding: 0.58rem 0.9rem; color: #0f6fec; background: #eaf4ff; font-size: 0.65rem; font-weight: 900; }

.usage-history button:focus-visible,
.usage-history a:focus-visible,
.usage-history input:focus-visible,
.usage-history select:focus-visible { outline: 3px solid rgba(15, 111, 236, 0.22); outline-offset: 2px; }

.usage-history-skeleton { display: none; width: min(92%, 62rem); gap: 0.7rem; }
.usage-history-skeleton span { display: block; height: 3.4rem; border-radius: 0.8rem; background: linear-gradient(100deg, rgba(220, 231, 240, 0.65) 20%, rgba(241, 247, 252, 0.95) 38%, rgba(220, 231, 240, 0.65) 56%); background-size: 220% 100%; animation: usage-skeleton 1.25s ease-in-out infinite; }
.usage-history-skeleton span:first-child { height: 4.5rem; }
#panel-loading.is-usage-request .panel-loading__default,
#history-loading.is-usage-request .panel-loading__default { display: none; }
#panel-loading.is-usage-request .usage-history-skeleton,
#history-loading.is-usage-request .usage-history-skeleton { display: grid; }
@keyframes usage-skeleton { to { background-position-x: -220%; } }

.dark .usage-history { border-color: rgba(55, 116, 173, 0.28); color: #aab9c9; background: rgba(18, 31, 44, 0.98); box-shadow: 0 18px 44px rgba(0, 10, 22, 0.2), inset 0 1px 0 rgba(125, 190, 246, 0.04); }
.dark .usage-history__hero { border-bottom-color: rgba(71, 128, 182, 0.22); background: radial-gradient(circle at 92% 0%, rgba(28, 107, 184, 0.14), transparent 44%), rgba(17, 31, 44, 0.97); }
.dark .usage-history__heading h2 { color: #edf5fd; }
.dark .usage-history__heading p { color: #8498ad; }
.dark .usage-history__count { border-color: rgba(78, 153, 219, 0.2); color: #83c3fa; background: rgba(26, 58, 86, 0.55); }
.dark .usage-history__notice { border-color: rgba(206, 144, 34, 0.2); color: #c1a164; background: rgba(74, 53, 17, 0.26); }
.dark .usage-history__notice strong { color: #efb64f; }
.dark .usage-history__search input,
.dark .usage-history__select select { border-color: rgba(81, 139, 190, 0.24); color: #c8d7e5; background: rgba(8, 20, 32, 0.38); }
.dark .usage-history__search input::placeholder { color: #70859a; }
.dark .usage-history__search input:focus,
.dark .usage-history__select select:focus { border-color: rgba(69, 157, 234, 0.55); background: #13283a; }
.dark .usage-history__select { color: #8498ad; }
.dark .usage-history__clear { color: #a5b7c8; background: #21384d; }
.dark .usage-history__desktop { border-top-color: rgba(71, 128, 182, 0.2); }
.dark .usage-history__table thead { color: #8fa2b7; background: rgba(8, 20, 32, 0.4); }
.dark .usage-history__table td { border-top-color: rgba(82, 135, 184, 0.15); }
.dark .usage-history__row:hover { background: rgba(35, 64, 90, 0.28); }
.dark .usage-history__file-cell > strong { color: #dbe8f4; }
.dark .usage-history__languages { border-color: rgba(99, 161, 217, 0.2); color: #71869a; background: rgba(34, 59, 82, 0.58); }
.dark .usage-history__languages bdi,
.dark .usage-history__languages--single,
.dark .usage-history__metric bdi { color: #c8d7e5; }
.dark .usage-history__metric--cost bdi { color: #ffac42; }
.dark .usage-history__date { color: #93a6ba; }
.dark .usage-history__detail-toggle { border-color: rgba(91, 153, 208, 0.2); color: #91a9bf; background: #1b3449; }
.dark .usage-history__detail-row td { background: rgba(9, 23, 36, 0.35); }
.dark .usage-history__details { border-color: rgba(82, 135, 184, 0.18); background: rgba(27, 49, 68, 0.64); }
.dark .usage-history__detail strong { color: #c5d4e2; }
.dark .usage-history__copy-line code { color: #a9bed1; }
.dark .usage-history__pagination { border-top-color: rgba(82, 135, 184, 0.16); }
.dark .usage-history__pagination button { border-color: #304d66; color: #aabdd0; background: #172c3f; }
.dark .usage-history__empty h3,
.dark .usage-history__error strong { color: #d6e4f1; }
.dark .usage-history-skeleton span { background: linear-gradient(100deg, rgba(35, 56, 74, 0.72) 20%, rgba(51, 78, 100, 0.92) 38%, rgba(35, 56, 74, 0.72) 56%); background-size: 220% 100%; }

@media (max-width: 1180px) {
    .usage-history__filters { grid-template-columns: minmax(14rem, 1.5fr) repeat(2, minmax(7.4rem, 0.8fr)); }
    .usage-history__clear { grid-column: 1 / -1; justify-self: end; height: 2.1rem; }
}

@media (max-width: 767px) {
    .usage-history { border-radius: 0.95rem; }
    .usage-history__hero { min-height: 4.5rem; padding: 0.85rem 0.9rem; }
    .usage-history__heading p { max-width: 14rem; }
    .usage-history__count { display: none; }
    .usage-history__notice { align-items: flex-start; margin: 0.8rem 0.9rem 0; }
    .usage-history__filters { grid-template-columns: 1fr 1fr; gap: 0.55rem; padding: 0.8rem 0.9rem 1rem; }
    .usage-history__search { grid-column: 1 / -1; }
    .usage-history__select:last-of-type { grid-column: 1 / -1; }
    .usage-history__clear { grid-column: 1 / -1; justify-self: stretch; }
    .usage-history__desktop { display: none; }
    .usage-history__mobile { display: grid; gap: 0.7rem; padding: 0 0.9rem 0.9rem; }
    .usage-history-card { overflow: hidden; border: 1px solid rgba(71, 132, 190, 0.16); border-radius: 0.85rem; background: rgba(250, 253, 255, 0.78); box-shadow: 0 8px 22px rgba(45, 78, 108, 0.06); }
    .usage-history-card__top { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 0.65rem; padding: 0.8rem; }
    .usage-history-card__top > div { min-width: 0; }
    .usage-history-card__top > div > strong { display: block; overflow: hidden; color: #213b55; font-size: 0.71rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
    .usage-history-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid rgba(71, 132, 190, 0.12); background: rgba(238, 246, 253, 0.55); }
    .usage-history-card__metrics > div { min-width: 0; padding: 0.65rem 0.35rem; text-align: center; }
    .usage-history-card__metrics > div + div { border-inline-start: 1px solid rgba(71, 132, 190, 0.12); }
    .usage-history-card__metrics span { display: block; margin-bottom: 0.22rem; color: #91a0af; font-size: 0.56rem; font-weight: 800; }
    .usage-history-card__metrics strong { color: #405b75; font-size: 0.64rem; font-weight: 900; font-variant-numeric: tabular-nums; }
    .usage-history-card__metrics small { color: #8797a8; font-size: 0.54rem; }
    .usage-history-card__metrics .usage-history-card__cost { color: #dc7d0d; }
    .usage-history-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.8rem; color: #788c9f; font-size: 0.59rem; font-weight: 750; }
    .usage-history-card__footer > div { display: flex; align-items: center; gap: 0.75rem; }
    .usage-history-card__detail { color: #607b96; font-size: 0.61rem; font-weight: 850; }
    .usage-history-card__details { padding: 0.7rem 0.8rem; border-top: 1px solid rgba(71, 132, 190, 0.12); color: #64798e; background: rgba(241, 247, 252, 0.7); font-size: 0.6rem; font-weight: 700; }
    .usage-history-card__details p { margin: 0.3rem 0; overflow-wrap: anywhere; }
    .usage-history-card__details span { color: #91a0af; }
    .usage-history-card__error { color: #c44d5b; }
    .dark .usage-history-card { border-color: rgba(78, 137, 190, 0.22); background: rgba(20, 37, 52, 0.88); }
    .dark .usage-history-card__top > div > strong { color: #dbe8f4; }
    .dark .usage-history-card__metrics { border-color: rgba(82, 135, 184, 0.16); background: rgba(9, 23, 36, 0.32); }
    .dark .usage-history-card__metrics > div + div { border-color: rgba(82, 135, 184, 0.16); }
    .dark .usage-history-card__metrics strong { color: #c7d7e6; }
    .dark .usage-history-card__details { border-color: rgba(82, 135, 184, 0.16); background: rgba(9, 23, 36, 0.34); }
}

/* Layered translation result: two equally weighted primary outputs. */
#media-translate-form .media-result-success { display: none; }
#media-translate-form .media-workspace[data-media-state="completed"] { border-color: transparent; background: transparent; box-shadow: none; }
#media-translate-form [data-media-state="completed"] .media-state-shell { padding: 1rem; }
#media-translate-form [data-media-state="completed"] .media-state-card { width: min(100%, 58rem); background: radial-gradient(ellipse at 50% 0%, var(--primary-soft), transparent 65%), var(--surface); box-shadow: 0 12px 32px color-mix(in srgb, var(--primary) 7%, transparent); }
#media-translate-form [data-media-state="completed"] .media-state-header { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .65rem; padding: 1.5rem 1.5rem .5rem; border: 0; background: transparent; }
#media-translate-form [data-media-state="completed"] .media-file-mark,
#media-translate-form [data-media-state="completed"] .media-eyebrow { display: none; }
#media-translate-form [data-media-state="completed"] .media-result-success { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
#media-translate-form .media-result-success > span { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
#media-translate-form .media-result-success svg { width: 1.5rem; height: 1.5rem; }
#media-translate-form .media-result-success h3 { margin: 0; color: var(--text); font-size: 20px; font-weight: 800; }
#media-translate-form [data-media-state="completed"] .media-file-name,
#media-translate-form [data-media-state="completed"] .media-file-meta { text-align: center; }
#media-translate-form [data-media-state="completed"] .media-file-name { font-size: 15px; unicode-bidi: isolate; }
#media-translate-form [data-media-state="completed"] .media-file-meta { font-size: 13px; }
#media-translate-form .media-downloads { margin-top: 0; }
#media-translate-form .media-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#media-translate-form .media-result-actions > * { min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: 1rem; background: color-mix(in srgb, var(--surface) 90%, var(--primary-soft)); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 5%, transparent); }
#media-translate-form .media-download-card--primary { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .8rem; }
#media-translate-form .media-output-intro { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .8rem; }
#media-translate-form .media-output-intro > div { display: flex; flex-direction: column; gap: .3rem; }
#media-translate-form .media-result-actions strong { color: var(--text); font-size: 15px; font-weight: 750; }
#media-translate-form .media-result-actions small { display: block; color: var(--muted); font-size: 13px; line-height: 1.7; white-space: normal; }
#media-translate-form .media-output-intro > svg,
#media-translate-form .media-download-card--primary > svg { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: .75rem; color: var(--primary); background: var(--primary-soft); }
#media-translate-form .media-download-card--primary > b,
#media-translate-form #media-hardsub-result .hardsub-result-link { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 2.75rem; margin: .85rem 0 0; padding: .6rem .7rem; border: 0; border-radius: .65rem; color: #fff; background: var(--primary); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.6; }
#media-translate-form .media-download-card--primary > b { grid-column: 1 / -1; }
#media-translate-form .media-download-card--primary > b svg { width: 20px; height: 20px; flex-shrink: 0; }
#media-translate-form #media-hardsub-result .hardsub-result-link:hover { background: color-mix(in srgb, var(--primary) 85%, var(--text)); }
#media-translate-form .media-download-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
#media-translate-form .media-download-secondary .media-download-card { min-height: 4.5rem; border: 1px solid var(--border); border-radius: .75rem; padding: .7rem; gap: .5rem; background: var(--surface); }
#media-translate-form .media-download-secondary .media-download-card::after { content: '↓'; font-size: 20px; }
#media-translate-form .media-download-secondary strong { font-size: 13px; font-weight: 700; }
#media-translate-form .media-download-secondary small { font-size: 13px; }
#media-translate-form .media-retention-note { padding-top: .8rem; border-top: 1px solid var(--border); font-size: 13px; }
#media-translate-form #media-hardsub-result-reason:empty { display: none; }
#media-translate-form #media-hardsub-result-reason { font-size: 13px; line-height: 1.8; margin-top: .8rem; }
#media-translate-form [data-media-state="completed"] .media-action-footer { padding-top: 0; }
#media-translate-form [data-media-state="completed"] .media-primary-action-btn { font-size: 13px; }
@media (max-width: 720px) {
    #media-translate-form .media-result-actions,
    #media-translate-form .media-download-secondary { grid-template-columns: minmax(0, 1fr); }
    #media-translate-form [data-media-state="completed"] .media-state-shell { padding: .5rem; }
}
#media-translate-form .media-video-output { display: grid; grid-template-rows: 1fr auto; gap: .8rem; }
#media-translate-form .media-download-card--primary { grid-template-rows: 1fr auto; }
#media-translate-form .media-download-secondary .media-download-card::after { content: none; }
#media-translate-form .media-download-arrow { width: 20px; height: 20px; flex-shrink: 0; }
#media-translate-form .media-download-card { text-decoration: none; }
#media-translate-form #media-hardsub-result .hardsub-result-link { text-decoration: none; }
/* Unified settings surfaces for the three media tools. */
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-panel {
 border-color:color-mix(in srgb,var(--primary) 20%,var(--border));border-radius:20px;
 background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--primary) 12%,transparent),transparent 55%),var(--surface);
 box-shadow:0 14px 38px -24px color-mix(in srgb,var(--primary) 50%,transparent);
}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-panel>div:first-child {
 min-height:64px;border-radius:20px 20px 0 0;
 background:linear-gradient(115deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),var(--surface));
 border-bottom-color:color-mix(in srgb,var(--primary) 18%,var(--border));
}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .media-translate-choice {
 border-radius:14px;background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--primary) 5%,var(--surface)));
 transition:border-color .2s,box-shadow .2s;
}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .media-translate-choice:is(:hover,:focus-within) {
 border-color:color-mix(in srgb,var(--primary) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 9%,transparent);
}
html:not(.dark) :is(#media-translate-form,#srt-translate-form,#transcript-form) .media-translate-choice .dropdown-toggle {
 border-radius:13px;
}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-scroll label:has(input:checked) {
 border-color:color-mix(in srgb,var(--primary) 38%,var(--border));background:linear-gradient(130deg,color-mix(in srgb,var(--primary) 10%,var(--surface)),var(--surface));
}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-scroll input[type=checkbox] {accent-color:var(--primary);}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-scroll :is(button,input):focus-visible {outline:2px solid var(--primary);outline-offset:3px;}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .tool-settings-scroll .tracking-wider {color:var(--muted);letter-spacing:0;font-size:12px;}
:is(#media-translate-form,#srt-translate-form,#transcript-form) .block-reset-btn {color:var(--primary);}
:is(#media-translate-form,#srt-translate-form,#transcript-form) input[type=number] {font-variant-numeric:tabular-nums;}

@media (max-width: 360px) { .zeronevis-mobile-brand { display: none !important; } }