/* ATSUMARU brand layer. Business rules and availability remain server-owned. */
:root {
    --ink:#44372f; --muted:#6c5b50; --brand:#746055; --brand-2:#ac8672;
    --paper:#f5f0ea; --paper-2:#e9dfd4; --line:#d9cabe; --white:#fff;
    --sage:#4b6745; --gold:#826350; --danger:#a33e37;
    --brand-primary:var(--brand); --brand-secondary:var(--brand-2);
    --surface:var(--paper); --surface-alt:var(--white); --border:var(--line);
    --text-main:var(--ink); --text-muted:var(--muted); --accent:var(--sage); --success:var(--sage);
    --font-display:"MS Mincho","Hiragino Mincho Pro","Noto Serif TC",serif;
    --font-ui:"Noto Sans TC",system-ui,sans-serif;
    --shadow:0 6px 24px rgba(76,54,40,.07); --shadow-soft:0 3px 14px rgba(76,54,40,.05);
    --shadow-float:0 8px 30px rgba(76,54,40,.15);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body,body.ats-app { margin:0; min-height:100dvh; background:var(--paper); color:var(--ink); font-family:var(--font-ui); line-height:1.7; }
body::before,body::after { content:none !important; }
h1,h2,h3,h4,.ats-page-title,.class-name { font-family:var(--font-display); text-wrap:balance; }
a,button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,input,select,textarea { font-family:var(--font-ui); }
:where(a,button,input,select,textarea,summary):focus-visible { outline:2px solid var(--brand); outline-offset:4px; }
button:disabled { cursor:not-allowed; }
[hidden] { display:none !important; }
.ats-shell { width:min(1080px,calc(100% - 48px)); margin-inline:auto; }
.ats-topbar {
    display:grid; grid-template-columns:1fr 80px 1fr; align-items:center; gap:16px;
    position:relative; top:auto; z-index:50; width:100vw; max-width:none;
    margin:0 calc((100% - 100vw)/2); padding:10px max(24px,calc((100vw - 1080px)/2));
    min-height:90px; border:0; border-radius:0; background:var(--brand);
    box-shadow:none; backdrop-filter:none; color:#fff;
}
body>header { max-width:none; margin:0; padding:0; background:transparent; }
body>header>.ats-topbar { margin-inline:0; }
.ats-brand { display:flex; flex-direction:row; justify-content:center; align-items:center; text-decoration:none; }
.ats-logo { width:64px; height:64px; object-fit:contain; display:block; }
.ats-official-link { justify-self:start; color:#fff; font-size:13px; text-decoration:none; padding:10px 0; min-height:44px; display:flex; align-items:center; }
.ats-nav { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:4px; min-width:0; }
.ats-topbar .ats-nav a,.ats-topbar .ats-nav button {
    color:#fff; font-family:var(--font-ui); font-size:14px; font-weight:500; line-height:1.4;
    padding:12px 14px; min-height:44px; border:1px solid transparent;
    border-radius:999px; background:transparent; box-shadow:none; text-decoration:none;
    white-space:nowrap; transition:background-color .16s;
}
.ats-topbar .ats-nav a:hover,.ats-topbar .ats-nav button:hover { background:#635046; transform:none; }
.ats-topbar .ats-nav [aria-current=page] { background:#5f4e44; border-color:rgba(255,255,255,.38); }
.ats-topbar :focus-visible { outline-color:#fff; }
.ats-btn,.btn,.btn-primary,.whatsapp-button { min-height:44px; border-radius:24px; padding:11px 22px; font:500 15px/1.5 var(--font-ui); cursor:pointer; text-decoration:none; transition:background-color .16s,border-color .16s; }
.ats-btn { border:1px solid var(--brand); background:transparent; color:var(--brand); }
.ats-btn.primary,.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.ats-btn:hover,.btn:hover,.btn-primary:hover,.whatsapp-button:hover { transform:none; box-shadow:none; }
.ats-btn.primary:hover,.btn-primary:hover { background:#5e4c41; }
.ats-btn:not(.primary):hover { background:var(--paper-2); border-color:var(--brand); }
.ats-page,.ats-home-intro { padding:34px 0 48px; }
.ats-page>h1,.ats-page>.ats-page-english,.ats-page>.ats-page-lead,.ats-home-intro,.hero,body>header>h1,body>header>p { text-align:center; }
.ats-home-intro { padding:36px 0 20px; }
.ats-home-intro h1,.ats-hero h1,.ats-page-title,.hero h1,body>header>h1 {
    max-width:900px; margin:0 auto; font-size:clamp(26px,3vw,38px); font-weight:600; letter-spacing:.05em; line-height:1.5; color:var(--brand);
}
.hero { padding:26px 24px 18px; margin:0 auto; max-width:1080px; }
body>header>h1 { margin-top:26px; }
.ats-page-english { margin:5px auto 0 !important; font-family:var(--font-display); font-size:12px !important; font-weight:500; letter-spacing:.15em; color:var(--muted); line-height:1.6 !important; }
.ats-divider { display:block; width:70px; height:32px; object-fit:cover; margin:4px auto 6px; }
.ats-page-lead,.hero p:not(.ats-page-english),body>header>p:not(.ats-page-english) { max-width:64ch; margin:4px auto 0; padding-inline:16px; font-size:15px; line-height:1.8; color:var(--muted); }
body>header>p:last-child { margin-bottom:24px; }
.ats-home-feature { display:grid; grid-template-columns:1.1fr 1fr; min-width:0; background:#fff; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.ats-studio-photo { width:100%; height:100%; min-height:310px; object-fit:cover; }
.ats-feature-copy { padding:38px; align-self:center; text-align:center; }
.ats-feature-copy h2 { font-size:24px; font-weight:500; margin:0 0 16px; color:var(--brand); }
.ats-feature-copy p { font-size:15px; color:var(--muted); margin:12px 0; line-height:1.9; }
.ats-feature-copy .ats-action-row { justify-content:center; margin-top:22px; }
.ats-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:30px 0 52px; }
.ats-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ats-card,.ats-card:first-child,.ats-card:last-child { min-height:190px; padding:24px; border:1px solid #e9e0d8; border-radius:20px; background:#fff; box-shadow:var(--shadow-soft); grid-column:auto; }
.ats-card:hover { transform:none; border-color:var(--brand); box-shadow:var(--shadow-soft); }
.ats-card h2 { font-size:23px; font-weight:500; margin:8px 0 12px; }
.ats-card p { font-size:15px; line-height:1.8; }
.ats-card strong { display:block; margin-top:22px; font-size:14px; font-weight:500; text-decoration:underline; text-underline-offset:5px; color:var(--brand); }
.ats-card span,.ats-kicker { color:var(--muted); font-size:11px; letter-spacing:.16em; }
.ats-kicker::before { content:none; }
.ats-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:40px; padding:36px 0 10px; align-items:center; }
.ats-hero>div { text-align:center; }
.ats-hero p { font-size:15px; line-height:1.8; }
.ats-welcome-panel { background:#fff; border:1px solid var(--line); padding:26px; }
.ats-welcome-panel h2 { font-size:23px !important; }
.ats-panel,.card,.booking-card,.booking-summary,.ats-list-item,.ats-metric,.ats-flow-step,.package-confirm-box,.class-item,.account-alert,.account-empty {
    background:#fff; border:1px solid #e4d9d0; border-radius:20px; box-shadow:var(--shadow-soft); backdrop-filter:none;
}
.ats-panel,.card { padding:24px; }
.ats-stack { gap:20px; }
.ats-panel h2,.card h2 { font-size:22px; line-height:1.5; font-weight:500; color:var(--brand); }
body>main { max-width:1080px; margin:0 auto; padding:0 24px 48px; }
.grid.two { grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr); gap:24px; align-items:start; }
.grid.two>#summary-card { position:sticky; top:20px; }
.booking-steps { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:8px 0 16px; margin:0 0 20px; box-shadow:none; gap:14px; }
.booking-steps .step { font-family:var(--font-ui); font-size:14px; }
#mode-description { font-size:14px !important; line-height:1.65; margin:0; padding:0 !important; }
#mode-description small { font-size:13px; color:var(--muted) !important; }
#booking-rule-note.phase2-helper { margin:12px 0 8px; padding:12px 14px; font-size:13px; border-radius:12px; background:var(--paper); border:0; }
.policy-panel { border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; margin:10px 0; padding:0; }
.policy-panel summary { padding:10px 0; min-height:44px; font-size:14px; cursor:pointer; }
#refund-policy-body { font-size:14px; line-height:1.8; }
#booking-mode-toggle { padding:5px; background:#f0e8df; border-radius:28px; gap:4px !important; }
.mode-btn { min-height:44px; border:1px solid transparent; border-radius:24px; background:transparent; color:var(--ink); font-size:15px; }
.mode-btn.active { background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 2px 6px rgba(76,54,40,.14); }
.mode-btn:hover,.slot-button:hover:not(.disabled) { transform:none; box-shadow:none; border-color:var(--brand); }
.slot-grid { gap:10px; }
.slot-button { min-height:56px; border-radius:14px; font-family:var(--font-ui); border:1px solid #d9cabe; background:#fffdfa; transition:background-color .16s,border-color .16s,box-shadow .16s; }
.slot-button.selected { background:var(--brand); color:#fff; border-color:var(--brand); transform:none; box-shadow:0 3px 10px rgba(76,54,40,.16); }
.slot-button.selected:hover,.slot-button.selected .peak-indicator { color:#fff; }
.slot-button.pending,.slot-button.disabled,.slot-button.class-occupied { color:var(--muted); }
.slot-button:hover:not(.disabled):not(.selected) { background:#eee3d8; }
.slot-button:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.form-group { margin-bottom:14px; }
.card h2 { margin:0 0 18px; }
.ats-rate-details { font-size:14px; margin-top:4px; }
.ats-rate-details summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--muted); }
#slots-section { margin-top: 18px; }
input,select,textarea,.ats-form input,.ats-form select,.ats-form textarea { font-size:16px; font-family:var(--font-ui); color:var(--ink); background:#fff; border:1px solid #b5a192; border-radius:12px; min-height:46px; padding:10px 14px; max-width:100%; }
input[type=checkbox],input[type=radio] { min-height:0; accent-color:var(--brand); }
input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 2px rgba(116,96,85,.15); }
label { color:var(--ink); font-size:14px; }
.summary-totals { border-color:var(--line); }
.totals-row { font-family:var(--font-ui); font-size:14px; }
.totals-row.total { color:var(--ink); border-top:1px solid var(--line); padding-top:16px; }
#contact-card { margin-top:24px; }
.ats-tabs { justify-content:center; gap:8px; }
.ats-tabs button,.package-filter { min-height:44px; border-radius:24px; }
.ats-auth-area,.account-auth-area { margin-top:20px; }
.ats-metric-grid { gap:12px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.ats-metric { padding:20px; }
.ats-metric strong { font-size:28px; }
.ats-metric span { font-size:12px; }
.account-tabs { justify-content:flex-start; }
.password-toggle { min-height:36px; }
.week-nav { border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:transparent; padding:0 0 18px; gap:12px; }
.week-nav button { min-width:44px; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:999px; }
.day-jump { gap:8px; }
.day-jump-pill { border-radius:16px; min-height:66px; box-shadow:none; }
.day-jump-pill.active,.day-jump-pill.is-today { border-color:var(--brand); }
.schedule-filters { border:0; border-block:1px solid var(--line); padding:16px 0; border-radius:0; box-shadow:none; background:transparent; }
.class-item { border-radius:16px; box-shadow:var(--shadow-soft); }
.class-item:hover { transform:none; box-shadow:none; border-color:var(--brand); }
.schedule-empty,.package-empty-note,.account-empty { padding:24px; color:var(--muted); font-size:15px; }
.ats-flow-strip { gap:16px; }
.ats-flow-step { border-radius:16px; }
.payment-info,.payment-panel,.split-payment-info,#classBookingDetails,#classTotalPrice { border-radius:14px !important; background:var(--paper) !important; border-color:var(--line) !important; color:var(--ink) !important; }
.payment-reminder-content,.quick-modal-panel,.package-confirm-box,#successModal>[role=dialog] { border-radius:22px !important; background:#fff; box-shadow:var(--shadow-float); }
.payment-reminder-content :is(h2,h3),.quick-modal-panel h2 { font-family:var(--font-display); }
.payment-reminder-modal,.quick-modal,.package-confirm-modal { background:rgba(54,43,35,.52); }
.whatsapp-button { background:#45633f; color:#fff; }
.ats-action-dialog { position:fixed; inset:0; z-index:10000; display:none; place-items:center; padding:18px; background:rgba(54,43,35,.52); }
.ats-action-dialog.active { display:grid; }
.ats-action-dialog-panel { width:min(460px,100%); max-height:90vh; overflow:auto; padding:26px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:var(--shadow-float); }
.ats-action-dialog-panel h2 { margin:0; color:var(--brand); }
.ats-action-dialog-panel p { margin:10px 0 18px; color:var(--muted); white-space:pre-line; }
.ats-action-dialog-panel textarea { width:100%; min-height:110px; margin-bottom:18px; resize:vertical; }
.ats-action-dialog-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; }
.ats-action-dialog-actions .danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.ats-action-toast-region { position:fixed; top:18px; left:50%; z-index:10020; display:grid; gap:8px; width:min(420px,calc(100% - 28px)); transform:translateX(-50%); pointer-events:none; }
.ats-action-toast { padding:13px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); box-shadow:var(--shadow-float); font:500 15px/1.6 var(--font-ui); }
.ats-action-toast.success,.ats-status.success { color:var(--sage); }
.ats-action-toast.error,.ats-status.error { color:var(--danger); }
.ats-status.error:not(:empty) { border-left:3px solid var(--danger); background:#fff3f1; padding:12px; }
footer[data-atsumaru-footer] { width:100%; max-width:none; margin:0; padding:32px 24px !important; background:var(--brand); color:#fff !important; font-size:13px; text-align:center; }
footer[data-atsumaru-footer] a,[data-atsumaru-social] a { background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:inherit !important; min-height:44px; font-size:14px !important; text-underline-offset:4px; }
footer[data-atsumaru-footer] a:hover { text-decoration:underline; }
footer[data-atsumaru-footer] a:focus-visible { outline-color:#fff; }
.ats-footer-logo { display:block; margin:0 auto 14px; object-fit:contain; }
.ats-site-footer p { margin:0 0 12px; }
.ats-site-footer [data-atsumaru-social] { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; }
.ats-stagger-item { opacity:1; transform:none; }
@media(max-width:800px) {
    .ats-shell { width:calc(100% - 32px); }
    .ats-topbar { grid-template-columns:1fr 64px 1fr; gap:8px; padding:10px 16px; }
    .ats-topbar .ats-nav { gap:0; }
    .ats-topbar .ats-nav a,.ats-topbar .ats-nav button { padding:10px 8px; }
    .ats-home-feature { grid-template-columns:1fr 1fr; }
    .ats-feature-copy { padding:24px; }
    .ats-feature-copy h2 { font-size:22px; }
    .grid.two { grid-template-columns:minmax(0,1fr); }
    .grid.two>#summary-card { position:static; }
    .ats-grid-three { grid-template-columns:1fr; }
    .ats-hero { grid-template-columns:1fr; gap:22px; }
    .ats-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
    .ats-topbar { grid-template-columns:1fr 64px 1fr; padding-block:6px 0; min-height:0; gap:2px; }
    .ats-logo { width:56px; height:56px; }
    .ats-nav { grid-column:1/-1; width:100%; justify-content:center !important; padding-bottom:4px; }
    .ats-official-link { font-size:12px; }
    .ats-topbar .ats-nav a,.ats-topbar .ats-nav button { font-size:14px; padding:10px 12px; }
    .ats-home-intro { padding:24px 0 14px; }
    .ats-home-intro h1,.ats-page-title,.ats-hero h1,.hero h1,body>header>h1 { font-size:26px; letter-spacing:.03em; }
    .ats-page { padding-top:24px; }
    .hero { padding:20px 16px 12px; }
    .ats-home-feature { grid-template-columns:1fr; }
    .ats-studio-photo { min-height:0; height:auto; aspect-ratio:1.7; object-fit:cover; }
    .ats-feature-copy { padding:26px 20px; }
    .ats-feature-copy .ats-action-row { flex-wrap:nowrap; gap:10px; }
    .ats-feature-copy .ats-btn { flex:1; padding-inline:12px; }
    .ats-grid { grid-template-columns:1fr; padding:22px 0 36px; gap:16px; }
    .ats-card { min-height:170px; padding:22px; }
    body>main { padding-inline:16px; }
    .card,.ats-panel { padding:20px 16px !important; border-radius:18px !important; }
    .booking-steps { justify-content:space-between; gap:6px; margin-bottom:16px; padding-bottom:12px; }
    .booking-steps .step { font-size:12px; white-space:normal; }
    .step-connector { max-width:14px; }
    .grid.two { gap:16px; }
    .week-nav { flex-wrap:wrap; }
    #week-label { font-size:15px; }
    .week-date-jump { width:100%; order:4; }
    .day-jump { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; overflow:visible; }
    .day-jump-pill { padding:8px 2px; font-size:12px; width:100%; min-width:0; flex:none; }
    .schedule-filters { grid-template-columns:1fr !important; }
    .ats-flow-strip { display:grid; grid-template-columns:1fr; }
    .ats-flow-step { min-width:0; }
    .ats-dashboard-hero { align-items:stretch; flex-direction:column; }
    .ats-action-row { gap:8px; }
    .ats-metric-grid>.ats-metric:last-child:nth-child(odd) { grid-column:1/-1; }
    .ats-booking-row { flex-direction:column; }
    .ats-booking-meta { text-align:left; }
    .ats-action-dialog-actions .ats-btn { flex:1; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}

/* Step Progress: only completed selection advances the connector. */
.booking-steps .step-num { transition:background-color .35s,color .35s,transform .4s cubic-bezier(.34,1.56,.64,1); }
.booking-steps .step.active .step-num { transform:scale(1.03); }
.booking-steps .step-connector { position:relative; overflow:hidden; }
.booking-steps .step-connector::after { content:''; position:absolute; inset:0; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.booking-steps .step.completed + .step-connector::after { transform:scaleX(1); }
@media(prefers-reduced-motion:reduce) { .booking-steps .step-num,.booking-steps .step-connector::after { transition:none; transform:none; } }

/* Keep the payment handoff in normal flow even when surrounding cards style links inline. */
.payment-proof-box { overflow-wrap:anywhere; }
.payment-proof-box .ats-btn { display:flex; width:fit-content; max-width:100%; min-height:44px; box-sizing:border-box; white-space:normal; line-height:1.5; margin:16px 0; padding:12px 18px; align-items:center; justify-content:center; text-align:center; }
.payment-proof-box p { margin:12px 0 0; line-height:1.8; }
.payment-proof-box .payment-proof-hint { font-size:.85rem; color:var(--muted,#746055); }

.ats-payment-summary{margin:auto;width:min(640px,calc(100vw - 28px));max-height:86vh;overflow:auto;box-sizing:border-box;padding:24px;border:1px solid var(--line);border-radius:28px;background:#fffdf9;color:var(--ink)}
.ats-payment-summary::backdrop{background:rgba(50,40,32,.45)}
.ats-submission-receipt{box-sizing:border-box;width:100%;max-width:800px;margin:0 auto 32px;padding:clamp(18px,4vw,32px);border:1px solid #d8ccc1;border-radius:28px;background:#fffdf9;color:#5c5148;line-height:1.7;overflow-wrap:anywhere;scroll-margin-top:24px;grid-column:1/-1}
.ats-submission-receipt:focus-visible{outline:2px solid #7b6658;outline-offset:4px}
.ats-submission-receipt .ats-receipt-note{margin:18px 0 0;padding-top:14px;border-top:1px solid #e4dbd3;font-size:.9rem;color:#6f625a}
.ats-submission-receipt .ats-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;height:auto;min-height:44px;white-space:normal;margin-block:12px;line-height:1.5}
.monthly-account-card{display:block;overflow-wrap:anywhere}.monthly-account-card h3{margin:10px 0}.monthly-account-card p{margin:8px 0}.monthly-account-card ul{padding-left:20px}.monthly-account-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.monthly-account-actions .ats-btn{display:inline-flex;align-items:center;justify-content:center;white-space:normal;height:auto}
/* Shared controls and quiet operational details. */
.ats-app .account-progress-details,.ats-app .monthly-history {margin:14px 0;}
.ats-app .account-progress-details summary,.ats-app .monthly-history summary {cursor:pointer;padding:10px 0;color:var(--ats-ink,#5c5148);}
.ats-app .payment-proof-box details {margin-top:12px;line-height:1.7;}
.ats-app .payment-proof-box .payment-proof-amount {margin:12px 0;font-size:1.05rem;}
.ats-app .payment-proof-box .ats-btn {white-space:normal;min-height:44px;}
.ats-app #companion-section {padding:14px;border:1px solid #ded4ca;border-radius:18px;}
.ats-app #companion-section summary {cursor:pointer;font-weight:600;}
.ats-app #companion-section .companion-row {margin-top:12px;}
.ats-app .class-card button,.ats-app .class-item button,.ats-class-schedule .class-item button {border-radius:999px;}

/* Shared customer components (app.js): payment details, payment hand-off and the success popup. */
.ats-payment-methods { display:grid; gap:10px; margin:12px 0; }
.ats-payment-method { padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--white); }
.ats-payment-method > strong { display:block; color:var(--brand); }
.ats-payment-line { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin-top:4px; }
.ats-payment-line span { color:var(--muted); font-size:.9rem; }
.ats-payment-line strong { font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ats-payment-line .ui-copy-button { min-height:36px; min-width:64px; margin:0 0 0 auto; padding:4px 12px; }
.payment-proof-box { margin-top:14px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; }
.payment-proof-box.is-reviewing { border-color:#b9cdb2; background:#f1f6ee; color:var(--sage); }
.payment-proof-box.is-reviewing p { color:var(--ink); }
.payment-proof-box .payment-proof-link { display:inline-block; margin-top:8px; font-size:.9rem; color:var(--brand); }
.ats-confirm-head { text-align:center; margin-bottom:16px; }
.ats-confirm-tick { font-size:2rem; color:var(--sage); line-height:1; }
.ats-confirm-head h2 { margin:6px 0; color:var(--brand); }
.ats-confirm-ref { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 8px; margin:0; color:var(--muted); }
.ats-confirm-ref strong { color:var(--ink); letter-spacing:.04em; }
.ats-confirm-ref .ui-copy-button { min-height:34px; min-width:60px; margin:0; padding:3px 12px; }
.ats-confirm-summary { display:grid; gap:8px; padding:14px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; margin-bottom:14px; }
.ats-confirm-summary span { display:block; color:var(--muted); font-size:.85rem; }
.ats-confirm-pay { padding:14px; border:1px solid var(--line); border-radius:14px; background:#fffdf9; margin-bottom:14px; }
.ats-confirm-pay h3 { margin:0; color:var(--brand); font-size:1.1rem; }
.ats-confirm-note { margin:6px 0 0; color:var(--muted); font-size:.88rem; line-height:1.7; }
.ats-confirm-pay .payment-proof-box { margin-top:12px; padding:0; border:0; background:transparent; }
.ats-confirm-pay .payment-proof-box .ats-btn.primary { width:100%; justify-content:center; }
.ats-confirm-paid { padding:14px; border:1px solid #b9cdb2; border-radius:14px; background:#f1f6ee; color:var(--sage); margin-bottom:14px; }
.ats-confirm-manage { margin-bottom:14px; text-align:center; }
.ats-confirm-manage p { margin:6px 0 0; color:var(--muted); font-size:.85rem; }
.ats-confirm-rules { margin-top:12px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fffdf9; }
.ats-confirm-rules summary { cursor:pointer; font-weight:600; color:var(--brand); }
.ats-confirm-rules div { margin-top:10px; white-space:pre-line; color:var(--muted); font-size:.88rem; line-height:1.65; }
.ats-confirm-close { display:flex; justify-content:center; width:100%; margin-top:12px; }
/* The success popup carries the result; a success toast on top would cover its heading (audit u133). */
body:has(#successModal.active, .payment-reminder-modal.active, dialog.ats-payment-summary[open]) .toast-container,
body:has(#successModal.active, .payment-reminder-modal.active, dialog.ats-payment-summary[open]) .ats-action-toast.success { display:none; }

.ats-home-lookup { margin:-28px 0 48px; text-align:center; color:var(--muted); }
.ats-home-lookup a { color:var(--brand); font-weight:600; }
.ats-home-lookup[hidden] { display:none; }

/* Account booking cards: one coloured state badge, details, then small actions (audit u15). */
.ats-state { display:inline-flex; align-items:center; min-height:24px; padding:2px 10px; border-radius:999px; font:700 .78rem "Noto Sans TC",sans-serif; border:1px solid transparent; }
.ats-state.is-confirmed,.ats-state.is-done { background:#e7efe3; color:#3f5a39; border-color:#c6d6bf; }
.ats-state.is-unpaid { background:#fbf0dc; color:#7a5212; border-color:#ecd3a3; }
.ats-state.is-review { background:#e6eef6; color:#2f5373; border-color:#c5d5e5; }
.ats-state.is-refund { background:#fbeeea; color:#842f36; border-color:#efc9c2; }
.ats-state.is-cancelled,.ats-state.is-unknown { background:#eeeae6; color:#5f5650; border-color:#dcd3cb; }
.ats-booking-card .ats-card-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ats-booking-card h3 { margin:8px 0 2px; }
.ats-booking-card p { margin:4px 0; }
.ats-booking-card .ats-card-amount { font-weight:700; color:var(--ink); }
.ats-booking-card .ats-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:12px; }
.ats-booking-card .ats-card-actions .ats-btn { min-height:36px; padding:5px 14px; font-size:.88rem; }

/* Booking pages (audit u7 u9 u16 u17 u29 u113 u117 u118). */
/* One disclosure style: a ▸ that turns when open. */
.policy-panel > summary,.ats-rate-details > summary,.ats-disclosure > summary { list-style:none; }
.policy-panel > summary::-webkit-details-marker,.ats-rate-details > summary::-webkit-details-marker,.ats-disclosure > summary::-webkit-details-marker { display:none; }
.policy-panel > summary::before,.ats-rate-details > summary::before,.ats-disclosure > summary::before { content:'▸'; display:inline-block; width:1.1em; transition:transform .16s; }
.policy-panel[open] > summary::before,.ats-rate-details[open] > summary::before,.ats-disclosure[open] > summary::before { transform:rotate(90deg); }
.policy-panel ol { margin:0 0 10px; padding-left:1.4em; line-height:1.8; font-size:14px; }
/* Payment method radios above the total. */
.ats-pay-choices { margin:6px 0 4px; padding:0; border:0; min-width:0; }
.ats-pay-choices legend { padding:0; margin-bottom:6px; font-weight:700; color:var(--ink); font-size:14px; }
.ats-pay-choice { display:flex; align-items:flex-start; gap:10px; margin:0 0 6px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-weight:500; line-height:1.5; }
.ats-pay-choice input { width:auto; min-height:0; margin:3px 0 0; padding:0; border:0; box-shadow:none; flex:0 0 auto; }
.ats-pay-choice:has(input:checked) { border-color:var(--brand); background:#f7f1eb; }
.ats-link-button { min-height:0; padding:0 2px; border:0; background:none; color:var(--brand); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.login-notice a { color:var(--brand); font-weight:700; margin-left:4px; }
.privacy-notice { margin:12px 0 0; font-size:.82rem; line-height:1.7; color:var(--muted); }
.privacy-notice a,.ats-trial-note a { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
/* Sticky next step on phones. */
.ats-next-bar { display:none; }
@media(max-width:800px) {
    .ats-next-bar:not([hidden]) { position:fixed; left:0; right:0; bottom:0; z-index:60; display:flex; align-items:center; gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fffdf9; border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(76,54,40,.1); }
    .ats-next-bar span { flex:1; min-width:0; font-size:13px; line-height:1.45; color:var(--ink); font-weight:600; }
    .ats-next-bar .ats-btn { flex:0 0 auto; padding:10px 16px; font-size:14px; }
    body:has(.ats-next-bar:not([hidden])) { padding-bottom:76px; }
}
/* Rental page. */
.rental-monthly-link { text-align:center; margin:0 0 18px; }
.rental-monthly-link .ats-btn { display:inline-flex; align-items:center; min-height:40px; padding:7px 18px; font-size:14px; }
.slot-hint { margin:12px 0 0; font-size:13px; color:var(--muted); line-height:1.7; }
.rental-submit-summary:not(:empty) { margin:16px 0 10px; padding:12px 14px; border-radius:12px; background:var(--paper); font-weight:700; color:var(--ink); }
.summary-item small { color:var(--muted); font-size:12px; }
.summary-item button.summary-remove { flex:0 0 32px; width:32px; height:32px; min-height:32px; padding:0; border-radius:50%; font-size:1.2rem; line-height:1; white-space:nowrap; }
/* Slot states: available = white with a clear border; cannot book = grey, no border, struck-through
   time plus the reason; class blocks hatched; selected = solid brown. Legend swatches match. */
.slot-button.available { background:#fff; border:1px solid #a8968a; }
.slot-button.available.selected { background:var(--brand); border-color:var(--brand); color:#fff; }
.totals-row.total { flex-wrap:wrap; gap:4px 12px; }
.totals-row.total > span:last-child { margin-left:auto; text-align:right; }
.slot-button.disabled,.slot-button.pending { background:#ebe6e1; border-color:transparent; color:#6c5f56; box-shadow:none; }
.slot-button.disabled > span:first-child { text-decoration:line-through; text-decoration-color:rgba(108,95,86,.6); }
.slot-button.class-occupied { background:repeating-linear-gradient(135deg,#e4ddd6 0 6px,#f2eeea 6px 12px); }
.slot-button .shared-capacity { font-size:12px; font-weight:500; }
.slot-button.available .shared-capacity { color:var(--sage); }
.slot-button.available .shared-capacity.is-last { color:var(--gold); }
.slot-button.selected .shared-capacity { color:#fff; }
.slot-button .class-tag { color:#5f5249; }
.legend { gap:8px 16px; }
.legend-box { width:14px; height:14px; border-radius:4px; border:1px solid transparent; flex:0 0 auto; }
.legend-box.available { background:#fff; border-color:#a8968a; }
.legend-box.selected { background:var(--brand); border-color:var(--brand); }
.legend-box.unavailable,.legend-box.pending { background:#ebe6e1; border-color:transparent; }
.legend-box.class-occupied { background:repeating-linear-gradient(135deg,#d6cdc4 0 3px,#f2eeea 3px 6px); border-color:transparent; }
.account-next-note { max-width:520px; margin:0 auto 14px; text-align:center; color:var(--brand); }
.account-next-note:has(+ .account-auth-tabs[style*="none"]) { display:none; }
/* Short pages keep the footer at the bottom of the window (audit u12). */
body.ats-app:has(> .ats-shell) { display:flex; flex-direction:column; }
body.ats-app:has(> .ats-shell) > .ats-shell { flex:1 0 auto; }

/* Kinetics calm batch: springs move only transform/opacity, and reduced motion shows the end state. */
/* Squish Button + Toggle Pills: a tactile press, and only the slot just picked pops (the grid re-renders on every tap). */
.slot-button.available { transition:background-color .16s,border-color .16s,box-shadow .16s,transform .35s cubic-bezier(.34,1.56,.64,1); }
.slot-button.available:active { transform:scale(.95); transition-duration:.16s,.16s,.16s,.08s; }
.slot-button.ui-pop { animation:ui-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes ui-pop { from { transform:scale(.92); } to { transform:scale(1); } }
/* Notification Slide-in: the phone total bar rises into place when it first appears. */
.ats-next-bar:not([hidden]) { animation:ui-bar-in .5s cubic-bezier(.18,1.25,.4,1) both; }
@keyframes ui-bar-in { from { transform:translateY(110%); } to { transform:none; } }
/* Modal settle: every customer dialog eases up into place, like the admin dialogs. */
.active > [role="dialog"][aria-modal="true"],.active > [role="alertdialog"][aria-modal="true"],dialog.ats-payment-summary[open] { animation:ui-modal-in .45s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ui-modal-in { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
/* Success Check: the ring and tick draw themselves on the confirmation. */
.ats-confirm-tick svg { display:block; width:52px; height:52px; margin:0 auto; }
.ui-check-ring { fill:none; stroke:var(--sage); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; animation:ui-draw .5s cubic-bezier(.65,0,.35,1) .15s forwards; }
.ui-check-tick { fill:none; stroke:var(--sage); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; animation:ui-draw .3s ease-out .55s forwards; }
@keyframes ui-draw { to { stroke-dashoffset:0; } }
/* Toast Overshoot: action toasts slide past their rest position, then settle. */
.ats-action-toast { animation:ui-toast-in .55s cubic-bezier(.18,1.25,.4,1) both; }
@keyframes ui-toast-in { from { opacity:0; transform:translateY(-16px) scale(.96); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) {
    .ui-check-ring,.ui-check-tick { stroke-dashoffset:0 !important; }
    .slot-button.available:active { transform:none; }
}
/* Helper note on the rental page (was injected by phase2.js). */
.phase2-helper { border:1px solid rgba(143,116,102,.28); border-radius:18px; background:rgba(143,116,102,.08); color:#5f4e44; padding:12px 14px; margin:12px 0; font-size:.92rem; }