:root {
    --bg: #EFEBE3;          /* 生絹米底（侘寂暖石灰） */
    --surface: #FAF8F2;     /* 宣紙白 */
    --ink: #32302A;         /* 碳墨 */
    --ink-2: #6C675C;
    --muted: #948D7F;
    --rose: #96774B;        /* 燻金銅主色 */
    --rose-deep: #745A38;
    --rose-soft: #EFE7D8;   /* 淡金砂底 */
    --line: #DED7C9;
    --ok: #5D7159;
    --ok-soft: #E7EBE2;
    --warn: #9A6E2A;
    --warn-soft: #F2EAD8;
    --danger: #99483C;
    --danger-soft: #F0E2DD;
    --radius: 12px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* iOS（Safari 與 iOS 版 Chrome 同核心）的按鈕與下拉選單預設文字色是系統藍；
     全站表單控制項一律明確指定碳墨色，各狀態（.on、disabled 等）再各自覆寫 */
  button, select, input, textarea { color: var(--ink); }
  select option { color: var(--ink); }
  /* 各瀏覽器（iOS Safari、LINE 內建瀏覽器、Android WebView…）會自動把
     「長得像日期／電話／地址」的文字變成藍色連結。整個內容區裡凡不是我們
     自己加上 class 的連結，一律還原為原本文字色、取消底線 */
  main a:not([class]), .modal-card a:not([class]), footer a:not([class]),
  a[x-apple-data-detectors], a[href^="x-apple-data-detectors"],
  a[href^="tel:"]:not([class]), a[href^="callto:"], a[href^="calshow:"] {
    color: inherit !important;
    text-decoration: none !important;
  }
  /* 偵測產生的假連結連點擊都取消（避免誤觸開行事曆／撥號） */
  a[x-apple-data-detectors], a[href^="x-apple-data-detectors"], a[href^="calshow:"] {
    pointer-events: none !important;
  }
  body {
    font-family: "Noto Sans TC", sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
  }
  h1, h2, .serif { font-family: "Noto Serif TC", serif; }

  /* ── 頂欄 ─────────────────────────── */
  .topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 14px 24px;
    display: flex; align-items: flex-end; justify-content: space-between;
    position: sticky; top: 0; z-index: 20;
  }
  .brand { display: flex; align-items: flex-end; gap: 12px; }
  .brand h1 { line-height: 0; }
  .brand-logo { height: 56px; width: auto; display: block; }
  .booking-label {
    font-size: 25px; color: var(--ink-2); letter-spacing: 0.14em; line-height: 1;
    padding-bottom: 9px; font-family: 'Cactus Classical Serif', serif; font-weight: 400;
    white-space: nowrap;
  }
  .brand span { font-size: 11.5px; color: var(--muted); letter-spacing: 0.2em; line-height: 1; padding-bottom: 9px; }
  .view-switch { display: flex; background: var(--bg); border-radius: 999px; padding: 3px; }
  .view-switch button {
    border: none; background: transparent; font: inherit; font-size: 13.5px;
    padding: 6px 18px; border-radius: 999px; cursor: pointer; color: var(--ink-2);
  }
  .view-switch button.on { background: var(--ink); color: #fff; }
  .view-switch button:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

  .wrap { max-width: 1040px; margin: 0 auto; padding: 28px 20px 80px; }

  /* ── 客戶端 ─────────────────────────── */
  .client-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
  @media (max-width: 800px) {
    .client-grid { grid-template-columns: 1fr; }
    .summary { position: static; }
  }

  .panel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px;
  }
  .step-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; letter-spacing: 0.12em; color: var(--rose);
    margin-bottom: 12px; font-family: "Noto Sans TC", sans-serif; font-weight: 600;
  }
  .step-tag::before { content: ""; width: 22px; height: 1px; background: var(--rose); flex-shrink: 0; }

  .pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .pill {
    font: inherit; font-size: 14px; padding: 7px 18px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink);
  }
  .pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .pill:focus-visible, .slot:focus-visible, .svc:focus-visible, .tech:focus-visible, .date-chip:focus-visible {
    outline: 2px solid var(--rose); outline-offset: 2px;
  }

  .svc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .svc {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
    background: var(--surface); cursor: pointer; text-align: left; font: inherit; width: 100%;
  }
  .svc.on { border-color: var(--rose); background: var(--rose-soft); }
  .svc .n { font-weight: 500; }
  .svc .d { font-size: 12.5px; color: var(--muted); }
  .svc .p { font-weight: 700; white-space: nowrap; color: var(--rose-deep); }
  .svc .consult-tag {
    font-size: 11.5px; color: var(--warn); background: var(--warn-soft);
    border-radius: 6px; padding: 1px 8px; margin-left: 6px;
  }

  .techs { display: flex; gap: 18px; flex-wrap: wrap; }
  .tech { border: none; background: transparent; cursor: pointer; text-align: center; font: inherit; }
  .tech .avatar {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: "Noto Serif TC", serif; font-size: 15px; font-weight: 600;
    border: 2px solid transparent; margin: 0 auto 6px;
  }
  .tech.on .avatar { border-color: var(--rose); }
  .tech .tn { font-size: 13px; color: var(--ink-2); }
  .tech .sp { font-size: 11.5px; color: var(--muted); }
  .tech.dim { opacity: 0.35; pointer-events: none; }

  .date-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .date-chip {
    font: inherit; width: 62px; padding: 8px 0; text-align: center;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer;
  }
  .date-chip .w { font-size: 11.5px; color: var(--muted); display: block; }
  .date-chip.on { border-color: var(--rose); background: var(--rose-soft); }

  .slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
  .slot {
    font: inherit; font-size: 13.5px; padding: 8px 0; text-align: center;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer;
  }
  .slot.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .slot:disabled { opacity: 0.35; text-decoration: line-through; cursor: not-allowed; }
  .slot-empty { font-size: 13.5px; color: var(--muted); }
  .slot-target { font-size: 13px; color: var(--rose-deep); margin-bottom: 10px; }
  .slot-target b { font-weight: 600; }

  .field { margin-bottom: 12px; }
  .field label { display: block; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; }
  .field input, .field textarea {
    width: 100%; font: inherit; font-size: 14.5px; padding: 9px 12px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink);
  }
  .field input:focus, .field textarea:focus { outline: 2px solid var(--rose); outline-offset: 1px; border-color: transparent; }
  .agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); }
  .agree input { margin-top: 3px; accent-color: var(--rose); }

  /* 摘要卡（簽名元素：直式側標） */
  .summary {
    background: var(--ink); color: #EDE8DD; border-radius: var(--radius);
    padding: 22px 22px 22px 20px; position: sticky; top: 84px;
    display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  }
  .summary .side {
    writing-mode: vertical-rl; letter-spacing: 0.5em; font-size: 12px;
    color: var(--rose); font-weight: 500; border-left: 1px solid rgba(150,119,75,.5);
    padding-left: 8px; height: fit-content;
  }
  .summary h2 { font-size: 16px; margin-bottom: 14px; color: #fff; }
  .summary dl { font-size: 13.5px; display: grid; grid-template-columns: 60px 1fr; row-gap: 7px; }
  .summary dt { color: #A79E8C; }
  .summary dd { color: #fff; }
  .summary .price { font-size: 20px; font-weight: 700; color: #D6BE95; margin: 14px 0 4px; font-family: "Noto Serif TC", serif; }
  .btn-primary {
    width: 100%; margin-top: 14px; font: inherit; font-size: 15px; font-weight: 500;
    background: var(--rose); color: #fff; border: none; border-radius: 10px;
    padding: 12px; cursor: pointer;
  }
  .btn-primary:hover { background: var(--rose-deep); }
  .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
  .btn-primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  .toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: #fff; font-size: 14px; padding: 12px 22px;
    border-radius: 10px; opacity: 0; transition: all .3s; pointer-events: none; z-index: 50;
    max-width: 90vw; text-align: center;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* ── 商家後台 ─────────────────────────── */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
  .stat {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 18px;
  }
  .stat .k { font-size: 12.5px; color: var(--muted); }
  .stat .v { font-family: "Noto Serif TC", serif; font-size: 26px; font-weight: 600; }
  .stat .v small { font-size: 13px; color: var(--muted); font-family: "Noto Sans TC", sans-serif; font-weight: 400; }

  .admin-section h2 { font-size: 16px; margin: 22px 0 10px; }
  .appt-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .appt-table th {
    text-align: left; font-size: 12.5px; color: var(--muted); font-weight: 500;
    padding: 10px 14px; border-bottom: 1px solid var(--line); background: #FBF8F7;
  }
  .appt-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
  .appt-table tr:last-child td { border-bottom: none; }
  .chip { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
  .chip.pending   { background: var(--warn-soft);   color: var(--warn); }
  .chip.confirmed { background: var(--rose-soft);   color: var(--rose-deep); }
  .chip.customer_confirmed { background: var(--ok-soft); color: var(--ok); }
  .chip.completed { background: #ECEAEE; color: var(--ink-2); }
  .chip.cancelled, .chip.no_show { background: var(--danger-soft); color: var(--danger); }
  .row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .mini-btn {
    font: inherit; font-size: 12.5px; padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-2);
  }
  .mini-btn:hover { border-color: var(--rose); color: var(--rose-deep); }
  .mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
  .note-cell { font-size: 12.5px; color: var(--muted); max-width: 180px; }
  .followup {
    background: var(--warn-soft); border: 1px solid #EAD9B4; border-radius: var(--radius);
    padding: 14px 18px; font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start;
  }
  .followup .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-top: 7px; flex-shrink: 0; }
  .empty-admin { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; }
  .table-scroll { overflow-x: auto; }

  .picked {
    margin-top: 14px; padding: 12px 14px; background: var(--rose-soft);
    border-radius: 10px; font-size: 13px;
  }
  .picked .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .picked .chip-item {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px;
  }
  .picked .chip-item button {
    border: none; background: var(--line); color: var(--ink-2); cursor: pointer;
    width: 18px; height: 18px; border-radius: 50%; font-size: 11px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .picked .chip-item button:hover { background: var(--danger-soft); color: var(--danger); }
  .picked .total { color: var(--rose-deep); font-weight: 500; }
  .tech-hint { font-size: 13px; color: var(--rose-deep); margin-top: 10px; }
  .segments { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
  .segments .seg-title { font-size: 12.5px; color: var(--muted); letter-spacing: 0.08em; }
  .seg-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--ok-soft); border: 1px solid #CBDCCB; border-radius: 10px;
    padding: 10px 14px; font-size: 13.5px; flex-wrap: wrap;
  }
  .seg-row .seg-info b { font-weight: 500; }
  .seg-row .seg-svcs { color: var(--ink-2); font-size: 12.5px; }
  .seg-row .seg-actions { display: flex; gap: 6px; }
  .date-chip:disabled, .tech:disabled { opacity: 0.35; cursor: not-allowed; }
  ::placeholder { color: var(--muted); opacity: 0.75; }
  .field-err { font-size: 12px; color: var(--danger); margin-top: 4px; }
  .field input:disabled, .field textarea:disabled, .agree input:disabled {
    opacity: 0.45; cursor: not-allowed; background: var(--bg);
  }
  .agree.off { opacity: 0.55; }
  .site-footer {
    margin-top: 48px; background: var(--ink); color: #C9C2B4;
    padding: 36px 0 20px;
  }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding-top: 0; padding-bottom: 12px; }
  .site-footer h3 { font-size: 15px; color: #EDE8DD; margin-bottom: 10px; }
  .site-footer .addr { font-size: 13px; margin-bottom: 10px; }
  .map-card {
    display: flex; gap: 12px; align-items: flex-start;
    background: rgba(250,248,242,0.06); border: 1px solid rgba(222,215,201,0.25);
    border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
  }
  .map-pin { font-size: 20px; line-height: 1.3; }
  .map-addr { font-size: 14px; color: #EDE8DD; }
  .map-card + .map-card { margin-top: 8px; }
  .map-tag {
    display: inline-block; font-size: 11px; color: #D6BE95;
    border: 1px solid rgba(214,190,149,0.5); border-radius: 999px;
    padding: 1px 10px; margin-right: 8px; vertical-align: 1px;
  }
  .map-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .map-btn {
    display: inline-block; font-size: 13px; text-decoration: none; cursor: pointer;
    background: #96774B; color: #FAF8F2; border: 1px solid #96774B;
    border-radius: 8px; padding: 8px 14px; font-family: inherit;
  }
  .map-btn:hover { background: #7A5F3A; }
  .map-btn.ghost { background: transparent; color: #D6BE95; border-color: rgba(214,190,149,0.5); }
  .map-btn.ghost:hover { border-color: #D6BE95; }
  .footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-links button {
    background: none; border: none; color: #C9C2B4; font: inherit; font-size: 13.5px;
    cursor: pointer; padding: 4px 0;
  }
  .footer-links button:hover { color: #D6BE95; }
  .site-footer .copyright { text-align: center; font-size: 11.5px; color: #8A8375; letter-spacing: 0.08em; margin-top: 24px; }
  .modal-overlay[hidden] { display: none; }
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(40,36,30,0.5); z-index: 60;
    display: flex; align-items: center; justify-content: center; padding: 20px;
  }
  .modal-card {
    background: var(--surface); border-radius: 14px; max-width: 560px; width: 100%;
    max-height: 80vh; overflow-y: auto; padding: 28px 28px 24px; position: relative;
  }
  .modal-close {
    position: absolute; top: 14px; right: 14px; border: none; background: var(--bg);
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer; color: var(--ink-2);
  }
  .modal-card h3 { font-family: "Noto Serif TC", serif; font-size: 17px; margin-bottom: 12px; }
  .modal-card h4 { font-size: 14px; margin: 14px 0 4px; }
  .modal-card p, .modal-card li { font-size: 13.5px; color: var(--ink-2); line-height: 1.75; }
  .modal-card ul { padding-left: 18px; margin: 4px 0; }
  .policy-date { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
  @media (max-width: 640px) {
    .wrap { padding: 20px 14px 60px; }
    .panel { padding: 18px 16px; }
    .topbar { padding: 12px 14px; }
    .brand-logo { height: 40px; }
    .brand { flex-direction: column; align-items: flex-start; gap: 4px; }
    .brand span { font-size: 9px; letter-spacing: 0.16em; padding-bottom: 0; white-space: nowrap; }
    .booking-label { font-size: 23px; padding-bottom: 0; letter-spacing: 0.1em; }
    /* 觸控目標放大（Apple HIG 建議 ≥ 44px） */
    .slot { padding: 11px 0; font-size: 14px; }
    .slot-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
    .date-chip { width: 58px; padding: 10px 0; }
    .pill { padding: 9px 16px; }
    .svc { padding: 14px 14px; }
    .techs { gap: 12px; }
    .tech .avatar { width: 50px; height: 50px; }
    .btn-primary { padding: 14px; }
    .mini-btn { padding: 7px 14px; }
    /* 摘要卡：收起直式側標，爭取寬度 */
    .summary { grid-template-columns: 1fr; padding: 20px; }
    .summary .side { display: none; }
    /* 後台表格：維持完整欄寬、以橫向捲動閱讀 */
    .appt-table { min-width: 720px; }
    .stat .v { font-size: 22px; }
    /* 頁尾與彈窗 */
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .modal-card { padding: 22px 18px 18px; max-height: 86vh; }
    .followup { font-size: 13px; }
    .map-addr { font-size: 13px; }
    .map-btn { padding: 9px 14px; }
  }
  /* 窄型手機（≤380px）：再收斂一級 */
  @media (max-width: 380px) {
    .brand-logo { height: 34px; }
    .brand span { font-size: 8px; letter-spacing: 0.12em; }
    .booking-label { font-size: 19px; padding-bottom: 0; }
    .date-chip { width: 52px; }
    .slot-grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (prefers-reduced-motion: reduce) {
    .toast { transition: none; }
  }