/* Plaazaa Apps — pz-ui.css v1.0 (shared UI kit for every app; methodology: plaazaa/apps/UXUI.md).
   ONE public token vocabulary (--pz-*, same names + neutral values as the main site's Modern look, ui-modern/build_css.py),
   a per-app ACCENT (set <html data-accent="indigo|violet|rose|green|sky|amber"> = the app's manifest `color`),
   automatic dark mode (system, or <html data-theme="light|dark">), and the small component set extracted from Convoy
   (.pzu-*). Load order for an app:  pz-ui.css → (pz-shell.css, multi-screen apps only) → your app.css.
   Rules: never hard-code colours / radii / shadows in an app — use the tokens; never restyle a .pzu-* class, extend with your own. */

/* ---------- tokens: neutrals (light) ---------- */
:root{
  --pz-bg:#f4f5f8;--pz-card:#ffffff;--pz-soft:#f1f2f6;--pz-line:#e6e8ee;
  --pz-text:#111827;--pz-muted:#5b6474;--pz-hdr:rgba(255,255,255,.88);
  --pz-ok:#16a34a;--pz-warn:#d97706;--pz-danger:#dc2626;
  --pz-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.12);
  --pz-radius:16px;--pz-radius-sm:10px;--pz-radius-lg:24px;--pz-radius-pill:999px;
  --pz-sp-1:4px;--pz-sp-2:8px;--pz-sp-3:12px;--pz-sp-4:16px;--pz-sp-5:24px;--pz-sp-6:32px;   /* spacing scale */
  --pz-font:"Noto Sans Thai","Noto Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--pz-font-display:Sora,"Noto Sans Thai",sans-serif;
  --pz-top:57px;--pz-nav:74px;                                                                 /* shell bar heights */
  --pz-dur:.18s;
}
/* ---------- tokens: neutrals (dark) ---------- */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --pz-bg:#0e1015;--pz-card:#171a21;--pz-soft:#20242d;--pz-line:#262a33;
  --pz-text:#eceef3;--pz-muted:#a0a8b8;--pz-hdr:rgba(23,26,33,.88);
  --pz-ok:#4ade80;--pz-warn:#fbbf24;--pz-danger:#f87171;--pz-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.5)}}
html[data-theme=dark]{
  --pz-bg:#0e1015;--pz-card:#171a21;--pz-soft:#20242d;--pz-line:#262a33;
  --pz-text:#eceef3;--pz-muted:#a0a8b8;--pz-hdr:rgba(23,26,33,.88);
  --pz-ok:#4ade80;--pz-warn:#fbbf24;--pz-danger:#f87171;--pz-shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.5)}

/* ---------- accents: --pz-accent / -hover / -soft / -ink + --pz-grad (hero gradient) ----------
   default = indigo (the site brand). Each block = light values, then dark values. */
:root,html[data-accent=indigo]{--pz-accent:#4f46e5;--pz-accent-hover:#4338ca;--pz-accent-soft:#eef0ff;--pz-accent-ink:#4338ca;--pz-grad:linear-gradient(160deg,#1e1b4b 0%,#4338ca 52%,#6366f1 100%)}
html[data-accent=violet]{--pz-accent:#7c3aed;--pz-accent-hover:#6d28d9;--pz-accent-soft:#f3efff;--pz-accent-ink:#6d28d9;--pz-grad:linear-gradient(160deg,#2e1065 0%,#6d28d9 52%,#8b5cf6 100%)}
html[data-accent=rose]{--pz-accent:#e11d48;--pz-accent-hover:#be123c;--pz-accent-soft:#ffe9ee;--pz-accent-ink:#be123c;--pz-grad:linear-gradient(160deg,#4c0519 0%,#be123c 52%,#fb7185 100%)}
html[data-accent=green]{--pz-accent:#0f766e;--pz-accent-hover:#115e59;--pz-accent-soft:#e7f5f3;--pz-accent-ink:#115e59;--pz-grad:linear-gradient(160deg,#042f2e 0%,#0f766e 52%,#14b8a6 100%)}
html[data-accent=sky]{--pz-accent:#0284c7;--pz-accent-hover:#0369a1;--pz-accent-soft:#e6f3fa;--pz-accent-ink:#075985;--pz-grad:linear-gradient(160deg,#082f49 0%,#0369a1 52%,#0ea5e9 100%)}
html[data-accent=amber]{--pz-accent:#d97706;--pz-accent-hover:#b45309;--pz-accent-soft:#fef3c7;--pz-accent-ink:#92400e;--pz-grad:linear-gradient(160deg,#451a03 0%,#b45309 52%,#f59e0b 100%)}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]),html[data-accent=indigo]:not([data-theme=light]){--pz-accent:#5b54ee;--pz-accent-hover:#6d66f6;--pz-accent-soft:#25244d;--pz-accent-ink:#b4b0ff}
  html[data-accent=violet]:not([data-theme=light]){--pz-accent:#a78bfa;--pz-accent-hover:#c4b5fd;--pz-accent-soft:#2a1f4d;--pz-accent-ink:#ddd6fe}
  html[data-accent=rose]:not([data-theme=light]){--pz-accent:#fb7185;--pz-accent-hover:#fda4af;--pz-accent-soft:#3d1520;--pz-accent-ink:#fecdd3}
  html[data-accent=green]:not([data-theme=light]){--pz-accent:#2dd4bf;--pz-accent-hover:#5eead4;--pz-accent-soft:#0f2e2c;--pz-accent-ink:#99f6e4}
  html[data-accent=sky]:not([data-theme=light]){--pz-accent:#38bdf8;--pz-accent-hover:#7dd3fc;--pz-accent-soft:#12283a;--pz-accent-ink:#7dd3fc}
  html[data-accent=amber]:not([data-theme=light]){--pz-accent:#fbbf24;--pz-accent-hover:#fcd34d;--pz-accent-soft:#3a2a0a;--pz-accent-ink:#fde68a}}
html[data-theme=dark]{--pz-accent:#5b54ee;--pz-accent-hover:#6d66f6;--pz-accent-soft:#25244d;--pz-accent-ink:#b4b0ff}
html[data-theme=dark][data-accent=violet]{--pz-accent:#a78bfa;--pz-accent-hover:#c4b5fd;--pz-accent-soft:#2a1f4d;--pz-accent-ink:#ddd6fe}
html[data-theme=dark][data-accent=rose]{--pz-accent:#fb7185;--pz-accent-hover:#fda4af;--pz-accent-soft:#3d1520;--pz-accent-ink:#fecdd3}
html[data-theme=dark][data-accent=green]{--pz-accent:#2dd4bf;--pz-accent-hover:#5eead4;--pz-accent-soft:#0f2e2c;--pz-accent-ink:#99f6e4}
html[data-theme=dark][data-accent=sky]{--pz-accent:#38bdf8;--pz-accent-hover:#7dd3fc;--pz-accent-soft:#12283a;--pz-accent-ink:#7dd3fc}
html[data-theme=dark][data-accent=amber]{--pz-accent:#fbbf24;--pz-accent-hover:#fcd34d;--pz-accent-soft:#3a2a0a;--pz-accent-ink:#fde68a}

/* ---------- base: an app, not a web page ---------- */
.pzu-base,.pzu-base *{box-sizing:border-box}
.pzu-base{margin:0;background:var(--pz-bg);color:var(--pz-text);font:500 14px/1.4 var(--pz-font);-webkit-font-smoothing:antialiased;touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.pzu-base [hidden]{display:none!important}
:where(.pzu-base) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}   /* :where = zero specificity, so every component class wins */
:where(.pzu-base) input{font-family:inherit;-webkit-user-select:text;user-select:text}

/* ---------- components (all ≥44 px touch targets; use as-is, add your own classes for layout) ---------- */
.pzu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:var(--pz-accent);color:#fff;font-weight:700;font-size:14px;border:0;transition:transform var(--pz-dur)}
.pzu-btn,.pzu-chip,.pzu-sbtn,.pzu-pill{text-decoration:none}   /* these classes are also used on <a> */
.pzu-btn:active{transform:scale(.97)}.pzu-btn:hover{background:var(--pz-accent-hover)}
.pzu-btn--ghost{background:var(--pz-accent-soft);color:var(--pz-accent-ink)}.pzu-btn--ghost:hover{background:var(--pz-accent-soft);filter:brightness(.97)}
.pzu-btn--danger{background:rgba(220,38,38,.12);color:var(--pz-danger)}.pzu-btn--danger:hover{background:rgba(220,38,38,.18)}
.pzu-btn--big{min-height:52px;border-radius:15px;font-size:16px;width:100%}
.pzu-btn:disabled{opacity:.45}
.pzu-card{background:var(--pz-card);border:1px solid var(--pz-line);border-radius:18px;padding:12px 14px}
.pzu-row{display:flex;align-items:center;gap:12px;background:var(--pz-card);border:1px solid var(--pz-line);border-radius:18px;padding:12px 14px;min-height:56px}
.pzu-row .t{flex:1;min-width:0}.pzu-row .t b{display:block;font-size:15px}.pzu-row .t small{color:var(--pz-muted);font-size:12px}
.pzu-h{font:700 12px var(--pz-font-display);letter-spacing:.6px;text-transform:uppercase;color:var(--pz-muted);margin:6px 4px 0}
.pzu-chip{display:inline-flex;align-items:center;min-height:36px;padding:0 13px;border:1px solid var(--pz-line);background:var(--pz-card);border-radius:var(--pz-radius-pill);font-size:12.5px;font-weight:600}
.pzu-chip.on{background:var(--pz-accent-soft);border-color:var(--pz-accent);color:var(--pz-accent-ink)}
.pzu-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:700;border-radius:var(--pz-radius-pill);padding:6px 12px;background:var(--pz-accent-soft);color:var(--pz-accent-ink)}
.pzu-pill--ok{background:rgba(34,197,94,.16);color:var(--pz-ok)}.pzu-pill--muted{background:var(--pz-soft);color:var(--pz-muted)}
.pzu-toggle{flex:0 0 44px;width:44px;height:26px;border-radius:14px;background:var(--pz-ok);position:relative;display:inline-block}
.pzu-toggle::after{content:"";position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:10px;background:#fff;transition:all var(--pz-dur)}
.pzu-toggle.off{background:var(--pz-line)}.pzu-toggle.off::after{right:auto;left:3px}
.pzu-input{width:100%;min-height:44px;border:1px solid var(--pz-line);background:var(--pz-soft);color:var(--pz-text);border-radius:12px;padding:0 14px;font-size:16px;outline:none}   /* 16px = no iOS zoom */
.pzu-input:focus{border-color:var(--pz-accent)}
.pzu-av{display:grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border-radius:999px;background:var(--pz-card);border:3px solid var(--c,var(--pz-accent));font-size:22px}   /* ring colour: style="--c:#f97316" */
.pzu-banner{padding:8px 14px;text-align:center;font-weight:700;font-size:12.5px;background:var(--pz-warn);color:#1f1300}
.pzu-empty{text-align:center;color:var(--pz-muted);padding:var(--pz-sp-5) var(--pz-sp-4);font-size:13px}.pzu-empty b{display:block;font-size:34px;margin-bottom:var(--pz-sp-2)}
.pzu-sbtn{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:14px;font-weight:700;background:var(--pz-soft);width:100%}
.pzu-sbtn--primary{background:var(--pz-accent);color:#fff}.pzu-sbtn--danger{background:rgba(220,38,38,.12);color:var(--pz-danger)}
.pzu-fab{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--pz-card);box-shadow:var(--pz-shadow);font-size:20px}
.pzu-bubble{background:var(--pz-card);border:1px solid var(--pz-line);border-radius:18px 18px 18px 6px;padding:8px 13px;word-break:break-word}
.pzu-bubble--me{background:var(--pz-accent);border-color:var(--pz-accent);color:#fff;border-radius:18px 18px 6px 18px}
.pzu-hero{background:var(--pz-grad);color:#fff}                          /* start screens / recaps: always the app's accent gradient */
.pzu-elev{box-shadow:var(--pz-shadow)}
@media(prefers-reduced-motion:reduce){.pzu-btn,.pzu-toggle::after{transition:none}}