/* theme.css — 日本代購 design tokens（淺色質感 / 溫潤紙感） */
:root {
  --app-bg:        #F4F1EC;   /* 暖紙白 */
  --app-bg-2:      #ECE8E1;
  --app-card:      #FFFFFF;
  --app-card-2:    #FAF8F4;
  --app-border:    #E5E0D7;   /* 暖灰邊 */
  --app-border-2:  #EFEBE3;
  --app-text:      #2C2A25;   /* 墨黑 */
  --app-text-dim:  #6E6A61;
  --app-text-faint:#A29C90;
  --app-ink:       #33312B;   /* 主按鈕墨色 */
  --app-ink-2:     #514E45;
  --app-accent:    #B4553B;   /* 陶土紅（連結 / 強調 / 價格） */
  --app-accent-2:  #9C4630;
  --app-violet:    #5A6094;   /* 日幣價（靛藍） */
  --app-ok:        #3E8E5A;   /* 省下 / 已買到 */
  --app-warn:      #B07D1E;   /* 許願 / 提醒 */
  --app-danger:    #C0472F;   /* 缺貨 / 刪除 */
  --app-uniqlo:    #C0392B;
  --app-gu:        #3B66B4;
  --app-radius:    16px;
  --app-radius-sm: 11px;
  --app-shadow:    0 1px 2px rgba(60,50,38,.05), 0 6px 18px rgba(60,50,38,.07);
  --app-shadow-lg: 0 8px 30px rgba(60,50,38,.14);
  --app-glow:      0 4px 14px rgba(180,85,59,.22);
  --app-font-num:  "SF Mono", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--app-bg);
  background-image:
    radial-gradient(ellipse 70% 40% at 50% -8%, rgba(180,85,59,.05), transparent 70%),
    radial-gradient(ellipse 60% 40% at 92% 108%, rgba(90,96,148,.045), transparent 70%);
  color: var(--app-text);
  font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px; line-height: 1.6;
  min-height: 100vh; overflow-x: hidden;
}
a { color: var(--app-accent); text-decoration: none; }
img { max-width: 100%; }

/* ---------- 版面 ---------- */
.uq-page   { max-width: 640px; margin: 0 auto; padding: 14px 14px 96px; }
.uq-wide   { max-width: 1100px; }
.uq-center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }

.uq-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 12px; }
.uq-logo   { font-weight: 800; font-size: 18px; letter-spacing: .5px; }
.uq-logo span { color: var(--app-accent); margin-left: 6px; font-size: 13px; font-weight: 700; }

/* ---------- 底部玻璃導覽（液態膠囊，仿 trip_line navp） ---------- */
.uq-tabbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 80;
  max-width: 616px; margin: 0 auto;
  display: flex; gap: 2px; padding: 7px 6px; border-radius: 28px;
  background: rgba(255,255,255,.52);
  -webkit-backdrop-filter: blur(26px) saturate(185%); backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 12px 34px rgba(60,50,38,.20), inset 0 1px 0 rgba(255,255,255,.7);
}
.uq-tabbar::before { content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:38px; height:5px; border-radius:3px; background:rgba(140,132,120,.4); }
.uq-tabbar a {
  flex: 1; min-width: 0; text-align: center; text-decoration: none; color: var(--app-text-dim);
  font-size: 11px; font-weight: 700; line-height: 1.15; padding: 6px 2px; border-radius: 20px;
  transition: transform .2s, background .2s, color .2s;
}
.uq-tabbar a .ic { display: block; font-size: 20px; margin-bottom: 2px; line-height: 1; }
.uq-tabbar a.on { color: #fff; background: linear-gradient(135deg, var(--app-ink), var(--app-ink-2));
  box-shadow: 0 6px 16px rgba(51,49,43,.42); transform: translateY(-3px); }

/* ---------- 卡片 ---------- */
.uq-card {
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  padding: 16px;
}
.uq-card + .uq-card { margin-top: 12px; }
.uq-login-card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; text-align: center; }

/* ---------- 按鈕 ---------- */
.uq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--app-border); border-radius: var(--app-radius-sm);
  background: var(--app-card); color: var(--app-text);
  padding: 10px 16px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter .15s, transform .05s, background .15s; text-decoration: none;
}
.uq-btn:active { transform: scale(.97); }
.uq-btn:disabled { opacity: .45; cursor: not-allowed; }
.uq-btn-primary { background: linear-gradient(135deg, var(--app-ink), var(--app-ink-2)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(51,49,43,.22); }
.uq-btn-accent  { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-2)); color: #fff; border-color: transparent; box-shadow: var(--app-glow); }
.uq-btn-danger  { color: var(--app-danger); border-color: rgba(192,71,47,.35); background: rgba(192,71,47,.05); }
.uq-btn-ghost   { background: transparent; }
.uq-btn-block   { width: 100%; }
.uq-btn-sm      { padding: 7px 11px; font-size: 13px; border-radius: 9px; }

/* ---------- 表單 ---------- */
input, select, textarea {
  width: 100%; background: var(--app-card-2); color: var(--app-text);
  border: 1px solid var(--app-border); border-radius: var(--app-radius-sm);
  padding: 11px 12px; font-size: 16px; outline: none; font-family: inherit;  /* 16px：避免 iOS 聚焦時自動放大 */
}
input:focus, select:focus, textarea:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(180,85,59,.12); background: #fff; }
label.uq-label { display: block; font-size: 12px; color: var(--app-text-dim); margin: 12px 0 5px; font-weight: 600; }
label.uq-label .req { color: var(--app-danger); }
.uq-err { color: var(--app-danger); font-size: 13px; }

/* ---------- 商品 / 清單列 ---------- */
.uq-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--app-border-2); }
.uq-item:last-child { border-bottom: none; }
.uq-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: var(--app-bg-2); }
.uq-item-name  { font-weight: 700; font-size: 14px; }
.uq-item-sub   { font-size: 12px; color: var(--app-text-faint); }
.uq-item-attrs { font-size: 12px; color: var(--app-text-dim); }
.uq-item-oos .uq-item-name, .uq-item-oos .uq-item-attrs { text-decoration: line-through; color: var(--app-text-faint); }
.uq-price      { font-family: var(--app-font-num); font-weight: 800; color: var(--app-accent); }
.uq-price-red  { font-family: var(--app-font-num); font-weight: 800; color: var(--app-danger); }
.uq-jpy        { font-family: var(--app-font-num); color: var(--app-violet); font-weight: 700; }

/* ---------- 商品卡（查詢結果，仿 Flex 卡片） ---------- */
.uq-pcard { background: var(--app-card); border: 1px solid var(--app-border); border-radius: var(--app-radius);
            box-shadow: var(--app-shadow); overflow: hidden; }
.uq-pcard-hero { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--app-bg-2); display: block; }
.uq-pcard-body { padding: 15px 16px 8px; }
.uq-pcard-name { font-weight: 800; font-size: 17px; line-height: 1.35; }
.uq-pcard-jp   { font-size: 12px; color: var(--app-text-faint); margin-top: 1px; }
.uq-pcard-meta { font-size: 12px; color: var(--app-text-dim); margin-top: 6px; }
.uq-pcard-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--app-border-2); }
.uq-pcard-price .now { font-family: var(--app-font-num); font-size: 24px; font-weight: 800; color: var(--app-violet); }
.uq-pcard-price .now.promo { color: var(--app-danger); }
.uq-pcard-price .was { font-family: var(--app-font-num); font-size: 13px; color: var(--app-text-faint); text-decoration: line-through; }
.uq-pcard-price .twd { font-size: 12px; color: var(--app-text-dim); margin-left: auto; }
.uq-pcard-foot { display: flex; gap: 10px; padding: 8px 16px 16px; }

/* ---------- 徽章 ---------- */
.uq-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.uq-badge-cyan   { background: rgba(90,96,148,.12);  color: var(--app-violet); }
.uq-badge-ok     { background: rgba(62,142,90,.13);  color: var(--app-ok); }
.uq-badge-warn   { background: rgba(176,125,30,.15); color: var(--app-warn); }
.uq-badge-danger { background: rgba(192,71,47,.12);  color: var(--app-danger); }
.uq-badge-dim    { background: rgba(110,106,97,.12); color: var(--app-text-dim); }
.uq-badge-uniqlo { background: rgba(192,57,43,.11);  color: var(--app-uniqlo); }
.uq-badge-gu     { background: rgba(59,102,180,.12); color: var(--app-gu); }

/* ---------- 總計列 ---------- */
.uq-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: 14px; }
.uq-total-row .k { color: var(--app-text-dim); }
.uq-total-big { font-size: 20px; }
.uq-note { font-size: 11px; color: var(--app-text-faint); line-height: 1.5; }
.uq-saving { color: var(--app-ok); font-family: var(--app-font-num); font-weight: 800; }

/* ---------- 底部行動列（浮在玻璃導覽之上，例：送出訂單） ---------- */
.uq-bottom-bar {
  position: fixed; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: 616px; margin: 0 auto; border-radius: 18px;
  background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--app-border); box-shadow: var(--app-shadow-lg);
  padding: 12px 14px;
}
.uq-bottom-bar .inner { display: flex; gap: 10px; align-items: center; }
/* 有底部行動列的頁面，內容留更多空間避免被遮 */
body:has(.uq-bottom-bar) .uq-page { padding-bottom: 176px; }

/* ---------- Modal ---------- */
.uq-modal-mask { position: fixed; inset: 0; background: rgba(44,42,37,.42); backdrop-filter: blur(2px); z-index: 100;
                 display: flex; align-items: flex-end; justify-content: center; }
.uq-modal { width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
            background: var(--app-card); border: 1px solid var(--app-border);
            border-radius: 20px 20px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
            box-shadow: var(--app-shadow-lg); }
@media (min-width: 700px) { .uq-modal-mask { align-items: center; } .uq-modal { border-radius: 20px; } }
.uq-modal h3 { font-size: 16px; margin-bottom: 10px; }

/* ---------- 狀態畫面 ---------- */
.uq-state { text-align: center; padding: 56px 20px; color: var(--app-text-dim); }
.uq-state .icon { font-size: 44px; margin-bottom: 12px; }
.uq-spinner { width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%;
              border: 3px solid var(--app-border); border-top-color: var(--app-accent);
              animation: uqspin .8s linear infinite; }
@keyframes uqspin { to { transform: rotate(360deg); } }

/* ---------- 表格（admin） ---------- */
.uq-table-wrap { overflow-x: auto; }
table.uq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.uq-table th { text-align: left; color: var(--app-text-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--app-border); white-space: nowrap; }
.uq-table td { padding: 9px 10px; border-bottom: 1px solid var(--app-border-2); vertical-align: middle; }
.uq-table tr:hover td { background: rgba(180,85,59,.03); }

/* ---------- admin 導覽 ---------- */
.uq-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.uq-nav a { padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--app-text-dim); }
.uq-nav a.on { background: var(--app-ink); color: #fff; }

/* ---------- 統計磚 ---------- */
.uq-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.uq-stat .v { font-family: var(--app-font-num); font-size: 24px; font-weight: 800; color: var(--app-accent); }
.uq-stat .k { font-size: 12px; color: var(--app-text-dim); }

/* ---------- 組合列（加入購物車） ---------- */
.uq-combo-row { display: grid; grid-template-columns: 1fr 1fr 74px 34px; gap: 8px; margin-bottom: 8px; align-items: center; }
.uq-combo-del { background: none; border: none; color: var(--app-danger); font-size: 18px; cursor: pointer; }

/* ---------- 購物車圓鈕（右下角，浮在玻璃導覽上方） ---------- */
.uq-fab {
  position: fixed; right: 16px; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 82;
  width: 58px; height: 58px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: linear-gradient(140deg, var(--app-accent), var(--app-accent-2)); color: #fff;
  box-shadow: 0 8px 24px rgba(180,85,59,.44), inset 0 1px 0 rgba(255,255,255,.35);
  text-decoration: none;
}
.uq-fab:active { transform: scale(.94); }
/* 有底部行動列（送出訂單）時，購物車鈕再往上讓開 */
body:has(.uq-bottom-bar) .uq-fab { bottom: calc(154px + env(safe-area-inset-bottom)); }
.uq-fab-badge {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 999px; background: var(--app-ink); color: #fff;
  font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}

/* ---------- 查詢中心 tabs ---------- */
.uq-brand-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.uq-brand-tab {
  flex: 1; min-width: 0; text-align: center; padding: 12px 4px; border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border); background: var(--app-card);
  font-weight: 800; font-size: 14px; cursor: pointer; color: var(--app-text-dim);
  box-shadow: var(--app-shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- 分段控制（品牌切換） ---------- */
.uq-seg { display: flex; background: var(--app-bg-2); border: 1px solid var(--app-border); border-radius: 13px; padding: 3px; }
.uq-seg button { flex: 1; min-width: 0; text-align: center; padding: 10px 4px; border-radius: 10px;
  font-size: 14px; font-weight: 800; color: var(--app-text-dim); background: none; border: none; cursor: pointer;
  transition: background .15s, color .15s; }
.uq-seg button.on-uniqlo { background: #fff; color: var(--app-uniqlo); box-shadow: var(--app-shadow); }
.uq-seg button.on-gu     { background: #fff; color: var(--app-gu);     box-shadow: var(--app-shadow); }
.uq-seg button.on-wish   { background: #fff; color: var(--app-warn);   box-shadow: var(--app-shadow); }

/* ---------- 區塊標題 / 橫向縮圖捲軸 ---------- */
.uq-sec-title { font-weight: 800; font-size: 14px; margin: 0 2px 8px; display: flex; justify-content: space-between; align-items: baseline; }
.uq-sec-title a { font-size: 12px; font-weight: 700; }
.uq-hscroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.uq-hscroll::-webkit-scrollbar { display: none; }
.uq-thumb { flex: 0 0 100px; width: 100px; text-decoration: none; color: inherit; }
.uq-thumb .imgwrap { position: relative; }
.uq-thumb img { width: 100px; height: 100px; object-fit: cover; border-radius: 14px; background: var(--app-bg-2);
  border: 1px solid var(--app-border); box-shadow: var(--app-shadow); display: block; }
.uq-thumb .ovl { position: absolute; top: 5px; left: 5px; transform: scale(.86); transform-origin: top left;
  box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.uq-thumb .t { font-size: 11.5px; font-weight: 600; margin-top: 5px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.uq-thumb .p { font-family: var(--app-font-num); font-size: 12px; color: var(--app-violet); font-weight: 800; margin-top: 1px; }

.uq-brand-tab.on-uniqlo { border-color: var(--app-uniqlo); color: var(--app-uniqlo); background: rgba(192,57,43,.07); }
.uq-brand-tab.on-gu     { border-color: var(--app-gu);     color: var(--app-gu);     background: rgba(59,102,180,.07); }
.uq-brand-tab.on-wish   { border-color: var(--app-warn);   color: var(--app-warn);   background: rgba(176,125,30,.08); }

.uq-toast { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200;
            background: var(--app-ink); border: 1px solid var(--app-ink-2);
            color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
            box-shadow: var(--app-shadow-lg); animation: uqfade 2.4s forwards; white-space: nowrap; }
@keyframes uqfade { 0% {opacity:0; transform:translate(-50%,-8px);} 10%,80% {opacity:1; transform:translate(-50%,0);} 100% {opacity:0;} }