:root{
  --navy:#0b2545; --navy-2:#13315c; --navy-3:#1d4170;
  --accent:#1b9c85; --accent-2:#16a34a; --gold:#d4a017;
  --bg:#f4f6f9; --line:#e3e8ef; --muted:#6b7785;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:#1f2933}

/* ---------- Shell ---------- */
.atm-shell{display:flex;min-height:100vh}
.atm-sidebar{width:256px;background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#cdd7e4;
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;height:100vh;z-index:1030}
.atm-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-title{display:block;color:#fff;font-weight:700;font-size:1rem;line-height:1.1}
.brand-sub{display:block;font-size:.72rem;color:#8aa0bd}
.atm-nav{padding:.8rem .6rem;flex:1;overflow-y:auto}
.atm-nav .nav-link{color:#c2cee0;border-radius:8px;padding:.6rem .8rem;margin-bottom:.2rem;display:flex;align-items:center;gap:.6rem;font-size:.92rem}
.atm-nav .nav-link:hover{background:rgba(255,255,255,.07);color:#fff}
.atm-nav .nav-link.active{background:var(--accent);color:#fff;font-weight:600}
.nav-section{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#7e93b2;margin:.9rem .8rem .3rem}
.atm-sidebar-foot{padding:.8rem;border-top:1px solid rgba(255,255,255,.08)}

.atm-main{margin-left:256px;flex:1;display:flex;flex-direction:column;min-width:0;width:100%}
.atm-topbar{background:#fff;border-bottom:1px solid var(--line);padding:.7rem 1.4rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:1020}
.topbar-title{font-size:1.15rem;font-weight:700;margin:0;color:var(--navy);flex:1}
.topbar-user{display:flex;align-items:center;gap:.7rem}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700}
.atm-content{padding:1.4rem;flex:1}
.atm-foot{padding:.8rem 1.4rem;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line);background:#fff}

@media(max-width:991px){
  .atm-sidebar{transform:translateX(-100%);transition:.2s}
  .atm-sidebar.open{transform:none}
  .atm-main{margin-left:0}
}

/* ---------- Cards / stats ---------- */
.card{border:1px solid var(--line);border-radius:12px}
.card-header{background:#fff;border-bottom:1px solid var(--line);font-weight:600;color:var(--navy)}
.stat-card{display:flex;align-items:center;gap:1rem;padding:1.1rem;border-radius:12px;background:#fff;border:1px solid var(--line);height:100%}
.stat-ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;color:#fff;flex:none}
.stat-num{font-size:1.6rem;font-weight:700;line-height:1;color:var(--navy)}
.stat-lbl{font-size:.82rem;color:var(--muted)}
.bg-navy{background:var(--navy)!important}
.text-navy{color:var(--navy)!important}

/* hero */
.hero{background:linear-gradient(120deg,rgba(11,37,69,.92),rgba(27,156,133,.82)),url('../images/air-traffic-control.svg');
  background-size:cover;background-position:center;color:#fff;border-radius:14px;padding:1.6rem;margin-bottom:1.2rem}
.hero h2{font-weight:700;margin:0}

/* badges */
.badge-vip{background:linear-gradient(120deg,#b8860b,var(--gold));color:#1b1b1b;font-weight:700}

/* timeline */
.timeline{display:flex;gap:0;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.timeline li{flex:1;min-width:120px;text-align:center;position:relative;padding-top:30px;font-size:.78rem;color:var(--muted)}
.timeline li::before{content:'';position:absolute;top:10px;left:50%;width:100%;height:3px;background:var(--line)}
.timeline li:first-child::before{left:50%}
.timeline li:last-child::before{width:50%}
.timeline .dot{position:absolute;top:3px;left:50%;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#cbd5e1;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);z-index:2}
.timeline li.done .dot{background:var(--accent-2)}
.timeline li.done{color:var(--navy);font-weight:600}
.timeline li.current .dot{background:var(--gold)}

/* detail */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.6rem 1.4rem}
.detail-grid .k{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.detail-grid .v{font-weight:600;color:#1f2933}
.section-title{font-weight:700;color:var(--navy);border-left:4px solid var(--accent);padding-left:.6rem;margin:1.4rem 0 .7rem}

/* login */
.login-page{min-height:100vh;background-size:cover;background-position:center;position:relative;display:flex}
.login-overlay{position:absolute;inset:0;background:linear-gradient(120deg,rgba(11,37,69,.93),rgba(19,49,92,.85))}
.login-wrap{position:relative;z-index:2;margin:auto;width:100%;max-width:440px;padding:1.5rem}
.login-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login-head{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;text-align:center;padding:1.8rem 1rem 1.4rem}
.login-head h1{font-size:1.3rem;font-weight:700;margin:.6rem 0 0}
.login-head p{margin:.2rem 0 0;color:#9fb4d1;font-size:.85rem}
.login-body{padding:1.6rem}
.login-foot{padding:0 1.6rem 1.4rem;text-align:center}
.demo-accounts{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin-top:.4rem}
.demo-accounts span{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:.1rem .55rem;font-size:.72rem;color:var(--muted)}

@media print{
  .atm-sidebar,.atm-topbar,.atm-foot,.no-print{display:none!important}
  .atm-main{margin-left:0}
  .atm-content{padding:0}
  body{background:#fff}
}