/* ================================================================
   KUPAI — Mobile-First Design System
   Tokens → Reset → Viewport Architecture → Components → Motion
   ================================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
    /* Surfaces — stepped dark scale */
    --bg:       #070709;
    --sf1:      #111116;
    --sf2:      #18181f;
    --sf3:      #202028;

    /* Borders */
    --bd:       rgba(255,255,255,0.07);
    --bd-hi:    rgba(255,255,255,0.13);

    /* Brand */
    --red:      #f04038;
    --red-sub:  rgba(240,64,56,0.10);
    --red-glow: rgba(240,64,56,0.28);

    /* Semantic */
    --green:    #10d9a0;
    --green-sub:rgba(16,217,160,0.10);
    --amber:    #f59e0b;
    --amber-sub:rgba(245,158,11,0.10);

    /* Text */
    --t1: #f2f2f5;   /* primary   — ~10:1 on --bg */
    --t2: #7a7a8a;   /* secondary — ~4:1  */
    --t3: #36363f;   /* disabled  */

    /* Category Identity */
    --c-carnes:    #ff6b4a;
    --c-hamb:      #ffa94d;
    --c-mariscos:  #4db8ff;
    --c-pollos:    #ffd43b;
    --c-embutidos: #d946ef;
    --c-cerdo:     #f472b6;
    --c-salsas:    #2dd4bf;
    --c-pantrys:   #f97316;
    --c-toppings:  #a3e635;

    /* Spacing — 4px base grid */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 20px; --s6: 24px; --s7: 28px; --s8: 32px;

    /* Type Scale */
    --fxs:  11px;
    --fsm:  13px;
    --fmd:  15px;
    --flg:  18px;
    --fxl:  24px;
    --f2xl: 30px;
    /* Fluid quantity number — scales with viewport width */
    --fqty: clamp(26px, 6.5vw, 34px);

    /* Elevation */
    --e1: 0 1px  4px rgba(0,0,0,0.4);
    --e2: 0 4px  16px rgba(0,0,0,0.45);
    --e3: 0 12px 40px rgba(0,0,0,0.55);

    /* Motion */
    --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --out:     cubic-bezier(0.25, 1,    0.5,  1);
    --in:      cubic-bezier(0.5,  0,    0.75, 0);
    --tf: 110ms;   /* fast  */
    --tb: 200ms;   /* base  */
    --ts: 340ms;   /* slow  */

    /* Z-index */
    --z-bar:   10;
    --z-nav:   20;
    --z-toast: 100;

    /* Chrome heights (content portion, excluding safe areas) */
    --bar-h: 52px;
    --nav-h: 58px;
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0; padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    font-family: 'Outfit', sans-serif;
}

html { font-size: var(--fmd); }

body {
    background: var(--bg);
    color: var(--t1);
    /* Prevent rubber-band scroll past the view-root */
    overscroll-behavior: none;
    overflow: hidden;
    /* Subtle brand radial glow top-left */
    background-image:
        radial-gradient(ellipse 90% 40% at 0% -5%,
            rgba(240,64,56,0.07) 0%, transparent 55%);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ── App Bar ─────────────────────────────────────────────────── */
/* padding-top absorbs notch / Dynamic Island */
.app-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
    z-index: var(--z-bar);
    background: rgba(7,7,9,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bd);
}

.app-bar__row {
    height: var(--bar-h);
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 0 var(--s4);
}

.app-bar__logo {
    object-fit: contain;
    filter: drop-shadow(0 0 8px var(--red-glow));
}

.app-bar__title {
    font-size: var(--flg);
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--t1);
}

/* ── Viewport Architecture ───────────────────────────────────── */
/*
   view-root fills the space between app-bar and bottom-nav exactly.
   Each .view inside is an independent scroll container — no shared scroll.
   This is how native apps work: switching tabs preserves scroll position.
*/
.view-root {
    position: fixed;
    top:    calc(var(--bar-h) + env(safe-area-inset-top,    0px));
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    overflow: hidden;
}

.view-track {
    display: flex;
    width: 300%;
    height: 100%;
    will-change: transform;
    /* transition removed — Motion spring handles this */
}

/* Base view: used as a scroll container */
.view {
    width: 33.333%;
    height: 100%;
}

/* ─ Data views (Stocks, Historial): full-height scroll ─ */
.view--scroll {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: var(--s4) var(--s4) var(--s6);
}

/* ─ Form view (Registro): two-zone layout ─ */
.view--form {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/*
   sel-zone: scrollable upper half
   Contains area cards + product grid
   Grows to fill available space
*/
.sel-zone {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: var(--s4) var(--s4) var(--s2);
}

/*
   act-zone: pinned lower half
   Contains type toggle + qty + submit
   Always visible — user never loses context of the action
*/
.act-zone {
    flex-shrink: 0;
    padding: var(--s3) var(--s4) var(--s4);
    border-top: 1px solid var(--bd);
    background: var(--bg);
}

/* ── View Headers ────────────────────────────────────────────── */
.view-eyebrow {
    font-size: var(--fxs);
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--t2);
    margin-bottom: var(--s3);
}

.view-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s5);
}

.view-title {
    font-size: var(--f2xl);
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--t1);
}

.view-count {
    font-size: var(--fxs);
    font-weight: 700;
    color: var(--t2);
    letter-spacing: 0.5px;
}

/* ── Form Blocks ─────────────────────────────────────────────── */
.fblock {
    margin-bottom: var(--s5);
}

.fblock--row {
    margin-bottom: var(--s3);
}

.fblock.is-hidden {
    display: none;
}

.flabel {
    font-size: var(--fxs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--t2);
    margin-bottom: var(--s2);
}

/* ── Category Tiles ──────────────────────────────────────────── */
.cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}

.cat-tile {
    position: relative;
    min-height: 76px;
    padding: var(--s3) var(--s3) var(--s3) var(--s5);
    border-radius: 14px;
    background: var(--sf1);
    border: 1.5px solid var(--bd);
    color: var(--t2);
    font-weight: 700;
    font-size: var(--fmd);
    cursor: pointer;
    touch-action: manipulation;
    overflow: hidden;
    display: flex;
    align-items: center;
    text-align: left;
    transition:
        background var(--tb) var(--out),
        border-color var(--tb) var(--out),
        color var(--tb) var(--out),
        transform var(--tf) var(--out);
}

.cat-tile:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Category color stripe (left edge) */
.cat-tile__bar {
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    transition: height var(--tb) var(--out);
}

/* Category radial glow — top-right corner ambient light */
.cat-tile__glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--tb) var(--out);
}

/* Per-category color mappings */
.cat-tile[data-cat="carnes"]    .cat-tile__bar  { background: var(--c-carnes);    }
.cat-tile[data-cat="hamb"]      .cat-tile__bar  { background: var(--c-hamb);      }
.cat-tile[data-cat="mariscos"]  .cat-tile__bar  { background: var(--c-mariscos);  }
.cat-tile[data-cat="pollos"]    .cat-tile__bar  { background: var(--c-pollos);    }
.cat-tile[data-cat="embutidos"] .cat-tile__bar  { background: var(--c-embutidos); }
.cat-tile[data-cat="cerdo"]     .cat-tile__bar  { background: var(--c-cerdo);     }
.cat-tile[data-cat="salsas"]    .cat-tile__bar  { background: var(--c-salsas);    }
.cat-tile[data-cat="pantrys"]  .cat-tile__bar  { background: var(--c-pantrys);  }
.cat-tile[data-cat="toppings"] .cat-tile__bar  { background: var(--c-toppings); }

.cat-tile[data-cat="carnes"]    .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(255,107,74,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="hamb"]      .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(255,169,77,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="mariscos"]  .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(77,184,255,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="pollos"]    .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(255,212,59,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="embutidos"] .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(217,70,239,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="cerdo"]     .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(244,114,182,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="salsas"]    .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(45,212,191,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="pantrys"]  .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(249,115,22,0.18) 0%, transparent 55%); }
.cat-tile[data-cat="toppings"] .cat-tile__glow { background: radial-gradient(circle at 80% 20%, rgba(163,230,53,0.18) 0%, transparent 55%); }

.cat-tile__name { position: relative; pointer-events: none; }

.cat-tile:active { transform: scale(0.96); }

/* Hover: show glow, brighten text */
.cat-tile:hover {
    background: var(--sf2);
    border-color: var(--bd-hi);
    color: var(--t1);
}
.cat-tile:hover .cat-tile__glow { opacity: 0.5; }

/* Active selection: full glow, category-tinted border */
.cat-tile.active { color: var(--t1); }
.cat-tile.active .cat-tile__glow { opacity: 1; }

.cat-tile[data-cat="carnes"].active    { background: rgba(255,107,74,0.08);  border-color: rgba(255,107,74,0.30);  }
.cat-tile[data-cat="hamb"].active      { background: rgba(255,169,77,0.08);  border-color: rgba(255,169,77,0.30);  }
.cat-tile[data-cat="mariscos"].active  { background: rgba(77,184,255,0.08);  border-color: rgba(77,184,255,0.30);  }
.cat-tile[data-cat="pollos"].active    { background: rgba(255,212,59,0.08);  border-color: rgba(255,212,59,0.30);  }
.cat-tile[data-cat="embutidos"].active { background: rgba(217,70,239,0.08);  border-color: rgba(217,70,239,0.30);  }
.cat-tile[data-cat="cerdo"].active     { background: rgba(244,114,182,0.08);  border-color: rgba(244,114,182,0.30);  }
.cat-tile[data-cat="salsas"].active    { background: rgba(45,212,191,0.08);   border-color: rgba(45,212,191,0.30);   }
.cat-tile[data-cat="pantrys"].active  { background: rgba(249,115,22,0.08);   border-color: rgba(249,115,22,0.30);   }
.cat-tile[data-cat="toppings"].active { background: rgba(163,230,53,0.08);   border-color: rgba(163,230,53,0.30);   }

/* ── Product Grid ────────────────────────────────────────────── */
/* 2-column grid — better than wrap on mobile (predictable layout, thumb-friendly) */
.prod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
}

.prod-btn {
    min-height: 44px;  /* Apple HIG touch target minimum */
    padding: var(--s2) var(--s3);
    border-radius: 12px;
    background: var(--sf1);
    border: 1.5px solid var(--bd);
    color: var(--t2);
    font-size: var(--fsm);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    text-align: center;
    /* animation removed — Motion stagger handles entrance */
    transition:
        background var(--tb) var(--out),
        border-color var(--tb) var(--out),
        color var(--tb) var(--out),
        transform var(--tf) var(--out);
}

.prod-btn:hover  {
    background: var(--sf2);
    border-color: var(--bd-hi);
    color: var(--t1);
}

.prod-btn:active { transform: scale(0.94); }

.prod-btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.prod-btn.active {
    background: var(--red-sub);
    border-color: var(--red);
    color: var(--red);
}

/* Group headers span both columns (used by Pollos sub-groups) */
.prod-group {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s1) 0;
    margin-top: var(--s1);
    pointer-events: none;
    font-size: var(--fxs);
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t3);
}

.prod-group::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd);
}

/* ── Movement Toggle ─────────────────────────────────────────── */
.type-toggle {
    display: flex;
    background: var(--sf1);
    border: 1.5px solid var(--bd);
    border-radius: 14px;
    padding: var(--s1);
    gap: var(--s1);
}

.type-btn {
    flex: 1;
    min-height: 46px;
    border-radius: 11px;
    border: none;
    background: transparent;
    color: var(--t2);
    font-weight: 700;
    font-size: var(--fsm);
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    transition:
        background var(--tb) var(--out),
        color var(--tb) var(--out),
        transform var(--tf) var(--out);
}

.type-btn:active { transform: scale(0.97); }

.type-btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: -2px;
}

.type-btn[data-type="Ingreso"].active { background: var(--green-sub); color: var(--green); }
.type-btn[data-type="Egreso"].active  { background: var(--red-sub);   color: var(--red);   }

/* ── Quantity Counter ────────────────────────────────────────── */
.qty-ctrl {
    display: flex;
    align-items: center;
    background: var(--sf1);
    border: 1.5px solid var(--bd);
    border-radius: 18px;
    padding: var(--s2);
    gap: var(--s2);
}

.qty-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--sf2);
    color: var(--t1);
    cursor: pointer;
    touch-action: manipulation;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background var(--tf) var(--out),
        transform  var(--tf) var(--spring);
}

.qty-btn:hover   { background: var(--sf3); }
.qty-btn:active  { transform: scale(0.84); }

.qty-btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/*
   Editorial large number — the dominant element of the action zone.
   clamp() makes it fluid without breakpoints.
   font-variant-numeric: tabular-nums prevents layout shift when digits change.
*/
.qty-num {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    color: var(--t1);
    font-size: var(--fqty);
    font-weight: 700;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: var(--s1) 0;
    transition: transform var(--tf) var(--spring);
}

.qty-num::placeholder { color: var(--t3); }
.qty-num.bump         { transform: scale(1.1); }

/* ── Submit Button ───────────────────────────────────────────── */
.submit-btn {
    width: 100%;
    min-height: 54px;
    margin-top: var(--s3);
    border-radius: 16px;
    border: none;
    background: var(--red);
    color: #fff;
    font-weight: 800;
    font-size: var(--fmd);
    letter-spacing: 0.2px;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 6px 24px var(--red-glow);
    transition:
        background var(--tb) var(--out),
        box-shadow var(--tb) var(--out),
        transform  var(--tf) var(--out),
        opacity    var(--tb) var(--out);
}

.submit-btn:hover  { box-shadow: 0 10px 32px rgba(240,64,56,0.40); }
.submit-btn:active { transform: scale(0.98); }

.submit-btn:disabled {
    opacity: 0.40;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.submit-btn.ok {
    background: var(--green);
    box-shadow: 0 6px 24px rgba(16,217,160,0.30);
}

/* ── Stock List ──────────────────────────────────────────────── */

/* Category section heading */
.cat-head {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s4) 0 var(--s2);
    margin-top: var(--s2);
}

.cat-head:first-child { margin-top: 0; padding-top: 0; }

.cat-pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cat-pip--carnes    { background: var(--c-carnes);    }
.cat-pip--hamb      { background: var(--c-hamb);      }
.cat-pip--mariscos  { background: var(--c-mariscos);  }
.cat-pip--pollos    { background: var(--c-pollos);    }
.cat-pip--embutidos { background: var(--c-embutidos); }
.cat-pip--cerdo     { background: var(--c-cerdo);     }
.cat-pip--salsas    { background: var(--c-salsas);    }
.cat-pip--pantrys   { background: var(--c-pantrys);  }
.cat-pip--toppings  { background: var(--c-toppings); }

.cat-head-lbl {
    font-size: var(--fxs);
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--t2);
}

/* Stock row */
.stock-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--bd);
    min-height: 48px;
}

.stock-row:last-of-type { border-bottom: none; }

/* 3px left accent bar carries category identity — removes need for repeated headers */
.stock-bar {
    width: 3px;
    height: 28px;
    border-radius: 2px;
    flex-shrink: 0;
}

.stock-bar--carnes    { background: var(--c-carnes);    }
.stock-bar--hamb      { background: var(--c-hamb);      }
.stock-bar--mariscos  { background: var(--c-mariscos);  }
.stock-bar--pollos    { background: var(--c-pollos);    }
.stock-bar--embutidos { background: var(--c-embutidos); }
.stock-bar--cerdo     { background: var(--c-cerdo);     }
.stock-bar--salsas    { background: var(--c-salsas);    }
.stock-bar--pantrys   { background: var(--c-pantrys);  }
.stock-bar--toppings  { background: var(--c-toppings); }

.stock-name {
    flex: 1;
    font-size: var(--fsm);
    font-weight: 500;
    color: var(--t1);
    line-height: 1.35;
    min-width: 0;
}

/* font-variant-numeric prevents layout shift when values differ in digit count */
.stock-val {
    font-size: var(--flg);
    font-weight: 800;
    letter-spacing: -0.4px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 52px;
    text-align: right;
}

.stock-val--pos  { color: var(--green); }
.stock-val--neg  { color: var(--red);   }
.stock-val--warn { color: var(--amber); }  /* low stock 0–2 */

/* ── History List ────────────────────────────────────────────── */

/* Date group divider — like WhatsApp date headers */
.hist-date {
    font-size: var(--fxs);
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--t3);
    text-transform: uppercase;
    padding: var(--s5) 0 var(--s2);
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.hist-date::before,
.hist-date::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd);
}

.hist-date:first-child { padding-top: 0; }

.hist-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--bd);
    min-height: 54px;
}

.hist-row:last-of-type { border-bottom: none; }

/* Movement badge (circular) */
.hist-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1;
}

.hist-badge--in  { background: var(--green-sub); color: var(--green); }
.hist-badge--out { background: var(--red-sub);   color: var(--red);   }

.hist-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hist-product {
    font-size: var(--fmd);
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hist-info {
    display: flex;
    align-items: center;
    gap: var(--s2);
}

.hist-area {
    height: 17px;
    padding: 0 var(--s2);
    border-radius: 100px;
    background: var(--sf2);
    color: var(--t2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
}

.hist-val {
    font-size: var(--flg);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
    flex-shrink: 0;
    min-width: 48px;
    text-align: right;
}

/* ── Empty State ─────────────────────────────────────────────── */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--s8) var(--s7);
    gap: var(--s3);
}

.empty__icon { color: var(--t3); margin-bottom: var(--s2); }
.empty__title { font-size: var(--flg); font-weight: 700; color: var(--t2); }
.empty__sub   { font-size: var(--fsm); color: var(--t3); line-height: 1.6; max-width: 200px; }

/* ── Destructive Action ──────────────────────────────────────── */
/* Spatially separated from primary actions; subdued until hover (Apple HIG) */
.btn-danger {
    width: 100%;
    min-height: 44px;
    padding: var(--s3) var(--s4);
    margin-top: var(--s8);
    border-radius: 12px;
    border: 1.5px solid rgba(240,64,56,0.13);
    background: rgba(240,64,56,0.04);
    color: rgba(240,64,56,0.40);
    font-size: var(--fxs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        background    var(--tb) var(--out),
        border-color  var(--tb) var(--out),
        color         var(--tb) var(--out),
        transform     var(--tf) var(--out);
}

.btn-danger:hover  {
    background: rgba(240,64,56,0.09);
    border-color: rgba(240,64,56,0.27);
    color: var(--red);
}

.btn-danger:active { transform: scale(0.98); }

.btn-danger:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* ── Bottom Navigation ───────────────────────────────────────── */
/*
   padding-bottom absorbs home indicator (iPhone ≥ X).
   Height = visible content area + safe area.
*/
.bnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-nav);
    background: rgba(7,7,9,0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--bd);
    display: flex;
    align-items: stretch;
}

.bnav__btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
    transition: color var(--tb) var(--out);
    /* 44px minimum touch target height (within nav area) */
    min-height: 44px;
}

/* Top indicator line — scales in on active */
.bnav__btn::before {
    content: '';
    position: absolute;
    top: 4px; left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 24px; height: 2px;
    border-radius: 2px;
    background: var(--red);
    transition: transform var(--tb) var(--spring);
}

.bnav__btn.active        { color: var(--t1); }
.bnav__btn.active::before { transform: translateX(-50%) scaleX(1); }
.bnav__btn:active        { opacity: 0.6; }

.bnav__btn:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: -4px;
}

.bnav__icon {
    width: 22px;
    height: 22px;
    transition: transform var(--tf) var(--spring);
}

.bnav__btn.active .bnav__icon { transform: translateY(-1px); }

.bnav__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1px;
}

/* ── Toast ───────────────────────────────────────────────────── */
/* Centered via margin auto (avoids transform conflict with Motion) */
.toast {
    position: fixed;
    bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--s3));
    left: 0;
    right: 0;
    width: fit-content;
    margin: 0 auto;
    background: var(--sf2);
    border: 1.5px solid var(--bd-hi);
    border-radius: 100px;
    padding: 0.6rem 1.4rem;
    font-size: var(--fsm);
    font-weight: 700;
    color: var(--t1);
    backdrop-filter: blur(16px);
    box-shadow: var(--e3);
    z-index: var(--z-toast);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    /* no transition — Motion handles show/hide with spring */
}

.toast.success { border-color: var(--green); color: var(--green); }
.toast.error   { border-color: var(--red);   color: var(--red);   }

/* reveal-down keyframe removed — Motion handles element entrance */