/* CafeCoin Web — 共用樣式。
   色票與深色模式沿用 docs/cafecoin-sales.html,保持品牌一致。 */

:root{
  --bg:#FAF6F0;
  --surface:#FFFFFF;
  --surface-2:#F4ECE1;
  --ink:#2A1D16;
  --muted:#7C6656;
  --hair:#E8DCCD;
  --honey:#C8811B;      /* 點數 / reward accent */
  --honey-soft:#F0D9A8;
  --line-green:#06C755;  /* LINE,僅限 LINE 相關處 */
  --danger:#B3261E;
  --ok:#1E7A46;
  --shadow:0 1px 2px rgba(42,29,22,.05), 0 12px 32px -18px rgba(42,29,22,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#17100C;
    --surface:#211812;
    --surface-2:#2B201A;
    --ink:#F3E9DE;
    --muted:#B39D8C;
    --hair:#392B22;
    --honey:#E7A63C;
    --honey-soft:#4A3316;
    --line-green:#22D06A;
    --danger:#F2B8B5;
    --ok:#6FD39B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --bg:#17100C;
  --surface:#211812;
  --surface-2:#2B201A;
  --ink:#F3E9DE;
  --muted:#B39D8C;
  --hair:#392B22;
  --honey:#E7A63C;
  --honey-soft:#4A3316;
  --line-green:#22D06A;
  --danger:#F2B8B5;
  --ok:#6FD39B;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC",
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 版面 ---------- */
.wrap{max-width:560px;margin:0 auto;padding:32px 16px 64px}
.wrap-wide{max-width:960px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand-mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(140deg,var(--honey),var(--honey-soft));
}
.brand-name{font-weight:700;letter-spacing:.2px}

h1{font-size:28px;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
h2{font-size:20px;margin:0 0 12px}
.eyebrow{font-size:14px;font-weight:600;color:var(--muted);margin:0 0 6px}
.lede{color:var(--muted);margin:0 0 28px}

/* ---------- 卡片 ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow);
}
.card + .card{margin-top:16px}

/* ---------- 表單 ---------- */
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input,.field textarea{
  width:100%;
  padding:13px 14px;
  font:inherit;
  color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--hair);
  border-radius:12px;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus{
  border-color:var(--honey);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--honey) 22%,transparent);
}
.field .hint{font-size:13px;color:var(--muted);margin-top:6px}
.field .err{font-size:13px;color:var(--danger);margin-top:6px;display:none}
.field.invalid .err{display:block}
.field.invalid input{border-color:var(--danger)}

/* ---------- 按鈕 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:14px 18px;
  font:inherit;font-weight:600;
  border:1px solid transparent;border-radius:12px;
  cursor:pointer;
  transition:opacity .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--honey);color:#fff}
.btn-line{background:var(--line-green);color:#fff}
.btn-ghost{background:transparent;color:var(--muted);border-color:var(--hair)}
.btn-sm{width:auto;padding:8px 14px;font-size:14px;border-radius:10px}
.btn + .btn{margin-top:10px}

/* ---------- 狀態訊息 ---------- */
.alert{
  padding:13px 15px;border-radius:12px;font-size:14px;margin-bottom:18px;
  border:1px solid var(--hair);background:var(--surface-2);
}
.alert-error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--hair))}
.alert-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--hair))}
.alert[hidden]{display:none}

.badge{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:12px;font-weight:600;
  background:var(--honey-soft);color:var(--honey);
}

/* ---------- 置中狀態頁 ---------- */
.status{text-align:center}
.status .icon{
  width:64px;height:64px;border-radius:50%;margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--honey-soft);color:var(--honey);font-size:30px;
}

/* ---------- 表格(後台) ---------- */
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
th{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* ---------- 其他 ---------- */
.muted{color:var(--muted)}
.small{font-size:14px}
.row{display:flex;gap:10px;align-items:center}
.row-between{display:flex;gap:10px;align-items:center;justify-content:space-between}
.spacer{flex:1}
footer{margin-top:32px;text-align:center;font-size:13px;color:var(--muted)}
a{color:var(--honey)}

.spinner{
  width:16px;height:16px;flex:none;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}