:root {
    --md-bg: #f5f7fb;
    --md-surface: #ffffff;
    --md-border: #d8e0ea;
    --md-muted: #65748b;
    --md-text: #1f2a37;
    --md-primary: #0d6efd;
    --md-hover: #f0f5ff;
    --md-selected: #e8f1ff;
    --md-success-soft: #e8f7ef;
    --md-warning-soft: #fff6df;
    --md-danger-soft: #fde9e9;
    --md-font-sans: "Outfit", "Noto Sans Thai", "Segoe UI", sans-serif;
}

body:not(.fm-app):not(.md-public) {
    background: var(--md-bg);
    color: var(--md-text);
    font-family: var(--md-font-sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body:not(.fm-app):not(.md-public) .table td,
body:not(.fm-app):not(.md-public) .table th {
    vertical-align: middle;
}

body:not(.fm-app):not(.md-public) .card {
    border-color: var(--md-border);
}

body:not(.fm-app):not(.md-public) .card .card-header {
    background: var(--md-surface);
    border-bottom-color: var(--md-border);
}

.md-file-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.md-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.md-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem .9rem;
}

.md-meta-item {
    border: 1px solid #e7edf4;
    border-radius: .6rem;
    padding: .45rem .55rem;
    background: #fafcff;
}

.md-meta-label {
    color: var(--md-muted);
    font-size: .79rem;
}

.md-meta-value {
    font-weight: 600;
    font-size: .92rem;
}

.md-help-text {
    font-size: .85rem;
    color: var(--md-muted);
}

.md-player-wrap {
    border: 1px solid #000000cf;
    border-radius: .65rem;
    overflow: hidden;
    background: #111;
}

.md-player-wrap video,
.md-player-wrap img {
    width: 100%;
    max-height: 560px;
    display: block;
    object-fit: contain;
    background: #000;
}

.md-derivative-row {
    border: 1px solid #e6edf5;
    border-radius: .7rem;
    padding: .65rem;
    margin-bottom: .55rem;
}

.md-derivative-row:last-child {
    margin-bottom: 0;
}

.md-derivative-row[data-status="ready"] {
    background: var(--md-success-soft);
    border-color: #bfe7cf;
}

.md-derivative-row[data-status="processing"],
.md-derivative-row[data-status="queued"] {
    background: var(--md-warning-soft);
    border-color: #f0d594;
}

.md-derivative-row[data-status="failed"],
.md-derivative-row[data-status="canceled"] {
    background: var(--md-danger-soft);
    border-color: #f1c5c5;
}

.md-job-card .progress {
    height: .75rem;
}

.drive-toolbar {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .75rem;
    border: 1px solid var(--md-border);
    border-radius: .9rem;
    background: #fff;
}

.drive-btn-new {
    min-width: 94px;
    border-radius: .8rem;
    font-weight: 600;
}

.drive-search {
    flex: 1;
    min-width: 220px;
}

.drive-search .form-control {
    border-radius: .75rem;
}

.drive-files-card {
    border: 1px solid var(--md-border);
    overflow: hidden;
    background: #fff;
}

.drive-files-card .table {
    margin-bottom: 0;
}

.drive-files-card .table thead th {
    background: #f8fafc;
    border-color: var(--md-border);
    font-weight: 600;
}

.drive-files-card .table tbody td {
    border-color: #e7edf4;
}

.drive-files-card .table tbody tr:hover td {
    background: var(--md-hover);
}

.drive-files-card .table tbody tr.md-row-selected td,
.md-row-selected td,
.md-row-selected {
    background: var(--md-selected) !important;
}

.md-selection-bar {
    display: none;
    border: 1px solid #bfd2f2;
    background: #ecf4ff;
    border-radius: .8rem;
    padding: .55rem .7rem;
    margin-bottom: .75rem;
}

.md-selection-bar.active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.md-selection-actions {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
}

.md-list-thumb {
    width: 58px;
    height: 58px;
    border: 1px solid #d8e2ef;
    border-radius: .55rem;
    object-fit: cover;
    background: #f0f2f5;
}

.md-derivative-badges {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.md-derivative-badges .badge {
    font-weight: 600;
}

.md-batch-modal .modal-content {
    border: 1px solid #d8e0ea;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.md-batch-scope {
    border: 1px dashed #c8d6eb;
    border-radius: .6rem;
    padding: .5rem .6rem;
    background: #f7faff;
}

.md-badge-ready {
    background: #198754;
}

.md-badge-queued {
    background: #ffc107;
    color: #222;
}

.md-badge-processing {
    background: #0d6efd;
}

.md-badge-failed {
    background: #dc3545;
}

.md-badge-canceled {
    background: #6c757d;
}

.md-badge-none {
    background: #6c757d;
}

.md-badge-partial {
    background: #0dcaf0;
    color: #123;
}

.md-auth-main {
    padding: 0;
    margin: 0;
}

body.md-auth {
    background: #090b12;
    color: #e6e9f2;
}

.md-auth-shell {
    min-height: 100vh;
    background:
        linear-gradient(rgba(255, 92, 26, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(66, 95, 148, .06) 1px, transparent 1px),
        radial-gradient(1200px 560px at 68% -190px, rgba(255, 92, 26, .12), transparent 52%),
        linear-gradient(180deg, #0f121a 0%, #0a0d14 58%, #080b12 100%);
    background-size: 56px 56px, 56px 56px, auto, auto;
    background-position: 0 0, 0 0, center, center;
    display: flex;
    flex-direction: column;
    color: #e6e9f2;
}

body.vh-hothead-soft.md-auth .md-auth-shell {
    background:
        linear-gradient(rgba(255, 92, 26, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(72, 103, 156, .05) 1px, transparent 1px),
        radial-gradient(1200px 560px at 68% -190px, rgba(255, 92, 26, .10), transparent 52%),
        linear-gradient(180deg, #10131b 0%, #0b0e15 58%, #090c13 100%);
    background-size: 60px 60px, 60px 60px, auto, auto;
    background-position: 0 0, 0 0, center, center;
}

body.vh-hothead-bold.md-auth .md-auth-shell {
    background:
        linear-gradient(rgba(255, 92, 26, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(77, 112, 170, .08) 1px, transparent 1px),
        radial-gradient(1200px 560px at 68% -190px, rgba(255, 92, 26, .18), transparent 52%),
        linear-gradient(180deg, #0d1018 0%, #090c13 58%, #080a11 100%);
    background-size: 52px 52px, 52px 52px, auto, auto;
    background-position: 0 0, 0 0, center, center;
}

.md-auth-topbar {
    height: 56px;
    border-bottom: 1px solid #242b39;
    background: #11151f;
    display: flex;
    align-items: center;
    padding: 0 1.15rem;
}

.md-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .58rem;
    color: #f2f5ff;
    text-decoration: none;
    font-weight: 700;
}

.md-auth-brand-text {
    font-size: 1.12rem;
}

.md-auth-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: .52rem;
    background: linear-gradient(180deg, #ff7440, #ff5c1a);
    color: #fff;
    font-weight: 700;
    font-size: .83rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    box-shadow: 0 10px 22px rgba(255, 92, 26, .3);
}

.md-auth-brand-logo--small {
    width: 40px;
    height: 40px;
    border-radius: .62rem;
    flex-basis: 40px;
    font-size: .9rem;
}

.md-auth-brand-logo--image {
    background: #101520;
    overflow: hidden;
    border: 1px solid #2a3344;
    padding: 0;
}

.md-auth-brand-logo--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.md-auth-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}

.md-auth-card {
    width: min(100%, 380px);
    border-radius: .92rem;
    border: 1px solid #2a3243 !important;
    background: linear-gradient(180deg, #161b27, #131824);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
}

.md-auth-card--wide {
    width: min(100%, 440px);
}

.md-auth-card .card-body {
    color: #e8ecf6;
}

.md-auth-card .text-muted,
.md-auth-card .small.text-muted {
    color: #9ca6bc !important;
}

.md-auth-card hr {
    border-color: #2a3142;
    opacity: 1;
}

.md-auth-form .form-label {
    color: #e2e7f4;
    font-weight: 500;
}

.md-auth-form .form-control {
    border-radius: .58rem;
    height: 42px;
    border: 1px solid #353d50;
    background: #1a2030;
    color: #f4f6fb;
}

.md-auth-form .form-control::placeholder {
    color: #808aa0;
}

.md-auth-form .form-control:focus {
    border-color: rgba(255, 92, 26, .64);
    background: #20273a;
    color: #fff;
    box-shadow: 0 0 0 .18rem rgba(255, 92, 26, .16);
}

.md-auth-form .form-check-input {
    background-color: #1a2030;
    border-color: #3a4358;
}

.md-auth-form .form-check-input:checked {
    background-color: #ff5c1a;
    border-color: #ff5c1a;
}

.md-auth-form a {
    color: #9ec0ff;
}

.md-auth-form a:hover {
    color: #c8dbff;
}

.md-auth-submit {
    border-radius: .62rem;
    font-weight: 700;
    border: 1px solid #ff5c1a !important;
    color: #fff !important;
    background: linear-gradient(180deg, #ff7440, #ff5c1a) !important;
    box-shadow: 0 12px 24px rgba(255, 92, 26, .28);
}

.md-auth-submit:hover,
.md-auth-submit:focus-visible {
    border-color: #ff7e4e !important;
    background: linear-gradient(180deg, #ff8155, #ff6630) !important;
    box-shadow: 0 14px 28px rgba(255, 92, 26, .34);
}

.md-auth-hint {
    background: rgba(76, 103, 152, .16);
    border: 1px solid rgba(139, 168, 224, .3);
    border-radius: .58rem;
    color: #c8d8f8;
    font-size: .9rem;
    padding: .62rem .75rem;
}

.md-auth-footer {
    text-align: center;
    color: #7d879d;
    font-size: .86rem;
    padding: .8rem 1rem 1rem;
}

@media (max-width: 991px) {
    .md-file-actions {
        width: 100%;
    }

    .md-file-actions .btn,
    .md-file-actions .dropdown {
        flex: 1 1 auto;
    }

    .md-auth-content {
        align-items: flex-start;
        padding-top: 2.4rem;
    }
}

@media (max-width: 767px) {
    .drive-toolbar {
        flex-wrap: wrap;
    }

    .drive-search {
        min-width: 100%;
    }

    .md-player-wrap video,
    .md-player-wrap img {
        max-height: 320px;
    }
}

.md-swal-popup,
.md-swal-toast {
    border-radius: .9rem !important;
    font-family: var(--md-font-sans) !important;
}

.md-swal-popup .swal2-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.md-swal-popup .swal2-html-container {
    font-size: .96rem;
}

.md-swal-confirm,
.md-swal-cancel {
    border-radius: .55rem !important;
    min-width: 98px;
    font-weight: 600 !important;
}

.md-swal-toast .swal2-title {
    font-size: .92rem !important;
}