/* Sugar8 庫存管理 PWA — 統一樣式
   配色語意：Sugar8 粉 #E91E63 / Studio 藍 #2196F3 / TW 綠 #4CAF50
   觸控區一律 ≥ 44pt，配合線框圖 v2 規格 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: #FAFAFA; color: #1A1A1A;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body {
  min-height: 100vh; min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ─── 顏色變數 ─── */
:root {
  --pink: #E91E63; --pink-bg: #FCE4EC;
  --studio: #2196F3; --studio-bg: #E3F2FD;
  --tw: #4CAF50; --tw-bg: #E8F5E9;
  --warn: #FF9800; --warn-bg: #FFF3E0;
  --err: #F44336; --err-bg: #FFEBEE;
  --tp: #1A1A1A; --ts: #757575; --tx: #BDBDBD;
  --bd: #E5E5E5;
}

/* ─── 通用元件 ─── */
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; background: #FAFAFA; }
.app[data-store="studio"] { --store: var(--studio); --store-bg: var(--studio-bg); }
.app[data-store="tw"] { --store: var(--tw); --store-bg: var(--tw-bg); }

.header {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: #FFF;
  border-bottom: 1px solid var(--bd);
  position: sticky; top: 0; z-index: 10;
}
.header .back { font-size: 22px; cursor: pointer; padding: 4px 8px; margin-left: -8px; }
.header .title { flex: 1; font-size: 17px; font-weight: 700; text-align: center; }
.header .right { display: flex; align-items: center; gap: 8px; }

.store-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 16px;
  background: var(--store-bg); border: 1.5px solid var(--store);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  color: var(--tp);
}
.store-pill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--store);
}
/* scan-screen 暗底 → store-pill 改反差風 */
.scan-screen .store-pill {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: #FFF;
}

/* pool-chip：進貨流程「進未分配池」標識（取代 emoji + inline style）*/
.pool-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; border-radius: 16px;
  background: var(--warn-bg); border: 1.5px solid var(--warn);
  font-size: 12px; font-weight: 600; color: var(--warn);
}
.pool-chip .icon-sm { color: var(--warn); }
.scan-screen .pool-chip {
  background: rgba(255,152,0,.15);
  border-color: rgba(255,152,0,.5);
  color: #FFB74D;
}
.scan-screen .pool-chip .icon-sm { color: #FFB74D; }

/* 進貨配色 button (原 inline #FF9800) */
.btn-pool {
  background: var(--warn); color: #FFF; border: none;
}
.btn-pool:disabled { background: #BDBDBD; }

.section { padding: 16px; }
.card { background: #FFF; border: 1px solid var(--bd); border-radius: 12px; }
.card-padded { padding: 16px; }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 56px; padding: 0 20px;
  border: none; border-radius: 12px;
  font-family: inherit; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: #1A1A1A; color: #FFF; }
.btn-store { background: var(--store); color: #FFF; }
.btn-success { background: var(--tw); color: #FFF; }
.btn-danger { background: var(--err); color: #FFF; }
.btn-ghost { background: #FFF; border: 1px solid var(--bd); color: var(--tp); }
.btn-pill {
  flex: 1; min-height: 48px; border-radius: 24px;
  background: #FFF; border: 1px solid #D0D0D0; color: var(--tp);
}

.input {
  display: block; width: 100%;
  padding: 16px; min-height: 56px;
  border: 1px solid #D0D0D0; border-radius: 8px;
  font-family: inherit; font-size: 16px;
  background: #FFF;
}
.input:focus { outline: 2px solid var(--pink); border-color: var(--pink); }

.label { font-size: 12px; color: var(--ts); font-weight: 600; margin-bottom: 8px; display: block; }

/* ─── Login ─── */
.login {
  min-height: 100dvh; padding: 40px 32px;
  display: flex; flex-direction: column; justify-content: center;
}
.login .logo { text-align: center; margin-bottom: 48px; }
.login .logo h1 { font-size: 48px; font-weight: 800; color: var(--pink); margin: 0; }
.login .logo p { color: var(--ts); margin: 4px 0 0; }
.login .form { display: flex; flex-direction: column; gap: 16px; }
.login .install-hint {
  margin-top: 24px; padding: 16px;
  background: var(--warn-bg); border: 1px solid #FFB74D; border-radius: 8px;
  font-size: 13px; line-height: 1.5;
}
.login .footer { margin-top: auto; text-align: center; color: var(--ts); font-size: 11px; padding-top: 32px; }

/* ─── Icons (lucide style，搭配 SVG sprite) ─── */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; flex-shrink: 0; }
.icon-sm { width: 14px; height: 14px; stroke: currentColor; fill: none; flex-shrink: 0; }
.icon-lg { width: 32px; height: 32px; stroke: currentColor; fill: none; flex-shrink: 0; }
.icon-block {
  width: 44px; height: 44px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-block .icon { width: 24px; height: 24px; }

/* ─── Home（v3 with SVG icons）─── */
.home-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #FFF;
  border-bottom: 1px solid var(--bd);
  position: sticky; top: 0; z-index: 5;
}
.home-store-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--studio-bg); border: 1.5px solid var(--studio);
  font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--tp);
}
.app[data-store="tw"] .home-store-pill { background: var(--tw-bg); border-color: var(--tw); }
.home-store-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--studio); }
.app[data-store="tw"] .home-store-pill .dot { background: var(--tw); }
.home-store-pill .icon-sm { width: 14px; height: 14px; opacity: .6; color: var(--studio); }
.app[data-store="tw"] .home-store-pill .icon-sm { color: var(--tw); }

.home-user-zone { display: flex; align-items: center; gap: 8px; }
.home-mode-chip {
  font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 8px;
}
.home-mode-chip--ro { background: var(--studio-bg); color: #1565C0; }
.home-mode-chip--live { background: var(--err-bg); color: #C62828; font-weight: 700; }
.home-user-name { font-size: 13px; color: var(--tp); font-weight: 600; }
.home-logout-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: var(--ts);
}
.home-logout-btn:hover { background: #F5F5F5; }
.home-logout-btn .icon { width: 18px; height: 18px; }

.home-title { padding: 20px 16px 12px; }
.home-title h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.home-title p { margin: 4px 0 0; color: var(--ts); font-size: 13px; }

.home-summary {
  margin: 0 16px 16px; padding: 16px;
  background: #FFF; border: 1px solid var(--bd); border-radius: 14px;
  position: relative;
}
.home-summary-label { font-size: 11px; color: var(--ts); }
.home-summary-num { font-size: 34px; font-weight: 800; line-height: 1; margin-top: 4px; }
.home-summary-num span { font-size: 13px; color: var(--ts); font-weight: 400; margin-left: 4px; }
.home-summary-link {
  position: absolute; bottom: 14px; right: 14px;
  font-size: 11px; color: var(--ts); cursor: pointer;
}
.home-summary-stats {
  margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.home-summary-stats .item { display: flex; flex-direction: column; gap: 4px; }
.home-summary-stats .item .row {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--ts);
}
.home-summary-stats .item b { font-size: 16px; font-weight: 700; color: var(--tp); }

.home-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  padding: 0 16px 12px;
}
.func-card {
  background: #FFF; border: 1px solid var(--bd); border-radius: 14px;
  padding: 14px 12px; display: flex; flex-direction: column; gap: 8px;
  cursor: pointer; transition: transform .1s, box-shadow .15s;
}
.func-card:active { transform: scale(.97); }
.func-card .icon-block { width: 36px; height: 36px; border-radius: 10px; }
.func-card .icon-block .icon { width: 20px; height: 20px; }
.func-card .name { font-size: 14px; font-weight: 700; color: var(--tp); }
.func-card .desc { color: var(--ts); font-size: 10px; margin-top: 2px; }

.func-card-wide {
  display: flex; align-items: center; gap: 14px;
  margin: 0 16px 12px;
  background: #FFF; border: 1px solid var(--bd); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; transition: transform .1s;
}
.func-card-wide:active { transform: scale(.98); }
.func-card-wide .text { flex: 1; min-width: 0; }
.func-card-wide .text .name { font-size: 16px; font-weight: 700; }
.func-card-wide .text .desc { font-size: 11px; color: var(--ts); margin-top: 2px; }
.func-card-wide .arrow .icon { color: var(--tx); width: 18px; height: 18px; }

.home-alert {
  margin: 0 16px 12px; padding: 12px 14px;
  background: var(--warn-bg); border: 1px solid #FFB74D; border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
}
.home-alert .icon { color: var(--warn); width: 20px; height: 20px; }
.home-alert .text { flex: 1; min-width: 0; }
.home-alert .text .title { font-size: 13px; font-weight: 700; color: var(--warn); }
.home-alert .text .body { font-size: 12px; color: var(--tp); margin-top: 2px; }

.home-footer {
  text-align: center; padding: 20px 16px 8px;
  font-size: 11px; color: var(--tx);
}

/* ─── Modal ─── */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
.modal-sheet {
  background: #FFF; border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 16px 20px env(safe-area-inset-bottom, 20px);
  animation: slideUp .25s ease;
  max-height: 90vh; overflow-y: auto;
}
.modal-sheet .handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: #D0D0D0; margin: 0 auto 16px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(40px); } to { transform: translateY(0); } }

.store-card {
  display: flex; gap: 12px; padding: 16px;
  border: 1px solid var(--bd); border-radius: 16px;
  margin-bottom: 12px; cursor: pointer;
}
.store-card.active { background: var(--store-bg); border-color: var(--store); border-width: 2px; }
.store-card .dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.store-card .info { flex: 1; }
.store-card .info h3 { margin: 0 0 4px; font-size: 17px; }
.store-card .info p { margin: 2px 0; font-size: 12px; color: var(--ts); }
.store-card .badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: var(--store); color: #FFF; font-weight: 600;
}

/* ─── Scan fullscreen overlay（整頁掃碼）─── */
.scan-fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  background: #1A1A1A; color: #FFF;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  animation: fadeIn .18s ease;
}
.scan-fullscreen .header { color: #FFF; }
.scan-fullscreen .header .back { color: #FFF; cursor: pointer; padding: 4px 8px; margin-left: -8px; display: flex; align-items: center; }
.scan-fullscreen .header .title { color: #FFF; }

/* ─── Scan camera ─── */
.scan-screen {
  background: #1A1A1A; min-height: 100dvh;
  display: flex; flex-direction: column; color: #FFF;
}
.scan-screen .header {
  background: transparent; border-bottom: none; color: #FFF;
}
.scan-screen .header .title { color: #FFF; }
.scan-screen .header .back { color: #FFF; }
.scan-viewport {
  position: relative; margin: 0 16px;
  aspect-ratio: 1; background: #000;
  border-radius: 16px; overflow: hidden;
  border: 2px dashed var(--store, var(--pink));
}
.scan-viewport video { width: 100%; height: 100%; object-fit: cover; }
.scan-viewport .corners { position: absolute; inset: 12%; pointer-events: none; }
.scan-viewport .corners > div {
  position: absolute; width: 24px; height: 24px;
  border: 3px solid #FFF;
}
.scan-viewport .corners > div:nth-child(1) { top: 0; left: 0; border-right: none; border-bottom: none; }
.scan-viewport .corners > div:nth-child(2) { top: 0; right: 0; border-left: none; border-bottom: none; }
.scan-viewport .corners > div:nth-child(3) { bottom: 0; left: 0; border-right: none; border-top: none; }
.scan-viewport .corners > div:nth-child(4) { bottom: 0; right: 0; border-left: none; border-top: none; }
.scan-viewport .scan-line {
  position: absolute; left: 12%; right: 12%; height: 2px;
  background: var(--pink); animation: scan 2s ease-in-out infinite alternate;
  box-shadow: 0 0 8px var(--pink);
}
@keyframes scan { from { top: 14%; } to { top: 86%; } }
.scan-helper {
  text-align: center; color: rgba(255,255,255,.85);
  margin-top: 24px; font-size: 14px;
}
.scan-actions { padding: 16px; }
.scan-actions .btn-ghost { background: transparent; border-color: rgba(255,255,255,.3); color: #FFF; }

/* ─── Confirm step ─── */
.product-card { display: flex; gap: 12px; align-items: center; padding: 16px; }
.product-card .img {
  width: 88px; height: 88px; border-radius: 8px;
  background: #F5F5F5; border: 1px solid #DDD;
  display: flex; align-items: center; justify-content: center;
  color: var(--ts); font-size: 11px; flex-shrink: 0;
}
.product-card .info { flex: 1; min-width: 0; }
.product-card .info h3 { margin: 0 0 4px; font-size: 16px; }
.product-card .info .spec { color: var(--ts); font-size: 13px; }
.product-card .info .sku {
  display: inline-block; margin-top: 6px; padding: 3px 8px;
  background: #F0F0F0; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 11px;
}

.dual-stock { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.dual-stock .stock-card {
  padding: 16px; border-radius: 12px;
  background: #FFF; border: 1px solid var(--bd);
  text-align: center;
}
.dual-stock .stock-card.active {
  background: var(--store-bg); border-color: var(--store); border-width: 2px;
}
.dual-stock .stock-card .label { display: flex; align-items: center; gap: 6px; justify-content: flex-start; margin-bottom: 8px; }
.dual-stock .stock-card .label .dot { width: 10px; height: 10px; border-radius: 50%; }
.dual-stock .stock-card .label .dot.studio { background: var(--studio); }
.dual-stock .stock-card .label .dot.tw { background: var(--tw); }
.dual-stock .stock-card .label .name { font-size: 13px; font-weight: 600; }
.dual-stock .stock-card .num { font-size: 36px; font-weight: 800; }
.dual-stock .stock-card .unit { font-size: 11px; color: var(--ts); }

.qty-input {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: #FFF; border: 1px solid var(--bd); border-radius: 12px;
}
.qty-input button {
  width: 56px; height: 48px; border-radius: 8px; border: none;
  font-size: 28px; font-weight: 700; cursor: pointer;
}
.qty-input button.minus { background: #F5F5F5; color: var(--tp); }
.qty-input button.plus { background: var(--store); color: #FFF; }
.qty-input button.danger { background: var(--err); color: #FFF; }
.qty-input .value { flex: 1; font-size: 40px; font-weight: 800; text-align: center; }

.quick-row { display: flex; gap: 8px; margin: 12px 0; padding: 0 16px; }

.preview-math {
  margin: 16px; padding: 14px;
  border-radius: 8px; background: var(--warn-bg);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 14px;
}
.preview-math .calc { font-size: 20px; font-weight: 700; }
.preview-math.danger { background: var(--err-bg); }
.preview-math.danger .calc { color: var(--err); }

.warn-banner {
  margin: 16px; padding: 16px;
  background: var(--err-bg); border: 2px solid var(--err);
  border-radius: 12px;
}
.warn-banner h4 { margin: 0 0 6px; color: var(--err); font-size: 18px; font-weight: 700; }
.warn-banner p { margin: 4px 0; font-size: 13px; }

/* ─── Success ─── */
.success-screen {
  min-height: 100dvh; padding: 60px 32px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.success-icon {
  width: 128px; height: 128px; border-radius: 50%;
  background: var(--tw-bg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.success-icon.danger { background: var(--err-bg); }
.success-icon .check {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--tw); display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: #FFF;
}
.success-icon.danger .check { background: var(--err); }
.success-screen h2 { margin: 0; font-size: 26px; font-weight: 800; }
.success-screen .subtitle { color: var(--ts); margin-top: 8px; }
.success-delta {
  margin: 32px 0 24px; padding: 24px;
  background: #FFF; border: 1px solid var(--bd); border-radius: 16px;
  width: 100%;
}
.success-delta .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; }
.success-delta .row.delta { padding: 16px 0 4px; align-items: baseline; }
.success-delta .delta-from { font-size: 32px; font-weight: 700; color: var(--ts); }
.success-delta .delta-arrow { margin: 0 12px; font-size: 24px; color: var(--ts); }
.success-delta .delta-to { font-size: 36px; font-weight: 800; color: var(--tw); }
.success-delta .delta-diff { color: var(--ts); margin-left: 12px; }
.success-screen .actions { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

/* ─── Stock check ─── */
.search-row {
  display: flex; gap: 8px; padding: 16px;
}
.search-row input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--bd); border-radius: 24px;
  font-size: 15px; min-height: 48px;
}
.search-row .scan-btn {
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: var(--studio); color: #FFF; font-size: 18px;
}

.cross-stock {
  margin: 0 16px; padding: 0; background: #FFF;
  border: 1px solid var(--bd); border-radius: 16px;
  list-style: none;
}
.cross-stock li {
  display: flex; align-items: center; padding: 16px;
  border-bottom: 1px solid var(--bd);
}
.cross-stock li:last-child { border-bottom: none; }
.cross-stock li .dot { width: 14px; height: 14px; border-radius: 50%; margin-right: 12px; }
.cross-stock li .name { flex: 1; font-size: 16px; font-weight: 600; }
.cross-stock li .num { font-size: 28px; font-weight: 800; }
.cross-stock li .unit { font-size: 13px; color: var(--ts); margin-left: 4px; }
.cross-stock li.total .num { font-size: 22px; font-weight: 700; }

/* ─── Log ─── */
.filter-row { display: flex; gap: 8px; padding: 8px 16px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px; border-radius: 16px;
  background: #FFF; border: 1px solid #D0D0D0;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.chip.active { background: #1A1A1A; color: #FFF; border-color: #1A1A1A; }

.log-list { padding: 0 16px; list-style: none; margin: 0; }
.log-group-header { padding: 8px 0; font-size: 11px; color: var(--ts); font-weight: 600; }
.log-list li {
  background: #FFF; border: 1px solid var(--bd); border-radius: 8px;
  padding: 12px; margin-bottom: 8px;
}
.log-list li .top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ts); margin-bottom: 6px; }
.log-list li .top .dot { width: 8px; height: 8px; border-radius: 50%; }
.log-list li .top .qty {
  margin-left: auto; padding: 2px 8px; border-radius: 8px; font-size: 10px; font-weight: 700;
}
.log-list li .top .qty.in { background: var(--tw-bg); color: var(--tw); }
.log-list li .top .qty.out { background: var(--err-bg); color: var(--err); }
.log-list li .top .qty.return { background: var(--warn-bg); color: var(--warn); }
.log-list li .product { font-size: 13px; font-weight: 600; }
.log-list li .meta { font-size: 11px; color: var(--ts); margin-top: 2px; }

/* ─── Toast / Loading ─── */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #1A1A1A; color: #FFF; padding: 12px 20px; border-radius: 24px;
  font-size: 14px; z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

.loading-overlay {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(255,255,255,.8); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 4px solid #E5E5E5; border-top-color: var(--pink);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Offline banner ─── */
.offline-banner {
  background: var(--warn); color: #FFF;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
}

/* ─── Responsive ─── */
@media (min-width: 481px) {
  .app { box-shadow: 0 0 0 1px var(--bd); }
}