/* Phase 0 手寫樣式；POS 操作面採大觸控元件，資料表維持緊湊。 */
*{box-sizing:border-box}
[x-cloak]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{
  --bg:#f4f4f5;--surface:#ffffff;--ink:#17181c;--muted:#6b7178;--link:#1a56db;--money:#166534;
  --line:#e7e8ea;--accent:#1b1d23;--accent-ink:#ffffff;
  --accent-soft:#f0f1f3;--accent-line:#cfd2d8;
  /* GOALSOFT 品牌獵豹橘 */
  --brand:#ff6a20;--brand-soft:rgba(255,106,32,.14);--brand-soft-ink:#a33b08;
  --brand-light-bg:#fff8f3;--brand-line:rgba(255,106,32,.4);
  --brand-inset-line:rgba(255,106,32,.2);--brand-focus-ring:rgba(255,106,32,.28);
  --focus-ring:rgba(27,29,35,.18);--panel-soft:#fbfcfc;--line-soft:var(--accent-line);
  --ok-ink:#0d6b68;--ok-bg:#eef8f6;--ok-line:#b9ded8;
  --selection-check:#16a34a;
  --danger-bg:#fff4f2;--danger-line:#efc6c0;--chat-accent:#b8bcc4;
  --open:#b3261e;--done:#9a6a00;--departed:#2457c5;--danger:#e11d2a;--soft:#f8f8f9;
  --status-open-bg:#fff1ef;--status-open-line:var(--danger-line);
  --status-done-bg:#fff5df;--status-done-line:#e4c26f;
  --status-departed-bg:#eef5ff;--status-departed-line:#bcd2f4;
  --sidebar-bg:#16181d;--sidebar-ink:#d6d8dc;--sidebar-ink-strong:#fff;
  --sidebar-toggle-bg:#20232a;--sidebar-active-bg:#23262d;
  --sidebar-muted-ink:#7b8088;--sidebar-tenant-ink:#8fa3a1;
  --sidebar-control-line:rgba(255,255,255,.14);--sidebar-icon-bg:rgba(255,255,255,.08);
  --sidebar-divider:rgba(255,255,255,.08);--sidebar-focus-ring:rgba(255,255,255,.24);
  --sidebar-width:200px;--sidebar-collapsed-width:72px;
  --dialog-backdrop:rgba(12,16,20,.42);--dialog-backdrop-blur:6px;
  --shadow:0 4px 12px rgba(23,24,28,.08);
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
dialog::backdrop{background:var(--dialog-backdrop);-webkit-backdrop-filter:blur(var(--dialog-backdrop-blur));backdrop-filter:blur(var(--dialog-backdrop-blur))}
html{height:100dvh;overflow:hidden;overscroll-behavior:none}
/* iPad：position:fixed 是阻止 OS 級整頁橡皮筋回彈的關鍵。軟鍵盤可能遮住輸入框；本 app 表單多在可自捲 dialog，先不加 JS，若日後 iPad 實測發生再補 focus→scrollIntoView。 */
body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;margin:0;font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
.timetext{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.datecell{white-space:nowrap;font-size:.8rem;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.money{color:var(--money);text-align:right;font-variant-numeric:tabular-nums}
.app{display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr);height:100dvh;min-height:0;overflow:hidden}
.sidenav{height:100dvh;min-height:0;background:var(--sidebar-bg);color:var(--sidebar-ink);display:flex;flex-direction:column;padding:12px 0;overflow-y:auto;overflow-x:hidden}
.sidenav-status{display:flex;flex-direction:column;gap:8px;padding:0 12px 12px;flex:0 0 auto}
.sidenav-clock{width:100%;max-width:170px;margin:0 auto;padding:9px 12px;border-radius:8px;background:var(--surface);text-align:center}
.sidenav-clock-label{color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.1em}
.sidenav-clock-time{margin-top:3px;font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.03em;color:var(--ink);line-height:1.2}
.sidenav-expiry-line{display:flex;align-items:baseline;justify-content:center;gap:6px;font-size:.7rem;color:var(--muted)}
.sidenav-expiry-label{font-weight:600}
.sidenav-expiry-date{font-weight:700;font-variant-numeric:tabular-nums}
.sidenav-expiry-line.is-warning,.sidenav-expiry-line.is-warning .sidenav-expiry-date{color:var(--danger)}
.sidenav-expiry-warning{font-weight:700;white-space:nowrap}
.sidenav-head{display:flex;align-items:center;gap:8px;padding:0 10px 12px}
.sidebar-toggle{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border:1px solid var(--sidebar-control-line);
  border-radius:8px;background:var(--sidebar-toggle-bg);color:var(--sidebar-ink-strong);font:inherit;font-size:1.45rem;font-weight:700;line-height:1;cursor:pointer}
.sidebar-toggle:focus-visible{outline:3px solid var(--sidebar-focus-ring);outline-offset:2px}
.brand{font-size:1.2rem;font-weight:700;color:var(--sidebar-ink-strong);white-space:nowrap;min-width:0}
.brand span{color:var(--brand);font-weight:400}
.sidenav nav{display:flex;flex-direction:column;gap:2px}
.navlink{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;color:var(--sidebar-ink);text-decoration:none;padding:8px 16px;font-size:.92rem}
.navlink.active{background:var(--sidebar-active-bg);color:var(--sidebar-ink-strong);font-weight:700}
.navlink.active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.navsoon{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 16px;font-size:.82rem;color:var(--sidebar-muted-ink)}
.navicon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:8px;background:var(--sidebar-icon-bg);
  color:inherit;font-size:.9rem;font-weight:700;line-height:1}
.navtext{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navfoot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--sidebar-divider)}
.tenant{font-size:.8rem;color:var(--sidebar-tenant-ink);margin-bottom:8px}
.linkish{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;background:none;border:none;color:var(--sidebar-ink-strong);
  cursor:pointer;padding:0;font-size:.9rem;text-align:left}
.linkish:focus-visible{outline:3px solid var(--sidebar-focus-ring);outline-offset:2px;border-radius:8px}
html.sidebar-collapsed .app{grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr)}
html.sidebar-collapsed .sidenav{padding:10px 8px}
html.sidebar-collapsed .sidenav-status{display:none}
html.sidebar-collapsed .sidenav-head{justify-content:center;padding:0 0 10px}
html.sidebar-collapsed .brand,html.sidebar-collapsed .navtext,html.sidebar-collapsed .tenant{display:none}
html.sidebar-collapsed .navlink,html.sidebar-collapsed .navsoon,html.sidebar-collapsed .linkish{
  justify-content:center;gap:0;padding:0;min-height:56px;width:56px;border-radius:8px}
html.sidebar-collapsed .navlink.active{background:var(--sidebar-active-bg)}
html.sidebar-collapsed .navfoot{padding:10px 0}
.content{height:100dvh;min-height:0;min-width:0;overflow:hidden;padding:16px;display:flex;flex-direction:column;gap:12px}
.expiry-warning-banner{
  display:flex;align-items:center;justify-content:center;gap:12px;flex:0 0 auto;min-height:48px;padding:4px 8px 4px 16px;
  border:1px solid #e0b84f;border-radius:6px;background:#fff8df;color:#6e4b00;font-weight:700;text-align:center
}
.expiry-warning-banner a{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:6px;
  background:#8a5a00;color:#fff;font-weight:800;text-decoration:none;white-space:nowrap;touch-action:manipulation
}
.expiry-warning-banner a:focus-visible{outline:3px solid rgba(138,90,0,.28);outline-offset:2px}
.connection-banner{
  --connection-banner-bg:#fff8df;--connection-banner-line:#e0b84f;--connection-banner-ink:#6e4b00;
  position:fixed;top:10px;left:calc(var(--sidebar-width) + 16px);right:16px;z-index:60;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:40px;padding:8px 14px;border:1px solid var(--connection-banner-line);border-radius:6px;background:var(--connection-banner-bg);
  color:var(--connection-banner-ink);box-shadow:var(--shadow);font-weight:700;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease
}
.connection-banner[hidden]{display:none}
.connection-banner.is-visible{opacity:1;transform:translateY(0)}
html.sidebar-collapsed .connection-banner{left:calc(var(--sidebar-collapsed-width) + 16px)}
@media (prefers-color-scheme: dark){
  .expiry-warning-banner{border-color:#b78322;background:#2b2208;color:#fff1c4}
  .expiry-warning-banner a{background:#e0b84f;color:#2b2208}
	.connection-banner{--connection-banner-bg:#2b2208;--connection-banner-line:#b78322;--connection-banner-ink:#fff1c4}
}
@media (max-width: 760px){
  .expiry-warning-banner{gap:8px;padding-left:10px;font-size:.9rem}
	.connection-banner{top:8px;left:8px;right:8px;min-height:38px;padding:7px 10px;font-size:.9rem}
}
.pagehead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex:0 0 auto}
.pagehead h1{font-size:1.36rem;font-weight:800;margin:0}
.stat{color:var(--muted)}
.stat b{color:var(--accent);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;margin-left:6px}
.stat b.money{color:var(--money)}
.tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:auto;min-width:0}
.content > .tablewrap,.content > #results.tablewrap{flex:1;min-height:0}
table{border-collapse:collapse;width:100%;font-size:.92rem}
table .timetext{white-space:nowrap}
th{height:36px;background:var(--soft);text-align:left;padding:6px 8px;font-size:.78rem;font-weight:700;color:var(--muted);
  letter-spacing:.03em;white-space:nowrap;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
th[aria-sort="ascending"] .rowlink::after{content:" ▲"}
th[aria-sort="descending"] .rowlink::after{content:" ▼"}
td{height:52px;padding:8px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.plate{font-weight:700;letter-spacing:.03em;text-align:left;white-space:nowrap}
td.itemname{font-weight:600}
tr.state-open td.plate{color:var(--open)}
tr.state-done td.plate{color:var(--done)}
tr.state-departed td.plate{color:var(--departed)}
table:has(td.empty){height:100%}
td.empty{text-align:center;vertical-align:middle;color:var(--muted);padding:22px}
th.actions,td.actions{width:1%;text-align:right;white-space:nowrap}
.actionbar{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;white-space:nowrap}
.search{width:100%;max-width:520px;min-height:56px;font-size:.95rem;padding:8px 11px;border:1px solid var(--line);border-radius:6px;background:var(--surface);flex:0 0 auto}
.search:focus{outline:3px solid var(--focus-ring);border-color:var(--accent)}
.errorbox{background:var(--danger-bg);color:var(--danger);border-left:3px solid var(--danger);
  padding:12px 16px;border-radius:0 6px 6px 0;margin-bottom:16px}

.dashboard-page{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;overflow:hidden}
.pagehead-actions{display:flex;align-items:center;gap:8px}
.pagehead .headbtn{min-height:56px;min-width:132px;padding:12px 22px;font-size:1rem;font-weight:700}
.pagehead .headbtn.primary{font-weight:800}
.todaytable{min-height:0}
.todaytable table{min-width:1180px}
.todaytable .order-statuscell{white-space:nowrap;min-width:76px}
.todaytable .order-services{white-space:normal;overflow-wrap:anywhere;min-width:220px}
.todaytable .order-reception{white-space:nowrap;min-width:72px}
.todaytable .order-branch{white-space:nowrap;min-width:64px}
.proc-timer{margin-top:3px;color:var(--muted);font-size:.72rem;line-height:1.1;font-variant-numeric:tabular-nums}
.statusbadge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;min-width:72px;
  padding:4px 8px;border-radius:999px;font-size:.8rem;font-weight:700;white-space:nowrap;border:1px solid transparent}
.statusbadge.open{color:var(--open);background:var(--status-open-bg);border-color:var(--status-open-line)}
.statusbadge.done{color:var(--done);background:var(--status-done-bg);border-color:var(--status-done-line)}
.statusbadge.departed{color:var(--departed);background:var(--status-departed-bg);border-color:var(--status-departed-line)}
.order-pos-dialog{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;border-radius:0;
  padding:0;background:var(--bg);color:var(--ink);overflow:hidden}
.orderform{position:relative;background:var(--surface);margin:0;height:100dvh;min-height:0;overflow:hidden;display:grid;
  grid-template-rows:auto auto minmax(0,1fr);gap:12px;padding:14px}
.orderform-content{display:contents}
.orderform[data-mode="edit"]{grid-template-rows:auto minmax(0,1fr)}
.orderpos-top{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:10px;align-items:start;flex:0 0 auto}
.orderpos-head{display:grid;grid-template-columns:minmax(180px,1.15fr) minmax(150px,.85fr) minmax(150px,.75fr) minmax(240px,1.45fr);
  gap:10px 12px;align-items:start;min-height:0}
@media (min-width:768px) and (max-width:900px){
  .orderpos-head{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.orderpos-close{min-height:56px;min-width:56px;background:var(--accent-soft);border:1px solid var(--line-soft)}
.plate-search-field{position:relative}
.orderpos-head .plate-search-field input{font-size:1.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:64px}
.plate-suggest-popover{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:50;max-height:320px;overflow:auto;
  border:1px solid var(--accent-line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.plate-suggest-popover:empty{display:none!important}
.plate-suggest-menu{display:flex;flex-direction:column;padding:4px}
.plate-suggest-option{width:100%;min-height:56px;border:0;border-radius:6px;background:transparent;color:var(--ink);
  padding:8px 10px;text-align:left;font:inherit;cursor:pointer}
.plate-suggest-option:hover,.plate-suggest-option:focus-visible{outline:0;background:var(--accent-soft)}
.plate-suggest-main{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.plate-suggest-plate{font-size:1.08rem;font-weight:700;letter-spacing:.06em;white-space:nowrap}
.plate-suggest-meta{display:flex;align-items:center;justify-content:flex-end;gap:0;min-width:0;color:var(--muted);
  font-size:.84rem;font-weight:700;white-space:nowrap}
.plate-suggest-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.plate-suggest-meta span + span::before{content:" · ";color:var(--muted)}
.plate-suggest-empty{padding:12px 14px;color:var(--muted);font-weight:700}
.order-head-picker-group{display:contents}
.order-head-picker-group .selected-pill,.order-head-picker-group .field select,.order-head-picker-group .staff-pillgrid{
  min-height:56px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel-soft);color:var(--ink)}
.order-head-picker-group .selected-pill,.order-head-picker-group .field select{height:56px;box-sizing:border-box}
.selected-pill{display:flex;align-items:center;font-weight:700;padding:8px 12px;white-space:nowrap}
.service-type-bar{display:flex;align-items:center;gap:10px;min-height:56px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-soft);padding:8px 10px;color:var(--muted);font-size:.86rem;font-weight:700}
.service-type-options{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.service-type-choice{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:126px;
  padding:8px 16px;border:1px solid var(--line-soft);border-radius:8px;background:#fff;color:var(--ink);
  font-weight:700;cursor:pointer;user-select:none;white-space:nowrap}
.service-type-choice:has(.native-toggle:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.service-type-choice:has(.native-toggle:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.orderpos-main{min-height:0;display:grid;grid-template-columns:minmax(0,1.85fr) minmax(320px,1fr);gap:12px}
.order-menu-panel{min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-soft);overflow:hidden;padding:10px 10px 0}
.order-menu-panel.invalid{border-color:var(--danger);background:var(--danger-bg)}
.sectionlabel{font-size:.86rem;color:var(--muted);font-weight:700;margin:0 0 8px}
.custom-service-create{flex:0 0 auto;width:auto;min-height:56px;min-width:132px;border:2px solid var(--brand);border-radius:8px;background:var(--brand);
  color:#fff;font:inherit;font-size:1.05rem;font-weight:800;letter-spacing:.02em;cursor:pointer;text-align:center;padding:10px 18px}
.custom-service-create:focus-visible{outline:3px solid var(--brand-focus-ring);outline-offset:2px}
.custom-service-create:active{filter:brightness(.96)}
.custom-service-editor{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(120px,.65fr) auto auto;gap:8px;
  align-items:end;flex:0 0 auto;margin:0 0 10px;border:2px solid var(--brand);border-radius:8px;background:#fff;padding:10px}
.custom-service-add,.custom-service-cancel{min-width:76px}
.custom-service-error{grid-column:1 / -1;color:var(--danger);font-size:.82rem;font-weight:700}
.service-tabs{display:flex;gap:8px;overflow-x:auto;padding:0 2px 10px;margin:0 0 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.category-tab{flex:0 0 auto;min-height:56px;min-width:96px;border:1px solid var(--line-soft);border-radius:8px;
  background:#fff;color:var(--ink);font:inherit;font-weight:700;padding:10px 18px;cursor:pointer}
.category-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:inset 0 0 0 1px var(--accent-line)}
.category-tab:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.service-scroll{min-height:0;overflow-y:auto;padding:0 2px 10px}
.service-group{margin:0 0 14px}
.service-group:last-child{margin-bottom:0}
.service-group h2{margin:0 0 8px;font-size:1rem;color:var(--ink)}
.custom-service-group{border-top:2px solid var(--brand);padding-top:10px}
.custom-service-heading-badge,.custom-service-badge,.cart-custom-badge{display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:var(--brand-soft);color:var(--brand-soft-ink);font-size:.72rem;font-weight:700;line-height:1;padding:4px 7px}
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.native-toggle{position:absolute;opacity:0;pointer-events:none}
.service-tile{position:relative;display:grid;grid-template-rows:1fr auto;gap:8px;align-items:stretch;
  min-height:104px;padding:14px 16px;border:2px solid transparent;border-radius:8px;background:var(--accent-soft);
  color:var(--ink);cursor:pointer;user-select:none}
.service-tile:has(.native-toggle:checked){border-color:var(--accent);background:var(--accent);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px var(--accent)}
.service-tile:has(.native-toggle:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.tile-check{position:absolute;top:8px;right:8px;z-index:1;width:24px;height:24px;display:grid;place-items:center;
  background:var(--selection-check);color:#fff;border-radius:999px;box-shadow:0 0 0 2px #fff;
  font-size:.8rem;font-weight:800;line-height:1;opacity:0}
.service-tile:has(.native-toggle:checked) .tile-check{opacity:1}
.custom-service-tile{padding-top:40px;border-color:var(--brand-line);background:var(--brand-light-bg)}
.custom-service-tile:has(.native-toggle:checked){border-color:var(--brand);background:var(--brand-light-bg);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--brand-inset-line)}
.custom-service-badge{position:absolute;top:9px;left:10px}
.service-name{padding-right:34px;font-size:1.05rem;font-weight:700;line-height:1.32;white-space:normal;word-break:break-word;overflow:visible;text-overflow:clip}
.service-price{align-self:end;color:var(--money);font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
.service-tile:has(.native-toggle:checked) .service-price{
  justify-self:end;padding:2px 6px;border-radius:4px;background:#fff;color:var(--money)
}
.staff-pillgrid{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:56px;padding:6px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-soft)}
.staff-pillgrid.invalid{border-color:var(--danger);background:var(--danger-bg)}
.staff-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:82px;
  padding:8px 14px;border:1px solid var(--line-soft);border-radius:999px;background:var(--accent-soft);color:var(--ink);
  font-weight:700;cursor:pointer;user-select:none;white-space:nowrap}
.staff-pill:has(.native-toggle:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.staff-pill:has(.native-toggle:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.order-head-picker-group .staff-pillgrid{min-height:56px;padding:5px;box-sizing:border-box;align-items:center}
.order-head-picker-group .staff-pill{min-height:44px;min-width:76px;background:var(--surface)}
.order-head-picker-group .staff-pill:has(.native-toggle:checked){background:var(--accent-soft);border-color:var(--accent);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--accent)}
.order-head-picker-group .staff-pill:has(.native-toggle:checked)::after{content:"✓";margin-left:7px;color:var(--selection-check);font-weight:800}
.staff-prerequisite-overlay{position:absolute;inset:0;z-index:80;display:grid;place-items:center;padding:24px;
  background:rgba(244,244,245,.9)}
.staff-prerequisite-card{width:min(540px,calc(100vw - 48px));display:flex;flex-direction:column;align-items:center;gap:14px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 18px 48px rgba(23,24,28,.16);
  padding:36px;text-align:center}
.staff-prerequisite-kicker{color:var(--muted);font-size:.76rem;font-weight:800;letter-spacing:.12em}
.staff-prerequisite-card h2{margin:0;color:var(--ink);font-size:1.65rem;line-height:1.25;letter-spacing:-.02em}
.staff-prerequisite-card p{max-width:440px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.7}
.staff-prerequisite-card small{color:var(--muted);font-size:.8rem}
.staff-prerequisite-actions{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.staff-prerequisite-actions > *{flex:1;min-width:0}
.staff-prerequisite-primary,.staff-prerequisite-secondary{min-height:56px}
.staff-prerequisite-modal{width:min(560px,calc(100vw - 32px));border-radius:12px}
.staff-prerequisite-modal .staff-prerequisite-card{width:100%;border:0;border-radius:0;box-shadow:none}
.order-cart{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto auto auto auto;gap:10px;
  border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px;overflow:hidden}
.cart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.cart-head h2{font-size:1rem;margin:0}
.cart-head span{color:var(--muted);font-weight:700}
.cart-list{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.cart-empty{border:1px dashed var(--line-soft);border-radius:8px;color:var(--muted);padding:16px;text-align:center}
.cart-line{display:grid;grid-template-columns:minmax(0,1fr) auto 56px;gap:8px;align-items:center;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:8px}
.cart-line-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700;line-height:1.32;overflow-wrap:anywhere}
.cart-line b{color:var(--money);font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-remove{min-height:56px;min-width:56px;border:0;border-radius:8px;background:var(--danger-bg);color:var(--danger);
  cursor:pointer;font-size:1.35rem;font-weight:700;line-height:1}
.cart-memo textarea{min-height:100px;resize:none;font-size:1rem}
.cart-paid input{text-align:right;font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:800}
.order-backdate{grid-column:1 / -1;display:grid;grid-template-columns:minmax(180px,auto) minmax(220px,320px);
  gap:10px;align-items:end;border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px}
.order-cart .order-backdate{grid-template-columns:minmax(0,1fr);background:var(--panel-soft);padding:9px}
.backdate-toggle{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;
  border:1px solid var(--line-soft);border-radius:8px;background:var(--accent-soft);color:var(--ink);padding:8px 12px;
  font-weight:700;cursor:pointer;user-select:none}
.backdate-toggle:has(.native-toggle:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.backdate-toggle:has(.native-toggle:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.backdate-switch{position:relative;flex:0 0 52px;width:52px;height:30px;border-radius:999px;background:var(--line-soft);
  box-shadow:inset 0 0 0 1px rgba(18,32,35,.08)}
.backdate-switch::after{content:"";position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:999px;
  background:#fff;box-shadow:0 1px 3px rgba(18,32,35,.2);transition:transform .14s ease}
.backdate-toggle:has(.native-toggle:checked) .backdate-switch{background:var(--accent)}
.backdate-toggle:has(.native-toggle:checked) .backdate-switch::after{transform:translateX(22px)}
.backdate-datetime input{font-variant-numeric:tabular-nums}
.backdate-datetime[x-cloak]{display:none!important}
.orderpos-errors{min-height:0}
.cart-total{border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;color:var(--muted)}
.cart-total b{color:var(--money);font-size:2.45rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.cart-actions{display:grid;grid-template-columns:1fr;gap:8px}
.cart-actions:has(.pos-cancel){grid-template-columns:minmax(120px,.42fr) minmax(180px,1fr)}
.pos-cancel{min-height:76px;font-size:1.12rem}
.wash-card-panel-shell{grid-column:1 / -1;min-height:0}
.wash-card-panel{min-height:0;height:100%;display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-soft);padding:12px;overflow:auto}
.wash-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:8px}
.wash-card-head h2{font-size:1rem;margin:0}
.wash-card-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(160px,.45fr);gap:12px;align-items:start}
.wash-card-lookup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:flex-start}
.wash-card-no input{text-transform:uppercase;font-size:1.25rem;font-weight:700;letter-spacing:.06em;min-height:56px}
.wash-card-confirm-field{align-self:start}
.wash-card-confirm{height:56px;min-height:56px;min-width:92px;align-self:flex-start}
.wash-card-price input{min-height:56px;text-align:right;font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:800;color:var(--money)}
.wash-card-status{min-height:56px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px 12px;
  display:flex;align-items:center;gap:8px;font-weight:700}
.wash-card-status b{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.wash-card-status.success{color:var(--ok-ink);border-color:var(--ok-line);background:var(--ok-bg)}
.wash-card-status.error{color:var(--danger);border-color:var(--danger-line);background:var(--danger-bg)}
.wash-card-status.warning{color:#8a5a00;border-color:#f1d492;background:#fff8e8}
.wash-card-status.muted{color:var(--muted)}
.wash-card-use-warning{grid-column:1 / -1}
.wash-card-memo{grid-column:1 / -1}
.wash-card-memo textarea{min-height:100px;resize:none;font-size:1rem}
.wash-card-errors{min-height:0}
.wash-card-actions{margin-top:auto;display:flex;justify-content:flex-end}
.wash-card-actions .pos-submit{min-width:160px}
.membership-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}
.membership-card-counts{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.membership-card-count{min-height:56px;border:1px solid var(--line);border-radius:8px;background:#fff;
  padding:9px 11px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.membership-card-count span{min-width:0;color:var(--muted);font-size:.84rem;font-weight:700;white-space:normal;word-break:break-word}
.membership-card-count b{color:var(--accent);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.membership-card-paid input{min-height:56px;text-align:right;font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:800}
.membership-card-memo{grid-column:1 / -1}
.membership-card-use-options{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.membership-card-use-option{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:center;
  min-height:64px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}
.membership-card-use-option:has(.native-toggle:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.membership-card-use-option:has(.native-toggle:focus-visible){outline:3px solid var(--focus-ring);outline-offset:2px}
.membership-card-use-option:has(.native-toggle:disabled){cursor:not-allowed;background:var(--accent-soft);color:var(--muted);opacity:.78}
.membership-card-use-check{position:absolute;top:0;right:0;width:30px;height:28px;display:grid;place-items:center;
  border-radius:0 8px 0 8px;background:var(--accent);color:#fff;font-weight:700;opacity:0}
.membership-card-use-option:has(.native-toggle:checked) .membership-card-use-check{opacity:1}
.membership-card-use-name{min-width:0;font-weight:700;line-height:1.3;white-space:normal;word-break:break-word}
.membership-card-use-count{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.membership-card-use-option:has(.native-toggle:disabled) .membership-card-use-count{color:var(--muted)}
.membership-card-use-type-error{grid-column:1 / -1}
.pos-submit{min-height:76px;font-size:1.35rem}

.payoutpanel{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}
.toolform{padding:10px;background:var(--panel-soft)}
.payoutform{border-bottom:1px solid var(--line);flex:0 0 auto}
.payoutgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;align-items:start}
.payoutgrid .amountfield input{text-align:right;font-variant-numeric:tabular-nums}
.payoutsubmit{align-self:end;min-width:72px}
.payoutsummary{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-height:44px;padding:8px 10px;
  border-bottom:1px solid var(--line);color:var(--muted);background:var(--surface);flex:0 0 auto}
.payoutsummary b{font-size:1.25rem;font-weight:800;color:var(--money);font-variant-numeric:tabular-nums}
#payout-list td:not(:nth-child(2)){white-space:nowrap}
#payout-list td:nth-child(2){white-space:normal;overflow-wrap:anywhere}
.nested-tablewrap{border:0;border-radius:0;flex:1;min-height:0;min-width:0}

.reservations-realtime{flex:1;min-height:0;display:flex;flex-direction:column}
.reservation-panel{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
.reservation-form{border-bottom:1px solid var(--line)}
.reservation-formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;align-items:start}
.reservation-formgrid .plate-search-field input{min-height:64px;text-transform:uppercase;font-size:1.7rem;font-weight:700;letter-spacing:.06em}
.reservation-form .selected-pill{min-height:56px;height:56px;box-sizing:border-box;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-soft);color:var(--ink)}
.reservation-time-field input{font-variant-numeric:tabular-nums}
.reservation-form .reservation-submit{align-self:end;width:100%;min-width:0}
.reservation-sections{min-height:0;display:grid;grid-template-rows:minmax(220px,.42fr) minmax(300px,.58fr);gap:10px;
  overflow:hidden;padding:10px;background:var(--bg)}
.reservation-section{min-height:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);overflow:hidden}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
  padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel-soft);flex:0 0 auto}
.section-head h2{margin:0;font-size:1rem}
.reservation-table{min-width:1080px}
.reservation-table td{white-space:nowrap}
.reservation-row{cursor:pointer}
.reservation-row:active td{background:var(--accent-soft)}
.reservation-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.reservation-time{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.reservation-phone{white-space:nowrap;font-variant-numeric:tabular-nums}
.reservation-name{white-space:nowrap;min-width:72px}
.reservation-branch{white-space:nowrap;min-width:64px}

.reports-page{flex:1;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:12px;overflow:hidden}
.report-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end;
  border:1px solid var(--line);border-radius:6px;flex:0 0 auto}
.report-toolbar.htmx-request button[type='submit']{opacity:.6}
.report-range-picker{grid-column:1 / -1;display:flex;flex-direction:column;gap:6px;min-width:0}
.report-range-label{color:var(--muted);font-size:.82rem;font-weight:700}
.report-range-chips{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;padding:0 2px 2px;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.report-range-chip{flex:0 0 auto;min-height:56px;min-width:88px;touch-action:manipulation}
.report-date-fields{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end}
.report-date-fields[hidden]{display:none}
.report-results{min-height:0;display:flex;flex-direction:column;gap:12px;overflow:auto;padding-right:2px}
.report-section{min-height:340px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;background:var(--surface);overflow:hidden;flex:0 0 auto}
.report-revenue{min-height:520px}
.report-expense{min-height:320px}
.report-section-note{color:var(--muted);font-size:.84rem;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
.report-summary{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.report-summary-single{grid-template-columns:minmax(150px,260px)}
.report-stat{min-height:58px;border:1px solid var(--line-soft);border-radius:6px;background:var(--panel-soft);padding:8px 10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
.report-stat span{min-width:0;color:var(--muted);font-size:.84rem;font-weight:700;white-space:normal;word-break:break-word}
.report-stat b{color:var(--accent);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.report-stat b.money{color:var(--money)}
.report-table td{height:44px;white-space:nowrap}
.report-revenue-table{min-width:1320px}
.report-expense-table{min-width:680px}
.report-compact-table{min-width:520px}
.report-compact-tablewrap{flex:0 0 auto;max-height:260px;min-width:0;border-top:1px solid var(--line)}
.report-date{white-space:nowrap;font-variant-numeric:tabular-nums}
.report-services,.report-memo{white-space:normal;overflow-wrap:anywhere}
.report-branch{white-space:nowrap;min-width:64px}
.report-paymethod,.report-phone{white-space:nowrap}
.report-row{cursor:pointer}
.report-row:active td{background:var(--accent-soft)}
.report-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.report-chart-section{min-height:0}
.report-chart-shell{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);flex:0 0 auto}
.report-chart{width:100%;height:auto;display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.report-chart text{fill:currentColor;font-family:inherit}
.chart-axis,.chart-grid,.chart-pie-outline{fill:none;stroke:var(--line);stroke-width:1}
.chart-grid{stroke-dasharray:3 5}
.chart-placeholder{fill:var(--accent-soft);stroke:var(--line);stroke-width:1}
.chart-empty-text,.chart-axis-label,.chart-x-label{fill:var(--muted);font-size:12px;font-weight:700}
.report-chart text.money{fill:var(--money);color:var(--money)}
.chart-value{font-size:10px;font-weight:800}
.chart-pie-label{fill:#fff;font-size:12px;font-weight:800}
.chart-legend-list{height:100%;color:var(--ink);font-family:inherit}
.chart-legend-row{height:24px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.chart-legend-label{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chart-legend-value{flex:0 0 108px;text-align:right}
.chart-legend-percent{flex:0 0 68px;text-align:right}
.chart-legend-value,.chart-legend-percent{white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}

.mutedline{color:var(--muted);font-size:.84rem;align-self:center}
.formerrorbox{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);
  border-radius:6px;padding:7px 9px;font-size:.86rem}
/* 登入／選店／註冊卡共用流光角度；不支援 @property 時會優雅退化成靜態外框。 */
@property --f1-border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.loginbody,.register-body{
  --login-flow-width:3.5px;
  --login-flow-line:rgba(255,106,32,.28);--login-flow-teal-soft:rgba(45,212,191,0);
  --login-flow-teal:rgba(45,212,191,.82);--login-flow-orange-soft:rgba(255,106,32,.28);
  --login-flow-highlight:rgba(255,247,242,.92);--login-flow-opacity:.94;
  --login-flow-orange-glow:rgba(255,106,32,.26);--login-flow-teal-glow:rgba(45,212,191,.13)
}
.loginbody{
  --login-canvas:#122023;--login-canvas-deep:#071112;--login-canvas-glow:rgba(255,106,32,.075);
  --login-depth-glow:rgba(41,95,85,.3);--login-card:#f9fbfb;--login-card-ink:#172326;
  --login-card-muted:#626e70;--login-card-line:#d8dfde;--login-field:#fff;
  display:grid;place-items:center;min-height:100dvh;overflow:auto;padding:24px;
  background:radial-gradient(120% 90% at 92% 122%,rgba(6,20,22,.98) 0 42%,rgba(8,26,28,.72) 46%,transparent 58%),
    radial-gradient(120% 90% at 92% 122%,transparent 0 43%,rgba(120,225,220,.16) 43.4%,rgba(198,255,248,.74) 44.2%,rgba(96,224,238,.46) 44.9%,rgba(62,152,228,.24) 46.2%,rgba(124,112,236,.11) 48%,transparent 53%),
    radial-gradient(135% 100% at 90% 120%,transparent 0 46%,rgba(45,212,191,.11) 50%,rgba(60,180,230,.07) 56%,transparent 66%),
    radial-gradient(150% 110% at 92% 122%,rgba(56,190,220,.07) 0 55%,transparent 70%),
    radial-gradient(60% 40% at 74% 96%,rgba(255,106,32,.10),transparent 60%),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45)),
    radial-gradient(circle at 92% 8%,var(--login-canvas-glow),transparent 26%),
    radial-gradient(ellipse at 50% 32%,var(--login-depth-glow),transparent 48%),
    radial-gradient(ellipse at 50% 116%,var(--login-canvas-deep),transparent 58%),var(--login-canvas);
  background-attachment:fixed
}
.loginbody::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.11;
  background-image:
    /* 主格線(96px,亮) */
    repeating-linear-gradient(0deg,rgba(168,232,222,.95) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(90deg,rgba(168,232,222,.95) 0 1px,transparent 1px 96px),
    /* 副格線(24px,暗) */
    repeating-linear-gradient(0deg,rgba(148,210,200,.42) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(148,210,200,.42) 0 1px,transparent 1px 24px);
  -webkit-mask-image:radial-gradient(ellipse 120% 110% at 30% 26%,#000 0 46%,rgba(0,0,0,.5) 66%,transparent 84%);
  mask-image:radial-gradient(ellipse 120% 110% at 30% 26%,#000 0 46%,rgba(0,0,0,.5) 66%,transparent 84%)
}
.loginbody > *{position:relative;z-index:1}
.logincard{
  --surface:var(--login-card);--ink:var(--login-card-ink);--muted:var(--login-card-muted);--line:var(--login-card-line);
  width:min(440px,100%);padding:42px 44px;border:1px solid rgba(255,255,255,.52);border-radius:14px;
  background:var(--surface);color:var(--ink);display:flex;flex-direction:column;gap:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.16),0 26px 72px rgba(0,0,0,.34);
  position:relative;isolation:isolate
}
/* 基礎粗框是無 mask／無 @property 瀏覽器的安全退化，不會覆蓋卡片內容。 */
.register-sheet::before,
.logincard::before{
  --f1-border-angle:0deg;
  content:"";position:absolute;inset:calc(-1 * var(--login-flow-width));border:var(--login-flow-width) solid var(--login-flow-line);border-radius:inherit;
  pointer-events:none;z-index:0;opacity:var(--login-flow-opacity)
}
/* 確認能挖空中心後才升級成跑光；底層 linear-gradient 保留完整、克制的靜態粗圈。 */
@supports (background:conic-gradient(from 0deg,transparent,#000)) and ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  .register-sheet::before,
  .logincard::before{
    padding:var(--login-flow-width);border:0;
    background:conic-gradient(from var(--f1-border-angle),transparent 0 66%,var(--login-flow-teal-soft) 70%,
      var(--login-flow-teal) 76%,var(--login-flow-highlight) 81%,var(--brand) 84% 90%,
      var(--login-flow-orange-soft) 95%,transparent 100%),
      linear-gradient(var(--login-flow-line),var(--login-flow-line));
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    mask-composite:exclude;
    filter:drop-shadow(0 0 8px var(--login-flow-orange-glow)) drop-shadow(0 0 12px var(--login-flow-teal-glow));
    animation:f1-border-flow 6s linear infinite
  }
}
.loginform{display:flex;flex-direction:column;gap:18px}
.branch-card{width:min(560px,100%)}
.loginbrand{display:flex;align-items:center;justify-content:center;margin-bottom:-2px}
.loginbrand img{display:block;width:min(232px,80%);height:auto}
.logincard h1{margin:0;color:var(--ink);font-size:clamp(1.3rem,2.4vw,1.4rem);font-weight:800;line-height:1.2;
  letter-spacing:-.022em;text-align:center}
.loginsub{margin:-9px 0 4px;color:var(--brand-soft-ink);font-size:.78rem;font-weight:850;letter-spacing:.16em;text-align:center}
.logincard label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.94rem;font-weight:750}
.logincard input{min-height:56px;padding:12px 15px;border:1px solid var(--line);border-radius:10px;background:var(--login-field);
  color:var(--ink);font-size:1.08rem;box-shadow:inset 0 1px 2px rgba(23,35,38,.04)}
.logincard input:focus{outline:3px solid var(--brand-focus-ring);border-color:var(--brand)}
.login-submit{width:100%;min-height:56px;border-radius:10px;box-shadow:0 6px 16px rgba(23,35,38,.16)}
.login-submit:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 7px rgba(23,35,38,.14)}
.login-submit:focus-visible{outline:3px solid var(--brand-focus-ring);outline-offset:3px}
.login-submit:disabled{opacity:.72;cursor:wait}
.loginerror{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger-line);border-left-width:4px;
  border-radius:8px;padding:12px 14px;font-size:1rem;font-weight:700;line-height:1.4}
.loginnotice{padding:12px 14px;border:1px solid #e0b84f;border-left-width:4px;border-radius:8px;background:#fff8df;
  color:#6e4b00;font-size:.96rem;font-weight:700;line-height:1.5}
.logincard:has(.loginerror){animation:login-shake .22s ease both}
.logincard:has(.loginerror) input{border-color:var(--danger);background:var(--danger-bg)}
.login-register{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;padding-top:18px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.login-register-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--brand-soft-ink);
  font-weight:850;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
.login-register-link:active{border-radius:6px;background:var(--brand-soft);transform:translateY(1px)}
.login-register-link:focus-visible{outline:3px solid var(--brand-focus-ring);outline-offset:2px;border-radius:6px}
.branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.branch-tile{min-height:92px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--panel-soft);color:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.branch-tile:focus-visible{outline:3px solid var(--brand-focus-ring);outline-offset:2px}
.branch-tile:active:not(:disabled){filter:brightness(.97);transform:translateY(1px);box-shadow:none}
.branch-tile.is-last{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
.branch-tile.is-disabled,.branch-tile:disabled{background:#f3f5f5;color:var(--muted);cursor:not-allowed;opacity:1}
.branch-tile.is-disabled:active,.branch-tile:disabled:active{filter:none;transform:none}
.branch-title{font-size:1.06rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branch-subtitle{font-size:.84rem;color:var(--muted);font-weight:700;white-space:nowrap}
.branch-expired-status{color:#c91d29;font-variant-numeric:tabular-nums}
.branch-expired-hint{color:var(--muted);font-size:.78rem;font-weight:650;line-height:1.3;white-space:nowrap}
.branch-logout-form{margin:0}
.branch-logout{width:100%}

/* #17 線上開店：深墨綠景深承接登入頁，內容只落在中央 premium sheet。 */
.register-body{
  --register-canvas:#122023;--register-canvas-deep:#071112;--register-canvas-glow:rgba(255,106,32,.075);
  --register-depth-glow:rgba(41,95,85,.3);--register-sheet-bg:rgba(249,251,251,.96);
  --register-sheet-ink:#172326;--register-sheet-muted:#626e70;--register-sheet-line:#d8dfde;
  --register-panel:#f3f6f5;--register-field:#fff;--register-readonly:#edf1f0;
  --register-primary:#192527;--register-primary-hover:#263638;--register-primary-ink:#fff;
  --register-mode-bg:#fff8f3;--register-mode-ink:#8a390e;--register-logo-filter:none;--register-color-scheme:light;
  min-height:100dvh;overflow:auto;overflow-x:hidden;overscroll-behavior-y:contain;padding:clamp(22px,4vw,52px);
  background:radial-gradient(120% 90% at 92% 122%,rgba(6,20,22,.98) 0 42%,rgba(8,26,28,.72) 46%,transparent 58%),
    radial-gradient(120% 90% at 92% 122%,transparent 0 43%,rgba(120,225,220,.16) 43.4%,rgba(198,255,248,.74) 44.2%,rgba(96,224,238,.46) 44.9%,rgba(62,152,228,.24) 46.2%,rgba(124,112,236,.11) 48%,transparent 53%),
    radial-gradient(135% 100% at 90% 120%,transparent 0 46%,rgba(45,212,191,.11) 50%,rgba(60,180,230,.07) 56%,transparent 66%),
    radial-gradient(150% 110% at 92% 122%,rgba(56,190,220,.07) 0 55%,transparent 70%),
    radial-gradient(60% 40% at 74% 96%,rgba(255,106,32,.10),transparent 60%),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.45)),
    radial-gradient(circle at 92% 8%,var(--register-canvas-glow),transparent 26%),
    radial-gradient(ellipse at 50% 30%,var(--register-depth-glow),transparent 48%),
    radial-gradient(ellipse at 50% 116%,var(--register-canvas-deep),transparent 58%),var(--register-canvas);
  background-attachment:fixed;
  color:#f7f9f8
}
.register-body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.11;
  background-image:
    /* 主格線(96px,亮) */
    repeating-linear-gradient(0deg,rgba(168,232,222,.95) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(90deg,rgba(168,232,222,.95) 0 1px,transparent 1px 96px),
    /* 副格線(24px,暗) */
    repeating-linear-gradient(0deg,rgba(148,210,200,.42) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(90deg,rgba(148,210,200,.42) 0 1px,transparent 1px 24px);
  -webkit-mask-image:radial-gradient(ellipse 120% 110% at 30% 26%,#000 0 46%,rgba(0,0,0,.5) 66%,transparent 84%);
  mask-image:radial-gradient(ellipse 120% 110% at 30% 26%,#000 0 46%,rgba(0,0,0,.5) 66%,transparent 84%)
}
.register-body > *{position:relative;z-index:1}
.register-shell{position:relative;isolation:isolate;width:min(920px,100%);min-height:calc(100dvh - clamp(44px,8vw,104px));
  margin:0 auto;display:grid;align-items:center}
.register-shell::before{content:"";position:absolute;z-index:-1;inset:12% -8%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(42,97,87,.32),transparent 66%);filter:blur(56px);pointer-events:none}
.register-sheet{
  --surface:var(--register-sheet-bg);--ink:var(--register-sheet-ink);--muted:var(--register-sheet-muted);
  --line:var(--register-sheet-line);--line-soft:var(--register-sheet-line);--panel-soft:var(--register-panel);
  width:100%;padding:clamp(28px,5vw,52px);border:1px solid rgba(255,255,255,.5);border-radius:24px;
  background:var(--surface);color:var(--ink);color-scheme:var(--register-color-scheme);overflow:visible;
  -webkit-backdrop-filter:blur(calc(var(--dialog-backdrop-blur) + 14px)) saturate(125%);
  backdrop-filter:blur(calc(var(--dialog-backdrop-blur) + 14px)) saturate(125%);
  box-shadow:0 2px 10px rgba(0,0,0,.18),0 34px 100px rgba(0,0,0,.4);
  position:relative;isolation:isolate
}
.register-hero{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);align-items:center;gap:clamp(24px,5vw,56px);
  padding-bottom:clamp(24px,4vw,38px);border-bottom:1px solid var(--line)}
.register-brand{display:inline-flex;width:max-content;min-height:56px;align-items:center;border-radius:10px}
.register-brand img{display:block;width:200px;max-width:42vw;height:auto;filter:var(--register-logo-filter)}
.register-hero-copy{display:grid;gap:9px;min-width:0}
.register-hero-copy > p,.register-kicker{margin:0;color:var(--brand);font-size:.76rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.register-hero h1{margin:0;font-size:clamp(2rem,4.4vw,3.35rem);font-weight:850;letter-spacing:-.05em;line-height:1.02}
.register-hero-copy > span{color:var(--muted);font-size:1rem;line-height:1.55}
.register-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.register-step{min-height:70px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 10px;
  border:0;border-bottom:2px solid var(--line);background:transparent;color:var(--muted)}
.register-step > span{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid var(--line);
  border-radius:50%;background:var(--panel-soft);font-variant-numeric:tabular-nums;font-weight:900}
.register-step b{font-size:.88rem;white-space:nowrap}
.register-step.is-active{border-bottom-color:var(--brand);color:var(--ink)}
.register-step.is-active > span{border-color:var(--brand);background:var(--brand);color:#17181c;box-shadow:0 0 0 4px var(--brand-soft)}
.register-step.is-done{color:var(--ink)}
.register-step.is-done > span{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.register-card{padding-top:clamp(28px,4vw,42px);background:transparent;color:var(--ink)}
.register-form{width:min(600px,100%);margin:0 auto;display:grid;gap:18px}
.register-details{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.register-wide{grid-column:1/-1}
.register-copy{display:grid;gap:7px;margin-bottom:4px}
.register-copy h2,.register-success h2{margin:0;color:var(--ink);font-size:clamp(1.55rem,3vw,2rem);font-weight:850;
  line-height:1.16;letter-spacing:-.035em}
.register-copy > p:last-child,.register-success > p{margin:0;color:var(--muted);font-size:.96rem;line-height:1.6}
.register-mode-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:12px 14px;
  border:1px solid var(--brand-line);border-radius:10px;background:var(--register-mode-bg);color:var(--register-mode-ink);font-size:.88rem}
.register-mode-note strong{font-weight:900;white-space:nowrap}
.register-mode-note span{font-weight:700;text-align:right}
.register-field{display:flex;flex-direction:column;gap:8px;min-width:0;color:var(--muted);font-size:.88rem;font-weight:800}
.register-field > span{display:flex;align-items:center;gap:7px}
.register-field em{padding:2px 7px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.68rem;
  font-style:normal;font-weight:750;letter-spacing:.04em}
.register-field input,.register-field select{width:100%;min-height:58px;border:1px solid var(--line);border-radius:12px;background:var(--register-field);color:var(--ink);
  padding:11px 15px;font:inherit;font-size:1.05rem;font-weight:650;box-shadow:inset 0 1px 2px rgba(23,35,38,.04)}
.register-phone-control{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:8px!important;align-items:stretch}
.register-country-code{display:inline-flex;align-items:center;gap:8px;min-height:58px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--panel-soft);color:var(--ink);font-size:.92rem;white-space:nowrap}
.register-country-code b{font-variant-numeric:tabular-nums;font-weight:850}
.register-phone-control input{min-width:0}
.register-field input[readonly]{background:var(--register-readonly);color:var(--muted)}
.register-field input:focus,.register-field select:focus{outline:3px solid var(--brand-focus-ring);border-color:var(--brand)}
.register-field small{color:var(--muted);font-size:.78rem;font-weight:600;line-height:1.5}
.register-primary,.register-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:58px;border-radius:11px;
  padding:12px 20px;font:inherit;font-size:1rem;font-weight:850;text-decoration:none;cursor:pointer}
.register-primary{border:1px solid var(--register-primary);background:var(--register-primary);color:var(--register-primary-ink);
  box-shadow:0 8px 20px rgba(18,31,33,.18);transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease}
.register-primary:hover{background:var(--register-primary-hover)}
.register-primary:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(18,31,33,.15)}
.register-primary:focus-visible,.register-secondary:focus-visible,.register-footer a:focus-visible,.register-brand:focus-visible{
  outline:3px solid var(--brand-focus-ring);outline-offset:3px}
.register-secondary{border:1px solid var(--line);background:transparent;color:var(--ink)}
.register-secondary:hover{background:var(--panel-soft)}
.register-message{width:min(720px,100%);margin:0 auto 20px;border-radius:10px;padding:12px 14px;font-size:.94rem;font-weight:750;line-height:1.5}
.register-message.is-error{border:1px solid var(--danger-line);border-left:4px solid var(--danger);background:var(--danger-bg);color:var(--danger)}
.register-message.is-notice{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--panel-soft);color:var(--ink)}
.register-success{display:grid;justify-items:center;gap:12px;padding:clamp(18px,4vw,34px);text-align:center}
.register-success-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--ink);color:var(--surface);
  font-size:2rem;font-weight:900;box-shadow:0 0 0 5px var(--brand-soft)}
.register-success .register-primary{min-width:230px;margin-top:10px}
.register-coming-soon h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.register-coming-soon .register-success-mark{background:var(--brand);color:#17181c}
.register-coming-soon-detail{font-size:.84rem!important}
.register-footer{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(28px,4vw,42px);padding-top:22px;
  border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.register-footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--ink);font-weight:850;
  text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .register-body{--register-canvas:#091617;--register-canvas-deep:#030a0b;
    --register-canvas-glow:rgba(255,106,32,.06);--register-depth-glow:rgba(27,75,68,.25);
    --register-sheet-bg:rgba(17,27,28,.96);--register-sheet-ink:#f3f7f6;--register-sheet-muted:#aab5b3;
    --register-sheet-line:#344341;--register-panel:#1c2a2b;--register-field:#101a1b;--register-readonly:#223132;
    --register-primary:#f3f7f6;--register-primary-hover:#fff;--register-primary-ink:#142022;
    --register-mode-bg:rgba(255,106,32,.1);--register-mode-ink:#ffc3a5;--register-logo-filter:brightness(0) invert(1);
    --register-color-scheme:dark;--danger-bg:rgba(225,29,42,.12);--danger-line:rgba(255,123,132,.42);--danger:#ff929b}
}
:root[data-theme="light"] .register-body{--register-canvas:#122023;--register-canvas-deep:#071112;
  --register-canvas-glow:rgba(255,106,32,.075);--register-depth-glow:rgba(41,95,85,.3);
  --register-sheet-bg:rgba(249,251,251,.96);--register-sheet-ink:#172326;--register-sheet-muted:#626e70;
  --register-sheet-line:#d8dfde;--register-panel:#f3f6f5;--register-field:#fff;--register-readonly:#edf1f0;
  --register-primary:#192527;--register-primary-hover:#263638;--register-primary-ink:#fff;
  --register-mode-bg:#fff8f3;--register-mode-ink:#8a390e;--register-logo-filter:none;--register-color-scheme:light}
:root[data-theme="dark"] .register-body{--register-canvas:#091617;--register-canvas-deep:#030a0b;
  --register-canvas-glow:rgba(255,106,32,.06);--register-depth-glow:rgba(27,75,68,.25);
  --register-sheet-bg:rgba(17,27,28,.96);--register-sheet-ink:#f3f7f6;--register-sheet-muted:#aab5b3;
  --register-sheet-line:#344341;--register-panel:#1c2a2b;--register-field:#101a1b;--register-readonly:#223132;
  --register-primary:#f3f7f6;--register-primary-hover:#fff;--register-primary-ink:#142022;
  --register-mode-bg:rgba(255,106,32,.1);--register-mode-ink:#ffc3a5;--register-logo-filter:brightness(0) invert(1);
  --register-color-scheme:dark;--danger-bg:rgba(225,29,42,.12);--danger-line:rgba(255,123,132,.42);--danger:#ff929b}
@media (max-width: 720px){
  .register-body{padding:16px 10px}
  .register-shell{min-height:calc(100dvh - 32px)}
  .register-sheet{padding:26px 18px;border-radius:18px}
  .register-hero{grid-template-columns:minmax(0,1fr);gap:18px;padding-bottom:24px}
  .register-brand img{width:178px;max-width:62vw}
  .register-hero h1{font-size:clamp(2rem,10vw,2.75rem)}
  .register-step{min-height:64px;gap:6px;padding:9px 4px}
  .register-step > span{flex-basis:29px;width:29px;height:29px}
  .register-step b{display:block;font-size:.72rem}
  .register-card{padding-top:26px}
  .register-details{grid-template-columns:minmax(0,1fr)}
  .register-wide{grid-column:auto}
  .register-mode-note{align-items:flex-start;flex-direction:column;gap:4px}
  .register-mode-note span{text-align:left}
  .register-footer{flex-direction:column;gap:0}
}
@keyframes f1-border-flow{
  to{--f1-border-angle:360deg}
}
@keyframes login-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}
@media (prefers-reduced-motion: reduce){
  .logincard:has(.loginerror){animation:none}
  .register-sheet::before,
  .logincard::before{animation:none;filter:none}
  .branch-tile{transition:none}
}
@media (hover: hover){
  .branch-tile:not(:disabled):hover{border-color:#b8c2c1;background:#fff;box-shadow:0 7px 18px rgba(23,35,38,.09);transform:translateY(-1px)}
  .branch-tile.is-last:not(:disabled):hover{border-color:var(--accent);background:var(--accent-soft);
    box-shadow:inset 0 0 0 1px var(--accent-line),0 7px 18px rgba(23,35,38,.09)}
  .login-register-link:hover{color:#813006}
}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .loginbody{--login-canvas:#122023;--login-canvas-deep:#071112;
    --login-canvas-glow:rgba(255,106,32,.075);--login-depth-glow:rgba(41,95,85,.3)}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .loginbody{--login-canvas:#091617;--login-canvas-deep:#030a0b;
    --login-canvas-glow:rgba(255,106,32,.06);--login-depth-glow:rgba(27,75,68,.25)}
  :root:not([data-theme]) .register-body,
  :root:not([data-theme]) .loginbody{--login-flow-line:rgba(255,106,32,.24);
    --login-flow-highlight:rgba(255,247,242,.82);--login-flow-opacity:.9;
    --login-flow-orange-glow:rgba(255,106,32,.24);--login-flow-teal-glow:rgba(45,212,191,.12)}
}
:root[data-theme="light"] .loginbody{--login-canvas:#122023;--login-canvas-deep:#071112;
  --login-canvas-glow:rgba(255,106,32,.075);--login-depth-glow:rgba(41,95,85,.3)}
:root[data-theme="dark"] .loginbody{--login-canvas:#091617;--login-canvas-deep:#030a0b;
  --login-canvas-glow:rgba(255,106,32,.06);--login-depth-glow:rgba(27,75,68,.25)}
:root[data-theme="dark"] .register-body,
:root[data-theme="dark"] .loginbody{--login-flow-line:rgba(255,106,32,.24);
  --login-flow-highlight:rgba(255,247,242,.82);--login-flow-opacity:.9;
  --login-flow-orange-glow:rgba(255,106,32,.24);--login-flow-teal-glow:rgba(45,212,191,.12)}
@media (max-width: 480px){
  .loginbody{padding:14px}
  .logincard{padding:32px 24px}
  .login-register{flex-direction:column;gap:2px}
}
button{font:inherit}
button.primary,button.secondary,button.ghost,button.danger,.iconbtn{
  border:1px solid transparent;border-radius:6px;cursor:pointer;min-height:56px;min-width:64px;
  padding:10px 16px;font-size:1rem;font-weight:600;
}
button.primary{background:var(--accent);color:var(--accent-ink);font-weight:800}
button.secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
button.secondary.active{background:var(--accent);border-color:var(--accent);color:#fff}
button.ghost{background:#fff;color:var(--accent);border-color:#b8bcc4}
button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
button.actionbtn,a.actionbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:48px;
  padding:6px 10px;border-radius:6px;font-size:.84rem;font-weight:600;text-decoration:none}
.summarybar .actionbtn,.staff-prerequisite-actions .actionbtn,.modalactions .actionbtn,.edit-sheet__actions .actionbtn,.detailsection-head .actionbtn{
  min-height:56px;min-width:84px;padding:10px 18px;font-size:1rem
}
a.primary.actionbtn{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);font-weight:800}
a.secondary.actionbtn{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
a.ghost.actionbtn{background:#fff;color:var(--accent);border:1px solid #b8bcc4}
a.danger.actionbtn{background:var(--danger);color:#fff;border:1px solid var(--danger)}
.rowlink{display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:56px;margin:-6px -2px;border:0;
  background:transparent;color:var(--link);font:inherit;font-weight:700;cursor:pointer;padding:6px 2px;
  text-decoration:underline;text-underline-offset:3px;touch-action:manipulation}
.rowlink.plate{letter-spacing:.03em;text-align:left;justify-content:flex-start}
.rowlink.idlink{text-align:left;justify-content:flex-start}
.rowlink:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.iconbtn{background:transparent;color:var(--muted);border:none;min-height:56px;min-width:56px;padding:0;font-size:1.35rem;line-height:1}
button:active:not(:disabled),a.actionbtn:active{filter:brightness(.96);transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}

.items-tablewrap{min-width:0;border-radius:6px;box-shadow:0 1px 2px rgba(23,24,28,.04)}
.items-table{min-width:1040px}
.items-table td{height:64px}
.items-table .dragcol{width:64px}
.dragcell{width:64px;padding:0;text-align:center}
.draghandle{display:inline-grid;place-items:center;min-width:56px;min-height:56px;border:1px solid var(--line);border-radius:8px;background:var(--soft);
  color:var(--muted);font-size:1.35rem;cursor:grab;touch-action:none}
.draghandle:active{cursor:grabbing}
.item-row{cursor:pointer}
.item-row.selected td{background:var(--accent-soft)}
.item-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
#items-body.saving{opacity:.72}
.drag-chosen td,.drag-ghost td{background:var(--accent-soft)}
.legacy-no,.mutedcell{color:var(--muted)}
.legacy-no{white-space:nowrap}
.cards-realtime{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column}
.cards-tables{flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1.15fr) minmax(0,.85fr);gap:12px;overflow:hidden}
.card-section{min-height:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.card-tablewrap{flex:1;min-height:0;min-width:0}
.card-list-tools{justify-content:space-between}
.card-search-form{display:flex;align-items:center;gap:8px;min-width:min(100%,360px);flex:1 1 520px}
.card-search-field{display:block;min-width:180px;flex:1 1 320px}
.card-search-form .search{max-width:none}
.card-list-page-status{flex:0 0 auto}
.card-pagination{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.card-page-number{color:var(--muted);font-size:.84rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.card-status-toggle{cursor:pointer;text-decoration:none;transition:opacity .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.card-status-toggle:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.card-status-toggle.is-excluded{color:var(--muted);background:var(--soft);border-color:var(--line);opacity:.72}
.membership-cards-table{min-width:1280px}
.wash-cards-table{min-width:760px}
.cards-table td{white-space:nowrap}
.cards-table .cardno{font-weight:700;letter-spacing:.03em;white-space:nowrap}
.cards-table .card-count{white-space:nowrap}
.card-history-table td:last-child{white-space:normal;overflow-wrap:anywhere}
.modal.edit-sheet:has(.membership-card-sheet),.modal.edit-sheet:has(.cardnames-sheet){width:min(860px,calc(100vw - 32px))}
.edit-sheet__note{margin:0;color:var(--muted);font-size:.86rem}
.edit-sheet__note.span-2{grid-column:span 2}
.staff-realtime{flex:1;min-height:0;display:flex;flex-direction:column}
.summarybar{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 10px;border-bottom:1px solid var(--line);
  background:var(--panel-soft);flex-wrap:wrap}
.countstat{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:700}
.countstat b{color:var(--accent);font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.toast{position:fixed;right:18px;top:18px;z-index:40;width:min(360px,calc(100vw - 36px));pointer-events:none;
  opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}
.toast__body{display:grid;grid-template-columns:minmax(0,1fr) 56px;align-items:center;min-height:56px;
  border-radius:8px;border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);box-shadow:var(--shadow);font-weight:700;overflow:hidden}
.toast.error .toast__body{border-color:var(--danger-line);background:var(--danger-bg);color:var(--danger)}
.toast__body span{min-width:0;padding:10px 14px;overflow-wrap:anywhere}
.toast__close{width:56px;min-height:56px;border:0;border-left:1px solid currentColor;background:transparent;color:inherit;
  cursor:pointer;font:inherit;font-size:1rem;font-weight:700}
.staff-table{min-width:1180px}
.staff-table td{white-space:nowrap}
.staff-table .staff-name{font-weight:700;white-space:nowrap;min-width:72px}
.staff-table .staff-code{font-weight:700;letter-spacing:.03em;white-space:nowrap}
.staff-table .staff-branch{white-space:nowrap;min-width:64px}
.staff-workstate{white-space:nowrap}
.staff-status.working{color:var(--ok-ink);background:var(--ok-bg);border-color:var(--ok-line)}
.staff-status.off{color:var(--muted);background:var(--accent-soft);border-color:var(--line-soft)}
.staff-clock{margin-left:6px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.staff-clock-form{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;white-space:nowrap}
.staff-clock-branch{min-height:56px;min-width:128px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
  padding:8px 10px;font:inherit;font-size:1rem;font-weight:700}
.staff-clock-branch:focus{outline:3px solid var(--focus-ring);border-color:var(--accent)}
.staff-tablewrap{flex:1;min-height:0;min-width:0}
.news-realtime{flex:1;min-height:0;display:flex;flex-direction:column}
.news-tablewrap{flex:1;min-height:0;min-width:0}
.news-table{min-width:760px}
.news-table td{white-space:nowrap}
.news-row{cursor:pointer}
.news-row:active td{background:var(--accent-soft)}
.news-row:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px}
.news-date{width:128px;white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.news-title{font-weight:700;white-space:normal;overflow-wrap:anywhere}
.news-level.normal{color:var(--muted);background:var(--accent-soft);border-color:var(--line-soft)}
.news-level.high{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
.news-sheet textarea{min-height:220px;line-height:1.55}
.setup-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.setup-panel{display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface);padding:14px}
.setup-section{display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line);padding-bottom:14px}
.setup-section:last-of-type{border-bottom:0;padding-bottom:0}
.setup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 12px}
.setup-field textarea{line-height:1.5;min-height:150px}
.setup-actions{display:flex;justify-content:flex-end;gap:8px}
.chat-page{flex:1;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;overflow:hidden}
.chat-realtime{min-height:0;display:flex;flex-direction:column}
.chat-log{flex:1;min-height:0;overflow:auto;border:1px solid #27383b;border-radius:6px;background:#071113;color:#f4fbfa;
  padding:10px;font-family:"SFMono-Regular","Consolas","Liberation Mono",monospace;font-size:.95rem;line-height:1.55;
  scroll-behavior:smooth}
.chat-log:empty{display:grid;place-items:center}
.chat-log:empty::before{content:"還沒有人說話——在下面打字送出，全店的裝置立刻看得到";color:var(--chat-accent);font-family:inherit;text-align:center}
.chat-line{min-height:28px;padding:2px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-time{margin-right:.65em;color:var(--chat-accent);font-variant-numeric:tabular-nums;opacity:.72}
.chat-branch{color:var(--chat-accent);font-weight:700}
.chat-separator{color:var(--chat-accent)}
.chat-text{color:#fff}
.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px;border:1px solid var(--line);border-radius:6px;flex:0 0 auto}
.customers-table{min-width:1420px}
/* 原生 table-row 依規範不適用 size containment；以下為瀏覽器 best-effort。首式是相容 fallback，60px = 44px 操作鈕 + 儲存格上下 padding。 */
.cust-row{content-visibility:auto;contain-intrinsic-size:0 60px;contain-intrinsic-size:0 auto 60px}
.customers-table td{white-space:nowrap}
.customers-table .customer-name{white-space:nowrap;min-width:72px}
.customers-table td:nth-child(6),.customers-table td:nth-child(8),.customers-table td:nth-child(9),.customers-table td:nth-child(10){
  white-space:normal;overflow-wrap:anywhere;
}
#branches-table td:not(:nth-child(2)){white-space:nowrap}
#branches-table td:nth-child(2){white-space:normal;overflow-wrap:anywhere}
.customer-label-display,.customer-label-form{display:inline-flex;align-items:center;gap:3px;min-height:36px;margin:0}
.customer-label-display[hidden],.customer-label-form[hidden]{display:none!important}
.customer-label-display > span{min-width:0}
.customer-label-edit,.customer-label-confirm,.customer-label-cancel{
  display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;
  border-radius:5px;font-size:1rem;font-weight:700;line-height:1;touch-action:manipulation
}
.customer-label-edit{color:var(--accent)}
.customer-label-confirm{color:var(--ok-ink)}
.customer-label-cancel{color:var(--danger)}
.customer-label-input{width:132px;height:36px;min-width:92px;padding:4px 7px;border:1px solid var(--line);border-radius:5px;
  background:var(--surface);color:var(--ink);font:inherit;font-weight:700}
.customer-label-input:focus{outline:3px solid var(--focus-ring);border-color:var(--accent)}
.customer-sheet .edit-sheet__grid{flex:0 0 auto}
.phone-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.phone-entry .smsbtn{min-height:56px;min-width:76px;padding:8px 10px}
.phone-entry .smsbtn:disabled{opacity:.45}
.customer-history{border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:10px;flex:0 0 auto;overflow:hidden}
.customer-history__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex:0 0 auto}
.customer-history__head h3{margin:0;font-size:.95rem}
.customer-total{color:var(--muted);font-weight:700}
.detailhistory.customer-history__table{max-height:260px;background:#fff}
.detailhistory.customer-history__table table.consumption-history-table{min-width:1080px}
.customer-history__table td:nth-child(5),.customer-history__table td:nth-child(8){white-space:normal;overflow-wrap:anywhere}
.consumption-history-table .history-order{white-space:nowrap}
.consumption-history-branch{white-space:nowrap;min-width:64px}

@media (max-width: 900px){
  .setup-grid{grid-template-columns:minmax(0,1fr)}
  .setup-panel{padding:12px}
  .setup-save{width:100%}
}

.modal{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:1px solid var(--line);border-radius:8px;
  padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);overflow:hidden}
.alertdialog{width:min(780px,calc(100vw - 32px))}
.alertdialog-card{display:flex;flex-direction:column;gap:24px;max-height:calc(100dvh - 32px);overflow:auto;
  padding:clamp(28px,4vw,44px);text-align:center}
.alertdialog-head{display:flex;flex-direction:column;align-items:center;gap:12px}
.alertdialog-kicker{margin:0;color:var(--muted);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.alertdialog-title{max-width:680px;margin:0;font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;line-height:1.15;
  letter-spacing:-.025em;text-align:center;overflow-wrap:anywhere;text-wrap:balance}
.alertdialog-message{max-width:620px;margin:0;color:var(--muted);font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.alertdialog-body{border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:clamp(18px,3vw,26px);
  text-align:left;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.branch-delete-dependencies ul{display:grid;gap:8px;margin:0;padding-left:1.4em}
.branch-delete-dependencies p{margin:18px 0 0;font-weight:700}
.alertdialog-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.alertdialog-actions > button,.alertdialog-actions > a.actionbtn{min-height:56px;min-width:180px}
.alertdialog-actions > :only-child{width:100%}
.frozen-card{width:min(780px,100%);padding:clamp(38px,6vw,68px);gap:30px}
.frozen-card .loginbrand{margin-bottom:0}
.frozen-card .loginbrand img{width:min(200px,65%)}
.frozen-card .alertdialog-head{gap:16px}
.frozen-card .alertdialog-kicker{color:var(--brand-soft-ink);font-size:.88rem}
.frozen-card .alertdialog-title{font-size:clamp(2.15rem,6vw,4.15rem);letter-spacing:-.045em}
.frozen-card .alertdialog-message{font-size:clamp(1rem,2vw,1.18rem)}
.frozen-date{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.frozen-card .alertdialog-actions{width:100%}
.frozen-card .alertdialog-actions > button,.frozen-card .alertdialog-actions > a.actionbtn{flex:1 1 180px}
@media (max-width: 480px){
  .frozen-card{padding:34px 24px}
  .frozen-card .alertdialog-actions > button,.frozen-card .alertdialog-actions > a.actionbtn{width:100%}
}
.required-news-content{min-height:220px;font-size:1.08rem}
.required-news-confirm{min-height:64px;font-size:1.05rem}
.modalform,.edit-sheet__form{display:flex;flex-direction:column;gap:14px;padding:14px;max-height:calc(100dvh - 32px);overflow:auto}
.modalhead,.edit-sheet__head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:9px;border-bottom:1px solid var(--line);flex:0 0 auto}
.modalhead h2,.edit-sheet__head h2{display:flex;align-items:center;gap:10px;min-width:0;font-size:1rem;line-height:1.35;margin:0;overflow-wrap:anywhere}
.formgrid,.edit-sheet__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px}
.field,.edit-sheet__field{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:.82rem;min-width:0}
.field-label-ghost{visibility:hidden}
.field.span-2,.edit-sheet__field.span-2{grid-column:span 2}
.field input:not([type="checkbox"]):not([type="radio"]),.field select,.field textarea,
.edit-sheet__field input:not([type="checkbox"]):not([type="radio"]),.edit-sheet__field select,.edit-sheet__field textarea{
  width:100%;border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:1rem;padding:6px 10px;min-height:56px;
}
.field textarea,.edit-sheet__field textarea{resize:vertical}
.field input.money,.edit-sheet__field input.money{color:var(--money)}
.field input:not([type="checkbox"]):not([type="radio"]):focus,.field select:focus,.field textarea:focus,
.edit-sheet__field input:not([type="checkbox"]):not([type="radio"]):focus,.edit-sheet__field select:focus,.edit-sheet__field textarea:focus{
  outline:3px solid var(--focus-ring);border-color:var(--accent);
}
.field .invalid,.edit-sheet__field .invalid{border-color:var(--danger);background:var(--danger-bg)}
.fielderror{color:var(--danger);font-size:.78rem}
.edit-sheet__success{border:1px solid var(--ok-line);background:var(--ok-bg);color:var(--ok-ink);border-radius:6px;padding:8px 10px;font-weight:700}
.warrantybox{grid-column:span 2;display:grid;grid-template-columns:minmax(160px,.7fr) 1fr;
  gap:9px 12px;border:1px solid var(--line-soft);background:var(--panel-soft);border-radius:6px;padding:8px}
.warrantybox .warranty-note{min-width:0}
.modalactions,.edit-sheet__actions{display:flex;align-items:center;gap:8px;padding-top:2px;flex:0 0 auto}
.modalactions .spacer,.edit-sheet__actions .spacer{flex:1}
.checkoutmodal{width:min(920px,calc(100vw - 32px))}
.checkoutform{overflow:hidden}
.checkoutsummary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:10px 12px;flex:0 0 auto}
.checkoutsummary div{display:flex;flex-direction:column;gap:2px;min-width:0}
.checkoutsummary span{color:var(--muted);font-size:.78rem}
.checkoutsummary b{font-size:.95rem;white-space:normal;word-break:break-word}
.checkoutsummary div:last-child{text-align:right}
.checkoutsummary div:last-child b{font-size:1.5rem;color:var(--money);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.checkoutbody{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:12px;min-height:0;overflow:hidden}
.checkoutfields{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px}
.checkoutpaid input{font-size:2.25rem;font-weight:800;line-height:1.1;min-height:64px;
  text-align:right;font-variant-numeric:tabular-nums}
.discountgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.discountgrid.invalid{border:1px solid var(--danger);border-radius:8px;padding:6px;background:var(--danger-bg)}
.discountgrid button{min-height:56px;padding:8px 4px;font-size:1rem}
.paygrid{display:grid;grid-template-columns:auto minmax(110px,1fr) auto minmax(110px,1fr);
  gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:8px}
.paygrid.invalid{border-color:var(--danger);background:var(--danger-bg)}
.paytoggle{display:flex;align-items:center;gap:7px;color:var(--ink);font-size:1rem;font-weight:700;white-space:nowrap;min-height:56px}
.paytoggle input{width:22px;height:22px;margin:0}
.paygrid > input{text-align:right;font-variant-numeric:tabular-nums}
.paygrid > input:disabled{background:var(--accent-soft);color:var(--muted)}
.paygrid > input.money:disabled{color:var(--money)}
.cardfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 12px}
.cardfields .field input{text-transform:uppercase}
.poskeypad{border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:0}
.keypad-display{border:1px solid var(--line-soft);border-radius:8px;background:#fff;padding:8px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.keypad-display span{color:var(--muted);font-size:.86rem;font-weight:700}
.keypad-display b{font-size:1.5rem;color:var(--money);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.keypad-targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.keypad-targets button{min-height:56px;padding:6px}
.keypad-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-height:0}
.keypad-grid button{min-height:58px;padding:6px;font-size:1.08rem}
.checkoutsubmit{min-width:132px}

.modal.edit-sheet:has(.staff-sheet){width:min(900px,calc(100vw - 32px))}
.modal.edit-sheet:has(.news-sheet){width:min(860px,calc(100vw - 32px))}
.modal.edit-sheet:has(.customer-sheet){width:min(980px,calc(100vw - 32px))}
.news-view-dialog{width:min(820px,calc(100vw - 32px))}
.news-view{display:flex;flex-direction:column;gap:14px;padding:14px;max-height:calc(100dvh - 32px);overflow:auto}
.news-view__content{border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);min-height:260px;
  padding:14px;font-size:1rem;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}
.orderdetailmodal{width:min(1040px,calc(100vw - 32px))}
.orderdetail{overflow:hidden}
.detailtop{display:grid;grid-template-columns:.9fr 1.15fr 1fr .85fr .8fr .8fr;gap:8px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel-soft);padding:10px 12px;flex:0 0 auto}
.detailtop div{min-width:0;display:flex;flex-direction:column;gap:2px}
.detailtop span,.detailgrid span,.detailmeta{color:var(--muted);font-size:.78rem}
.detailtop b{font-size:1rem;min-width:0;overflow-wrap:anywhere}
.detailtop b.datecell{font-size:.8rem}
.detailtop div:nth-last-child(-n+2) b{color:var(--money);font-size:1.2rem;font-weight:800;font-variant-numeric:tabular-nums}
.detailbody{min-height:0;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:10px}
.detailsection{border:1px solid var(--line);border-radius:8px;background:#fff;padding:10px;min-width:0}
.detailsection.span-2{grid-column:span 2}
.detailsection h3{margin:0 0 8px;font-size:.95rem}
.detailsection-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.detailsection-head h3{margin:0}
.detailitems th,.detailitems td,.detailhistory th,.detailhistory td{height:auto;padding:6px 8px}
.detailitems td:first-child,.detailhistory td:nth-child(5){white-space:normal;overflow-wrap:anywhere}
.detailgrid{display:grid;grid-template-columns:72px minmax(0,1fr);gap:6px 10px}
.detailgrid b{font-weight:700;min-width:0;overflow-wrap:anywhere}
.detailmemo{white-space:pre-wrap;overflow-wrap:anywhere}
.detailhistory{max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:6px}
.detailhistory table{min-width:760px}
.detailhistory table.consumption-history-table{min-width:920px}
.consumption-history-table .history-order{text-align:left}
.rowlink.history-order-link{text-align:left;justify-content:flex-start}

/* Renewal — 獨立於 POS 的美式 SaaS 大畫面；所有選擇器限定 renewal- 命名空間。 */
.renewal-page{
  --renewal-state-color:#8bc9b6;--renewal-state-soft:rgba(139,201,182,.16);
  --renewal-ring-from:#74c8ae;--renewal-ring-to:#c6eadf;
  position:relative;width:100%;height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;
  background:#f7f6f3;color:#17181c;scroll-behavior:smooth;-webkit-overflow-scrolling:touch
}
.renewal-page[data-renewal-state="due-soon"]{--renewal-state-color:#ffad5c;--renewal-state-soft:rgba(255,173,92,.16);--renewal-ring-from:#ffd166;--renewal-ring-to:#ff8a4c}
.renewal-page[data-renewal-state="expired"]{--renewal-state-color:#f48778;--renewal-state-soft:rgba(244,135,120,.16);--renewal-ring-from:#ffb36b;--renewal-ring-to:#ef7180}
.renewal-main{display:block;min-height:0}
.renewal-topbar{
  position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:92px;padding:20px clamp(28px,5vw,84px);color:#fff
}
.renewal-brand{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-size:1.3rem;letter-spacing:-.02em}
.renewal-brand-mark{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.22);border-radius:12px;font-weight:900}
.renewal-brand-word{font-weight:400}
.renewal-brand-word::after{content:"";display:inline-block;width:8px;height:8px;margin-left:5px;border-radius:50%;background:var(--brand)}
.renewal-topbar-meta{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0;color:rgba(255,255,255,.72);font-size:.82rem;font-weight:700}
.renewal-topbar-tenant{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.renewal-topbar-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.renewal-topbar-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.renewal-topbar-link{min-height:44px;padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#fff;text-decoration:none}
.renewal-topbar-link:focus-visible,.renewal-brand:focus-visible{outline:3px solid rgba(255,106,32,.5);outline-offset:4px}
.renewal-hero{
  position:relative;isolation:isolate;min-height:max(940px,108dvh);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);
  align-items:center;gap:clamp(56px,8vw,136px);padding:clamp(180px,20vh,260px) clamp(36px,7vw,118px) clamp(132px,15vh,210px);
  overflow:hidden;background:
    radial-gradient(circle at 78% 44%,rgba(255,255,255,.08),transparent 27%),
    radial-gradient(circle at 92% 8%,rgba(255,106,32,.12),transparent 22%),
    linear-gradient(135deg,#111216 0%,#1b1d22 57%,#131418 100%);color:#fff
}
.renewal-hero::before{content:"";position:absolute;z-index:-1;right:-8%;bottom:-22%;width:58vw;height:58vw;border:1px solid rgba(255,255,255,.06);border-radius:50%}
.renewal-hero::after{content:"";position:absolute;z-index:-1;right:7%;bottom:-22%;width:34vw;height:34vw;border:1px solid rgba(255,255,255,.05);border-radius:50%}
.renewal-hero-copy{position:relative;z-index:2;max-width:820px}
.renewal-eyebrow{margin:0 0 22px;color:var(--brand);font-size:.78rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.renewal-eyebrow--dark{color:#9b3b0d}
.renewal-hero h1{position:relative;overflow:hidden;margin:0;font-size:clamp(3.45rem,6.35vw,5.7rem);font-weight:900;line-height:.96;letter-spacing:-.068em;text-wrap:balance}
.renewal-hero h1::after{content:"";position:absolute;inset:-28% auto -28% -18%;width:16%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.08) 22%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.08) 78%,transparent);filter:blur(3px);mix-blend-mode:screen;transform:translateX(-160%) skewX(-12deg);animation:renewal-title-shimmer .86s cubic-bezier(.2,.78,.2,1) .55s 1 both;pointer-events:none}
.renewal-branch-name{margin:28px 0 0;color:#fff;font-size:clamp(1.55rem,2.8vw,2.45rem);font-weight:700;line-height:1.2;letter-spacing:-.035em}
.renewal-hero-lead{max-width:760px;margin:32px 0 0;color:rgba(255,255,255,.72);font-size:clamp(1.25rem,2vw,1.65rem);font-weight:350;line-height:1.72;text-wrap:pretty}
.renewal-hero-actions{display:flex;align-items:center;gap:16px;margin-top:44px;flex-wrap:wrap}
.renewal-cta{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:76px;border:0;border-radius:14px;
  background:var(--brand);color:#17181c;padding:16px 25px 16px 30px;font:inherit;font-size:1.25rem;font-weight:900;letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(255,106,32,.24),0 0 42px rgba(255,106,32,.16);cursor:pointer;touch-action:manipulation;text-decoration:none;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease
}
.renewal-cta svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.renewal-cta--hero{width:min(510px,100%)}
.renewal-cta:hover{transform:translateY(-2px) scale(.995);filter:brightness(1.04);box-shadow:0 20px 46px rgba(255,106,32,.3),0 0 58px rgba(255,106,32,.2)}
.renewal-cta:active:not(:disabled){transform:scale(.97);filter:brightness(.96)}
.renewal-cta:disabled{background:#cbc9c2;color:#777872;box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.renewal-cta:focus-visible{outline:4px solid rgba(255,255,255,.72);outline-offset:4px}
.renewal-cta--plan:focus-visible{outline:4px solid #17181c;outline-offset:4px}
.renewal-ghost-action{
  display:inline-flex;align-items:center;justify-content:center;min-height:76px;padding:14px 24px;border:1px solid rgba(255,255,255,.28);
  border-radius:14px;background:rgba(255,255,255,.04);color:#fff;text-decoration:none;font-size:1rem;font-weight:800;
  transition:background .18s ease,transform .18s ease
}
.renewal-ghost-action:hover{background:rgba(255,255,255,.09);transform:scale(.99)}
.renewal-ghost-action:active{transform:scale(.97)}
.renewal-ghost-action:focus-visible{outline:4px solid rgba(255,255,255,.48);outline-offset:4px}
.renewal-hero-visual{position:relative;z-index:2;justify-self:center;display:flex;flex-direction:column;align-items:center;width:min(510px,100%)}
.renewal-ring-wrap{position:relative;width:min(390px,76vw);aspect-ratio:1;display:grid;place-items:center}
.renewal-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 38px rgba(0,0,0,.25))}
.renewal-ring-track,.renewal-ring-value{fill:none;stroke-width:7}
.renewal-ring-track{stroke:rgba(255,255,255,.1)}
.renewal-ring-value{stroke:url(#renewal-ring-gradient);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.renewal-ring-stop{transition:stop-color .48s ease}
.renewal-ring-stop--from{stop-color:var(--renewal-ring-from)}
.renewal-ring-stop--to{stop-color:var(--renewal-ring-to)}
.renewal-days{position:relative;display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:center;text-align:center;font-variant-numeric:tabular-nums}
.renewal-days-label{grid-column:1/-1;margin-bottom:-8px;color:rgba(255,255,255,.6);font-size:.84rem;font-weight:800;letter-spacing:.12em}
.renewal-days strong{font-size:clamp(4.5rem,8vw,7.2rem);font-weight:900;line-height:1;letter-spacing:-.08em}
.renewal-days-unit{margin-left:10px;color:rgba(255,255,255,.68);font-size:1.1rem;font-weight:800}
.renewal-contract-meta{width:min(430px,100%);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px 22px;margin-top:16px;padding:20px 24px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.055);backdrop-filter:blur(14px)}
.renewal-state-badge{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:6px 11px;border:1px solid var(--renewal-state-color);border-radius:999px;background:var(--renewal-state-soft);color:var(--renewal-state-color);font-size:.78rem;font-weight:900;white-space:nowrap}
.renewal-contract-meta div{display:flex;flex-direction:column;gap:2px;min-width:0}
.renewal-contract-meta div span{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:700}
.renewal-contract-meta div strong{color:#fff;font-size:1.02rem;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.renewal-contract-meta p{grid-column:1/-1;margin:0;padding-top:13px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);font-size:.78rem;text-align:center}
.renewal-section{padding:clamp(120px,13vw,200px) clamp(28px,7vw,112px)}
.renewal-section-head{max-width:900px;margin:0 auto 52px;text-align:center}
.renewal-section-head h2{margin:0;color:#17181c;font-size:clamp(2.15rem,4vw,3.55rem);font-weight:900;line-height:1.08;letter-spacing:-.052em;text-wrap:balance}
.renewal-section-head > p:last-child{max-width:720px;margin:20px auto 0;color:#6b7178;font-size:1.05rem;line-height:1.75}
.renewal-review{background:#f7f6f3}
.renewal-stats{max-width:1380px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px;align-items:stretch}
.renewal-stat-card{position:relative;grid-column:span 5;min-width:0;min-height:370px;display:flex;flex-direction:column;align-items:flex-start;padding:40px 38px;border:0;border-radius:18px;background:#fff;box-shadow:0 20px 52px rgba(23,24,28,.08),0 3px 12px rgba(23,24,28,.045);overflow:hidden}
.renewal-stat-card:nth-child(3),.renewal-stat-card:nth-child(4){grid-column:span 6}
.renewal-stat-card::after{content:"";position:absolute;right:-42px;bottom:-54px;width:150px;height:150px;border-radius:50%;background:#f3f2ee}
.renewal-stat-icon{width:58px;height:58px;display:grid;place-items:center;margin-bottom:auto;border-radius:14px;background:#f0f1f3;color:#303238}
.renewal-stat-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.renewal-stat-label{position:relative;z-index:1;margin-top:42px;color:#62676d;font-size:.78rem;font-weight:900;letter-spacing:.11em}
.renewal-stat-card strong{position:relative;z-index:1;max-width:100%;margin-top:7px;color:#17181c;font-size:clamp(2.85rem,3.8vw,4.25rem);font-weight:900;line-height:1;letter-spacing:-.065em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.renewal-stat-card strong small{font-size:.34em;letter-spacing:0}
.renewal-stat-unit{position:relative;z-index:1;margin-top:12px;color:#62676d;font-size:.85rem}
.renewal-stat-card--revenue{grid-column:span 7;min-height:410px;background:linear-gradient(145deg,#f8fcf8,#edf8ef);box-shadow:0 30px 76px rgba(22,101,52,.14),0 7px 22px rgba(23,24,28,.06)}
.renewal-stat-card--revenue::after{background:#e4f3e7}
.renewal-stat-card--revenue .renewal-stat-icon{background:#def0e2;color:#166534}
.renewal-stat-card--revenue strong{color:#145f35;font-size:clamp(3.7rem,5.1vw,5.55rem);white-space:normal;overflow-wrap:anywhere}
.renewal-review-note{max-width:960px;margin:52px auto 0;color:#4d5156;font-size:clamp(1.15rem,2vw,1.55rem);font-weight:700;line-height:1.65;text-align:center;text-wrap:balance}
.renewal-plan-glow{position:absolute;z-index:-1;top:-210px;left:50%;width:520px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,32,.18),transparent 68%);transform:translateX(-50%)}
.renewal-plan-points{display:flex;align-items:center;justify-content:center;gap:18px 32px;margin:32px auto 0;flex-wrap:wrap;color:#44484d;font-size:.92rem;font-weight:800}
.renewal-plan-points span{display:inline-flex;align-items:center;gap:7px}
.renewal-plan-points svg{width:20px;height:20px;fill:none;stroke:#166534;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.renewal-cta--plan{width:min(520px,100%);margin-top:42px}
.renewal-trust{background:#fff}
.renewal-trust-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.renewal-trust-card{min-height:310px;padding:40px 36px;border:0;border-radius:18px;background:#fff;box-shadow:0 22px 58px rgba(23,24,28,.09),0 4px 14px rgba(23,24,28,.04);transition:transform .24s ease,box-shadow .24s ease}
.renewal-trust-card:nth-child(2){transform:translateY(-16px);box-shadow:0 30px 72px rgba(23,24,28,.12),0 5px 16px rgba(23,24,28,.05)}
.renewal-trust-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:18px;background:#17181c;color:#fff}
.renewal-trust-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.renewal-trust-card:nth-child(2) .renewal-trust-icon{background:var(--brand)}
.renewal-trust-card h3{margin:34px 0 0;font-size:1.45rem;font-weight:900;letter-spacing:-.025em}
.renewal-trust-card p{margin:15px 0 0;color:#6b7178;font-size:1rem;line-height:1.75}
.renewal-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding:50px 28px 58px;background:#111216;color:#fff;text-align:left}
.renewal-footer-mark{width:58px;color:var(--brand)}
.renewal-footer-mark svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.renewal-footer div:last-child{display:flex;flex-direction:column;gap:3px}
.renewal-footer strong{font-size:.88rem;font-weight:900;letter-spacing:.18em}
.renewal-footer span{color:rgba(255,255,255,.68);font-size:.78rem}
.renewal-dialog{width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:16px;background:transparent;color:#17181c;overflow:visible}
.renewal-dialog[open]{animation:renewal-dialog-in .22s ease-out}
.renewal-dialog-card{position:relative;max-height:calc(100dvh - 32px);overflow-y:auto;padding:clamp(38px,6vw,64px);border:1px solid rgba(255,255,255,.2);border-radius:16px;background:#fff;box-shadow:0 32px 90px rgba(0,0,0,.36);text-align:center}
.renewal-dialog-close{position:absolute;top:16px;right:16px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #e2e3e5;border-radius:50%;background:#f6f6f4;color:#36383c;font:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.renewal-dialog-close:hover{transform:scale(.96)}
.renewal-dialog-close:focus-visible,.renewal-dialog-done:focus-visible{outline:4px solid rgba(255,106,32,.28);outline-offset:3px}
.renewal-dialog-icon{width:74px;height:74px;display:grid;place-items:center;margin:0 auto 26px;border-radius:20px;background:#17181c;color:#fff}
.renewal-dialog-icon svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.renewal-dialog-card h2{margin:0;font-size:clamp(2.1rem,5vw,3.25rem);font-weight:900;line-height:1.08;letter-spacing:-.05em}
.renewal-dialog-card > p:not(.renewal-eyebrow):not(.renewal-dialog-assurance){max-width:540px;margin:18px auto 0;color:#6b7178;font-size:1rem;line-height:1.7}
.renewal-dialog-info{display:grid;gap:12px;margin:32px 0 0;text-align:left}
.renewal-dialog-info > div{display:flex;flex-direction:column;gap:7px;padding:20px 22px;border:1px solid #e3e4e6;border-radius:12px;background:#f8f8f6}
.renewal-dialog-info span{color:#5e6369;font-size:.74rem;font-weight:900;letter-spacing:.1em}
.renewal-dialog-info strong{font-size:1.08rem;font-weight:850;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.renewal-dialog-info strong.datecell{white-space:nowrap}
.renewal-dialog-info .renewal-dialog-money{color:var(--money)}
.renewal-dialog-assurance{display:flex;align-items:center;justify-content:center;gap:8px;margin:24px 0 0;color:#166534;font-size:.94rem;font-weight:850}
.renewal-dialog-assurance svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.renewal-dialog-done{width:100%;min-height:64px;margin-top:28px;border:0;border-radius:12px;background:#17181c;color:#fff;font:inherit;font-size:1.05rem;font-weight:900;cursor:pointer}
.renewal-dialog-done:hover{transform:scale(.99)}
.renewal-dialog-done:active:not(:disabled){transform:scale(.97)}
.renewal-overview-hero{min-height:max(860px,100dvh);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:center;gap:70px;padding:clamp(180px,20vh,250px) clamp(36px,7vw,118px) clamp(132px,15vh,200px);background:radial-gradient(circle at 78% 46%,rgba(255,106,32,.17),transparent 26%),linear-gradient(135deg,#111216,#202228);color:#fff}
.renewal-overview-copy{max-width:880px}
.renewal-overview-copy h1{margin:0;font-size:clamp(3rem,6vw,5.8rem);font-weight:900;line-height:.98;letter-spacing:-.065em;text-wrap:balance}
.renewal-overview-copy > p{max-width:740px;margin:30px 0 0;color:rgba(255,255,255,.68);font-size:clamp(1.2rem,1.8vw,1.5rem);font-weight:350;line-height:1.75}
.renewal-overview-copy .renewal-eyebrow{margin-top:0;color:var(--brand);font-size:.78rem;font-weight:900;line-height:1.2}
.renewal-overview-copy .renewal-cta{margin-top:46px;font-size:1.15rem}
.renewal-overview-count{justify-self:center;width:min(330px,64vw);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.055);box-shadow:0 30px 80px rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.renewal-overview-count strong{font-size:clamp(5rem,9vw,8rem);font-weight:900;line-height:.9;letter-spacing:-.08em}
.renewal-overview-count span{margin-top:18px;color:rgba(255,255,255,.6);font-size:1rem;font-weight:800;letter-spacing:.12em}
.renewal-branch-empty{max-width:1440px;margin:0 auto;padding:70px 28px;border:1px dashed #cbcdd0;border-radius:14px;background:#fff;color:#72777c;text-align:center;font-size:1.05rem}
.renewal-checkout{position:relative;background:linear-gradient(180deg,#efeee9 0%,#e8e7e1 100%);overflow:hidden}
.renewal-checkout::before{content:"";position:absolute;top:-180px;right:-140px;width:520px;height:520px;border:1px solid rgba(23,24,28,.06);border-radius:50%;box-shadow:0 0 0 90px rgba(255,255,255,.12),0 0 0 180px rgba(255,255,255,.08);pointer-events:none}
.renewal-checkout-shell{position:relative;z-index:1;max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:34px}
.renewal-checkout-step{min-width:0;margin:0;padding:clamp(32px,4vw,56px);border:0;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 24px 66px rgba(23,24,28,.075),0 3px 12px rgba(23,24,28,.035)}
.renewal-step-heading{width:100%;display:flex;align-items:center;gap:18px;margin:0 0 34px;padding:0;color:#17181c}
.renewal-step-heading > span:last-child{display:flex;flex-direction:column;gap:5px}
.renewal-step-heading strong{font-size:clamp(1.45rem,2.2vw,2rem);font-weight:900;letter-spacing:-.035em}
.renewal-step-heading small{color:#6b7178;font-size:.92rem;font-weight:500;line-height:1.5}
.renewal-step-number{flex:0 0 auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#17181c;color:#fff;font-size:.74rem;font-weight:900;letter-spacing:.08em}
.renewal-option-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.renewal-branch-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.renewal-branch-choice-grid--single{grid-template-columns:minmax(280px,680px)}
.renewal-branch-choice{position:relative;isolation:isolate;min-width:0;min-height:292px;display:flex;flex-direction:column;padding:30px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:radial-gradient(circle at 90% 8%,rgba(139,201,182,.12),transparent 32%),linear-gradient(145deg,#16171b,#25272d);color:#fff;box-shadow:0 20px 42px rgba(18,19,23,.16);cursor:pointer;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.renewal-branch-choice::after{content:"";position:absolute;z-index:-1;right:-50px;bottom:-74px;width:190px;height:190px;border:1px solid rgba(255,255,255,.07);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.025)}
.renewal-branch-choice[data-renewal-state="due-soon"]{background:radial-gradient(circle at 92% 8%,rgba(255,173,92,.22),transparent 34%),linear-gradient(145deg,#19181a,#2a2524)}
.renewal-branch-choice[data-renewal-state="expired"]{background:radial-gradient(circle at 92% 8%,rgba(239,113,128,.22),transparent 34%),linear-gradient(145deg,#1a1719,#2b2327)}
.renewal-branch-choice:hover{transform:translateY(-5px);box-shadow:0 30px 62px rgba(18,19,23,.23)}
.renewal-option-input:focus-visible + .renewal-branch-choice,.renewal-option-input:focus-visible + .renewal-period-card,.renewal-option-input:focus-visible + .renewal-payment-card{outline:4px solid rgba(22,101,52,.42);outline-offset:5px}
.renewal-option-input:checked + .renewal-branch-choice{border-color:#72d39f;box-shadow:0 0 0 3px #228653,0 30px 68px rgba(18,19,23,.25);transform:translateY(-7px)}
.renewal-option-check{position:absolute;z-index:3;top:20px;right:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#1e8b55;color:#fff;box-shadow:0 7px 20px rgba(30,139,85,.32);opacity:0;transform:scale(.62);transition:opacity .18s ease,transform .18s ease}
.renewal-option-check svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.renewal-option-input:checked + .renewal-branch-choice .renewal-option-check,.renewal-option-input:checked + .renewal-period-card .renewal-option-check,.renewal-option-input:checked + .renewal-payment-card .renewal-option-check,.renewal-branch-choice--locked .renewal-option-check{opacity:1;transform:scale(1)}
.renewal-branch-choice--locked{cursor:default;border-color:rgba(114,211,159,.52);box-shadow:0 0 0 2px rgba(34,134,83,.74),0 24px 54px rgba(18,19,23,.2)}
.renewal-branch-choice--locked:hover{transform:none}
.renewal-branch-choice-head{min-height:32px;display:flex;align-items:center;gap:8px;padding-right:44px;flex-wrap:wrap}
.renewal-branch-choice-badge,.renewal-locked-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.03em}
.renewal-branch-choice-badge{border:1px solid rgba(139,201,182,.55);background:rgba(139,201,182,.12);color:#bce7da}
.renewal-branch-choice-badge--due-soon{border-color:rgba(255,173,92,.62);background:rgba(255,173,92,.12);color:#ffd19e}
.renewal-branch-choice-badge--expired,.renewal-branch-choice-badge--activation{border-color:rgba(244,135,120,.65);background:rgba(244,135,120,.13);color:#ffc1b8}
.renewal-locked-badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
.renewal-branch-choice h3{max-width:92%;margin:30px 0 0;font-size:clamp(1.55rem,2.5vw,2.15rem);font-weight:900;line-height:1.15;letter-spacing:-.04em;overflow-wrap:anywhere}
.renewal-branch-choice-number{margin-top:7px;color:rgba(255,255,255,.48);font-size:.72rem;font-weight:700;letter-spacing:.06em}
.renewal-branch-choice-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:auto;padding-top:28px}
.renewal-branch-choice-meta > span{display:flex;flex-direction:column;gap:5px;min-width:0}
.renewal-branch-choice-meta small{color:rgba(255,255,255,.48);font-size:.7rem;font-weight:800;letter-spacing:.06em}
.renewal-branch-choice-meta strong{font-size:.94rem;font-weight:850;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.renewal-activation-note{margin:18px 0 0;padding:12px 14px;border-radius:10px;background:rgba(244,135,120,.13);color:#ffd0c9;font-size:.85rem;font-weight:900;line-height:1.5}
.renewal-period-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.renewal-period-card{position:relative;min-width:0;min-height:240px;display:flex;flex-direction:column;align-items:flex-start;padding:30px 26px;border:2px solid #e2e2de;border-radius:16px;background:#fbfbf9;color:#17181c;cursor:pointer;box-shadow:0 8px 22px rgba(23,24,28,.045);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.renewal-period-card:hover{transform:translateY(-4px);border-color:#b8bbb5;box-shadow:0 18px 36px rgba(23,24,28,.08)}
.renewal-option-input:checked + .renewal-period-card{border-color:#238954;background:#f2faf4;box-shadow:0 0 0 2px rgba(35,137,84,.16),0 22px 46px rgba(22,101,52,.12);transform:translateY(-5px)}
.renewal-period-card .renewal-option-check{top:18px;right:18px}
.renewal-best-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;background:#17181c;color:#fff;font-size:.7rem;font-weight:900;letter-spacing:.05em}
.renewal-period-card > strong{margin-top:auto;font-size:clamp(1.65rem,2.5vw,2.25rem);font-weight:900;letter-spacing:-.04em}
.renewal-period-card > span:not(.renewal-option-check):not(.renewal-best-badge){margin-top:7px;color:#777b7f;font-size:.78rem;font-weight:700}
.renewal-period-card > b{margin-top:20px;color:#166534;font-size:clamp(1.15rem,1.8vw,1.5rem);font-weight:900;overflow-wrap:anywhere}
.renewal-payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.renewal-payment-card{position:relative;min-width:0;min-height:112px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px 24px;border:2px solid #e2e2de;border-radius:16px;background:#fbfbf9;color:#17181c;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.renewal-payment-card:hover{transform:translateY(-3px);border-color:#b8bbb5;box-shadow:0 16px 32px rgba(23,24,28,.075)}
.renewal-option-input:checked + .renewal-payment-card{border-color:#238954;background:#f2faf4;box-shadow:0 0 0 2px rgba(35,137,84,.14),0 18px 36px rgba(22,101,52,.1);transform:translateY(-4px)}
.renewal-payment-card .renewal-option-check{position:relative;top:auto;right:auto;opacity:.14;transform:scale(.82);box-shadow:none}
.renewal-payment-index{display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:#ecece8;color:#5e6266;font-size:.72rem;font-weight:900;letter-spacing:.08em}
.renewal-payment-card > span:nth-child(2){display:flex;flex-direction:column;gap:5px;min-width:0}
.renewal-payment-card strong{font-size:1.08rem;font-weight:900;overflow-wrap:anywhere}
.renewal-payment-card small{color:#73777b;font-size:.76rem;line-height:1.45}
.renewal-invoice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.renewal-invoice-grid label{display:flex;flex-direction:column;gap:8px;color:#31353a;font-size:.83rem;font-weight:850}
.renewal-invoice-grid label > small{color:#73777b;font-size:.75rem;font-weight:650;line-height:1.55}
.renewal-invoice-type,.renewal-invoice-business{grid-column:1/-1}
.renewal-invoice-business{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:20px;border:1px solid #dfe5df;border-radius:14px;background:#f7faf7}
.renewal-invoice-business label:last-child{grid-column:1/-1}
.renewal-invoice-grid input,.renewal-invoice-grid select{width:100%;min-height:50px;padding:11px 13px;border:1px solid #cfd2cc;border-radius:10px;background:#fff;color:#17181c;font:inherit;font-size:.95rem;outline:none}
.renewal-invoice-grid input:focus,.renewal-invoice-grid select:focus{border-color:#238954;box-shadow:0 0 0 3px rgba(35,137,84,.14)}
.renewal-investment{position:relative;isolation:isolate;margin-top:8px;padding:clamp(48px,7vw,92px);border-radius:22px;background:linear-gradient(145deg,#121317,#22242a);color:#fff;box-shadow:0 34px 86px rgba(23,24,28,.22);text-align:center;overflow:hidden}
.renewal-investment::after{content:"";position:absolute;z-index:-1;left:-12%;bottom:-75%;width:72%;aspect-ratio:1;border:1px solid rgba(255,255,255,.055);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.022),0 0 0 140px rgba(255,255,255,.014)}
.renewal-investment .renewal-plan-glow{top:-230px;width:650px;height:380px;background:radial-gradient(circle,rgba(255,106,32,.24),transparent 68%)}
.renewal-investment > p:first-of-type{margin:0;color:rgba(255,255,255,.58);font-size:.78rem;font-weight:900;letter-spacing:.16em}
.renewal-investment > strong{display:block;max-width:1000px;margin:24px auto 0;color:#fff;font-size:clamp(3rem,5.5vw,5.15rem);font-weight:900;line-height:1.04;letter-spacing:-.055em;overflow-wrap:anywhere}
.renewal-investment > small{display:block;margin-top:17px;color:rgba(255,255,255,.55);font-size:.86rem;line-height:1.5}
.renewal-investment .renewal-plan-points{color:rgba(255,255,255,.76)}
.renewal-investment .renewal-cta--plan{width:min(680px,100%);margin-top:48px}
.renewal-selection-hint{min-height:1.4em;margin:18px 0 0;color:rgba(255,255,255,.64);font-size:.86rem;font-weight:700}
.renewal-dialog{width:min(860px,calc(100vw - 32px))}
.renewal-dialog-info{grid-template-columns:repeat(2,minmax(0,1fr))}
.renewal-dialog-info--instruction{grid-column:1/-1}
.renewal-dialog-info--instruction strong{color:#145f35}
.renewal-dialog-done:disabled{opacity:.55;cursor:not-allowed;transform:none}
.renewal-status-page{min-height:calc(100dvh - 40px);display:grid;place-items:center;padding:clamp(28px,6vw,80px);background:linear-gradient(145deg,#f5f2e9,#e8eee8)}
.renewal-status-card{width:min(760px,100%);padding:clamp(32px,6vw,72px);border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(23,24,28,.13)}
.renewal-status-card h1{margin:12px 0 0;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1;letter-spacing:-.055em}
.renewal-status-card > p:not(.renewal-eyebrow){margin:24px 0 0;color:#656b70;font-size:1.08rem;line-height:1.75}
.renewal-status-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:34px 0 0}
.renewal-status-card dl div{padding:18px;border-radius:12px;background:#f4f4f0}
.renewal-status-card dt{color:#777d80;font-size:.74rem;font-weight:850;letter-spacing:.06em}
.renewal-status-card dd{margin:8px 0 0;font-weight:900;overflow-wrap:anywhere}
.renewal-status-actions{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.renewal-status-actions .renewal-cta--plan{margin:0;width:auto;min-height:54px}
.renewal-status-actions .renewal-ghost-action{color:#17181c;border-color:#c9cbc7;background:#fff}
.renewal-payment-forward-page{min-height:100vh;margin:0;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 18%,rgba(255,106,32,.12),transparent 34%),linear-gradient(145deg,#f8f5ed,#e8eee8);color:#17181c;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.renewal-payment-forward-card{box-sizing:border-box;width:min(100%,520px);padding:clamp(36px,7vw,58px);border:1px solid rgba(23,24,28,.08);border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(23,24,28,.14);text-align:center}
.renewal-payment-forward-spinner{width:58px;height:58px;margin:0 auto 28px;border:5px solid #ecece8;border-top-color:#ff6a20;border-radius:50%;animation:renewal-payment-forward-spin .9s linear infinite}
.renewal-payment-forward-card h1{margin:0;font-size:clamp(2rem,7vw,3rem);line-height:1.08;letter-spacing:-.045em}
.renewal-payment-forward-card p{margin:20px 0 0;color:#676c71;font-size:1rem;line-height:1.7}
.renewal-payment-forward-form{margin-top:28px}
.renewal-payment-forward-button{min-width:180px;min-height:54px;padding:13px 24px;border:0;border-radius:12px;background:#17181c;color:#fff;font:inherit;font-weight:900;cursor:pointer}
.renewal-payment-forward-button:hover{background:#2a2c31;transform:translateY(-1px)}
.renewal-payment-forward-button:active{transform:scale(.98)}
.renewal-payment-forward-button:focus-visible{outline:4px solid rgba(255,106,32,.35);outline-offset:4px}
@keyframes renewal-payment-forward-spin{to{transform:rotate(360deg)}}
@keyframes renewal-dialog-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes renewal-title-shimmer{0%{opacity:0;transform:translateX(-160%) skewX(-12deg)}12%{opacity:1}82%{opacity:.82}100%{opacity:0;transform:translateX(760%) skewX(-12deg)}}
@media (max-width:1200px){
  .renewal-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .renewal-stat-card,.renewal-stat-card--revenue,.renewal-stat-card:nth-child(3),.renewal-stat-card:nth-child(4){grid-column:auto}
}
@media (max-width:1024px){
  .renewal-hero{grid-template-columns:minmax(0,1fr);gap:78px;min-height:auto;padding-top:clamp(176px,18vh,220px);padding-bottom:clamp(120px,14vh,170px);text-align:center}
  .renewal-hero-copy{margin:0 auto}
  .renewal-hero-lead{margin-left:auto;margin-right:auto}
  .renewal-hero-actions{justify-content:center}
  .renewal-hero-visual{width:min(580px,100%)}
  .renewal-overview-hero{grid-template-columns:minmax(0,1fr);gap:72px;min-height:auto;text-align:center}
  .renewal-overview-copy{margin:0 auto}
  .renewal-overview-copy > p{margin-left:auto;margin-right:auto}
  .renewal-period-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .renewal-checkout-step{padding:clamp(30px,5vw,48px)}
  .renewal-trust-grid{grid-template-columns:minmax(0,1fr)}
  .renewal-trust-card{min-height:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:0 28px;align-items:center}
  .renewal-trust-icon{grid-row:1/3}
  .renewal-trust-card h3{margin:0}
  .renewal-trust-card p{margin-top:10px}
  .renewal-trust-card:nth-child(2){transform:none}
}
@media (max-width:820px){
  .renewal-topbar{min-height:82px;padding:16px 22px}
  .renewal-brand-mark{width:44px;height:44px}
  .renewal-topbar-tenant{max-width:42vw}
  .renewal-hero{padding-left:24px;padding-right:24px}
  .renewal-contract-meta{padding:17px}
  .renewal-section{padding-left:22px;padding-right:22px}
  .renewal-checkout-shell{gap:24px}
  .renewal-branch-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .renewal-branch-choice-grid--single{grid-template-columns:minmax(0,1fr)}
  .renewal-dialog-info{grid-template-columns:minmax(0,1fr)}
  .renewal-dialog-info--instruction{grid-column:auto}
  .renewal-invoice-grid,.renewal-invoice-business{grid-template-columns:minmax(0,1fr)}
  .renewal-invoice-business label:last-child{grid-column:auto}
}
@media (max-width:620px){
  .renewal-topbar-meta{gap:10px}
  .renewal-topbar-tenant{display:none}
  .renewal-hero{padding-top:150px;padding-bottom:104px}
  .renewal-hero h1{font-size:clamp(3rem,15vw,4rem)}
  .renewal-hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .renewal-cta--hero,.renewal-ghost-action{width:100%}
  .renewal-stats{grid-template-columns:minmax(0,1fr)}
  .renewal-stat-card,.renewal-stat-card--revenue{min-height:320px;padding:32px 26px}
  .renewal-stat-card--revenue strong{font-size:clamp(3rem,12vw,4.4rem)}
  .renewal-step-heading{align-items:flex-start}
  .renewal-step-heading small{font-size:.8rem}
  .renewal-checkout-step{padding:30px 18px;border-radius:16px}
  .renewal-branch-choice-grid,.renewal-period-grid,.renewal-payment-grid{grid-template-columns:minmax(0,1fr)}
  .renewal-branch-choice{min-height:282px;padding:26px 22px}
  .renewal-branch-choice-meta{grid-template-columns:minmax(0,1fr);gap:12px}
  .renewal-period-card{min-height:210px}
  .renewal-payment-card{grid-template-columns:auto minmax(0,1fr) auto;padding:18px}
  .renewal-payment-index{width:44px;height:44px}
  .renewal-investment{padding:54px 20px}
  .renewal-investment > strong{font-size:clamp(2.65rem,13vw,4rem)}
  .renewal-investment .renewal-cta--plan{justify-content:center;gap:14px;padding-left:20px;padding-right:20px;font-size:1.02rem}
  .renewal-plan-points{align-items:flex-start;flex-direction:column;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
  .renewal-trust-card{display:flex;flex-direction:column;align-items:flex-start}
  .renewal-trust-card h3{margin-top:28px}
  .renewal-overview-hero{padding:150px 24px 104px}
  .renewal-dialog-card{padding:50px 22px 28px}
  .renewal-footer{align-items:flex-start}
	.renewal-status-card dl{grid-template-columns:minmax(0,1fr)}
	.renewal-status-actions{display:grid;grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .renewal-page{scroll-behavior:auto}
  .renewal-hero h1::after{display:none;animation:none}
  .renewal-cta,.renewal-ghost-action,.renewal-ring-value,.renewal-ring-stop,.renewal-branch-choice,.renewal-period-card,.renewal-payment-card,.renewal-option-check,.renewal-trust-card,.renewal-dialog-close,.renewal-dialog-done{transition:none}
  .renewal-dialog[open]{animation:none}
  .renewal-payment-forward-spinner{animation:none;border-color:#ff6a20}
}
.register-turnstile{width:100%;min-height:65px}