:root {
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --secondary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    --sidebar-width: 280px;
}

body { font-family: 'Plus Jakarta Sans', sans-serif; background: #f1f5f9; overflow: hidden; }

/* --- SideBar --- */
aside { background: #111827 !important; width: var(--sidebar-width) !important; box-shadow: 10px 0 30px rgba(0,0,0,0.1); }
#sidebar-nav button { border-radius: 12px; margin-bottom: 6px; transition: all 0.3s ease; font-weight: 600; opacity: 0.7; color: #94a3b8; }
#sidebar-nav button.active { background: rgba(99, 102, 241, 0.15) !important; border-left: 3px solid #818cf8 !important; color: #818cf8 !important; opacity: 1; }

/* --- Cards & Inputs --- */
.bg-white { border-radius: 20px !important; border: 1px solid rgba(255,255,255,0.8) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important; }
input, select, textarea { border-radius: 12px !important; border: 1px solid #e2e8f0 !important; background: #f8fafc !important; transition: 0.2s; }
input:focus { border-color: #6366f1 !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important; outline: none; }

/* --- Seat Mapping --- */
.seat-dynamic { border-radius: 10px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; cursor: pointer; border: 2px solid #e2e8f0; transition: 0.2s; }
.seat-dynamic.sold { background: #fee2e2 !important; color: #ef4444 !important; border: none; cursor: not-allowed; }
.seat-dynamic.selected { background: var(--primary-gradient) !important; color: white !important; border: none; transform: scale(1.1); box-shadow: 0 4px 12px rgba(99,102,241,0.4); }
.seat-male { background: #3b82f6 !important; color: white !important; }
.seat-female { background: #ec4899 !important; color: white !important; }

/* --- Animations --- */
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Mobile Header --- */
#mobile-header { display: none; height: 60px; background: #0f172a; color: white; align-items: center; justify-content: space-between; padding: 0 20px; position: fixed; top:0; left:0; right:0; z-index: 1000; }
@media (max-width: 768px) { #mobile-header { display: flex; } body { padding-top: 60px; } aside { position: fixed; left: -280px; top:0; bottom:0; z-index: 2000; transition: 0.3s; } aside.mobile-open { left: 0 !important; } }