* { box-sizing: border-box; }
:root {
    --bg: #0f172a;
    --panel: #111827;
    --panel-soft: #182132;
    --line: #223049;
    --text: #e5eefc;
    --muted: #9fb0c9;
    --accent: #60a5fa;
    --accent-2: #1d4ed8;
    --success: #14532d;
    --error: #7f1d1d;
    --white: #fff;
    --radius: 18px;
    --shadow: 0 10px 30px rgba(0,0,0,.2);
}
html, body { margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color:var(--text); background:linear-gradient(180deg,#09101f,#0f172a); }
a { color:#93c5fd; text-decoration:none; }
a:hover { text-decoration:underline; }
h1, h2, h3 { margin:0 0 12px; line-height:1.2; }
p { margin:0 0 12px; }
code { font-family: Consolas, monospace; }
.app-shell { min-height:100vh; display:grid; grid-template-columns: 280px minmax(0,1fr); }
.sidebar { background:rgba(8,15,30,.92); border-right:1px solid var(--line); padding:24px 18px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.brand-badge, .hero-mark { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; font-weight:700; }
.nav { display:flex; flex-direction:column; gap:6px; }
.nav-link { padding:12px 14px; border-radius:12px; color:var(--text); background:transparent; display:block; }
.nav-link:hover { background:rgba(255,255,255,.05); text-decoration:none; }
.content { min-width:0; padding:24px; }
.topbar { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.topbar-meta, .actions, .signature-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.muted { color:var(--muted); font-size:.95rem; }
.alert { padding:14px 16px; border-radius:12px; margin-bottom:16px; border:1px solid transparent; }
.alert.success { background:rgba(20,83,45,.25); border-color:rgba(34,197,94,.3); }
.alert.error { background:rgba(127,29,29,.25); border-color:rgba(248,113,113,.3); }
.grid { display:grid; gap:16px; }
.grid.cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom:18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card, .stat-card, .guest-card { background:rgba(17,24,39,.92); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card { padding:18px; margin-bottom:18px; }
.stat-card { padding:18px; }
.stat-card .big { font-size:2rem; font-weight:700; }
.card-header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:16px; }
.card-header.compact { margin-bottom:10px; }
.table-wrap { overflow:auto; width:100%; }
table { width:100%; border-collapse:collapse; min-width:860px; }
th, td { border-bottom:1px solid var(--line); padding:12px 10px; text-align:left; vertical-align:top; }
th { font-size:.9rem; color:#bfd0e6; background:rgba(255,255,255,.02); }
label { display:block; margin-bottom:6px; color:#bfd0e6; font-size:.92rem; }
.field-help { margin-bottom:6px; }
.field-help-toggle { background:none; border:none; padding:0; margin:0; color:#bfd0e6; font-size:.92rem; font-weight:700; cursor:pointer; text-align:left; display:inline-flex; align-items:center; gap:8px; }
.field-help-toggle::after { content:'?'; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px; background:#1e3a8a; color:#fff; font-size:.72rem; }
.field-help-text { margin-top:8px; padding:10px 12px; border-radius:12px; background:#0b1930; border:1px dashed #34507a; color:#c6d4ea; font-size:.9rem; }
input, textarea, select { width:100%; padding:12px 14px; border:1px solid #334155; border-radius:12px; background:#0b1220; color:var(--text); }
input[readonly] { background:#101a2d; color:#dbeafe; }
textarea { resize:vertical; min-height:110px; }
button, .btn { border:0; border-radius:12px; padding:12px 16px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; }
button:hover, .btn:hover { opacity:.96; text-decoration:none; }
.btn-secondary { background:#24324a; }
.btn-small { padding:9px 12px; font-size:.9rem; }
.link-button { background:none; color:#93c5fd; padding:0; border:none; cursor:pointer; }
.tag { display:inline-flex; padding:6px 10px; border-radius:999px; background:#1e293b; color:#dbeafe; border:1px solid #314158; font-size:.85rem; }
.warn-tag { background:#3b2f09; border-color:#8b6d1f; color:#fde68a; }
.danger-tag { background:#3d1010; border-color:#7f1d1d; color:#fecaca; }
.muted-tag { opacity:.8; }
.notice { background:#0b1930; border:1px dashed #34507a; padding:12px; border-radius:12px; color:#c6d4ea; }
.stack { display:flex; flex-direction:column; gap:18px; }
.stack-tight { display:flex; flex-direction:column; gap:8px; }
.signature-pad { width:100%; min-height:180px; background:#fff; border:1px dashed #64748b; border-radius:12px; touch-action:none; }
.signature-grid img { max-width:100%; background:#fff; border-radius:12px; padding:8px; }
.existing-signature { display:flex; flex-direction:column; gap:8px; }
.aircraft-card { min-width:0; }
.guest-body { min-height:100vh; display:grid; place-items:center; padding:18px; }
.guest-wrap { width:min(100%, 720px); }
.guest-card { padding:26px; }
.code-block { background:#09101d; border:1px solid var(--line); padding:14px; border-radius:12px; white-space:pre-wrap; }
@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position:relative; height:auto; }
}
@media (max-width: 900px) {
    .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
    .topbar, .card-header { flex-direction:column; align-items:stretch; }
}
@media (max-width: 600px) {
    .content { padding:16px; }
    .sidebar { padding:16px; }
    .card, .guest-card, .stat-card { padding:14px; border-radius:16px; }
    button, .btn { width:100%; }
    .actions .btn, .actions button { width:auto; flex:1 1 180px; }
    table { min-width:720px; }
}