/* Claw Mart phone dashboard (/m). Mobile-first, one-handed; Claw Mart purple/pink; light and dark. */
:root {
  --pink:#bd3aa4; --pink-soft:#f6e3f1; --purple:#57356f; --purple-soft:#ece5f4;
  --ink:#1f1b2e; --muted:#6b6880; --line:#e7e2f1; --bg:#f6f4fb; --card:#ffffff;
  --ok:#15803d; --ok-soft:#dcfce7; --warn:#b45309; --warn-soft:#fef3c7; --bad:#b91c1c; --bad-soft:#fee2e2;
  --bar:#c9b6dd; --bar-today:#bd3aa4; --grid:#ece8f3;
  --safe-top:env(safe-area-inset-top, 0px); --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-left:env(safe-area-inset-left, 0px); --safe-right:env(safe-area-inset-right, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --pink:#e477cc; --pink-soft:#3b2236; --purple:#c3a6e6; --purple-soft:#2c2340;
    --ink:#f1edf7; --muted:#a9a3b8; --line:#352f44; --bg:#13111a; --card:#1e1a28;
    --ok:#4ade80; --ok-soft:#173523; --warn:#fbbf24; --warn-soft:#3a2c10; --bad:#f87171; --bad-soft:#3d1b1f;
    --bar:#5a4a73; --bar-today:#e477cc; --grid:#2b2638;
  }
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg);
  min-height:100vh; padding-bottom:calc(16px + var(--safe-bottom)); overscroll-behavior-y:contain; }
button, input { font:inherit; color:inherit; }
a { color:var(--pink); }

/* top bar */
.bar { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:8px; min-height:52px;
  padding:calc(6px + var(--safe-top)) calc(12px + var(--safe-right)) 6px calc(12px + var(--safe-left));
  background:var(--purple); color:#fff; }
@media (prefers-color-scheme: dark) { .bar { background:#2a2038; } }
.bar h1 { flex:1; margin:0; font-size:1.05rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar .iconbtn { min-width:44px; min-height:44px; border:0; border-radius:12px; background:rgba(255,255,255,.14); color:#fff; font-size:1rem; padding:0 12px; }
.bar .iconbtn[hidden] { display:none; }
.bar .iconbtn:active { background:rgba(255,255,255,.28); }
.bar .iconbtn.spin { opacity:.5; }

main { padding:12px calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left)); max-width:640px; margin:0 auto; }
.ptr { height:0; overflow:hidden; text-align:center; color:var(--muted); font-size:.85rem; transition:height .15s; }
.ptr.show { height:36px; line-height:36px; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:12px; }
.card h2 { margin:0 0 8px; font-size:1rem; }
.card h3 { margin:12px 0 6px; font-size:.9rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.store { display:block; width:100%; text-align:left; cursor:pointer; color:inherit; text-decoration:none; }
.store:active { transform:scale(.99); }
.store .top { display:flex; align-items:baseline; gap:8px; }
.store .name { flex:1; font-weight:700; font-size:1.05rem; }
.big { font-size:2rem; font-weight:800; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.mid { font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); font-size:.85rem; }
.row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:8px 0; border-top:1px solid var(--line); }
.row:first-child { border-top:0; }
.row .v { font-weight:700; font-variant-numeric:tabular-nums; text-align:right; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tile { background:var(--bg); border-radius:12px; padding:10px; }
.tile span { display:block; color:var(--muted); font-size:.78rem; }
.tile strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:700; background:var(--purple-soft); color:var(--purple); white-space:nowrap; }
.badge.stale, .badge.bad { background:var(--bad-soft); color:var(--bad); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
.badge.ok { background:var(--ok-soft); color:var(--ok); }
.delta.up { color:var(--ok); } .delta.down { color:var(--bad); }
.split { display:flex; height:10px; border-radius:6px; overflow:hidden; gap:2px; margin:8px 0 4px; background:var(--grid); }
.split i { display:block; height:100%; }
.k-coin { background:var(--purple); } .k-item { background:var(--pink); } .k-other { background:var(--muted); }
.key { display:inline-flex; align-items:center; gap:5px; margin-right:12px; font-size:.82rem; color:var(--muted); }
.key i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.alerts { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.empty { color:var(--muted); font-style:italic; padding:6px 0; }
.note { background:var(--warn-soft); color:var(--warn); border-radius:12px; padding:10px 12px; font-size:.88rem; margin-bottom:12px; }

/* tabs */
.tabs { position:sticky; top:calc(52px + var(--safe-top)); z-index:9; display:flex; gap:6px; overflow-x:auto; padding:8px 0 10px; margin:0 -2px; background:var(--bg); scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { flex:0 0 auto; min-height:40px; border:1px solid var(--line); background:var(--card); border-radius:999px; padding:0 16px; font-weight:600; }
.tabs button.on { background:var(--pink); border-color:var(--pink); color:#fff; }

/* lists */
.item { display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.item:first-child, .card h2 + .item { border-top:0; }
.item .body { flex:1; min-width:0; }
.item .t { font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.item .s { color:var(--muted); font-size:.82rem; }
.item .r { text-align:right; font-variant-numeric:tabular-nums; }
.thumb { width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--bg); border:1px solid var(--line); flex:0 0 auto; }

/* chart */
.chart { width:100%; height:auto; display:block; touch-action:pan-y; }
.chart .gridline { stroke:var(--grid); stroke-width:1; }
.chart .b { fill:var(--bar); }
.chart .b.today { fill:var(--bar-today); }
.chart .b.sel { fill:var(--purple); }
.chart text { fill:var(--muted); font-size:10px; }
.chart .hit { fill:transparent; }
.tip { min-height:1.4em; font-size:.88rem; color:var(--muted); margin-top:4px; }
.tip strong { color:var(--ink); }

/* sign-in */
.auth { max-width:420px; margin:6vh auto 0; }
.brand { text-align:center; margin-bottom:18px; }
.brand img { width:100%; max-width:340px; height:auto; display:block; margin:0 auto; background:#1c1a20; border-radius:18px; padding:10px 14px; box-sizing:border-box; }
.brand h2 { margin:8px 0 0; color:var(--pink); }
label { display:block; font-size:.85rem; color:var(--muted); margin:12px 0 4px; }
.field { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); font-size:1.05rem; }
.field:focus { outline:2px solid var(--pink); outline-offset:1px; }
.field.code { font-size:1.6rem; letter-spacing:.35em; text-align:center; font-variant-numeric:tabular-nums; }
.btn { display:block; width:100%; min-height:50px; margin-top:16px; border:0; border-radius:14px; background:var(--pink); color:#fff; font-weight:700; font-size:1.05rem; text-align:center; text-decoration:none; line-height:50px; padding:0 14px; }
.btn.outline { background:transparent; color:var(--pink); border:1.5px solid var(--pink); line-height:47px; }
.btn:disabled { opacity:.6; }
.linkbtn { background:none; border:0; color:var(--pink); padding:12px 0; font-weight:600; min-height:44px; }
.secret { font:600 1.15rem/1.6 ui-monospace, Menlo, Consolas, monospace; letter-spacing:.06em; word-spacing:.3em; background:var(--bg); border-radius:12px; padding:12px; text-align:center; user-select:all; -webkit-user-select:all; }
.err { color:var(--bad); min-height:1.3em; margin-top:10px; font-size:.92rem; }
ol.steps { padding-left:20px; margin:8px 0; } ol.steps li { margin:6px 0; }
.foot { text-align:center; margin:18px 0 6px; }

#toast { position:fixed; left:50%; bottom:calc(20px + var(--safe-bottom)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:12px; opacity:0; transition:opacity .2s; pointer-events:none; max-width:90vw; z-index:20; }
#toast.show { opacity:1; }

/* POS theme (2026-10-10): pastel pink → lavender → sky background, gradient header, logo in a dark glowing card,
   Claw Mart pink buttons — same look as the POS home screen. */
body { background: linear-gradient(135deg, #fde3f3 0%, #efe4fb 45%, #dff1fd 100%) fixed; }
.bar { background: linear-gradient(90deg, #f3a6d6 0%, #d9b7ec 50%, #a9dcf5 100%); color:#3b2150; box-shadow:0 4px 16px rgba(189,58,164,.18); }
.bar .iconbtn { background:rgba(255,255,255,.55); color:#3b2150; }
.bar .iconbtn:active { background:rgba(255,255,255,.8); }
.brand img { background:#1c1a20; padding:12px 16px; border:3px solid transparent; border-radius:22px;
  background-image:linear-gradient(#1c1a20,#1c1a20), linear-gradient(90deg,#ff4fb8,#b46cf0,#4fd2ff);
  background-origin:border-box; background-clip:padding-box, border-box;
  box-shadow:0 0 0 4px rgba(255,255,255,.6), 0 10px 30px rgba(222,80,180,.35), 0 0 24px rgba(79,210,255,.35); }
.card, .auth > form, .auth .panel { border-radius:22px; box-shadow:0 10px 30px rgba(120,80,160,.12); }
.btn { background: linear-gradient(90deg, #e64fb4, #b84fd6); box-shadow:0 8px 20px rgba(214,70,170,.35); }
.btn.outline { background:transparent; box-shadow:none; }
@media (prefers-color-scheme: dark) {
  body { background: linear-gradient(135deg, #2a1730 0%, #1d1830 50%, #142433 100%) fixed; }
  .bar { background: linear-gradient(90deg, #5a2a52 0%, #3f2d5c 50%, #1f4257 100%); color:#fff; }
  .bar .iconbtn { background:rgba(255,255,255,.14); color:#fff; }
}

.qr { display:block; width:220px; height:220px; margin:8px auto 14px; background:#fff; border-radius:12px; padding:6px; }
/* Logo on every page: small framed logo at the left of the top bar */
.barlogo { height:38px; width:auto; border-radius:10px; padding:3px 6px; background:#1c1a20;
  border:2px solid transparent; background-image:linear-gradient(#1c1a20,#1c1a20), linear-gradient(90deg,#ff4fb8,#b46cf0,#4fd2ff);
  background-origin:border-box; background-clip:padding-box, border-box; box-shadow:0 2px 10px rgba(222,80,180,.3); }
.bar .iconbtn:not([hidden]) ~ .barlogo, #back:not([hidden]) + .barlogo { display:none; }

/* PUR-L-019 "More" list: links to the read-only store pages */
.morelink { display:block; padding:12px 4px; border-top:1px solid rgba(127,127,127,.2); color:inherit; text-decoration:none; font-weight:600; }
.morelink:first-of-type { border-top:0; }