:root {
    color-scheme: light;
    --aividz-bg: #edf0f4;
    --aividz-card-bg: #ffffff;
    --aividz-elevated-bg: #f8fafc;
    --aividz-input-bg: #ffffff;
    --aividz-input-border: #dee2e6;
    --aividz-text: #111827;
    --aividz-ink: #111827;
    --aividz-soft: #6b7280;
    --aividz-muted: #4b5563;
    --aividz-line: #e5e7eb;
    --aividz-badge-bg: #f8fafc;
    --aividz-navbar-bg: #ffffff;
    --aividz-sidebar-bg: #ffffff;
    --aividz-accent: #2563eb;
    --aividz-green: #0f766e;
    --aividz-red: #dc2626;
    --aividz-yellow: #b7791f;
    --bs-primary-hover: #0a58ca;
}

body[data-area="app"][data-theme="dark"] {
    color-scheme: dark;
    --aividz-bg: #090d14;
    --aividz-card-bg: #1c2431;
    --aividz-elevated-bg: #242e3d;
    --aividz-input-bg: #151d29;
    --aividz-input-border: #3a4658;
    --aividz-text: #f8fafc;
    --aividz-ink: #f8fafc;
    --aividz-soft: #94a3b8;
    --aividz-muted: #cbd5e1;
    --aividz-line: #334155;
    --aividz-badge-bg: #263244;
    --aividz-navbar-bg: var(--aividz-card-bg);
    --aividz-sidebar-bg: var(--aividz-card-bg);
    --bs-body-bg: var(--aividz-bg);
    --bs-body-color: var(--aividz-text);
    --bs-border-color: var(--aividz-line);
    --bs-tertiary-bg: var(--aividz-elevated-bg);
    --bs-secondary-color: var(--aividz-soft);
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #9ec5fe;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.875rem;
    line-height: 1.42;
    background: var(--aividz-bg);
    color: var(--aividz-text);
}

a {
    text-decoration: none;
}

a:hover,
a:focus-visible {
    color: var(--bs-primary-hover);
    text-decoration: none;
}

h1,
.h1 {
    font-size: 1.75rem;
    line-height: 1.15;
}

h2,
.h2 {
    font-size: 1.2rem;
    line-height: 1.2;
}

h3,
.h3 {
    font-size: 1rem;
    line-height: 1.25;
}

h4,
.h4 {
    font-size: 0.9rem;
    line-height: 1.25;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0 0 1rem;
}

.display-5 {
    font-size: 2rem;
    line-height: 1.1;
}

.lead {
    font-size: 0.95rem;
}

.btn {
    font-size: 0.875rem;
}

.btn-lg {
    font-size: 0.95rem;
}

.form-control,
.form-select,
.form-label,
.dropdown-menu,
.alert,
.table,
.list-group-item {
    font-size: 0.875rem;
}

label,
.form-label {
    color: var(--aividz-text);
    font-size: 0.875rem;
    font-weight: 600;
}

label input,
label textarea,
label select,
.form-label + .form-control,
.form-label + .form-select {
    margin-top: 0.35rem;
}

.form-control,
.form-select {
    font-weight: 400;
}

body[data-area="app"] .card,
body[data-area="app"] .modal-content,
body[data-area="app"] .dropdown-menu,
body[data-area="app"] .list-group-item {
    color: var(--aividz-text);
    background-color: var(--aividz-card-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"] .navbar.bg-white {
    background-color: var(--aividz-navbar-bg) !important;
}

body[data-area="app"][data-theme="dark"] .card,
body[data-area="app"][data-theme="dark"] .modal-content,
body[data-area="app"][data-theme="dark"] .dropdown-menu,
body[data-area="app"][data-theme="dark"] .list-group-item {
    box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.24) !important;
}

body[data-area="app"] .border-bottom,
body[data-area="app"] .border-top,
body[data-area="app"] .border,
body[data-area="app"] .table {
    border-color: var(--aividz-line) !important;
}

body[data-area="app"] .form-control,
body[data-area="app"] .form-select {
    color: var(--aividz-text);
    background-color: var(--aividz-input-bg);
    border-color: var(--aividz-input-border);
}

body[data-area="app"] .form-control::placeholder,
body[data-area="app"] textarea::placeholder {
    color: var(--aividz-soft);
}

body[data-area="app"] .form-control:focus,
body[data-area="app"] .form-select:focus {
    color: var(--aividz-text);
    background-color: var(--aividz-input-bg);
    border-color: var(--aividz-accent);
    box-shadow: 0 0 0 0.2rem rgb(37 99 235 / 0.22);
}

body[data-area="app"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--aividz-text);
    --bs-table-border-color: var(--aividz-line);
    --bs-table-striped-bg: color-mix(in srgb, var(--aividz-elevated-bg) 62%, transparent);
    --bs-table-hover-bg: color-mix(in srgb, var(--aividz-accent) 14%, transparent);
}

body[data-area="app"] .dropdown-item {
    color: var(--aividz-text);
}

body[data-area="app"] .dropdown-item:hover,
body[data-area="app"] .dropdown-item:focus {
    color: var(--aividz-text);
    background-color: var(--aividz-elevated-bg);
}

body[data-area="app"] .modal-header,
body[data-area="app"] .modal-footer,
body[data-area="app"] .dropdown-divider {
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body[data-area="app"] .text-muted {
    color: var(--aividz-soft) !important;
}

body[data-area="app"][data-theme="dark"] h1,
body[data-area="app"][data-theme="dark"] h2,
body[data-area="app"][data-theme="dark"] h3,
body[data-area="app"][data-theme="dark"] h4,
body[data-area="app"][data-theme="dark"] h5,
body[data-area="app"][data-theme="dark"] h6,
body[data-area="app"][data-theme="dark"] .h1,
body[data-area="app"][data-theme="dark"] .h2,
body[data-area="app"][data-theme="dark"] .h3,
body[data-area="app"][data-theme="dark"] .h4,
body[data-area="app"][data-theme="dark"] .h5,
body[data-area="app"][data-theme="dark"] .h6,
body[data-area="app"][data-theme="dark"] .brand,
body[data-area="app"][data-theme="dark"] .brand strong,
body[data-area="app"][data-theme="dark"] .card-title,
body[data-area="app"][data-theme="dark"] .modal-title,
body[data-area="app"][data-theme="dark"] .navbar-brand {
    color: var(--aividz-text);
}

body[data-area="app"][data-theme="dark"] .navbar .nav-link {
    color: var(--aividz-muted);
}

body[data-area="app"][data-theme="dark"] .navbar .nav-link:hover,
body[data-area="app"][data-theme="dark"] .navbar .nav-link:focus-visible,
body[data-area="app"][data-theme="dark"] .navbar .nav-link.active {
    color: var(--aividz-text);
}

body[data-area="app"][data-theme="dark"] .badge,
body[data-area="app"][data-theme="dark"] .text-bg-light,
body[data-area="app"][data-theme="dark"] .card-meta span,
body[data-area="app"][data-theme="dark"] .video-card-meta span {
    color: var(--aividz-muted) !important;
    background-color: var(--aividz-badge-bg) !important;
    border-color: var(--aividz-line) !important;
}

.badge,
.small,
small {
    font-size: 0.75rem;
}

.fs-3 {
    font-size: 1.45rem !important;
}

.fs-5 {
    font-size: 1.05rem !important;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-mark {
    display: grid;
    width: 2.625rem;
    height: 2.625rem;
    place-items: center;
    border-radius: var(--bs-border-radius);
    color: #ffffff;
    background: var(--bs-primary);
    font-weight: 800;
}

.brand span:last-child {
    display: block;
    line-height: 1;
}

.brand strong {
    font-size: 1.18rem;
}

.brand small,
.card-meta {
    color: var(--aividz-soft);
}

.profile-menu {
    margin-left: 0.5rem;
}

.profile-avatar-toggle {
    display: inline-grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.profile-avatar-toggle:hover,
.profile-avatar-toggle:focus-visible {
    outline: 0;
    background: transparent;
    box-shadow: none;
}

.avatar-img,
.profile-avatar-toggle img,
.profile-avatar-preview img,
.profile-avatar-preview .profile-avatar-dummy {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.avatar-img {
    display: block;
    max-width: none;
}

.profile-avatar-dummy {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 32%, #98a2b3 0 24%, transparent 25%),
        radial-gradient(circle at 50% 88%, #98a2b3 0 38%, transparent 39%);
}

.profile-avatar-preview {
    display: grid;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    background: #f2f4f7;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

body[data-area="app"][data-theme="dark"] .profile-avatar-preview,
body[data-area="app"][data-theme="dark"] .profile-avatar-dropzone,
body[data-area="app"][data-theme="dark"] .upload-dropzone,
body[data-area="app"][data-theme="dark"] .upload-zone,
body[data-area="app"][data-theme="dark"] .project-settings-tabs,
body[data-area="app"][data-theme="dark"] .job-history-list,
body[data-area="app"][data-theme="dark"] .transcript-text,
body[data-area="app"][data-theme="dark"] .diagnostic-output,
body[data-area="app"][data-theme="dark"] .video-preview-placeholder,
body[data-area="app"][data-theme="dark"] .video-preview-trigger,
body[data-area="app"][data-theme="dark"] .video-card-meta span,
body[data-area="app"][data-theme="dark"] .existing-music-list,
body[data-area="app"][data-theme="dark"] .selected-file-row,
body[data-area="app"][data-theme="dark"] .upload-progress-wrap {
    color: var(--aividz-text);
    background: var(--aividz-elevated-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .profile-avatar-dropzone.is-dragover,
body[data-area="app"][data-theme="dark"] .upload-dropzone.is-dragover,
body[data-area="app"][data-theme="dark"] .upload-zone:hover,
body[data-area="app"][data-theme="dark"] .upload-zone.is-dragover,
body[data-area="app"][data-theme="dark"] .upload-zone[data-selected]:not([data-selected=""]) {
    background: color-mix(in srgb, var(--aividz-accent) 18%, var(--aividz-elevated-bg));
}

body[data-area="app"][data-theme="dark"] .form-check-input:not(:checked),
body[data-area="app"][data-theme="dark"] .input-group-text {
    color: var(--aividz-text);
    background-color: var(--aividz-input-bg);
    border-color: var(--aividz-input-border);
}

body[data-area="app"][data-theme="dark"] .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-image: var(--bs-form-switch-bg);
}

.profile-theme-switch {
    min-height: 2rem;
    margin: 0;
}

.profile-theme-switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    cursor: pointer;
}

.profile-theme-switch .form-check-input:checked {
    background-color: var(--aividz-accent);
    border-color: var(--aividz-accent);
}

.profile-avatar-dropzone {
    display: flex;
    gap: 1rem;
    align-items: center;
    width: 100%;
    margin-bottom: 0;
    padding: 1rem;
    cursor: pointer;
    border: 1px dashed rgba(15, 23, 42, 0.22);
    border-radius: var(--bs-border-radius);
    background: #f8fafc;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.profile-avatar-dropzone:hover,
.profile-avatar-dropzone.is-dragover {
    border-color: var(--bs-primary);
    background: #eef5ff;
}

.profile-avatar-copy {
    display: grid;
    gap: 0.2rem;
    color: var(--aividz-muted);
}

.profile-avatar-copy strong {
    color: var(--aividz-ink);
}

.profile-layout {
    display: grid;
    gap: 1rem;
}

.profile-card h2 {
    margin-bottom: 1rem;
}

.profile-card form {
    margin: 0;
}

.profile-form {
    display: grid;
    gap: 0.75rem;
}

.profile-upload-progress,
.profile-form .alert {
    margin-top: 0.125rem;
}

.profile-upload-progress .progress-meta {
    margin-bottom: 0.5rem;
}

.inline-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.inline-link-list li + li::before {
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 0.5rem;
    vertical-align: middle;
    content: "";
    background: currentColor;
    opacity: 0.35;
}

.legal-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 2rem;
    color: var(--aividz-muted);
}

.legal-footer a {
    color: var(--aividz-muted);
}

.project-hero-compact {
    margin-top: -0.75rem;
}

.project-hero-clean + .section-grid,
.project-hero-compact + .section-grid,
.project-hero + .section-grid {
    margin-top: 1rem;
}

.app-container,
.site-shell {
    max-width: 1520px;
}

.lead {
    max-width: 740px;
    color: var(--aividz-muted);
}

.project-settings-link {
    margin-left: 0.35rem;
    color: var(--bs-link-color);
    font-size: 0.92em;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    vertical-align: baseline;
    opacity: 0.9;
    transition: color 160ms ease, opacity 160ms ease;
}

.project-settings-link:hover,
.project-settings-link:focus-visible {
    color: var(--bs-link-hover-color);
    opacity: 1;
    text-decoration: none;
}

.project-hero,
.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 1rem;
    align-items: start;
}

.story-steps article {
    padding: 0.875rem;
    border-radius: var(--bs-border-radius);
    background: #f8fafc;
}

.story-steps span,
.timeline span {
    color: var(--aividz-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.story-steps .job-asset-name {
    margin: 0.2rem 0 0;
    color: var(--aividz-muted);
    font-size: 0.78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sidebar-stack .story-steps {
    gap: 0;
}

.sidebar-stack .story-steps article {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--aividz-line);
    border-radius: 0;
    background: transparent;
}

.sidebar-stack .story-steps article:first-child {
    padding-top: 0;
}

.sidebar-stack .story-steps article:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.section-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 1rem;
}

.project-overview-stats.section-grid {
    margin-top: 1rem !important;
}

.section-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.section-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stack,
.form-stack,
.inline-form,
.card-list,
.story-steps {
    display: grid;
    gap: 1rem;
}

.form-stack {
    gap: 0.75rem;
}

.card > h2,
.card > form > h2,
.modal-body h2,
.profile-card h2,
.legal-page h2 {
    margin-bottom: 1rem;
}

.card > h2 + form,
.card > h2 + .profile-form,
.card > h2 + .profile-avatar-dropzone,
.legal-page h2 + * {
    margin-top: 0;
}

.inline-form {
    grid-template-columns: minmax(160px, 1fr) auto;
    align-items: end;
    margin-top: 0.75rem;
}

.section-heading {
    display: grid;
    gap: 0.125rem;
    margin: 0;
}

.project-settings-fields label {
    display: grid;
    gap: 0.35rem;
    color: var(--aividz-text);
    font-weight: 600;
}

.project-settings-fields input,
.project-settings-fields textarea,
.project-settings-fields select {
    font-weight: 400;
}

.project-settings-options {
    display: block;
}

.project-settings-options > * + * {
    margin-top: 0.75rem;
}

.target-length-control {
    display: block;
}

.project-settings-fields label.target-length-control {
    display: block;
}

.target-length-label {
    display: inline;
    white-space: nowrap;
}

.target-length-value {
    color: inherit;
    font: inherit;
}

.target-length-control input[type="range"] {
    width: 100%;
    margin-top: 0.35rem;
}

.video-adjustment-controls {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.video-adjustment-control {
    margin: 0;
}

.video-adjustment-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.video-adjustment-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    padding: 0;
    color: var(--aividz-soft);
    background: transparent;
    border: 0;
    border-radius: 0;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.video-adjustment-reset:hover,
.video-adjustment-reset:focus-visible {
    color: var(--aividz-accent);
    background: transparent;
    outline: none;
}

.video-adjustment-controls .form-message {
    min-height: 1em;
}

.video-adjustment-error[hidden] {
    display: none !important;
}

.card > :last-child,
.card-body > :last-child,
.story-steps article > :last-child,
.transcript-block > :last-child,
.asset-job-monitor > :last-child,
.diagnostic-output > :last-child {
    margin-bottom: 0;
}

.project-actions {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.project-settings-footer {
    align-items: center;
    gap: 0.75rem;
}

.project-settings-delete-link {
    margin-right: auto;
    padding: 0;
    border: 0;
    color: var(--bs-danger);
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    text-decoration: none;
}

.project-settings-delete-link:hover,
.project-settings-delete-link:focus-visible {
    color: #b02a37;
    text-decoration: none;
}

.project-settings-footer .project-settings-save-message {
    margin-right: 0;
}

.card.border-0.shadow-sm:not(.video-card) {
    padding: 1rem !important;
}

.card.border-0.shadow-sm > .card-body {
    padding: 0;
}

.dashboard-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: transparent !important;
    border: 0;
}

.dashboard-metrics > .card,
.admin-metrics > .card {
    overflow: hidden;
    border-radius: var(--bs-border-radius) !important;
    background-color: var(--aividz-card-bg);
}

.dashboard-projects {
    margin: 0;
}

.inline-text-form {
    display: inline;
    margin: 0;
}

.inline-text-form button {
    padding: 0;
    border: 0;
    color: var(--bs-link-color);
    background: transparent;
    font: inherit;
    text-decoration: none;
}

.inline-text-form button:hover,
.inline-text-form button:focus-visible {
    color: var(--bs-primary);
}

.project-hero-clean,
.upload-layout {
    grid-template-columns: 1fr;
}

.sidebar-stack {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.video-card {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
    gap: 0;
    overflow: hidden;
    align-content: stretch;
    transition: box-shadow 160ms ease, transform 180ms ease;
    will-change: transform;
}

.project-stat-card.has-side-action.card.border-0.shadow-sm,
.video-upload-card.card.border-0.shadow-sm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    gap: 0;
    overflow: hidden;
    padding: 0 !important;
}

.project-stat-card.has-side-action > .card-content,
.video-upload-card.card.border-0.shadow-sm > .card-body {
    padding: 1rem;
    min-width: 0;
}

[data-card-href] {
    cursor: pointer;
}

[data-card-href]:hover,
[data-card-href]:focus-visible {
    box-shadow: 0 0.75rem 1.75rem rgb(15 23 42 / 0.11) !important;
}

.video-card-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.video-sort-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.25rem;
    background: #f2f4f7;
}

.video-sort-controls .btn {
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    font-size: 0.72rem;
    line-height: 1;
}

.video-delete-controls {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: #f2f4f7;
}

body[data-area="app"][data-theme="dark"] .video-sort-controls,
body[data-area="app"][data-theme="dark"] .video-delete-controls {
    background: var(--aividz-elevated-bg);
}

body[data-area="app"][data-theme="dark"] .video-sort-controls .btn {
    color: var(--aividz-muted);
    background: var(--aividz-card-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .video-sort-controls .btn:hover,
body[data-area="app"][data-theme="dark"] .video-sort-controls .btn:focus-visible {
    color: var(--aividz-text);
    background: color-mix(in srgb, var(--aividz-accent) 18%, var(--aividz-card-bg));
    border-color: color-mix(in srgb, var(--aividz-accent) 45%, var(--aividz-line));
}

.video-delete-controls form {
    display: flex;
    width: 100%;
    margin: 0;
}

.side-action,
.video-delete-button {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    border-radius: 0;
    font-size: 1.35rem;
    line-height: 1;
}

.side-action {
    text-decoration: none;
}

.video-upload-button {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.video-upload-button:hover,
.video-upload-button:focus-visible {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.video-upload-button svg {
    display: block;
}

.video-card.is-dragging {
    opacity: 0.96;
    box-shadow: 0 1.25rem 2.5rem rgb(15 23 42 / 0.2) !important;
}

.video-card.is-drag-over {
    outline: 2px solid rgba(37, 99, 235, 0.24);
    outline-offset: 3px;
}

.video-card.is-sort-dragging {
    position: fixed !important;
    z-index: 1080;
    pointer-events: none;
    transform: translate3d(0, 0, 0) rotate(0.2deg);
}

.video-sort-placeholder {
    border: 1px dashed rgb(37 99 235 / 0.35);
    border-radius: var(--bs-border-radius);
    background: rgb(37 99 235 / 0.06);
    transition: height 160ms ease, margin 160ms ease;
}

.video-drag-handle {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.video-drag-handle:active {
    cursor: grabbing;
}

.is-video-sorting,
.is-video-sorting * {
    cursor: grabbing !important;
}

.music-card {
    margin-bottom: 0.375rem;
}

.music-card .danger-link {
    margin-top: 0.5rem;
}

.audio-preview-link {
    padding: 0;
    border: 0;
    color: var(--bs-link-color);
    background: transparent;
    font: inherit;
    font-weight: 400;
    text-decoration: none;
}

.audio-preview-link:hover,
.audio-preview-link:focus-visible {
    color: var(--bs-primary);
    text-decoration: none;
}

.project-list-card {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.project-card-preview {
    min-height: 99px;
    color: inherit;
    text-decoration: none;
}

.project-list-content {
    display: grid;
    align-content: start;
    gap: 0.35rem;
}

.project-title-link {
    color: var(--bs-link-color);
    font-size: 1.12rem;
    font-weight: 700;
}

[data-card-href]:hover .project-title-link,
[data-card-href]:focus-visible .project-title-link {
    color: var(--bs-link-hover-color);
}

#audioPreviewModal {
    --plyr-color-main: var(--bs-primary);
}

#audioPreviewModal .plyr {
    border-radius: var(--bs-border-radius);
}

.upload-card-wide {
    max-width: 1320px;
}

.upload-form,
.upload-section {
    display: grid;
    gap: 0.625rem;
}

.upload-form {
    gap: 0.75rem;
}

.upload-form.is-uploading .upload-zone {
    opacity: 0.62;
    cursor: progress;
}

.upload-form.is-uploading .selected-file-row button,
.upload-form.is-uploading [data-use-existing-music] {
    opacity: 0.58;
    cursor: not-allowed;
}

.upload-zone {
    display: grid;
    min-height: 188px;
    gap: 0.5rem;
    place-items: center;
    padding: 2rem 1.5rem;
    border: 1px dashed #cbd5e1;
    border-radius: var(--bs-border-radius);
    background: #eff6ff;
    text-align: center;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.upload-zone:hover,
.upload-zone.is-dragover {
    border-color: var(--aividz-accent);
    background: #dbeafe;
    box-shadow: 0 0.75rem 1.875rem rgba(37, 99, 235, 0.08);
}

.upload-zone[data-selected]:not([data-selected=""]) {
    border-color: var(--aividz-green);
    background: #ecfdf5;
}

.upload-zone span {
    font-weight: 800;
}

.upload-zone small {
    color: var(--aividz-muted);
}

.upload-zone input[type="file"] {
    position: fixed;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.selected-file-list {
    display: grid;
    gap: 0.5rem;
}

.selected-file-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--bs-border-radius);
    background: #f3f4f6;
    color: var(--aividz-muted);
}

.existing-music-list {
    display: grid;
    gap: 0.25rem;
    margin-top: 0;
    color: var(--aividz-muted);
}

.existing-music-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.existing-music-item.selected {
    color: var(--bs-body-color);
    font-weight: 700;
}

.upload-progress-wrap {
    padding: 0.875rem;
    border-radius: var(--bs-border-radius);
    background: #f8fafc;
}

[data-upload-error] {
    white-space: pre-line;
}

.progress {
    min-width: 110px;
    height: 0.8rem;
    background: #e5e7eb;
}

.progress-bar {
    background-color: var(--aividz-accent);
    font-size: 0.68rem;
    font-weight: 700;
    transition: width 600ms ease;
}

.video-card-head {
    display: grid;
    grid-template-columns: 134px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.video-preview-trigger {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--bs-border-radius);
    background: transparent;
    text-align: inherit;
}

.video-preview-trigger:not(:disabled) {
    cursor: pointer;
}

.video-preview-trigger:disabled {
    cursor: default;
}

.video-preview-trigger:focus-visible {
    outline: 3px solid rgba(13, 110, 253, 0.28);
    outline-offset: 3px;
}

.video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: inherit;
    background: #eef2f7;
}

.video-thumbnail.placeholder {
    display: grid;
    place-items: center;
    color: var(--aividz-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.video-title-link {
    color: var(--bs-link-color);
    text-decoration: none;
}

[data-card-href]:hover .video-title-link,
[data-card-href]:focus-visible .video-title-link {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

.video-card-info h3 {
    margin-bottom: 0.5rem;
}

.video-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    color: var(--aividz-soft);
    font-size: 0.78rem;
}

.video-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0.3125rem 0.5625rem;
    border-radius: var(--bs-border-radius);
    background: #f3f4f6;
}

.video-preview-frame-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.video-preview-frame {
    position: absolute;
    inset: 0;
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: none !important;
}

.video-preview-frame.is-active {
    display: block;
}

[data-video-color-preview] {
    --video-temperature-filter: brightness(1);
    --video-brightness-filter: 1;
    --video-contrast-filter: 1;
    --video-saturation-filter: 1;
}

[data-video-color-preview] .video-thumbnail,
[data-video-color-preview] .video-preview-frame {
    filter:
        var(--video-temperature-filter)
        brightness(var(--video-brightness-filter))
        contrast(var(--video-contrast-filter))
        saturate(var(--video-saturation-filter));
}

.video-temperature-filter-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.video-preview-loader {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 4;
    display: none;
    height: 3px;
    overflow: hidden;
    border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
    background: rgba(13, 110, 253, 0.16);
    pointer-events: none;
}

.video-preview-loader::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -42%;
    width: 42%;
    background: linear-gradient(90deg, transparent, var(--bs-primary), transparent);
    content: "";
    animation: thumbnail-preview-loader 1.05s ease-in-out infinite;
}

.video-preview-trigger.is-preview-loading .video-preview-loader {
    display: block;
}

@keyframes thumbnail-preview-loader {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(340%);
    }
}

.video-preview-play {
    position: absolute;
    right: 0.625rem;
    bottom: 0.625rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 999px;
    background: var(--bs-primary);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    pointer-events: none;
    transition: background-color 160ms ease;
    z-index: 3;
}

.video-preview-trigger:not(:disabled):hover .video-preview-play,
.video-preview-trigger:not(:disabled):focus-visible .video-preview-play {
    background: var(--bs-primary-hover, #0a58ca);
}

.video-preview-player {
    display: block;
    width: 100%;
    max-height: 78vh;
    border-radius: 0;
    background: #000;
}

.video-preview-stage {
    position: relative;
    background: #000;
}

.video-preview-subtitle {
    position: absolute;
    left: 50%;
    bottom: clamp(5.25rem, 17%, 9rem);
    z-index: 6;
    width: min(82%, 38rem);
    transform: translateX(-50%);
    color: #000;
    font-size: clamp(0.76rem, 1.8vw, 1.38rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
    text-wrap: balance;
    -webkit-text-stroke: 0.16em #fff;
    paint-order: stroke fill;
    text-shadow: 0 1px 1px rgb(0 0 0 / 0.16);
}

#videoPreviewModal .modal-body,
#adminVideoPreviewModal .modal-body {
    padding: 0;
}

#videoPreviewModal,
#adminVideoPreviewModal {
    --plyr-color-main: var(--bs-primary);
}

#videoPreviewModal .plyr,
#adminVideoPreviewModal .plyr {
    border-radius: 0;
}

#videoPreviewModal .plyr__video-wrapper,
#adminVideoPreviewModal .plyr__video-wrapper {
    border-radius: 0;
}

#videoPreviewModal .plyr__controls,
#adminVideoPreviewModal .plyr__controls {
    right: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 0 1rem 1rem;
}

#videoPreviewModal .plyr__controls .plyr__progress,
#videoPreviewModal .plyr__controls .plyr__progress__container,
#adminVideoPreviewModal .plyr__controls .plyr__progress,
#adminVideoPreviewModal .plyr__controls .plyr__progress__container {
    flex: 1 1 auto;
    margin: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

#videoPreviewModal .plyr__controls .plyr__progress input[type="range"],
#videoPreviewModal .plyr__controls .plyr__progress progress,
#videoPreviewModal .plyr__controls .plyr__progress__buffer,
#adminVideoPreviewModal .plyr__controls .plyr__progress input[type="range"],
#adminVideoPreviewModal .plyr__controls .plyr__progress progress,
#adminVideoPreviewModal .plyr__controls .plyr__progress__buffer {
    width: 100%;
    max-width: 100%;
}

.plyr-preview-timecode {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0.72rem;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: 0;
}

#videoPreviewModal .plyr,
#videoPreviewModal .plyr__video-wrapper,
#adminVideoPreviewModal .plyr,
#adminVideoPreviewModal .plyr__video-wrapper {
    max-height: 78vh;
}

#videoPreviewModal .plyr:fullscreen,
#videoPreviewModal .plyr:-webkit-full-screen,
#videoPreviewModal .plyr.plyr--fullscreen-active,
#videoPreviewModal .plyr.plyr--fullscreen-fallback {
    display: flex !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    align-items: center;
    justify-content: center;
    background: #000;
    border-radius: 0;
}

#videoPreviewModal .plyr:fullscreen .plyr__video-wrapper,
#videoPreviewModal .plyr:-webkit-full-screen .plyr__video-wrapper,
#videoPreviewModal .plyr.plyr--fullscreen-active .plyr__video-wrapper,
#videoPreviewModal .plyr.plyr--fullscreen-fallback .plyr__video-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
}

#videoPreviewModal .plyr:fullscreen video,
#videoPreviewModal .plyr:-webkit-full-screen video,
#videoPreviewModal .plyr.plyr--fullscreen-active video,
#videoPreviewModal .plyr.plyr--fullscreen-fallback video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.video-trim-panel {
    padding: 1rem 1rem 1.125rem;
}

.video-trim-strip {
    position: relative;
    height: 5.25rem;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background: #111827;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.video-trim-frames {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%;
}

.video-trim-frames img,
.video-trim-frame-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-trim-frame-placeholder {
    background: #1f2937;
}

.video-trim-waveform {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    mix-blend-mode: normal;
    opacity: 1;
    pointer-events: none;
}

.video-trim-contrast-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(0 0 0 / 0.3);
    pointer-events: none;
}

.video-trim-selection {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    border-left: 2px solid var(--bs-primary);
    border-right: 2px solid var(--bs-primary);
    background: transparent;
    pointer-events: none;
}

.video-trim-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: 2px;
    background: #ef4444;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
    will-change: transform;
}

.video-trim-playhead::before {
    content: none;
}

.video-trim-strip::before,
.video-trim-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    background: rgb(0 0 0 / 0.46);
    pointer-events: none;
}

.video-trim-strip::before {
    left: 0;
    width: var(--trim-left, 0%);
}

.video-trim-strip::after {
    right: 0;
    width: var(--trim-right, 0%);
}

.video-trim-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 6;
    width: 1.5rem;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    transform: translateX(-50%);
    cursor: ew-resize;
}

.video-trim-marker::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    border: 0;
    border-radius: 999px;
    background: var(--bs-primary);
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgb(0 0 0 / 0.38);
    transition: background-color 180ms ease;
}

.video-trim-marker.is-saved::before {
    background: var(--aividz-green);
}

.video-trim-marker:focus-visible {
    outline: 2px solid rgb(13 110 253 / 0.35);
    outline-offset: -2px;
}

.subtle-delete-form {
    margin-top: 0.375rem;
}

.video-meta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.25rem;
    color: var(--aividz-soft);
    font-size: 0.78rem;
}

.video-meta-actions .subtle-delete-form {
    margin: 0;
}

.text-link,
.subtle-delete-form button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--aividz-accent);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.danger-link,
.subtle-delete-form button {
    color: #b91c1c;
    text-decoration: none;
}

.text-link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.subtle-delete-form button:hover {
    color: #7f1d1d;
    text-decoration: none;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.78rem;
}

.card-meta.large {
    margin-top: 1rem;
}

.card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 1.875rem;
    padding: 0.3125rem 0.5625rem;
    border-radius: var(--bs-border-radius);
    background: #f3f4f6;
}

.video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.lut-form {
    max-width: 280px;
}

.preview-lut-card .lut-form {
    display: block;
    width: 100%;
    max-width: none;
    margin-right: 0;
}

.lut-form select {
    width: 100%;
}

.preview-lut-card .lut-form select {
    display: block;
    width: 100%;
    max-width: none;
}

.detail-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1rem;
}

.detail-card {
    margin-top: 1rem;
}

.detail-preview {
    margin-bottom: 1rem;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
    gap: 0.5rem;
}

.analysis-grid span {
    display: grid;
    gap: 0.125rem;
    min-height: 54px;
    padding: 0.5625rem 0.625rem;
    border-radius: var(--bs-border-radius);
    color: var(--aividz-soft);
    background: #f9fafb;
    font-size: 0.75rem;
}

.analysis-grid strong {
    color: var(--bs-body-color);
    font-size: 0.7rem;
}

.asset-job-monitor {
    display: grid;
    gap: 0.5rem;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.export-monitor {
    margin-top: 0.5rem;
}

.export-monitor [data-cancel-export] {
    margin-top: 0.5rem;
}

.asset-progress-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.625rem;
}

.asset-job-monitor p {
    margin: 0;
}

.export-card [data-render-output].d-none {
    display: none !important;
}

.export-details {
    margin-top: 1rem;
}

.transcript-card form,
.preview-lut-card form {
    margin: 0 0 0.5rem;
}

.transcript-section {
    margin-top: 1rem;
}

.transcript-card > .transcript-section:first-of-type {
    margin-top: 0;
}

.transcript-card form.transcript-delete-form {
    margin: 1rem 0 0;
}

.transcript-section h3 {
    margin-bottom: 0.75rem;
}

.transcript-block {
    display: grid;
    gap: 0.35rem;
    padding-top: 1rem;
    border-top: 1px solid var(--aividz-line);
}

.transcript-block p {
    margin: 0;
}

.transcript-block p:first-of-type {
    color: var(--aividz-soft);
    font-size: 0.78rem;
}

.transcript-meta-hero {
    margin-top: -0.75rem;
}

.transcript-language-field {
    max-width: 220px;
}

.transcript-language-form {
    max-width: 220px;
}

.segment-preview,
.segment-list {
    display: grid;
    gap: 0.625rem;
}

.segment-preview {
    margin: 0.375rem 0;
}

.segment-preview article,
.segment-row {
    padding: 0.75rem;
    border-left: 3px solid var(--aividz-accent);
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
    background: #f8fafc;
}

.segment-preview strong,
.segment-row strong {
    color: var(--aividz-accent);
    font-size: 0.76rem;
}

.segment-time-editor {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    color: var(--aividz-accent);
    font-size: 0.76rem;
    font-weight: 700;
}

[contenteditable="true"] {
    border-radius: var(--bs-border-radius);
    outline: 0;
}

[contenteditable="true"]:focus {
    background: #eff6ff;
    box-shadow: 0 0 0 0.15rem rgba(37, 99, 235, 0.16);
}

.segment-preview p,
.segment-row p {
    margin: 0.375rem 0 0;
}

.job-mini-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.875rem;
}

.job-mini-list div {
    display: flex;
    justify-content: space-between;
    gap: 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--aividz-line);
}

.status-uploaded,
.status-analyzing,
.status-planning,
.status-rendering,
.status-running {
    color: var(--aividz-accent);
}

.status-completed {
    color: var(--aividz-green);
}

.status-failed {
    color: var(--aividz-red);
}

.status-draft,
.status-pending,
.status-queued {
    color: var(--aividz-yellow);
}

.completed-jobs {
    margin-top: 0.625rem;
}

.completed-jobs .story-steps {
    margin-top: 0.5rem;
}

.legal-page {
    max-width: 920px;
}

.legal-page h3 {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.05rem;
}

.legal-page p,
.legal-page address,
.legal-page li {
    color: var(--aividz-muted);
    line-height: 1.55;
}

.legal-page ul {
    padding-left: 1.15rem;
    margin-bottom: 0;
}

.admin-shell {
    display: grid;
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.admin-sidebar {
    position: sticky;
    top: 5rem;
    padding: 0;
    overflow: hidden;
    background-color: var(--aividz-sidebar-bg);
}

.admin-sidebar .nav,
.admin-nav-list {
    margin: 0;
    padding: 0;
    width: 100%;
}

.admin-sidebar .nav-link,
.admin-nav-list .nav-link {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
    color: var(--aividz-muted);
    display: block;
    font-weight: 600;
    padding: 0.7rem 1rem;
    width: 100%;
}

body[data-area="app"][data-theme="dark"] .admin-sidebar .nav-link,
body[data-area="app"][data-theme="dark"] .admin-nav-list .nav-link {
    border-bottom-color: var(--aividz-line);
}

.admin-sidebar .nav-link:last-child,
.admin-nav-list .nav-link:last-child {
    border-bottom: 0;
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active,
.admin-nav-list .nav-link:hover,
.admin-nav-list .nav-link.active {
    color: #fff;
    background: var(--aividz-accent);
    border-bottom-color: rgba(255, 255, 255, 0.38);
    box-shadow: none;
}

body[data-area="app"][data-theme="dark"] .admin-sidebar .nav-link:hover,
body[data-area="app"][data-theme="dark"] .admin-sidebar .nav-link.active,
body[data-area="app"][data-theme="dark"] .admin-nav-list .nav-link:hover,
body[data-area="app"][data-theme="dark"] .admin-nav-list .nav-link.active {
    color: #fff;
    border-bottom-color: color-mix(in srgb, #ffffff 34%, var(--aividz-accent));
}

.admin-logs-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
    gap: 1rem;
    align-items: start;
}

.admin-pages-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.3fr) minmax(0, 0.7fr);
    gap: 1rem;
    align-items: start;
}

.admin-log-nav-card,
.admin-content-nav-card {
    overflow: hidden;
    padding: 0 !important;
}

.admin-log-nav {
    display: grid;
    width: 100%;
}

.admin-log-nav-link {
    display: grid;
    gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--aividz-muted);
    font-weight: 600;
}

.admin-log-nav-link:last-child {
    border-bottom: 0;
}

.admin-log-nav-link small {
    color: var(--aividz-soft);
    font-size: 0.72rem;
    font-weight: 500;
}

.admin-log-nav-link:hover,
.admin-log-nav-link.active {
    color: #fff;
    background: var(--aividz-accent);
    border-bottom-color: rgba(255, 255, 255, 0.38);
}

.admin-log-nav-link:hover small,
.admin-log-nav-link.active small {
    color: rgb(255 255 255 / 0.78);
}

body[data-area="app"][data-theme="dark"] .admin-log-nav-link {
    border-bottom-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .admin-log-nav-link:hover,
body[data-area="app"][data-theme="dark"] .admin-log-nav-link.active {
    border-bottom-color: color-mix(in srgb, #ffffff 34%, var(--aividz-accent));
}

.content-editor-toolbar {
    flex-wrap: wrap;
}

.content-editor {
    min-height: 420px;
    height: auto;
    overflow: auto;
    line-height: 1.55;
}

.content-editor:focus {
    color: var(--aividz-text);
    background-color: var(--aividz-input-bg);
}

.admin-log-output {
    max-height: 68vh;
    overflow: auto;
}

.admin-main {
    min-width: 0;
}

.admin-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.admin-chart-card canvas {
    display: block;
    width: 100%;
    max-width: 100%;
}

.admin-table th {
    color: var(--aividz-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.admin-table th,
.admin-table td {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.admin-table a {
    font-weight: 600;
    text-decoration: none;
}

.admin-table a:hover {
    text-decoration: underline;
}

.admin-api-error-cell[title]:not([title=""]) {
    cursor: help;
}

.admin-actions {
    min-width: 190px;
}

.admin-user-action-form {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.admin-filter-form {
    margin-bottom: 0;
}

.admin-log-output {
    max-height: 620px;
}

.completed-jobs summary {
    cursor: pointer;
    color: var(--aividz-accent);
    font-weight: 700;
}

.error-text {
    color: #b91c1c;
}

.form-message {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--aividz-green);
    font-size: 0.76rem;
    font-weight: 700;
}

.form-message.error-text {
    color: #b91c1c;
}

.project-settings-save-message {
    margin-right: auto;
    color: var(--aividz-green);
    font-size: 0.8rem;
}

.transcript-text {
    margin: 0;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
    background: #f9fafb;
    font-size: 0.875rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
}

.copy-source {
    display: none;
}

.timeline {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 1.75rem 0;
}

.timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 21px;
    width: 2px;
    content: "";
    background: linear-gradient(var(--aividz-green), #dc6b4f);
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 1rem;
}

.timeline-index {
    z-index: 1;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--bs-border-radius);
    color: #ffffff;
    background: var(--aividz-green);
    font-weight: 800;
}

.timeline .card header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.625rem;
}

.timeline .card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.875rem 0 0;
}

.timeline .card dt {
    color: var(--aividz-soft);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.timeline .card dd {
    margin: 0.25rem 0 0;
    color: #374151;
}

body[data-area="app"][data-theme="dark"] .timeline .card dd {
    color: var(--aividz-text);
}

.status-row-running {
    background: #eff6ff;
}

.status-row-completed {
    background: #ecfdf5;
}

.status-row-failed {
    background: #fef2f2;
}

body[data-area="app"][data-theme="dark"] .status-row-running {
    background: color-mix(in srgb, #2563eb 18%, transparent);
}

body[data-area="app"][data-theme="dark"] .status-row-completed {
    background: color-mix(in srgb, #0f766e 20%, transparent);
}

body[data-area="app"][data-theme="dark"] .status-row-failed {
    background: color-mix(in srgb, #dc2626 18%, transparent);
}

.diagnostic-output {
    overflow-x: auto;
    max-height: 260px;
    margin: 0.875rem 0 0;
    padding: 0.875rem;
    border-radius: var(--bs-border-radius);
    color: #1f2937;
    background: #f9fafb;
    white-space: pre-wrap;
}

body[data-area="app"][data-theme="dark"] .transcript-text,
body[data-area="app"][data-theme="dark"] .diagnostic-output {
    color: var(--aividz-text);
    background: var(--aividz-elevated-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .btn-light {
    color: var(--aividz-text);
    background-color: var(--aividz-elevated-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .btn-light:hover,
body[data-area="app"][data-theme="dark"] .btn-light:focus-visible {
    color: var(--aividz-text);
    background-color: color-mix(in srgb, var(--aividz-accent) 14%, var(--aividz-elevated-bg));
    border-color: color-mix(in srgb, var(--aividz-accent) 38%, var(--aividz-line));
}

body[data-area="app"][data-theme="dark"] .progress {
    background: var(--aividz-input-bg);
}

body[data-area="app"][data-theme="dark"] .upload-zone,
body[data-area="app"][data-theme="dark"] .upload-progress-wrap,
body[data-area="app"][data-theme="dark"] .selected-file-row,
body[data-area="app"][data-theme="dark"] .video-card-meta span,
body[data-area="app"][data-theme="dark"] .card-meta span,
body[data-area="app"][data-theme="dark"] .segment-preview article,
body[data-area="app"][data-theme="dark"] .segment-row,
body[data-area="app"][data-theme="dark"] .analysis-grid span,
body[data-area="app"][data-theme="dark"] .video-thumbnail,
body[data-area="app"][data-theme="dark"] .profile-avatar-dropzone,
body[data-area="app"][data-theme="dark"] .profile-avatar-preview {
    color: var(--aividz-text);
    background: var(--aividz-elevated-bg);
    border-color: var(--aividz-line);
}

body[data-area="app"][data-theme="dark"] .analysis-grid strong {
    color: var(--aividz-text);
}

body[data-area="app"][data-theme="dark"] [contenteditable="true"]:focus {
    background: color-mix(in srgb, var(--aividz-accent) 16%, var(--aividz-elevated-bg));
}

.diagnostic-output.admin-log-output {
    max-height: 68vh;
    overflow: auto;
}

@media (max-width: 900px) {
    .project-hero,
    .content-grid,
    .section-grid.two,
    .section-grid.three,
    .section-grid.four,
    .timeline .card dl,
    .inline-form,
    .project-list-card,
    .detail-top-grid,
    .video-card-head,
    .admin-shell,
    .admin-logs-layout,
    .admin-pages-layout,
    .admin-chart-grid {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        position: static;
    }

    .video-card-head .video-preview-trigger {
        max-width: 256px;
    }

    .project-card-preview {
        max-width: 320px;
    }
}

@media (max-width: 620px) {
    .site-shell {
        padding-top: 2.25rem;
        padding-bottom: 3.375rem;
    }

    .timeline .card header,
    .job-mini-list div {
        display: grid;
    }
}

.admin-landing-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.28fr) minmax(0, 0.72fr);
    gap: 1rem;
    align-items: start;
}

.admin-landing-editor {
    display: grid;
    gap: 1rem;
}

.admin-landing-create-form {
    padding: 0;
    margin: 1rem 0 0;
}

.landing-toggle-row,
.form-check.form-switch.landing-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 32px;
    margin-bottom: 1rem !important;
    padding-left: 0;
}

.landing-toggle-row .form-check-input {
    flex: 0 0 auto;
    float: none;
    margin: 0;
}

.landing-toggle-row .form-check-label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.landing-main-form > .row:not(.top-fields-row),
.landing-main-form > .top-fields-row,
.landing-main-form > .form-field-block {
    margin-bottom: 1rem;
}

.landing-main-form > .row .form-field-block,
.landing-main-form > .top-fields-row .form-field-block {
    margin-bottom: 0;
}

.landing-main-form textarea,
.landing-main-form input {
    margin-bottom: 0;
}

.admin-landing-manual-fields {
    margin-top: 1rem;
}

.landing-editor-section {
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--aividz-line);
    border-radius: var(--bs-border-radius);
    background: var(--aividz-elevated-bg);
}

.landing-editor-section:last-child {
    margin-bottom: 0;
}

.landing-editor-section .form-field-block,
.landing-editor-section .row,
.landing-editor-section .landing-repeat-item {
    margin-bottom: 1rem;
}

.landing-editor-section .form-field-block:last-child,
.landing-editor-section .row:last-child,
.landing-editor-section .landing-repeat-item:last-child {
    margin-bottom: 0;
}

.landing-editor-section textarea,
.landing-editor-section input {
    margin-bottom: 0;
}

.landing-editor-section > h2,
.landing-editor-section > h3,
.landing-editor-section > h4,
.landing-editor-section > h5 {
    margin-top: 0;
    margin-bottom: 1rem;
}

body[data-area="app"][data-theme="dark"] .landing-editor-section {
    background: color-mix(in srgb, var(--aividz-card-bg) 72%, #ffffff 6%);
    border-color: var(--aividz-line);
}

@media (max-width: 767.98px) {
    .landing-main-form > .top-fields-row {
        margin-bottom: 0;
    }

    .landing-main-form > .top-fields-row .form-field-block {
        margin-bottom: 1rem;
    }

    .landing-main-form > .row:not(.top-fields-row) .form-field-block {
        margin-bottom: 1rem;
    }

    .landing-main-form > .row:not(.top-fields-row) > [class*="col-"]:last-child .form-field-block {
        margin-bottom: 0;
    }
}

.admin-landing-preview {
    max-height: 760px;
    overflow: auto;
    border: 1px solid var(--aividz-line);
    border-radius: 14px;
    background: #080b12;
}

.admin-landing-preview .landing-page {
    min-height: auto;
}

.landing-public-body {
    margin: 0;
    background: #070a12;
    color: #eef4ff;
}

.landing-public-body * {
    box-sizing: border-box;
}

.landing-page {
    --landing-bg: #070a12;
    --landing-panel: rgba(18, 24, 38, 0.86);
    --landing-panel-solid: #111827;
    --landing-text: #f8fbff;
    --landing-muted: #a9b5c7;
    --landing-line: rgba(169, 181, 199, 0.18);
    --landing-blue: #4f8cff;
    --landing-blue-strong: #2563eb;
    --landing-green: #2dd4bf;
    min-height: 100vh;
    overflow: hidden;
    color: var(--landing-text);
    background:
        radial-gradient(circle at top left, rgba(79, 140, 255, 0.22), transparent 32rem),
        linear-gradient(180deg, #070a12 0%, #0a1020 48%, #070a12 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing-page a {
    color: inherit;
    text-decoration: none;
}

.landing-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    backdrop-filter: blur(18px);
}

.landing-brand,
.landing-nav-actions,
.landing-cta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.landing-brand span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--landing-blue), var(--landing-green));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.landing-nav-actions {
    color: var(--landing-muted);
    font-size: 0.95rem;
}

.landing-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.78rem 1rem;
    border: 1px solid var(--landing-line);
    border-radius: 999px;
    font-weight: 750;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.landing-btn:hover {
    transform: translateY(-1px);
}

.landing-btn-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--landing-blue-strong), var(--landing-blue));
    box-shadow: 0 14px 36px rgba(37, 99, 235, 0.28);
}

.landing-btn-secondary {
    color: var(--landing-text);
    background: rgba(255, 255, 255, 0.05);
}

.landing-hero,
.landing-section,
.landing-split,
.landing-pricing,
.landing-final,
.landing-footer {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    min-height: min(860px, calc(100vh - 4rem));
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

.landing-eyebrow,
.landing-section-kicker {
    margin: 0 0 1rem;
    color: var(--landing-green);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-hero h1,
.landing-section h2,
.landing-split h2,
.landing-pricing h2,
.landing-final h2 {
    margin: 0;
    color: var(--landing-text);
    letter-spacing: 0;
}

.landing-hero h1 {
    max-width: 11ch;
    font-size: clamp(3.15rem, 7vw, 6.85rem);
    line-height: 0.94;
}

.landing-hero-subtitle,
.landing-section-heading p,
.landing-split p,
.landing-pricing p,
.landing-final p,
.landing-feature-grid p,
.landing-steps p,
.landing-audience-grid p,
.landing-faq p {
    color: var(--landing-muted);
}

.landing-hero-subtitle {
    max-width: 42rem;
    margin: 1.35rem 0 1.75rem;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    line-height: 1.65;
}

.landing-showcase {
    position: relative;
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid var(--landing-line);
    border-radius: 1.6rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--landing-panel);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.42);
}

.landing-showcase-header {
    display: flex;
    gap: 0.4rem;
    padding: 0.25rem 0 0.8rem;
}

.landing-showcase-header span {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
}

.landing-showcase-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 4rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--landing-line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.055);
    animation: landingFloat 5.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.45s);
}

.landing-section,
.landing-split,
.landing-pricing,
.landing-final {
    padding-top: clamp(3rem, 8vw, 6rem);
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

.landing-logo-row,
.landing-stats,
.landing-feature-grid,
.landing-steps,
.landing-audience-grid,
.landing-testimonials {
    display: grid;
    gap: 1rem;
}

.landing-logo-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: 1.5rem;
}

.landing-logo-row span,
.landing-stats div,
.landing-feature-grid article,
.landing-steps article,
.landing-audience-grid article,
.landing-testimonials blockquote,
.landing-bullet-panel,
.landing-faq details {
    border: 1px solid var(--landing-line);
    border-radius: 1.2rem;
    background: var(--landing-panel);
}

.landing-logo-row span {
    padding: 1rem;
    color: var(--landing-muted);
    text-align: center;
    font-weight: 750;
}

.landing-stats {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1rem;
}

.landing-stats div {
    padding: 1.2rem;
}

.landing-stats strong {
    display: block;
    color: var(--landing-text);
    font-size: 2rem;
}

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

.landing-section-heading {
    display: grid;
    gap: 0.75rem;
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.landing-section-heading h2,
.landing-split h2,
.landing-pricing h2,
.landing-final h2 {
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1;
}

.landing-feature-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.landing-feature-grid article,
.landing-steps article,
.landing-audience-grid article,
.landing-testimonials blockquote,
.landing-faq details {
    padding: 1.15rem;
}

.landing-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    border-radius: 0.7rem;
    background: linear-gradient(135deg, var(--landing-blue), var(--landing-green));
}

.landing-feature-grid h3,
.landing-steps h3,
.landing-audience-grid h3 {
    margin: 0 0 0.55rem;
    color: var(--landing-text);
    font-size: 1.05rem;
}

.landing-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-steps span {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    color: #fff;
    background: var(--landing-blue-strong);
    font-weight: 800;
}

.landing-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
    gap: 1.2rem;
    align-items: stretch;
}

.landing-split > div:first-child,
.landing-pricing,
.landing-final {
    border: 1px solid var(--landing-line);
    border-radius: 1.6rem;
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.16), rgba(255, 255, 255, 0.035));
}

.landing-split > div:first-child {
    padding: clamp(1.35rem, 4vw, 2.5rem);
}

.landing-bullet-panel {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.7rem;
    padding: clamp(1.35rem, 4vw, 2.5rem);
}

.landing-bullet-panel span {
    padding: 0.7rem 0.85rem;
    border-radius: 999px;
    color: var(--landing-text);
    background: rgba(255, 255, 255, 0.07);
}

.landing-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-testimonials {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-testimonials blockquote {
    margin: 0;
}

.landing-testimonials p {
    color: var(--landing-text);
    font-size: 1.05rem;
}

.landing-testimonials footer {
    color: var(--landing-muted);
    font-weight: 700;
}

.landing-pricing,
.landing-final {
    text-align: center;
}

.landing-not-found {
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.landing-pricing p,
.landing-final p {
    max-width: 620px;
    margin: 1rem auto 1.4rem;
}

.landing-faq {
    display: grid;
    gap: 0.75rem;
}

.landing-faq summary {
    cursor: pointer;
    color: var(--landing-text);
    font-weight: 800;
}

.landing-faq p {
    margin: 0.75rem 0 0;
}

.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: var(--landing-muted);
}

.landing-footer nav {
    display: flex;
    gap: 1rem;
}

.landing-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms ease;
}

.landing-reveal.is-visible,
.admin-landing-preview .landing-reveal {
    opacity: 1;
    transform: none;
}

@keyframes landingFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (max-width: 1000px) {
    .landing-hero,
    .landing-split,
    .landing-feature-grid,
    .landing-steps,
    .landing-audience-grid,
    .landing-testimonials,
    .admin-landing-layout {
        grid-template-columns: 1fr;
    }

    .landing-hero h1 {
        max-width: 13ch;
    }
}

@media (max-width: 640px) {
    .landing-nav,
    .landing-footer,
    .landing-nav-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .landing-hero {
        min-height: auto;
    }

    .landing-hero h1 {
        font-size: 3rem;
    }
}
