:root{
  --blue-900:#1E3A8A;--blue-800:#1e40af;--blue-700:#1d4ed8;--blue-100:#dbeafe;--blue-50:#eff6ff;
  --yellow-400:#FBBF24;--yellow-500:#f59e0b;--yellow-50:#fffbeb;
  --green-600:#059669;--green-500:#10B981;
  --gray-900:#111827;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;
  --gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f9fafb;
  --red-500:#ef4444;--white:#fff;--radius:.75rem;--shadow:0 8px 22px rgba(0,0,0,.08)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--gray-100);color:var(--gray-900)}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}

.header{background:var(--blue-900);color:var(--white);position:sticky;top:0;z-index:900}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0;position:relative}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:40px}
.nav{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:.6rem;border:1px solid transparent}
.nav a:hover{border-color:#ffffff55;background:#ffffff14}
.menu-right{display:flex;gap:.5rem;align-items:center}

.mobile-nav{position:absolute;top:calc(100% + .5rem);right:0;background:rgba(15,23,42,.95);border-radius:1rem;box-shadow:0 16px 40px rgba(15,23,42,.35);padding:.5rem 0;width:min(280px,calc(100vw - 2rem));display:none}
.mobile-nav.open{display:block}
.mobile-nav__inner{display:flex;flex-direction:column}
.mobile-nav__inner a{padding:.75rem 1.25rem;color:#fff;text-decoration:none;font-weight:600}
.mobile-nav__inner a + a{border-top:1px solid rgba(255,255,255,.08)}
.mobile-nav__inner a:hover{background:rgba(255,255,255,.08)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:.6rem;padding:.55rem .9rem;font-weight:600;cursor:pointer}
.btn-primary{background:var(--yellow-400);color:var(--blue-900)}
.btn-outline{background:transparent;color:#fff;border:1px solid #ffffff77}
.btn-outline.dark{color:var(--blue-900);border-color:var(--gray-300)}
.btn-outline:hover{background:#ffffff14}

.card{background:#fff;border-radius:1rem;box-shadow:var(--shadow);padding:1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.badge{background:var(--blue-50);color:var(--blue-900);border:1px solid var(--blue-100);padding:.2rem .55rem;border-radius:999px;font-weight:700;font-size:.75rem}

.hero{display:grid;gap:1rem;padding:1rem 0}
.hero-top{display:flex;justify-content:center}
.logo-lg{max-width:320px;width:100%;height:auto}
.kpi{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.kpi .pill{background:#0f172a;color:#fff;border:2px solid var(--yellow-400);border-radius:12px;padding:.75rem 1rem;text-align:center}
.pill .big{font-size:1.25rem;font-weight:800;color:var(--yellow-400)}

.section-title{margin:.25rem 0 1rem;color:var(--blue-900);text-align:center}

.number-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:.75rem}
.num{display:flex;align-items:center;justify-content:center;min-height:56px;padding:.35rem;border-radius:.75rem;font-weight:700;border:2px solid var(--gray-300);background:var(--white);color:var(--blue-900);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease;box-shadow:0 2px 4px rgba(15,23,42,.08)}
.num.available:hover{background:var(--blue-50);border-color:var(--blue-700)}
.num.sel{background:var(--blue-900);border-color:var(--blue-900);color:#fff;box-shadow:0 4px 10px rgba(30,58,138,.35)}
.num.lock{background:#0f172a;color:#fff;opacity:.75;border-color:#0f172a;cursor:not-allowed;box-shadow:none}

.legend{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.legend .dot{width:14px;height:14px;border-radius:.35rem;box-shadow:0 1px 2px rgba(15,23,42,.18)}
.legend .label{font-size:.9rem}

.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center}
.input,select{width:100%;padding:.6rem .8rem;border:1px solid var(--gray-300);border-radius:.6rem}
.block{display:block;width:100%}
.center{text-align:center}
.small{font-size:.85rem;color:var(--gray-600)}
.header .small{color:var(--yellow-50);font-weight:600}

.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9999;background:#fff;border:1px solid var(--gray-200);box-shadow:var(--shadow);padding:.8rem 1rem;border-radius:.8rem;display:none}
.toast.show{display:block}

.footer{background:var(--blue-900);color:#fff;margin-top:2rem}
.footer-inner{display:grid;gap:1.25rem;padding:1.25rem 0}
.footer a{color:#fff;text-decoration:none}

@media(max-width:720px){
  .nav{display:none}
  .hamb{display:inline-flex}
}
@media(min-width:721px){
  .hamb{display:none}
  .mobile-nav{display:none!important}
/* === Auth Modal additions === */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:9998}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);width:min(560px,92vw);padding:1rem;display:none;z-index:9999}
.modal.show,.modal-backdrop.show{display:block}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.tab{border:1px solid #e5e7eb;background:#f9fafb;border-radius:10px;padding:.4rem .7rem;cursor:pointer;font-weight:600}
.tab.active{background:#1E3A8A;color:#fff;border-color:#1E3A8A}
.tabpanel{display:none}
.tabpanel.show{display:block}

}