/* =====================================================================
   PaTaS Design System  ·  v2  (ICTMO green identity + light/dark themes)
   Typography: "Sora" (headings) + "Inter" (body).
   ===================================================================== */

@import url('fonts.css');

/* ---- Brand scale (constant across themes) ---- */
:root {
    --brand-900: #0e1406;
    --brand-800: #16221a;
    --brand-700: #1f3329;
    --brand-600: #2a4a38;

    /* green accent — kept under legacy --violet-* names so existing markup works */
    --violet-500: #3a6b4a;
    --violet-400: #4f8c63;
    --violet-300: #7cb88a;
    --teal-glow: rgba(58, 107, 74, .35);

    /* teal-* aliases (used by some components) → green accent */
    --teal-500: #3a6b4a;
    --teal-400: #4f8c63;
    --teal-300: #7cb88a;

    /* legacy plum aliases → deep forest green */
    --plum-900: #0e1406;
    --plum-800: #16221a;
    --plum-700: #1f3329;
    --plum-600: #2a4a38;

    --gold-500: #f0b429;
    --gold-400: #f6c651;
    --gold-glow: rgba(240, 180, 41, .38);

    --radius: 16px;
    --radius-sm: 10px;
    --sidebar-w: 268px;
    --sidebar-w-collapsed: 76px;
    --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --font-head: 'Sora', var(--font);

    --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Light theme (default) ---- */
:root, :root[data-theme="light"] {
    --bg: #eef4ea;
    --bg-grad-1: #eaf4e6;
    --bg-grad-2: #f0f5ec;
    --surface: #ffffff;
    --surface-2: #f2f8ee;
    --surface-glass: rgba(255, 255, 255, .72);
    --border: #d4e4cc;
    --text: #1a2410;
    --text-soft: #5a6b50;
    --text-faint: #8a9b80;

    --success: #0f9d72; --success-bg: #e2f7ef;
    --danger: #e0435a;  --danger-bg: #fce4e8;
    --info: #2f86c9;    --info-bg: #e4f0fb;
    --warn: #d98a00;    --warn-bg: #fdf1d9;

    --shadow-sm: 0 1px 2px rgba(14, 20, 6, .05), 0 2px 8px rgba(14, 20, 6, .06);
    --shadow-md: 0 10px 28px rgba(14, 20, 6, .12);
    --shadow-lg: 0 24px 60px rgba(14, 20, 6, .22);
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
    --bg: #0a0f04;
    --bg-grad-1: #0e1406;
    --bg-grad-2: #0a0f04;
    --surface: #121a0a;
    --surface-2: #1a2410;
    --surface-glass: rgba(18, 26, 10, .72);
    --border: #243a1c;
    --text: #e6f0e0;
    --text-soft: #9db890;
    --text-faint: #608055;

    --success: #22c58f; --success-bg: rgba(34, 197, 143, .14);
    --danger: #ff6b81;  --danger-bg: rgba(255, 107, 129, .14);
    --info: #52a8f0;    --info-bg: rgba(82, 168, 240, .14);
    --warn: #f5b53a;    --warn-bg: rgba(245, 181, 58, .14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, .5);
    --shadow-lg: 0 28px 64px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
body {
    background-image:
        radial-gradient(1100px 600px at 12% -10%, var(--bg-grad-1), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, var(--bg-grad-1), transparent 55%);
    background-attachment: fixed;
}
/* Smooth theme transition */
body, .card, .stat, .sidebar, .topbar, .modal, input, select, textarea,
table.data td, table.data th, .leader-row, .contestant-card, .chip, .badge, .btn-ghost {
    transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -.01em; margin: 0 0 .4em; }
a { color: var(--violet-500); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--violet-300); color: var(--brand-900); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* =====================================================================
   Keyframes
   ===================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 var(--teal-glow); } 70% { box-shadow: 0 0 0 14px rgba(58,107,74,0); } 100% { box-shadow: 0 0 0 0 rgba(58,107,74,0); } }
@keyframes glowPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
/* barFill removed — progress bar width is now driven by JS (requestAnimationFrame) */
@keyframes sheen { to { transform: translateX(220%) skewX(-18deg); } }

.anim-up { animation: fadeUp .5s var(--ease) both; }

/* =====================================================================
   App shell
   ===================================================================== */
.app { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w); flex-shrink: 0;
    background: linear-gradient(180deg, #0e1a10 0%, #122418 40%, #0e1a10 100%);
    color: #dce8d4; display: flex; flex-direction: column;
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    border-right: 1px solid rgba(124,184,138,.12);
    transition: width .35s var(--ease);
    overflow: hidden;
}
.sidebar::before { /* ambient glow */
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 280px 180px at 30% 10%, rgba(79,140,99,.22), transparent 70%),
        radial-gradient(ellipse 200px 300px at 80% 90%, rgba(124,184,138,.10), transparent 70%);
}
.sidebar::after { /* top accent line */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: .5; z-index: 2;
}

/* ---- Brand / Logo ---- */
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px 18px; position: relative; z-index: 1; }
.sidebar .brand .brand-logo-group { position: relative; display: flex; align-items: center; flex-shrink: 0; animation: floatY 5s ease-in-out infinite; }
.sidebar .brand .brand-logo-ring {
    position: absolute; inset: -5px; border-radius: 14px; border: 2px solid transparent;
    border-top-color: #7cb88a; border-right-color: var(--gold-400);
    animation: spin 4s linear infinite;
}
.sidebar .brand .brand-logo {
    width: 42px; height: 42px; border-radius: 12px; object-fit: contain; background: #fff;
    padding: 4px; box-shadow: 0 6px 20px rgba(124,184,138,.4); position: relative; z-index: 1;
    transition: transform .3s var(--ease);
}
.sidebar .brand:hover .brand-logo { transform: scale(1.05); }
.sidebar .brand .brand-text { transition: opacity .25s var(--ease); white-space: nowrap; overflow: hidden; }
.sidebar .brand .brand-text b { display: block; font-family: var(--font-head); font-size: 19px; color: #fff; line-height: 1.3; letter-spacing: .02em; }
.sidebar .brand .brand-text b .brand-name { font-weight: 800; }
.sidebar .brand .brand-text span { font-size: 10px; color: #7cb88a; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

/* ---- Collapse button ---- */
.sidebar-collapse-btn {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; border-radius: 9px;
    border: 1px solid rgba(124,184,138,.2); background: rgba(124,184,138,.08);
    color: #7cb88a; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all .25s var(--ease); flex-shrink: 0; z-index: 3;
}
.sidebar-collapse-btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.sidebar-collapse-btn:hover { background: rgba(124,184,138,.2); color: #fff; border-color: rgba(124,184,138,.4); transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 14px rgba(124,184,138,.3); }
.sidebar-collapse-btn:active { transform: translateY(-50%) scale(.92); }

/* ---- Navigation ---- */
.sidebar nav { padding: 6px 12px; flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; z-index: 1; }
.sidebar nav::-webkit-scrollbar { width: 4px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(124,184,138,.2); border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(124,184,138,.4); }

.sidebar .nav-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .16em; color: #4a7a55;
    padding: 18px 14px 8px; font-weight: 700; transition: opacity .25s var(--ease);
}

.sidebar nav a {
    display: flex; align-items: center; gap: 13px; padding: 11px 14px; margin: 3px 0;
    border-radius: 12px; color: #a8c8a0; font-weight: 500; font-size: 14px; text-decoration: none;
    transition: all .22s var(--ease); position: relative; overflow: hidden;
}
.sidebar nav a::before { /* hover slide-in glow */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
    border-radius: 0 3px 3px 0; transform: scaleY(0); transition: transform .25s var(--ease);
}
.sidebar nav a svg { width: 20px; height: 20px; flex-shrink: 0; opacity: .8; transition: all .22s var(--ease); }
.sidebar nav a span { transition: opacity .25s var(--ease); white-space: nowrap; overflow: hidden; }
.sidebar nav a:hover {
    background: linear-gradient(90deg, rgba(124,184,138,.12), rgba(124,184,138,.03));
    color: #fff; text-decoration: none; padding-left: 18px;
}
.sidebar nav a:hover::before { transform: scaleY(1); }
.sidebar nav a:hover svg { transform: scale(1.15); opacity: 1; color: #7cb88a; }
.sidebar nav a.active {
    background: linear-gradient(90deg, rgba(124,184,138,.22), rgba(124,184,138,.06));
    color: #fff; box-shadow: 0 2px 12px rgba(124,184,138,.15);
}
.sidebar nav a.active::before { transform: scaleY(1); }
.sidebar nav a.active svg { color: var(--gold-400); opacity: 1; filter: drop-shadow(0 0 6px rgba(212,169,57,.4)); }

/* ---- Side footer ---- */
.sidebar .side-foot { padding: 16px 18px; border-top: 1px solid rgba(124,184,138,.1); position: relative; z-index: 1; }
.sidebar .side-foot .who { font-size: 12px; color: #8aac88; transition: opacity .25s var(--ease); }
.sidebar .side-foot .who b { color: #fff; display: block; font-family: var(--font-head); font-size: 14px; margin-top: 2px; }
.sidebar .side-foot .side-foot-btn { transition: all .22s var(--ease); }
.sidebar .side-foot .side-foot-btn svg { flex-shrink: 0; transition: transform .2s; }
.sidebar .side-foot .side-foot-btn:hover svg { transform: scale(1.1); }

/* ---- Expand button in topbar ---- */
.sidebar-expand-btn {
    display: none; background: none; border: 0; cursor: pointer; color: var(--text);
    padding: 4px; align-items: center;
}
.sidebar-expand-btn svg { width: 26px; height: 26px; transition: transform .2s; }
.sidebar-expand-btn:hover svg { transform: scale(1.1); color: var(--violet-500); }

/* =====================================================================
   COLLAPSED SIDEBAR STATE
   ===================================================================== */
.sidebar.collapsed { width: var(--sidebar-w-collapsed) !important; }
.sidebar.collapsed .brand { justify-content: center; padding: 22px 0 18px; }
.sidebar.collapsed .brand .brand-text { opacity: 0; width: 0; pointer-events: none; }
.sidebar.collapsed .brand .brand-logo-group { margin: 0 auto; }
.sidebar.collapsed .sidebar-collapse-btn { opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.5); }

.sidebar.collapsed .nav-label { opacity: 0; height: 0; padding: 0; margin: 0; overflow: hidden; pointer-events: none; }
.sidebar.collapsed nav a { justify-content: center; padding: 12px 0; }
.sidebar.collapsed nav a span { opacity: 0; width: 0; pointer-events: none; }
.sidebar.collapsed nav a:hover { padding-left: 0; }
.sidebar.collapsed nav a::before { left: -2px; }

.sidebar.collapsed .side-foot { padding: 12px 0; }
.sidebar.collapsed .side-foot .who { opacity: 0; height: 0; overflow: hidden; margin: 0; pointer-events: none; }
.sidebar.collapsed .side-foot-btn { display: flex !important; align-items: center; justify-content: center; padding: 10px 0; width: 100%; }
.sidebar.collapsed .side-foot-btn span { opacity: 0; width: 0; pointer-events: none; }

.sidebar.collapsed .notif-badge {
    margin-left: 0 !important; position: absolute; top: 2px; right: 6px;
    font-size: 9px; min-width: 16px; height: 16px; padding: 0 4px;
}

/* Main content shifts when collapsed */
.main.sidebar-collapsed { margin-left: var(--sidebar-w-collapsed) !important; }
.main.sidebar-collapsed .sidebar-expand-btn { display: inline-flex !important; }
.main.sidebar-collapsed .menu-btn { display: none !important; }

/* ---- Tooltip for collapsed nav items ---- */
.sidebar.collapsed nav a::after,
.sidebar.collapsed .side-foot-btn::after {
    content: attr(data-tip);
    position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-6px);
    background: #0e1a10; color: #fff; padding: 7px 14px; border-radius: 9px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: all .2s var(--ease);
    z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,.4);
    border: 1px solid rgba(124,184,138,.2);
}
.sidebar.collapsed nav a:hover::after,
.sidebar.collapsed .side-foot-btn:hover::after {
    opacity: 1; transform: translateY(-50%) translateX(0);
}

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; transition: margin-left .35s var(--ease); }

.topbar {
    height: 70px; background: var(--surface-glass); backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
    position: sticky; top: 0; z-index: 30;
}
.topbar .page-title { font-size: 20px; }
.topbar .page-title small { display: block; font-family: var(--font); font-weight: 400; font-size: 12.5px; color: var(--text-soft); }
.topbar .top-actions { display: flex; align-items: center; gap: 14px; }

.event-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text-soft);
}
.event-pill b { color: var(--text); }
.event-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); animation: glowPulse 2s infinite; }

.content { padding: 28px; flex: 1; animation: fadeIn .4s ease; }

/* Developer credit in app footer */
.app-footer-dev {
    padding: 12px 28px; border-top: 1px solid var(--border);
    background: var(--surface); display: flex; justify-content: center;
}
.app-dev-credit {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 18px 8px 8px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--border);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    cursor: default;
}
.app-dev-credit:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(79,140,99,.15);
}
.app-dev-avatar-wrap {
    position: relative; width: 42px; height: 42px;
    display: grid; place-items: center; flex-shrink: 0;
}
.app-dev-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; position: relative; z-index: 2;
    border: 2px solid var(--surface);
    transition: transform .4s var(--ease);
    image-rendering: -webkit-optimize-contrast;
    filter: contrast(1.05) saturate(1.1);
    cursor: pointer;
}
.app-dev-credit:hover .app-dev-avatar { transform: scale(1.1) rotate(5deg); }
.app-dev-ring {
    position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #4f8c63; border-right-color: #7cb88a;
    animation: devSpin 3s linear infinite;
}
@keyframes devSpin { to { transform: rotate(360deg); } }
.app-dev-text { font-size: 13px; color: var(--text-soft); }
.app-dev-text b {
    background: linear-gradient(135deg, #4f8c63, #7cb88a, #4f8c63);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: devNameShimmer 3s ease-in-out infinite;
}
@keyframes devNameShimmer {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Developer image lightbox */
.dev-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.85);
    display: none; align-items: center; justify-content: center;
    animation: devLbFade .25s ease;
    cursor: zoom-out;
}
.dev-lightbox.open { display: flex; }
.dev-lightbox-img {
    max-width: 90vw; max-height: 85vh; border-radius: 16px;
    object-fit: cover; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: devLbZoom .3s cubic-bezier(.16,1,.3,1);
}
.dev-lightbox-close {
    position: absolute; top: 20px; right: 24px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: 22px; cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s, transform .2s;
}
.dev-lightbox-close:hover { background: rgba(255,255,255,.2); transform: scale(1.1); }
.dev-lightbox-label {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,.7); font-size: 14px; font-weight: 600;
    letter-spacing: .03em;
}
@keyframes devLbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes devLbZoom { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.menu-btn { display: none; background: none; border: 0; cursor: pointer; color: var(--text); }
.menu-btn svg { width: 26px; height: 26px; }

/* ---- Theme toggle ---- */
.theme-toggle { background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; }
.tt-track {
    width: 58px; height: 30px; border-radius: 999px; background: var(--surface-2);
    border: 1px solid var(--border); position: relative; display: inline-flex; align-items: center;
    transition: background .3s;
}
.tt-thumb {
    position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    display: grid; place-items: center; color: var(--brand-900);
    transition: left .35s var(--ease), background .35s; box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.tt-thumb svg { width: 15px; height: 15px; }
.tt-sun { display: block; } .tt-moon { display: none; }
[data-theme="dark"] .tt-thumb { left: 31px; background: linear-gradient(135deg, var(--violet-400), var(--violet-500)); color: #fff; }
[data-theme="dark"] .tt-sun { display: none; } [data-theme="dark"] .tt-moon { display: block; }
.theme-toggle:hover .tt-thumb { transform: translateY(-50%) scale(1.08); }

/* =====================================================================
   Cards / stats
   ===================================================================== */
.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
    animation: fadeUp .5s var(--ease) both;
}
.card-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.card-head h3 svg { width: 18px; height: 18px; color: var(--violet-500); }
.card-head .sub { font-size: 12.5px; color: var(--text-soft); }
.card-body { padding: 22px; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin-bottom: 24px; }
.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    animation: fadeUp .5s var(--ease) both; transition: transform .25s var(--ease), box-shadow .25s;
}
.stat::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); opacity: .9; }
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stats-grid .stat:nth-child(1){animation-delay:.02s} .stats-grid .stat:nth-child(2){animation-delay:.08s}
.stats-grid .stat:nth-child(3){animation-delay:.14s} .stats-grid .stat:nth-child(4){animation-delay:.2s}
.stat .stat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; transition: transform .25s var(--ease); }
.stat:hover .stat-icon { transform: scale(1.1) rotate(-6deg); }
.stat .stat-icon svg { width: 24px; height: 24px; }
.stat .ic-violet { background: color-mix(in srgb, var(--violet-500) 16%, transparent); color: var(--violet-500); }
.stat .ic-gold { background: color-mix(in srgb, var(--gold-500) 18%, transparent); color: var(--warn); }
.stat .ic-green { background: var(--success-bg); color: var(--success); }
.stat .ic-blue { background: var(--info-bg); color: var(--info); }
.stat .stat-value { font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: 1; }
.stat .stat-label { color: var(--text-soft); font-size: 13px; margin-top: 6px; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; gap: 8px; justify-content: center;
    font-family: var(--font); font-weight: 600; font-size: 14px;
    padding: 10px 18px; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
    transition: transform .12s var(--ease), box-shadow .2s, background .2s, filter .2s;
    text-decoration: none; line-height: 1; position: relative; overflow: hidden;
}
.btn::after { /* sheen */
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: translateX(0) skewX(-18deg); opacity: 0;
}
.btn:hover::after { opacity: 1; animation: sheen .7s var(--ease); }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); color: #fff; box-shadow: 0 8px 20px var(--teal-glow); }
.btn-primary:hover { box-shadow: 0 12px 28px var(--teal-glow); }
.btn-gold { background: linear-gradient(135deg, var(--gold-500), var(--gold-400)); color: var(--brand-900); box-shadow: 0 8px 20px var(--gold-glow); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--violet-300); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-sm { padding: 7px 12px; font-size: 13px; border-radius: 9px; }
.btn-icon { padding: 8px; border-radius: 9px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* =====================================================================
   Tables
   ===================================================================== */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background .15s; }
table.data tbody tr:hover { background: var(--surface-2); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Badges & chips */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.badge-active { background: var(--success-bg); color: var(--success); }
.badge-setup { background: var(--info-bg); color: var(--info); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-final { background: color-mix(in srgb, var(--violet-500) 15%, transparent); color: var(--violet-500); }
.chip { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--text-soft); transition: border .15s, color .15s; }
a.chip:hover { border-color: var(--violet-300); color: var(--violet-500); text-decoration: none; }
.weight-chip { font-family: var(--font-head); font-weight: 700; color: var(--violet-500); }

/* Forms */
.form-grid { display: grid; gap: 16px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field .hint { font-size: 12px; color: var(--text-faint); margin-top: 5px; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select, textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px;
    font-family: var(--font); font-size: 14px; background: var(--surface); color: var(--text);
    transition: border .18s, box-shadow .18s, background .3s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 3px var(--teal-glow); }
input[type=file] { padding: 9px 13px; }
textarea { resize: vertical; min-height: 84px; }

/* ---- Premium Time Picker ---- */
.time-picker-wrapper { display: flex; flex-direction: column; gap: 12px; }
.time-picker-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--text);
    text-transform: uppercase; letter-spacing: .5px;
}
.time-picker-label i { color: var(--violet-500); font-size: 14px; animation: tpClockSpin 4s linear infinite; }
@keyframes tpClockSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.time-picker-grid {
    display: flex; align-items: stretch; gap: 10px;
}

.time-picker-card {
    flex: 1; position: relative; display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 14px;
    border: 1.5px solid var(--border);
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: all .25s var(--ease);
    overflow: hidden;
    animation: tpCardIn .4s var(--ease) both;
}
.time-picker-card:nth-child(3) { animation-delay: .08s; }
@keyframes tpCardIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.time-picker-card:hover {
    border-color: var(--violet-300);
    box-shadow: 0 4px 20px rgba(58, 107, 74, .12);
    transform: translateY(-2px);
}

.time-picker-card.active {
    border-color: var(--violet-400);
    box-shadow: 0 0 0 3px var(--teal-glow), 0 8px 28px rgba(58, 107, 74, .18);
}

.time-picker-glow {
    position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
    background: radial-gradient(circle at 30% 50%, var(--teal-glow), transparent 60%);
    opacity: 0; transition: opacity .3s var(--ease);
}
.time-picker-card.active .time-picker-glow { opacity: .5; animation: tpGlowPulse 2s ease-in-out infinite; }
@keyframes tpGlowPulse { 0%, 100% { opacity: .3; } 50% { opacity: .6; } }

.time-picker-icon {
    width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    color: #fff; font-size: 15px;
    box-shadow: 0 4px 12px var(--teal-glow);
    transition: all .25s var(--ease);
}
.time-picker-icon.end {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
    box-shadow: 0 4px 12px var(--gold-glow);
}
.time-picker-card:hover .time-picker-icon { transform: scale(1.1) rotate(-5deg); }
.time-picker-card.active .time-picker-icon { animation: tpIconBounce .4s var(--ease); }
@keyframes tpIconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

.time-picker-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.time-picker-content label {
    font-size: 11px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .5px; margin: 0;
}
.time-picker-content input[type=time],
.time-picker-content input[type=datetime-local] {
    width: 100%; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 8px; font-family: var(--font); font-size: 14px;
    background: var(--surface); color: var(--text);
    transition: all .18s var(--ease);
}
.time-picker-content input:focus {
    border-color: var(--violet-400); box-shadow: 0 0 0 2px var(--teal-glow);
}

.time-picker-display {
    display: flex; align-items: baseline; gap: 4px;
    font-family: var(--font-head); font-weight: 700;
    padding: 2px 0;
}
.time-picker-display .time-value {
    font-size: 20px; color: var(--text);
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all .3s var(--ease);
}
.time-picker-display .time-meridiem {
    font-size: 12px; color: var(--text-faint); font-weight: 600;
}
.time-picker-card.active .time-picker-display .time-value {
    animation: tpValuePop .3s var(--ease);
}
@keyframes tpValuePop { from { transform: scale(.8); opacity: .5; } to { transform: scale(1); opacity: 1; } }

.time-picker-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 32px; flex-shrink: 0;
    color: var(--text-faint); font-size: 16px;
    animation: tpArrowSlide 1.8s ease-in-out infinite;
}
@keyframes tpArrowSlide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.time-duration-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 10px;
    background: var(--surface-2); border: 1px solid var(--border);
    font-size: 12px; font-weight: 600; color: var(--text-soft);
    transition: all .3s var(--ease);
    animation: tpBadgeIn .4s var(--ease) both;
}
@keyframes tpBadgeIn { from { opacity: 0; } to { opacity: 1; } }
.time-duration-badge i { color: var(--violet-500); }
.time-duration-badge.active {
    background: linear-gradient(135deg, color-mix(in srgb, var(--violet-500) 12%, var(--surface-2)), var(--surface-2));
    border-color: var(--violet-300);
    color: var(--violet-500);
    box-shadow: 0 2px 12px var(--teal-glow);
}
.time-duration-badge.active i { animation: tpHourglassSpin 1s ease-in-out; }
@keyframes tpHourglassSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }

/* ---- Slot Conflict Check Box ---- */
.slot-conflict-box {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
    animation: tpBadgeIn .3s var(--ease) both;
}
.slot-conflict-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    font-size: 12px; font-weight: 600; color: var(--text-soft);
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--violet-500) 6%, transparent);
}
.slot-conflict-header i { color: var(--violet-500); font-size: 14px; }
.slot-conflict-count {
    margin-left: auto;
    padding: 2px 8px; border-radius: 20px;
    font-size: 11px; font-weight: 700;
    background: var(--violet-100, color-mix(in srgb, var(--violet-500) 15%, transparent));
    color: var(--violet-500);
}
.slot-conflict-list {
    max-height: 200px; overflow-y: auto;
    padding: 6px 0;
}
.slot-conflict-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 14px;
    font-size: 12px; color: var(--text);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.slot-conflict-item:last-child { border-bottom: none; }
.slot-conflict-item .sci-time {
    font-weight: 700; color: var(--text);
    white-space: nowrap; min-width: 120px;
}
.slot-conflict-item .sci-fac {
    font-weight: 600; color: var(--text-soft);
    flex: 1;
}
.slot-conflict-item .sci-status {
    padding: 2px 8px; border-radius: 20px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    white-space: nowrap;
}
.slot-conflict-item .sci-status.pending {
    background: color-mix(in srgb, #d98a00 15%, transparent);
    color: #d98a00;
}
.slot-conflict-item .sci-status.approved {
    background: color-mix(in srgb, #0f9d72 15%, transparent);
    color: #0f9d72;
}
.slot-conflict-empty {
    padding: 14px; text-align: center;
    font-size: 12px; color: var(--text-faint);
}
.slot-conflict-overlap {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}
.slot-conflict-overlap .sci-time { color: var(--danger); }

/* Make time-picker-display clickable */
.time-picker-display { cursor: pointer; border-radius: 6px; padding: 2px 6px; transition: background .2s; }
.time-picker-display:hover { background: color-mix(in srgb, var(--violet-500) 8%, transparent); }
.time-picker-display:active { transform: scale(.97); }

/* ---- Clock Picker Popover ---- */
.clock-backdrop { position: fixed; inset: 0; z-index: 999; background: transparent; }
.clock-popover {
    position: fixed; z-index: 1000;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    padding: 16px; width: 240px;
    animation: clockIn .25s var(--ease) both;
}
@keyframes clockIn { from { opacity: 0; transform: translateY(-8px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.clock-digital {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
    margin-bottom: 14px;
}
.clock-digital .cp-h, .clock-digital .cp-m {
    font-size: 30px; font-weight: 700; font-family: var(--font-head);
    color: var(--text); cursor: pointer;
    padding: 2px 8px; border-radius: 8px;
    transition: all .2s;
}
.clock-digital .cp-h:hover, .clock-digital .cp-m:hover { background: color-mix(in srgb, var(--violet-500) 8%, transparent); }
.clock-digital .cp-h.cp-sel, .clock-digital .cp-m.cp-sel {
    background: color-mix(in srgb, var(--violet-500) 12%, transparent);
    color: var(--violet-500);
}
.clock-digital .cp-colon { font-size: 26px; font-weight: 700; color: var(--text-faint); }
.clock-digital .cp-ampm {
    font-size: 13px; font-weight: 700; color: var(--text-soft);
    cursor: pointer; padding: 4px 10px; border-radius: 8px;
    border: 1px solid var(--border); transition: all .2s; margin-left: 4px;
}
.clock-digital .cp-ampm:hover { border-color: var(--violet-400); color: var(--violet-500); background: color-mix(in srgb, var(--violet-500) 6%, transparent); }

.clock-face {
    position: relative; width: 200px; height: 200px; margin: 0 auto;
    border-radius: 50%; background: var(--surface-2);
    border: 2px solid var(--border); cursor: pointer; user-select: none;
    box-shadow: inset 0 2px 8px rgba(0,0,0,.04);
}
.clock-num {
    position: absolute; font-size: 14px; font-weight: 700; color: var(--text);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all .2s;
}
.clock-num:hover { background: color-mix(in srgb, var(--violet-500) 12%, transparent); }
.clock-num.cp-selected {
    background: var(--violet-500); color: #fff;
    box-shadow: 0 2px 10px var(--teal-glow);
}
.clock-hand {
    position: absolute; left: 50%; top: 50%;
    width: 2px; height: 76px;
    background: var(--violet-500);
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    border-radius: 2px; transition: transform .25s var(--ease);
    pointer-events: none; z-index: 5;
}
.clock-hand::after {
    content: ''; position: absolute; bottom: -5px; left: 50%;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--violet-500); transform: translateX(-50%);
}
.clock-center-dot {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--violet-500); transform: translate(-50%, -50%);
    z-index: 6; pointer-events: none;
}
.clock-actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
}
.clock-actions button {
    padding: 7px 18px; border-radius: 8px;
    font-size: 12px; font-weight: 600;
    border: 1px solid var(--border);
    background: var(--surface); color: var(--text);
    cursor: pointer; transition: all .2s;
}
.clock-actions button:hover { border-color: var(--violet-400); color: var(--violet-500); }
.clock-actions .cp-done {
    background: var(--violet-500); color: #fff; border-color: var(--violet-500);
}
.clock-actions .cp-done:hover { background: var(--violet-400); color: #fff; border-color: var(--violet-400); }

@media (max-width: 540px) {
    .time-picker-grid { flex-direction: column; }
    .time-picker-arrow { transform: rotate(90deg); width: auto; height: 24px; }
    .time-picker-card { padding: 12px 14px; }
    .time-picker-display .time-value { font-size: 18px; }
}

/* ---- Event Details Modal ---- */
.event-modal { max-width: 560px; padding: 0; overflow: hidden; }
.event-modal .modal-body { padding: 20px 24px; }

.event-modal-hero {
    position: relative; padding: 28px 24px 22px; overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.event-modal-hero-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(135deg, var(--violet-500) 0%, var(--violet-400) 50%, var(--brand-600) 100%);
    opacity: .08;
    animation: evHeroShift 6s ease-in-out infinite alternate;
}
@keyframes evHeroShift { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.1) rotate(2deg); } }

.event-modal-close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--surface-glass); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
}
.event-modal-close:hover { background: var(--danger-bg); color: var(--danger); transform: rotate(90deg); }

.event-modal-hero-content { position: relative; z-index: 2; animation: evHeroIn .4s var(--ease) both; }
@keyframes evHeroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.event-modal-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: .5px;
    margin-bottom: 10px;
    animation: evBadgePop .3s var(--ease) .1s both;
}
@keyframes evBadgePop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.event-modal-status-badge.approved { background: var(--success-bg); color: var(--success); }
.event-modal-status-badge.pending { background: var(--warn-bg); color: var(--warn); }
.event-modal-status-badge.rejected { background: var(--danger-bg); color: var(--danger); }
.event-modal-status-badge.cancelled { background: var(--surface-2); color: var(--text-faint); }
.event-modal-status-badge i { font-size: 12px; }
.event-modal-status-badge.approved i { animation: evCheckPulse 2s ease-in-out infinite; }
@keyframes evCheckPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

.event-modal-title {
    margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.3;
    font-family: var(--font-head); color: var(--text);
}
.event-modal-subtitle {
    font-size: 13px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.event-modal-subtitle i { color: var(--violet-500); font-size: 12px; }

/* Detail grid cards */
.event-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    margin-bottom: 16px;
}
.event-detail-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 13px;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    transition: all .25s var(--ease);
    animation: evCardIn .35s var(--ease) both;
}
@keyframes evCardIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.event-detail-card:hover { border-color: var(--violet-300); box-shadow: 0 4px 16px rgba(58,107,74,.1); transform: translateY(-2px); }
.event-detail-card-wide { grid-column: 1 / -1; }

.event-detail-card-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    transition: transform .25s var(--ease);
}
.event-detail-card:hover .event-detail-card-icon { transform: scale(1.1) rotate(-5deg); }

.event-detail-card-body { flex: 1; min-width: 0; }
.event-detail-card-label {
    font-size: 10px; font-weight: 600; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
}
.event-detail-card-value {
    font-size: 14px; font-weight: 700; color: var(--text);
    font-family: var(--font-head); line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.event-detail-card-sub { font-size: 12px; color: var(--text-soft); margin-top: 1px; }

/* Additional details section */
.event-detail-section {
    border: 1px solid var(--border); border-radius: 13px; overflow: hidden;
    margin-bottom: 16px;
    animation: evCardIn .35s var(--ease) both;
}
.event-detail-section-title {
    padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--text);
    background: var(--surface-2); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    text-transform: uppercase; letter-spacing: .5px;
}
.event-detail-section-title i { color: var(--violet-500); }
.event-detail-section-body { padding: 6px 14px; }
.event-detail-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
    font-size: 13px;
}
.event-detail-row:last-child { border-bottom: none; }
.event-detail-row-label {
    flex-shrink: 0; min-width: 110px; font-weight: 600; color: var(--text-soft);
    display: flex; align-items: center; gap: 6px;
}
.event-detail-row-label i { color: var(--violet-500); font-size: 12px; }
.event-detail-row-value { color: var(--text); flex: 1; }

/* Admin note */
.event-detail-admin-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border-radius: 13px;
    background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
    font-size: 13px; color: var(--text); margin-bottom: 16px;
    animation: evCardIn .35s var(--ease) both;
}
.event-detail-admin-note i { color: var(--info); font-size: 16px; margin-top: 2px; }

/* Action buttons */
.event-detail-actions {
    display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px;
}
.event-detail-btn {
    flex: 1; min-width: 120px; justify-content: center;
    animation: evCardIn .35s var(--ease) both; animation-delay: .4s;
}

@media (max-width: 480px) {
    .event-detail-grid { grid-template-columns: 1fr; }
    .event-detail-row { flex-direction: column; gap: 4px; }
    .event-detail-row-label { min-width: auto; }
}

/* Alerts */
.alert { padding: 12px 16px; border-radius: 11px; font-size: 14px; margin-bottom: 16px; border: 1px solid transparent; animation: fadeUp .4s var(--ease) both; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert-info { background: var(--info-bg); color: var(--info); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert-warn { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(4,20,26,.6); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; animation: fadeIn .2s ease; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; animation: pop .28s var(--ease); margin: auto; }
.modal .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal .modal-head h3 { margin: 0; font-size: 17px; }
.modal .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal .modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); flex-shrink: 0; }
.modal-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--text-faint); line-height: 1; transition: color .15s, transform .15s; }
.modal-close:hover { color: var(--danger); transform: rotate(90deg); }

/* Empty state */
.empty { text-align: center; padding: 46px 20px; color: var(--text-soft); }
.empty svg { width: 46px; height: 46px; color: var(--text-faint); margin-bottom: 12px; }

/* Utility */
.flex { display: flex; } .between { justify-content: space-between; } .items-center { align-items: center; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-0 { margin-top: 0; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.grow { flex: 1; } .text-soft { color: var(--text-soft); } .text-faint { color: var(--text-faint); }
.text-right { text-align: right; } .nowrap { white-space: nowrap; } .grid { display: grid; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; animation: fadeUp .45s var(--ease) both; }
.page-head h2 { font-size: 22px; margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--text-soft); font-size: 14px; max-width: 640px; }

/* Progress */
.progress { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); border-radius: 999px; transition: width .6s var(--ease); position: relative; }
.progress > span::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); background-size: 200% 100%; animation: shimmer 2s infinite; }

/* Avatars */
.avatar { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); display: inline-block; }
.avatar-lg { width: 96px; height: 96px; border-radius: 18px; }
.avatar-fallback { display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: var(--violet-500); background: color-mix(in srgb, var(--violet-500) 14%, transparent); }

/* Rank medals */
.rank-badge { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border); }
.rank-1 { background: linear-gradient(145deg, var(--gold-400), var(--gold-500)); color: var(--brand-900); border: 0; box-shadow: 0 4px 14px var(--gold-glow); animation: pulseRing 2.4s infinite; }
.rank-2 { background: linear-gradient(145deg, #dfe4ea, #b9c3ce); color: #38414d; border: 0; }
.rank-3 { background: linear-gradient(145deg, #eab97f, #cf9553); color: #4a2f11; border: 0; }

/* =====================================================================
   Judge scoring interface
   ===================================================================== */
.score-cat { margin-bottom: 22px; animation: fadeUp .5s var(--ease) both; }
.score-cat .cat-bar { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; padding: 14px 20px; border-radius: 14px 14px 0 0; position: relative; overflow: hidden; }
.score-cat .cat-bar::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(79,140,99,.4), transparent 70%); }
.score-cat .cat-bar h3 { color: #fff; margin: 0; font-size: 16px; z-index: 1; }
.score-cat .cat-bar .cat-w { font-size: 13px; color: var(--gold-400); font-weight: 600; z-index: 1; }
.score-cat .criteria-list { border: 1px solid var(--border); border-top: 0; border-radius: 0 0 14px 14px; background: var(--surface); }
.criterion { padding: 18px 20px; border-bottom: 1px solid var(--border); transition: background .15s; }
.criterion:hover { background: var(--surface-2); }
.criterion:last-child { border-bottom: 0; }
.criterion .crit-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.criterion .crit-name { font-weight: 600; }
.criterion .crit-meta { font-size: 12.5px; color: var(--text-soft); }
.score-row { display: flex; align-items: center; gap: 18px; }
.score-row input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; height: 8px; border-radius: 999px; background: var(--border); outline: none; }
.score-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--violet-500); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s; }
.score-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); box-shadow: 0 0 0 6px var(--teal-glow); }
.score-row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--violet-500); cursor: pointer; }
.score-row .score-num { width: 92px; }
.score-row .score-num input { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.save-flag { font-size: 12px; min-width: 74px; text-align: right; color: var(--text-faint); transition: color .2s; }
.save-flag.saving { color: var(--info); } .save-flag.saved { color: var(--success); } .save-flag.error { color: var(--danger); }

.contestant-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 20px; }
.contestant-chip { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; text-decoration: none; color: var(--text); transition: transform .15s, border-color .15s, box-shadow .15s; }
.contestant-chip:hover { border-color: var(--violet-300); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.contestant-chip.active { background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--teal-glow); }
.contestant-chip.active .num { background: rgba(255,255,255,.25); color: #fff; }
.contestant-chip .num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-weight: 700; font-size: 13px; }

/* =====================================================================
   Score page — two-column layout (sidebar + main)
   Full light-mode + dark-mode support throughout.
   ===================================================================== */

/* ── Override judge-wrap: full width, keep top padding for spacing ── */
.judge-wrap:has(.score-layout) { max-width: 100%; padding: 0; }

/* ── Outer two-column grid ── */
.score-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    min-height: calc(100vh - 68px);
    align-items: start;
}

/* ═══════════════════════════════════════════════════
   SIDEBAR
   • Dark mode  → deep green panel (brand colours)
   • Light mode → white panel with green accents
═══════════════════════════════════════════════════ */
.score-sidebar {
    position: sticky;
    top: 68px;
    min-height: calc(100vh - 68px);
    overflow: visible;
    /* dark default */
    background: var(--brand-900);
    border-right: 1px solid rgba(255,255,255,.09);
    display: flex;
    flex-direction: column;
    transition: background .35s, border-color .35s;
}
/* light mode: clean white card */
:root[data-theme="light"] .score-sidebar,
:root:not([data-theme="dark"]) .score-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--border);
}

/* ── Sidebar header ── */
.sb-head {
    padding: 14px 14px 10px;
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    position: sticky; top: 0; z-index: 2;
    background: var(--brand-900);
    transition: background .35s, border-color .35s;
}
:root[data-theme="light"] .sb-head,
:root:not([data-theme="dark"]) .sb-head {
    background: #ffffff;
    border-bottom-color: var(--border);
}

.sb-head-top { display: flex; align-items: center; justify-content: space-between; }

.sb-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    text-decoration: none; transition: opacity .15s;
    /* dark */
    color: #7cb88a;
}
:root[data-theme="light"] .sb-back,
:root:not([data-theme="dark"]) .sb-back { color: var(--teal-500); }
.sb-back:hover { opacity: .75; text-decoration: none; }
.sb-back svg { width: 16px; height: 16px; }

.sb-count {
    font-size: 11px; padding: 3px 9px; border-radius: 999px;
    /* dark */
    color: rgba(255,255,255,.45); background: rgba(255,255,255,.1);
}
:root[data-theme="light"] .sb-count,
:root:not([data-theme="dark"]) .sb-count {
    color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--border);
}

/* ── Search input ── */
.sb-search-wrap { position: relative; }
.sb-search-wrap svg {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 15px; height: 15px; pointer-events: none;
    /* dark */
    color: rgba(255,255,255,.4);
}
:root[data-theme="light"] .sb-search-wrap svg,
:root:not([data-theme="dark"]) .sb-search-wrap svg { color: var(--text-faint); }

.sb-search {
    width: 100%; padding: 8px 12px 8px 32px;
    border-radius: 10px;
    font-size: 13px; font-family: var(--font);
    outline: none;
    transition: background .15s, border-color .15s;
    /* dark */
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(124,184,138,.18);
    color: #fff;
}
:root[data-theme="light"] .sb-search,
:root:not([data-theme="dark"]) .sb-search {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}
.sb-search::placeholder { color: rgba(255,255,255,.35); }
:root[data-theme="light"] .sb-search::placeholder,
:root:not([data-theme="dark"]) .sb-search::placeholder { color: var(--text-faint); }
.sb-search:focus { background: rgba(255,255,255,.13); border-color: rgba(79,140,99,.55); }
:root[data-theme="light"] .sb-search:focus,
:root:not([data-theme="dark"]) .sb-search:focus {
    background: #fff; border-color: var(--teal-400); box-shadow: 0 0 0 3px rgba(58,107,74,.12);
}

/* ── Sidebar list ── */
.sb-list { padding: 8px 8px 24px; display: flex; flex-direction: column; gap: 5px; }

.sb-no-results {
    padding: 18px 12px; text-align: center; font-size: 13px; display: none;
    color: rgba(255,255,255,.35);
}
:root[data-theme="light"] .sb-no-results,
:root:not([data-theme="dark"]) .sb-no-results { color: var(--text-faint); }
.sb-no-results.show { display: block; }

/* ── Contestant card in sidebar ── */
.sb-card {
    display: flex; align-items: center; gap: 11px;
    padding: 10px; border-radius: 13px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .15s, box-shadow .15s;
    position: relative;
    animation: fadeUp .4s var(--ease) both;
    /* dark default */
    color: rgba(255,255,255,.82);
}
:root[data-theme="light"] .sb-card,
:root:not([data-theme="dark"]) .sb-card { color: var(--text); }

.sb-card:hover {
    transform: translateX(3px);
    text-decoration: none;
    /* dark */
    background: rgba(255,255,255,.07); border-color: rgba(124,184,138,.22); color: #fff;
}
:root[data-theme="light"] .sb-card:hover,
:root:not([data-theme="dark"]) .sb-card:hover {
    background: var(--surface-2); border-color: var(--teal-400); color: var(--text);
    box-shadow: var(--shadow-sm);
}

.sb-card.active {
    /* dark */
    background: linear-gradient(135deg, rgba(79,140,99,.25), rgba(79,140,99,.1));
    border-color: rgba(79,140,99,.55); color: #fff;
    box-shadow: 0 4px 18px rgba(79,140,99,.2), inset 0 0 0 1px rgba(124,184,138,.15);
}
:root[data-theme="light"] .sb-card.active,
:root:not([data-theme="dark"]) .sb-card.active {
    background: linear-gradient(135deg, rgba(58,107,74,.1), rgba(79,140,99,.05));
    border-color: var(--teal-400); color: var(--text);
    box-shadow: 0 4px 16px rgba(58,107,74,.15);
}

.sb-card.active::before {
    content: '';
    position: absolute; left: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(to bottom, #7cb88a, #4f8c63);
    box-shadow: 0 0 8px #4f8c63;
}
.sb-card.hidden { display: none; }

/* portrait */
.sb-portrait { position: relative; width: 50px; height: 50px; flex-shrink: 0; }
.sb-portrait img {
    width: 50px; height: 50px; border-radius: 13px; object-fit: cover;
    border: 2px solid rgba(124,184,138,.25);
    box-shadow: 0 3px 12px rgba(0,0,0,.35);
    transition: border-color .2s, box-shadow .2s;
}
:root[data-theme="light"] .sb-portrait img,
:root:not([data-theme="dark"]) .sb-portrait img {
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(14,20,6,.12);
}
.sb-card.active .sb-portrait img { border-color: #4f8c63; box-shadow: 0 0 0 3px rgba(79,140,99,.25), 0 3px 12px rgba(0,0,0,.35); }

.sb-initial {
    width: 50px; height: 50px; display: grid; place-items: center;
    border-radius: 13px;
    background: linear-gradient(135deg, #3a6b4a, #0e1406);
    font-family: var(--font-head); font-weight: 800; font-size: 19px; color: #fff;
    border: 2px solid rgba(124,184,138,.2);
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
}
.sb-card.active .sb-initial { border-color: #4f8c63; box-shadow: 0 0 0 3px rgba(79,140,99,.25), 0 3px 12px rgba(0,0,0,.3); }

.sb-num {
    position: absolute; bottom: -5px; left: -5px;
    width: 19px; height: 19px;
    background: linear-gradient(135deg, #f0b429, #f6c651);
    color: #0e1406; font-weight: 800; font-size: 9.5px;
    border-radius: 50%; display: grid; place-items: center;
    z-index: 1; box-shadow: 0 2px 6px rgba(240,180,41,.5);
    /* border colour adapts to sidebar bg */
    border: 2px solid var(--brand-900);
}
:root[data-theme="light"] .sb-num,
:root:not([data-theme="dark"]) .sb-num { border-color: #ffffff; }

/* info text */
.sb-info { flex: 1; min-width: 0; }
.sb-name {
    font-weight: 700; font-size: 13px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--font-head); color: inherit;
}
.sb-meta {
    font-size: 11px; margin-top: 1px;
    /* dark */
    color: rgba(255,255,255,.42);
}
:root[data-theme="light"] .sb-meta,
:root:not([data-theme="dark"]) .sb-meta { color: var(--text-soft); }

.sb-prog-wrap { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.sb-prog {
    flex: 1; height: 3px; border-radius: 999px; overflow: hidden;
    /* dark */
    background: rgba(255,255,255,.12);
}
:root[data-theme="light"] .sb-prog,
:root:not([data-theme="dark"]) .sb-prog { background: var(--border); }
.sb-prog span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #3a6b4a, #4f8c63);
    transition: width .4s var(--ease);
}
.sb-card.active .sb-prog span { background: linear-gradient(90deg, #4f8c63, #f6c651); }

.sb-pct {
    font-size: 10px; min-width: 26px; text-align: right;
    /* dark */
    color: rgba(255,255,255,.42);
}
:root[data-theme="light"] .sb-pct,
:root:not([data-theme="dark"]) .sb-pct { color: var(--text-soft); }
.sb-card.active .sb-pct { color: rgba(124,184,138,.8); }
:root[data-theme="light"] .sb-card.active .sb-pct,
:root:not([data-theme="dark"]) .sb-card.active .sb-pct { color: var(--teal-500); }

.sb-done {
    width: 21px; height: 21px; border-radius: 50%;
    background: rgba(15,200,120,.18); color: #0fc878; font-size: 12px;
    display: grid; place-items: center; flex-shrink: 0;
    box-shadow: 0 0 8px rgba(15,200,120,.25);
}
:root[data-theme="light"] .sb-done,
:root:not([data-theme="dark"]) .sb-done {
    background: #e2f7ef; color: #0f9d72; box-shadow: none;
    border: 1px solid #b6e8d4;
}

/* ═══════════════════════════════════════════════════
   MAIN SCORING AREA
═══════════════════════════════════════════════════ */
.score-main {
    padding: 20px 24px 40px;
    min-width: 0;
    animation: fadeUp .4s var(--ease) both;
    background: var(--bg);
}

/* auto-save indicator row */
.sm-topbar {
    display: flex; justify-content: flex-end;
    margin-bottom: 14px;
}

/* ── Contestant hero card ── */
.score-hero {
    display: flex; align-items: center; gap: 20px;
    border-radius: 18px; padding: 20px 22px; margin-bottom: 22px;
    position: relative; overflow: hidden;
    flex-wrap: wrap; color: #fff;
    /* dark */
    background: linear-gradient(135deg, var(--brand-800), var(--brand-900));
    border: 1px solid rgba(124,184,138,.18);
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
/* hero stays dark-green in light mode too — it's a branded banner */
.score-hero::before {
    content: ''; position: absolute; top: -60px; right: -40px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(79,140,99,.22), transparent 70%);
    pointer-events: none;
}
.score-hero::after {
    content: ''; position: absolute; bottom: -50px; left: 20%;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(240,180,41,.14), transparent 70%);
    pointer-events: none;
}

.sh-portrait { position: relative; flex-shrink: 0; width: 88px; height: 88px; z-index: 1; }
.sh-portrait img {
    width: 88px; height: 88px; border-radius: 20px; object-fit: cover;
    border: 3px solid rgba(124,184,138,.4);
    box-shadow: 0 0 0 4px rgba(79,140,99,.14), 0 8px 28px rgba(0,0,0,.45);
}
.sh-initial {
    width: 88px; height: 88px; display: grid; place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #3a6b4a, #0e1406);
    font-family: var(--font-head); font-weight: 800; font-size: 34px; color: #fff;
    border: 3px solid rgba(124,184,138,.35);
    box-shadow: 0 0 0 4px rgba(79,140,99,.14), 0 8px 28px rgba(0,0,0,.4);
}
.sh-badge {
    position: absolute; bottom: -7px; right: -7px;
    background: linear-gradient(135deg, #f0b429, #f6c651);
    color: #0e1406; font-weight: 800; font-size: 11px;
    padding: 2px 7px; border-radius: 999px;
    border: 2px solid #0e1406;
    box-shadow: 0 3px 10px rgba(240,180,41,.5); z-index: 1;
}

.sh-info { flex: 1; min-width: 0; z-index: 1; }
.sh-name {
    font-family: var(--font-head); font-weight: 800; font-size: 24px;
    color: #fff; margin: 0 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-event { color: rgba(124,184,138,.8); font-size: 13px; margin: 0 0 12px; }
.sh-prog-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(255,255,255,.55); }
.sh-prog { flex: 1; max-width: 200px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.sh-prog span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f8c63, #7cb88a, #f6c651); transition: width .5s var(--ease); }

.sh-nav { display: flex; gap: 8px; z-index: 1; flex-shrink: 0; }
.sh-nav-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px; border-radius: 10px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(124,184,138,.22);
    color: #7cb88a; font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .12s;
}
.sh-nav-btn:hover { background: rgba(79,140,99,.22); border-color: #4f8c63; transform: translateY(-1px); text-decoration: none; color: #fff; }
.sh-nav-btn.disabled { opacity: .3; pointer-events: none; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .score-layout { grid-template-columns: 1fr; }
    .score-sidebar { position: static; min-height: unset; border-right: none; border-bottom: 1px solid var(--border); }
    .score-main { padding: 16px; }
    .sh-nav { width: 100%; }
}

/* ── Judge index search bar ── */
.jidx-search-wrap {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.jidx-search-box {
    position: relative; flex: 1; min-width: 220px; max-width: 480px;
}
.jidx-search-box svg {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-faint); pointer-events: none;
}
.jidx-search-box input {
    width: 100%; padding: 10px 14px 10px 38px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text); font-size: 14px; font-family: var(--font);
    outline: none; box-shadow: var(--shadow-sm);
    transition: border-color .15s, box-shadow .15s;
}
.jidx-search-box input::placeholder { color: var(--text-faint); }
.jidx-search-box input:focus {
    border-color: var(--violet-400);
    box-shadow: 0 0 0 3px rgba(58,107,74,.15), var(--shadow-sm);
}
.jidx-count {
    font-size: 13px; color: var(--text-soft);
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 6px 14px; border-radius: 999px;
    white-space: nowrap;
}
.jidx-no-results { margin-top: 12px; }

.contestant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; }

/* ── Redesigned contestant image-card ── */
.contestant-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
    animation: fadeUp .5s var(--ease) both;
    will-change: transform;
}
.contestant-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(14,20,6,.16), 0 4px 12px rgba(14,20,6,.08);
    border-color: var(--violet-400);
    text-decoration: none;
}
:root[data-theme="dark"] .contestant-card:hover {
    box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(79,140,99,.2);
}

/* ── Photo area ── */
.contestant-card .photo {
    height: 220px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
    display: grid; place-items: center;
}
.contestant-card .photo img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s var(--ease), filter .3s;
    filter: saturate(1.05);
}
.contestant-card:hover .photo img {
    transform: scale(1.08);
    filter: saturate(1.12);
}
/* gradient overlay on photo */
.contestant-card .photo::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(14,20,6,.55) 100%);
    pointer-events: none;
    transition: opacity .3s;
}
.contestant-card:hover .photo::after { opacity: .85; }

/* number badge (top-left on photo) */
.contestant-card .photo-badge {
    position: absolute; top: 12px; left: 12px;
    z-index: 2;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(14,20,6,.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-family: var(--font-head);
    font-size: 12px; font-weight: 700;
    letter-spacing: .02em;
}
.contestant-card .photo-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 6px var(--gold-400);
}

/* completion badge (top-right on photo) */
.contestant-card .completion-badge {
    position: absolute; top: 12px; right: 12px;
    z-index: 2;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(14,20,6,.7);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.2);
    font-family: var(--font-head);
    font-size: 11px; font-weight: 800;
    color: #fff;
    transition: border-color .3s, transform .3s;
}
.contestant-card:hover .completion-badge { transform: scale(1.1); }
.contestant-card .completion-badge.complete {
    border-color: var(--gold-400);
    background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
    color: var(--brand-900);
    box-shadow: 0 0 12px rgba(240,180,41,.4);
}
.contestant-card .completion-badge.complete::after {
    content: '\2713';
    position: absolute;
    font-size: 16px;
}
.contestant-card .completion-badge.complete .pct-text { display: none; }

/* placeholder when no photo */
.contestant-card .photo .ph-num {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 56px;
    color: rgba(255,255,255,.25);
    z-index: 1;
    text-shadow: 0 4px 24px rgba(0,0,0,.3);
}

/* ── Info section ── */
.contestant-card .info {
    padding: 16px 18px 18px;
    display: flex; flex-direction: column;
    gap: 4px;
    flex: 1;
}
.contestant-card .info .cname {
    font-weight: 700;
    font-family: var(--font-head);
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .2s;
}
.contestant-card:hover .info .cname { color: var(--violet-500); }
.contestant-card .info .cnum {
    font-size: 12.5px;
    color: var(--text-soft);
}

/* progress bar — custom styled */
.contestant-card .c-progress {
    margin-top: 12px;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
    position: relative;
}
.contestant-card .c-progress span {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--violet-500), var(--violet-300));
    transition: width .8s var(--ease);
    position: relative;
}
.contestant-card .c-progress span::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s linear infinite;
}

/* meta row */
.contestant-card .pmeta {
    font-size: 12px;
    color: var(--text-soft);
    margin-top: 8px;
    display: flex; justify-content: space-between; align-items: center;
}
.contestant-card .pmeta .pmeta-pct {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--violet-500);
}
.contestant-card .pmeta .pmeta-count {
    font-size: 11px;
    color: var(--text-faint);
}

/* "Start scoring" CTA appears on hover */
.contestant-card .card-cta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 12.5px; font-weight: 600;
    color: var(--text-soft);
    transition: background .2s, color .2s, border-color .2s;
}
.contestant-card:hover .card-cta {
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    border-color: transparent;
    color: #fff;
}
.contestant-card .card-cta svg {
    width: 15px; height: 15px;
    transition: transform .25s var(--ease);
}
.contestant-card:hover .card-cta svg { transform: translateX(4px); }

/* staggered animation */
.contestant-card:nth-child(1)  { animation-delay: .02s; }
.contestant-card:nth-child(2)  { animation-delay: .06s; }
.contestant-card:nth-child(3)  { animation-delay: .10s; }
.contestant-card:nth-child(4)  { animation-delay: .14s; }
.contestant-card:nth-child(5)  { animation-delay: .18s; }
.contestant-card:nth-child(6)  { animation-delay: .22s; }
.contestant-card:nth-child(7)  { animation-delay: .26s; }
.contestant-card:nth-child(8)  { animation-delay: .30s; }
.contestant-card:nth-child(9)  { animation-delay: .34s; }
.contestant-card:nth-child(10) { animation-delay: .38s; }
.contestant-card:nth-child(11) { animation-delay: .42s; }
.contestant-card:nth-child(12) { animation-delay: .46s; }

/* responsive */
@media (max-width: 560px) {
    .contestant-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
    .contestant-card .photo { height: 170px; }
    .contestant-card .photo .ph-num { font-size: 42px; }
    .contestant-card .info { padding: 12px 14px 14px; }
    .contestant-card .info .cname { font-size: 14px; }
}

/* Results leaderboard */
.leader-list { display: flex; flex-direction: column; gap: 10px; }
.leader-row { display: grid; grid-template-columns: 44px 48px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); transition: background .3s, transform .2s, box-shadow .2s; animation: fadeUp .45s var(--ease) both; }
.leader-row:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.leader-row.top { border-color: var(--gold-400); background: linear-gradient(90deg, color-mix(in srgb, var(--gold-500) 12%, var(--surface)), var(--surface)); }
.leader-row .lname { font-weight: 600; }
.leader-row .lname small { display: block; color: var(--text-soft); font-weight: 400; font-size: 12px; }
.leader-row .lscore { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--violet-500); }
.flash-update { animation: flashUp 1s ease; }
@keyframes flashUp { 0% { background: var(--teal-glow); } 100% { background: transparent; } }

.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--success); font-weight: 600; }
.live-dot .d { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(15,157,114,.5); } 70% { box-shadow: 0 0 0 7px rgba(15,157,114,0); } }

/* =====================================================================
   Loading splash — cinematic (mirrors auth.css loader rules exactly)
   ===================================================================== */
@keyframes ldBlobDrift  { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-30px) scale(1.15);} 66%{transform:translate(-20px,20px) scale(.9);} 100%{transform:translate(0,0) scale(1);} }
@keyframes ldScan       { 0%{transform:translateY(-100%);opacity:0;} 10%{opacity:.6;} 90%{opacity:.6;} 100%{transform:translateY(100vh);opacity:0;} }
@keyframes ldParticle   { 0%{transform:translateY(0) scale(1);opacity:.9;} 100%{transform:translateY(-90px) scale(.3);opacity:0;} }
@keyframes ldHaloPulse  { 0%,100%{transform:scale(1);opacity:.5;} 50%{transform:scale(1.15);opacity:.08;} }
@keyframes ldLogoPop    { 0%{transform:scale(.5);opacity:0;} 65%{transform:scale(1.07);opacity:1;} 100%{transform:scale(1);} }
@keyframes ldFadeUp     { from{opacity:0;transform:translateY(22px);} to{opacity:1;transform:none;} }
@keyframes ldBarGlow    { 0%,100%{box-shadow:0 0 8px rgba(79,140,99,.6),0 0 18px rgba(79,140,99,.3);} 50%{box-shadow:0 0 18px rgba(79,140,99,1),0 0 40px rgba(79,140,99,.6);} }
@keyframes ldShine      { 0%{left:-60%;} 100%{left:120%;} }
@keyframes ldRegPop     { 0%{transform:scale(0) rotate(-30deg);opacity:0;} 70%{transform:scale(1.12) rotate(6deg);opacity:1;} 100%{transform:scale(1) rotate(0deg);} }
@keyframes ldRegWobble  { 0%,100%{transform:scale(1) rotate(-4deg);} 50%{transform:scale(1.06) rotate(3deg);} }
@keyframes ldTitlePulse { 0%,100%{letter-spacing:.06em;opacity:1;} 50%{letter-spacing:.15em;opacity:.88;} }
@keyframes ldStatusBlink{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
@keyframes ldGlowDisc   { 0%,100%{opacity:.55;transform:scale(1);} 50%{opacity:.9;transform:scale(1.08);} }
@keyframes ldTrackFade  { 0%,100%{opacity:.18;} 50%{opacity:.32;} }
@keyframes ldRingFlare  { 0%,100%{filter:drop-shadow(0 0 5px currentColor);} 50%{filter:drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px currentColor);} }
@keyframes ldCometTail  { 0%,100%{opacity:.7;} 50%{opacity:1;} }

.app-loader { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; overflow:hidden; background:radial-gradient(ellipse at 50% 40%, #1a3320 0%, #0e1406 55%, #050a02 100%); transition:opacity .8s ease, visibility .8s; }
.app-loader.hide { opacity:0; visibility:hidden; pointer-events:none; }
.ld-bg { position:absolute; inset:0; pointer-events:none; }
.ld-blob { position:absolute; border-radius:50%; filter:blur(60px); mix-blend-mode:screen; }
.ld-blob.lb1 { width:520px; height:520px; background:radial-gradient(circle,rgba(79,140,99,.35),transparent 70%); top:-160px; left:-120px; animation:ldBlobDrift 16s ease-in-out infinite; }
.ld-blob.lb2 { width:420px; height:420px; background:radial-gradient(circle,rgba(240,180,41,.28),transparent 70%); bottom:-120px; right:-100px; animation:ldBlobDrift 20s ease-in-out infinite reverse; }
.ld-blob.lb3 { width:300px; height:300px; background:radial-gradient(circle,rgba(124,184,138,.2),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); animation:ldBlobDrift 12s ease-in-out infinite 4s; }
.ld-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(124,184,138,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,184,138,.06) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse at 50% 50%,#000,transparent 68%); }
.ld-scan { position:absolute; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,rgba(124,184,138,.7),transparent); animation:ldScan 4s linear infinite; }
.ld-particles { position:absolute; inset:0; pointer-events:none; }
.ld-p { position:absolute; border-radius:50%; animation:ldParticle linear infinite; }
.ld-p.p1{width:6px;height:6px;background:#7cb88a;left:18%;bottom:22%;animation-duration:3.2s;animation-delay:0s;box-shadow:0 0 8px #4f8c63;}
.ld-p.p2{width:4px;height:4px;background:#f6c651;left:34%;bottom:18%;animation-duration:4.1s;animation-delay:.7s;box-shadow:0 0 6px #f0b429;}
.ld-p.p3{width:5px;height:5px;background:#fff;left:55%;bottom:28%;animation-duration:3.7s;animation-delay:1.2s;box-shadow:0 0 7px rgba(255,255,255,.8);}
.ld-p.p4{width:3px;height:3px;background:#7cb88a;left:72%;bottom:20%;animation-duration:2.9s;animation-delay:.3s;box-shadow:0 0 5px #4f8c63;}
.ld-p.p5{width:6px;height:6px;background:#f6c651;left:82%;bottom:35%;animation-duration:4.4s;animation-delay:1.8s;box-shadow:0 0 8px #f0b429;}
.ld-p.p6{width:4px;height:4px;background:#7cb88a;left:10%;bottom:40%;animation-duration:3.5s;animation-delay:.5s;box-shadow:0 0 6px #4f8c63;}
.ld-p.p7{width:5px;height:5px;background:#fff;left:45%;bottom:15%;animation-duration:5.0s;animation-delay:2.1s;box-shadow:0 0 7px rgba(255,255,255,.8);}
.ld-p.p8{width:3px;height:3px;background:#f6c651;left:62%;bottom:42%;animation-duration:3.0s;animation-delay:1.0s;box-shadow:0 0 5px #f0b429;}
.loader-stage { display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; animation:ldFadeUp .6s cubic-bezier(.16,1,.3,1) both; }
.loader-orbit { position:relative; width:260px; height:260px; display:flex; align-items:center; justify-content:center; }
.ld-track { position:absolute; border-radius:50%; border:1px solid rgba(124,184,138,.14); animation:ldTrackFade 3s ease-in-out infinite; }
.ld-track.tk1 { inset:0; }
.ld-track.tk2 { inset:22px; animation-delay:.8s; border-color:rgba(240,180,41,.12); }
.ld-track.tk3 { inset:-16px; border:1px dashed rgba(124,184,138,.1); animation-delay:1.6s; }
.ld-halo { position:absolute; border-radius:50%; border:1.5px solid rgba(79,140,99,.4); pointer-events:none; }
.ld-halo.h1 { inset:-28px; animation:ldHaloPulse 2.8s ease-in-out infinite; }
.ld-halo.h2 { inset:-48px; animation:ldHaloPulse 2.8s ease-in-out infinite .9s; border-color:rgba(124,184,138,.25); }
.ld-halo.h3 { inset:-70px; animation:ldHaloPulse 2.8s ease-in-out infinite 1.8s; border-color:rgba(124,184,138,.12); }
.orbit-ring { position:absolute; border-radius:50%; }
.orbit-ring.r1 { inset:0; background:conic-gradient(from 0deg, transparent 0%, rgba(79,140,99,.0) 60%, #4f8c63 80%, #7cb88a 90%, #ffffff 95%, transparent 100%); mask-image:radial-gradient(circle, transparent 44%, black 46%, black 49%, transparent 51%); -webkit-mask-image:radial-gradient(circle, transparent 44%, black 46%, black 49%, transparent 51%); filter:drop-shadow(0 0 7px #4f8c63) drop-shadow(0 0 14px rgba(79,140,99,.5)); animation:spin 1.4s linear infinite, ldRingFlare 2s ease-in-out infinite; }
.orbit-ring.r2 { inset:22px; background:conic-gradient(from 180deg, transparent 0%, rgba(240,180,41,.0) 55%, #f0b429 78%, #f6c651 88%, #ffffff 93%, transparent 100%); mask-image:radial-gradient(circle, transparent 42%, black 44%, black 48%, transparent 50%); -webkit-mask-image:radial-gradient(circle, transparent 42%, black 44%, black 48%, transparent 50%); filter:drop-shadow(0 0 6px #f0b429) drop-shadow(0 0 12px rgba(240,180,41,.45)); animation:spinRev 2s linear infinite, ldRingFlare 2.4s ease-in-out infinite .6s; }
.orbit-ring.r3 { inset:-16px; background:none; border:1.5px dashed rgba(124,184,138,.22); animation:spin 9s linear infinite; }
.ld-glow-disc { position:absolute; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, rgba(79,140,99,.28) 0%, rgba(79,140,99,.1) 45%, transparent 72%); animation:ldGlowDisc 2.2s ease-in-out infinite; pointer-events:none; z-index:1; }
.orbit-arm { position:absolute; inset:0; border-radius:50%; }
.orbit-arm.a1{animation:spin    2.2s linear infinite;}
.orbit-arm.a2{animation:spinRev 3.1s linear infinite;}
.orbit-arm.a3{animation:spin    4.8s linear infinite;}
.orbit-arm.a4{animation:spinRev 2.7s linear infinite .5s;}
.orbit-arm.a5{animation:spin    3.6s linear infinite 1.1s;}
.orbit-comet { position:absolute; top:4px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; animation:ldCometTail 1.6s ease-in-out infinite; }
.orbit-comet::after { content:''; display:block; width:2px; height:18px; margin-top:1px; border-radius:0 0 999px 999px; }
.orbit-comet.teal::after  { background:linear-gradient(to bottom, rgba(124,184,138,.8), transparent); }
.orbit-comet.gold::after  { background:linear-gradient(to bottom, rgba(246,198,81,.8),  transparent); }
.orbit-comet.white::after { background:linear-gradient(to bottom, rgba(255,255,255,.8), transparent); }
.orbit-comet.sm::after    { width:1.5px; height:12px; }
.orbit-dot { width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.orbit-dot.sm { width:7px; height:7px; }
.orbit-dot.teal  { background:#7cb88a; box-shadow:0 0 8px #4f8c63,0 0 20px rgba(79,140,99,.8),0 0 36px rgba(79,140,99,.4); }
.orbit-dot.gold  { background:#f6c651; box-shadow:0 0 8px #f0b429,0 0 20px rgba(240,180,41,.8),0 0 36px rgba(240,180,41,.4); }
.orbit-dot.white { background:#ffffff; box-shadow:0 0 8px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.7),0 0 36px rgba(255,255,255,.4); }
.loader-logo-wrap { position:relative; display:flex; align-items:center; justify-content:center; z-index:3; }
.logo-pulse-ring { position:absolute; border-radius:50%; pointer-events:none; }
.logo-pulse-ring.lp1 { width:136px; height:136px; border:2px solid rgba(79,140,99,.55); animation:ldHaloPulse 2.2s ease-in-out infinite; }
.logo-pulse-ring.lp2 { width:150px; height:150px; border:1.5px solid rgba(79,140,99,.3); animation:ldHaloPulse 2.2s ease-in-out infinite .7s; }
.logo-pulse-ring.lp3 { width:166px; height:166px; border:1px solid rgba(79,140,99,.15); animation:ldHaloPulse 2.2s ease-in-out infinite 1.4s; }
.loader-logo { width:118px; height:118px; border-radius:50%; object-fit:contain; background:#fff; padding:10px; box-shadow:0 0 0 3px rgba(255,255,255,.9),0 0 0 6px rgba(79,140,99,.35),0 0 24px rgba(79,140,99,.75),0 0 50px rgba(79,140,99,.4),0 0 80px rgba(79,140,99,.18); animation:ldLogoPop .8s cubic-bezier(.34,1.56,.64,1) .15s both, floatY 3.8s ease-in-out 1.2s infinite, ldBarGlow 2.4s ease-in-out infinite; position:relative; z-index:3; }
.loader-reg-wrap { position:absolute; bottom:-6px; right:-6px; z-index:4; animation:ldRegPop .6s cubic-bezier(.34,1.56,.64,1) .6s both; }
.loader-reg { display:block; width:56px; height:56px; border-radius:50%; object-fit:cover; border:3px solid #4f8c63; outline:2px solid rgba(255,255,255,.25); box-shadow:0 0 0 4px rgba(79,140,99,.3),0 0 18px rgba(79,140,99,1),0 0 36px rgba(79,140,99,.5); animation:ldRegWobble 3.4s ease-in-out 1.2s infinite, glowPulse 2s ease-in-out infinite; }
.loader-title { margin-top:28px; font-family:var(--font-head); font-weight:800; font-size:36px; background:linear-gradient(90deg,#ffffff 0%,#7cb88a 35%,#f6c651 65%,#ffffff 100%); background-size:300% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:shimmer 2s linear infinite, ldTitlePulse 4s ease-in-out infinite, ldFadeUp .65s cubic-bezier(.16,1,.3,1) .3s both; filter:drop-shadow(0 0 12px rgba(124,184,138,.5)); }
.loader-sub { margin-top:6px; color:#7cb88a; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; text-shadow:0 0 18px rgba(124,184,138,.9),0 0 36px rgba(124,184,138,.4); animation:glowPulse 2.6s ease-in-out infinite, ldFadeUp .65s cubic-bezier(.16,1,.3,1) .42s both; }
.loader-bar-wrap { margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:8px; animation:ldFadeUp .6s cubic-bezier(.16,1,.3,1) .45s both; }
.loader-bar-track { width:260px; height:7px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(124,184,138,.2); overflow:hidden; box-shadow:inset 0 0 8px rgba(0,0,0,.4); }
.loader-bar-fill { position:relative; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#4f8c63 0%,#7cb88a 50%,#f0b429 100%); background-size:200% 100%; animation:shimmer 1.2s linear infinite, ldBarGlow 1.8s ease-in-out infinite; transition:width .06s linear; }
.bar-shine { position:absolute; top:0; bottom:0; width:50px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); border-radius:999px; animation:ldShine 1.6s linear infinite; }
.loader-bar-meta { width:260px; display:flex; justify-content:space-between; align-items:center; }
.loader-status { color:rgba(124,184,138,.7); font-size:11px; letter-spacing:.08em; animation:ldStatusBlink 1.4s ease-in-out infinite; }
.loader-pct { color:rgba(255,255,255,.75); font-size:12px; font-weight:600; letter-spacing:.06em; font-family:var(--font-head); text-shadow:0 0 10px rgba(124,184,138,.6); }

/* Page transition wrapper */
.pt-enter { animation: fadeUp .5s var(--ease) both; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 980px) {
    .sidebar { transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); width: var(--sidebar-w) !important; }
    .sidebar.open { transform: none; }
    /* On mobile, collapsed state is fully overridden — show everything normally */
    .sidebar.collapsed { width: var(--sidebar-w) !important; }
    .sidebar.collapsed .brand { justify-content: flex-start; padding: 22px 20px 18px; }
    .sidebar.collapsed .brand .brand-text { opacity: 1; width: auto; pointer-events: auto; }
    .sidebar.collapsed .brand .brand-logo-group { margin: 0; }
    .sidebar.collapsed .sidebar-collapse-btn { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
    .sidebar.collapsed .nav-label { opacity: 1; height: auto; padding: 18px 14px 8px; pointer-events: auto; }
    .sidebar.collapsed nav a { justify-content: flex-start; padding: 11px 14px; }
    .sidebar.collapsed nav a span { opacity: 1; width: auto; pointer-events: auto; }
    .sidebar.collapsed nav a:hover { padding-left: 18px; }
    .sidebar.collapsed .side-foot { padding: 16px 18px; }
    .sidebar.collapsed .side-foot .who { opacity: 1; height: auto; overflow: visible; pointer-events: auto; }
    .sidebar.collapsed .side-foot-btn { display: flex !important; padding: 10px 13px; }
    .sidebar.collapsed .side-foot-btn span { opacity: 1; width: auto; pointer-events: auto; }
    .sidebar.collapsed .notif-badge { position: static; font-size: 11px; min-width: 20px; height: 20px; }
    .sidebar.collapsed nav a::after, .sidebar.collapsed .side-foot-btn::after { display: none; }
    .main { margin-left: 0 !important; }
    .main.sidebar-collapsed { margin-left: 0 !important; }
    .main.sidebar-collapsed .sidebar-expand-btn { display: none !important; }
    .menu-btn { display: inline-flex !important; }
    .sidebar-expand-btn { display: none !important; }
    .form-grid.cols-2 { grid-template-columns: 1fr; }
    .backdrop { position: fixed; inset: 0; background: rgba(10,15,4,.55); z-index: 35; display: none; }
    .backdrop.open { display: block; animation: fadeIn .2s ease; }
    .grid[style*="1.4fr"], .grid[style*="1.3fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
    .content { padding: 18px; }
    .topbar { padding: 0 16px; }
    .leader-row { grid-template-columns: 38px 1fr auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .app-loader { transition: opacity .2s; }
}

/* =====================================================================
   FullCalendar — Premium ICTMO Design System
   Glassmorphism · Gradient Events · Smooth Animations · Glow Effects
   ===================================================================== */
.fc {
    --fc-border-color: var(--border);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--surface-2);
    --fc-today-bg-color: color-mix(in srgb, var(--violet-500) 6%, transparent);
    --fc-now-indicator-color: var(--violet-500);
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-event-text-color: #fff;
    --fc-non-business-color: var(--surface-2);
    font-family: var(--font);
    border-radius: 16px;
    overflow: hidden;
}

/* Calendar container glassmorphism */
.fc-view-harness { background: transparent; }

/* Calendar wrapper card enhancement */
.cal-wrapper { position: relative; }
.cal-wrapper .fc { border-radius: 16px; overflow: hidden; }

/* Calendar loading skeleton */
.cal-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: var(--surface); border-radius: 16px; z-index: 10;
    transition: opacity .4s ease, visibility .4s;
}
.cal-loading.hide { opacity: 0; visibility: hidden; }
.cal-loading-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
    width: 90%; max-width: 700px; padding: 20px;
}
.cal-loading-cell {
    height: 80px; border-radius: 10px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: calShimmer 1.5s infinite;
}
@keyframes calShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- Toolbar ---- */
.fc .fc-toolbar.fc-header-toolbar {
    flex-wrap: wrap; gap: 12px; padding: 4px 0 20px;
}
.fc .fc-toolbar-title {
    font-family: var(--font-head); font-size: 22px; font-weight: 800;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-300));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; letter-spacing: -.02em;
}
.fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; }

/* Nav buttons (prev/next/today) */
.fc .fc-button {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; font-weight: 600; font-size: 13px; padding: 8px 14px;
    transition: all .25s cubic-bezier(.4,0,.2,1); text-transform: capitalize;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.fc .fc-button:hover {
    background: var(--surface-2); border-color: var(--violet-300); color: var(--violet-500);
    transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.fc .fc-button:active { transform: translateY(0); }
.fc .fc-button-primary:not(:disabled).fc-button-active {
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 14px var(--teal-glow);
}
.fc .fc-button-primary:not(:disabled).fc-button-active:hover {
    box-shadow: 0 8px 22px var(--teal-glow); transform: translateY(-2px);
}
.fc .fc-button:disabled { opacity: .4; cursor: not-allowed; }

/* Prev/Next icon arrows */
.fc .fc-button .fc-icon { font-size: 16px; vertical-align: middle; }

/* ---- Header cells (day names) ---- */
.fc .fc-col-header-cell {
    background: var(--surface-2); border-bottom: 2px solid var(--border);
}
.fc .fc-col-header-cell-cushion {
    color: var(--text-soft); font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em; padding: 12px 8px;
    transition: color .2s;
}
.fc .fc-col-header-cell:hover .fc-col-header-cell-cushion { color: var(--violet-500); }

/* ---- Day cells ---- */
.fc .fc-daygrid-day {
    transition: background .2s var(--ease);
}
.fc .fc-daygrid-day:hover {
    background: color-mix(in srgb, var(--violet-500) 3%, transparent);
}
.fc .fc-daygrid-day.fc-day-today {
    background: color-mix(in srgb, var(--violet-500) 7%, transparent);
}
.fc .fc-daygrid-day-number {
    color: var(--text); font-weight: 600; font-size: 14px; padding: 6px 10px;
    transition: all .2s;
}
.fc .fc-day-today .fc-daygrid-day-number {
    color: #fff; font-weight: 800;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    border-radius: 8px; padding: 4px 10px; display: inline-block;
    box-shadow: 0 4px 12px var(--teal-glow);
    animation: todayPulse 2.5s ease-in-out infinite;
}
@keyframes todayPulse {
    0%, 100% { box-shadow: 0 4px 12px var(--teal-glow); }
    50% { box-shadow: 0 4px 20px var(--teal-glow), 0 0 0 4px color-mix(in srgb, var(--violet-500) 15%, transparent); }
}

/* Weekend dimming */
.fc .fc-day-non { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
.fc .fc-day-other { background: color-mix(in srgb, var(--surface-2) 30%, transparent); }
.fc .fc-day-other .fc-daygrid-day-number { color: var(--text-faint); font-weight: 400; }

/* ---- Events — Gradient cards with glow ---- */
.fc .fc-event {
    border: none; border-radius: 8px; padding: 3px 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
    position: relative; overflow: hidden; line-height: 1.4;
    animation: eventSlideIn .4s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes eventSlideIn {
    from { opacity: 0; transform: translateX(-8px) scale(.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
.fc .fc-event::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%); transition: transform .6s;
}
.fc .fc-event:hover::before { transform: translateX(100%); }
.fc .fc-event:hover {
    transform: translateY(-3px) scale(1.02); z-index: 5;
}
.fc .fc-event .fc-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status gradients with glow */
.fc-event-approved {
    background: linear-gradient(135deg, #0f9d72, #22c58f) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(15,157,114,.25);
}
.fc-event-approved:hover { box-shadow: 0 8px 24px rgba(15,157,114,.4); }

.fc-event-pending {
    background: linear-gradient(135deg, #d98a00, #f5b53a) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(217,138,0,.25);
}
.fc-event-pending:hover { box-shadow: 0 8px 24px rgba(217,138,0,.4); }

.fc-event-rejected {
    background: linear-gradient(135deg, #e0435a, #ff6b81) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(224,67,90,.25);
}
.fc-event-rejected:hover { box-shadow: 0 8px 24px rgba(224,67,90,.4); }

.fc-event-cancelled {
    background: linear-gradient(135deg, #8898aa, #b0bec5) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(136,152,170,.2);
}
.fc-event-cancelled:hover { box-shadow: 0 8px 24px rgba(136,152,170,.35); }

.fc-event-completed {
    background: linear-gradient(135deg, #2563eb, #3b82f6) !important; color: #fff !important;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
.fc-event-completed:hover { box-shadow: 0 8px 24px rgba(37,99,235,.4); }

/* ---- Status badge pill on events ---- */
.fc-event-status-badge {
    display: inline-flex; align-items: center; gap: 3px;
    flex-shrink: 0; padding: 1px 6px; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; line-height: 1.5;
    background: rgba(255,255,255,.22); color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    transition: all .2s var(--ease);
}
.fc-event-status-badge i { font-size: 8px; }
.fc-event-approved .fc-event-status-badge { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.fc-event-pending .fc-event-status-badge { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); color: #fff; }
.fc-event-completed .fc-event-status-badge { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); color: #fff; }
.fc-event-rejected .fc-event-status-badge { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.fc-event-cancelled .fc-event-status-badge { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); }
.fc-event:hover .fc-event-status-badge { background: rgba(255,255,255,.35); transform: scale(1.04); }

/* Keep badge readable in compact month-view dot events */
.fc .fc-daygrid-dot-event .fc-event-status-badge { padding: 0 4px; font-size: 8px; }
/* In timeGrid views give the badge a touch more presence */
.fc .fc-timegrid-event .fc-event-status-badge { padding: 1px 7px; font-size: 9px; }

/* Star rating for feedback */
.star { user-select: none; transition: color .15s, transform .1s; }
.star:hover { transform: scale(1.15); }

/* Event dot in month view */
.fc .fc-daygrid-event-dot {
    border-color: currentColor; width: 7px; height: 7px; border-radius: 50%;
}

/* Multi-day events */
.fc .fc-h-event .fc-event-main { padding: 2px 6px; }
.fc .fc-h-event .fc-event-title { overflow: hidden; text-overflow: ellipsis; }

/* TimeGrid week/day view */
.fc .fc-timegrid-slot { height: 2.5em; }
.fc .fc-timegrid-col.fc-day-today { background: color-mix(in srgb, var(--violet-500) 5%, transparent); }
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--violet-500); border-width: 2px;
}
.fc .fc-timegrid-now-indicator-arrow {
    color: var(--violet-500); font-size: 14px;
    animation: nowBlink 2s ease-in-out infinite;
}
@keyframes nowBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

/* Time labels */
.fc .fc-timegrid-axis-label { font-size: 11px; color: var(--text-soft); font-weight: 600; }

/* ---- DayGrid events ---- */
.fc .fc-daygrid-event { border-radius: 6px; margin: 1px 4px; }
.fc .fc-daygrid-day-frame { min-height: auto; }
.fc .fc-daygrid-day-events { margin-top: 2px; margin-bottom: 2px; }

/* Custom event content (status icons + time + title) */
.fc-event-main-inner { display: flex; align-items: center; gap: 4px; overflow: hidden; }
.fc-event-status-icon { font-size: 10px; flex-shrink: 0; opacity: .85; }
.fc-event-time-text { font-size: 10px; opacity: .8; flex-shrink: 0; font-weight: 600; }
.fc-event-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fc-event-user { font-size: 10px; opacity: .7; flex-shrink: 0; font-style: italic; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-event-user-avatar {
    flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
    background: rgba(255,255,255,.25); color: #fff;
    font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    line-height: 1; font-style: normal;
    border: 1px solid rgba(255,255,255,.3);
}

/* Dot events in month view */
.fc .fc-daygrid-dot-event { padding: 2px 6px; border-radius: 5px; }
.fc .fc-daygrid-dot-event .fc-event-time-text { font-size: 10px; }

/* More events link */
.fc .fc-daygrid-more-link {
    color: var(--violet-500); font-weight: 700; font-size: 11px;
    transition: all .2s;
}
.fc .fc-daygrid-more-link:hover { color: var(--violet-400); text-decoration: underline; }

/* ---- Scrollbar styling ---- */
.fc-scrollgrid-section > td { padding: 0; }
.fc .fc-scrollgrid-section, .fc .fc-scrollgrid-section table, .fc .fc-scrollgrid-section > td {
    border-color: var(--border);
}
.fc-scroller::-webkit-scrollbar { width: 6px; height: 6px; }
.fc-scroller::-webkit-scrollbar-track { background: transparent; }
.fc-scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.fc-scroller::-webkit-scrollbar-thumb:hover { background: var(--violet-300); }

/* ---- View transition animations ---- */
.fc-view {
    animation: calendarViewFade .35s cubic-bezier(.4,0,.2,1) both;
}
@keyframes calendarViewFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Popover (more events) ---- */
.fc .fc-popover {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-lg);
    animation: pop .28s var(--ease); overflow: hidden;
}
.fc .fc-popover-header {
    background: var(--surface-2); padding: 10px 16px; font-weight: 700;
    font-size: 13px; color: var(--text); border-bottom: 1px solid var(--border);
}
.fc .fc-popover-body { padding: 10px 14px; }
.fc .fc-popover-close { opacity: .5; transition: opacity .2s; }
.fc .fc-popover-close:hover { opacity: 1; }

/* ---- Selection highlight ---- */
.fc .fc-highlight {
    background: color-mix(in srgb, var(--violet-500) 12%, transparent);
    border-radius: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .fc .fc-toolbar-title { font-size: 17px; }
    .fc .fc-button { padding: 6px 10px; font-size: 12px; }
    .fc .fc-toolbar-chunk { gap: 4px; }
    .fc .fc-daygrid-day-number { font-size: 12px; }
    .fc .fc-event { font-size: 11px; padding: 2px 5px; }
}

/* =====================================================================
   Toast notifications
   ===================================================================== */
.ds-toast-container {
    position: fixed; top: 20px; right: 20px; z-index: 10000;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.ds-toast {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px; border-radius: 13px; font-size: 14px; font-weight: 600;
    color: #fff; box-shadow: var(--shadow-md); pointer-events: auto;
    transform: translateX(120%); opacity: 0;
    transition: transform .4s var(--ease), opacity .3s; min-width: 280px; max-width: 420px;
}
.ds-toast.show { transform: translateX(0); opacity: 1; }
.ds-toast.hide { transform: translateX(120%); opacity: 0; }
.ds-toast i { font-size: 18px; flex-shrink: 0; }
.ds-toast-success { background: linear-gradient(135deg, #0f9d72, #22c58f); }
.ds-toast-error { background: linear-gradient(135deg, #e0435a, #ff6b81); }
.ds-toast-warning { background: linear-gradient(135deg, #d98a00, #f5b53a); }
.ds-toast-info { background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); }
@media (max-width: 560px) {
    .ds-toast-container { left: 16px; right: 16px; top: 16px; }
    .ds-toast { min-width: 0; max-width: none; width: 100%; }
}

/* =====================================================================
   Modal helpers (compatible with nani system)
   ===================================================================== */
.modal-overlay { position: fixed; inset: 0; background: rgba(4,20,26,.6); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 100; animation: fadeIn .2s ease; overflow-y: auto; }
.modal-overlay.open { display: flex; }
.modal-overlay.show { display: flex; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column; animation: pop .28s var(--ease); margin: auto; }
.modal-lg { max-width: 680px; }
.modal .modal-head { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.modal .modal-head h3 { margin: 0; font-size: 17px; }
.modal .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.modal .modal-foot { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface-2); flex-shrink: 0; }
.modal-close { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--text-faint); line-height: 1; transition: color .15s, transform .15s; }
.modal-close:hover { color: var(--danger); transform: rotate(90deg); }

/* Hidden utility */
.hidden { display: none !important; }

/* Notification badge */
.notif-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; border-radius: 999px;
    background: var(--danger); color: #fff; font-size: 11px; font-weight: 700;
    padding: 0 5px; animation: pulseRing 2s infinite;
}

/* Facility filter sidebar */
.fac-filter-btn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: 11px;
    background: var(--surface); color: var(--text); font-weight: 500; font-size: 14px;
    cursor: pointer; transition: all .18s var(--ease); text-align: left;
}
.fac-filter-btn:hover { border-color: var(--violet-300); background: var(--surface-2); }
.fac-filter-btn.active { background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--teal-glow); }
.fac-filter-btn .fac-cap { font-size: 12px; opacity: .7; margin-left: auto; }

/* Facility card */
.fac-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease), box-shadow .25s;
    animation: fadeUp .5s var(--ease) both; position: relative; overflow: hidden;
}
.fac-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.fac-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); opacity: .9; }
.fac-card .fac-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; background: color-mix(in srgb, var(--violet-500) 14%, transparent); color: var(--violet-500); }
.fac-card .fac-icon svg { width: 24px; height: 24px; }
.fac-card .fac-name { font-family: var(--font-head); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.fac-card .fac-loc { font-size: 13px; color: var(--text-soft); margin: 0 0 12px; }
.fac-card .fac-meta { display: flex; gap: 14px; font-size: 13px; color: var(--text-soft); }
.fac-card .fac-meta span { display: flex; align-items: center; gap: 5px; }

/* Filter tabs */
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-soft); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all .18s var(--ease); text-decoration: none;
}
.filter-tab:hover { border-color: var(--violet-300); color: var(--violet-500); text-decoration: none; }
.filter-tab.active { background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); color: #fff; border-color: transparent; box-shadow: 0 6px 16px var(--teal-glow); }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-soft); animation: fadeUp .4s var(--ease) both; }
.empty-state svg, .empty-state i { width: 48px; height: 48px; font-size: 48px; color: var(--text-faint); margin-bottom: 16px; }
.empty-state h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.empty-state p { font-size: 14px; color: var(--text-soft); margin: 0 0 16px; }

/* Page header helper */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; animation: fadeUp .45s var(--ease) both; }
.page-header h2 { font-size: 22px; margin: 0 0 4px; }
.page-header p { margin: 0; color: var(--text-soft); font-size: 14px; max-width: 640px; }

/* Avatar text variant */
.avatar { display: inline-grid; place-items: center; font-family: var(--font-head); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--violet-500), var(--violet-400)); font-size: 14px; }

/* Stat card (dashboard) */
.stat-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    animation: fadeUp .5s var(--ease) both; display: flex; align-items: center; gap: 16px;
}
.stat-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--violet-500), var(--violet-300)); opacity: .9; }
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stat-card .stat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; transition: transform .25s var(--ease); }
.stat-card .stat-icon svg, .stat-card .stat-icon i { width: 24px; height: 24px; font-size: 20px; }
.stat-card:hover .stat-icon { transform: scale(1.1) rotate(-6deg); }
.stat-card .stat-info { flex: 1; }
.stat-card .stat-info .stat-label { color: var(--text-soft); font-size: 13px; display: block; }
.stat-card .stat-info .stat-value { font-family: var(--font-head); font-size: 30px; font-weight: 800; line-height: 1; display: block; margin-top: 4px; }

/* Quick action card (dashboard) */
.quick-action { display: flex; align-items: center; gap: 16px; padding: 20px; text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s; }
.quick-action:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.quick-action .stat-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.quick-action .stat-icon svg, .quick-action .stat-icon i { width: 24px; height: 24px; font-size: 20px; }
.quick-action h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.quick-action p { font-size: 13px; color: var(--text-soft); margin: 0; }

/* Form grid 3 columns */
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Label helper for modal details */
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }

/* Table helper (alias for table.data styling) */
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }

/* =====================================================================
   My Reservations — Premium UI Redesign
   ===================================================================== */

/* Summary pills in page header */
.res-summary-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.res-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 12px; font-size: 13px;
    border: 1px solid var(--border); background: var(--surface);
    transition: all .25s var(--ease);
    animation: fadeUp .4s var(--ease) both;
}
.res-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.res-pill i { font-size: 16px; }
.res-pill-num { font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.res-pill-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 600; }
.res-pill-pending { border-color: color-mix(in srgb, #d98a00 30%, transparent); }
.res-pill-pending i { color: #d98a00; }
.res-pill-pending .res-pill-num { color: #d98a00; }
.res-pill-approved { border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.res-pill-approved i { color: var(--success); }
.res-pill-approved .res-pill-num { color: var(--success); }
.res-pill-completed { border-color: color-mix(in srgb, #2563eb 30%, transparent); }
.res-pill-completed i { color: #2563eb; }
.res-pill-completed .res-pill-num { color: #2563eb; }

/* Alert with icon circle */
.res-alert { border-radius: 14px; padding: 14px 18px; }
.res-alert-icon {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.res-alert-icon-success { background: var(--success-bg); color: var(--success); }
.res-alert-icon-gold { background: color-mix(in srgb, var(--gold-500) 15%, transparent); color: var(--gold-500); }

/* Filter card */
.res-filter-card { border-radius: 16px; }
.res-filter-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.res-filter-field { flex: 1; min-width: 160px; }
.res-filter-field .lbl { display: flex; align-items: center; gap: 5px; font-size: 12px; margin-bottom: 5px; }
.res-filter-field .lbl i { font-size: 11px; color: var(--violet-500); }
.res-filter-actions { display: flex; gap: 8px; }

/* Reservation list card */
.res-list-card { border-radius: 16px; overflow: hidden; }

/* Table enhancements */
.res-tbl th { font-size: 11px; padding: 14px 16px; }
.res-tbl td { padding: 14px 16px; }
.res-tbl tbody tr { transition: background .2s var(--ease); }
.res-tbl tbody tr:hover { background: var(--surface-2); }

/* Row left-border accent by status */
.res-row { position: relative; }
.res-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    opacity: 0; transition: opacity .2s;
}
.res-row:hover::before { opacity: 1; }
.res-status-pending::before { background: #d98a00; }
.res-status-approved::before { background: var(--success); }
.res-status-completed::before { background: #2563eb; }
.res-status-rejected::before { background: var(--danger); }
.res-status-cancelled::before { background: var(--text-faint); }

/* Cell content */
.res-cell-icon { color: var(--text-faint); margin-right: 6px; font-size: 12px; }
.res-fac-name { font-weight: 600; color: var(--text); display: flex; align-items: center; }
.res-fac-loc { font-size: 12px; color: var(--text-soft); margin-top: 2px; padding-left: 18px; }
.res-title { font-weight: 600; color: var(--text); }
.res-desc { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.res-dept-name { font-weight: 600; color: var(--text); }
.res-user-sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
.res-datetime { font-size: 13px; }
.res-date { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 500; }
.res-date i { color: var(--violet-500); font-size: 11px; }
.res-time { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12px; margin-top: 3px; }
.res-time i { color: var(--text-faint); font-size: 10px; }

/* Status badge — premium pill */
.res-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; transition: all .2s var(--ease);
}
.res-status-badge i { font-size: 10px; }
.res-status-pending { background: color-mix(in srgb, #d98a00 12%, transparent); color: #b87400; border: 1px solid color-mix(in srgb, #d98a00 25%, transparent); }
.res-status-approved { background: var(--success-bg); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); }
.res-status-completed { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; border: 1px solid color-mix(in srgb, #2563eb 25%, transparent); }
.res-status-rejected { background: var(--danger-bg); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); }
.res-status-cancelled { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border); }

/* Small tag badges */
.res-tag {
    display: inline-flex; align-items: center; gap: 3px;
    margin-left: 4px; padding: 2px 7px; border-radius: 999px;
    font-size: 9px; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; animation: glowPulse 2s infinite;
}
.res-tag i { font-size: 8px; }
.res-tag-new { background: var(--success); color: #fff; }
.res-tag-updated { background: #d98a00; color: #fff; }
.res-tag-feedback { background: color-mix(in srgb, var(--gold-500) 15%, transparent); color: var(--gold-500); animation: none; font-size: 10px; padding: 3px 9px; }
.res-feedback-score { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-500); font-size: 12px; font-weight: 700; margin-top: 4px; }

/* Action buttons — icon-only with colored hover */
.res-actions { text-align: right; }
.res-btn-group { display: flex; gap: 6px; justify-content: flex-end; }
.res-btn {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-soft); cursor: pointer; font-size: 13px;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.res-btn::before {
    content: ''; position: absolute; inset: 0;
    background: currentColor; opacity: 0; transition: opacity .2s;
}
.res-btn:hover::before { opacity: .08; }
.res-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.res-btn:active { transform: translateY(0); }
.res-btn i { position: relative; z-index: 1; }

.res-btn-view:hover { color: var(--violet-500); border-color: var(--violet-300); }
.res-btn-print:hover { color: var(--text); border-color: var(--text-soft); background: var(--surface-2); }
.res-btn-edit:hover { color: var(--violet-500); border-color: var(--violet-300); background: color-mix(in srgb, var(--violet-500) 8%, var(--surface)); }
.res-btn-cancel:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-bg); }
.res-btn-complete:hover { color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-bg); }

/* Empty state */
.res-empty { padding: 50px 20px; }
.res-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--surface-2); display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px; font-size: 30px; color: var(--text-faint);
}

/* ---- Edit Reservation Modal — Premium Redesign ---- */
.res-modal-head { gap: 12px; }
.res-modal-head-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    box-shadow: 0 4px 12px var(--teal-glow);
}
.res-modal-head h3 { flex: 1; }

.res-form-section {
    padding: 16px 0; border-bottom: 1px solid var(--border);
}
.res-form-section:first-child { padding-top: 0; }
.res-form-section:last-child { border-bottom: none; padding-bottom: 0; }
.res-form-section-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--violet-500);
    margin-bottom: 14px;
}
.res-form-section-title i { font-size: 13px; }
.res-form-section .form-grid { gap: 14px; }
.res-field-icon { color: var(--text-faint); font-size: 12px; margin-right: 4px; }

.res-modal-foot .btn { min-width: 120px; justify-content: center; }

/* Responsive */
@media (max-width: 768px) {
    .res-summary-pills { width: 100%; }
    .res-pill { flex: 1; min-width: 0; padding: 6px 10px; }
    .res-pill-num { font-size: 16px; }
    .res-filter-form { flex-direction: column; }
    .res-filter-field { min-width: 0; }
    .res-btn-group { flex-wrap: wrap; }
}
@media (max-width: 640px) {
    .res-btn { width: 30px; height: 30px; font-size: 12px; }
}

/* Stagger animation helper */
.stagger > *:nth-child(1) { animation-delay: .02s; }
.stagger > *:nth-child(2) { animation-delay: .06s; }
.stagger > *:nth-child(3) { animation-delay: .10s; }
.stagger > *:nth-child(4) { animation-delay: .14s; }
.stagger > *:nth-child(5) { animation-delay: .18s; }
.stagger > *:nth-child(6) { animation-delay: .22s; }
.stagger > *:nth-child(7) { animation-delay: .26s; }
.stagger > *:nth-child(8) { animation-delay: .30s; }
.stagger > *:nth-child(9) { animation-delay: .34s; }
.stagger > *:nth-child(10) { animation-delay: .38s; }

/* Password visibility toggle (profile & app forms) */
.pw-input-wrap { position: relative; width: 100%; }
.pw-input-wrap input { width: 100%; padding-right: 44px; }
.pw-toggle-btn {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer;
    color: var(--text-faint); font-size: 15px; padding: 4px;
    transition: color .18s; display: flex; align-items: center; justify-content: center;
}
.pw-toggle-btn:hover { color: var(--violet-500); }

/* =====================================================================
   APPROVALS — Premium UI Redesign
   ===================================================================== */

/* ---- Page Header ---- */
.appr-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 24px; flex-wrap: wrap;
    animation: fadeUp .45s var(--ease) both;
}
.appr-header-content { display: flex; align-items: center; gap: 16px; }
.appr-header-icon {
    width: 54px; height: 54px; border-radius: 15px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px var(--teal-glow);
    animation: floatY 5s ease-in-out infinite;
}
.appr-header-icon i { font-size: 24px; color: #fff; }
.appr-page-header h2 { font-size: 24px; margin: 0 0 4px; font-family: var(--font-head); font-weight: 800; }
.appr-page-header p { margin: 0; color: var(--text-soft); font-size: 14px; }
.appr-header-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); transition: all .25s var(--ease);
}
.appr-header-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.appr-header-badge i { font-size: 16px; color: var(--violet-500); }

/* ---- Summary Stat Cards ---- */
.appr-summary-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 24px;
}
.appr-stat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); text-decoration: none;
    transition: all .3s var(--ease); position: relative; overflow: hidden;
    animation: fadeUp .5s var(--ease) both;
}
.appr-stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.appr-stat-card.active { border-color: var(--violet-400); box-shadow: 0 8px 24px var(--teal-glow); }
.appr-stat-card.active::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--violet-500), var(--violet-300));
}
.appr-stat-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s var(--ease);
}
.appr-stat-card:hover .appr-stat-icon { transform: scale(1.1) rotate(-5deg); }
.appr-stat-icon i { font-size: 20px; }
.appr-stat-info { display: flex; flex-direction: column; }
.appr-stat-num { font-family: var(--font-head); font-size: 28px; font-weight: 800; line-height: 1; color: var(--text); }
.appr-stat-label { font-size: 12px; color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }
.appr-stat-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.appr-stat-card:hover .appr-stat-bar { transform: scaleX(1); }

.appr-stat-pending .appr-stat-icon { background: var(--warn-bg); }
.appr-stat-pending .appr-stat-icon i { color: var(--warn); }
.appr-stat-pending .appr-stat-bar { background: var(--warn); }
.appr-stat-approved .appr-stat-icon { background: var(--success-bg); }
.appr-stat-approved .appr-stat-icon i { color: var(--success); }
.appr-stat-approved .appr-stat-bar { background: var(--success); }
.appr-stat-completed .appr-stat-icon { background: var(--info-bg); }
.appr-stat-completed .appr-stat-icon i { color: var(--info); }
.appr-stat-completed .appr-stat-bar { background: var(--info); }
.appr-stat-rejected .appr-stat-icon { background: var(--danger-bg); }
.appr-stat-rejected .appr-stat-icon i { color: var(--danger); }
.appr-stat-rejected .appr-stat-bar { background: var(--danger); }
.appr-stat-all .appr-stat-icon { background: color-mix(in srgb, var(--violet-500) 12%, transparent); }
.appr-stat-all .appr-stat-icon i { color: var(--violet-500); }
.appr-stat-all .appr-stat-bar { background: var(--violet-500); }

/* ---- Pending Alert Banner ---- */
.appr-alert-pending {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--warn-bg), color-mix(in srgb, var(--warn) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
    margin-bottom: 24px; animation: fadeUp .5s var(--ease) both;
}
.appr-alert-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    background: var(--warn); display: flex; align-items: center; justify-content: center;
    animation: glowPulse 2s infinite;
}
.appr-alert-icon i { color: #fff; font-size: 20px; }
.appr-alert-body { flex: 1; display: flex; flex-direction: column; }
.appr-alert-body strong { font-size: 15px; color: var(--warn); }
.appr-alert-body span { font-size: 13px; color: var(--text-soft); }
.appr-alert-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700;
    background: var(--warn); color: #fff; text-decoration: none;
    transition: all .25s var(--ease); flex-shrink: 0;
}
.appr-alert-action:hover { transform: translateX(4px); box-shadow: 0 6px 18px color-mix(in srgb, var(--warn) 40%, transparent); text-decoration: none; }
.appr-alert-action i { transition: transform .25s; }
.appr-alert-action:hover i { transform: translateX(3px); }

/* ---- Filter Bar ---- */
.appr-filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px;
    padding: 6px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; box-shadow: var(--shadow-sm);
}
.appr-filter-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; border-radius: 10px;
    color: var(--text-soft); font-weight: 600; font-size: 13px;
    cursor: pointer; transition: all .22s var(--ease); text-decoration: none;
    position: relative;
}
.appr-filter-tab:hover { background: var(--surface-2); color: var(--violet-500); text-decoration: none; }
.appr-filter-tab.active {
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    color: #fff; box-shadow: 0 4px 14px var(--teal-glow);
}
.appr-filter-tab.active:hover { color: #fff; }
.appr-filter-tab i { font-size: 14px; }
.appr-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; border-radius: 999px; padding: 0 6px;
    background: color-mix(in srgb, var(--violet-500) 15%, transparent);
    color: var(--violet-500); font-size: 11px; font-weight: 700;
}
.appr-filter-tab.active .appr-filter-count { background: rgba(255,255,255,.25); color: #fff; }

/* ---- Reservation Cards ---- */
.appr-cards-container { display: flex; flex-direction: column; gap: 16px; }
.appr-card {
    display: flex; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
    transition: all .3s var(--ease); animation: fadeUp .5s var(--ease) both;
}
.appr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.appr-card-accent { width: 5px; flex-shrink: 0; }
.appr-card-main { flex: 1; padding: 20px 24px; min-width: 0; }

/* Status accent colors */
.appr-status-pending .appr-card-accent { background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 60%, transparent)); }
.appr-status-approved .appr-card-accent { background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 60%, transparent)); }
.appr-status-rejected .appr-card-accent { background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 60%, transparent)); }
.appr-status-completed .appr-card-accent { background: linear-gradient(180deg, var(--info), color-mix(in srgb, var(--info) 60%, transparent)); }
.appr-status-cancelled .appr-card-accent { background: linear-gradient(180deg, var(--text-faint), color-mix(in srgb, var(--text-faint) 60%, transparent)); }

/* ---- Card Top ---- */
.appr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.appr-card-requester { display: flex; align-items: center; gap: 12px; }
.appr-avatar {
    width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #fff;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    box-shadow: 0 4px 12px var(--teal-glow);
}
.appr-requester-name { font-weight: 700; font-size: 15px; color: var(--text); }
.appr-requester-dept { font-size: 13px; color: var(--text-soft); }

/* ---- Status Badges ---- */
.appr-card-status-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase;
}
.appr-card-status-badge i { font-size: 12px; }
.appr-sb-pending { background: var(--warn-bg); color: var(--warn); }
.appr-sb-approved { background: var(--success-bg); color: var(--success); }
.appr-sb-rejected { background: var(--danger-bg); color: var(--danger); }
.appr-sb-completed { background: var(--info-bg); color: var(--info); }
.appr-sb-cancelled { background: var(--surface-2); color: var(--text-faint); }

/* ---- Card Body ---- */
.appr-card-body { margin-bottom: 16px; }
.appr-card-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.appr-card-title { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; font-family: var(--font-head); }
.appr-equip-tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 700;
    background: var(--info-bg); color: var(--info);
}
.appr-equip-tag i { font-size: 10px; }

/* ---- Meta Grid ---- */
.appr-card-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.appr-meta-item { display: flex; align-items: flex-start; gap: 10px; }
.appr-meta-icon {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: var(--surface-2); display: flex; align-items: center; justify-content: center;
    transition: all .25s var(--ease);
}
.appr-card:hover .appr-meta-icon { transform: scale(1.08); }
.appr-meta-icon i { font-size: 14px; color: var(--violet-500); }
.appr-meta-icon-gold i { color: var(--gold-500); }
.appr-meta-text { display: flex; flex-direction: column; min-width: 0; }
.appr-meta-label { font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.appr-meta-value { font-size: 14px; color: var(--text); font-weight: 600; }
.appr-meta-sub { font-size: 12px; color: var(--text-soft); }

/* ---- Feedback Stars ---- */
.appr-feedback-stars { display: flex; gap: 2px; font-size: 13px; color: var(--gold-500); }
.appr-star-empty { color: var(--text-faint); opacity: .4; }

/* ---- Details Row ---- */
.appr-card-details-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.appr-detail-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 9px; font-size: 12px;
    background: var(--surface-2); color: var(--text-soft);
    max-width: 100%; overflow: hidden;
}
.appr-detail-chip i { color: var(--text-faint); flex-shrink: 0; }
.appr-detail-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Card Actions ---- */
.appr-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); }
.appr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
    cursor: pointer; transition: all .22s var(--ease);
}
.appr-btn i { font-size: 13px; }
.appr-btn:hover { transform: translateY(-2px); }
.appr-btn-view:hover { border-color: var(--violet-300); color: var(--violet-500); background: color-mix(in srgb, var(--violet-500) 6%, transparent); box-shadow: 0 4px 14px var(--teal-glow); }
.appr-btn-print:hover { border-color: var(--text-faint); color: var(--text); background: var(--surface-2); }
.appr-btn-approve { border-color: color-mix(in srgb, var(--success) 30%, transparent); color: var(--success); background: var(--success-bg); }
.appr-btn-approve:hover { background: var(--success); color: #fff; border-color: var(--success); box-shadow: 0 6px 18px color-mix(in srgb, var(--success) 35%, transparent); }
.appr-btn-reject { border-color: color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); background: var(--danger-bg); }
.appr-btn-reject:hover { background: var(--danger); color: #fff; border-color: var(--danger); box-shadow: 0 6px 18px color-mix(in srgb, var(--danger) 35%, transparent); }
.appr-btn-lg { padding: 13px 24px; font-size: 14px; flex: 1; justify-content: center; }

/* ---- Empty State ---- */
.appr-empty-state {
    text-align: center; padding: 80px 20px;
    animation: fadeUp .5s var(--ease) both;
}
.appr-empty-icon {
    width: 80px; height: 80px; border-radius: 24px; margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--success-bg), color-mix(in srgb, var(--success) 10%, transparent));
    display: flex; align-items: center; justify-content: center;
    animation: floatY 4s ease-in-out infinite;
}
.appr-empty-icon i { font-size: 36px; color: var(--success); }
.appr-empty-state h3 { font-size: 20px; font-weight: 800; margin: 0 0 8px; color: var(--text); font-family: var(--font-head); }
.appr-empty-state p { font-size: 14px; color: var(--text-soft); margin: 0; }

/* ---- Details Modal ---- */
.appr-details-modal { max-width: 720px; }
.appr-modal-head {
    background: linear-gradient(135deg, var(--violet-500), var(--violet-400));
    color: #fff; border-radius: var(--radius) var(--radius) 0 0;
    padding: 20px 24px;
}
.appr-modal-head h3 { color: #fff; margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.appr-modal-head .modal-close { color: #fff; background: rgba(255,255,255,.15); }
.appr-modal-head .modal-close:hover { background: rgba(255,255,255,.25); }

.appr-detail-modal-content { display: flex; flex-direction: column; gap: 20px; }
.appr-detail-status-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.appr-detail-section {
    padding: 18px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
}
.appr-detail-section-title {
    font-size: 13px; font-weight: 700; color: var(--text);
    margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
    text-transform: uppercase; letter-spacing: .04em;
}
.appr-detail-section-title i { color: var(--violet-500); font-size: 14px; }

.appr-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appr-detail-field { display: flex; flex-direction: column; }
.appr-detail-field-full { margin-top: 14px; }
.appr-detail-value { font-size: 14px; color: var(--text); font-weight: 600; margin: 0; }
.appr-detail-sub { font-size: 12px; color: var(--text-soft); margin: 2px 0 0; }
.appr-detail-text { font-size: 14px; color: var(--text); margin: 0; line-height: 1.6; }

.appr-detail-equip-box {
    margin-top: 14px; padding: 14px; border-radius: 10px;
    background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
}
.appr-detail-equip-head { font-size: 13px; font-weight: 700; color: var(--info); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.appr-detail-equip-box p { font-size: 13px; color: var(--text); margin: 0 0 6px; }
.appr-detail-equip-route { font-size: 12px; color: var(--text-soft); }

.appr-detail-acctg-box {
    padding: 16px; border-radius: 12px;
    background: var(--success-bg); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.appr-detail-pre { white-space: pre-wrap; font-family: var(--font); font-size: 13px; color: var(--text); margin: 8px 0 0; }

.appr-detail-feedback-box {
    padding: 16px; border-radius: 12px;
    background: color-mix(in srgb, var(--gold-500) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
}
.appr-feedback-stars-lg { font-size: 22px; color: var(--gold-500); margin: 8px 0; display: flex; gap: 4px; }
.appr-detail-meta { font-size: 11px; color: var(--text-faint); margin: 6px 0 0; }

.appr-detail-timestamp {
    font-size: 12px; color: var(--text-faint);
    border-top: 1px solid var(--border); padding-top: 14px;
    display: flex; align-items: center; gap: 6px;
}
.appr-detail-timestamp i { font-size: 12px; }

.appr-detail-actions { display: flex; gap: 12px; margin-top: 20px; }

/* ---- Notes Modal ---- */
.appr-notes-modal { max-width: 520px; }

/* ---- Responsive ---- */
@media (max-width: 760px) {
    .appr-page-header { flex-direction: column; align-items: flex-start; }
    .appr-header-badge { width: 100%; justify-content: center; }
    .appr-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .appr-stat-card { padding: 14px 16px; }
    .appr-stat-num { font-size: 22px; }
    .appr-alert-pending { flex-direction: column; text-align: center; gap: 12px; }
    .appr-alert-action { width: 100%; justify-content: center; }
    .appr-filter-bar { overflow-x: auto; flex-wrap: nowrap; }
    .appr-filter-tab { white-space: nowrap; }
    .appr-card-main { padding: 16px; }
    .appr-card-meta-grid { grid-template-columns: 1fr; }
    .appr-card-actions { flex-direction: column; }
    .appr-btn { width: 100%; justify-content: center; }
    .appr-detail-grid { grid-template-columns: 1fr; }
    .appr-detail-actions { flex-direction: column; }
}
@media (max-width: 480px) {
    .appr-summary-grid { grid-template-columns: 1fr; }
    .appr-header-content { flex-direction: column; align-items: flex-start; gap: 10px; }
    .appr-card-title { font-size: 15px; }
}