/* iOS 操作感＋玻璃擬態（疊在 admin.css 之上）
   玻璃要有東西透過來才看得出來，所以底層是一片固定的柔光，面板都是半透明的白。
   模糊（backdrop-filter）只用在「內容會從底下捲過去」的東西：側欄、置頂提示條、選單、對話框、提示；
   一般卡片只用半透明，不然列表一多會卡。
   帳號區分照舊：測試是暖黃、正式是綠，連底層的柔光也跟著變色。 */
:root {
  --r-panel: 28px;
  --r-block: 20px;
  --r-control: 12px;
  --glass: rgba(255, 255, 255, .64);
  --glass-card: rgba(255, 255, 255, .66);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge: rgba(255, 255, 255, .9);
  --hair: rgba(15, 27, 45, .08);
  --fill: rgba(118, 124, 140, .12);
  --blur: blur(28px) saturate(180%);
  --lift: 0 0 0 .5px var(--hair), 0 1px 1px rgba(15, 27, 45, .03), 0 12px 32px -16px rgba(15, 27, 45, .2);
  --lift-float: 0 0 0 .5px var(--hair), 0 2px 6px rgba(15, 27, 45, .05), 0 24px 60px -20px rgba(15, 27, 45, .3);
  --spring: cubic-bezier(.32, .72, 0, 1);
  --wash-a: #BFE3F5;
  --wash-b: #DCD2F7;
  --wash-c: #C6EED7;
}
body.acct-test { --wash-a: #FCEBC4; --wash-b: #F3E6DA; --wash-c: #EEEEDC; }
body.acct-prod { --wash-a: #B4E8C6; --wash-b: #C6E9F2; --wash-c: #D6F0B8; }

/* ---------- 底層柔光 ---------- */
body { background: #F1F4F8; }
.shell::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 52vh at 4% 0%, var(--wash-a), transparent 70%),
    radial-gradient(52vw 46vh at 100% 8%, var(--wash-b), transparent 70%),
    radial-gradient(58vw 54vh at 78% 100%, var(--wash-c), transparent 70%),
    #F1F4F8;
}
* { scrollbar-width: thin; scrollbar-color: rgba(15, 27, 45, .22) transparent; }

/* ---------- 側欄：浮起來的玻璃 ---------- */
.rail {
  top: 12px; height: calc(100vh - 24px); margin: 12px 0 12px 12px; border: 1px solid var(--glass-edge);
  border-radius: var(--r-panel); background: var(--glass); box-shadow: var(--lift);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
body.acct-test .rail, body.acct-prod .rail { top: 18px; height: calc(100vh - 30px); margin-top: 18px; }
body.acct-test .rail { background: rgba(255, 252, 242, .72); border-color: rgba(250, 236, 200, .95); }
body.acct-prod .rail { background: rgba(232, 247, 238, .7); border-color: rgba(196, 235, 209, .95); }
.rail nav { overflow-y: auto; }
.rail nav a { transition: background .2s, transform .2s var(--spring); }
.rail nav a:hover { background: rgba(255, 255, 255, .5); }
.rail nav a:active { transform: scale(.97); }
.rail nav a.active { background: #fff; box-shadow: 0 0 0 .5px var(--hair), 0 4px 14px -6px rgba(15, 27, 45, .22); }
.rail nav a.active::before { display: none; }
.rail-foot { border-top-color: var(--hair); }
.acct-btn { border-radius: 16px; transition: transform .2s var(--spring); }
.acct-btn:active { transform: scale(.98); }

/* ---------- 大標題 ---------- */
.page-head h1 { font-size: 34px; letter-spacing: -.02em; }

/* ---------- 面板與卡片：半透明白＋亮邊 ---------- */
.block, .step, .tpl-card, .rule-row, .kpi, .bc-kpis > div, .acct-card, .menu-card, .msg-card, .fl-side, .flow-canvas, .auth-demo, .xfer-item {
  background: var(--glass-card); border-color: var(--glass-edge); box-shadow: var(--lift);
}
.signal, .hc-hero {
  border-color: var(--glass-edge);
  background: radial-gradient(circle at 1px 1px, rgba(15, 27, 45, .09) 1px, transparent 0) 0 0 / 22px 22px, var(--glass-card);
}
.empty { background: rgba(255, 255, 255, .45); border-radius: var(--r-panel); }
.rule-row.off { background: rgba(255, 255, 255, .3); box-shadow: none; }
.tpl-card, .rule-row, .menu-card { transition: transform .25s var(--spring), box-shadow .25s, background .2s; }
.tpl-card:hover, .rule-row:hover, .menu-card:hover { background: rgba(255, 255, 255, .92); border-color: #fff; box-shadow: var(--lift-float); }
.tpl-card:active, .rule-row:active { transform: scale(.985); }
.cust-row:hover, .bc-row:hover { background: rgba(255, 255, 255, .6); }
.cust-row, .bc-row, .kv, .tbl td, .tbl th, .hc-row { border-color: var(--hair); }
.chip, .tag-rank .bar, .meter { background: var(--fill); border-color: transparent; }
.tp-chips .chip { background: #fff; }
.app-foot { border-top-color: var(--hair); }

/* ---------- 按鈕：膠囊、按下去會縮 ---------- */
.btn { border-radius: 999px; transition: transform .2s var(--spring), background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(#22344F, var(--ink)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px -8px rgba(15, 27, 45, .6); }
.btn-ghost, .rail-toggle { background: rgba(255, 255, 255, .7); border-color: var(--hair); box-shadow: 0 1px 2px rgba(15, 27, 45, .05); }
.btn-ghost:hover { background: #fff; border-color: var(--hair); }
.btn-icon { border-radius: 50%; }
.btn-icon:hover { background: var(--fill); }
.btn-icon:active { transform: scale(.88); }
.input-group > .btn { border-radius: var(--r-control); }

/* ---------- 輸入框 ---------- */
.form-control, .form-select, .tagpick { background-color: rgba(255, 255, 255, .78); border-color: rgba(15, 27, 45, .13); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.form-control:focus, .form-select:focus { background-color: #fff; box-shadow: 0 0 0 4px rgba(21, 151, 192, .18); }

/* ---------- 分段切換：灰色軌道＋白色滑塊 ---------- */
.seg { border: 0; background: var(--fill); padding: 3px; gap: 2px; border-radius: 13px; overflow: visible; }
.seg > a { border: 0; border-radius: 10px; padding: 6px 14px; color: var(--text); transition: background .2s, box-shadow .2s; text-align: center; }
.seg.w-100 > a { flex: 1; }
.seg > a.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 .5px var(--hair), 0 2px 6px rgba(15, 27, 45, .14); }
.filter a { background: rgba(255, 255, 255, .7); border-color: var(--hair); transition: transform .2s var(--spring); }
.filter a:active { transform: scale(.95); }
.subnav { border-bottom-color: var(--hair); }

/* ---------- 開關 ---------- */
.switch { width: 48px; height: 28px; }
.switch span { background: rgba(118, 124, 140, .28); transition: background .25s; }
.switch span::after { left: 2px; top: 2px; width: 24px; height: 24px; box-shadow: 0 2px 5px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .05); transition: transform .3s var(--spring); }
.switch input:checked + span::after { transform: translateX(20px); }
.form-switch .form-check-input { width: 2.6em; height: 1.5em; border: 0; background-color: rgba(118, 124, 140, .28); cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--line-green); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 4px rgba(6, 199, 85, .18); }

/* ---------- 置頂的帳號提示條：有顏色的玻璃 ---------- */
.test-bar, .prod-bar, .tab-stale { border-radius: 18px; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.test-bar { background: rgba(255, 246, 220, .8); border-color: rgba(224, 168, 0, .35); box-shadow: var(--lift); }
.prod-bar { background: rgba(214, 243, 225, .78); border-color: rgba(89, 194, 126, .6); }
.tab-stale { background: rgba(253, 228, 228, .86); }

/* ---------- 選單：玻璃浮層 ---------- */
.dropdown-menu, .tp-menu {
  border: 1px solid var(--glass-edge); border-radius: 16px; padding: 6px; background: var(--glass-strong);
  box-shadow: var(--lift-float); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.dropdown-menu.show { animation: pop-in .28s var(--spring); }
.dropdown-item { border-radius: 10px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--fill); }
.dropdown-divider { border-top-color: var(--hair); margin: 6px 4px; }
@keyframes pop-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }

/* ---------- 對話框：玻璃卡片，手機上從底部滑上來 ---------- */
.modal-backdrop { --bs-backdrop-bg: #0F1B2D; --bs-backdrop-opacity: .3; }
.modal { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal-content {
  border: 1px solid var(--glass-edge); border-radius: var(--r-panel); background: rgba(255, 255, 255, .9);
  box-shadow: var(--lift-float); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
}
.modal-header, .modal-footer { border-color: var(--hair); }
.modal.fade .modal-dialog { transform: translateY(18px) scale(.95); transition: transform .42s var(--spring); }
.modal.show .modal-dialog { transform: none; }
.switch-splash { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); background: rgba(15, 27, 45, .18); }
.switch-splash .card-in { border-radius: var(--r-panel); background: rgba(255, 255, 255, .92); animation: splash-in .5s var(--spring); }

/* ---------- 提示、勾選工具列 ---------- */
.toast-x { border-radius: 18px; background: rgba(15, 27, 45, .8); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift-float); animation: toast-in .4s var(--spring); }
.toast-x.err { background: rgba(255, 255, 255, .9); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.pick-bar { border-radius: 22px; border-color: var(--glass-edge); background: var(--glass-strong); box-shadow: var(--lift-float); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.savebar { background: none; }
.savebar::before { content: ''; position: absolute; inset: 0 -12px; z-index: -1; -webkit-mask: linear-gradient(transparent, #000 45%); mask: linear-gradient(transparent, #000 45%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.fl-tools { border-radius: 14px; border-color: var(--glass-edge); background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift); }

/* ---------- 手機：底部分頁列，側欄變成「更多」 ---------- */
.tabbar, .rail-scrim { display: none; }
@media (max-width: 991px) {
  .rail-toggle { display: none; }
  .rail { left: -290px; top: auto !important; bottom: 12px; margin: 0 !important; height: auto !important; max-height: calc(100dvh - 40px); width: 264px; z-index: 1035; transition: left .45s var(--spring); background: rgba(255, 255, 255, .82); }
  .rail.open { left: 12px; box-shadow: var(--lift-float); }
  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 1034; background: rgba(15, 27, 45, .22); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .rail.open ~ .rail-scrim { opacity: 1; pointer-events: auto; }
  .main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .tabbar {
    position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 1030;
    display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 26px;
    border: 1px solid var(--glass-edge); background: var(--glass); box-shadow: var(--lift-float);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: 0; background: none;
    border-radius: 20px; font: inherit; font-size: 11px; color: var(--text-2); text-decoration: none; transition: transform .2s var(--spring), background .2s;
  }
  .tabbar i { font-size: 21px; line-height: 1.2; }
  .tabbar a:active, .tabbar button:active { transform: scale(.9); }
  .tabbar .active { color: var(--ink); font-weight: 600; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 .5px var(--hair), 0 4px 12px -6px rgba(15, 27, 45, .25); }
  .tabbar .active i { color: var(--data); }
  #toasts { right: 12px; left: 12px; bottom: calc(92px + env(safe-area-inset-bottom)); align-items: center; }
  .pick-bar { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .savebar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: 28px; }
}
@media (max-width: 640px) {
  .modal-dialog { margin: 0; min-height: 100%; display: flex; align-items: flex-end; max-width: none; }
  .modal-dialog-scrollable { height: 100%; }
  .modal-content { border-radius: 28px 28px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); max-height: 92dvh; overflow: auto; }
  .modal-content::before { content: ''; flex-shrink: 0; width: 38px; height: 5px; border-radius: 3px; margin: 8px auto 0; background: rgba(15, 27, 45, .2); }
  .modal.fade .modal-dialog { transform: translateY(100%); }
  .modal.show .modal-dialog { transform: none; }
}

/* 不要動態、不要透明的人，照他的設定 */
@media (prefers-reduced-motion: reduce) {
  .btn, .rail nav a, .tpl-card, .rule-row, .acct-btn, .tabbar a, .tabbar button { transition: none; }
  .btn:active, .tpl-card:active, .rule-row:active, .rail nav a:active { transform: none; }
  .dropdown-menu.show, .toast-x, .switch-splash .card-in { animation: none; }
  .modal.fade .modal-dialog, .rail { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #fff; --glass-card: #fff; --glass-strong: #fff; }
  .modal-content, .toast-x.err { background: #fff; }
  .toast-x { background: var(--ink); }
}

/* ---------- 登入：柔光上的一張玻璃卡 ---------- */
.login {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 16px;
  background:
    radial-gradient(58vw 56vh at 8% 4%, #EADCC8, transparent 70%),
    radial-gradient(50vw 50vh at 96% 12%, #C9E6F4, transparent 70%),
    radial-gradient(60vw 56vh at 70% 100%, #CDEFDB, transparent 70%),
    #F1F4F8;
}
.login-card {
  width: 100%; max-width: 400px; padding: 40px 36px 36px; border-radius: 32px; text-align: center;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--lift-float);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  animation: login-in .7s var(--spring) both;
}
.login-logo { height: 104px; width: auto; margin-bottom: 18px; }
.login-card h1 { font-size: 22px; font-weight: 700; margin: 0 0 26px; letter-spacing: .02em; }
.login-card form > p { color: var(--text-2); font-size: 14px; margin: 0 0 26px; }
.login-card .form-label { display: block; text-align: left; font-size: 13px; color: var(--text-2); margin-bottom: 6px; padding-left: 4px; }
.login-card .form-control { border-radius: 16px; background-color: rgba(255, 255, 255, .7); font-size: 16px; padding: 12px 16px; }
.login-card .btn { padding: 13px 20px; }
.login-card .alert { text-align: left; font-size: 14px; }
.login-foot { margin: 0; font-size: 12px; color: var(--text-3); }
@keyframes login-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (max-width: 480px) { .login-card { padding: 32px 22px 26px; border-radius: 28px; } .login-logo { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

/* ---------- 換頁動畫（View Transitions，瀏覽器不支援就照舊直接換頁） ----------
   側欄不動，目前位置的白色膠囊從舊項目滑到新項目，右邊內容淡入並稍微上移 */
@view-transition { navigation: auto; }
.rail { view-transition-name: rail; }
/* 不要給 .main 命名：命名的元素會自成一層，裡面的對話框會被壓在 body 的暗色遮罩底下、整頁點不動 */
.rail nav { position: relative; z-index: 1; view-transition-name: rail-nav; }
.nav-pill { position: absolute; left: 12px; right: 12px; border-radius: var(--r-control); background: #fff; pointer-events: none;
  box-shadow: 0 0 0 .5px var(--hair), 0 4px 14px -6px rgba(15, 27, 45, .22); view-transition-name: nav-pill; }
.nav-pill[hidden] { display: none; }
.rail:has(.nav-pill:not([hidden])) nav a.active { background: transparent; box-shadow: none; }
.tabbar .active { view-transition-name: tab-pill; }
::view-transition-group(nav-pill), ::view-transition-group(tab-pill) { animation-duration: .45s; animation-timing-function: var(--spring); }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .32s ease-out .06s both; }
::view-transition-group(root), ::view-transition-group(rail), ::view-transition-group(rail-nav) { animation: none; }
::view-transition-old(rail-nav) { display: none; }
::view-transition-new(rail-nav) { animation: none; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
/* 測試帳號的施工條細一點、顏色收一點；帳號按鈕的黃也淡一些 */
body.acct-test::before { height: 4px; background: repeating-linear-gradient(-45deg, #F2B33D 0 12px, #3A4558 12px 24px); opacity: .85; }
.acct-btn.test { background: rgba(255, 244, 214, .9); border-color: rgba(224, 168, 0, .45); box-shadow: inset 3px 0 0 #F2B33D; }
/* 登入頁的流動光霧（login-mist.js）：蓋在 CSS 漸層上面，淡入；不支援 WebGL 時就只剩 CSS 漸層 */
.login { position: relative; isolation: isolate; }
.login-mist { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.2s ease; }
.login-mist.on { opacity: 1; }
/* 登入第二步：輸入 email 收到的驗證碼 */
.verify-to { color: var(--text-2); font-size: 14px; margin: -14px 0 22px; }
.verify-to b { color: var(--text); font-weight: 600; }
.code-input { text-align: center; font-size: 30px; letter-spacing: .45em; padding-left: .45em; font-weight: 600; }
.verify-links { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; }
.verify-links .btn-link { padding: 0; font-size: 14px; color: var(--data); text-decoration: none; }
.verify-links a { color: var(--text-2); text-decoration: none; }
.turnstile-box { margin: -6px 0 18px; min-height: 65px; }