* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 body {
     font-family: 'Inter', sans-serif;
     overflow-x: hidden
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Outfit', sans-serif
 }

 ::-webkit-scrollbar {
     width: 5px;
     height: 5px
 }

 ::-webkit-scrollbar-track {
     background: transparent
 }

 ::-webkit-scrollbar-thumb {
     background: linear-gradient(180deg, #0ea5e9, #6366f1);
     border-radius: 10px
 }

 .glass {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.3)
 }

 .dark .glass {
     background: rgba(15, 23, 42, 0.9);
     border: 1px solid rgba(255, 255, 255, 0.1)
 }

 .glass-sidebar {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(30px);
     border-right: 1px solid rgba(0, 0, 0, 0.06)
 }

 .dark .glass-sidebar {
     background: rgba(15, 23, 42, 0.97);
     border-right: 1px solid rgba(255, 255, 255, 0.08)
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(0, 0, 0, 0.04)
 }

 .dark .glass-card {
     background: rgba(30, 41, 59, 0.7);
     border: 1px solid rgba(255, 255, 255, 0.08)
 }

 .gradient-text {
     background: linear-gradient(135deg, #0ea5e9, #6366f1, #8b5cf6);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text
 }

 .card-lift {
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
 }

 .card-lift:hover {
     transform: translateY(-4px);
     box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.1)
 }

 .dark .card-lift:hover {
     box-shadow: 0 16px 35px -10px rgba(0, 0, 0, 0.35)
 }

 .btn-ripple {
     position: relative;
     overflow: hidden
 }

 .btn-ripple::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     pointer-events: none;
     background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
     background-repeat: no-repeat;
     background-position: 50%;
     transform: scale(10);
     opacity: 0;
     transition: transform .5s, opacity 1s
 }

 .btn-ripple:active::after {
     transform: scale(0);
     opacity: .3;
     transition: 0s
 }

 .sidebar-link {
     position: relative;
     display: flex;
     align-items: center;
     padding: 10px 16px;
     border-radius: 12px;
     color: #64748b;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.3s;
     gap: 12px;
     text-decoration: none;
     white-space: nowrap
 }

 .sidebar-link:hover {
     background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
     color: #0ea5e9;
     transform: translateX(4px)
 }

 .sidebar-link.active {
     background: linear-gradient(135deg, #0ea5e9, #6366f1);
     color: white;
     box-shadow: 0 8px 25px -5px rgba(14, 165, 233, 0.4)
 }

 .sidebar-link.active i {
     color: white
 }

 .sidebar-link i {
     width: 20px;
     text-align: center;
     font-size: 15px;
     flex-shrink: 0
 }

 .dark .sidebar-link {
     color: #94a3b8
 }

 .dark .sidebar-link:hover {
     color: #38bdf8;
     background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(99, 102, 241, 0.15))
 }

 .dark .sidebar-link.active {
     background: linear-gradient(135deg, #0ea5e9, #6366f1);
     color: white
 }

 .sidebar-tooltip {
     position: absolute;
     left: calc(100% + 12px);
     top: 50%;
     transform: translateY(-50%);
     padding: 5px 12px;
     background: #0f172a;
     color: white;
     font-size: 12px;
     font-weight: 500;
     border-radius: 8px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: all 0.3s;
     z-index: 999
 }

 .sidebar-link:hover .sidebar-tooltip {
     opacity: 1
 }

 .sidebar-tooltip::before {
     content: '';
     position: absolute;
     right: 100%;
     top: 50%;
     transform: translateY(-50%);
     border: 5px solid transparent;
     border-right-color: #0f172a
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 @keyframes fadeInLeft {
     from {
         opacity: 0;
         transform: translateX(-30px)
     }

     to {
         opacity: 1;
         transform: translateX(0)
     }
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateX(30px)
     }

     to {
         opacity: 1;
         transform: translateX(0)
     }
 }

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.9)
     }

     to {
         opacity: 1;
         transform: scale(1)
     }
 }

 @keyframes dot-pulse {

     0%,
     100% {
         transform: scale(1);
         opacity: 1
     }

     50% {
         transform: scale(1.5);
         opacity: 0.5
     }
 }

 @keyframes music-bounce {

     0%,
     100% {
         transform: scaleY(1)
     }

     50% {
         transform: scaleY(0.3)
     }
 }

 @keyframes seat-pop {
     0% {
         transform: scale(1)
     }

     50% {
         transform: scale(1.3)
     }

     100% {
         transform: scale(1.1)
     }
 }

 @keyframes plane-nose {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-3px)
     }
 }

 @keyframes glow-pulse {

     0%,
     100% {
         box-shadow: 0 0 5px rgba(14, 165, 233, 0.4)
     }

     50% {
         box-shadow: 0 0 20px rgba(14, 165, 233, 0.8), 0 0 30px rgba(14, 165, 233, 0.4)
     }
 }

 .animate-fade-in-up {
     animation: fadeInUp 0.6s ease forwards
 }

 .animate-fade-in-left {
     animation: fadeInLeft 0.6s ease forwards
 }

 .animate-fade-in-right {
     animation: fadeInRight 0.6s ease forwards
 }

 .animate-scale-in {
     animation: scaleIn 0.4s ease forwards
 }

 .animate-plane-nose {
     animation: plane-nose 3s ease-in-out infinite
 }

 .delay-100 {
     animation-delay: .1s
 }

 .delay-200 {
     animation-delay: .2s
 }

 .delay-300 {
     animation-delay: .3s
 }

 .delay-400 {
     animation-delay: .4s
 }

 .delay-500 {
     animation-delay: .5s
 }

 .badge {
     display: inline-flex;
     align-items: center;
     padding: 3px 10px;
     border-radius: 999px;
     font-size: 11px;
     font-weight: 600;
     gap: 4px
 }

 .badge-success {
     background: rgba(16, 185, 129, 0.1);
     color: #059669
 }

 .dark .badge-success {
     background: rgba(16, 185, 129, 0.2);
     color: #34d399
 }

 .badge-warning {
     background: rgba(245, 158, 11, 0.1);
     color: #d97706
 }

 .dark .badge-warning {
     background: rgba(245, 158, 11, 0.2);
     color: #fbbf24
 }

 .badge-danger {
     background: rgba(244, 63, 94, 0.1);
     color: #e11d48
 }

 .dark .badge-danger {
     background: rgba(244, 63, 94, 0.2);
     color: #fb7185
 }

 .badge-info {
     background: rgba(14, 165, 233, 0.1);
     color: #0284c7
 }

 .dark .badge-info {
     background: rgba(14, 165, 233, 0.2);
     color: #38bdf8
 }

 .badge-purple {
     background: rgba(139, 92, 246, 0.1);
     color: #7c3aed
 }

 .dark .badge-purple {
     background: rgba(139, 92, 246, 0.2);
     color: #a78bfa
 }

 .notification-dot {
     position: absolute;
     top: -2px;
     right: -2px;
     width: 8px;
     height: 8px;
     background: #ef4444;
     border-radius: 50%;
     border: 2px solid white;
     animation: dot-pulse 2s infinite
 }

 .dark .notification-dot {
     border-color: #0f172a
 }

 .music-wave {
     display: flex;
     align-items: flex-end;
     gap: 2px;
     height: 16px
 }

 .music-bar {
     width: 3px;
     background: linear-gradient(to top, #0ea5e9, #6366f1);
     border-radius: 2px;
     animation: music-bounce 0.8s ease infinite
 }

 .music-bar:nth-child(1) {
     height: 40%
 }

 .music-bar:nth-child(2) {
     height: 70%;
     animation-delay: .1s
 }

 .music-bar:nth-child(3) {
     height: 50%;
     animation-delay: .2s
 }

 .music-bar:nth-child(4) {
     height: 90%;
     animation-delay: .3s
 }

 .music-bar:nth-child(5) {
     height: 60%;
     animation-delay: .4s
 }

 .toast {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
     padding: 14px 22px;
     border-radius: 12px;
     color: white;
     font-weight: 500;
     font-size: 14px;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
 }

 .grid {
     min-width: 0
 }

 .grid>* {
     min-width: 0
 }

 main {
     overflow-x: hidden
 }

 /* ============ AIRCRAFT + SEAT MAP ============ */
 .aircraft-container {
     background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
     border-radius: 24px;
     padding: 24px 16px;
     position: relative;
     overflow: hidden
 }

 .dark .aircraft-container {
     background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%)
 }

 .aircraft-body {
     background: white;
     max-width: 420px;
     margin: 0 auto;
     padding: 20px 12px;
     border-radius: 150px 150px 40px 40px / 80px 80px 40px 40px;
     box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.15), inset 0 0 0 3px #e2e8f0;
     position: relative
 }

 .dark .aircraft-body {
     background: #1e293b;
     box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.4), inset 0 0 0 3px #334155
 }

 .aircraft-body::before {
     content: '';
     position: absolute;
     top: -4px;
     left: 50%;
     transform: translateX(-50%);
     width: 100px;
     height: 20px;
     background: linear-gradient(180deg, #94a3b8, #cbd5e1);
     border-radius: 50% 50% 0 0;
     z-index: -1
 }

 .cockpit-label {
     text-align: center;
     margin-bottom: 15px;
     padding: 8px;
     background: linear-gradient(135deg, #0ea5e9, #6366f1);
     color: white;
     border-radius: 12px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     animation: plane-nose 3s infinite
 }

 .row-label {
     width: 20px;
     text-align: center;
     font-size: 10px;
     font-weight: 700;
     color: #94a3b8
 }

 .col-label {
     text-align: center;
     font-size: 10px;
     font-weight: 700;
     color: #94a3b8;
     padding: 4px
 }

 .seat {
     width: 32px;
     height: 32px;
     border-radius: 8px 8px 4px 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 9px;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.3s;
     position: relative;
     user-select: none
 }

 .seat.available {
     background: #e0f2fe;
     color: #0284c7;
     border: 2px solid #7dd3fc
 }

 .dark .seat.available {
     background: rgba(14, 165, 233, 0.15);
     color: #38bdf8;
     border-color: rgba(14, 165, 233, 0.4)
 }

 .seat.available:hover {
     background: #bae6fd;
     transform: scale(1.1);
     border-color: #0ea5e9
 }

 .dark .seat.available:hover {
     background: rgba(14, 165, 233, 0.3)
 }

 .seat.selected {
     background: linear-gradient(135deg, #10b981, #059669);
     color: white;
     border: 2px solid #059669;
     animation: seat-pop 0.4s ease forwards;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4)
 }

 .seat.selected::after {
     content: '✓';
     position: absolute;
     top: -5px;
     right: -5px;
     width: 14px;
     height: 14px;
     background: #059669;
     color: white;
     border-radius: 50%;
     font-size: 9px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid white
 }

 .dark .seat.selected::after {
     border-color: #0f172a
 }

 .seat.occupied {
     background: #e2e8f0;
     color: #94a3b8;
     border: 2px solid #cbd5e1;
     cursor: not-allowed
 }

 .dark .seat.occupied {
     background: #334155;
     color: #64748b;
     border-color: #475569
 }

 .seat.occupied::after {
     content: '\f007';
     font-family: 'Font Awesome 6 Free';
     font-weight: 900;
     font-size: 10px;
     color: #94a3b8
 }

 .dark .seat.occupied::after {
     color: #64748b
 }

 .seat.premium {
     background: #fef3c7;
     color: #d97706;
     border: 2px solid #fbbf24
 }

 .dark .seat.premium {
     background: rgba(245, 158, 11, 0.15);
     color: #fbbf24;
     border-color: rgba(245, 158, 11, 0.4)
 }

 .seat.premium:hover {
     background: #fde68a;
     transform: scale(1.1)
 }

 .dark .seat.premium:hover {
     background: rgba(245, 158, 11, 0.3)
 }

 .seat.business {
     background: #ede9fe;
     color: #7c3aed;
     border: 2px solid #a78bfa
 }

 .dark .seat.business {
     background: rgba(139, 92, 246, 0.15);
     color: #a78bfa;
     border-color: rgba(139, 92, 246, 0.4)
 }

 .seat.business:hover {
     background: #ddd6fe;
     transform: scale(1.1)
 }

 .dark .seat.business:hover {
     background: rgba(139, 92, 246, 0.3)
 }

 .seat.exit-row {
     position: relative
 }

 .seat.exit-row::before {
     content: 'EXIT';
     position: absolute;
     top: -14px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 7px;
     color: #ef4444;
     font-weight: 700;
     letter-spacing: 1px
 }

 .aisle {
     width: 18px
 }

 .row-divider {
     border-top: 2px dashed #cbd5e1;
     margin: 6px 0;
     padding-top: 6px
 }

 .dark .row-divider {
     border-top-color: #475569
 }

 .class-header {
     text-align: center;
     padding: 8px;
     margin: 12px 0 8px 0;
     border-radius: 10px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.5px
 }

 .class-business {
     background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
     color: #7c3aed
 }

 .dark .class-business {
     color: #a78bfa
 }

 .class-premium {
     background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
     color: #d97706
 }

 .dark .class-premium {
     color: #fbbf24
 }

 .class-economy {
     background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(2, 132, 199, 0.15));
     color: #0284c7
 }

 .dark .class-economy {
     color: #38bdf8
 }

 .legend-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 11px;
     color: #64748b
 }

 .dark .legend-item {
     color: #94a3b8
 }

 .legend-box {
     width: 20px;
     height: 20px;
     border-radius: 6px 6px 3px 3px;
     border: 2px solid
 }

 .passenger-tab {
     padding: 10px 16px;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s;
     border: 2px solid #e2e8f0;
     background: transparent;
     display: flex;
     align-items: center;
     gap: 10px
 }

 .dark .passenger-tab {
     border-color: #334155
 }

 .passenger-tab.active {
     border-color: #0ea5e9;
     background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1))
 }

 .step-indicator {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .step-item {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .step-circle {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     font-weight: 700;
     flex-shrink: 0
 }

 .step-completed {
     background: linear-gradient(135deg, #10b981, #059669);
     color: white
 }

 .step-active {
     background: linear-gradient(135deg, #0ea5e9, #6366f1);
     color: white;
     animation: glow-pulse 2s infinite
 }

 .step-pending {
     background: #e2e8f0;
     color: #94a3b8
 }

 .dark .step-pending {
     background: #334155;
     color: #64748b
 }

 .step-line {
     width: 30px;
     height: 2px;
     background: #e2e8f0
 }

 .dark .step-line {
     background: #334155
 }

 .step-line.done {
     background: linear-gradient(90deg, #10b981, #059669)
 }

 @media(max-width:1024px) {
     .sidebar-desktop {
         display: none
     }
 }

 @media(min-width:1025px) {
     .mobile-sidebar-btn {
         display: none
     }
 }