/* =====================================================================
   Funseekers · MyAccount stylesheet
   Locked onto the public brand stylesheet (/css/main.css):
     - Dark theme (--bg-dark)
     - Neon CTAs (cyan / magenta / yellow)
     - Oswald uppercase headings, Lato body
     - Solid-fill buttons that invert to outlined on hover
     - Smooth 0.3s transitions on every interactive element
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
    /* Brand colors (mirrored from /css/main.css so we can use either name) */
    --ma-cyan:        #00FFFF;
    --ma-magenta:     #FF00FF;
    --ma-yellow:      #FFFF00;
    --ma-blue:        #0A26C2;
    --ma-purple:      #8822F0;

    /* Dashboard surface palette (dark) */
    --ma-bg:          #0F0F0F;
    --ma-bg-2:        #161616;
    --ma-surface:     #1a1a1a;     /* card body */
    --ma-surface-2:   #20232a;     /* raised inputs etc. */
    --ma-line:        rgba(255,255,255,.10);
    --ma-line-strong: rgba(255,255,255,.20);

    /* Text */
    --ma-ink:         #F5F5F5;     /* primary on dark */
    --ma-ink-soft:    rgba(245,245,245,.62);
    --ma-ink-dim:     rgba(245,245,245,.42);

    /* Status (kept neon-friendly but legible) */
    --ma-ok:          #2ee59d;
    --ma-warn:        #ffc857;
    --ma-danger:      #ff5a6e;

    /* Legacy names left in some inline styles map to brand equivalents
       so we never end up with washed-out muted greys on a dark canvas. */
    --ma-brand:       var(--ma-cyan);
    --ma-accent:      var(--ma-magenta);
    --ma-accent-2:    var(--ma-yellow);

    /* Geometry */
    --ma-radius:      10px;
    --ma-radius-lg:   14px;
    --ma-shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
    --ma-glow-cyan:   0 0 0 1px rgba(0,255,255,.35), 0 0 22px rgba(0,255,255,.18);
    --ma-glow-pink:   0 0 0 1px rgba(255,0,255,.35), 0 0 22px rgba(255,0,255,.18);
    --ma-sidebar-w:   248px;
    --ma-trans:       all .3s ease;

    /* Fonts (re-declared so we can reference even outside main.css scope) */
    --ma-font-head:   'Oswald', sans-serif;
    --ma-font-body:   'Lato', sans-serif;
}

/* ---------------------------------------------------------------------
   2. Body + typography overrides (.ma-body raises specificity so the
   global resets in /css/main.css don't bleed into card content).
   ------------------------------------------------------------------ */
body.ma-body {
    margin: 0;
    /* /css/main.css applies `body { padding-top: var(--header-height); }`
       to push the public site's hero below its fixed .main-header.
       The myaccount layout doesn't render .main-header, so that
       padding shows up as an empty strip above .ma-topbar on every
       myaccount page. Cancel it here. */
    padding-top: 0;
    background: var(--ma-bg);
    color: var(--ma-ink);
    font-family: var(--ma-font-body);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
}

/* Subtle backdrop wash so the page doesn't feel flat */
body.ma-body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(1100px 540px at 12% -10%, rgba(0,255,255,.07), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(255,0,255,.06), transparent 60%),
        radial-gradient(700px 500px at 50% 110%, rgba(136,34,240,.05), transparent 60%);
    pointer-events: none;
}

.ma-body h1, .ma-body h2, .ma-body h3,
.ma-body h4, .ma-body h5, .ma-body h6 {
    font-family: var(--ma-font-head);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 .6em;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ma-ink);
}
.ma-body h1 { font-size: 28px; }
.ma-body h2 { font-size: 22px; }
.ma-body h3 { font-size: 17px; letter-spacing: .06em; }
.ma-body h4 {
    font-size: 12px; letter-spacing: .14em;
    color: var(--ma-ink-soft);
}
.ma-body p     { margin: 0 0 1em; }
.ma-body a     { color: var(--ma-cyan); text-decoration: none; transition: var(--ma-trans); }
.ma-body a:hover { color: var(--ma-yellow); }
.ma-body code  { color: var(--ma-yellow); background: rgba(255,255,0,.08); padding: 1px 6px; border-radius: 4px; font-size: 13px; }
.ma-body hr    { border: 0; border-top: 1px solid var(--ma-line); margin: 18px 0; }

/* ---------------------------------------------------------------------
   3. Top bar
   ------------------------------------------------------------------ */
.ma-topbar {
    background: linear-gradient(180deg, #050505 0%, #0d0d0d 100%);
    border-bottom: 1px solid var(--ma-line);
    position: sticky; top: 0; z-index: 30;
    box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.ma-topbar-inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px;
}
.ma-brand img       { height: 44px; display: block; filter: drop-shadow(0 0 6px rgba(0,255,255,.25)); }
.ma-mobile-toggle {
    display: none;
    background: transparent; border: 1px solid var(--ma-line-strong);
    border-radius: 6px; padding: 8px 12px; cursor: pointer;
    color: var(--ma-ink); font-size: 18px; transition: var(--ma-trans);
}
.ma-mobile-toggle:hover { border-color: var(--ma-cyan); color: var(--ma-cyan); }

.ma-user { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.ma-user-greet { color: var(--ma-ink-soft); font-size: 14px; font-family: var(--ma-font-body); }
.ma-user-greet strong { color: var(--ma-ink); font-weight: 700; }
.ma-user-link {
    color: var(--ma-ink-soft); font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: .08em;
    font-family: var(--ma-font-head);
    transition: var(--ma-trans);
}
.ma-user-link:hover            { color: var(--ma-cyan); text-decoration: none; }
.ma-user-link.ma-logout:hover  { color: var(--ma-magenta); }

/* ---------------------------------------------------------------------
   4. Shell + sidebar
   ------------------------------------------------------------------ */
.ma-shell {
    max-width: 1400px; margin: 0 auto;
    display: grid; grid-template-columns: var(--ma-sidebar-w) 1fr;
    gap: 24px; padding: 24px;
    align-items: start;
}
.ma-sidebar {
    background: linear-gradient(180deg, #131313 0%, #0d0d0d 100%);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius);
    padding: 10px 0;
    position: sticky; top: 88px;
    box-shadow: var(--ma-shadow);
}
.ma-nav { list-style: none; margin: 0; padding: 0; }
.ma-nav-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    color: var(--ma-ink-soft);
    font-family: var(--ma-font-head); font-weight: 400;
    text-transform: uppercase; letter-spacing: .06em;
    font-size: 13px;
    border-left: 3px solid transparent;
    transition: var(--ma-trans);
}
.ma-nav-link i { width: 18px; text-align: center; color: var(--ma-ink-dim); transition: var(--ma-trans); }
.ma-nav-link:hover {
    background: rgba(0,255,255,.06);
    color: var(--ma-cyan); text-decoration: none;
}
.ma-nav-link:hover i { color: var(--ma-cyan); }
.ma-nav-link.is-active {
    background: rgba(255,0,255,.08);
    color: var(--ma-ink);
    border-left-color: var(--ma-magenta);
}
.ma-nav-link.is-active i { color: var(--ma-magenta); }

.ma-help-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 14px 8px; padding: 12px 14px;
    background: var(--ma-magenta); color: #000 !important;
    border: 2px solid var(--ma-magenta);
    border-radius: 6px;
    font-family: var(--ma-font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    transition: var(--ma-trans);
}
.ma-help-cta:hover {
    background: transparent; color: var(--ma-magenta) !important;
    text-decoration: none;
    box-shadow: var(--ma-glow-pink);
}

.ma-main { min-width: 0; }

/* ---------------------------------------------------------------------
   5. Page header
   ------------------------------------------------------------------ */
.ma-page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 22px;
}
.ma-page-head h1 { color: var(--ma-ink); margin: 0; }
.ma-page-head .sub {
    color: var(--ma-ink-soft); margin: 6px 0 0;
    font-family: var(--ma-font-body); text-transform: none; letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   6. Cards + grids
   ------------------------------------------------------------------ */
.ma-card {
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius);
    padding: 22px;
    box-shadow: var(--ma-shadow);
    transition: var(--ma-trans);
}
.ma-card + .ma-card { margin-top: 18px; }
a.ma-card:hover {
    transform: translateY(-2px);
    border-color: var(--ma-cyan);
    box-shadow: 0 6px 32px rgba(0,255,255,.10), 0 1px 2px rgba(0,0,0,.5);
    text-decoration: none;
}
.ma-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 14px;
}
.ma-card-head h3 { margin: 0; color: var(--ma-yellow); }

.ma-grid { display: grid; gap: 18px; }
.ma-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ma-grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Stat tile (used on dashboard tiles via .ma-stat) ------------------- */
.ma-stat-num {
    font-family: var(--ma-font-head);
    font-size: 42px; line-height: 1; font-weight: 700;
    color: var(--ma-cyan);
    text-shadow: 0 0 18px rgba(0,255,255,.35);
}
.ma-stat-num.is-pink   { color: var(--ma-magenta); text-shadow: 0 0 18px rgba(255,0,255,.35); }
.ma-stat-num.is-yellow { color: var(--ma-yellow);  text-shadow: 0 0 18px rgba(255,255,0,.35); }

/* ---------------------------------------------------------------------
   7. Pills
   ------------------------------------------------------------------ */
.ma-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    font-family: var(--ma-font-head);
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--ma-line-strong);
    color: var(--ma-ink);
}
.ma-pill-ok     { color: var(--ma-ok);      border-color: rgba(46,229,157,.5); background: rgba(46,229,157,.10); }
.ma-pill-warn   { color: var(--ma-warn);    border-color: rgba(255,200,87,.5); background: rgba(255,200,87,.10); }
.ma-pill-danger { color: var(--ma-danger);  border-color: rgba(255,90,110,.5); background: rgba(255,90,110,.10); }
.ma-pill-info   { color: var(--ma-cyan);    border-color: rgba(0,255,255,.5);  background: rgba(0,255,255,.08); }

/* ---------------------------------------------------------------------
   8. Buttons — brand pattern: solid fill, hover inverts to outlined
   ------------------------------------------------------------------ */
.ma-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: 6px;
    font-family: var(--ma-font-head);
    font-weight: 700; font-size: 14px;
    text-transform: uppercase; letter-spacing: .08em;
    cursor: pointer;
    background: var(--ma-cyan); color: #000;
    border: 2px solid var(--ma-cyan);
    transition: var(--ma-trans);
    line-height: 1.2;
}
.ma-btn:hover {
    background: transparent; color: var(--ma-cyan);
    text-decoration: none;
    box-shadow: var(--ma-glow-cyan);
}

.ma-btn-accent          { background: var(--ma-magenta); color: #000; border-color: var(--ma-magenta); }
.ma-btn-accent:hover    { background: transparent; color: var(--ma-magenta); box-shadow: var(--ma-glow-pink); }
.ma-btn-yellow          { background: var(--ma-yellow);  color: #000; border-color: var(--ma-yellow); }
.ma-btn-yellow:hover    { background: transparent; color: var(--ma-yellow); box-shadow: 0 0 0 1px rgba(255,255,0,.4), 0 0 22px rgba(255,255,0,.2); }

.ma-btn-ghost {
    background: transparent; color: var(--ma-ink);
    border-color: var(--ma-line-strong);
}
.ma-btn-ghost:hover {
    background: transparent; color: var(--ma-cyan);
    border-color: var(--ma-cyan);
    box-shadow: var(--ma-glow-cyan);
}
.ma-btn-ghost.is-active { color: var(--ma-magenta); border-color: var(--ma-magenta); }

.ma-btn-block { width: 100%; justify-content: center; }
.ma-btn-lg    { padding: 14px 26px; font-size: 15px; }
.ma-btn-disabled, .ma-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ma-btn-disabled:hover, .ma-btn[disabled]:hover { box-shadow: none; background: var(--ma-cyan); color: #000; }

/* Anchor-button color overrides ---------------------------------------
   /css/main.css declares `a { color: var(--cta-cyan); }`, and our own
   `.ma-body a` rule (specificity 0,1,1) beats `.ma-btn` (0,1,0). That
   made every <a class="ma-btn"> render cyan text on a cyan background
   (invisible) until hover, when `.ma-body a:hover` flipped it to yellow.
   These selectors carry specificity (0,2,1) so they win cleanly for
   anchor buttons in all states. */
.ma-body a.ma-btn               { color: #000; }
.ma-body a.ma-btn:hover         { color: var(--ma-cyan); }
.ma-body a.ma-btn-accent        { color: #000; }
.ma-body a.ma-btn-accent:hover  { color: var(--ma-magenta); }
.ma-body a.ma-btn-yellow        { color: #000; }
.ma-body a.ma-btn-yellow:hover  { color: var(--ma-yellow); }
.ma-body a.ma-btn-ghost         { color: var(--ma-ink); }
.ma-body a.ma-btn-ghost:hover   { color: var(--ma-cyan); }

/* ---------------------------------------------------------------------
   9. Hero: Your Next Charter
   ------------------------------------------------------------------ */
.ma-hero {
    position: relative;
    background:
        radial-gradient(800px 360px at 0% 0%, rgba(0,255,255,.18), transparent 70%),
        radial-gradient(700px 360px at 100% 100%, rgba(255,0,255,.18), transparent 70%),
        linear-gradient(135deg, #08111e 0%, #0d0820 100%);
    color: var(--ma-ink);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-lg);
    padding: 32px;
    box-shadow: var(--ma-shadow);
    overflow: hidden;
}
.ma-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 0%, transparent 65%, rgba(0,255,255,.06) 100%);
    pointer-events: none;
}
.ma-hero > * { position: relative; z-index: 1; }
.ma-hero h1 { color: var(--ma-ink); margin: 0 0 6px; font-size: 36px; }
.ma-hero h4 { color: var(--ma-cyan); letter-spacing: .14em; margin: 0 0 8px; }
.ma-hero .ma-hero-sub { color: var(--ma-ink-soft); margin: 0; font-size: 16px; }

.ma-hero-grid {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px;
    margin-top: 24px;
}
.ma-hero-meta { display: grid; gap: 14px; }
.ma-hero-meta .row {
    display: flex; align-items: center; gap: 12px;
    color: var(--ma-ink);
}
.ma-hero-meta .row i { width: 18px; text-align: center; color: var(--ma-cyan); }
.ma-hero-meta .row strong { color: var(--ma-yellow); }
.ma-hero-actions {
    display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px;
}

/* Countdown */
.ma-countdown {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px; margin-top: 20px; max-width: 560px;
}
.ma-countdown div {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ma-line-strong);
    border-radius: 8px; padding: 14px 6px; text-align: center;
    transition: var(--ma-trans);
}
.ma-countdown div:hover { border-color: var(--ma-cyan); box-shadow: var(--ma-glow-cyan); }
.ma-countdown .num {
    font-family: var(--ma-font-head); font-size: 34px;
    font-weight: 700; line-height: 1; color: var(--ma-cyan);
    text-shadow: 0 0 18px rgba(0,255,255,.4);
}
.ma-countdown .lbl {
    font-family: var(--ma-font-head);
    font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
    color: var(--ma-ink-soft); margin-top: 6px;
}

/* Weather card inside hero */
.ma-weather-card {
    background: rgba(0,0,0,.30);
    border: 1px solid var(--ma-line-strong);
    border-radius: var(--ma-radius); padding: 18px;
    color: var(--ma-ink);
    transition: var(--ma-trans);
}
.ma-weather-card:hover { border-color: var(--ma-cyan); }
.ma-weather-card .top  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ma-weather-card .temp {
    font-family: var(--ma-font-head);
    font-size: 50px; line-height: 1; font-weight: 700;
    color: var(--ma-yellow); text-shadow: 0 0 18px rgba(255,255,0,.3);
}
.ma-weather-card .desc { text-transform: capitalize; color: var(--ma-ink-soft); }
.ma-weather-card .meta { display: flex; gap: 18px; margin-top: 14px; font-size: 13px; color: var(--ma-ink-soft); }
.ma-weather-card .meta span i { margin-right: 6px; color: var(--ma-cyan); }
.ma-weather-card.placeholder .icon { font-size: 42px; color: var(--ma-cyan); opacity: .8; }

/* Map */
.ma-map-card { padding: 0; overflow: hidden; }
.ma-map-card iframe { display: block; width: 100%; height: 260px; border: 0; filter: invert(.9) hue-rotate(180deg); }
.ma-map-card .foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 18px; border-top: 1px solid var(--ma-line);
    color: var(--ma-ink-soft); font-size: 14px;
    background: rgba(0,0,0,.25);
}
.ma-map-card .foot i { color: var(--ma-cyan); }

/* Status row inside hero */
.ma-status-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------------------------------------------------------------------
   10. Help banner
   ------------------------------------------------------------------ */
.ma-help-banner {
    margin-top: 28px;
    background:
        linear-gradient(120deg, rgba(255,0,255,.06), rgba(0,255,255,.05)),
        var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius); padding: 22px 26px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    box-shadow: var(--ma-shadow);
}
.ma-help-banner h3 { margin: 0; color: var(--ma-yellow); }
.ma-help-banner p  { margin: 4px 0 0; color: var(--ma-ink-soft); }

/* ---------------------------------------------------------------------
   11. Trip list cards
   ------------------------------------------------------------------ */
.ma-trip {
    display: grid; grid-template-columns: 220px 1fr auto; gap: 20px;
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius); padding: 16px;
    box-shadow: var(--ma-shadow); align-items: center;
    transition: var(--ma-trans);
}
.ma-trip:hover {
    border-color: var(--ma-cyan);
    transform: translateY(-2px);
    box-shadow: 0 6px 32px rgba(0,255,255,.08), 0 1px 2px rgba(0,0,0,.5);
}
.ma-trip + .ma-trip { margin-top: 14px; }
.ma-trip .img {
    width: 100%; height: 140px; border-radius: 8px; overflow: hidden;
    background: #0a0a0a; border: 1px solid var(--ma-line);
}
.ma-trip .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ma-trip .meta h3 { margin: 0 0 6px; color: var(--ma-ink); letter-spacing: .04em; }
.ma-trip .meta .when { color: var(--ma-ink-soft); font-size: 14px; }
.ma-trip .meta .pills { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.ma-trip .actions { display: flex; flex-direction: column; gap: 8px; }

/* ---------------------------------------------------------------------
   12. Tables
   ------------------------------------------------------------------ */
.ma-table { width: 100%; border-collapse: collapse; }
.ma-table th, .ma-table td {
    padding: 12px 14px; text-align: left;
    border-bottom: 1px solid var(--ma-line);
    vertical-align: middle;
}
.ma-table th {
    font-family: var(--ma-font-head);
    font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
    color: var(--ma-ink-soft);
    background: rgba(255,255,255,.025);
}
.ma-table tr:last-child td { border-bottom: 0; }
.ma-table tbody tr { transition: var(--ma-trans); }
.ma-table tbody tr:hover { background: rgba(0,255,255,.04); }
.ma-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.ma-empty {
    padding: 48px 20px; text-align: center; color: var(--ma-ink-soft);
}
.ma-empty i {
    font-size: 36px; margin-bottom: 12px; display: block;
    color: var(--ma-cyan); opacity: .55;
}
.ma-empty h3 { color: var(--ma-ink) !important; }

/* ---------------------------------------------------------------------
   13. Forms
   ------------------------------------------------------------------ */
.ma-form .field { margin-bottom: 18px; }
.ma-form label  {
    display: block;
    font-family: var(--ma-font-head); font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    font-size: 12px;
    margin-bottom: 8px; color: var(--ma-ink-soft);
}
.ma-form input[type="text"],
.ma-form input[type="email"],
.ma-form input[type="tel"],
.ma-form input[type="password"],
.ma-form input[type="number"],
.ma-form textarea, .ma-form select {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--ma-line-strong); border-radius: 6px;
    font: inherit; color: var(--ma-ink);
    background: var(--ma-surface-2);
    transition: var(--ma-trans);
}
.ma-form input::placeholder, .ma-form textarea::placeholder { color: var(--ma-ink-dim); }
.ma-form input:focus, .ma-form textarea:focus, .ma-form select:focus {
    outline: none; border-color: var(--ma-cyan);
    box-shadow: 0 0 0 3px rgba(0,255,255,.15);
    background: #0e1419;
}
.ma-form .help { color: var(--ma-ink-soft); font-size: 12px; margin-top: 6px; }
.ma-form input[readonly] { background: rgba(255,255,255,.04); color: var(--ma-ink-soft); }
.ma-form input[type="checkbox"] { accent-color: var(--ma-magenta); width: 16px; height: 16px; }

.ma-otp-input {
    text-align: center; letter-spacing: .5em;
    font-family: var(--ma-font-head); font-size: 28px !important;
    padding: 14px !important;
    color: var(--ma-yellow) !important;
}

/* ---------------------------------------------------------------------
   14. Auth pages
   ------------------------------------------------------------------ */
.ma-auth-shell {
    min-height: 100vh;
    background:
        radial-gradient(900px 460px at 20% 10%, rgba(0,255,255,.10), transparent 70%),
        radial-gradient(700px 460px at 80% 90%, rgba(255,0,255,.10), transparent 70%),
        linear-gradient(135deg, #050608 0%, #0a0814 100%);
    display: flex; align-items: center; justify-content: center; padding: 24px;
}
.ma-auth-card {
    background: var(--ma-surface);
    border: 1px solid var(--ma-line);
    border-radius: var(--ma-radius-lg);
    padding: 38px;
    width: 100%; max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,255,255,.08);
}
.ma-auth-card .brand        { text-align: center; margin-bottom: 22px; }
.ma-auth-card .brand img    { height: 56px; filter: drop-shadow(0 0 10px rgba(0,255,255,.3)); }
.ma-auth-card h2            { text-align: center; margin: 0 0 6px; color: var(--ma-magenta); }
.ma-auth-card .lede         { text-align: center; color: var(--ma-ink-soft); margin: 0 0 22px; }
.ma-auth-card .back         { text-align: center; margin-top: 18px; font-size: 13px; }
.ma-auth-card .back a       { color: var(--ma-cyan); }

/* ---------------------------------------------------------------------
   15. Flash messages
   ------------------------------------------------------------------ */
.ma-flash {
    border-radius: 6px; padding: 12px 14px; margin-bottom: 18px;
    border: 1px solid transparent; font-size: 14px;
    font-family: var(--ma-font-body);
}
.ma-flash-success { background: rgba(46,229,157,.08);  color: var(--ma-ok);     border-color: rgba(46,229,157,.4); }
.ma-flash-error   { background: rgba(255,90,110,.08);  color: var(--ma-danger); border-color: rgba(255,90,110,.4); }
.ma-flash-info    { background: rgba(0,255,255,.07);   color: var(--ma-cyan);   border-color: rgba(0,255,255,.4); }

/* ---------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------ */
.ma-footer {
    margin-top: 48px; border-top: 1px solid var(--ma-line);
    background: #060606;
}
.ma-footer-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 20px 24px; display: flex; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; color: var(--ma-ink-soft); font-size: 13px;
}
.ma-footer-links a { color: var(--ma-ink-soft); transition: var(--ma-trans); }
.ma-footer-links a:hover { color: var(--ma-cyan); }

/* ---------------------------------------------------------------------
   17. Print (invoice)
   ------------------------------------------------------------------ */
@media print {
    body.ma-body            { background: #fff !important; color: #000 !important; }
    body.ma-body::before    { display: none !important; }
    .ma-topbar, .ma-sidebar, .ma-footer, .ma-help-banner, .ma-help-cta,
    .ma-mobile-toggle, .ma-user, .no-print { display: none !important; }
    .ma-shell  { grid-template-columns: 1fr; padding: 0; }
    .ma-card   { box-shadow: none; border: 1px solid #ddd; background: #fff !important; color: #000 !important; }
    .ma-card-head h3, .ma-card h3, .ma-card h4 { color: #000 !important; }
    .ma-table th { background: #f4f4f4 !important; color: #000 !important; }
    .ma-pill   { color: #000 !important; border-color: #888 !important; background: transparent !important; }
}

/* ---------------------------------------------------------------------
   18. Responsive
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .ma-grid-3      { grid-template-columns: repeat(2, 1fr); }
    .ma-hero-grid   { grid-template-columns: 1fr; }
    .ma-hero h1     { font-size: 28px; }
}
@media (max-width: 768px) {
    .ma-shell           { grid-template-columns: 1fr; padding: 16px; }
    .ma-mobile-toggle   { display: inline-flex; }
    .ma-sidebar {
        position: fixed; left: -280px; top: 70px; bottom: 0; width: 260px;
        z-index: 40; transition: left .25s ease;
        border-radius: 0;
    }
    .ma-sidebar.is-open { left: 0; }
    .ma-grid-3, .ma-grid-2 { grid-template-columns: 1fr; }
    .ma-trip            { grid-template-columns: 1fr; }
    .ma-trip .img       { height: 200px; }
    .ma-user-greet      { display: none; }
    .ma-user-link span  { display: none; }
    .ma-countdown       { grid-template-columns: repeat(4, 1fr); }
    .ma-countdown .num  { font-size: 26px; }
    .ma-hero            { padding: 22px; }
}