/* Type system: Noto Sans (latin) + Noto Sans Myanmar (Burmese) loaded
       from /css/fonts.css. No other fonts ship. */

    :root {
      /* Canonical palette - d1 alignment: warm cream sidebar/page wash,
         warm hairlines, Noto Sans + Noto Sans Myanmar, 6px button radius. */
      --primary: #F9B541; --primary-light: #FFF8E7; --primary-dark: #966600;
      --bg: #FBF7EC; --surface: #FFFFFF; --border: #E5E0D6;
      --error: #CC2020; --money-net: #1A6B28; --money-comm: #8B5000;
      --text: #1A1A1A; --text-2: #555555; --muted: #6E6E6E; --text-3: #999999;
      --font: 'Noto Sans', 'Noto Sans Myanmar', sans-serif;
      --radius: 12px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
      --shadow: 0 1px 2px rgba(20,20,30,.05), 0 5px 18px rgba(20,20,30,.07);
      --ease: cubic-bezier(.32,.72,0,1);
      --ease-bouncy: cubic-bezier(.34, 1.56, .64, 1);
      --t-fast: 120ms; --t-med: 180ms;
      /* Motion scale — matches the interaction spec timing table. */
      --motion-fast:      120ms;
      --motion-base:      180ms;
      --motion-slow:      280ms;
      --motion-emphatic:  400ms;
      /* Aliases used by checkin.html so a shared component drop-in works */
      --gold: var(--primary); --card: var(--surface);
      --green: var(--money-net); --red: var(--error); --blue: #3174BA;

      /* Unified button tokens - identical .btn block across admin + staff. */
      --btn-primary:        var(--primary);
      --btn-primary-ink:    var(--text);
      --btn-ghost-bg:       var(--surface);
      --btn-ghost-border:   var(--border);
      --btn-ghost-ink:      var(--text-2);
      --btn-danger:         var(--error);
      --btn-subtle-ink:     var(--muted);
      --btn-focus-ring:     0 0 0 3px rgba(249, 181, 65, .22);
      --btn-radius:         6px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; font-size:17px; }

    /* FOCUS RING (a11y, all interactive elements) */
    button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
    .nav-item:focus-visible, .lang-btn:focus-visible, .logout-btn:focus-visible,
    .pkg-num-input:focus-visible, .rc-pick-area:focus-visible, .rc-tab:focus-visible {
      outline: 3px solid rgba(249,181,65,0.55); outline-offset: 2px;
    }
    button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

    /* Reduced-motion: honour the OS preference. Strips all transforms +
       transitions but keeps opacity fades so state changes remain
       legible. Required by WCAG 2.3.3 and friendly to vestibular users. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Skeleton shimmer for loading rows */
    .skeleton { display:inline-block; vertical-align:middle; height:14px; background:linear-gradient(90deg,#eee 0%,#f5f5f5 50%,#eee 100%); background-size:200% 100%; border-radius:6px; animation:shimmer 1.4s ease-in-out infinite; }
    .skeleton.lg { height:18px; }
    .skeleton.sm { height:11px; }
    @keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

    /* Card hover/active polish - subtle lift */
    .run-item, .pkg-card { transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
    .run-item:active { transform: scale(0.985); }

    /* Pending-sync indicator on settlement rows — a small gold dot
       next to the shop name says "saved locally, server not yet
       confirmed". Cleared by the background syncPendingSettlements()
       sweep once the row reaches the server. */
    .pending-dot {
        display: inline-block;
        color: var(--primary);
        font-size: 14px;
        line-height: 1;
        margin-left: 4px;
        vertical-align: middle;
        animation: pendingPulse 1.6s ease-in-out infinite;
    }
    @keyframes pendingPulse {
        0%, 100% { opacity: 0.4; }
        50%      { opacity: 1; }
    }

    /* LOGIN */
    #login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .login-box { width: 100%; max-width: 380px; }
    .login-logo { text-align: center; margin-bottom: 28px; }
    .login-title { font-size: 22px; font-weight: 700; margin-top: 12px; color: var(--text); }
    .login-sub { font-size:16px; color: var(--text-2); margin-top: 4px; }
    /* d1: flat card, hairline border, no drop shadow. */
    .login-card { background: var(--surface); border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--border); }
    .login-error { background: #FFEBEE; color: var(--error); font-size: 14px; padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 14px; display: none; }
    .input-group { margin-bottom: 16px; }
    /* d1: sentence-case labels - drop uppercase + letter-spacing. */
    .input-label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; display: block; }
    .login-input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 400; padding: 10px 12px; outline: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
    .login-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249,181,65,0.22); }
    .login-input.error { border-color: var(--error); }
    /* ─────────────────────────────────────────────────────────────────────
       UNIFIED BUTTON SYSTEM - same declaration as css/admin.css and
       css/checkin.css. Three sizes (.btn--sm 28px / .btn 36px / .btn--lg
       44px), four intents (primary / .btn--ghost / .btn--danger /
       .btn--subtle). Legacy class names alias into the system below.
       ───────────────────────────────────────────────────────────────── */
    .btn,
    .login-btn,
    .btn-save,
    .modal-btn,
    .btn-rc-submit,
    .btn-primary,
    .btn-reset,
    .btn-rc-add,
    .btn-rc-new,
    .btn-del-batch,
    .btn-cancel-edit,
    .retry-btn {
      --_btn-h: 36px;
      --_btn-px: 16px;
      --_btn-py: 8px;
      --_btn-fs: 14px;
      --_btn-bg: var(--btn-primary);
      --_btn-fg: var(--btn-primary-ink);
      --_btn-border: var(--btn-primary);

      box-sizing: border-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: var(--_btn-h);
      padding: var(--_btn-py) var(--_btn-px);
      border: 1px solid var(--_btn-border);
      border-radius: var(--btn-radius);
      background: var(--_btn-bg);
      color: var(--_btn-fg);
      font-family: var(--font);
      font-size: var(--_btn-fs);
      font-weight: 500;
      line-height: 1.2;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
      transition:
        background-color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        filter var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
    }

    /* Sizes */
    .btn--sm { --_btn-h: 36px; --_btn-px: 12px; --_btn-py: 6px; --_btn-fs: 13px; }  /* 28→36, clears touch floor */
    .btn--lg,
    .login-btn,
    .btn-save,
    .btn-reset,
    .modal-btn,
    .btn-rc-submit,
    .btn-rc-add,
    .btn-rc-new { --_btn-h: 44px; --_btn-px: 20px; --_btn-py: 12px; --_btn-fs: 15px; }

    /* Intents */
    .btn--ghost,
    .btn-reset,
    .btn-rc-add,
    .btn-clear-all,
    .retry-btn {
      --_btn-bg: var(--btn-ghost-bg);
      --_btn-fg: var(--btn-ghost-ink);
      --_btn-border: var(--btn-ghost-border);
    }
    .btn--danger,
    .btn-cancel-edit,
    .btn-del-batch {
      --_btn-bg: transparent;
      --_btn-fg: var(--btn-danger);
      --_btn-border: var(--btn-danger);
    }
    .btn--subtle {
      --_btn-bg: transparent;
      --_btn-fg: var(--btn-subtle-ink);
      --_btn-border: transparent;
    }
    .btn--danger.is-confirming,
    .btn--danger.is-filled {
      background: var(--btn-danger);
      color: var(--surface);
    }

    /* States - hover */
    .btn:not(:disabled):not(.is-loading):hover,
    .login-btn:not(:disabled):not(.is-loading):hover,
    .btn-save:not(:disabled):not(.is-loading):hover,
    .modal-btn:not(:disabled):not(.is-loading):hover,
    .btn-rc-submit:not(:disabled):not(.is-loading):hover,
    .btn-primary:not(:disabled):not(.is-loading):hover { filter: brightness(1.04); }
    .btn--ghost:not(:disabled):not(.is-loading):hover,
    .btn-reset:not(:disabled):not(.is-loading):hover,
    .btn-rc-add:not(:disabled):not(.is-loading):hover,
    .retry-btn:not(:disabled):not(.is-loading):hover {
      filter: none;
      border-color: var(--btn-primary);
      color: var(--btn-primary-ink);
    }
    .btn--danger:not(:disabled):not(.is-loading):hover,
    .btn-cancel-edit:not(:disabled):not(.is-loading):hover,
    .btn-del-batch:not(:disabled):not(.is-loading):hover {
      filter: none;
      background: var(--btn-danger);
      color: var(--surface);
    }
    .btn--subtle:not(:disabled):not(.is-loading):hover {
      filter: none;
      color: var(--btn-primary-ink);
      background: rgba(0, 0, 0, .04);
    }

    /* States - active */
    .btn:not(:disabled):active,
    .login-btn:not(:disabled):active,
    .btn-save:not(:disabled):active,
    .modal-btn:not(:disabled):active,
    .btn-rc-submit:not(:disabled):active,
    .btn-primary:not(:disabled):active { transform: translateY(1px); filter: brightness(.94); }
    .btn--ghost:not(:disabled):active,
    .btn-reset:not(:disabled):active,
    .btn-rc-add:not(:disabled):active,
    .btn--subtle:not(:disabled):active { transform: translateY(1px); filter: none; }

    /* States - focus-visible */
    .btn:focus-visible,
    .login-btn:focus-visible,
    .btn-save:focus-visible,
    .modal-btn:focus-visible,
    .btn-rc-submit:focus-visible,
    .btn-primary:focus-visible {
      outline: none;
      box-shadow: var(--btn-focus-ring);
      border-color: var(--btn-primary);
    }

    /* States - disabled */
    .btn:disabled, .btn.is-disabled,
    .login-btn:disabled, .btn-save:disabled, .modal-btn:disabled, .btn-rc-submit:disabled,
    .btn-primary:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
      filter: none;
    }

    /* States - loading (spinner overlay, click target stays put) */
    .btn.is-loading,
    .login-btn.is-loading,
    .btn-save.is-loading,
    .modal-btn.is-loading,
    .btn-rc-submit.is-loading,
    .btn-primary.is-loading { position: relative; color: transparent !important; pointer-events: none; }
    .btn.is-loading::after,
    .login-btn.is-loading::after,
    .btn-save.is-loading::after,
    .modal-btn.is-loading::after,
    .btn-rc-submit.is-loading::after,
    .btn-primary.is-loading::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 14px; height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      border: 2px solid var(--_btn-fg);
      border-top-color: transparent;
      color: var(--_btn-fg);
      animation: btn-spin .6s linear infinite;
    }
    @keyframes btn-spin { to { transform: rotate(360deg); } }
    .btn--block { display: flex; width: 100%; }

    /* Per-call-site sizing override: login button stretches full width. */
    .login-btn { width: 100%; margin-top: 4px; }

    /* LOGIN - split layout. Phone/tablet: centered card (rules below). Desktop
       ≥1000px: two-column - brand hero on the left, form card on the right. */
    .login-hero { display: none; }
    .login-box-heading, .login-box-sub { display: none; }
    .login-main { width: 100%; display: flex; flex-direction: column; align-items: center; }

    @keyframes loginRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

    @media (min-width: 1000px) {
      #login-screen { padding: 0; align-items: stretch; justify-content: stretch; }

      .login-hero {
        display: flex; flex-direction: column; justify-content: center;
        flex: 1.1 1 0; position: relative; overflow: hidden;
        padding: 64px 72px;
        background:
          radial-gradient(130% 90% at 14% 6%, rgba(255,255,255,0.6), transparent 55%),
          linear-gradient(158deg, #FBC040 0%, #F9B541 48%, #E89A1C 100%);
      }
      /* Soft decorative orbs for depth - purely atmospheric. */
      .login-hero::before, .login-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
      .login-hero::before { width: 460px; height: 460px; right: -170px; top: -150px; background: rgba(255,255,255,0.18); }
      .login-hero::after  { width: 320px; height: 320px; left: -120px; bottom: -140px; background: rgba(0,0,0,0.045); }

      /* Logo pinned top-left like a wordmark; title block stays vertically centered. */
      .login-hero-logo { position: absolute; top: 48px; left: 72px; height: 58px; width: auto;
        z-index: 2; animation: loginRise .5s var(--ease) both; }

      .login-hero-inner { position: relative; z-index: 1; max-width: 500px; }
      .login-hero-kicker { font-size: 14px; font-weight: 600; color: var(--primary-dark); margin-bottom: 14px;
        animation: loginRise .5s var(--ease) .05s both; }
      .login-hero-title { font-size: 46px; font-weight: 700; line-height: 1.14;
        letter-spacing: -1px; color: #1A1A1A; animation: loginRise .5s var(--ease) .12s both; }
      .login-hero-sub { font-size: 18px; line-height: 1.65; color: rgba(0,0,0,0.6);
        margin-top: 18px; max-width: 430px; animation: loginRise .5s var(--ease) .19s both; }

      .login-main {
        flex: 1 1 0; align-items: center; justify-content: center;
        padding: 40px; background: var(--bg);
      }
      .login-box { animation: loginRise .5s var(--ease) .1s both; }
      .login-logo { display: none; }                                /* hero carries the branding */
      .login-lang { justify-content: flex-end; margin-bottom: 26px; }
      .login-box-heading { display: block; font-size: 26px; font-weight: 700;
        color: var(--text); letter-spacing: -0.4px; }
      .login-box-sub { display: block; font-size: 15px; color: var(--text-2);
        margin-top: 6px; margin-bottom: 22px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .login-hero-logo, .login-hero-title, .login-hero-sub, .login-hero-kicker,
      .login-box { animation: none !important; }
    }

    /* HEADER - d1: flat, hairline only. */
    .header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .header-left, .header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
    /* The title/subtitle wrapper must shrink too - without min-width:0 the
       nowrap title keeps full width, overflows, and the right-side cluster
       (badge / Admin / bell) draws on top of it on narrow screens. */
    .header-left > div, .header-brand > div { min-width: 0; }
    .header-logo { height: 36px; width: auto; display: block; flex-shrink: 0; }
    .header-title { font-size:17px; font-weight: 700; color: var(--text); white-space: nowrap; }
    .header-sub { font-size:14px; color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    /* d1: header pill - sentence-case label, 999px radius (it's a pill). */
    .header-badge { font-size: 12px; font-weight: 500; background: var(--primary-light); color: var(--primary-dark); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(249,181,65,0.35); white-space: nowrap; line-height: 1.4; display: inline-flex; align-items: center; }
    .logout-btn { font-size: 13px; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; cursor: pointer; font-family: var(--font); transition: all 0.15s; white-space: nowrap; line-height: 1.4; min-height: 32px; display: inline-flex; align-items: center; }
    .logout-btn:hover { color: var(--error); border-color: var(--error); }

    /* LANGUAGE TOGGLE - pill (999px) per d1 brand spec. */
    .lang-toggle { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
    .lang-btn { padding: 4px 14px; font-size: 13px; font-weight: 500; color: var(--text-2); font-family: var(--font); background: none; border: none; cursor: pointer; white-space: nowrap; transition: all 0.15s; line-height: 1.4; min-height: 28px; }
    .lang-btn.active { background: var(--primary); color: var(--text); }

    /* MAIN */
    .main { max-width: 640px; margin: 0 auto; padding: 16px; }
    .hidden { display: none !important; }
    /* Admin-only links: hidden until JS marks the body .is-admin. A plain
       display:none !important here would beat the JS reveal entirely. */
    body:not(.is-admin) .admin-only { display: none; }

    /* SHOP SELECTOR */
    /* d1: flat card. */
    .shop-selector { background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; border: 1px solid var(--border); }
    .primary-shop-hint { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--primary-dark); letter-spacing: .02em; }
    /* d1: sentence-case labels. */
    .label { font-size: 13px; font-weight: 500; color: var(--text); margin-bottom: 6px; display: block; }
    select, input[type="number"], input[type="text"] { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: var(--font); font-size: 14px; font-weight: 400; padding: 10px 12px; outline: none; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); appearance: none; -webkit-appearance: none; }
    select:focus, input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(249,181,65,0.22); }

    /* PROGRESS STRIP */
    .progress-strip { height: 3px; background: var(--border); border-radius: 2px; margin: 10px 0 16px; overflow: hidden; }
    .progress-fill { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.4s ease; }

    /* Day-done card. Visible once every shop on the catalogue has a
       settlement for today — closes the loop on the sales loop so
       the officer knows the day's work is logged. */
    .day-done-card { display:flex; align-items:center; gap:14px;
        background: #E8F5E9; border:1px solid #B9DBC0; border-radius: var(--r-md);
        padding: 14px 16px; margin: 8px 0 16px; }
    .day-done-card .dd-icon { width:36px; height:36px; border-radius:50%;
        background:#1A6B28; color:#fff; display:flex; align-items:center;
        justify-content:center; font-weight:800; font-size:18px; flex-shrink:0; }
    .day-done-card .dd-body { flex:1; min-width:0; }
    .day-done-card .dd-title { font-size:16px; font-weight:700; color:#1A6B28; }
    .day-done-card .dd-stats { font-size:13px; color:#1A6B28; margin-top:2px; }
    .day-done-card .dd-cta { font-size:14px; font-weight:600; color:#1A6B28;
        text-decoration:none; padding:8px 12px; border:1px solid #1A6B28;
        border-radius: var(--r-sm); white-space:nowrap; }

    /* PACKAGE CARDS */
    #pkg-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
    /* d1: flat hero card - subtle elevation via gradient only. */
    .pkg-card { border-radius: var(--r-lg); background: linear-gradient(145deg, #F9B541 0%, #FBC040 100%); overflow: hidden; }
    .pkg-card-top { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
    .pkg-name { font-size:17px; font-weight: 700; color: #000; }
    .pkg-price-badge { font-size:15px; font-weight: 700; background: rgba(0,0,0,0.10); color: #000; padding: 8px 10px 4px 10px;  border-radius: 20px; line-height: 1.3; }
    .pkg-inputs-row { padding: 0 16px 12px; display: grid; grid-template-columns: 1fr 24px 1fr; align-items: end; gap: 8px; }
    /* Inside the gold hero card - sentence-case for legibility. */
    .pkg-input-lbl { font-size: 12px; font-weight: 600; color: rgba(0,0,0,0.6); margin-bottom: 5px; }
    .pkg-num-input { background: rgba(255,255,255,0.90) !important; border: 1.5px solid rgba(255,255,255,0.95) !important; border-radius: var(--r-sm) !important; color: #000 !important; font-family: var(--font) !important; font-size: 24px !important; font-weight: 700 !important; padding: 8px 10px 3px 10px !important; text-align: center !important; width: 100% !important; transition: border-color 0.15s, background 0.15s !important; }
    .pkg-num-input:focus { border-color: rgba(0,0,0,0.30) !important; background: rgba(255,255,255,0.98) !important; outline: none !important; }
    .pkg-num-input.error { border-color: var(--error) !important; }
    .pkg-input-arrow { font-size:17px; color: rgba(0,0,0,0.30); text-align: center; padding-bottom: 8px; }
    .pkg-result-block { background: rgba(255,255,255,0.92); margin: 0 10px 10px; border-radius: 10px; padding: 11px 13px; }
    .pkg-result-empty { text-align: center; color: rgba(0,0,0,0.40); font-size:15px; padding-top: 4px; }
    .pkg-sold-hero { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
    .pkg-sold-num { font-size: 28px; font-weight: 700; color: #000; line-height: 1; }
    .pkg-sold-lbl { font-size:15px; color: rgba(0,0,0,0.50); font-weight: 400; }
    .pkg-fin-table { display: flex; flex-direction: column; gap: 5px; }
    .pkg-fin-row { display: flex; justify-content: space-between; align-items: center; font-size:16px; }
    .pkg-fin-label { color: #000; font-weight: 400; }
    .pkg-fin-val { font-weight: 700; color: #000; }
    .pkg-fin-row.comm .pkg-fin-label { color: var(--money-comm); }
    .pkg-fin-row.comm .pkg-fin-val { color: var(--money-comm); }
    .pkg-fin-divider { height: 1px; background: rgba(0,0,0,0.10); margin: 3px 0; }
    .pkg-fin-row.net .pkg-fin-label { color: var(--money-net); font-weight: 700; }
    .pkg-fin-row.net .pkg-fin-val { color: var(--money-net); font-size:17px; font-weight: 700; }

    /* SUMMARY */
    /* d1: flat card. */
    .summary { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--border); display: none; }
    .summary.visible { display: block; }
    .sum-hero { background: var(--money-net); padding: 20px; text-align: center; }
    /* d1: sentence-case (still on green hero). */
    .sum-hero-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.8); margin-bottom: 6px; }
    .sum-hero-val { font-size: 38px; font-weight: 700; color: #fff; letter-spacing: -1px; line-height: 1; }
    .sum-hero-cur { font-size:18px; font-weight: 400; opacity: 0.75; margin-left: 5px; }
    .sum-breakdown { padding: 14px 18px; border-bottom: 1px solid var(--border); }
    .sum-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size:17px; }
    .sum-row-label { color: var(--text); font-weight: 400; }
    .sum-row-val { font-weight: 700; color: var(--text); }
    .sum-divider { height: 1px; background: var(--border); margin: 5px 0; }
    .sum-row.comm .sum-row-val { color: var(--money-comm); }
    .sum-row.net .sum-row-label { font-weight: 700; }
    .sum-row.net .sum-row-val { color: var(--money-net); font-size:17px; font-weight: 700; }
    .sum-pay-box { background: var(--primary-light); padding: 13px 18px; border-bottom: 1px solid rgba(249,181,65,0.25); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .sum-pay-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
    .sum-pay-sub { font-size:14px; color: var(--text-2); }
    .sum-pay-amount { font-size: 22px; font-weight: 700; color: var(--money-comm); white-space: nowrap; }
    .sum-footer { padding: 13px 14px; display: flex; align-items: center; gap: 10px; }
    .sum-stat { font-size: 13px; font-weight: 500; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 4px 14px; border-radius: 999px; white-space: nowrap; line-height: 1.4; min-height: 28px; display: inline-flex; align-items: center; }
    /* .btn-save is sized + styled by the unified .btn block above; this row
       just stretches it inside the .sum-footer grid. */
    .btn-save { flex: 1; }
    /* .btn-reset inherits ghost styling from the .btn block. Hover lifts the
       border to error red instead of brand. */
    .btn-reset:hover { border-color: var(--error); color: var(--error); }

    /* RUN LOG */
    .run-section { margin-top: 24px; }
    .run-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
    .run-title-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .run-title { font-size:17px; font-weight: 700; color: var(--text); }
    .run-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    .hist-filter { width: auto; min-width: 130px; padding: 8px 30px 4px 12px; font-size:15px !important; font-weight: 700 !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; line-height: 1.2 !important; }
    .btn-clear-all { font-size:15px; font-weight: 700; color: var(--error); background: none; border: none; cursor: pointer; padding: 4px 8px; font-family: var(--font); line-height: 1; min-height:44px; display:inline-flex; align-items:center; }
    /* d1: flat card. */
    .totals-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .total-item { text-align: center; }
    /* d1: sentence-case. */
    .total-item-label { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
    .total-item-val { font-size:17px; font-weight: 700; color: var(--text); }
    .total-item-val.green { color: var(--money-net); }
    .total-item-val.gold { color: var(--money-comm); }
    /* d1: flat card. */
    .run-item { background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: border-color 0.15s; }
    .run-item:hover { border-color: var(--primary); }
    .run-item-shop { font-size:17px; font-weight: 700; color: var(--text); }
    .run-item-meta { font-size:14px; color: var(--text-2); margin-top: 3px; }
    .run-item-right { text-align: right; }
    .run-item-net { font-size:18px; font-weight: 700; color: var(--money-net); }
    .run-item-detail { font-size:14px; color: var(--money-comm); margin-top: 3px; font-weight: 700; }

    /* MODAL */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
    .modal-overlay.hidden { display: none; }
    .modal-sheet { background: var(--surface); border-radius: 20px 20px 0 0; padding: 24px 20px 40px; width: 100%; max-width: 600px; animation: sheetUp 0.25s ease; }
    @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 20px; }
    .modal-shop-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
    .modal-time { font-size:15px; color: var(--text-2); margin-bottom: 20px; }
    .receipt-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size:16px; }
    .receipt-row:last-of-type { border-bottom: none; }
    .receipt-row.total { font-weight: 700; font-size:18px; padding-top: 14px; border-top: 2px solid var(--border); border-bottom: none; margin-top: 4px; }
    .r-label { color: var(--text-2); }
    .r-val { font-weight: 700; color: var(--text); }
    .r-val.green { color: var(--money-net); font-size: 20px; }
    .r-val.gold { color: var(--money-comm); }
    .modal-btn { width: 100%; padding: 14px 18px; margin-top: 20px; font-size:17px; }

    /* TOAST */
    .toast { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: #1a1a1a; color: #fff; font-size:16px; font-weight: 700; padding: 12px 20px; border-radius: 24px; z-index: 999; box-shadow: 0 4px 20px rgba(0,0,0,.25); animation: toastIn 0.2s ease; font-family: var(--font); line-height: 1; max-width: calc(100vw - 32px); text-align: center; }
    @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
    .empty { text-align: center; padding: 32px 20px; color: var(--text-3); }
    .empty-icon { font-size: 32px; margin-bottom: 10px; }
    .empty-text { font-size:16px; font-weight: 400; }
    .retry-btn { margin-top: 12px; padding: 7px 16px; border-radius: 8px; border: 1px solid var(--border); background: none; font-family: var(--font); font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; }
    .retry-btn:hover { border-color: var(--primary); }

    /* LEGAL NOTICE */
    .login-lang { display: flex; justify-content: center; margin-bottom: 18px; }
    .login-lang-toggle { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
    .login-lang-btn { padding: 5px 14px; font-size:14px; font-weight: 700; color: var(--text-2); font-family: var(--font); background: none; border: none; cursor: pointer; transition: all .15s; line-height: 1; }
    .login-lang-btn.active { background: var(--primary); color: var(--text); }
    .legal-notice { width: 100%; max-width: 380px; margin-top: 14px; background: #FFFBF0; border: 1px solid rgba(249,181,65,.45); border-radius: 12px; padding: 14px 16px; }
    .legal-header { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
    .legal-icon { font-size:17px; flex-shrink: 0; }
    .legal-title { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .legal-body { font-size: 13px; color: #555; line-height: 1.55; }
    .legal-divider { height: 1px; background: rgba(249,181,65,.35); margin: 8px 0; }
    @media (max-width: 480px) {
      .legal-notice { padding: 12px 14px; margin-top: 12px; }
      .legal-title  { font-size: 14px; }
      .legal-body   { font-size: 12.5px; line-height: 1.5; }
      .legal-icon   { font-size: 15px; }
    }

    /* RESPONSIVE */
    @media (min-width: 640px) {
      .main { max-width: 960px; padding: 20px 24px; }
      #pkg-cards { grid-template-columns: 1fr 1fr; }
      .summary, .run-section { max-width: 640px; margin-left: auto; margin-right: auto; }
    }
    @media (min-width: 1024px) { .main { padding: 28px 32px; } }
    @media (max-width: 640px) {
      .main { padding: 12px; }
      .pkg-sold-num { font-size: 24px; }
      .sum-hero-val { font-size: 30px; }

      /* Header - keep the right cluster from overlapping the brand. */
      .header { padding: 10px 14px; gap: 6px; }
      .header-right { gap: 4px; }
      .header-left, .header-brand { min-width: 0; flex: 1 1 auto; }
      .header-title { font-size:16px; overflow: hidden; text-overflow: ellipsis; }
      .lang-btn { padding: 7px 9px; }
    }
    @media (max-width: 420px) {
      #login-screen { padding: 16px 14px; align-items: flex-start; padding-top: 40px; }
      .login-logo { margin-bottom: 20px; }
      .login-logo img { height: 76px !important; }
      .login-title { font-size: 20px; }
      .login-card { padding: 20px 16px; }

      /* Very narrow phones: drop low-value chrome so the lang toggle
         + hamburger have breathing room. */
      .header-sub   { display: none; }
      .header-badge { display: none; }
      .lang-btn { padding: 7px 8px; font-size:13px; }
    }
    /* EDIT MODE */
    .edit-mode-bar { display:none; background:#FFF8E7; border:1.5px solid var(--primary); border-radius:var(--r-md); padding:10px 14px; margin-bottom:12px; align-items:center; justify-content:space-between; gap:8px; }
    .edit-mode-bar.visible { display:flex; }
    .edit-mode-shop { font-size:15px; font-weight:700; color:var(--text); flex:1; min-width:0; }
    .btn-cancel-edit { font-size:14px; font-weight:700; color:var(--error); background:none; border:1px solid var(--error); border-radius:20px; padding:5px 12px; cursor:pointer; font-family:var(--font); line-height:1; white-space:nowrap; }
    .btn-edit-entry { background:none; border:none; cursor:pointer; padding:6px 8px; font-size:16px; color:var(--text-2); font-family:var(--font); border-radius:6px; transition:background 0.1s; flex-shrink:0; margin-left:6px; }
    .btn-edit-entry:hover { background:var(--primary-light); }
    /* RETURN CODES */
    .rc-section { margin-top: 28px; padding-bottom: 16px; }
    .rc-pick-area {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 8px;
      border: 2px dashed var(--border); border-radius: var(--r-lg);
      padding: 32px 20px;
      background: var(--surface);
      text-align: center; cursor: pointer; user-select: none;
      transition: border-color .18s ease, background .18s ease, transform .12s ease, box-shadow .18s ease;
    }
    .rc-pick-area:hover { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 4px 16px rgba(249,181,65,0.12); }
    .rc-pick-area:active { transform: scale(0.99); border-color: var(--primary-dark); background: var(--primary-light); }
    .rc-pick-area:focus-within { outline: 3px solid rgba(249,181,65,0.35); outline-offset: 2px; }
    .rc-pick-icon {
      width: 56px; height: 56px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--primary-light);
      font-size: 28px;
      box-shadow: 0 2px 10px rgba(249,181,65,0.18);
    }
    .rc-pick-label { font-size:17px; font-weight: 700; color: var(--text); line-height: 1.3; }
    .rc-pick-sub { font-size:14px; color: var(--text-2); line-height: 1.5; max-width: 320px; }
    .rc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
    .rc-thumb { position:relative; aspect-ratio:1; border-radius:var(--r-sm); overflow:hidden; background:var(--border); cursor:pointer; }
    .rc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .rc-thumb-del { position:absolute; top:4px; right:4px; background:rgba(0,0,0,0.55); color:#fff; border:none; border-radius:50%; width:24px; height:24px; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; }
    .rc-thumb-spin { aspect-ratio:1; border-radius:var(--r-sm); background:var(--border); display:flex; align-items:center; justify-content:center; font-size:20px; animation:pulse 1s infinite; }
    @keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:1} }
    .rc-add-more { aspect-ratio:1; border-radius:var(--r-sm); border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; color:var(--text-2); background:none; font-family:var(--font); }
    .rc-submit-bar { margin-top:14px; display:flex; gap:10px; align-items:center; }
    .btn-rc-submit { flex:1; padding:14px 18px; font-size:17px; }
    .btn-rc-add { padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font); font-size:17px; cursor:pointer; color:var(--text-2); line-height:1; }
    .rc-success { background:var(--surface); border:1.5px solid #4CAF50; border-radius:var(--r-lg); padding:28px 20px; text-align:center; margin-top:12px; }
    .rc-success-icon { font-size:40px; margin-bottom:10px; }
    .rc-success-title { font-size:20px; font-weight:700; color:#2E7D32; margin-bottom:6px; }
    .rc-success-sub { font-size:15px; color:var(--text-2); margin-bottom:18px; }
    .btn-rc-new { padding:12px 24px; background:var(--primary); border:none; border-radius:var(--r-sm); font-family:var(--font); font-size:16px; font-weight:700; color:var(--text); cursor:pointer; }
    .rc-tabs { display:flex; gap:6px; }
    .rc-tab { padding: 8px 14px; border-radius:20px; border:1px solid var(--border); background:none; font-family:var(--font); font-size:15px; font-weight:700; color:var(--text-2); cursor:pointer; line-height:1; box-sizing:border-box; min-height:44px; display:inline-flex; align-items:center; }
    .rc-tab.active { background:var(--primary); border-color:var(--primary); color:var(--text); }
    .rc-history-empty { text-align:center; padding:24px 16px; color:var(--text-2); font-size:15px; }
    /* d1: flat card. */
    .rc-batch { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; }
    .rc-batch-hdr { padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--border); }
    .rc-batch-info { flex:1; min-width:0; }
    .rc-batch-staff { font-size:15px; font-weight:700; color:var(--text); }
    .rc-batch-meta { font-size:14px; color:var(--text-2); margin-top:2px; }
    .btn-del-batch { background:none; border:1px solid var(--error); color:var(--error); border-radius:var(--r-sm); padding:6px 10px; font-family:var(--font); font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; }
    .rc-batch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px; }
    .rc-lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:500; display:flex; align-items:center; justify-content:center; }
    .rc-lightbox.hidden { display:none; }
    .rc-lightbox img { max-width:96vw; max-height:90vh; border-radius:var(--r-sm); object-fit:contain; }
    .rc-lightbox-close { position:absolute; top:16px; right:16px; background:rgba(255,255,255,0.15); border:none; border-radius:50%; width:36px; height:36px; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

    /* ── NOTIFICATIONS BELL ── */
    .bell-btn{position:relative;background:none;border:none;padding:8px;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
    .bell-btn svg{width:24px;height:24px;stroke:var(--text);fill:none;stroke-width:2;}
    .bell-badge{position:absolute;top:4px;right:4px;min-width:18px;height:18px;border-radius:9px;background:var(--error);color:#fff;font-size:11px;font-weight:800;display:none;align-items:center;justify-content:center;padding:0 5px;line-height:1;}
    .bell-badge.show{display:flex;}
    .notif-overlay{position:fixed;inset:0;background:transparent;z-index:202;display:none;}
    .notif-overlay.open{display:block;}
    .notif-panel{position:fixed;top:64px;right:8px;width:360px;max-width:calc(100vw - 16px);max-height:calc(100vh - 80px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:203;display:none;flex-direction:column;overflow:hidden;}
    .notif-panel.open{display:flex;}
    .notif-hdr{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);font-weight:700;font-size:16px;color:var(--text);}
    .notif-mark-all{background:none;border:none;color:var(--primary-dark);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;padding:4px 8px;}
    .notif-list{overflow-y:auto;max-height:calc(100vh - 160px);}
    .notif-row{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
    .notif-row:hover{background:var(--bg);}
    .notif-row.unread{background:#FFF8E7;}
    .notif-row .nt-title{font-size:14px;font-weight:700;color:var(--text);}
    .notif-row .nt-body{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.4;}
    .notif-row .nt-time{font-size:11px;color:var(--text-3);margin-top:4px;}
    .notif-empty{padding:30px 14px;text-align:center;color:var(--text-2);font-size:14px;}

    /* ── HAMBURGER + DRAWER ── */
    .hdr-menu-btn{background:none;border:none;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:44px;height:44px;}
    .hdr-menu-btn span{display:block;width:22px;height:2.5px;background:var(--text);border-radius:2px;}
    .drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;}
    .drawer-overlay.open{opacity:1;pointer-events:auto;}
    .drawer{position:fixed;top:0;right:0;height:100vh;width:280px;max-width:85vw;background:var(--surface);z-index:201;transform:translateX(100%);transition:transform .25s var(--ease);display:flex;flex-direction:column;box-shadow:-4px 0 16px rgba(0,0,0,.12);}
    .drawer.open{transform:translateX(0);}
    .drawer-hdr{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:17px;color:var(--text);}
    .drawer-close{background:none;border:none;font-size:22px;color:var(--muted);cursor:pointer;padding:4px 10px;line-height:1;}
    .drawer-nav{flex:1;padding:8px 0;overflow-y:auto;}
    .drawer-item{display:flex;align-items:center;gap:14px;padding:14px 20px;color:var(--text);text-decoration:none;font-weight:700;font-size:16px;border-left:3px solid transparent;transition:background .12s;}
    .drawer-item:hover{background:var(--bg);}
    .drawer-item.active{color:var(--primary-dark);border-left-color:var(--primary);background:var(--primary-light);}
    .drawer-item svg{width:22px;height:22px;flex-shrink:0;}
    @media print{.hdr-menu-btn,.drawer-overlay,.drawer{display:none!important;}}