:root {
    --av-primary: #0d3157;
    --av-primary-soft: #eaf0f6;
    --av-secondary: #c99a3b;
    --av-bg: #f6f7f9;
    --av-success: #16a36a;
    --av-danger: #dc3545;
    --av-text: #253549;
    --av-muted: #718096;
    --av-border: #e7eaf0;
}

* { box-sizing: border-box; }
body { background: var(--av-bg); color: var(--av-text); font-family: Inter, system-ui, -apple-system, sans-serif; }
a { color: var(--av-primary); }
.text-primary-custom { color: var(--av-primary) !important; }
.bg-primary-custom { background: var(--av-primary) !important; }
.btn-primary { --bs-btn-bg: var(--av-primary); --bs-btn-border-color: var(--av-primary); --bs-btn-hover-bg: #092744; --bs-btn-hover-border-color: #092744; }
.btn-gold { color: #fff; background: var(--av-secondary); border-color: var(--av-secondary); }
.btn-gold:hover { color: #fff; background: #b48834; border-color: #b48834; }
.app-shell { min-height: 100vh; }
.app-sidebar { background: var(--av-primary); color: #fff; position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 1040; padding: 1.5rem 1rem; overflow-y: auto; }
.app-main { margin-left: 260px; min-height: 100vh; }
.app-content { padding: 1.75rem; }
.brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .8rem; padding: .2rem .65rem 1.75rem; }
.brand:hover { color: #fff; }
.brand-mark { width: 43px; height: 43px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(145deg, var(--av-secondary), #e1bd70); color: var(--av-primary); font-size: 1.35rem; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.brand-title { font-size: .98rem; font-weight: 800; letter-spacing: .05em; line-height: 1.15; }
.brand-subtitle { font-size: .68rem; opacity: .66; letter-spacing: .12em; }
.sidebar-label { padding: 0 .75rem; color: rgba(255,255,255,.45); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; margin: 1rem 0 .5rem; }
.sidebar-nav .nav-link { color: rgba(255,255,255,.72); border-radius: 10px; padding: .72rem .8rem; margin-bottom: .22rem; display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
.sidebar-nav .nav-link.active { box-shadow: inset 3px 0 var(--av-secondary); }
.sidebar-nav .nav-link.disabled { opacity: .42; }
.app-topbar { height: 74px; background: #fff; border-bottom: 1px solid var(--av-border); display: flex; align-items: center; justify-content: space-between; padding: 0 1.75rem; position: sticky; top: 0; z-index: 1020; }
.user-avatar { width: 38px; height: 38px; background: var(--av-primary-soft); color: var(--av-primary); border-radius: 50%; display: grid; place-items: center; font-weight: 700; }
.surface { background: #fff; border: 1px solid var(--av-border); border-radius: 15px; box-shadow: 0 4px 18px rgba(13,49,87,.045); }
.surface-header { padding: 1.2rem 1.35rem; border-bottom: 1px solid var(--av-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.surface-body { padding: 1.35rem; }
.page-title { color: var(--av-primary); font-size: 1.55rem; font-weight: 750; margin: 0; }
.page-subtitle { color: var(--av-muted); margin: .35rem 0 0; font-size: .9rem; }
.stat-card { padding: 1.2rem; height: 100%; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; width: 75px; height: 75px; border-radius: 50%; right: -22px; top: -24px; background: var(--stat-color, var(--av-primary)); opacity: .08; }
.stat-icon { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--stat-color, var(--av-primary)); background: color-mix(in srgb, var(--stat-color, var(--av-primary)) 12%, white); font-size: 1.15rem; }
.stat-label { color: var(--av-muted); font-size: .73rem; letter-spacing: .065em; font-weight: 700; text-transform: uppercase; }
.stat-value { color: var(--av-primary); font-weight: 800; font-size: 1.65rem; margin-top: .4rem; }
.table { --bs-table-color: var(--av-text); margin: 0; }
.table thead th { color: #718096; font-size: .69rem; letter-spacing: .055em; text-transform: uppercase; border-bottom-color: var(--av-border); white-space: nowrap; padding: .9rem .85rem; }
.table tbody td { border-bottom-color: #eff1f4; padding: .85rem; vertical-align: middle; font-size: .86rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.thumb { width: 86px; height: 50px; border-radius: 8px; background: #eaf0f6; object-fit: cover; display: grid; place-items: center; color: #91a2b4; }
.status-badge { display: inline-flex; align-items: center; gap: .32rem; border-radius: 999px; padding: .31rem .62rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.status-pending { color: #5d6875; background: #edf0f3; }
.status-processing { color: #8a630d; background: #fff3cd; }
.status-completed { color: #0c744a; background: #dff7ec; }
.status-failed { color: #a52734; background: #fde8ea; }
.progress { height: 8px; background: #e9edf2; border-radius: 999px; }
.progress-bar { background: linear-gradient(90deg, var(--av-secondary), #e1bd70); }
.form-label { color: #34455a; font-size: .84rem; font-weight: 650; }
.form-control, .form-select { border-color: #dfe4ea; border-radius: 9px; padding: .66rem .78rem; }
.form-control:focus, .form-select:focus { border-color: #7192b4; box-shadow: 0 0 0 .2rem rgba(13,49,87,.1); }
.upload-zone { border: 1.5px dashed #a8b7c7; border-radius: 13px; padding: 1.65rem; text-align: center; background: #fafbfd; cursor: pointer; transition: .2s ease; }
.upload-zone:hover, .upload-zone.dragging { border-color: var(--av-secondary); background: #fffaf0; }
.flow-node { background: #fff; border: 1px solid var(--av-border); border-radius: 12px; min-height: 86px; padding: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; }
.flow-node.active { border-color: #b9cbe0; box-shadow: 0 0 0 3px rgba(13,49,87,.05); }
.flow-arrow { color: var(--av-secondary); text-align: center; font-size: 1.15rem; padding: .25rem; }
.empty-state { text-align: center; padding: 4rem 1.5rem; }
.empty-icon { width: 78px; height: 78px; display: grid; place-items: center; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--av-primary-soft); color: var(--av-primary); font-size: 2rem; }
.detail-label { font-size: .72rem; color: var(--av-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .055em; margin-bottom: .3rem; }
.detail-value { font-weight: 600; color: #2c3e50; word-break: break-word; }
.video-player { width: 100%; border-radius: 13px; background: #061523; max-height: 560px; }
.processing-hero { padding: 2rem; text-align: center; }
.processing-ring { width: 82px; height: 82px; border: 7px solid #e8edf2; border-top-color: var(--av-secondary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: .15rem 0 1.25rem 2.15rem; color: var(--av-muted); }
.timeline li::before { content: ''; width: 12px; height: 12px; position: absolute; left: 2px; top: .3rem; border: 3px solid #cfd7df; background: #fff; border-radius: 50%; z-index: 1; }
.timeline li::after { content: ''; position: absolute; left: 7px; top: .95rem; bottom: -.05rem; border-left: 2px solid #e1e6eb; }
.timeline li:last-child::after { display: none; }
.timeline li.done::before { background: var(--av-success); border-color: var(--av-success); }
.timeline li.current { color: var(--av-primary); font-weight: 650; }
.timeline li.current::before { border-color: var(--av-secondary); }
.login-page { min-height: 100vh; background: linear-gradient(130deg, #092744 0%, var(--av-primary) 52%, #174d7c 100%); display: grid; place-items: center; padding: 1.5rem; position: relative; overflow: hidden; }
.login-page::before, .login-page::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; width: 520px; height: 520px; }
.login-page::before { left: -260px; top: -230px; }
.login-page::after { right: -280px; bottom: -280px; }
.login-card { width: min(100%, 430px); padding: 2.2rem; position: relative; z-index: 1; }
.login-logo { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(145deg, var(--av-secondary), #e6c57e); color: var(--av-primary); font-size: 1.8rem; box-shadow: 0 10px 28px rgba(13,49,87,.2); }
.offcanvas.app-mobile-menu { background: var(--av-primary); color: #fff; }

@media (max-width: 991.98px) {
    .app-sidebar { display: none; }
    .app-main { margin-left: 0; }
    .app-content { padding: 1.1rem; }
    .app-topbar { padding: 0 1.1rem; }
}

@media (max-width: 575.98px) {
    .page-title { font-size: 1.3rem; }
    .surface-header, .surface-body { padding: 1rem; }
    .login-card { padding: 1.4rem; }
}