/* v11 UI layer: visual / layout only. Works on top of the Tailwind CDN classes used by app.js.
   Most selectors are scoped by element id so they win over Tailwind utility classes. */
:root {
  --bg: #f2f5f4;
  --card: #ffffff;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #0f766e;
  --brand-dark: #115e59;
  --brand-soft: #e6f4f1;
  --in: #0f766e;
  --in-soft: #e6f4f1;
  --out: #ea580c;
  --out-dark: #c2410c;
  --out-soft: #fff1e7;
  --red: #dc2626;
  --red-soft: #fef2f2;
  --amber: #d97706;
  --amber-soft: #fffbeb;
  --violet: #7c3aed;
  --violet-soft: #f5f3ff;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --radius: 16px;
  --nav-h: 64px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 1px rgba(15, 23, 42, .03);
}
html { -webkit-text-size-adjust: 100%; }
body.ui {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang HK", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}
body.ui button, body.ui label { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- login ---------- */
#gate { background: linear-gradient(160deg, #0f766e 0%, #134e4a 100%); padding: max(24px, env(safe-area-inset-top)) 20px 24px; }
#gate form { border-radius: 22px; padding: 28px 22px 22px; box-shadow: 0 20px 40px rgba(0,0,0,.18); }
#gate form::before {
  content: ""; display: block; width: 56px; height: 56px; border-radius: 16px; margin-bottom: 6px;
  background: var(--brand-soft) center / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E");
}
#gate h2 { font-size: var(--fs-lg); font-weight: 800; color: var(--text); }
#gate p { font-size: var(--fs-sm); }
#gate input { min-height: 52px; font-size: var(--fs-md); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; width: 100%; background: #fff; }
#gate input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
#gate button { min-height: 52px; font-size: var(--fs-md); font-weight: 700; border-radius: 14px; background: var(--brand); color: #fff; }
#gate button:active { background: var(--brand-dark); }
#gate button:disabled { opacity: .6; }
#gate #login-err:not(:empty) { font-size: var(--fs-sm); }

/* ---------- header ---------- */
#hdr {
  position: sticky; top: 0; z-index: 40; background: var(--brand); color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
#hdr .hdr-row { display: flex; align-items: center; gap: 8px; max-width: 32rem; margin: 0 auto; min-height: 40px; }
#hdr #title { font-size: var(--fs-lg); font-weight: 800; letter-spacing: .02em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hdr #who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); opacity: .95; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hdr #who::before {
  content: ""; width: 18px; height: 18px; flex: none; opacity: .9;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}
#hdr .hdr-btn {
  min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 600;
  background: rgba(255,255,255,.16); color: #fff; display: inline-flex; align-items: center; gap: 4px;
}
#hdr .hdr-btn:active { background: rgba(255,255,255,.28); }
#hdr #hdr-back { display: none; width: 40px; padding: 0; justify-content: center; margin-left: -4px; }
body:has(#page-detail:not(.hidden)) #hdr #hdr-back { display: inline-flex; }

/* ---------- layout ---------- */
#app { max-width: 32rem; margin: 0 auto; padding: 14px 14px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
#app > section > * + * { margin-top: 14px; }
#app section > .bg-white,
#app .card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); padding: 16px;
}
#app .card > * + * { margin-top: 10px; }
#app .card-title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); font-weight: 800; color: var(--text); }
#app .card-title .ico { width: 22px; height: 22px; color: var(--brand); }
#app .step-no {
  width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: 800; background: var(--brand-soft); color: var(--brand); flex: none;
}
#page-out .step-no { background: var(--out-soft); color: var(--out-dark); }
#app .hint { font-size: var(--fs-sm); color: var(--muted); }
#app .field-label { display: block; font-size: var(--fs-sm); font-weight: 700; color: #334155; margin-bottom: 6px; }
#app .field-label + * { margin-top: 0 !important; }
#app .field > * + * { margin-top: 0; }
#app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app .divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); }
#app .divider::before, #app .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- form controls (also styles inputs app.js creates) ---------- */
#app input:not([type=hidden]):not([type=file]):not([type=checkbox]):not([type=radio]),
#app select {
  width: 100%; min-height: 50px; font-size: var(--fs-md); color: var(--text); background-color: #fff;
  border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 10px 14px;
  transition: border-color .15s, box-shadow .15s;
}
#app select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; font-size: var(--fs-sm);
  background: #fff right 12px center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  text-overflow: ellipsis;
}
#app input::placeholder { color: #94a3b8; }
#app input:focus, #app select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
#page-out input:focus, #page-out select:focus { border-color: var(--out); box-shadow: 0 0 0 3px rgba(234,88,12,.18); }
#app input.search, #search-all, #in-q, #out-q {
  padding-left: 42px !important;
  background: #fff 13px center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
}
#app input.qty { font-size: var(--fs-lg) !important; font-weight: 700; min-height: 56px !important; }

/* ---------- buttons ---------- */
#app .btn {
  width: 100%; min-height: 50px; border-radius: 14px; font-size: var(--fs-md); font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; cursor: pointer;
  transition: transform .06s, background-color .15s;
}
#app .btn:active { transform: scale(.98); }
#app .btn:disabled { opacity: .55; }
#app .btn-xl { min-height: 56px; font-size: var(--fs-lg); border-radius: 16px; box-shadow: 0 4px 12px rgba(15,23,42,.12); }
#app .btn-in { background: var(--in); color: #fff; }
#app .btn-in:active { background: var(--brand-dark); }
#app .btn-out { background: var(--out); color: #fff; }
#app .btn-out:active { background: var(--out-dark); }
#app .btn-soft { background: var(--brand-soft); color: var(--brand); border: 1.5px solid #b7ddd6; }
#app .btn-soft-out { background: var(--out-soft); color: var(--out-dark); border: 1.5px solid #fdc9a8; }
#app .btn-line { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }

/* ---------- home ---------- */

#app .filter-card { padding: 14px 0 6px; }
#app .filter-card > .filter-label { padding: 0 16px; font-size: var(--fs-sm); font-weight: 700; color: var(--muted); }
#app .filter-card > * + * { margin-top: 8px; }
#cat-bar, #brand-bar {
  display: flex !important; flex-wrap: wrap; gap: 6px; overflow: visible !important; padding: 0 16px 8px; margin: 0 !important;
}
#cat-bar button, #brand-bar button {
  min-height: 34px; padding: 0 12px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600; line-height: 1.2;
  background: #fff !important; color: #334155 !important; border: 1.5px solid var(--line-strong) !important; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
#cat-bar button.on, #brand-bar button.on { background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important; }
#brand-bar button.on { background: var(--out) !important; border-color: var(--out) !important; }
#stock-box .box-title, #app .list-title { font-size: var(--fs-sm); font-weight: 800; color: #334155; margin: 0 2px 8px; }
#l-stock > * + *, #all-list > button + button, .sec-list > * + * { margin-top: 8px; }

#app .alert-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
#app .sec-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 68px; }
#app .sec-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
#app .sec-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#app .sec-title { font-size: var(--fs-md); font-weight: 800; }
#app .sec-sub { font-size: var(--fs-xs); color: var(--muted); }
#app .sec-count { font-size: var(--fs-lg); font-weight: 800; min-width: 28px; text-align: right; }
#app .sec-toggle { font-size: 0; width: 28px; height: 28px; flex: none; color: transparent; overflow: hidden;
  background: center / 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
#app .sec-toggle::before { content: ""; position: absolute; inset: 0; }   /* whole header row is the tap target */
#app .alert-sec:has(.sec-list:not(.hidden)) .sec-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
#app .alert-sec:has(.sec-list:not(.hidden)) .sec-head { border-bottom: 1px solid var(--line); }
#app .sec-list { padding: 12px; background: #f8fafc; }
#app .sec-urgent .sec-ico { background: var(--red-soft); color: var(--red); }
#app .sec-urgent .sec-count { color: var(--red); }
#app .sec-warn .sec-ico { background: var(--amber-soft); color: var(--amber); }
#app .sec-warn .sec-count { color: var(--amber); }
#app .sec-stag .sec-ico { background: var(--violet-soft); color: var(--violet); }
#app .sec-stag .sec-count { color: var(--violet); }

/* product cards built by app.js (home lists, 全部, stock list) */
#app button.bg-white.rounded-xl {
  display: block; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); box-shadow: var(--shadow);
}
#app button.bg-white.rounded-xl.border-l-4 { border-left-width: 5px; }
#app button.bg-white.rounded-xl:active { background: #f8fafc; }
#app button.bg-white.rounded-xl .font-medium { font-size: var(--fs-md); font-weight: 700; line-height: 1.35; }
#app button.bg-white.rounded-xl .text-xs { font-size: var(--fs-xs); }
#app button.bg-white.rounded-xl .font-bold { font-size: var(--fs-md); white-space: nowrap; }
#all-list > div { font-size: var(--fs-sm); font-weight: 800; color: var(--muted); margin: 18px 4px 8px !important; }
#all-list > div:first-child { margin-top: 4px !important; }

/* ---------- empty states (texts produced by app.js) ---------- */
#l-stock > p, .sec-list > p, #all-list > p, #today-log > p, #in-picks > p, #out-picks > p, #user-list > p, #page-detail > div > p.text-gray-400 {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 18px 12px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: #fff;
  color: var(--muted) !important; font-size: var(--fs-sm) !important;
}

/* ---------- 入貨 / 出貨 ---------- */
#in-picks:not(:empty), #out-picks:not(:empty) { max-height: 320px; overflow-y: auto; border-radius: 12px; }
#in-picks > * + *, #out-picks > * + * { margin-top: 6px; }
#in-picks button, #out-picks button {
  display: block; width: 100%; min-height: 52px; text-align: left; padding: 12px 14px !important; font-size: var(--fs-md) !important;
  background: #fff !important; border: 1.5px solid var(--line) !important; border-radius: 12px !important; color: var(--text);
}
#in-picks button span, #out-picks button span { display: block; font-size: var(--fs-xs); margin-top: 2px; }
#in-picks button:active { border-color: var(--in) !important; background: var(--in-soft) !important; }
#out-picks button:active { border-color: var(--out) !important; background: var(--out-soft) !important; }
#in-chosen:empty, #out-chosen:empty, #in-status:empty, #slip-msg:empty, #note-msg:empty, #in-ai-msg:empty, #np-ai-msg:empty, #bar-msg:empty, #in-picks:empty, #out-picks:empty, #slip-items:empty, #note-items:empty, #in-ai-picks:empty, #np-ai-picks:empty { display: none; }
#in-chosen, #out-chosen {
  display: flex; align-items: center; gap: 10px; font-size: var(--fs-md) !important; font-weight: 700; padding: 12px 14px; border-radius: 12px;
}
#in-chosen { background: var(--in-soft); color: var(--brand-dark) !important; border: 1.5px solid #b7ddd6; }
#out-chosen { background: var(--out-soft); color: var(--out-dark) !important; border: 1.5px solid #fdc9a8; }
#in-chosen::before, #out-chosen::before { content: ""; width: 22px; height: 22px; flex: none; background: center / contain no-repeat; }
#in-chosen::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230f766e'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#out-chosen::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ea580c'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#in-status, #slip-msg, #note-msg, #in-ai-msg, #np-ai-msg, #bar-msg { font-size: var(--fs-sm) !important; text-align: center; padding: 10px 12px; border-radius: 12px; background: var(--amber-soft); color: #92400e !important; border: 1px solid #fde68a; }

#in-exp-btn {
  width: 100%; min-height: 56px; border-radius: 12px; font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 0 14px; background: #fff !important; color: var(--text) !important; border: 1.5px solid var(--line-strong);
}
#in-exp-btn::before {
  content: ""; width: 22px; height: 22px; flex: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
body:has(#date-pick:not(.hidden)) #in-exp-btn { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
#date-pick { background: #f8fafc !important; border: 1px solid var(--line); border-radius: 14px !important; padding: 12px !important; }
#date-pick > * + * { margin-top: 10px !important; }
#date-pick > div:first-child button { min-height: 44px; padding: 0 14px !important; border-radius: 10px !important; background: #fff !important; color: var(--brand) !important; border: 1.5px solid #b7ddd6; font-weight: 700; font-size: var(--fs-sm); }
#date-year { font-size: var(--fs-md); color: var(--text) !important; }
#date-months, #date-days { gap: 6px !important; }
#date-months button, #date-days button { min-height: 46px; border-radius: 10px !important; font-size: var(--fs-md); font-weight: 600; background: #fff !important; color: var(--text) !important; border: 1px solid var(--line); }
#date-days button { min-height: 42px; padding: 0 !important; }
#date-months button.bg-teal-700 { background: var(--brand) !important; color: #fff !important; border-color: var(--brand); }
#date-months button:active, #date-days button:active { background: var(--brand-soft) !important; }

.reader:not(:empty), #reader-in:not(:empty), #reader-new:not(:empty) { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }

.file-btn { position: relative; cursor: pointer; }

/* ---------- 紀錄 ---------- */
#app .log-bar { padding: 12px 14px; }
#app .log-bar > * + * { margin-top: 10px; }
#log-sum { font-size: var(--fs-sm); font-weight: 700; color: #334155; }
#log-sum:empty { display: none; }
#day-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
#day-list::-webkit-scrollbar { display: none; }
#day-list button { flex: none; min-height: 40px; padding: 0 14px !important; border-radius: 999px !important; font-size: var(--fs-sm) !important; font-weight: 600; background: #fff !important; color: #334155 !important; border: 1.5px solid var(--line-strong); }
#day-list button.bg-teal-700 { background: var(--brand) !important; color: #fff !important; border-color: var(--brand); }
#today-log > * + * { margin-top: 8px !important; }
#today-log .log-row { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
#today-log .log-time { flex: none; font-size: var(--fs-sm); font-weight: 800; color: var(--text); min-width: 42px; padding-top: 2px; font-variant-numeric: tabular-nums; }
#today-log .log-main { flex: 1; min-width: 0; }
#today-log .log-title { display: flex; align-items: flex-start; gap: 8px; }
#today-log .log-tag { flex: none; font-size: var(--fs-xs); font-weight: 800; line-height: 1; padding: 5px 8px; border-radius: 6px; margin-top: 1px; }
#today-log .log-in .log-tag { background: #dcfce7; color: #15803d; }
#today-log .log-out .log-tag { background: #ffedd5; color: #c2410c; }
#today-log .log-add .log-tag { background: #dbeafe; color: #1d4ed8; }
#today-log .log-name { font-size: var(--fs-md); font-weight: 700; color: var(--text); line-height: 1.35; word-break: break-word; }
#today-log .log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: var(--fs-sm); color: #334155; }
#today-log .log-qty { font-weight: 700; }
#today-log .log-user { font-size: var(--fs-xs); color: var(--muted); }
#today-log .log-undone { font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
#today-log .is-undone .log-name, #today-log .is-undone .log-qty { text-decoration: line-through; color: var(--muted); }
#today-log .is-undone .log-tag { opacity: .5; }
#today-log .log-undo { flex: none; align-self: center; min-height: 36px; padding: 0 12px; border-radius: 8px; border: 1.5px solid #fca5a5; background: #fff; color: var(--red); font-weight: 700; font-size: var(--fs-sm); }
#today-log .log-undo:active { background: var(--red-soft); }

/* ---------- 貨品詳情 (built by app.js) ---------- */
#page-detail > div:first-child { border-radius: var(--radius) !important; border: 1px solid var(--line); padding: 18px !important; }
#page-detail > div:first-child .text-xl { font-size: var(--fs-lg); }
#page-detail > div:first-child .text-2xl { font-size: 22px; }
#page-detail > div.space-y-2 > div { border-radius: 14px !important; border: 1px solid var(--line); padding: 14px !important; }
#page-detail > div.space-y-2 > div > div:first-child { font-size: var(--fs-md); font-weight: 600; }
#page-detail > div.space-y-2 > div > div:first-child .font-bold { font-size: var(--fs-md); }
#page-detail button[onclick^="adj"], #page-detail button[onclick^="editExp"], #page-detail button[onclick^="delBatch"] {
  min-height: 46px; border-radius: 10px !important; border: 1.5px solid var(--line-strong) !important; background: #fff; font-size: var(--fs-sm) !important; font-weight: 700;
}
#page-detail button[onclick^="adj"] { font-size: 20px !important; color: var(--brand); }
#page-detail button[onclick^="delBatch"] { border-color: #fecaca !important; background: var(--red-soft); }
#page-detail > div.bg-white:not(:first-child) { border-radius: var(--radius) !important; border: 1px solid var(--line); }
#page-detail button[onclick^="delProduct"] { min-height: 52px; border-radius: 14px !important; font-weight: 700; border: 1.5px solid #fecaca; background: var(--red-soft) !important; color: var(--red) !important; }
#page-detail > * + * { margin-top: 12px; }

/* ---------- 設定 / 帳號 ---------- */
#page-set > div > p.font-medium, #page-accounts > div > p.font-medium { font-size: var(--fs-md); font-weight: 800; }
#page-set button.bg-teal-700, #page-accounts button.bg-teal-700 { min-height: 50px; border-radius: 14px !important; font-size: var(--fs-md); font-weight: 700; }
#page-set button.border, #page-accounts button.border { min-height: 50px; border-radius: 14px !important; font-weight: 700; border-width: 1.5px !important; }
#cat-edit { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#cat-edit > * + * { margin-top: 0 !important; border-top: 1px solid var(--line); }
#cat-edit .cat-row { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 4px 0 2px; background: #fff; }
#app #cat-edit input.cat-input {
  flex: 1; width: auto; min-width: 0; min-height: 40px; padding: 6px 10px; font-size: var(--fs-md); font-weight: 600;
  border: 1.5px solid transparent; background: transparent; border-radius: 8px; box-shadow: none; cursor: default;
}
#cat-edit .cat-n { font-size: var(--fs-xs); color: var(--muted); min-width: 22px; text-align: right; margin-right: 4px; }
#cat-edit .cat-ico { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); flex: none; }
#cat-edit .cat-ico .ico { width: 20px; height: 20px; }
#cat-edit .cat-ico:active { background: #f1f5f9; }
#cat-edit .cat-del { color: #ef4444; }
#cat-edit .cat-save, #cat-edit .cat-cancel { display: none; flex: none; min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: var(--fs-sm); font-weight: 700; }
#cat-edit .cat-save { background: var(--brand); color: #fff; }
#cat-edit .cat-cancel { background: #fff; color: #334155; border: 1.5px solid var(--line-strong); }
#cat-edit .cat-row.editing { background: var(--brand-soft); }
#app #cat-edit .cat-row.editing input.cat-input { background: #fff; border-color: var(--brand); cursor: text; }
#cat-edit .cat-row.editing .cat-save, #cat-edit .cat-row.editing .cat-cancel { display: inline-flex; align-items: center; }
#cat-edit .cat-row.editing .cat-ico, #cat-edit .cat-row.editing .cat-n { display: none; }
#app .cat-add { display: flex; align-items: stretch; gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
#app .cat-add input { flex: 1 1 0; min-width: 0; width: auto !important; }
#app .cat-add .btn { width: auto !important; flex: none; padding: 0 14px; min-height: 50px; }
#app .note { background: #f8fafc; border: 1px dashed var(--line-strong); box-shadow: none; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- bottom nav ---------- */
#nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: space-around;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line); padding: 4px 4px env(safe-area-inset-bottom);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
}
#nav.hidden { display: none !important; }
#nav button {
  flex: 1; min-height: var(--nav-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: var(--fs-xs); font-weight: 600; color: #64748b; border-radius: 12px;
}
#nav button .ico { width: 24px; height: 24px; }
#nav button:active { background: #f1f5f9; }
body:has(#page-home:not(.hidden)) #nav button[onclick="show('home')"],
body:has(#page-all:not(.hidden)) #nav button[onclick="show('all')"],
body:has(#page-detail:not(.hidden)) #nav button[onclick="show('all')"],
body:has(#page-history:not(.hidden)) #nav button[onclick="show('history')"],
body:has(#page-set:not(.hidden)) #nav button[onclick="show('set')"] { color: var(--brand); }
body:has(#page-in:not(.hidden)) #nav button[onclick="show('in')"] { color: var(--in); }
body:has(#page-out:not(.hidden)) #nav button[onclick="show('out')"] { color: var(--out); }
body:has(#page-home:not(.hidden)) #nav button[onclick="show('home')"] .ico,
body:has(#page-all:not(.hidden)) #nav button[onclick="show('all')"] .ico,
body:has(#page-detail:not(.hidden)) #nav button[onclick="show('all')"] .ico,
body:has(#page-history:not(.hidden)) #nav button[onclick="show('history')"] .ico,
body:has(#page-set:not(.hidden)) #nav button[onclick="show('set')"] .ico { background: var(--brand-soft); border-radius: 999px; padding: 2px; width: 44px; height: 26px; }
body:has(#page-in:not(.hidden)) #nav button[onclick="show('in')"] .ico { background: var(--in-soft); border-radius: 999px; padding: 2px; width: 44px; height: 26px; }
body:has(#page-out:not(.hidden)) #nav button[onclick="show('out')"] .ico { background: var(--out-soft); border-radius: 999px; padding: 2px; width: 44px; height: 26px; }

/* error banner built by app.js */
#err-banner { font-size: var(--fs-sm) !important; padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important; align-items: center !important; }
#err-banner button { min-height: 36px; min-width: 36px; font-size: 18px; }
#page-detail > div:first-child .text-sm { font-size: var(--fs-sm); }
#app .list-title { margin-top: 18px !important; }
#app button.border-l-4.border-red-500 { border-left-color: #ef4444; }
#app button.border-l-4.border-orange-400 { border-left-color: #fb923c; }
#app button.border-l-4.border-teal-400 { border-left-color: #2dd4bf; }

/* ---------- AI 相認貨 / 覆核清單 ---------- */
.file-btn input[type=file] { display: none; }
#in-ai-picks > * + * { margin-top: 6px; }
#in-ai-picks .ai-cand {
  display: block; width: 100%; min-height: 52px; text-align: left; padding: 12px 14px; font-size: var(--fs-md); font-weight: 600;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; color: var(--text);
}
#in-ai-picks .ai-cand span { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); margin-top: 2px; }
#in-ai-picks .ai-cand:active { border-color: var(--in); background: var(--in-soft); }
.ai-picks .ai-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-picks .ai-act { min-height: 46px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 700; background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.ai-picks .ai-act:active { background: var(--brand-soft); }
#np-ai-picks { display: flex; flex-wrap: wrap; gap: 6px; }
#np-ai-picks > * + * { margin-top: 0 !important; }
.ai-chip { min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--brand-soft); color: var(--brand); border: 1.5px solid #b7ddd6; }
.ai-list > * + * { margin-top: 8px; }
.ai-row { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; }
.ai-row > input[type=checkbox] { flex: none; width: 22px; height: 22px; margin-top: 14px; accent-color: var(--brand); }
#slip-items .ai-row > input[type=checkbox] { accent-color: var(--out); }
.ai-main { flex: 1; min-width: 0; }
.ai-main > * + * { margin-top: 6px; }
.ai-name { font-size: var(--fs-md); font-weight: 700; color: var(--text); word-break: break-word; }
.ai-sub { font-size: var(--fs-xs); color: var(--muted); word-break: break-word; }
.ai-line { display: flex; gap: 8px; }
#app .ai-row input.ai-qty { width: 84px !important; flex: none; min-height: 50px; text-align: center; font-weight: 700; padding: 8px !important; }
#app .ai-row input.ai-exp { flex: 1; min-width: 0; width: auto !important; }
.ai-qty-ro { flex: none; min-width: 40px; text-align: center; font-weight: 700; color: var(--muted); padding-top: 2px; }
.ai-row.is-skip { background: #f8fafc; border-style: dashed; }
.ai-row.is-skip .ai-name { color: var(--muted); }
#slip-items .ai-row.is-skip .ai-sub { color: var(--red); font-weight: 700; }
#note-items .ai-row.is-skip .ai-sub { color: var(--muted); font-weight: 400; }
#note-items .ai-row.is-skip select { border-style: dashed; color: var(--muted); }
.ai-list > .btn { margin-top: 12px; }

/* ---------- 紀錄：同事篩選 / 批量撤銷 ---------- */
#app .btn-danger { background: var(--red-soft); color: var(--red); border: 1.5px solid #fecaca; }
#app .btn-danger:active { background: #fee2e2; }

/* ---------- 帳號 ---------- */
#user-list > * + * { margin-top: 0; }
#user-list .u-row { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 10px 0; border-top: 1px solid var(--line); }
#user-list .u-row:first-child { border-top: 0; }
#user-list .u-info { flex: 1; min-width: 0; }
#user-list .u-name { font-size: var(--fs-md); font-weight: 700; word-break: break-all; }
#user-list .u-sub { font-size: var(--fs-xs); color: var(--muted); }
#user-list .u-sub.u-warn { color: var(--red); font-weight: 700; }
#user-list .u-acts { display: flex; gap: 6px; flex: none; }
#user-list .u-btn { min-height: 40px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-sm); font-weight: 700; background: #fff; color: #334155; border: 1.5px solid var(--line-strong); }
#user-list .u-btn.u-on { color: var(--brand); border-color: var(--brand); }
#user-list .u-btn.u-del { background: var(--red-soft); color: var(--red); border-color: #fecaca; }
#user-list .u-btn:active { transform: scale(.97); }

/* ---------- 登入頁連結 / 密碼確認 ---------- */
#gate #setup-link { min-height: 40px; background: transparent; color: var(--muted); font-size: var(--fs-xs); font-weight: 500; text-decoration: underline; }
#gate #setup-link:active { background: transparent; color: var(--text); }
#pw-form { border-radius: 20px !important; padding: 22px 20px !important; box-shadow: 0 20px 40px rgba(0,0,0,.2); }
#pw-form > * + * { margin-top: 12px; }
#pw-msg { font-size: var(--fs-md); font-weight: 800; }
#pw-input { min-height: 52px; font-size: var(--fs-md); border: 1.5px solid var(--line-strong) !important; border-radius: 12px !important; padding: 12px 14px !important; }
#pw-input:focus { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(15,118,110,.18); }
#pw-err:empty { display: none; }
#pw-form button { min-height: 50px; border-radius: 14px !important; font-size: var(--fs-md); font-weight: 700; }
#pw-cancel { border: 1.5px solid var(--line-strong) !important; color: #334155; background: #fff; }

.ai-row.is-new { border-color: #93c5fd; background: #eff6ff; }
.ai-row.is-new.is-skip { background: #f8fafc; border-style: dashed; border-color: var(--line-strong); }
.ai-new-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-tag { flex: none; font-size: var(--fs-xs); font-weight: 800; line-height: 1; padding: 5px 8px; border-radius: 6px; background: #dbeafe; color: #1d4ed8; }
.ai-new-ask { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
.ai-new-ask input { width: 18px; height: 18px; accent-color: #1d4ed8; }
.ai-new-form { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: #fff; border: 1.5px solid #bfdbfe; }
.ai-new-form.hidden { display: none; }
.ai-new-form .field { margin: 0; }
.ai-new-form .field-label { font-size: var(--fs-xs); }
#note-items .ai-row.is-new select:disabled { opacity: .55; }
.ai-row.is-ask { border-color: #fcd34d; background: var(--amber-soft); }
.ai-row.is-ask select { border-color: #f59e0b; }
#brand-bar:not(:empty) { border-top: 1px solid var(--line); padding-top: 10px; margin: 0 16px !important; padding-left: 0; padding-right: 0; }
.ai-row.is-short { border-color: #fca5a5; background: var(--red-soft); }
.ai-row.is-short .ai-qty { border-color: var(--red) !important; color: var(--red); }
.ai-row.is-empty { background: #f8fafc; border-style: dashed; }
.ai-row.is-empty select, .ai-row.is-empty .ai-qty { color: var(--muted); background-color: #f1f5f9 !important; }
.ai-sub.ai-warn { color: var(--red); font-weight: 700; }
.ai-row.is-empty .ai-sub.ai-warn { color: var(--muted); }

/* 貨品頁：改商品 */
#page-detail .ed-card > * + * { margin-top: 10px; }
#page-detail .ed-msg:empty { display: none; }
#page-detail .ed-msg { padding: 10px 12px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 700; }
#page-detail .ed-msg.ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
#page-detail .ed-msg.err { background: var(--red-soft); color: var(--red); border: 1px solid #fecaca; }

/* 牌子揀選（新品牌）／合併品牌 */
#app .brand-new { margin-top: 8px; }
#app .brand-hint:empty { display: none; }
#app .brand-hint { margin-top: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }
#brand-box > * + * { margin-top: 10px; }

/* 背景通知（例如網絡返咗之後話頭先嗰筆已經儲存） */
#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); max-width: min(92vw, 420px);
  background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(15,23,42,.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 舊名／別名 ---------- */
#page-detail .alias-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
#page-detail .alias-list:empty { display: none; }
#page-detail .alias-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600; background: var(--violet-soft); color: var(--violet); border: 1.5px solid #ddd6fe; }
#page-detail .alias-chip button { width: 28px; height: 28px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--violet); background: transparent; border: 0; line-height: 1; }
#page-detail .alias-chip button:active { background: #ede9fe; }
#page-detail .alias-add { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
#page-detail .alias-add input { flex: 1 1 0; min-width: 0; width: auto !important; }
#page-detail .alias-add .alias-add-btn,
#page-detail .alias-add-btn { flex: none; width: auto !important; min-width: 44px; min-height: 50px; padding: 0 12px; }