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

        :root {
            --sky: #1a6bb5;
            --sky-dark: #0f4a80;
            --sky-light: #e8f3fc;
            --accent: #f0a500;
            --surface: #ffffff;
            --surface-2: #f6f8fb;
            --border: #e2e8f0;
            --text: #1e293b;
            --text-muted: #64748b;
            --danger: #ef4444;
            --success: #10b981;
            --nav-h: 64px;
            --radius: 10px;
        }

        body {
            font-family: 'DM Sans', sans-serif;
            background: var(--surface-2);
            color: var(--text);
            min-height: 100vh;
        }

        /* ── NAVBAR ────────────────────────────── */
        .navbar {
            position: sticky;
            top: 0;
            z-index: 100;
            height: var(--nav-h);
            background: var(--sky-dark);
            display: flex;
            align-items: center;
            padding: 0 2rem;
            gap: 2rem;
            box-shadow: 0 2px 12px rgba(0,0,0,.18);
        }

        .nav-brand {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 1.15rem;
            font-weight: 600;
            color: #fff;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: .5rem;
            white-space: nowrap;
        }
        .nav-brand .plane-icon { font-size: 1.3rem; }

        .nav-links {
            display: flex;
            align-items: center;
            gap: .25rem;
            flex: 1;
        }

        .nav-links a {
            color: rgba(255,255,255,.75);
            text-decoration: none;
            font-size: .875rem;
            font-weight: 500;
            padding: .45rem .9rem;
            border-radius: 6px;
            transition: background .15s, color .15s;
        }
        .nav-links a:hover, .nav-links a.active {
            background: rgba(255,255,255,.14);
            color: #fff;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: .75rem;
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: .5rem;
            color: rgba(255,255,255,.85);
            font-size: .875rem;
        }
        .nav-avatar {
            width: 32px; height: 32px;
            background: var(--accent);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: .75rem; font-weight: 600; color: #fff;
        }

        /* ── PAGE WRAPPER ──────────────────────── */
        .page {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1.5rem;
        }

        /* ── BUTTONS ───────────────────────────── */
        .btn {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .5rem 1.1rem;
            border: none; border-radius: var(--radius);
            font-family: inherit; font-size: .875rem; font-weight: 500;
            cursor: pointer; text-decoration: none;
            transition: opacity .15s, transform .1s;
        }
        .btn:hover { opacity: .88; transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }

        .btn-primary  { background: var(--sky);    color: #fff; }
        .btn-accent   { background: var(--accent);  color: #fff; }
        .btn-ghost    { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3); }
        .btn-danger   { background: var(--danger);  color: #fff; }
        .btn-success  { background: var(--success); color: #fff; }
        .btn-outline  { background: transparent; color: var(--sky); border: 1.5px solid var(--sky); }

        /* ── FLASH MESSAGES ────────────────────── */
        .flashes { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
        .flash {
            padding: .75rem 1rem; border-radius: var(--radius);
            font-size: .875rem; border-left: 4px solid;
        }
        .flash-error   { background: #fee2e2; color: #7f1d1d; border-color: var(--danger); }
        .flash-success { background: #d1fae5; color: #064e3b; border-color: var(--success); }
        .flash-warning { background: #fef3c7; color: #78350f; border-color: var(--accent); }
        .flash-info    { background: var(--sky-light); color: var(--sky-dark); border-color: var(--sky); }

        /* ── CARD ──────────────────────────────── */
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1.5rem;
        }

        /* ── FORM ELEMENTS ─────────────────────── */
        .form-group { display: flex; flex-direction: column; gap: .4rem; }
        label { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
        input[type="text"], input[type="email"], input[type="password"], select {
            padding: .65rem .9rem;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            font-family: inherit; font-size: .9rem;
            background: var(--surface);
            color: var(--text);
            transition: border-color .15s;
        }
        input:focus, select:focus { outline: none; border-color: var(--sky); }

        /* ── RESPONSIVE ────────────────────────── */
        @media (max-width: 640px) {
            .navbar { padding: 0 1rem; gap: 1rem; }
            .nav-links { display: none; }
            .page { padding: 1rem; }
        }