:root { --bg:#0b0c0f; --ink:#e9eef5; --mut:#9aa1a8; --line:#2a2e36; --accent:#2f80ff; --danger:#ff5a5f;
 --seat:#1c2026; --adult:#2a3e5a; --child:#29442a; --lap:#4a2b37; --blocked:#52282b; --exit:#66b3ff; --exitBorder:#3399ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system, system-ui, 'SF Pro Text', Inter, Helvetica, Arial, sans-serif; }

.hdr { display:flex; justify-content:space-between; gap:12px; padding:12px 14px 6px; }
.title { font-weight:700; font-size:16px; letter-spacing:.2px; }
.sub { color:var(--mut); font-size:12px; margin-top:4px; }
.totals { display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; }
.totals > div { background:#14171c; border:1px solid var(--line); padding:6px 10px; border-radius:10px; color:var(--mut); }
.totals .big { color:var(--ink); font-weight:700; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }

.layout { display:grid; grid-template-columns: 1fr minmax(260px,380px) 40px; gap:12px; align-items:start; }
.legend { padding:8px 14px; }
.chip { display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid var(--line); margin-right:6px; font-size:12px; }
.chip.empty { color:var(--mut); }
.chip.adult { background:var(--adult); }
.chip.child { background:var(--child); }
.chip.lap { background:var(--lap); }
.chip.blocked { background:var(--blocked); }
.controls { display:flex; gap:8px; margin:10px 0; }
.controls button { flex:1; height:40px; border-radius:10px; background:#161a20; color:var(--ink); border:1px solid var(--line); font-weight:600; }
.controls .danger { border-color:#5a2a2a; }

.airframe { position:relative; margin:6px auto; width: 300px; background:linear-gradient(#111318,#151821); border:1px solid var(--line);
 border-radius:160px; padding:80px 16px; overflow:hidden; }
.nose, .tail { position:absolute; left:0; right:0; height:60px; }
.nose { top:0; background:radial-gradient(ellipse at top, #1d222b 0%, rgba(0,0,0,0) 70%); }
.tail { bottom:0; background:radial-gradient(ellipse at bottom, #1d222b 0%, rgba(0,0,0,0) 70%); }

.wing { position:absolute; width:120px; height:22px; background:#262c34; top:40%; border-radius:18px; opacity:.7; }
.wing.left { left:-90px; transform:rotate(-2deg); }
.wing.right { right:-90px; transform:rotate(2deg); }
.exit { position:absolute; width:14px; height:14px; border:2px solid #d8dbe2; border-radius:4px; }
.exit.left { left:4px; }
.exit.right { right:4px; }

.icon { position:absolute; left:8px; background:#161a20; border:1px solid var(--line); padding:4px 6px; border-radius:8px; font-size:14px; opacity:.9; }
.icon.lav { left:auto; right:8px; }

.grid { display:grid; grid-template-columns: 44px 16px 44px 44px; gap:8px 12px; justify-content:center; }
.rownums { display:grid; grid-auto-rows: 44px; gap:8px; padding-top:80px; }
.rownums .rn { color:var(--mut); font-size:12px; text-align:left; line-height:44px; }

.seat { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:8px;
 background:var(--seat); border:1px solid var(--line); position:relative; user-select:none; touch-action:manipulation; }
.seat .tag { position:absolute; bottom:2px; right:4px; font-size:9px; color:var(--mut); }
.seat.empty { opacity:.8; }
.seat.adult { background:var(--adult); }
.seat.child { background:var(--child); }
.seat.lap { background:var(--lap); }
.seat.blocked { background:var(--blocked); border-color:#6a373b; }
.seat.exitrow { background: var(--exit) !important; border-color: var(--exitBorder) !important; color:#000; }

.placeholder { width:44px; height:44px; opacity:.15; border:1px dashed var(--line); border-radius:8px; }

.rows { padding-right:10px; }
.foot { padding:8px 14px 16px; color:var(--mut); font-size:12px; text-align:center; }

/* Mobile tweaks */
@media (max-width: 420px){
  .layout { grid-template-columns: 1fr; }
  .legend { order: 2; }
  .rows { display:none; }
  .airframe { width: 92vw; max-width: 360px; }
}
/* iOS tap highlight */
button, .seat { -webkit-tap-highlight-color: transparent; }
