/* ═══════════════════════════════════════════════════
   SWT HR — 微光智能 (1b) 主題覆蓋層
   載入順序：index.html inline style → swt-tokens.css → 本檔
   原則：不動 HTML 結構與 JS，僅以 CSS 覆蓋重新映射視覺。
   ═══════════════════════════════════════════════════ */

:root{
  --bg:var(--swt-bg-flat);
  --card:var(--swt-surface-solid);
  --card-soft:#F7F6FD;
  --text:var(--swt-text);
  --muted:var(--swt-text-muted);
  --line:var(--swt-border);
  --line-soft:#ECEAF6;
  --primary:var(--swt-primary);
  --primary-soft:var(--swt-pending-bg);
  --accent:var(--swt-accent-ai);
  --accent-soft:var(--swt-success-bg);
  --blue:var(--swt-pending);
  --blue-soft:var(--swt-pending-bg);
  --green:var(--swt-success);
  --green-soft:var(--swt-success-bg);
  --amber:var(--swt-warning);
  --amber-soft:var(--swt-warning-bg);
  --red:var(--swt-danger);
  --red-soft:var(--swt-danger-bg);
  --nav:#5B49CC;
  --nav-soft:var(--swt-pending-bg);
  --shadow:var(--swt-shadow-card);
  --shadow-soft:0 4px 14px rgba(109,90,230,.06);
  --radius:var(--swt-radius-lg);
}

html,body{font-family:var(--swt-font-body)}
body.authed{background:var(--swt-bg)}
h1,h2,h3,h4,.money,.money-lg,.kpi strong,.balance-card .value,
.pay-final-item strong,.pay-side-total{font-family:var(--swt-font-display)}

/* ── Sidebar：深夜藍 → 玻璃淺紫 ── */
.sidebar{
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--swt-blur-glass);
  -webkit-backdrop-filter:var(--swt-blur-glass);
  border-right:1px solid var(--swt-border);
  color:var(--swt-text-muted);
}
.sidebar::after{background:radial-gradient(circle,rgba(109,90,230,.12),transparent 70%)}
.brand p{color:var(--swt-text-faint)}
.nav-label{color:var(--swt-text-faint)}
.nav-btn{
  border-radius:var(--swt-radius-md);min-height:42px;font-weight:500;
  color:var(--swt-text-muted);
  transition:background var(--swt-duration) var(--swt-ease),color var(--swt-duration) var(--swt-ease);
}
.nav-btn:hover{background:rgba(109,90,230,.06);color:var(--swt-primary-hover);transform:none}
.nav-btn.active{background:var(--swt-pending-bg);color:var(--swt-primary-hover);font-weight:600;transform:none}

/* ── Topbar / 標題 ── */
.title-wrap h2{font-size:26px;letter-spacing:0}
.title-wrap p{font-size:13px}

/* ── 按鈕 ── */
.btn{border-radius:var(--swt-radius-md);min-height:40px;font-weight:500;
  transition:box-shadow var(--swt-duration) var(--swt-ease),transform var(--swt-duration) var(--swt-ease),
    border-color var(--swt-duration) var(--swt-ease),background var(--swt-duration) var(--swt-ease)}
.btn-primary{background:var(--swt-gradient-primary);color:#fff;box-shadow:var(--swt-shadow-btn)}
.btn-primary:hover{box-shadow:var(--swt-shadow-btn-hover)}
.btn-soft{background:var(--swt-pending-bg);color:var(--swt-pending)}
.btn-ghost{background:var(--swt-surface);backdrop-filter:var(--swt-blur-glass);border:1px solid var(--swt-border-input);color:var(--swt-text)}
.btn-ghost:hover{border-color:var(--swt-primary)}
.btn-danger{background:var(--swt-danger-bg);color:var(--swt-danger)}
.btn:disabled{background:var(--swt-disabled-bg);color:var(--swt-disabled-text);box-shadow:none;cursor:not-allowed}

/* ── Chips / Badges：三件組（底＋字＋框）── */
.chip{font-weight:500;padding:3px 10px;font-size:12px;border:1px solid transparent}
.chip.green{background:var(--swt-success-bg);color:var(--swt-success);border-color:var(--swt-success-border)}
.chip.blue{background:var(--swt-pending-bg);color:var(--swt-pending);border-color:var(--swt-pending-border)}
.chip.red{background:var(--swt-danger-bg);color:var(--swt-danger);border-color:var(--swt-danger-border)}
.chip.amber{background:var(--swt-warning-bg);color:var(--swt-warning);border-color:rgba(245,158,11,.35)}

/* ── 卡片（玻璃）── */
.card{
  background:var(--swt-surface);
  border:1px solid var(--swt-border);
  border-radius:var(--swt-radius-lg);
  box-shadow:var(--swt-shadow-card);
  backdrop-filter:var(--swt-blur-glass);
  -webkit-backdrop-filter:var(--swt-blur-glass);
}
.card-head h3{font-size:16px}
.kpi::after{background:radial-gradient(circle,rgba(109,90,230,.10),transparent 70%)}
.kpi strong{font-size:26px}

/* ── Hero banner：深藍金 → 紫漸層 ── */
.hero-banner{
  border-radius:var(--swt-radius-xl);color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 40%),var(--swt-gradient-primary);
  box-shadow:var(--swt-shadow-card-lg);
}
.hero-banner::after{background:radial-gradient(circle,rgba(255,255,255,.20),transparent 70%)}
.hero-banner h3{font-size:20px}
.hero-banner p{color:rgba(255,255,255,.82)}

/* ── 表格 ── */
.table th{background:transparent;color:var(--swt-text-faint);letter-spacing:.06em}
.table th,.table td{border-bottom:1px solid var(--swt-border)}
.table tbody tr:hover{background:rgba(109,90,230,.04)}

/* ── 表單 ── */
.field label{font-weight:500;font-size:13px;color:var(--swt-text-muted);letter-spacing:0}
.field input,.field select,.field textarea,.line-editor input{
  border:1px solid var(--swt-border-input);border-radius:var(--swt-radius-md);background:#fff;
  transition:border-color var(--swt-duration) var(--swt-ease),box-shadow var(--swt-duration) var(--swt-ease);
}
.field input:focus,.field select:focus,.field textarea:focus,.line-editor input:focus,
.rich-area:focus{outline:none;border-color:var(--swt-primary);box-shadow:var(--swt-focus-ring)}

/* ── Stepper（績效/流程）：完成=teal、目前=紫漸層 glow ── */
.step.done .step-dot{background:var(--swt-accent-ai);color:#fff}
.step.done .step-label{color:var(--swt-accent-ai-deep)}
.step.current .step-dot{background:var(--swt-gradient-primary);color:#fff;box-shadow:0 0 0 4px rgba(109,90,230,.18)}

/* ── 薪資 ── */
.pay-final{background:var(--swt-gradient-primary)}
.pay-final-item span{color:rgba(255,255,255,.65)}
.pay-final-net{border-left-color:rgba(255,255,255,.25)}
.pay-final-net span{color:rgba(255,255,255,.75)}
.pay-final-net strong{color:#7FF0DF}
.pay-side--earn{border-top-color:var(--swt-accent-ai)}
.pay-side--earn .pay-side-total{color:var(--swt-accent-ai-deep)}
.pay-chip:hover{border-color:var(--swt-primary);background:var(--swt-pending-bg)}

/* ── Modal / Toast ── */
.modal{border-radius:var(--swt-radius-xl);box-shadow:var(--swt-shadow-card-lg)}
.modal-backdrop{background:rgba(27,24,48,.45)}
.close{background:var(--swt-pending-bg);color:var(--swt-primary-hover)}
.toast{
  background:#fff;color:var(--swt-text);border:1px solid var(--swt-border);
  box-shadow:var(--swt-shadow-card-lg);border-left:3px solid var(--swt-primary);
  border-radius:var(--swt-radius-md);
}

/* ── 其它面板 ── */
.approval-panel{background:var(--swt-surface);border-color:var(--swt-border);border-radius:var(--swt-radius-lg)}
.balance-card{border-radius:var(--swt-radius-lg);border-color:var(--swt-border);box-shadow:var(--swt-shadow-card)}
.feature-pill{border-radius:var(--swt-radius-lg);border-color:var(--swt-border);background:var(--swt-surface)}
.total-row.grand{border-top-color:var(--swt-primary)}
.rich-toolbar{background:#F7F6FD;border-color:var(--swt-border-input)}
.rich-area{border-color:var(--swt-border-input)}

/* AI 相關元素 */
.ai-hint,.ai-text{color:var(--swt-accent-ai-deep)}
.ai-hint::before,.ai-text::before{content:"✦ "}

/* ── 登入頁背景：漂浮光球動畫（取自 modern-gradient-login-form 套件）──
   只換 #loginOverlay 的底色跟背景層，login-shell 卡片本身（雙欄白/深藍設計）不動。 */
.bg-shapes{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-shapes .shape{position:absolute;background:rgba(255,255,255,.15);border-radius:50%;
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:swt-shape-float 15s infinite ease-in-out}
.bg-shapes .shape:nth-child(1){width:80px;height:80px;top:10%;left:8%;animation-duration:12s}
.bg-shapes .shape:nth-child(2){width:130px;height:130px;top:68%;left:82%;animation-duration:18s;animation-delay:2s}
.bg-shapes .shape:nth-child(3){width:60px;height:60px;top:38%;left:4%;animation-duration:10s;animation-delay:4s}
.bg-shapes .shape:nth-child(4){width:100px;height:100px;top:18%;left:86%;animation-duration:14s;animation-delay:1s}
.bg-shapes .shape:nth-child(5){width:90px;height:90px;top:62%;left:14%;animation-duration:16s;animation-delay:3s}
.bg-shapes .shape:nth-child(6){width:70px;height:70px;top:28%;left:50%;animation-duration:11s;animation-delay:5s}
.bg-shapes .shape:nth-child(7){width:115px;height:115px;top:80%;left:60%;animation-duration:13s;animation-delay:2.5s}
.bg-shapes .shape:nth-child(8){width:50px;height:50px;top:14%;left:70%;animation-duration:9s;animation-delay:4.5s}
@keyframes swt-shape-float{
  0%,100%{transform:translate(0,0) rotate(0deg) scale(1);opacity:.3}
  25%{transform:translate(30px,-40px) rotate(90deg) scale(1.1);opacity:.5}
  50%{transform:translate(-20px,-60px) rotate(180deg) scale(.9);opacity:.7}
  75%{transform:translate(-40px,-30px) rotate(270deg) scale(1.05);opacity:.4}
}
#loginOverlay .login-shell{position:relative;z-index:1}