/*
 * lifetool base 樣式 — 共用元件層。
 * 一律引用 tokens.css 的 var()，不寫死 hex / 尺寸（per design SSOT）。
 */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  max-width: var(--app-max-width);
  margin: 0 auto;
  position: relative;
  min-height: 100vh;
}
a { color: var(--color-accent); text-decoration: none; }

/* ---- 卡片 ---- */
.card {
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
}

/* ---- 按鈕 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font: inherit; font-weight: 800; font-size: var(--text-base);
  cursor: pointer;
}
.btn:active { filter: brightness(.94); }
.btn--ghost {
  background: transparent; color: var(--color-muted);
  border: 1px solid var(--color-line); font-weight: 600;
}
.btn--dark { background: var(--color-ink); }
/* 看起來像文字連結的 button（登出走 POST form 用，視覺維持原 <a> 樣式）*/
.btn-link {
  background: none; border: none; padding: 0; width: auto;
  font: inherit; color: var(--color-muted); text-decoration: underline;
  cursor: pointer;
}

/* ---- 文字 ---- */
h1 { font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-1); }
.lead { color: var(--color-muted); font-size: var(--text-base); line-height: 1.6; margin: 0 0 var(--space-5); }
.muted { color: var(--color-muted); }

/* ---- app bar ---- */
.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-panel) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.appbar .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-lg); flex: 1; min-width: 0; }
.brand .dot {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--color-accent); display: grid; place-items: center; font-size: 16px; flex-shrink: 0;
}
.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: #d9d2c7; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0;
}

.content { padding: var(--space-5) var(--space-4) calc(var(--space-6) * 2); }

/* ---- auth（登入 / 2FA 綁定 / 驗證）---- */
.auth { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-4); }
.auth__brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-weight: 800; font-size: var(--text-xl); margin-bottom: var(--space-5); }
.auth__brand .dot {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--color-accent); display: grid; place-items: center; font-size: 20px;
}
.auth h1 { text-align: center; }
.auth .lead { text-align: center; }

/* ---- 表單 ---- */
.field { margin-bottom: var(--space-4); }
.field > label { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); margin-bottom: var(--space-1); }
.input {
  width: 100%; min-height: var(--tap-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-ink);
  font: inherit; font-size: var(--text-base);
}
.input:focus { outline: none; border-color: var(--color-accent); background: var(--color-panel); }
.input--code {
  text-align: center; letter-spacing: .4em; font-weight: 800;
  font-size: var(--text-2xl);
}
.form__actions { margin-top: var(--space-5); }

/* ---- 訊息 ---- */
.msg {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--text-sm); margin-bottom: var(--space-4);
  background: var(--color-accent-soft); color: var(--color-ink);
}
.msg--error { background: color-mix(in srgb, var(--color-danger) 14%, transparent); color: var(--color-danger); }
.msg--ok { background: color-mix(in srgb, var(--wheel-3) 14%, transparent); color: var(--wheel-3); }

/* ---- QR（2FA 綁定）---- */
.qr { display: block; width: 200px; height: 200px; margin: var(--space-4) auto; border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.secret {
  display: block; text-align: center; font-family: ui-monospace, monospace;
  font-size: var(--text-sm); color: var(--color-muted);
  word-break: break-all; margin-bottom: var(--space-4);
}

/* ---- 置中連結列 ---- */
.auth__alt { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); }

/* ============================================================
 * 平台 launcher（工具總覽，per D4）
 * ========================================================== */
.launcher {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.tool {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-panel); color: var(--color-ink);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); min-height: calc(var(--tap-min) * 2);
}
.tool:active { filter: brightness(.97); }
.tool__icon { font-size: var(--text-2xl); }
.tool__name { font-weight: 800; font-size: var(--text-lg); }
.tool__desc { color: var(--color-muted); font-size: var(--text-sm); }
.tool--soon { opacity: .55; box-shadow: none; pointer-events: none; }

/* ============================================================
 * App shell（app bar 返回 + 底部分頁，per Step 4）
 * ========================================================== */
.appbar__back {
  font-weight: 700; font-size: var(--text-base); color: var(--color-muted);
  padding: var(--space-1) var(--space-2); margin-right: var(--space-1);
}
.content--app { padding-bottom: calc(var(--tap-min) + var(--space-6)); }

.tabbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  display: flex; z-index: 20;
  background: color-mix(in srgb, var(--color-panel) 95%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-top: 1px solid var(--color-line);
  padding-bottom: var(--safe-bottom);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-3) 0; min-height: var(--tap-min);
  color: var(--color-muted); font-size: var(--text-sm); font-weight: 700;
}
.tab__icon { font-size: var(--text-lg); }
.tab.is-active { color: var(--color-accent); }

/* ============================================================
 * 編輯店家（Store CRUD）
 * ========================================================== */
.store-form { margin-bottom: var(--space-4); }
.store-form__title { margin: 0 0 var(--space-3); font-weight: 800; }
.form__actions--row { display: flex; gap: var(--space-3); }
.form__actions--row .btn { flex: 1; }

.store-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.store {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}
.store__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store__name { font-weight: 800; }
.store__meta { color: var(--color-muted); font-size: var(--text-sm); }
.store__actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.iconbtn {
  width: var(--tap-min); height: var(--tap-min);
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-bg); color: var(--color-ink);
  font-size: var(--text-lg); cursor: pointer;
}
.iconbtn:active { filter: brightness(.94); }
.iconbtn--danger { color: var(--color-danger); }
.empty { text-align: center; padding: var(--space-6) var(--space-4); }

/* ============================================================
 * 店家抽選（轉盤）
 * ========================================================== */
.pick { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); padding-top: var(--space-4); }
.wheel {
  position: relative; width: 220px; height: 220px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: conic-gradient(
    var(--wheel-1) 0 45deg, var(--wheel-2) 45deg 90deg,
    var(--wheel-3) 90deg 135deg, var(--wheel-4) 135deg 180deg,
    var(--wheel-5) 180deg 225deg, var(--wheel-6) 225deg 270deg,
    var(--wheel-7) 270deg 315deg, var(--wheel-8) 315deg 360deg);
  box-shadow: var(--shadow-pop);
}
.wheel__center {
  width: 76px; height: 76px; border-radius: var(--radius-pill);
  background: var(--color-panel); display: grid; place-items: center;
  font-size: var(--text-2xl); box-shadow: var(--shadow-card);
}
.wheel__pointer {
  position: absolute; top: calc(var(--space-2) * -1); left: 50%; transform: translateX(-50%);
  color: var(--color-ink); font-size: var(--text-lg);
}
/* 5s 一次：前 3s 等速（1440deg / 4 turns）、後 2s 強 ease-out 多轉 1 圈緩停 */
.wheel.is-spinning { animation: wheel-spin 5s forwards; }
@keyframes wheel-spin {
  0%   { transform: rotate(0deg);    animation-timing-function: linear; }
  60%  { transform: rotate(1440deg); animation-timing-function: cubic-bezier(.05,.85,.2,1); }
  100% { transform: rotate(1800deg); }
}

.pick__result { width: 100%; min-height: var(--space-6); }
.result-card {
  text-align: center; padding: var(--space-5);
  background: var(--color-accent-soft); border-radius: var(--radius-lg);
}
.result-card__label { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.result-card__name { margin: var(--space-1) 0; font-size: var(--text-2xl); font-weight: 800; color: var(--color-accent); }
.result-card__meta { margin: 2px 0 0; color: var(--color-muted); font-size: var(--text-sm); }