:root{
  /* 明亮版：奶油底、暖棕字、玫瑰金強調 */
  --ink:#FBF7F2;          /* 頁面底色 */
  --ink-2:#FFFFFF;        /* 卡片底色 */
  --ink-3:#F3ECE4;        /* 深一點的塊面 */
  --paper:#3B322C;        /* 主要文字 */
  --paper-dim:rgba(59,50,44,.72);
  --paper-faint:rgba(59,50,44,.48);
  --line:rgba(59,50,44,.14);
  --accent:#B5835A;       /* 主色 */
  --accent-2:#9A6B45;
  --ok:#5E9268;
  --warn:#C4553A;
  --serif:"Noto Serif TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1);
  --r:18px;
  --r-sm:11px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  background:var(--ink);
  color:var(--paper);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.75;
}
button{font-family:inherit}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{max-width:620px;margin:0 auto;padding:0 18px}

/* ---------- 頁首 ---------- */
.top{
  padding:54px 18px 30px;text-align:center;
  background:radial-gradient(ellipse 130% 90% at 50% -20%,rgba(181,131,90,.16),transparent 64%);
  border-bottom:1px solid var(--line);
}
.top h1{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.7em,6vw,2.3em);
  letter-spacing:.1em;margin:0 0 8px;
}
.top p{margin:0;color:var(--paper-dim);font-size:.95em;letter-spacing:.05em}

/* ---------- 步驟指示 ---------- */
.steps{
  display:flex;gap:6px;justify-content:center;
  margin:26px 0 30px;
}
.steps i{
  width:34px;height:3px;border-radius:2px;
  background:var(--line);transition:background .4s var(--ease);
}
.steps i.on{background:var(--accent)}

/* ---------- 區塊 ---------- */
.step{animation:fade .45s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.step h2{
  font-family:var(--serif);font-weight:600;
  font-size:1.22em;letter-spacing:.08em;
  margin:0 0 6px;
}
.step .sub{color:var(--paper-faint);font-size:.9em;margin:0 0 20px}

/* ---------- 服務選擇 ---------- */
.list{display:grid;gap:10px}
.opt{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--ink-2);
  box-shadow:0 1px 3px rgba(59,50,44,.05);
  cursor:pointer;transition:border-color .25s,background .25s,transform .18s var(--ease),box-shadow .25s;
}
.opt:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(59,50,44,.09)}
.opt:active{transform:scale(.99)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .box{
  width:22px;height:22px;flex:none;border-radius:7px;
  border:1.5px solid var(--line);
  display:grid;place-items:center;
  transition:background .25s,border-color .25s;
}
.opt .box::after{
  content:"";width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);transition:transform .2s var(--ease);
  margin-top:-2px;
}
.opt.on{border-color:var(--accent);background:#FBF3EC;box-shadow:0 4px 14px rgba(181,131,90,.16)}
.opt.on .box{background:var(--accent);border-color:var(--accent)}
.opt.on .box::after{transform:rotate(-45deg) scale(1)}
.opt .info{flex:1;min-width:0}
.opt .name{font-weight:500;letter-spacing:.03em}
.opt .meta{font-size:.84em;color:var(--paper-faint)}
.opt .price{font-family:var(--serif);font-size:1.1em;color:var(--accent);white-space:nowrap}

/* ---------- 合計列 ---------- */
.total{
  display:flex;align-items:baseline;gap:10px;
  margin-top:18px;padding:15px 18px;
  border-radius:var(--r);background:#FBF3EC;
  border:1px solid rgba(181,131,90,.28);
  font-size:.94em;
}
.total b{font-family:var(--serif);font-size:1.25em;color:var(--accent);margin-left:auto}

/* ---------- 日期 ---------- */
.dates{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
  gap:8px;padding:2px 0 4px;
}
.date{
  padding:10px 2px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--ink-2);color:var(--paper);
  cursor:pointer;text-align:center;
  transition:border-color .25s,background .25s;
}
.date:hover:not(:disabled){border-color:var(--accent)}
.date small{display:block;font-size:.7em;color:var(--paper-faint);letter-spacing:.04em;line-height:1.3}
.date b{display:block;font-family:var(--serif);font-size:1.15em;font-weight:600;margin:2px 0}
.date.on{background:var(--accent);border-color:var(--accent);color:#fff}
.date.on small{color:rgba(255,255,255,.78)}
.date:disabled{opacity:.28;cursor:not-allowed}

/* ---------- 時段 ---------- */
.slots{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));
  gap:8px;margin-top:18px;
}
.slot{
  padding:13px 4px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--ink-2);
  color:var(--paper);cursor:pointer;font-size:.98em;
  transition:border-color .25s,background .25s;
}
.slot:hover:not(:disabled){border-color:var(--accent)}
.slot.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.slot:disabled{
  opacity:.3;cursor:not-allowed;
  text-decoration:line-through;text-decoration-thickness:1px;
}

/* ---------- 表單 ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.9em;letter-spacing:.06em;margin-bottom:7px}
.field label span{color:var(--warn)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--ink-2);color:var(--paper);
  font-family:inherit;font-size:1em;font-weight:400;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--paper-faint)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field .err{color:var(--warn);font-size:.84em;margin-top:6px;display:none}
.field.bad input,.field.bad textarea{border-color:var(--warn)}
.field.bad .err{display:block}

/* ---------- 須知 ---------- */
.notice{
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 20px;margin:20px 0;
  background:var(--ink-3);
}
.notice h3{font-family:var(--serif);font-size:1em;letter-spacing:.08em;margin:0 0 10px;color:var(--accent)}
.notice ul{margin:0;padding-left:1.1em}
.notice li{font-size:.87em;color:var(--paper-dim);margin-bottom:7px;line-height:1.85}

/* ---------- 摘要 ---------- */
.summary{
  border:1px solid rgba(181,131,90,.28);border-radius:var(--r);
  padding:18px 20px;margin-bottom:20px;
  background:linear-gradient(160deg,#FBF3EC,var(--ink-2));
}
.summary .row{display:flex;gap:12px;padding:7px 0;font-size:.94em}
.summary .row span:first-child{color:var(--paper-faint);width:5.5em;flex:none}
.summary .row.big{border-top:1px solid var(--line);margin-top:9px;padding-top:13px}
.summary .row.big span:last-child{font-family:var(--serif);font-size:1.25em;color:var(--accent);margin-left:auto}

/* ---------- 按鈕 ---------- */
.acts{display:flex;gap:10px;margin-top:22px}
.btn{
  flex:1;padding:15px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-2);
  color:var(--paper);font-size:1em;font-weight:500;
  letter-spacing:.06em;cursor:pointer;text-align:center;
  text-decoration:none;
  transition:background .25s,border-color .25s,opacity .25s;
}
.btn:hover:not(:disabled){background:var(--ink-3)}
.btn-main{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(181,131,90,.28);
}
.btn-main:hover:not(:disabled){filter:brightness(1.08);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn:disabled{opacity:.34;cursor:not-allowed}
.btn-ghost{flex:0 0 auto;padding:15px 24px;color:var(--paper-dim)}

/* ---------- 狀態訊息 ---------- */
.msg{
  text-align:center;padding:36px 20px;
  color:var(--paper-faint);line-height:2;
}
.msg.err{color:var(--warn)}
.spin{
  width:26px;height:26px;margin:0 auto 14px;
  border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 完成畫面 ---------- */
.done{text-align:center;padding:30px 0}
.done .tick{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;
  border:2px solid var(--accent);display:grid;place-items:center;
  animation:pop .5s var(--ease) both;
}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.done .tick::after{
  content:"";width:20px;height:11px;margin-top:-5px;
  border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}
.done h2{font-family:var(--serif);font-size:1.5em;margin:0 0 10px;letter-spacing:.08em}
.done .code{
  display:inline-block;margin:16px 0;padding:11px 26px;
  border-radius:999px;border:1px dashed var(--accent);
  font-family:var(--serif);font-size:1.5em;letter-spacing:.3em;
  color:var(--accent);
}

/* ---------- 頁尾 ---------- */
.foot{
  margin-top:50px;padding:26px 18px 40px;
  border-top:1px solid var(--line);
  text-align:center;font-size:.85em;color:var(--paper-faint);
}
.foot a{color:var(--paper-dim);text-decoration:none;margin:0 8px}

/* ============================================================
   後台
   ============================================================ */
.admin-wrap{max-width:1000px;margin:0 auto;padding:0 18px 60px}
.tabs{display:flex;gap:8px;margin:24px 0 22px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;padding:10px 20px;border-radius:999px;
  border:1px solid var(--line);background:var(--ink-2);
  color:var(--paper-dim);cursor:pointer;font-size:.93em;
}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}

.bk{
  border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:11px;
  background:var(--ink-2);
  box-shadow:0 1px 3px rgba(59,50,44,.05);
}
.bk-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.bk-time{font-family:var(--serif);font-size:1.12em;color:var(--accent)}
.bk-name{font-weight:500}
.bk-meta{font-size:.87em;color:var(--paper-faint);margin-top:5px;line-height:1.8}
.bk-acts{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.bk-acts button{
  padding:8px 16px;border-radius:999px;font-size:.86em;
  border:1px solid var(--line);background:var(--ink-3);
  color:var(--paper-dim);cursor:pointer;
}
.bk-acts button:hover{background:#E9DFD4;color:var(--paper)}
.pill{
  padding:4px 12px;border-radius:999px;font-size:.78em;
  margin-left:auto;white-space:nowrap;
}
.pill-pending{background:#F6EADC;color:#8A6236}
.pill-confirmed{background:#E4F0E6;color:#3F7049}
.pill-completed{background:var(--ink-3);color:var(--paper-faint)}
.pill-cancelled{background:#F7E4DE;color:#A8442C}
.pill-no_show{background:#F7E4DE;color:#A8442C}

.admin-card{
  border:1px solid var(--line);border-radius:var(--r);
  padding:20px;margin-bottom:14px;background:var(--ink-2);
  box-shadow:0 1px 3px rgba(59,50,44,.05);
}
.admin-card h3{font-family:var(--serif);font-size:1.05em;margin:0 0 14px;color:var(--accent);letter-spacing:.06em}
.svc-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.svc-row:last-child{border-bottom:none}
.svc-row .info{flex:1;min-width:0}
.svc-row .info small{display:block;color:var(--paper-faint);font-size:.84em}
.mini-btn{
  padding:7px 14px;border-radius:999px;font-size:.84em;
  border:1px solid var(--line);background:var(--ink-3);
  color:var(--paper-dim);cursor:pointer;
}
.mini-btn:hover{background:#E9DFD4}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}

/* ---------- 登入 ---------- */
.login{max-width:360px;margin:80px auto;padding:0 20px}
.login h1{font-family:var(--serif);font-size:1.5em;text-align:center;margin:0 0 26px;letter-spacing:.1em}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;z-index:90;
  transform:translateX(-50%);
  padding:13px 26px;border-radius:999px;
  background:#3B322C;color:#FBF7F2;
  border:1px solid rgba(0,0,0,.1);font-size:.92em;
  box-shadow:0 12px 30px rgba(59,50,44,.28);
  animation:tIn .3s var(--ease) both;
}
@keyframes tIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}