:root {
    --fs-bg: #0a0d17; --fs-sidebar: #0f1322; --fs-card: #161d30; --fs-border: rgba(255,255,255,0.07);
    --fs-text: #e2e8f0; --fs-muted: #64748b; --fs-amber: #f59e0b; --fs-amber-hover: #d97706;
    --fs-success: #10b981; --fs-danger: #ef4444; --fs-info: #3b82f6; --fs-sidebar-w: 250px;
}
* { box-sizing: border-box; }
body { background: var(--fs-bg); color: var(--fs-text); font-family: 'Inter', sans-serif; min-height: 100vh; }
.fs-sidebar { position: fixed; top: 0; left: 0; width: var(--fs-sidebar-w); height: 100vh; background: var(--fs-sidebar); border-right: 1px solid var(--fs-border); z-index: 1000; overflow-y: auto; display: flex; flex-direction: column; }
.fs-brand { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--fs-border); display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.fs-brand-icon { width: 38px; height: 38px; background: linear-gradient(135deg, var(--fs-amber), #ef4444); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.fs-brand-text .name { font-weight: 700; font-size: 1rem; color: var(--fs-text); line-height: 1; }
.fs-brand-text .sub  { font-size: .65rem; color: var(--fs-amber); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fs-nav { padding: .75rem 0; flex: 1; }
.fs-nav-section { padding: .4rem 1.25rem .2rem; font-size: .63rem; font-weight: 700; color: var(--fs-muted); text-transform: uppercase; letter-spacing: .1em; margin-top: .75rem; }
.fs-nav-link { display: flex; align-items: center; gap: .75rem; padding: .575rem 1.25rem; color: var(--fs-muted); text-decoration: none; font-size: .85rem; font-weight: 500; transition: all .15s; border-right: 3px solid transparent; }
.fs-nav-link i { font-size: 1rem; width: 18px; text-align: center; flex-shrink: 0; }
.fs-nav-link:hover { color: var(--fs-text); background: rgba(255,255,255,.04); }
.fs-nav-link.active { color: var(--fs-amber); background: rgba(245,158,11,.08); border-right-color: var(--fs-amber); }
.fs-sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--fs-border); }
.sidebar-user { display: flex; align-items: center; gap: .75rem; }
.sidebar-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--fs-amber), #ef4444); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #000; flex-shrink: 0; }
.sidebar-user-info .uname { font-size: .8rem; font-weight: 600; color: var(--fs-text); }
.sidebar-user-info .urole { font-size: .7rem; color: var(--fs-muted); text-transform: capitalize; }
.fs-main { margin-left: var(--fs-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.fs-topbar { position: sticky; top: 0; z-index: 999; background: rgba(10,13,23,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fs-border); padding: .875rem 1.75rem; display: flex; align-items: center; justify-content: space-between; }
.fs-topbar .page-title { font-size: 1rem; font-weight: 600; color: var(--fs-text); margin: 0; }
.fs-content { padding: 1.75rem; flex: 1; }
.fs-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 12px; }
.fs-card-body { padding: 1.5rem; }
.fs-card-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--fs-border); display: flex; align-items: center; justify-content: space-between; }
.fs-card-header h5 { margin: 0; font-size: .9rem; font-weight: 600; }
.stat-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 12px; padding: 1.25rem 1.5rem; transition: border-color .2s; }
.stat-card:hover { border-color: rgba(255,255,255,.12); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stat-value { font-size: 1.875rem; font-weight: 700; line-height: 1.2; }
.stat-label { font-size: .78rem; color: var(--fs-muted); margin-top: .2rem; }
.fs-table-wrap { overflow-x: auto; }
.fs-table { width: 100%; color: var(--fs-text); border-collapse: collapse; }
.fs-table th { background: rgba(255,255,255,.03); color: var(--fs-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .75rem 1rem; border-bottom: 1px solid var(--fs-border); white-space: nowrap; }
.fs-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--fs-border); vertical-align: middle; font-size: .875rem; }
.fs-table tbody tr:last-child td { border-bottom: none; }
.fs-table tbody tr:hover td { background: rgba(255,255,255,.02); }
.fs-label { font-size: .82rem; font-weight: 600; color: var(--fs-muted); margin-bottom: .4rem; display: block; }
.fs-input { width: 100%; background: rgba(255,255,255,.05) !important; border: 1px solid var(--fs-border) !important; color: var(--fs-text) !important; border-radius: 8px !important; padding: .625rem .875rem !important; font-size: .875rem; transition: border-color .15s, box-shadow .15s; outline: none; }
.fs-input:focus { border-color: var(--fs-amber) !important; box-shadow: 0 0 0 3px rgba(245,158,11,.12) !important; }
.fs-input::placeholder { color: var(--fs-muted) !important; }
select.fs-input option { background: var(--fs-card); color: var(--fs-text); }
.btn-amber { background: var(--fs-amber); color: #000 !important; border: none; font-weight: 600; border-radius: 8px; padding: .575rem 1.25rem; font-size: .875rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-amber:hover { background: var(--fs-amber-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.btn-ghost { background: rgba(255,255,255,.06); color: var(--fs-text) !important; border: 1px solid var(--fs-border); font-weight: 500; border-radius: 8px; padding: .575rem 1.25rem; font-size: .875rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-danger-ghost { background: rgba(239,68,68,.08); color: #ef4444 !important; border: 1px solid rgba(239,68,68,.25); font-weight: 500; border-radius: 8px; padding: .575rem 1.25rem; font-size: .875rem; cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.btn-danger-ghost:hover { background: rgba(239,68,68,.15); }
.status-badge { padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 600; display: inline-block; }
.badge-active    { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.25); }
.badge-completed { background: rgba(59,130,246,.12);  color: #3b82f6; border: 1px solid rgba(59,130,246,.25); }
.badge-missed    { background: rgba(239,68,68,.12);   color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.badge-cancelled { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.25); }
.badge-pending   { background: rgba(245,158,11,.12);  color: #f59e0b; border: 1px solid rgba(245,158,11,.25); }
.badge-inactive  { background: rgba(100,116,139,.12); color: #94a3b8; border: 1px solid rgba(100,116,139,.25); }
.fs-alert { padding: .875rem 1.25rem; border-radius: 10px; display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; font-size: .875rem; }
.fs-alert-success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.2); color: #10b981; }
.fs-alert-error   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.2);  color: #ef4444; }
.fs-alert-warning { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.22); color: #d97706; }
.slot-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 10px; padding: .875rem 1rem; transition: all .2s; cursor: pointer; }
.slot-card:hover:not(.slot-disabled):not(.slot-full) { border-color: var(--fs-amber); transform: translateY(-2px); }
.slot-card.slot-full { opacity: .4; cursor: not-allowed; }
.slot-card.slot-disabled { opacity: .35; cursor: not-allowed; }
.slot-card.slot-selected { border-color: var(--fs-amber) !important; background: rgba(245,158,11,.06); }
.slot-time { font-size: .8rem; font-weight: 700; }
.slot-spots { font-size: .72rem; color: var(--fs-muted); }
.slot-spots.low { color: #ef4444; } .slot-spots.ok { color: #10b981; }
.ticket-wrap { max-width: 440px; margin: 0 auto; }
.ticket-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 16px; overflow: hidden; }
.ticket-head { background: linear-gradient(145deg, #1a0e00, #2d1a00); padding: 1.5rem; text-align: center; border-bottom: 2px dashed rgba(245,158,11,.25); }
.ticket-body { padding: 1.75rem; }
.qr-wrap { background: #fff; border-radius: 12px; padding: 14px; display: inline-block; box-shadow: 0 0 40px rgba(245,158,11,.15); }
.qr-wrap svg { width: 180px; height: 180px; display: block; }
.countdown-label { font-size: .72rem; color: var(--fs-muted); text-transform: uppercase; font-weight: 700; letter-spacing: .1em; }
.countdown-time { font-size: 2.75rem; font-weight: 800; color: var(--fs-amber); font-variant-numeric: tabular-nums; letter-spacing: .04em; line-height: 1; }
.ticket-sep { border: none; border-top: 1px dashed var(--fs-border); margin: 1.25rem 0; }
.ticket-row { display: flex; justify-content: space-between; align-items: baseline; padding: .3rem 0; }
.ticket-row .t-label { font-size: .78rem; color: var(--fs-muted); }
.ticket-row .t-value { font-size: .875rem; font-weight: 600; text-align: right; }
.receipt-paper { background: #fff; border-radius: 16px; max-width: 400px; margin: 0 auto; color: #1e293b; box-shadow: 0 20px 60px rgba(0,0,0,.5); overflow: hidden; }
.receipt-header-bg { background: #0a0d17; padding: 1.5rem; text-align: center; }
.receipt-logo { color: #f59e0b; font-size: 1.25rem; font-weight: 800; }
.receipt-body { padding: 1.75rem; }
.receipt-sep { border: none; border-top: 2px dashed #e2e8f0; margin: 1rem 0; }
.receipt-row { display: flex; justify-content: space-between; margin: .45rem 0; font-size: .875rem; }
.receipt-row.total { font-weight: 800; font-size: 1.1rem; border-top: 2px solid #e2e8f0; padding-top: .75rem; margin-top: .5rem; }
.receipt-row.total .amount { color: #f59e0b; font-size: 1.4rem; }
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: radial-gradient(ellipse at 30% 50%, rgba(245,158,11,.06) 0%, transparent 55%); }
.auth-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 16px; padding: 2.5rem; width: 100%; max-width: 440px; }
.auth-icon { width: 56px; height: 56px; background: linear-gradient(135deg, var(--fs-amber), #ef4444); border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.hero { min-height: 100vh; display: flex; flex-direction: column; }
.landing-nav { padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--fs-border); }
.hero-section { flex: 1; display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; text-align: center; background: radial-gradient(ellipse at 30% 50%, rgba(245,158,11,.08) 0%, transparent 60%); }
.hero-badge { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); color: var(--fs-amber); padding: .3rem .875rem; border-radius: 999px; font-size: .78rem; font-weight: 600; display: inline-block; margin-bottom: 1.5rem; }
.hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.hero-title span { background: linear-gradient(135deg, var(--fs-amber), #ef4444); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 1.1rem; color: var(--fs-muted); max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.7; }
.feature-card { background: var(--fs-card); border: 1px solid var(--fs-border); border-radius: 12px; padding: 1.75rem; transition: all .2s; }
.feature-card:hover { border-color: rgba(245,158,11,.3); transform: translateY(-3px); }
.feature-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.divider { border: none; border-top: 1px solid var(--fs-border); margin: 1.25rem 0; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--fs-muted); }
.empty-state i { font-size: 3rem; margin-bottom: 1rem; opacity: .4; display: block; }
::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--fs-bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }

/* ── Mobile Responsiveness ───────────────── */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    :root { --fs-sidebar-w: 260px; }
    .fs-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; }
    .fs-sidebar.open { transform: translateX(0); }
    .fs-main { margin-left: 0; width: 100%; min-width: 0; }
    .mobile-menu-btn { display: block !important; }
    
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 998; backdrop-filter: blur(2px); }
    .sidebar-overlay.open { display: block; }

    /* Landing page */
    .hero-title { font-size: 2.2rem; }
    .landing-nav { flex-direction: column; gap: 1rem; padding: 1rem; }
    .landing-nav > div { flex-direction: column; width: 100%; }
    .landing-nav .btn-ghost, .landing-nav .btn-amber { width: 100%; justify-content: center; }
    
    .fs-topbar { padding: 0.75rem 1rem; flex-wrap: wrap; gap: .75rem; }
    .fs-topbar .page-title { flex: 1 1 auto; min-width: 0; }
    .fs-content { padding: 1rem; min-width: 0; }
    .fs-card-header, .fs-card-body { padding: 1rem; }
    .fs-card-header { flex-wrap: wrap; gap: .75rem; }
    
    /* Tables */
    .fs-table-wrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .stat-card { padding: 1rem; }
    .fs-alert { flex-direction: column; align-items: flex-start; text-align: left; }
}

.mobile-menu-btn { display: none; background: transparent; border: none; color: var(--fs-text); font-size: 1.5rem; cursor: pointer; padding: 0; margin-right: 1rem; }