/* ════════════════════════════════════════════════════════════
   立美360 後台管理系統 — styles.css
   三種淺色風格（data-theme）：aqua 海湛 / bold 烈橙 / calm 青澄
   ════════════════════════════════════════════════════════════ */

/* ---------- 版面尺寸變數（之後若移除頂端預覽列，把 --preview-h 設為 0 即可） ---------- */
/* ---------- 主題變數（青澄）+ 版面尺寸 ---------- */
:root {
  /* 版面尺寸（已無頂端預覽列；之後若再加可調 --preview-h） */
  --preview-h:0px;
  --topbar-h:62px;
  --bars:calc(var(--preview-h) + var(--topbar-h));
  /* 青澄風格 */
  --bg:#eef2ec; --surface:#ffffff; --surface-2:#f3f7f1; --surface-3:#e8efe5;
  --border:#e3eade; --border-strong:#cdd8c6;
  --fg:#23302a; --fg-2:#52625a; --fg-3:#8a988f;
  --accent:#2e9e6b; --accent-strong:#247e55; --accent-soft:#dcf1e6; --on-accent:#ffffff;
  --success:#2e9e6b; --success-soft:#dcf1e6;
  --danger:#e0695b; --danger-soft:#fbe8e5;
  --warn:#cf932a; --warn-soft:#fbf0d8;
  --radius:20px; --radius-sm:14px; --radius-lg:28px; --radius-pill:999px;
  --shadow-sm:0 2px 6px rgba(40,60,48,.05);
  --shadow:0 4px 14px rgba(40,60,48,.07), 0 18px 40px -20px rgba(40,60,48,.18);
  --shadow-lg:0 26px 60px -22px rgba(40,60,48,.26);
  --font:'Outfit','Noto Sans TC',system-ui,sans-serif;
  --font-display:'Outfit','Noto Sans TC',sans-serif;
  --topbar-bg:rgba(255,255,255,.82); --sidebar-bg:transparent; --sidebar-border:transparent;
  --ring:rgba(46,158,107,.30);
}

/* ---------- 基礎 ---------- */
*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font); color:var(--fg);
  background:var(--bg); line-height:1.5;
  padding-top:var(--preview-h); /* 預覽列 */
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3,p { margin:0; }
button { font-family:inherit; cursor:pointer; }
input { font-family:inherit; }
code { font-family:'Archivo',ui-monospace,monospace; font-weight:600; }
b { font-weight:700; }
.muted { color:var(--fg-2); }
.small { font-size:13px; }

.icon {
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  font-size:22px; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; word-wrap:normal; direction:ltr; flex-shrink:0;
  -webkit-font-feature-settings:'liga'; font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* ════════ 登入頁 ════════ */
.login-screen {
  min-height:100dvh;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--bg);
}
.login-card {
  width:100%; max-width:880px; display:flex; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; min-height:540px;
}
/* 左：品牌面板（純色、無漸層） */
.login-aside {
  position:relative; flex:1; background:#1d5e41; color:#fff;
  padding:48px 42px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; overflow:hidden;
}
.login-lockup { display:flex; align-items:center; gap:14px; }
.login-aside-logo { width:60px; height:60px; border-radius:50%; object-fit:cover; background:#000; box-shadow:0 0 0 4px rgba(255,255,255,.16); flex:none; }
.login-aside-brand { font-family:var(--font-display); font-size:22px; font-weight:800; line-height:1.2; letter-spacing:.01em; white-space:nowrap; }
.login-aside-tag { font-size:14.5px; line-height:1.5; color:rgba(255,255,255,.82); margin-top:3px; max-width:24ch; }
.login-feats { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.login-feat { display:flex; align-items:center; gap:12px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.94); }
.login-feat .icon { font-size:19px; width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.13); border-radius:50%; }
.login-aside-foot { font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:.22em; color:rgba(255,255,255,.5); }
.login-watermark { position:absolute; right:-26px; bottom:-34px; font-family:'Material Symbols Rounded'; font-size:188px; line-height:1; color:rgba(255,255,255,.08); pointer-events:none; user-select:none; }
.login-aside > * { position:relative; }
/* 右：表單 */
.login-main { width:390px; flex:none; padding:46px 40px; display:flex; flex-direction:column; justify-content:center; gap:16px; }
@media (max-width:720px) {
  .login-card { flex-direction:column; max-width:430px; min-height:0; }
  .login-aside { padding:24px 26px; gap:0; }
  .login-aside-logo { width:50px; height:50px; }
  .login-aside-brand { font-size:18px; }
  .login-aside-foot { display:none; }
  .login-watermark { display:none; }
  .login-main { width:auto; padding:24px 26px 28px; }
}

.field { display:flex; flex-direction:column; gap:7px; }
.field-label { font-size:13px; font-weight:600; color:var(--fg-2); }
.field-control { position:relative; display:flex; align-items:center; }
.field-icon { position:absolute; left:13px; color:var(--fg-3); font-size:20px; pointer-events:none; }
.field-control input {
  width:100%; height:50px; padding:0 14px 0 42px; font-size:16px; color:var(--fg);
  background:var(--surface-2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); outline:none; transition:.15s;
}
.field-control input::placeholder { color:var(--fg-3); }
.field-control input:focus { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 4px var(--ring); }
.reveal-btn { position:absolute; right:6px; background:none; border:none; color:var(--fg-3); padding:8px; border-radius:8px; display:flex; }
.reveal-btn:hover { color:var(--fg-2); background:var(--surface-3); }
.caps-hint { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--warn); font-weight:600; }
.caps-hint .icon { font-size:16px; }

.login-error {
  display:flex; align-items:center; gap:8px; margin:0;
  background:var(--danger-soft); color:var(--danger);
  border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
  border-radius:var(--radius-sm); padding:11px 13px; font-size:13.5px; font-weight:600;
}
.login-error::before { font-family:'Material Symbols Rounded'; content:'error'; font-size:19px; }
.login-error.is-shake { animation:shake .4s; }

.login-submit {
  height:52px; margin-top:4px; border:none; border-radius:var(--radius-pill);
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--on-accent); font-size:16px; font-weight:700;
  font-family:var(--font-display); letter-spacing:.04em; transition:.15s; box-shadow:var(--shadow-sm);
}
.login-submit .icon { font-size:20px; }
.login-submit:hover { background:var(--accent-strong); }
.login-submit:active { transform:translateY(1px); }
.login-submit:disabled { opacity:.55; cursor:not-allowed; }
.login-hint { font-size:12.5px; color:var(--fg-3); text-align:center; margin-top:2px; }
.login-hint code { background:var(--surface-3); color:var(--fg-2); padding:2px 7px; border-radius:6px; font-size:12px; }

/* ════════ 後台主體 ════════ */
.app { min-height:calc(100dvh - var(--preview-h)); display:flex; flex-direction:column; }

/* 頂部導覽列 */
.topbar {
  position:sticky; top:var(--preview-h); z-index:60; height:var(--topbar-h);
  display:flex; align-items:center; gap:12px; padding:0 18px;
  background:var(--topbar-bg); border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.4) blur(8px);
}
.hamburger { display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--surface); color:var(--fg); border-radius:var(--radius-sm); transition:background .15s; }
.hamburger:hover { background:var(--surface-3); }
.ham-box { position:relative; display:block; width:20px; height:14px; }
.ham-line { position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform .3s cubic-bezier(.5,.2,.2,1), opacity .2s ease; }
.ham-line:nth-child(1) { top:0; }
.ham-line:nth-child(2) { top:6px; }
.ham-line:nth-child(3) { top:12px; }
body.nav-open .ham-line:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.nav-open .ham-line:nth-child(2) { opacity:0; transform:scaleX(.4); }
body.nav-open .ham-line:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.brand { display:flex; align-items:center; gap:11px; min-width:0; text-decoration:none; color:inherit; border-radius:var(--radius-sm); }
.brand:hover .brand-name { color:var(--accent-strong); }
.brand-logo { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#000; flex-shrink:0; box-shadow:var(--shadow-sm); }
.brand-name { font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-right { margin-left:auto; display:flex; align-items:center; gap:10px; }
.clock { font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:600; font-size:15px; color:var(--fg-2); white-space:nowrap; }
.onsite-pill { display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 12px; background:var(--accent-soft); color:var(--accent-strong); border-radius:var(--radius-pill); font-weight:700; }
.onsite-pill .icon { font-size:19px; }
.onsite-pill b { font-variant-numeric:tabular-nums; }
.logout-btn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 14px; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg); border-radius:var(--radius-pill); font-weight:600; font-size:14px; transition:.15s; }
.logout-btn:hover { background:var(--surface-3); }
.logout-btn .icon { font-size:19px; }

/* 登入者資訊 */
.user-chip { display:flex; align-items:center; gap:9px; padding:5px 12px 5px 6px; border-radius:var(--radius-pill); background:var(--surface-2); border:1px solid var(--border); }
.user-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--on-accent); font-family:var(--font-display); font-weight:800; font-size:16px; }
.user-meta { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.user-name { font-size:14px; font-weight:700; color:var(--fg); white-space:nowrap; }
.user-role { font-size:11.5px; color:var(--fg-3); white-space:nowrap; }
.sidebar-user { display:none; align-items:center; gap:10px; margin-top:10px; padding:11px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); }
.sidebar-user .user-meta { flex:1; }
.sidebar-logout { flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-strong); background:var(--surface); color:var(--fg-2); border-radius:var(--radius-sm); transition:.15s; }
.sidebar-logout:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.sidebar-logout .icon { font-size:20px; }

/* 外殼：側欄 + 內容 */
.shell { flex:1; display:flex; align-items:flex-start; }

.sidebar {
  position:sticky; top:var(--bars); align-self:flex-start;
  width:250px; flex-shrink:0; height:calc(100dvh - var(--bars));
  background:var(--sidebar-bg); border-right:1px solid var(--sidebar-border);
  padding:18px 14px; display:flex; flex-direction:column; gap:16px; overflow-y:auto;
}
.nav { display:flex; flex-direction:column; gap:6px; }
.nav-item {
  display:flex; align-items:center; gap:12px; width:100%; text-align:left; text-decoration:none;
  box-sizing:border-box; cursor:pointer;
  padding:13px 14px; border:1px solid transparent; background:transparent;
  border-radius:var(--radius); color:var(--fg-2); font-size:15px; font-weight:600; transition:.15s;
}
.nav-item .nav-icon { font-size:23px; color:var(--fg-3); transition:.15s; }
.nav-item:hover { background:var(--surface-2); color:var(--fg); }
.nav-item:hover .nav-icon { color:var(--fg-2); }
.nav-item.is-active { background:var(--accent-soft); color:var(--accent-strong); border-color:color-mix(in srgb,var(--accent) 20%,transparent); }
.nav-item.is-active .nav-icon { color:var(--accent); }
.sidebar-foot { margin-top:auto; }
.mini-stats { display:flex; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:12px; }
.mini-stat { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.mini-num { font-family:var(--font-display); font-size:21px; font-weight:800; font-variant-numeric:tabular-nums; }
.mini-label { font-size:11.5px; color:var(--fg-3); }

.scrim { display:none; }

/* 內容 */
.content { flex:1; min-width:0; padding:26px clamp(16px,3.5vw,40px) 40px; }
.page { max-width:880px; margin:0 auto; }
.page-head { margin-bottom:20px; }
.page-title { font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:.01em; }
.page-sub { color:var(--fg-2); font-size:14.5px; margin-top:5px; }

/* 卡片 */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px 22px 20px; margin-bottom:18px; }
.card-title { font-weight:700; font-size:17px; }

/* 狀態橫幅 */
.status-banner {
  display:flex; align-items:center; gap:10px; padding:14px 18px; margin-bottom:18px;
  border-radius:var(--radius); font-weight:600; font-size:15px;
  background:var(--surface); border:1px solid var(--border);
}
.status-banner .icon { font-size:22px; }
.status-banner.is-open { background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb,var(--success) 26%,transparent); }
.status-banner.is-rest { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb,var(--danger) 26%,transparent); }
.status-banner.is-hidden-window { background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb,var(--warn) 30%,transparent); }
.status-banner.is-always { background:var(--accent-soft); color:var(--accent-strong); border-color:color-mix(in srgb,var(--accent) 24%,transparent); }

/* 總開關卡 */
.master-row { display:flex; align-items:center; gap:16px; }
.master-copy { flex:1; }
.master-explain { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.master-explain li { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--fg-2); }
.tag { flex-shrink:0; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; }
.tag-on { background:var(--success-soft); color:var(--success); }
.tag-off { background:var(--surface-3); color:var(--fg-3); }

/* 開關 switch */
.switch { position:relative; display:inline-block; width:52px; height:30px; flex-shrink:0; }
.switch.sm { width:46px; height:27px; }
.switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .slider { position:absolute; inset:0; background:var(--border-strong); border-radius:999px; transition:.2s; }
.switch .slider::before { content:''; position:absolute; height:22px; width:22px; left:4px; top:4px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.switch.sm .slider::before { height:19px; width:19px; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(22px); }
.switch.sm input:checked + .slider::before { transform:translateX(19px); }
.switch input:focus-visible + .slider { box-shadow:0 0 0 4px var(--ring); }

/* 每日營業時間 */
.day-list { margin-top:16px; display:flex; flex-direction:column; }
.day-row { display:flex; align-items:flex-start; gap:18px; padding:16px 0; border-top:1px solid var(--border); }
.day-row:first-child { border-top:none; padding-top:6px; }
.day-head { display:flex; align-items:center; gap:12px; width:170px; flex-shrink:0; padding-top:4px; }
.day-name { font-weight:700; font-size:15px; width:34px; }
.day-state { font-size:13px; font-weight:600; }
.day-state.open { color:var(--success); }
.day-state.closed { color:var(--fg-3); }
.day-times { flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }
.time-range { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tr-label { font-size:13px; font-weight:600; color:var(--fg-2); width:118px; flex-shrink:0; }
.time-range input[type="time"] {
  height:42px; padding:0 12px; font-size:15px; color:var(--fg); font-family:var(--font-display);
  background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; transition:.15s;
}
.time-range input[type="time"]:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.time-sep { color:var(--fg-3); }
.day-row.is-closed .day-times { opacity:.4; pointer-events:none; }

/* 臨時店休 */
.closure-list { display:flex; flex-direction:column; gap:8px; margin:14px 0; }
.closure-list:empty { display:none; }
.closure-item { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); }
.closure-item .ci-date { font-family:var(--font-display); font-weight:700; font-variant-numeric:tabular-nums; }
.closure-item .ci-reason { color:var(--fg-2); font-size:13.5px; }
.closure-item .ci-remove { margin-left:auto; background:none; border:none; color:var(--fg-3); padding:6px; border-radius:8px; display:flex; }
.closure-item .ci-remove:hover { color:var(--danger); background:var(--danger-soft); }
.closure-add { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.closure-field { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--fg-2); }
.closure-add input[type="date"] { height:42px; padding:0 12px; font-size:14px; color:var(--fg); font-family:var(--font-display); background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; }
.closure-reason { flex:1; min-width:160px; height:42px; padding:0 13px; font-size:14px; color:var(--fg); background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--radius-sm); outline:none; }
.closure-add input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
.closure-tilde { color:var(--fg-3); }

.ghost-btn { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 16px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--fg); border-radius:var(--radius-pill); font-weight:600; font-size:14px; transition:.15s; }
.ghost-btn:hover { background:var(--surface-3); border-color:var(--accent); color:var(--accent-strong); }
.ghost-btn .icon { font-size:19px; }

/* 儲存列 */
.save-bar { position:sticky; bottom:0; display:flex; align-items:center; gap:14px; margin-top:6px; padding:14px 0 6px; background:linear-gradient(to top, var(--bg) 70%, transparent); }
.save-status { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:var(--fg-3); }
.save-status .icon { font-size:19px; }
.save-status.is-dirty { color:var(--warn); }
.primary-btn { margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 26px; border:none; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); font-family:var(--font-display); font-weight:700; font-size:15.5px; letter-spacing:.03em; transition:.15s; box-shadow:var(--shadow-sm); }
.primary-btn:hover { background:var(--accent-strong); }
.primary-btn:active { transform:translateY(1px); }
.primary-btn .icon { font-size:20px; }

/* ════════ 前場 / 後場 ════════ */
.page-action { max-width:560px; }
/* ════════ 首頁 ════════ */
.home-section { font-size:14px; font-weight:700; color:var(--fg-3); letter-spacing:.04em; margin:24px 0 12px; }
.home-quick { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.quick-card {
  display:flex; align-items:center; gap:14px; padding:18px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .08s;
}
.quick-card:hover { border-color:color-mix(in srgb,var(--accent) 40%,transparent); box-shadow:var(--shadow); }
.quick-card:active { transform:translateY(1px); }
.quick-ico { width:50px; height:50px; flex:none; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-strong); }
.quick-ico .icon { font-size:26px; }
.quick-body { min-width:0; flex:1; }
.quick-title { font-weight:700; font-size:16px; color:var(--fg); }
.quick-desc { font-size:13px; color:var(--fg-3); margin-top:2px; }
.quick-card .quick-arrow { font-family:'Material Symbols Rounded'; font-size:22px; color:var(--fg-3); flex:none; }
.today-hours { display:flex; align-items:center; gap:10px; font-size:15px; }
.today-hours .icon { font-size:22px; color:var(--accent); }
.today-hours b { font-family:var(--font-display); font-variant-numeric:tabular-nums; }
@media (max-width:560px) { .home-quick { grid-template-columns:1fr; } }

.live-clock {
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:18px; padding:14px 20px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.lc-time { font-family:var(--font-display); font-size:clamp(30px,9vw,44px); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:.01em; color:var(--accent-strong); }
.lc-date { font-size:14.5px; font-weight:600; color:var(--fg-3); }
.stat-row { display:flex; gap:12px; margin-bottom:22px; }
.stat { flex:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 10px; text-align:center; box-shadow:var(--shadow-sm); transition:.2s; }
.stat-num { display:block; font-family:var(--font-display); font-size:clamp(26px,7vw,38px); font-weight:800; font-variant-numeric:tabular-nums; line-height:1.05; }
.stat-label { font-size:13px; color:var(--fg-3); font-weight:600; }
.stat.is-primary { border-color:color-mix(in srgb,var(--accent) 40%,transparent); background:var(--accent-soft); }
.stat.is-primary .stat-num { color:var(--accent-strong); }
.stat.is-primary .stat-label { color:var(--accent-strong); }
.stat-onsite .stat-num { color:var(--fg); }

.big-action {
  width:100%; min-height:clamp(220px,40vh,300px); border:none; border-radius:var(--radius-lg);
  color:var(--on-accent); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow:var(--shadow-lg); transition:transform .08s ease, filter .15s ease; -webkit-tap-highlight-color:transparent; user-select:none;
}
.big-enter { background:linear-gradient(160deg, var(--accent), var(--accent-strong)); }
.big-exit { background:linear-gradient(160deg, color-mix(in srgb,var(--fg) 86%,var(--accent)), var(--fg)); }
.big-icon { font-size:64px; }
.big-label { font-family:var(--font-display); font-size:clamp(38px,11vw,58px); font-weight:800; letter-spacing:.06em; line-height:1; }
.big-sub { font-size:15px; opacity:.85; letter-spacing:.1em; }
.big-action:active { transform:scale(.975); filter:brightness(.96); }
.big-action.is-bump { animation:bump .32s ease; }

.undo-btn { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:14px; height:50px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--fg-2); border-radius:var(--radius-pill); font-size:15px; font-weight:600; transition:.15s; }
.undo-btn:hover { background:var(--surface-3); color:var(--fg); }
.undo-btn:disabled { opacity:.45; cursor:not-allowed; }
.undo-btn .icon { font-size:21px; }

/* ════════ 手動維護 ════════ */
.page-manual { max-width:680px; }
.manual-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.counter-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:22px 18px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.counter-head { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:17px; color:var(--fg-2); }
.counter-head .icon { font-size:22px; color:var(--accent); }
.counter-num { font-family:var(--font-display); font-size:clamp(48px,12vw,68px); font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.stepper { display:flex; gap:12px; width:100%; }
.step-btn { flex:1; height:64px; border:none; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; transition:transform .08s, filter .15s; -webkit-tap-highlight-color:transparent; }
.step-btn .icon { font-size:30px; }
.step-minus { background:var(--surface-3); color:var(--fg); }
.step-minus:hover { filter:brightness(.96); }
.step-plus { background:var(--accent); color:var(--on-accent); }
.step-plus:hover { background:var(--accent-strong); }
.step-btn:active { transform:scale(.94); }
.reset-btn { width:100%; height:42px; border:1.5px solid var(--border); background:transparent; color:var(--fg-3); border-radius:var(--radius-pill); font-weight:600; font-size:14px; transition:.15s; }
.reset-btn:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.onsite-banner { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; padding:16px; background:var(--accent-soft); color:var(--accent-strong); border-radius:var(--radius); font-size:17px; font-weight:600; }
.onsite-banner .icon { font-size:24px; }
.onsite-banner b { font-family:var(--font-display); font-size:24px; font-variant-numeric:tabular-nums; }
.reset-all { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:14px; height:48px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--fg-2); border-radius:var(--radius-pill); font-weight:600; font-size:15px; transition:.15s; }
.reset-all:hover { border-color:var(--danger); color:var(--danger); background:var(--danger-soft); }
.reset-all .icon { font-size:20px; }

/* ════════ 自訂確認彈窗 ════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:1500;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(20,32,26,.46); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
}
.modal-overlay.is-open { opacity:1; }
.modal {
  width:100%; max-width:380px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:28px 26px 22px; text-align:center;
  transform:scale(.92) translateY(10px); transition:transform .26s cubic-bezier(.2,.9,.3,1.25);
}
.modal-overlay.is-open .modal { transform:none; }
.modal-icon { width:58px; height:58px; margin:0 auto 14px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-strong); }
.modal-icon .icon { font-size:31px; }
.modal-icon.is-danger { background:var(--danger-soft); color:var(--danger); }
.modal-icon.is-warn { background:var(--warn-soft); color:var(--warn); }
.modal-title { font-family:var(--font-display); font-size:20px; font-weight:800; }
.modal-message { margin-top:8px; font-size:15px; color:var(--fg-2); line-height:1.6; }
.modal-message b { color:var(--fg); }
.modal-actions { display:flex; gap:10px; margin-top:24px; }
.modal-btn { flex:1; height:50px; border:none; border-radius:var(--radius-pill); font-family:var(--font-display); font-size:15.5px; font-weight:700; transition:.15s; }
.modal-btn:active { transform:translateY(1px); }
.modal-cancel { background:var(--surface-3); color:var(--fg-2); }
.modal-cancel:hover { background:var(--border); }
.modal-confirm { background:var(--accent); color:var(--on-accent); }
.modal-confirm:hover { background:var(--accent-strong); }
.modal-confirm.is-danger { background:var(--danger); }
.modal-confirm.is-danger:hover { filter:brightness(.93); }

/* ════════ Toast ════════ */
.toast {
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  z-index:1200; display:flex; align-items:center; gap:9px; max-width:90vw;
  padding:13px 20px; background:var(--fg); color:var(--bg); border-radius:var(--radius-pill);
  font-size:15px; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.toast.is-show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast .icon { font-size:20px; color:var(--accent); }
.toast.toast-warn .icon { color:var(--warn); }

/* ════════ 動畫 ════════ */
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }
@keyframes bump { 0%{transform:scale(1)} 35%{transform:scale(1.04)} 100%{transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important;} }

/* ════════ RWD ════════ */
@media (max-width:900px) {
  .hamburger { display:inline-flex; }
  .clock { display:none; }
  .user-chip { display:none; }
  .topbar .logout-btn { display:none; }
  .sidebar-user { display:flex; }
  .sidebar {
    position:fixed; top:var(--bars); left:0; height:calc(100dvh - var(--bars)); width:270px; max-width:82vw; z-index:90;
    transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,.1,.2,1);
    background:var(--surface); border-right:1px solid var(--border); box-shadow:var(--shadow-lg);
    padding-top:18px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .sidebar { transform:translateX(0); }
  .scrim {
    display:block; position:fixed; top:var(--bars); left:0; right:0; bottom:0; z-index:80;
    background:rgba(10,15,18,.42); opacity:0; pointer-events:none; transition:opacity .28s ease;
  }
  body.nav-open .scrim { opacity:1; pointer-events:auto; }
}
@media (max-width:560px) {
  :root { --topbar-h:58px; }
  .topbar { padding:0 12px; gap:8px; }
  .brand-name { font-size:14px; max-width:46vw; }
  .logout-text { display:none; }
  .logout-btn { padding:0 11px; }
  .content { padding:18px 14px 32px; }
  .card { padding:18px 15px; border-radius:var(--radius); }
  .day-row { flex-direction:column; gap:12px; }
  .day-head { width:100%; padding-top:0; }
  .day-state { margin-left:auto; }
  .tr-label { width:100%; }
  .time-range input[type="time"] { flex:1; }
  .closure-reason { width:100%; flex-basis:100%; }
  .stat-num { font-size:30px; }
  .onsite-pill { padding:0 9px; }
}
@media (max-width:380px) {
  .manual-grid { grid-template-columns:1fr; }
}