/* ══════════════════════════════════════════════════════════════
   衡序 OS — WebGL Visualist CSS Layer
   Noise Texture · Liquid Wipe · Global Visual Polish
   手機 + 桌面雙版本
══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. WebGL CANVAS — 全域背景層
───────────────────────────────────────────── */
.webgl-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* ─────────────────────────────────────────────
   2. GLOBAL BODY — WebGL 取代靜態背景
───────────────────────────────────────────── */
body {
  background: transparent !important;
}
/* Fallback for no-WebGL */
body:not(:has(.webgl-canvas)) {
  background: var(--bg) !important;
}

/* ─────────────────────────────────────────────
   3. TOPBAR — 進階磨砂透明
───────────────────────────────────────────── */
.topbar {
  background: rgba(245, 245, 247, 0.6) !important;
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}
[data-theme="dark"] .topbar {
  background: rgba(8, 11, 16, 0.55) !important;
  border-bottom-color: rgba(255,255,255,0.04) !important;
}

/* ─────────────────────────────────────────────
   4. BOTTOM NAV (MOBILE) — 磨砂透明
───────────────────────────────────────────── */
.bnav {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
}
[data-theme="dark"] .bnav {
  background: rgba(15, 17, 23, 0.6) !important;
  border-top-color: rgba(255,255,255,0.04) !important;
}

/* ─────────────────────────────────────────────
   5. CARDS — 統一磨砂玻璃質感 (手機+桌面)
───────────────────────────────────────────── */
.card,
.lcard {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
[data-theme="dark"] .card,
[data-theme="dark"] .lcard {
  background: rgba(26, 29, 39, 0.55) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.2),
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

/* Project cards */
.pdc {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.5) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
[data-theme="dark"] .pdc {
  background: rgba(26, 29, 39, 0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Progress bars on dashboard */
.pr {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  transition: all 0.25s ease !important;
}
[data-theme="dark"] .pr {
  background: rgba(26, 29, 39, 0.45) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Quick-add pills */
.qab {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  transition: all 0.2s ease !important;
}
[data-theme="dark"] .qab {
  background: rgba(26, 29, 39, 0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Stat cards */
.stc {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  transition: all 0.25s ease !important;
}
[data-theme="dark"] .stc {
  background: rgba(26, 29, 39, 0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* Settings items */
.sc {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .sc {
  background: rgba(26, 29, 39, 0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ─────────────────────────────────────────────
   6. HERO KPI CARD — 噪點質感加強
───────────────────────────────────────────── */
.pc {
  position: relative;
  background:
    linear-gradient(135deg, #064E3B 0%, #047857 50%, #065f46 100%) !important;
  box-shadow:
    0 8px 32px rgba(6, 78, 59, 0.3),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.12) !important;
}
/* SVG noise texture overlay */
.pc::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E") !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─────────────────────────────────────────────
   7. MODAL — 深度磨砂效果
───────────────────────────────────────────── */
.mo {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(12px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
}
.mos {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(32px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.6) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
[data-theme="dark"] .mo {
  background: rgba(0, 0, 0, 0.35) !important;
}
[data-theme="dark"] .mos {
  background: rgba(26, 29, 39, 0.75) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ─────────────────────────────────────────────
   8. FORM INPUTS — 磨砂
───────────────────────────────────────────── */
.fi {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: all 0.2s ease !important;
}
.fi:focus {
  border-color: var(--em-400) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
[data-theme="dark"] .fi {
  background: rgba(26, 29, 39, 0.5) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
[data-theme="dark"] .fi:focus {
  background: rgba(26, 29, 39, 0.7) !important;
}

/* ─────────────────────────────────────────────
   9. PAGE TRANSITION — CSS 層配合 WebGL
───────────────────────────────────────────── */
.page {
  animation: wgl-page-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes wgl-page-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ─────────────────────────────────────────────
   10. TOAST — 磨砂飄浮
───────────────────────────────────────────── */
.toast-in {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
}
[data-theme="dark"] .toast-in {
  background: rgba(26, 29, 39, 0.75) !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
}

/* ─────────────────────────────────────────────
   11. ONBOARDING — 透明化
───────────────────────────────────────────── */
.ob {
  background: rgba(6, 78, 59, 0.92) !important;
  backdrop-filter: blur(40px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(40px) saturate(1.5) !important;
}

/* ─────────────────────────────────────────────
   12. SCAN ZONE — 通透感
───────────────────────────────────────────── */
.sz {
  border-color: rgba(0,0,0,0.1) !important;
  background: rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}
[data-theme="dark"] .sz {
  border-color: rgba(255,255,255,0.08) !important;
  background: rgba(26,29,39,0.3) !important;
}

/* ─────────────────────────────────────────────
   13. CHIPS — 磨砂小元件
───────────────────────────────────────────── */
.chip {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  transition: all 0.2s ease !important;
}
.chip.sel {
  background: rgba(209,250,229,0.6) !important;
  border-color: rgba(16,185,129,0.2) !important;
}
[data-theme="dark"] .chip {
  background: rgba(42,45,55,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ─────────────────────────────────────────────
   14. AI CARDS — 磨砂漸層
───────────────────────────────────────────── */
.ai-card {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(16,185,129,0.15) !important;
}
.ai-card-warn {
  border-color: rgba(239,68,68,0.15) !important;
}
[data-theme="dark"] .ai-card {
  background: rgba(26,29,39,0.4) !important;
  border-color: rgba(52,211,153,0.12) !important;
}

/* ─────────────────────────────────────────────
   15. CALENDAR — 磨砂日曆
───────────────────────────────────────────── */
.cal {
  background: rgba(255,255,255,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}
[data-theme="dark"] .cal {
  background: rgba(26,29,39,0.5) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ─────────────────────────────────────────────
   16. VOICE / AI OVERLAYS
───────────────────────────────────────────── */
.va-overlay {
  background: rgba(0,0,0,0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.va-panel {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
}
[data-theme="dark"] .va-panel {
  background: rgba(26,29,39,0.75) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.ai-hub-panel {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(28px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
}
[data-theme="dark"] .ai-hub-panel {
  background: rgba(26,29,39,0.75) !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* ─────────────────────────────────────────────
   17. MOBILE HOVER STATES
───────────────────────────────────────────── */
@media (hover: hover) {
  .card:hover,
  .lcard:hover {
    box-shadow:
      0 8px 24px rgba(0,0,0,0.06),
      0 0 0 1px rgba(16,185,129,0.06),
      inset 0 1px 0 rgba(255,255,255,0.7) !important;
    transform: translateY(-1px);
  }
  .pdc:hover {
    transform: translateY(-2px) !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,0.08),
      inset 0 1px 0 rgba(255,255,255,0.5) !important;
  }
  .pr:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
    border-color: rgba(16,185,129,0.15) !important;
  }
  .qab:hover {
    background: rgba(236,253,245,0.5) !important;
    border-color: rgba(16,185,129,0.15) !important;
    transform: translateY(-1px) !important;
  }
  [data-theme="dark"] .card:hover,
  [data-theme="dark"] .lcard:hover {
    box-shadow:
      0 8px 24px rgba(0,0,0,0.25),
      0 0 0 1px rgba(52,211,153,0.08),
      inset 0 1px 0 rgba(255,255,255,0.04) !important;
  }
}

/* ─────────────────────────────────────────────
   18. DESKTOP SIDEBAR — 深度磨砂
───────────────────────────────────────────── */
@media (min-width: 1024px) {
  .bnav {
    background: rgba(10, 12, 18, 0.88) !important;
    backdrop-filter: blur(40px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(40px) saturate(1.8) !important;
    border-right: 1px solid rgba(255,255,255,0.03) !important;
    border-top: none !important;
  }

  .topbar {
    background: rgba(245, 245, 247, 0.5) !important;
    backdrop-filter: blur(32px) saturate(1.8) !important;
    -webkit-backdrop-filter: blur(32px) saturate(1.8) !important;
  }
  [data-theme="dark"] .topbar {
    background: rgba(8, 11, 16, 0.5) !important;
  }

  /* Desktop card hover glow trail */
  .card:hover,
  .lcard:hover {
    box-shadow:
      0 12px 40px rgba(0,0,0,0.06),
      0 0 60px rgba(16,185,129,0.04),
      inset 0 1px 0 rgba(255,255,255,0.7) !important;
  }
}

/* ─────────────────────────────────────────────
   19. REDUCED MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page {
    animation: none !important;
  }
  .webgl-canvas {
    display: none !important;
  }
  body {
    background: var(--bg) !important;
  }
}