/* ============================================================
   ByteCraft design system  —  bytecraft.css
   ------------------------------------------------------------
   The house style for ByteCraft products (ABCPOS and siblings).

   Sibling of rak.css, not a fork of it: same structural bones —
   big radii, one diffuse shadow, Poppins + Nunito, Font Awesome,
   pill chips — with a different brand and one important
   difference in how the accent works.

   THE ACCENT IS YELLOW, AND YELLOW IS NOT PINK.

   A mid-pink carries white text and reads as text on a light
   surface. Yellow does neither. So this system splits the accent
   in two and you must pick the right one:

       --brand        the FILL. Bright. Always paired with
                      --on-brand (dark) text, never white.
       --brand-deep   the same brand, dark enough to BE text on a
                      light surface. Links, active nav, icons that
                      carry meaning, prices.

   Getting this backwards is the single most likely mistake with
   this theme, and it fails as an accessibility bug rather than as
   something that looks obviously wrong on the designer's monitor.

   Copy verbatim. App-specific additions go in a second file
   loaded after this one.
   ============================================================ */

:root {
    /* ── Brand ─────────────────────────────────────────────── */
    /* Sampled from bytecraft.live: a warm sandy amber, not a signal
       yellow. The difference matters - a saturated #FFC42E reads as a
       warning next to the semantic amber, this does not. */
    --brand:       #EFC069;   /* fill: buttons, logo tile, active pips   */
    --brand-deep:  #8C6216;   /* readable brand on a light surface       */
    --brand-tint:  #FDF3DF;   /* tinted brand surface                    */
    --on-brand:    #23200F;   /* text on a brand fill. 10.4:1 on --brand */
    --brand-ring:  rgba(239, 192, 105, .32);
    --brand-hover: #E0AC4A;

    /* ── Ink and surfaces ──────────────────────────────────────
       Deliberately not pure white. A till screen is bright, often
       under shop lighting, and somebody looks at it all day.
       How far these can go is set by --ink-soft on --card, which
       measures 4.64:1 here. Darker and secondary labels fail AA. */
    --ink:        #2C2C54;
    --ink-soft:   #6B6B8D;
    --bg:         #E6E3F0;
    --card:       #F5F3FA;
    --surface2:   #EAE7F3;
    --line:       #DCD9E8;

    /* ── Semantic ──────────────────────────────────────────────
       These carry meaning. Never decorative, and never the brand:
       yellow is ABCPOS, amber is "pending". If those two ever look
       the same on screen, one of them is being misused. */
    --mint:   #1FBF9C;  --mint-bg:   #E2F8F2;  --mint-line:  #BDEBDF;  --mint-ink:  #128B72;
    --amber:  #C2740A;  --amber-bg:  #FBEAD2;  --amber-line: #EFD3A8;  --amber-ink: #8A5308;
    --red:    #E04545;  --red-bg:    #FDECEC;  --red-line:   #F6C6C6;
    --blue:   #2D6FE0;  --blue-bg:   #E8F1FE;
    --purple: #8B5CF6;  --purple-bg: #F0EAFE;
    --orange: #F97316;  --orange-bg: #FEEBDD;

    --thead-bg:  #EFEDF7;
    --row-hover: #F0EEF8;
    --topbar-bg: rgba(245, 243, 250, .88);
    --glow1:     #FDF1DC;
    --glow2:     #E2DEF2;

    --r:    24px;
    --r-sm: 16px;
    --shadow:     0 10px 30px rgba(44, 44, 84, .08);
    --brand-glow: 0 8px 20px rgba(239, 192, 105, .34);

    /* Back-compat aliases so a component copied from a rak.css
       project keeps working. New markup should use the names
       above. */
    --pink: var(--brand); --pink-deep: var(--brand-deep);
    --blush: var(--brand-tint); --glow-pink: var(--brand-glow);
    --slate: var(--ink); --muted: var(--ink-soft); --border: var(--line);
    --danger: var(--red); --success: var(--mint); --warning: var(--amber);
    --surface: var(--card);
}

:root[data-theme="dark"] {
    --ink: #EDEDF7; --ink-soft: #A6A6C6;
    --bg: #131328; --card: #1D1D3A; --surface2: #27274B; --line: #2C2C50;

    /* On a dark surface the readable brand goes lighter, not
       darker. This is the line rak.css never needed. */
    --brand-deep: #F2C87E;
    --brand-tint: #3A2E14;

    --mint-bg: #12332A; --amber: #E8A33C; --amber-bg: #3A2D12; --amber-ink: #F0BE6B;
    --red: #F07575; --red-bg: #3B1B1E;
    --blue: #6D9BF2; --blue-bg: #182B4E;
    --orange: #F99A55; --orange-bg: #3D2716;
    --purple: #A98BF8; --purple-bg: #2A2148;

    --thead-bg: #232346; --row-hover: #252549; --topbar-bg: rgba(29, 29, 58, .85);
    --glow1: rgba(239, 192, 105, .12); --glow2: rgba(96, 96, 170, .16);
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Nunito', sans-serif;
    color: var(--ink);
    min-height: 100vh;
    font-size: 15px;
    background:
        radial-gradient(circle at 88% -10%, var(--glow1) 0%, transparent 52%),
        radial-gradient(circle at -12% 104%, var(--glow2) 0%, transparent 46%),
        var(--bg);
    transition: background .2s ease, color .2s ease;
}
h1, h2, h3, h4, .disp { font-family: 'Poppins', sans-serif; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

a { color: var(--brand-deep); }

/* ── Type helpers ─────────────────────────────────────────── */
.eyebrow, .card-title, .form-label {
    font-size: 11px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-soft);
}
.card-title { margin-bottom: 16px; }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ── Cards ────────────────────────────────────────────────── */
.card {
    background: var(--card); border-radius: 20px;
    border: 1px solid var(--line); box-shadow: var(--shadow);
    padding: 20px; margin-bottom: 18px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; text-decoration: none;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
    padding: 12px 20px; border-radius: 14px;
    transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }

/* Dark text on the fill. White here is roughly 1.6:1 — illegible. */
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--brand-glow); }
.btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.btn-primary:disabled { background: var(--surface2); color: var(--ink-soft); box-shadow: none; cursor: not-allowed; }

.btn-soft  { background: var(--brand-tint); color: var(--brand-deep); }
.btn-soft:hover { filter: brightness(.96); }
.btn-ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--surface2); }
.btn-danger { background: var(--red-bg); color: var(--red); border: 1.5px solid var(--red-line); }
.btn-danger:hover { filter: brightness(.97); }
.btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 11px; }
.btn-block { width: 100%; }

/* ── Chips & badges ───────────────────────────────────────── */
.chip, .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 800;
}
.chip.brand, .badge-brand   { background: var(--brand-tint); color: var(--brand-deep); }
.chip.mint,  .badge-success { background: var(--mint-bg);    color: var(--mint-ink); }
.chip.amber, .badge-warning { background: var(--amber-bg);   color: var(--amber-ink); }
.chip.red,   .badge-danger  { background: var(--red-bg);     color: var(--red); }
.badge-info    { background: var(--blue-bg);  color: var(--blue); }
.badge-neutral { background: var(--surface2); color: var(--ink-soft); }
.badge-purple  { background: var(--purple-bg); color: var(--purple); }
.badge-orange  { background: var(--orange-bg); color: var(--orange); }

/* ── Forms ────────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label { display: block; margin-bottom: 8px; }
.form-control {
    width: 100%; padding: 13px 16px;
    background: var(--card); border: 1.5px solid var(--line); border-radius: 14px;
    color: var(--ink); font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700;
    outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--ink-soft); opacity: .7; font-weight: 600; }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
.form-control[readonly], .form-control:disabled { opacity: .55; cursor: not-allowed; }
select.form-control { cursor: pointer; }
textarea.form-control { min-height: 90px; resize: vertical; }

.field {
    background: var(--card); border: 1.5px solid var(--line); border-radius: 18px;
    padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* brand-deep, not brand: a bright yellow glyph on a light card is
   under 2:1 and simply disappears. */
.field i { color: var(--brand-deep); font-size: 15px; width: 18px; text-align: center; }
.field input, .field select {
    border: 0; outline: 0; flex: 1; background: transparent;
    font-family: 'Nunito', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink);
}
.field input::placeholder { color: var(--ink-soft); opacity: .7; font-weight: 600; }
.field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; font-size: 13.5px; }
.switch input { display: none; }
.switch .track {
    width: 42px; height: 24px; border-radius: 999px; background: var(--surface2);
    border: 1px solid var(--line); position: relative; transition: background .18s ease;
    flex-shrink: 0;
}
.switch .track::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--card);
    box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease;
}
.switch input:checked + .track { background: var(--brand); border-color: var(--brand); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* ── Alerts ───────────────────────────────────────────────── */
.alert {
    padding: 13px 16px; border-radius: 14px; font-size: 13.5px; font-weight: 700;
    margin-bottom: 18px; display: flex; align-items: center; gap: 10px;
}
.alert-success { background: var(--mint-bg);  border: 1px solid var(--mint-line);  color: var(--mint-ink); }
.alert-danger  { background: var(--red-bg);   border: 1px solid var(--red-line);   color: var(--red); }
.alert-warning { background: var(--amber-bg); border: 1px solid var(--amber-line); color: var(--amber-ink); }
.alert-brand   { background: var(--brand-tint); border: 1px solid var(--brand); color: var(--brand-deep); }

/* ── Wordmark ─────────────────────────────────────────────── */
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wm-mark {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
    /* Bright end first so the dark glyph sits on the bright half. */
    background: linear-gradient(135deg, var(--brand), var(--brand-hover));
    color: var(--on-brand); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--brand-glow);
}
.wm-text {
    font-family: 'Poppins', sans-serif; font-weight: 600;
    font-size: 17px; color: var(--ink); letter-spacing: -.01em;
}
.wm-text b { font-weight: 700; color: var(--brand-deep); }
.wordmark-lg .wm-mark { width: 52px; height: 52px; border-radius: 18px; font-size: 21px; }
.wordmark-lg .wm-text { font-size: 26px; }

/* ── Theme toggle ─────────────────────────────────────────── */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border: 1.5px solid var(--line); border-radius: 13px;
    background: var(--card); color: var(--ink-soft); font-size: 15px; cursor: pointer;
    flex-shrink: 0; transition: transform .12s ease, color .15s ease;
}
.theme-toggle:hover { color: var(--brand-deep); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle.fab {
    position: fixed; top: 14px; right: 14px; z-index: 80;
    box-shadow: var(--shadow); border-radius: 50%; width: 44px; height: 44px;
}

/* ── List items ───────────────────────────────────────────── */
.list-item {
    background: var(--card); border-radius: 20px; padding: 15px;
    display: flex; align-items: center; gap: 13px;
    box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 12px;
}
.li-ic {
    width: 44px; height: 44px; border-radius: 15px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.li-ic.brand { background: var(--brand-tint); color: var(--brand-deep); }
.li-ic.mint  { background: var(--mint-bg);    color: var(--mint-ink); }
.li-ic.blue  { background: var(--blue-bg);    color: var(--blue); }
.li-ic.amber { background: var(--amber-bg);   color: var(--amber-ink); }
.li-ic.red   { background: var(--red-bg);     color: var(--red); }
.grow { flex: 1; min-width: 0; }

/* ── Status circle ────────────────────────────────────────── */
.check {
    width: 74px; height: 74px; border-radius: 50%;
    background: var(--mint-bg); color: var(--mint-ink); font-size: 30px;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.check.brand { background: var(--brand-tint); color: var(--brand-deep); }
.check.red   { background: var(--red-bg); color: var(--red); }

/* ── Info rows ────────────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; }
.info-row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.info-row:last-child { border-bottom: none; }
.info-row label { color: var(--ink-soft); font-weight: 700; }
.info-row span { font-weight: 800; }
.info-box {
    background: var(--brand-tint); border-radius: 16px; padding: 16px 18px;
    margin: 20px 0; font-size: 13.5px; color: var(--brand-deep);
}
.info-box strong { display: block; font-weight: 800; margin-bottom: 4px; }

/* ── Tables ───────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
    padding: 12px 14px; text-align: left; font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
    border-bottom: 1px solid var(--line); background: var(--thead-bg);
    position: sticky; top: 0;
}
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-weight: 600; }
.data-table tr:hover td { background: var(--row-hover); }
.data-table tr:last-child td { border-bottom: none; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination { display: flex; gap: 6px; align-items: center; margin-top: 20px; font-size: 13px; font-weight: 700; }
.page-link {
    padding: 7px 13px; border-radius: 11px; background: var(--card); color: var(--ink);
    text-decoration: none; border: 1.5px solid var(--line); transition: background .15s;
}
.page-link:hover { background: var(--surface2); }
.page-link.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.page-link.disabled { opacity: .4; pointer-events: none; }

/* ── Empty state ──────────────────────────────────────────── */
.empty { text-align: center; padding: 44px 20px; color: var(--ink-soft); }
.empty i { font-size: 30px; opacity: .35; display: block; margin-bottom: 12px; }
.empty p { font-size: 13.5px; font-weight: 700; }

/* ============================================================
   Staff shell: sidebar + topbar
   ============================================================ */

.sidebar {
    width: 248px; min-height: 100vh;
    background: var(--card); border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 10;
}
.sidebar-header { padding: 20px 18px 16px; border-bottom: 1px solid var(--line); }
.sidebar-header .logo { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sidebar-header .logo-icon {
    width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-hover));
    display: flex; align-items: center; justify-content: center;
    color: var(--on-brand); font-size: 17px; box-shadow: var(--brand-glow);
}
.sidebar-header .logo-text { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); }
.sidebar-header .logo-sub { font-size: 11px; font-weight: 700; color: var(--ink-soft);
                            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

.user-pill { background: var(--surface2); border-radius: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.user-avatar {
    width: 34px; height: 34px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #FFE7A8, var(--brand-tint));
    color: var(--brand-deep); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.user-role { font-size: 11px; font-weight: 700; color: var(--ink-soft); }

.sidebar-nav { flex: 1; padding: 12px; overflow-y: auto; }
.nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); padding: 16px 10px 7px; font-weight: 800; }
.nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: 13px; margin-bottom: 3px;
    color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--surface2); color: var(--ink); }
.nav-link.active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 800; }
.nav-link .icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.nav-link.active .icon { color: var(--brand-deep); }

.sidebar-footer { padding: 12px; border-top: 1px solid var(--line); }
.sidebar-footer a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
    color: var(--ink-soft); text-decoration: none; font-size: 13.5px; font-weight: 700;
    transition: background .15s, color .15s;
}
.sidebar-footer a:hover { background: var(--red-bg); color: var(--red); }

.main { margin-left: 248px; flex: 1; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 8;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 28px; border-bottom: 1px solid var(--line);
    background: var(--topbar-bg); backdrop-filter: blur(8px);
}
.topbar h1 { font-size: 17px; font-weight: 600; color: var(--ink); }
.topbar .breadcrumb { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.content { padding: 26px 28px; flex: 1; }

.menu-btn {
    display: none; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--line);
    background: var(--card); color: var(--ink); cursor: pointer; font-size: 15px;
}
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(44,44,84,.45); backdrop-filter: blur(2px); z-index: 9; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 20; box-shadow: 10px 0 40px rgba(44,44,84,.18); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.show { display: block; }
    .main { margin-left: 0; }
    .menu-btn { display: inline-flex; }
    .topbar { padding: 12px 14px; gap: 10px; }
    .topbar h1 { font-size: 15px; }
    .topbar .breadcrumb { display: none; }
    .content { padding: 14px; }
}

/* ── Stat tiles ───────────────────────────────────────────── */
.stat-row {
    display: grid; gap: 14px; margin-bottom: 18px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.stat {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 16px 18px; box-shadow: var(--shadow);
}
.stat .k {
    font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft); display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
}
.stat .v { font-family: 'Poppins', sans-serif; font-size: 25px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.stat .s { font-size: 12px; font-weight: 700; color: var(--ink-soft); margin-top: 5px; }
.stat.accent { border-color: var(--brand); box-shadow: var(--brand-glow); }

/* ── Section head ─────────────────────────────────────────── */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; flex-wrap: wrap; }
.section-head h2 { font-size: 16px; font-weight: 600; }

/* ── Toasts ───────────────────────────────────────────────── */
.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 9px; }
.toast {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: var(--shadow); padding: 13px 16px; min-width: 250px; max-width: 380px;
    display: flex; align-items: flex-start; gap: 11px;
    font-size: 13px; font-weight: 700; color: var(--ink);
    animation: bc-slide .3s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes bc-slide { from { opacity: 0; transform: translateX(20px); } }
.toast.ok i   { color: var(--mint-ink); }
.toast.bad i  { color: var(--red); }
.toast.warn i { color: var(--amber-ink); }

/* ── Spinner ──────────────────────────────────────────────── */
.spin {
    display: inline-block; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid rgba(35, 32, 15, .25); border-top-color: var(--on-brand);
    animation: bc-sp .6s linear infinite;
}
.btn-ghost .spin, .btn-soft .spin { border-color: var(--line); border-top-color: var(--brand-deep); }
@keyframes bc-sp { to { transform: rotate(360deg); } }

/* ── Modal ────────────────────────────────────────────────── */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(20, 20, 40, .55);
    backdrop-filter: blur(3px); z-index: 70;
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(0,0,0,.28); width: 100%; max-width: 560px;
    max-height: 88vh; overflow-y: auto; padding: 26px;
    animation: bc-rise .28s cubic-bezier(.2,.8,.3,1) both;
}
.modal.wide { max-width: 860px; }
@keyframes bc-rise { from { opacity: 0; transform: translateY(16px); } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-head h3 { font-size: 18px; font-weight: 600; }
.modal-head p { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }
.modal-close { background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }

/* ── Meter ────────────────────────────────────────────────── */
.meter { height: 7px; border-radius: 99px; background: var(--surface2); overflow: hidden; margin-top: 8px; }
.meter i { display: block; height: 100%; border-radius: 99px; background: var(--mint); transition: width .4s ease; }
.meter i.warn { background: var(--amber); }
.meter i.full { background: var(--red); }

/* ── Tabs ─────────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tab {
    padding: 10px 16px; border: 0; background: none; cursor: pointer;
    font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 800;
    color: var(--ink-soft); border-bottom: 2.5px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-deep); border-bottom-color: var(--brand); }