@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* ─────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────── */
:root {
  --bg: #faf9f8;
  --bg-deep: #f1efeb;
  --surface: rgba(255, 255, 255, 0.55); /* Enhanced Glassmorphism */
  --surface-solid: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.35);
  --ink: #1a1c1c;
  --ink-soft: #584144;
  --line: rgba(255, 255, 255, 0.8); /* Edge highlight for glass */
  --brand: #ff6a88;
  --brand-deep: #ad2c4d;
  --brand-soft: #ffd9dd;
  --brand-muted: #fff0f1;
  --danger: #ba1a1a;
  --warn: #d97706;
  --success: #059669;
  --focus-ring: rgba(255, 106, 136, 0.25);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-1: 0 24px 48px rgba(173, 44, 77, 0.05);
  --shadow-2: 0 12px 24px rgba(173, 44, 77, 0.03);
  --shadow-3: 0 4px 8px rgba(173, 44, 77, 0.02);
  --tr-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --content-max: 1560px;
}

/* ─────────────────────────────────────────
   SCROLLBAR (UX Enhancement)
───────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(173, 44, 77, 0.15);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(173, 44, 77, 0.3);
}

/* ─────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.95), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(255, 217, 221, 0.6), transparent 50%),
    linear-gradient(135deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────
   BACKGROUND DECORATION LAYERS
───────────────────────────────────────── */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg-layer-1 {
  background: radial-gradient(400px 300px at 85% 10%, rgba(255, 106, 136, 0.12), transparent 70%);
}

.bg-layer-2 {
  background: radial-gradient(350px 250px at 5% 85%, rgba(255, 154, 139, 0.12), transparent 70%);
}

/* ─────────────────────────────────────────
   APP SHELL
───────────────────────────────────────── */
.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: 80px 14px 80px;
  overflow-x: clip;
}

.app-shell.has-floating-top {
  padding-bottom: 118px;
}

/* ─────────────────────────────────────────
   TOPBAR
───────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  margin: -80px -14px 20px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(17, 35, 48, 0.06);
}

.brand-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.user-panel {
  display: grid;
  gap: 8px;
  justify-items: end;
  min-width: 0;
}

.eyebrow {
  margin: 0;
  font-size: 0.73rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-deep);
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

h1 {
  margin: 4px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 1.9vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.subhead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ─────────────────────────────────────────
   USER CHIP
───────────────────────────────────────── */
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(200, 220, 228, 0.9);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: var(--shadow-3);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.user-name {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* ─────────────────────────────────────────
   PANEL (login + app wrapper)
───────────────────────────────────────── */
.panel {
  border: 1px solid rgba(197, 213, 222, 0.9);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 250, 252, 0.98) 100%);
  box-shadow: var(--shadow-1);
  padding: 20px;
}

.panel-app {
  display: grid;
  gap: 20px;
}

.panel-login {
  max-width: 420px;
  margin: 60px auto 0;
}

.panel-login h2 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
}

/* ─────────────────────────────────────────
   HERO PANEL
───────────────────────────────────────── */
.hero-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  background:
    radial-gradient(280px 180px at 100% 0%, rgba(255, 106, 136, 0.15), transparent 68%),
    radial-gradient(260px 140px at 0% 100%, rgba(253, 152, 137, 0.10), transparent 70%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 245, 246, 0.45) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  gap: 14px;
}

.hero-kicker {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--brand-deep);
  font-weight: 700;
  font-family: 'Space Grotesk', sans-serif;
}

.hero-panel h2 {
  margin: 6px 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 1.7vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-desc {
  margin: 0;
  color: #3a5666;
  font-size: 0.93rem;
  line-height: 1.62;
  max-width: 60ch;
}

.hero-status-grid {
  display: grid;
  gap: 10px;
}

.hero-meta {
  display: grid;
  gap: 4px;
  padding: 10px 13px;
  border-radius: var(--radius-md);
  border: 1px solid #bcd5df;
  background: rgba(255, 255, 255, 0.85);
}

.meta-label {
  font-size: 0.73rem;
  color: #4d6877;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-meta strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  color: var(--ink);
}

/* ─────────────────────────────────────────
   TAB STRIP
───────────────────────────────────────── */
.tab-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 4px;
  padding: 6px;
  position: sticky;
  top: 58px;
  z-index: 30;
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overscroll-behavior-x: contain;
  box-shadow: var(--shadow-3);
}

.tab-btn {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-lg);
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--tr-fast);
  font-family: 'Space Grotesk', 'Inter', 'Noto Sans TC', sans-serif;
}

.tab-btn:hover {
  background: rgba(224, 242, 254, 0.6);
  color: var(--brand-deep);
  transform: translateY(-1px);
}

.tab-btn.active {
  border-color: rgba(14, 165, 233, 0.2);
  color: var(--brand-deep);
  background: rgba(224, 242, 254, 0.8);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────
   UTILITY ROW
───────────────────────────────────────── */
.utility-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 4px;
  flex-wrap: wrap;
  padding: 0 2px;
}

/* ─────────────────────────────────────────
   TAB CONTENT / DETAIL PAGE
───────────────────────────────────────── */
.tab-content {
  display: none;
}

.tab-content.active {
  display: grid;
  gap: 20px;
  animation: fadeIn 200ms ease;
}

.detail-page {
  display: grid;
  gap: 20px;
  animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────
   GRIDS
───────────────────────────────────────── */
.summary-grid,
.module-grid {
  display: grid;
  gap: 14px;
}

.stack-grid {
  display: grid;
  gap: 14px;
}

.cockpit-grid {
  display: grid;
  gap: 14px;
}

.overview-board-grid {
  display: grid;
  gap: 14px;
}

.overview-board-grid.readable-board {
  grid-template-columns: 1fr;
}

.stack-grid.flow-stack {
  grid-template-columns: 1fr;
}

.module-grid-embedded {
  grid-template-columns: 1fr;
}

.pro-metric-grid {
  display: grid;
  gap: 14px;
}

.compact-pro-grid {
  grid-template-columns: 1fr;
}

/* ─────────────────────────────────────────
   CARDS — SECTION-BLOCK, SUMMARY-CARD, MODULE-CARD
───────────────────────────────────────── */
.section-block,
.summary-card,
.module-card,
.list-item,
.desktop-table-wrap,
.card-form {
  border: 1px solid rgba(203, 213, 225, 0.5);
  border-radius: var(--radius-xl);
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-3);
  transition: box-shadow var(--tr-smooth), transform var(--tr-fast);
}

.section-block:hover,
.module-card:hover,
.list-item:hover {
  box-shadow: var(--shadow-2);
}

.section-block {
  position: relative;
  padding: 24px;
  overflow: clip;
}

.spotlight-block {
  background:
    radial-gradient(220px 130px at 100% 0%, rgba(255, 106, 136, 0.06), transparent 68%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 245, 246, 0.45) 100%);
}

/* top accent line */
.section-block::before,
.card-form::before,
.summary-card::before,
.module-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, rgba(230, 80, 110, 0.6), rgba(255, 154, 139, 0.28), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.section-block h4,
.summary-card h4,
.module-card h4 {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.04rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* SUMMARY CARD */
.summary-card {
  position: relative;
  padding: 16px;
  overflow: hidden;
}

.summary-card p {
  margin: 8px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.26rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.summary-card.warn::before {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.6), rgba(245, 158, 11, 0.32), rgba(255, 255, 255, 0));
}

.summary-card.success::before {
  background: linear-gradient(90deg, rgba(5, 150, 105, 0.6), rgba(16, 185, 129, 0.32), rgba(255, 255, 255, 0));
}

.summary-note {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.81rem;
  line-height: 1.62;
}

/* MODULE CARD */
.module-card {
  padding: 16px;
}

.module-card p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.62;
}

/* PRO METRIC */
.pro-metric-card {
  position: relative;
  border: 1px solid rgba(209, 223, 231, 0.9);
  border-radius: var(--radius-md);
  padding: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f4fafc 100%);
  box-shadow: var(--shadow-3);
  overflow: clip;
}

.pro-metric-eyebrow {
  margin: 0;
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.pro-metric-value {
  margin: 8px 0 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.46rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pro-metric-note {
  margin: 9px 0 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.58;
}

/* ROOT METRIC */
.root-metric-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, minmax(128px, 1fr)));
  gap: 8px;
  align-items: stretch;
}

.root-metric-card {
  min-width: 0;
  min-height: 0;
  padding: 12px 13px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(209, 223, 231, 0.9);
  background: linear-gradient(180deg, #fcfefe 0%, #f3f9fb 100%);
  display: grid;
  align-content: start;
  gap: 4px;
  box-shadow: var(--shadow-3);
}

.root-metric-card.warn {
  background: linear-gradient(180deg, #fff8f8 0%, #fff1f1 100%);
  border-color: rgba(240, 209, 209, 0.9);
}

.root-metric-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.2;
  white-space: nowrap;
}

.root-metric-value {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.22rem;
  line-height: 1.06;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  word-break: normal;
  overflow-wrap: normal;
}

.root-metric-note {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.28;
  color: var(--ink-soft);
}

/* ─────────────────────────────────────────
   CONTENT HEADER
───────────────────────────────────────── */
.content-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(206, 220, 228, 0.9);
}

.content-head h3 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.2rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.content-head-stacked {
  align-items: flex-start;
}

.content-head-stacked > div {
  display: grid;
  gap: 6px;
  max-width: 78ch;
}

.content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.content-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.content-subhead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.65;
}

/* ─────────────────────────────────────────
   SECTION TOGGLE (collapsible)
───────────────────────────────────────── */
.section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.section-toggle-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.25;
}

.section-toggle-caret {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(200, 218, 229, 0.9);
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #355563;
  background: var(--surface-soft);
  transition: transform 140ms ease;
  flex-shrink: 0;
}

.section-body {
  display: grid;
  gap: 10px;
}

.section-block.collapsed .section-body {
  display: none;
}

.section-block.collapsed .section-toggle-caret {
  transform: rotate(-90deg);
}

/* ─────────────────────────────────────────
   SECTION DIVIDER & MINI-HEAD
───────────────────────────────────────── */
.section-divider {
  height: 1px;
  margin: 14px 0;
  background: linear-gradient(90deg, rgba(160, 191, 203, 0.15), rgba(160, 191, 203, 0.8), rgba(160, 191, 203, 0.15));
}

.section-mini-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.section-mini-head h5 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #284756;
}

/* ─────────────────────────────────────────
   INSIGHT LIST
───────────────────────────────────────── */
.insight-list {
  display: grid;
  gap: 12px;
}

.insight-item {
  border: 1px solid rgba(209, 223, 231, 0.9);
  border-left: 4px solid #7cb2c2;
  border-radius: var(--radius-md);
  padding: 14px 14px 14px 16px;
  background: #fff;
  box-shadow: var(--shadow-3);
}

.insight-item h5 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
}

.insight-item p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.62;
}

.insight-item.info {
  border-left-color: var(--brand);
}

.insight-item.success {
  border-left-color: var(--success);
}

.insight-item.warn {
  border-left-color: var(--warn);
}

.insight-item.danger {
  border-left-color: var(--danger);
}

/* ─────────────────────────────────────────
   HINT / HINT-BLOCK
───────────────────────────────────────── */
.hint {
  color: var(--ink-soft);
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 64ch;
}

.hint-block {
  margin: 10px 0 0;
  border: 1px dashed rgba(206, 224, 232, 0.95);
  background: var(--surface-soft);
  color: var(--ink-soft);
  border-radius: var(--radius-md);
  padding: 10px 13px;
  font-size: 0.82rem;
  line-height: 1.58;
}

.hint-block.hint-block-positive {
  border-color: rgba(193, 229, 208, 0.9);
  background: #f2fbf5;
}

.hint-block.hint-block-negative {
  border-color: rgba(240, 209, 219, 0.9);
  background: #fff4f7;
}

.hint-block.hint-block-neutral {
  border-color: rgba(219, 230, 236, 0.9);
  background: #f8fbfc;
}

/* ─────────────────────────────────────────
   PRICE COMPARE ACCENT
───────────────────────────────────────── */
.price-compare-accent {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.price-compare-accent.hint-block-positive {
  background: #dff3e5;
  color: #2d6b43;
}

.price-compare-accent.hint-block-negative {
  background: #f8dbe5;
  color: #9b3d63;
}

.price-compare-accent.hint-block-neutral {
  background: #e8eff3;
  color: #536b79;
}

/* ─────────────────────────────────────────
   MODULE KPIS
───────────────────────────────────────── */
.module-kpis {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: -2px 0 2px;
}

.module-kpi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(208, 228, 235, 0.9);
  background: var(--brand-muted);
  color: #264e5e;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
}

/* ─────────────────────────────────────────
   FORMS
───────────────────────────────────────── */
.card-form {
  position: relative;
  padding: 16px;
  background: linear-gradient(180deg, #fbfdfe 0%, #f4f9fb 100%);
}

.card-form > .btn {
  margin-top: 14px;
}

.compact-form {
  margin-top: 12px;
}

.form-grid {
  display: grid;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  color: #48616f;
  font-size: 0.81rem;
  font-weight: 700;
  line-height: 1.45;
}

.form-grid > label {
  min-width: 0;
}

.form-grid > label > input,
.form-grid > label > select,
.form-grid > label > textarea {
  min-width: 0;
  min-inline-size: 0;
}

input,
select,
button,
textarea {
  font: inherit;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid #c8d9e2;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 10px 13px;
  font-size: 0.92rem;
  line-height: 1.45;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

textarea {
  min-height: 116px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #8da2ae;
}

input[type='date'],
input[type='month'] {
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aec7d2;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 20px;
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
  transition: all var(--tr-fast);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--tr-fast);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.3);
}

.btn:hover::after {
  opacity: 1;
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.2);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-subtle {
  background: rgba(241, 245, 249, 0.8);
  color: var(--ink);
  border: 1px solid rgba(203, 213, 225, 0.8);
  box-shadow: var(--shadow-3);
  backdrop-filter: blur(12px);
}

.btn-subtle:hover {
  background: rgba(226, 232, 240, 0.9);
  box-shadow: var(--shadow-2);
}

.btn-danger {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  color: var(--danger);
  border: 1px solid rgba(254, 202, 202, 0.8);
  box-shadow: var(--shadow-3);
}

.btn-danger:hover {
  background: linear-gradient(180deg, #ffe8e8 0%, #ffd8d8 100%);
  box-shadow: 0 4px 12px rgba(179, 59, 59, 0.1);
}

/* ─────────────────────────────────────────
   ACTION ROWS
───────────────────────────────────────── */
.action-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.form-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.wrap-on-mobile {
  align-items: center;
}

/* ─────────────────────────────────────────
   LIST
───────────────────────────────────────── */
.list {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.list-item {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.list-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.list-item-title {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.38;
}

.list-item-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.list-item-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.list-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 0;
}

/* ─────────────────────────────────────────
   LIST SCROLL PANEL & LIST GRID HALVES
───────────────────────────────────────── */
.list-scroll-panel {
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

.list-scroll-panel::-webkit-scrollbar {
  width: 8px;
}

.list-scroll-panel::-webkit-scrollbar-thumb {
  background: rgba(103, 139, 155, 0.28);
  border-radius: 999px;
}

.list-grid-halves {
  grid-template-columns: minmax(0, 1fr);
}

/* ─────────────────────────────────────────
   BADGE
───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  border: 1px solid rgba(198, 222, 229, 0.86);
  background: linear-gradient(180deg, #edf8fa 0%, #e2f1f5 100%);
  color: #244f61;
  line-height: 1.2;
}

.badge.warn {
  background: #ffebd4;
  color: var(--warn);
  border-color: rgba(240, 217, 180, 0.9);
}

.badge.danger {
  background: #ffe1e1;
  color: var(--danger);
  border-color: rgba(241, 209, 209, 0.9);
}

/* ─────────────────────────────────────────
   GOAL PROGRESS
───────────────────────────────────────── */
.goal-progress {
  width: 100%;
  height: 8px;
  background: rgba(232, 240, 244, 0.9);
  border-radius: 999px;
  overflow: hidden;
}

.goal-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
  transition: width 220ms ease;
}

/* ─────────────────────────────────────────
   MINI FORMS
───────────────────────────────────────── */
.mini-forms {
  display: grid;
  gap: 8px;
}

/* ─────────────────────────────────────────
   MINI FILTER BAR
───────────────────────────────────────── */
.mini-filter-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.mini-filter-bar label {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #567182;
  min-width: 0;
}

.mini-filter-bar input,
.mini-filter-bar select {
  width: 100%;
}

/* ─────────────────────────────────────────
   GLOBAL MESSAGE (TOAST)
───────────────────────────────────────── */
.global-message {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  margin: 0;
  min-height: 0;
  border-radius: 999px;
  padding: 11px 20px;
  max-width: calc(100vw - 24px);
  background: rgba(27, 39, 51, 0.94);
  color: #fff;
  border: 1px solid rgba(194, 215, 223, 0.25);
  box-shadow: var(--shadow-1);
  font-size: 0.86rem;
  z-index: 9000;
  transition: opacity 180ms ease, transform 180ms ease;
  font-weight: 600;
}

.global-message.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.global-message.error {
  background: rgba(179, 59, 59, 0.96);
}

/* ─────────────────────────────────────────
   BUSY INDICATOR
───────────────────────────────────────── */
.busy-indicator {
  position: fixed;
  right: 14px;
  top: 14px;
  z-index: 85;
  border-radius: 999px;
  border: 1px solid rgba(183, 210, 220, 0.9);
  background: rgba(255, 255, 255, 0.96);
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2c5364;
  box-shadow: var(--shadow-2);
}

/* ─────────────────────────────────────────
   FLOATING TOP BUTTON
───────────────────────────────────────── */
.floating-top {
  position: fixed;
  right: 14px;
  bottom: 60px;
  z-index: 70;
  border: 1px solid rgba(189, 214, 224, 0.9);
  background: rgba(255, 255, 255, 0.96);
  color: #204453;
  border-radius: 999px;
  padding: 9px 15px;
  font-weight: 700;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transition: background 0.14s ease;
}

.floating-top:hover {
  background: var(--brand-muted);
}

/* ─────────────────────────────────────────
   DESKTOP TABLE MODE
───────────────────────────────────────── */
.desktop-table-mode {
  display: none;
}

.desktop-table-tools {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.desktop-table-tools input[type='search'] {
  min-width: 280px;
}

.desktop-table-tools .btn {
  margin-top: 0;
}

.desktop-table-summary {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

.desktop-column-panel {
  margin-top: 8px;
  border: 1px dashed rgba(200, 220, 228, 0.9);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 8px 10px;
  gap: 10px 14px;
}

.desktop-column-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #355563;
}

.desktop-column-item input[type='checkbox'] {
  width: 16px;
  min-height: 16px;
}

.desktop-table-wrap {
  margin-top: 10px;
  max-height: 520px;
  overflow: auto;
  border-radius: var(--radius-md);
}

.desktop-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 940px;
}

.desktop-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #eff7fa 0%, #e6f2f6 100%);
  color: #294a5a;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.79rem;
  padding: 11px 12px;
  border-bottom: 1px solid rgba(212, 227, 234, 0.9);
  text-align: left;
}

.desktop-table td {
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 12px;
  border-bottom: 1px solid rgba(237, 243, 247, 0.95);
  vertical-align: top;
}

.desktop-table tbody tr:nth-child(2n) {
  background: rgba(249, 253, 254, 0.7);
}

.desktop-table-empty {
  color: var(--ink-soft);
}

.table-sort-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.table-sort-btn:focus-visible {
  outline: 2px solid rgba(13, 116, 144, 0.45);
  outline-offset: 2px;
}

.desktop-hide {
  display: block;
}

.desktop-table-wrap,
.desktop-column-panel {
  min-width: 0;
  max-width: 100%;
}

/* ─────────────────────────────────────────
   SUBTAB STRIPS
───────────────────────────────────────── */
.subtab-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 18px;
}

.subtab-btn {
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(204, 221, 229, 0.9);
  background: linear-gradient(180deg, #f5fafc 0%, #eaf4f7 100%);
  color: #335568;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.subtab-btn:hover {
  transform: translateY(-1px);
  border-color: #a9c6d2;
  box-shadow: 0 6px 14px rgba(29, 101, 117, 0.1);
}

.subtab-btn.active {
  border-color: rgba(17, 115, 125, 0.25);
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #f4fbfd;
  box-shadow: 0 10px 22px rgba(13, 85, 104, 0.22);
}

.finance-subtab-strip,
.finance-child-subtab-strip,
.investment-subtab-strip,
.resources-subtab-strip,
.settings-subtab-strip {
  margin-top: 2px;
  margin-bottom: 14px;
}

.investment-subtab-strip .subtab-btn,
.finance-subtab-strip .subtab-btn,
.finance-child-subtab-strip .subtab-btn,
.resources-subtab-strip .subtab-btn,
.settings-subtab-strip .subtab-btn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.8rem;
  box-shadow: none;
}

/* ─────────────────────────────────────────
   SUBTAB PANELS (investment, finance, settings, resource)
───────────────────────────────────────── */
.investment-subtab-panel,
.finance-subtab-panel,
.settings-subtab-panel {
  display: none;
  gap: 18px;
}

.investment-subtab-panel.active,
.finance-subtab-panel.active,
.settings-subtab-panel.active {
  display: grid;
}

.finance-child-tab-shell {
  display: grid;
  gap: 16px;
}

.finance-child-tab-shell > .section-block {
  min-height: auto;
}

.finance-child-subtab-panel {
  display: none;
  gap: 18px;
}

.finance-child-subtab-panel.active {
  display: grid;
}

.resource-subtab-panel {
  display: none;
  gap: 18px;
}

.resource-subtab-panel.active {
  display: grid;
}

.finance-subtab-stack {
  gap: 18px;
}

.finance-subtab-panel .compact-pro-grid,
.finance-child-subtab-panel .compact-pro-grid {
  margin-top: 2px;
}

.investment-subtab-panel .workflow-grid,
.finance-subtab-panel .workflow-grid {
  overflow-x: clip;
}

/* ─────────────────────────────────────────
   WORKFLOW GRID & SECTION STACK
───────────────────────────────────────── */
.workflow-grid {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
}

.workflow-grid-halves {
  align-items: start;
}

.workflow-grid-1-2 {
  align-items: start;
}

.workflow-grid-2-1 {
  align-items: start;
}

.workflow-grid > * {
  min-width: 0;
  max-width: 100%;
}

.section-stack-tight {
  display: grid;
  gap: 18px;
  min-width: 0;
  max-width: 100%;
  align-content: start;
}

.section-stack-tight > * {
  min-width: 0;
  max-width: 100%;
}

.workflow-main-card {
  min-height: 100%;
}

.workflow-grid .section-head-inline,
.section-stack-tight .section-head-inline {
  margin-bottom: 10px;
}

.workflow-grid .card-form + .card-form,
.section-stack-tight .card-form + .card-form {
  margin-top: 12px;
}

.workflow-grid .list,
.section-stack-tight .list {
  margin-top: 12px;
  min-width: 0;
}

.section-block.full-span {
  grid-column: 1 / -1;
}

/* ─────────────────────────────────────────
   FINANCE ACCOUNT LIST
───────────────────────────────────────── */
#list-finance-root-accounts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.finance-subtab-panel .list-item,
.finance-child-subtab-panel .list-item {
  padding: 13px 13px 12px;
}

.finance-subtab-panel .list-item-note,
.finance-child-subtab-panel .list-item-note {
  margin-top: 2px;
}

.finance-subtab-panel .list-actions,
.finance-child-subtab-panel .list-actions {
  gap: 6px;
}

/* ─────────────────────────────────────────
   REVOLVING PREVIEW
───────────────────────────────────────── */
#revolving-preview-card {
  margin-top: 10px;
}

#revolving-preview-result {
  margin-top: 10px;
  border: 1px dashed rgba(198, 218, 227, 0.9);
  border-radius: var(--radius-md);
  background: rgba(244, 251, 254, 0.9);
  padding: 10px 13px;
  font-weight: 700;
  line-height: 1.55;
}

/* ─────────────────────────────────────────
   SIDE DRAWER
───────────────────────────────────────── */
.side-drawer[hidden] {
  display: none !important;
}

.side-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tr-smooth);
}

.side-drawer.drawer-open {
  pointer-events: auto;
  opacity: 1;
}

.side-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 35, 48, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.side-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--drawer-width, min(560px, 100vw));
  height: 100%;
  padding: 24px 22px 28px;
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: -16px 0 40px rgba(173, 44, 77, 0.08);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--tr-smooth), scale var(--tr-smooth), filter var(--tr-smooth);
  z-index: 2;
}

.side-drawer.drawer-open .side-drawer-panel {
  transform: translateX(0);
}

/* Stacking logic: when a drawer is NOT the top one, scale it down */
.side-drawer.stacked .side-drawer-panel {
  scale: 0.96;
  filter: brightness(0.9) blur(2px);
  transform: translateX(-20px); /* Slight shift left */
  pointer-events: none;
}

.side-drawer-body {
  display: grid;
  gap: 14px;
}

/* ─────────────────────────────────────────
   STOCK CHART & CONTROLS
───────────────────────────────────────── */
.stock-control-strip,
.stock-owner-actions {
  margin-top: 0;
  gap: 8px;
}

.stock-control-strip,
.stock-owner-actions {
  align-items: center;
  gap: 6px;
}

.stock-control-strip {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(214, 230, 235, 0.9);
  background: linear-gradient(180deg, #f8fcfd 0%, #edf6f8 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.stock-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.stock-toolbar-symbol {
  flex: 0 1 320px;
}

.stock-toolbar-symbol select {
  min-width: 260px;
  height: 40px;
}

.stock-toolbar-range,
.stock-toolbar-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.stock-toolbar-sync {
  margin-left: auto;
}

.stock-chart-shell {
  margin-top: 0;
  border: 1px solid rgba(214, 230, 235, 0.9);
  border-radius: var(--radius-lg);
  padding: 16px;
  background:
    radial-gradient(240px 150px at 100% 0%, rgba(13, 116, 144, 0.07), transparent 65%),
    linear-gradient(180deg, #ffffff 0%, #f2f8fa 100%);
}

.stock-chart-caption {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.42;
}

.stock-chart-canvas {
  width: 100%;
  min-height: 720px;
}

.stock-detail-zoom-controls .btn {
  min-width: 42px;
  padding-inline: 0;
  font-size: 1rem;
}

/* ─────────────────────────────────────────
   STOCK DETAIL SECTIONS
───────────────────────────────────────── */
.stock-detail-section {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.stock-detail-section .hint {
  margin-top: 0;
}

.stock-detail-section,
.stock-detail-board .section-block {
  padding: 18px;
}

.stock-page-head {
  padding: 2px 2px 0;
  display: grid;
  gap: 4px;
  align-items: start;
}

.stock-page-head > .action-row,
.stock-detail-head > .action-row,
.stock-detail-toolbar > .action-row {
  max-width: none;
  width: 100%;
}

.stock-entry-section .list {
  margin-top: 14px;
}

.stock-detail-head {
  gap: 10px;
}

.stock-detail-toolbar {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

/* Research Panel (collapsible) */
.stock-research-panel {
  margin-top: 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--bg-card);
}
.research-panel-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  text-align: left;
}
.research-panel-toggle:hover {
  background: var(--bg-hover);
}
.research-panel-toggle-icon {
  font-size: 20px;
  transition: transform 0.2s;
}
.research-panel-body {
  display: none;
  padding: 0 14px 14px;
}
.research-panel-body.open {
  display: block;
}
.research-panel-kb-badge {
  font-size: 10px;
  font-weight: 700;
  color: #785ef0;
  background: rgba(120, 94, 240, 0.1);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: auto;
}
.research-panel-kb-badge:empty {
  display: none;
}

.stock-detail-summary-grid {
  margin-top: 0;
}

.stock-detail-decision-grid {
  margin-top: 0;
}

.stock-detail-board {
  margin-top: 0;
}

.stock-detail-board .section-block {
  padding: 14px;
}

.stock-timeline-panel {
  min-height: 100%;
}

.stock-detail-decision-grid .section-block,
.stock-detail-board .section-block {
  min-height: 100%;
}

.stock-chart-shell + .stock-detail-subtab-strip {
  margin-top: 2px;
}

.stock-page-head .content-subhead,
.stock-detail-head .content-subhead {
  max-width: 72ch;
}

/* ─────────────────────────────────────────
   STOCK SUBTAB
───────────────────────────────────────── */
.stock-detail-subtab-strip {
  margin-top: 2px;
}

.stock-detail-subtab-panel {
  display: none;
}

.stock-detail-subtab-panel.active {
  display: grid;
  gap: 14px;
}

.stock-detail-owner-board {
  align-items: start;
}

/* ─────────────────────────────────────────
   STOCK CHIPS & INLINE STATS
───────────────────────────────────────── */
.stock-detail-chip,
.stock-inline-stat,
.module-kpi,
.user-chip {
  border-radius: 999px;
}

.stock-detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--brand-muted);
  color: #2f5f71;
  border: 1px solid rgba(211, 230, 237, 0.9);
  font-size: 0.78rem;
  line-height: 1.2;
}

button.stock-detail-chip {
  font: inherit;
  cursor: pointer;
}

.stock-detail-chip strong {
  font-size: 0.8rem;
  color: #1b4657;
}

.stock-detail-chip.warn {
  background: #fff3e2;
  border-color: rgba(242, 211, 161, 0.9);
  color: #945d0d;
}

.stock-detail-chip.info {
  background: #eef4ff;
  border-color: rgba(207, 220, 255, 0.9);
  color: #335e9a;
}

.stock-inline-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: rgba(243, 251, 254, 0.9);
  border: 1px solid rgba(212, 230, 237, 0.9);
  font-size: 0.76rem;
  color: #365a68;
}

/* ─────────────────────────────────────────
   STOCK OWNER TOOLS
───────────────────────────────────────── */
.stock-owner-tools {
  display: grid;
  gap: 12px;
}

.stock-owner-tools .card-form {
  margin-top: 0;
}

.stock-owner-tools .list {
  margin-top: 0;
}

/* SMALL BTNS in stock / list areas */
.stock-control-strip .btn,
.stock-owner-actions .btn,
.list-actions .btn {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 0.78rem;
}

/* ─────────────────────────────────────────
   SEGMENTED CONTROL
───────────────────────────────────────── */
.segmented-control {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.segmented-control .btn {
  margin-top: 0;
  min-width: 56px;
}

.segmented-control .btn.active {
  background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  border-color: transparent;
}

.segmented-control .btn.is-muted {
  border-style: dashed;
  opacity: 0.84;
}

/* ─────────────────────────────────────────
   COMPACT INLINE FIELDS & PICKERS
───────────────────────────────────────── */
.compact-inline-field {
  display: grid;
  gap: 6px;
  min-width: min(100%, 220px);
}

.stock-detail-picker {
  display: grid;
  gap: 6px;
  min-width: 156px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.stock-detail-picker select {
  min-width: 156px;
}

/* ─────────────────────────────────────────
   STRATEGY RULE BUILDER
───────────────────────────────────────── */
.strategy-template-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.strategy-template-actions .hint {
  margin: 0;
  flex: 1 1 320px;
}

.strategy-rule-builder {
  display: grid;
  gap: 12px;
}

.strategy-rule-group-card {
  border: 1px solid rgba(216, 229, 235, 0.9);
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 10px;
  box-shadow: var(--shadow-3);
}

.strategy-rule-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.strategy-rule-group-head h5 {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  color: #1f3340;
}

.strategy-rule-group-head p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.5;
}

.strategy-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.strategy-rule-item {
  border: 1px solid rgba(222, 235, 240, 0.9);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 8px;
  background: var(--surface-soft);
}

.strategy-rule-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #244252;
  font-size: 0.88rem;
  font-weight: 700;
}

.strategy-rule-toggle input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  min-width: 18px;
  margin: 0;
}

.strategy-rule-item small {
  color: #6d8592;
  font-size: 0.78rem;
  line-height: 1.45;
}

.strategy-rule-threshold.hidden {
  display: none;
}

.debt-field.hidden {
  display: none;
}

/* ─────────────────────────────────────────
   SETTINGS FLOW STACK
───────────────────────────────────────── */
.settings-flow-stack .section-block,
#owner-user-panel,
#owner-audit-panel,
#owner-refresh-panel {
  min-height: 100%;
}

/* ─────────────────────────────────────────
   CODE SAMPLE
───────────────────────────────────────── */
.code-sample {
  margin: 8px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(181, 210, 223, 0.8);
  background: rgba(244, 251, 255, 0.88);
  color: #234556;
  font: 0.86rem/1.55 'SFMono-Regular', Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* ─────────────────────────────────────────
   RESPONSIVE — TABLET (≥ 768px)
───────────────────────────────────────── */
@media (min-width: 768px) {
  .topbar {
    padding: 14px 28px;
    margin-left: -28px;
    margin-right: -28px;
  }

  .app-shell {
    padding: 80px 22px 104px;
  }

  .hero-panel {
    grid-template-columns: 1fr auto;
    align-items: end;
  }

  .hero-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .overview-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .overview-board-grid.readable-board,
  .cockpit-grid.readable-cockpit {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .cockpit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pro-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-pro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-grid.flow-stack {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .overview-board-grid.readable-board {
    grid-template-columns: 1fr;
  }

  .section-block.collapsed .section-body {
    display: grid;
  }

  .section-toggle-caret {
    display: none;
  }

  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid .full {
    grid-column: 1 / -1;
  }

  .compact-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-subtab-panel.active {
    gap: 20px;
  }

  .finance-child-subtab-panel.active {
    gap: 20px;
  }

  #list-finance-root-accounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-grid-halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mini-filter-bar {
    grid-template-columns: 180px minmax(0, 1fr);
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — DESKTOP (≥ 1024px)
   NOTE: This breakpoint activates desktop table mode
───────────────────────────────────────── */
@media (min-width: 1024px) {
  .topbar {
    padding: 14px 32px;
    margin-left: -32px;
    margin-right: -32px;
  }

  .app-shell {
    padding: 80px 28px 110px;
  }

  .stack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-board-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tab-strip {
    top: 58px;
  }

  .tab-content.active {
    gap: 22px;
  }

  .stack-grid.flow-stack {
    grid-template-columns: 1fr;
  }

  .overview-board-grid.readable-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-detail-board {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .stock-timeline-panel {
    grid-column: 1 / -1;
  }

  /* FUNCTIONAL: hide mobile lists, show desktop table */
  #list-investment-transactions,
  #list-finance-entries,
  #list-resource-items {
    display: none;
  }

  .desktop-table-mode {
    display: flex;
  }

  .desktop-column-panel.desktop-table-mode {
    display: none;
  }

  .desktop-column-panel.desktop-table-mode:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .desktop-table-wrap.desktop-table-mode {
    display: block;
  }

  #tab-investment #list-investment-transactions,
  #tab-finance #list-finance-entries,
  #tab-finance #list-budgets,
  #tab-finance #list-rp,
  #tab-resources #list-resource-items,
  #tab-resources #list-resource-movements,
  #tab-tasks #list-tasks,
  #tab-alerts #list-alerts,
  #tab-settings #list-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-grid.flow-stack {
    grid-template-columns: 1fr;
  }

  .overview-board-grid.readable-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stock-detail-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stock-control-strip {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }

  .stock-toolbar-symbol {
    flex: 0 0 320px;
  }

  .stock-toolbar-range {
    flex: 1 1 auto;
    min-width: 0;
  }

  .stock-toolbar-mode,
  .stock-detail-zoom-controls,
  .stock-toolbar-sync {
    flex: 0 0 auto;
  }

  .desktop-hide {
    display: none;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — 1100px breakpoint
───────────────────────────────────────── */
@media (min-width: 1100px) {
  .overview-board-grid.readable-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-board-grid.readable-board,
  .investment-board-grid.readable-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stack-grid.flow-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-grid.flow-stack > .section-block:first-child {
    grid-column: 1 / -1;
  }

  .finance-subtab-stack > .section-block:first-child {
    grid-column: 1 / -1;
  }

  .compact-form .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #list-finance-root-accounts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workflow-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    align-items: start;
  }

  .workflow-grid.workflow-grid-halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-grid.workflow-grid-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .workflow-grid.workflow-grid-2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  .workflow-grid > .full-span {
    grid-column: 1 / -1;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — WIDE (≥ 1280px)
───────────────────────────────────────── */
@media (min-width: 1280px) {
  .topbar {
    padding: 14px 36px;
    margin-left: -36px;
    margin-right: -36px;
  }

  .app-shell {
    width: min(100%, 1500px);
    padding: 80px 32px 98px;
  }

  .panel {
    padding: 22px;
  }

  .hero-panel {
    padding: 22px 24px;
  }

  .tab-strip {
    grid-auto-columns: 1fr;
    overflow-x: visible;
    top: 58px;
    padding: 8px;
    margin-bottom: 14px;
  }

  .tab-btn {
    width: 100%;
    text-align: center;
    padding: 11px 14px;
  }

  .utility-row {
    justify-content: flex-end;
    margin-top: -2px;
    margin-bottom: 2px;
  }

  .stack-grid {
    gap: 18px;
  }

  .cockpit-grid {
    gap: 18px;
  }

  .pro-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .compact-pro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compact-form .form-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .list-actions {
    justify-content: flex-start;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — ULTRAWIDE (≥ 1440px)
───────────────────────────────────────── */
@media (min-width: 1440px) {
  .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-board-grid.readable-board,
  .finance-board-grid.readable-board,
  .investment-board-grid.readable-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stock-detail-decision-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .stock-detail-board {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  .stock-detail-owner-board {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — (≥ 1536px)
───────────────────────────────────────── */
@media (min-width: 1536px) {
  .desktop-column-panel.desktop-table-mode:not([hidden]) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #tab-tasks #list-tasks,
  #tab-alerts #list-alerts,
  #tab-resources #list-resource-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stock-detail-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — (≥ 1600px)
───────────────────────────────────────── */
@media (min-width: 1600px) {
  #list-finance-root-accounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — MOBILE ONLY (< 640px)
───────────────────────────────────────── */
@media (max-width: 640px) {
  .stock-chart-canvas {
    min-height: 620px;
  }

  .stock-detail-chip {
    width: 100%;
    justify-content: space-between;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — MOBILE ONLY (< 768px)
───────────────────────────────────────── */
@media (max-width: 767px) {
  .workflow-grid,
  .section-stack-tight {
    gap: 14px;
  }

  .mini-filter-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .stock-control-strip {
    gap: 10px;
    padding: 10px;
    justify-content: flex-start;
  }

  .stock-toolbar-group {
    width: 100%;
  }

  .stock-toolbar-symbol select {
    min-width: 0;
    width: 100%;
  }

  .stock-toolbar-range {
    flex-wrap: wrap;
  }

  .stock-toolbar-sync {
    margin-left: 0;
  }

  .stock-detail-subtab-strip {
    position: sticky;
    top: 70px;
    z-index: 5;
    background: rgba(237, 244, 247, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 0 2px;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — (< 900px)
───────────────────────────────────────── */
@media (max-width: 900px) {
  .strategy-rule-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────
   RESPONSIVE — (≥ 900px) stock page head
───────────────────────────────────────── */
@media (min-width: 900px) {
  .stock-page-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    row-gap: 4px;
  }

  .stock-page-head > :first-child {
    max-width: 72ch;
  }
}

/* ═══════════════════════════════════════
   APP NAV LAYOUT (v4.3)
   ════════════════════════════════════════ */

#app-panel.panel-app {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  border-radius: 0;
  min-height: 0;
}

.app-content-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#app-panel .app-content-body {
  flex: 1;
  min-width: 0;
  padding: 0 0 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.app-shell:has(#app-panel:not([hidden])) > .topbar {
  display: flex !important;
}

.app-primary-nav {
  display: grid;
  gap: 8px;
}

.app-primary-nav-top {
  display: none;
}

.app-primary-nav-bottom {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 70;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  padding: 10px 8px;
  border: 1px solid rgba(181, 210, 223, 0.85);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 36px rgba(17, 35, 48, 0.14);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.app-primary-nav-btn {
  min-width: 0;
  min-height: 58px;
  padding: 8px 4px 6px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: none;
}

.app-primary-nav-btn:hover {
  background: rgba(233, 245, 250, 0.92);
  color: var(--brand);
  transform: none;
}

.app-primary-nav-btn.active {
  background: linear-gradient(180deg, rgba(238, 248, 252, 0.98), rgba(225, 242, 248, 0.96));
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(105, 176, 200, 0.2);
}

.app-primary-nav-btn .sidebar-nav-icon {
  width: auto;
  font-size: 1.22rem;
}

.app-primary-nav-btn.active .sidebar-nav-icon {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.app-primary-nav-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  #app-panel .app-content-body {
    padding-bottom: 32px;
  }

  .app-primary-nav-top {
    position: relative;
    top: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 12px;
    border: 1px solid rgba(181, 210, 223, 0.82);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 16px 30px rgba(17, 35, 48, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }

  .app-primary-nav-bottom {
    display: none;
  }

  .app-primary-nav-btn {
    min-height: 52px;
    padding: 10px 12px;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    font-size: 0.84rem;
  }
}

#app-panel .hero-panel {
  position: relative;
  top: auto;
  z-index: auto;
  margin: 0;
  border-radius: var(--radius-2xl);
  padding: 18px;
  display: grid;
  gap: 16px;
  min-height: auto;
  box-shadow: 0 12px 30px rgba(17, 35, 48, 0.08);
}

#app-panel .hero-panel .hero-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  display: block;
}

#app-panel .hero-panel h2 {
  font-size: 1.18rem;
  margin: 0;
  line-height: 1.18;
}

#app-panel .hero-panel .hero-desc {
  display: block;
}

#app-panel .hero-panel .hero-status-grid {
  display: grid;
  gap: 10px;
}

#app-panel .hero-panel .hero-meta {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(181, 210, 223, 0.78);
  background: rgba(255, 255, 255, 0.74);
}

#app-panel .hero-panel .meta-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

#app-panel .hero-panel .hero-meta strong {
  font-size: 0.9rem;
}

#app-panel .tab-content.active {
  display: grid;
  gap: 20px;
}

#app-panel .utility-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

/* ── Summary-card v4.2 — cleaner, bottom accent, icon ── */
.summary-card-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.summary-card-icon .sidebar-nav-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.15rem;
  color: var(--brand);
  width: auto;
}

.summary-card.success .summary-card-icon {
  background: rgba(13, 116, 144, 0.12);
}

.summary-card.warn .summary-card-icon {
  background: rgba(180, 83, 9, 0.1);
}

.summary-card.warn .summary-card-icon .sidebar-nav-icon {
  color: var(--warn);
}

.summary-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(17,35,48,0.06), 0 0 0 1px rgba(209,223,231,0.7);
}

/* Replace top accent with bottom accent */
.summary-card::before {
  top: auto;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(13,116,144,0.5), rgba(15,118,110,0.2), transparent);
}

.summary-card.success::before {
  background: linear-gradient(90deg, rgba(15,118,110,0.7), rgba(13,116,144,0.3), transparent);
}

.summary-card.warn::before {
  background: linear-gradient(90deg, rgba(180,83,9,0.7), rgba(179,59,59,0.3), transparent);
}

.summary-card p {
  color: var(--ink);
}

.summary-card.success p {
  color: var(--success);
}

.summary-card.warn p {
  color: var(--warn);
}

/* ── Pro-metric-card tone support ── */
.pro-metric-card.pmc-success .pro-metric-value { color: var(--success); }
.pro-metric-card.pmc-warn .pro-metric-value { color: var(--warn); }
.pro-metric-card.pmc-danger .pro-metric-value { color: var(--danger); }

/* Hide redundant content-head inside sidebar app (hero topbar shows the title) */
#app-panel .content-head {
  display: none;
}

/* Summary-grid: 2-col on mobile, 4-col on desktop in sidebar mode */
#app-panel .summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1100px) {
  #app-panel .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Summary-card: tighter padding in sidebar mode */
#app-panel .summary-card {
  padding: 14px 16px;
}

#app-panel .summary-card h4 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

#app-panel .summary-card p {
  font-size: 1.28rem;
  margin: 0;
}

#app-panel .summary-card .summary-note {
  margin-top: 4px;
  font-size: 0.76rem;
}

/* Reset app-shell for sidebar layout */
.app-shell:has(#app-panel:not([hidden])) {
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* ═══════════════════════════════════════
   VISUAL POLISH v4.5 — 全站統一風格
   ════════════════════════════════════════ */

/* ── 1. Cards: pure white, flat border, no gradient ── */
.section-block,
.module-card,
.list-item,
.card-form,
.desktop-table-wrap {
  background: #fff;
  box-shadow: 0 1px 4px rgba(17,35,48,0.06), 0 0 0 1px rgba(209,223,231,0.65);
  border: none;
}

/* ── 2. Top accent line: thinner, brand color, subtle ── */
.section-block::before,
.card-form::before,
.module-card::before {
  height: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, rgba(13,116,144,0.2) 60%, transparent 100%);
  opacity: 0.45;
}

/* ── 3. pro-metric-card: white, clean ── */
.pro-metric-card {
  background: #fff;
  box-shadow: 0 1px 4px rgba(17,35,48,0.06), 0 0 0 1px rgba(209,223,231,0.65);
  border: none;
  overflow: visible;
}

/* pro-metric-card: bottom accent bar (matches summary-card) */
.pro-metric-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: linear-gradient(90deg, rgba(13,116,144,0.4), rgba(15,118,110,0.15), transparent);
  pointer-events: none;
}
.pro-metric-card.pmc-warn::after {
  background: linear-gradient(90deg, rgba(180,83,9,0.5), rgba(179,59,59,0.2), transparent);
}
.pro-metric-card.pmc-danger::after {
  background: linear-gradient(90deg, rgba(179,59,59,0.5), rgba(180,83,9,0.15), transparent);
}
.pro-metric-card.pmc-success::after {
  background: linear-gradient(90deg, rgba(15,118,110,0.5), rgba(13,116,144,0.2), transparent);
}

/* ── 4. pro-metric-card icon support ── */
.pro-metric-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pro-metric-icon .sidebar-nav-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1rem;
  color: var(--brand);
  width: auto;
}
.pro-metric-card.pmc-warn .pro-metric-icon {
  background: rgba(180,83,9,0.1);
}
.pro-metric-card.pmc-warn .pro-metric-icon .sidebar-nav-icon { color: var(--warn); }
.pro-metric-card.pmc-danger .pro-metric-icon {
  background: rgba(179,59,59,0.1);
}
.pro-metric-card.pmc-danger .pro-metric-icon .sidebar-nav-icon { color: var(--danger); }
.pro-metric-card.pmc-success .pro-metric-icon {
  background: rgba(15,118,110,0.1);
}
.pro-metric-card.pmc-success .pro-metric-icon .sidebar-nav-icon { color: var(--success); }

/* ── 5. root-metric-card: white ── */
.root-metric-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(17,35,48,0.05), 0 0 0 1px rgba(209,223,231,0.6);
  border: none;
}
.root-metric-card.warn {
  background: #fff8f8;
  box-shadow: 0 1px 3px rgba(179,59,59,0.06), 0 0 0 1px rgba(240,209,209,0.7);
}

/* ── 6. Subtab buttons: minimal pill style ── */
.subtab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  padding: 7px 14px;
  min-height: 34px;
  font-size: 0.82rem;
  border-radius: 999px;
  font-weight: 600;
}
.subtab-btn:hover {
  background: var(--brand-muted);
  color: var(--brand);
  border-color: rgba(13,116,144,0.15);
  transform: none;
  box-shadow: none;
}
.subtab-btn.active {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(13,116,144,0.22);
}

/* ── 7. Desktop table: clean, readable ── */
.desktop-table thead th {
  background: #f7fbfc;
  color: var(--ink-soft);
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.desktop-table tbody tr:hover td {
  background: rgba(232,245,249,0.5);
}
.desktop-table tbody tr:nth-child(2n) {
  background: rgba(247,251,252,0.6);
}
.desktop-table td {
  border-bottom: 1px solid rgba(232,242,247,0.9);
}

/* ── 8. Module KPI chips: minimal status pills ── */
.module-kpi {
  background: rgba(240,246,248,0.85);
  border-color: rgba(209,228,235,0.7);
  color: var(--ink-soft);
  font-weight: 600;
  padding: 4px 11px;
  font-size: 0.75rem;
}

/* ── 9. Section toggle title: cleaner font ── */
.section-toggle-title {
  font-size: 0.97rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-mini-head h5 {
  color: var(--ink);
  font-size: 0.88rem;
  letter-spacing: 0;
}

/* ── 10. Badge: cleaner pill ── */
.badge {
  background: rgba(232,245,249,0.9);
  border-color: rgba(196,219,228,0.7);
  color: #2c5062;
  font-size: 0.72rem;
  padding: 4px 9px;
}

/* ── 11. hint-block: softer ── */
.hint-block {
  border-color: rgba(209,223,231,0.55);
  background: #f9fbfc;
}

/* ── 12. List-item: white bg ── */
.list-item {
  background: #fff;
}

/* ── 13. insight-item: cleaner left border ── */
.insight-item {
  box-shadow: 0 1px 3px rgba(17,35,48,0.04);
  border-radius: var(--radius-md);
}

/* ── 14. subtab-strip: tighter spacing ── */
.subtab-strip {
  gap: 4px;
  margin: 4px 0 14px;
}

/* ── 15. pro-metric-grid 4-col on large screens ── */
@media (min-width: 1100px) {
  #app-panel .pro-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  #app-panel .pro-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── 16. strategy-rule-group-card: white ── */
.strategy-rule-group-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(17,35,48,0.05), 0 0 0 1px rgba(216,229,235,0.7);
  border: none;
}

/* ── 17. stock-chart-shell: cleaner ── */
.stock-chart-shell {
  background: #fff;
  box-shadow: 0 1px 4px rgba(17,35,48,0.05), 0 0 0 1px rgba(214,230,235,0.7);
  border: none;
}

/* ── 18. side-drawer-panel: cleaner shadow ── */
.side-drawer-panel {
  background: #fff;
  box-shadow: -20px 0 48px rgba(17,35,48,0.12);
  border-left: 1px solid var(--line);
}

/* ═══════════════════════════════════════
   UI/UX REFACTOR v4.6 — UNIFIED WORKBENCH
   ═══════════════════════════════════════ */

:root {
  --bg: #f3f6f8;
  --bg-deep: #e6edf1;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #ffffff;
  --surface-soft: #f7fafb;
  --ink: #16232c;
  --ink-soft: #5b6b78;
  --line: rgba(146, 171, 187, 0.28);
  --brand: #176b87;
  --brand-deep: #0f3d53;
  --brand-soft: #d9edf4;
  --brand-muted: #eef7fa;
  --danger: #b94141;
  --warn: #b46a1d;
  --success: #1f8c64;
  --focus-ring: rgba(23, 107, 135, 0.24);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow-1: 0 32px 60px rgba(18, 35, 44, 0.08);
  --shadow-2: 0 18px 36px rgba(18, 35, 44, 0.08);
  --shadow-3: 0 10px 22px rgba(18, 35, 44, 0.06);
  --content-max: 1520px;
}

body {
  color: var(--ink);
  background:
    radial-gradient(480px 340px at 100% 0%, rgba(31, 140, 100, 0.08), transparent 72%),
    radial-gradient(560px 380px at 0% 100%, rgba(23, 107, 135, 0.1), transparent 75%),
    linear-gradient(180deg, #f8fbfc 0%, #eef3f5 52%, #e7edf1 100%);
}

.bg-layer-1 {
  background:
    radial-gradient(420px 320px at 86% 14%, rgba(23, 107, 135, 0.08), transparent 72%),
    radial-gradient(360px 280px at 12% 86%, rgba(31, 140, 100, 0.08), transparent 72%);
}

.bg-layer-2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 120px,
      rgba(255, 255, 255, 0.14) 120px,
      rgba(255, 255, 255, 0.14) 121px
    );
  opacity: 0.55;
}

.app-shell,
.app-shell:has(#app-panel:not([hidden])) {
  width: min(100%, var(--content-max));
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 80px 14px 118px;
}

.topbar {
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  margin: -80px -14px 18px;
  border: 1px solid rgba(146, 171, 187, 0.22);
  border-top: none;
  border-radius: 0 0 28px 28px;
  background: rgba(250, 252, 253, 0.9);
  box-shadow: 0 18px 44px rgba(18, 35, 44, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.brand-block {
  gap: 6px;
}

.eyebrow {
  color: var(--brand);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(1.55rem, 2.2vw, 2.32rem);
  letter-spacing: -0.04em;
}

.subhead {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid rgba(146, 171, 187, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink-soft);
  font-size: 0.81rem;
  line-height: 1.3;
}

.user-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.user-chip {
  border: 1px solid rgba(146, 171, 187, 0.24);
  background: rgba(255, 255, 255, 0.95);
  padding: 7px 13px;
  box-shadow: 0 10px 22px rgba(18, 35, 44, 0.06);
}

.user-name {
  color: var(--ink);
  font-size: 0.8rem;
}

.panel {
  border: 1px solid rgba(146, 171, 187, 0.22);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-1);
}

.panel-login {
  max-width: 520px;
  margin: 56px auto 0;
  padding: 28px;
}

.panel-login h2 {
  font-size: 1.5rem;
}

.panel-login .hint {
  margin-top: 10px;
}

.panel-login .card-form {
  margin-top: 20px;
}

#app-panel {
  --tab-accent: var(--brand);
  --tab-accent-deep: var(--brand-deep);
  --tab-accent-soft: rgba(23, 107, 135, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 250, 0.98) 48%, rgba(222, 236, 243, 0.96) 100%);
}

#app-panel[data-active-tab="overview"] {
  --tab-accent: #176b87;
  --tab-accent-deep: #0f3d53;
  --tab-accent-soft: rgba(23, 107, 135, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(238, 246, 249, 0.98) 48%, rgba(219, 235, 242, 0.96) 100%);
}

#app-panel[data-active-tab="finance"] {
  --tab-accent: #1f8c64;
  --tab-accent-deep: #145945;
  --tab-accent-soft: rgba(31, 140, 100, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 248, 244, 0.98) 48%, rgba(221, 239, 230, 0.96) 100%);
}

#app-panel[data-active-tab="investment"] {
  --tab-accent: #b46a1d;
  --tab-accent-deep: #724213;
  --tab-accent-soft: rgba(180, 106, 29, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 238, 0.98) 48%, rgba(243, 230, 214, 0.96) 100%);
}

#app-panel[data-active-tab="resources"] {
  --tab-accent: #2e7494;
  --tab-accent-deep: #1f4f66;
  --tab-accent-soft: rgba(46, 116, 148, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 246, 249, 0.98) 48%, rgba(223, 236, 243, 0.96) 100%);
}

#app-panel[data-active-tab="tasks"] {
  --tab-accent: #3f6fb2;
  --tab-accent-deep: #274a7e;
  --tab-accent-soft: rgba(63, 111, 178, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 251, 0.98) 48%, rgba(225, 234, 245, 0.96) 100%);
}

#app-panel[data-active-tab="alerts"] {
  --tab-accent: #b84c5b;
  --tab-accent-deep: #7c3340;
  --tab-accent-soft: rgba(184, 76, 91, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 242, 244, 0.98) 48%, rgba(243, 226, 230, 0.96) 100%);
}

#app-panel[data-active-tab="settings"] {
  --tab-accent: #5e6b77;
  --tab-accent-deep: #3b4750;
  --tab-accent-soft: rgba(94, 107, 119, 0.12);
  --tab-accent-bg:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 246, 248, 0.98) 48%, rgba(232, 236, 240, 0.96) 100%);
}

#app-panel.panel-app {
  gap: 18px;
}

.app-content-area {
  gap: 18px;
}

#app-panel .app-content-body {
  padding: 0 0 92px;
  gap: 24px;
}

.app-primary-nav {
  gap: 8px;
}

.app-primary-nav-top {
  display: none;
}

.app-primary-nav-bottom {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 10px 8px;
  border: 1px solid rgba(146, 171, 187, 0.22);
  border-radius: 24px;
  background: rgba(249, 251, 252, 0.94);
  box-shadow: 0 18px 34px rgba(18, 35, 44, 0.14);
}

.app-primary-nav-btn {
  min-height: 60px;
  padding: 8px 6px 7px;
  border-radius: 18px;
  color: var(--ink-soft);
  transition: background var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}

.app-primary-nav-btn:hover {
  background: rgba(232, 239, 243, 0.92);
  color: var(--ink);
  transform: translateY(-1px);
}

#app-panel .app-primary-nav-btn.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--tab-accent-soft));
  color: var(--tab-accent-deep);
  box-shadow: inset 0 0 0 1px rgba(146, 171, 187, 0.18), 0 8px 18px rgba(18, 35, 44, 0.08);
}

#app-panel .app-primary-nav-btn.active .sidebar-nav-icon {
  color: var(--tab-accent);
}

.app-primary-nav-label {
  font-size: 0.68rem;
  letter-spacing: 0.01em;
}

.sidebar-nav-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
}

#app-panel .hero-panel {
  position: relative;
  overflow: clip;
  padding: 24px 24px 22px;
  border: 1px solid rgba(146, 171, 187, 0.22);
  border-radius: 30px;
  background: var(--tab-accent-bg);
  box-shadow: 0 22px 42px rgba(18, 35, 44, 0.08);
}

#app-panel .hero-panel::after {
  content: '';
  position: absolute;
  inset: auto -36px -56px auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tab-accent-soft) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

#app-panel .hero-panel .hero-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(146, 171, 187, 0.2);
  background: rgba(255, 255, 255, 0.88);
  color: var(--tab-accent-deep);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#app-panel .hero-panel h2 {
  margin-top: 14px;
  font-size: clamp(1.4rem, 1.8vw, 2.1rem);
  letter-spacing: -0.04em;
}

#app-panel .hero-panel .hero-desc {
  margin-top: 8px;
  max-width: 72ch;
  color: var(--ink-soft);
}

#app-panel .hero-panel .hero-status-grid {
  gap: 10px;
}

#app-panel .hero-panel .hero-meta {
  border: 1px solid rgba(146, 171, 187, 0.2);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 20px rgba(18, 35, 44, 0.04);
}

#app-panel .hero-panel .hero-meta strong {
  color: var(--ink);
}

.utility-row {
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.btn {
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(16, 61, 83, 0.05);
  background: linear-gradient(135deg, var(--tab-accent) 0%, var(--tab-accent-deep) 100%);
  box-shadow: 0 14px 28px rgba(18, 35, 44, 0.14);
}

.btn:hover {
  box-shadow: 0 18px 30px rgba(18, 35, 44, 0.16);
}

.btn-subtle {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  border: 1px solid rgba(146, 171, 187, 0.22);
  box-shadow: 0 10px 20px rgba(18, 35, 44, 0.05);
}

.btn-subtle:hover {
  background: rgba(245, 249, 251, 0.96);
}

.btn-danger {
  background: linear-gradient(180deg, #fff3f3 0%, #ffe4e4 100%);
  color: var(--danger);
}

#app-panel .tab-content.active {
  gap: 24px;
}

#app-panel .summary-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

.section-block,
.summary-card,
.module-card,
.list-item,
.desktop-table-wrap,
.card-form,
.pro-metric-card,
.root-metric-card,
.stock-chart-shell,
.strategy-rule-group-card {
  border: 1px solid rgba(146, 171, 187, 0.22);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 36px rgba(18, 35, 44, 0.06);
}

.section-block,
.summary-card,
.module-card,
.list-item,
.desktop-table-wrap,
.card-form {
  border-radius: 24px;
}

.section-block:hover,
.module-card:hover,
.list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px rgba(18, 35, 44, 0.08);
}

#app-panel .section-block::before,
#app-panel .card-form::before,
#app-panel .summary-card::before,
#app-panel .module-card::before {
  height: 4px;
  background: linear-gradient(90deg, var(--tab-accent), rgba(255, 255, 255, 0));
  opacity: 0.75;
}

.spotlight-block {
  background:
    radial-gradient(200px 130px at 100% 0%, var(--tab-accent-soft), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 251, 0.98) 100%);
}

#app-panel .summary-card {
  padding: 18px 18px 16px;
}

#app-panel .summary-card h4 {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#app-panel .summary-card p {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.62rem);
  color: var(--ink);
}

#app-panel .summary-card.success p {
  color: var(--success);
}

#app-panel .summary-card.warn p {
  color: var(--warn);
}

#app-panel .summary-card .summary-note {
  margin-top: 6px;
  font-size: 0.77rem;
}

.pro-metric-card {
  padding: 18px 16px;
  border-radius: 20px;
}

.pro-metric-card::after {
  height: 3px;
  background: linear-gradient(90deg, var(--tab-accent), rgba(255, 255, 255, 0));
}

.pro-metric-icon {
  background: var(--tab-accent-soft);
}

.pro-metric-icon .sidebar-nav-icon {
  color: var(--tab-accent);
}

.root-metric-card {
  border-radius: 18px;
}

.module-kpis {
  gap: 8px;
  margin: 2px 0 4px;
}

.module-kpi {
  border-radius: 999px;
  border: 1px solid rgba(146, 171, 187, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  font-size: 0.76rem;
  padding: 5px 11px;
}

.subtab-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  margin: 4px 0 16px;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.subtab-strip::-webkit-scrollbar {
  display: none;
}

#app-panel .subtab-btn {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid rgba(146, 171, 187, 0.2);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}

#app-panel .subtab-btn:hover {
  background: rgba(245, 249, 251, 0.98);
  color: var(--ink);
  border-color: rgba(146, 171, 187, 0.28);
}

#app-panel .subtab-btn.active {
  background: var(--tab-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(18, 35, 44, 0.12);
}

.workflow-grid,
.stack-grid,
.cockpit-grid,
.overview-board-grid,
.pro-metric-grid,
.section-stack-tight {
  gap: 16px;
}

.workflow-grid {
  align-items: start;
}

.workflow-main-card,
.section-stack-tight > *,
.workflow-grid > * {
  min-width: 0;
}

.card-form {
  padding: 18px;
}

.form-grid {
  gap: 14px;
}

.hint-block {
  border: 1px solid rgba(146, 171, 187, 0.18);
  background: rgba(247, 250, 251, 0.98);
}

.badge {
  border: 1px solid rgba(146, 171, 187, 0.18);
  background: rgba(244, 248, 250, 0.96);
  color: var(--ink-soft);
}

.desktop-table-wrap {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.desktop-table thead th {
  background: #f5f8fa;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(146, 171, 187, 0.18);
}

.desktop-table td {
  border-bottom: 1px solid rgba(230, 236, 240, 0.94);
}

.desktop-table tbody tr:nth-child(2n) {
  background: rgba(247, 250, 251, 0.72);
}

.desktop-table tbody tr:hover td {
  background: rgba(238, 245, 248, 0.86);
}

.side-drawer-backdrop {
  background: rgba(18, 35, 44, 0.22);
}

.side-drawer-panel {
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid rgba(146, 171, 187, 0.2);
  box-shadow: -28px 0 52px rgba(18, 35, 44, 0.14);
}

@media (min-width: 680px) {
  #app-panel .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .app-shell,
  .app-shell:has(#app-panel:not([hidden])) {
    padding: 80px 22px 42px;
  }

  .topbar {
    padding: 16px 28px;
    margin-left: -22px;
    margin-right: -22px;
  }

  .app-primary-nav-top {
    position: relative;
    top: auto;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(146, 171, 187, 0.2);
    border-radius: 26px;
    background: rgba(249, 251, 252, 0.88);
    box-shadow: 0 18px 36px rgba(18, 35, 44, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .app-primary-nav-bottom {
    display: none;
  }

  .app-primary-nav-btn {
    min-height: 54px;
    padding: 11px 14px;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
  }

  .app-primary-nav-label {
    font-size: 0.82rem;
  }

  #app-panel .app-content-body {
    padding-bottom: 28px;
  }

  .utility-row {
    margin-top: -2px;
  }

  .utility-row .btn {
    min-width: 132px;
  }

  .overview-board-grid.readable-board,
  .finance-board-grid.readable-board,
  .investment-board-grid.readable-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-grid.workflow-grid-halves {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-grid.workflow-grid-1-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }

  .workflow-grid.workflow-grid-2-1 {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

@media (min-width: 1100px) {
  #app-panel .summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-board-grid.readable-board,
  .finance-board-grid.readable-board,
  .investment-board-grid.readable-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stack-grid.flow-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stack-grid.flow-stack > .section-block:first-child,
  .finance-subtab-stack > .section-block:first-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .app-shell,
  .app-shell:has(#app-panel:not([hidden])) {
    width: min(100%, var(--content-max));
    max-width: var(--content-max);
    padding: 80px 30px 46px;
  }

  .topbar {
    padding: 18px 34px;
    margin-left: -30px;
    margin-right: -30px;
  }
}

@media (max-width: 767px) {
  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 14px;
  }

  .user-panel {
    justify-content: space-between;
  }

  .panel {
    padding: 18px;
  }

  #app-panel .hero-panel {
    padding: 20px 18px 18px;
    border-radius: 24px;
  }

  .utility-row {
    justify-content: stretch;
  }

  .utility-row .btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }

  .app-primary-nav-bottom {
    gap: 2px;
    padding: 8px 4px 6px;
  }

  .app-primary-nav-bottom .app-primary-nav-btn {
    min-height: 54px;
    padding: 6px 1px 5px;
    gap: 3px;
    border-radius: 14px;
  }

  .app-primary-nav-bottom .app-primary-nav-btn .sidebar-nav-icon {
    font-size: 1.04rem;
  }

  .app-primary-nav-bottom .app-primary-nav-label {
    font-size: 0.53rem;
    line-height: 1.02;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    word-break: keep-all;
  }
}

/* ═══════════════════════════════════════
   UI/UX REFACTOR v4.7 — CLAUDE-LIKE THEME
   ═══════════════════════════════════════ */

:root {
  --bg: #f7f3ed;
  --bg-deep: #efe7dc;
  --surface: rgba(255, 252, 247, 0.94);
  --surface-solid: #fffdf9;
  --surface-soft: #fbf7f1;
  --ink: #2f2924;
  --ink-soft: #75695d;
  --line: rgba(108, 92, 77, 0.16);
  --brand: #8b6f56;
  --brand-deep: #544131;
  --brand-soft: #eadfce;
  --brand-muted: #f5ede3;
  --danger: #b24e46;
  --warn: #a36b2b;
  --success: #5b8a67;
  --focus-ring: rgba(139, 111, 86, 0.2);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 22px 44px rgba(54, 42, 32, 0.08);
  --shadow-2: 0 14px 28px rgba(54, 42, 32, 0.06);
  --shadow-3: 0 8px 18px rgba(54, 42, 32, 0.05);
}

body {
  color: var(--ink);
  background:
    radial-gradient(480px 320px at 100% 0%, rgba(222, 206, 189, 0.18), transparent 72%),
    radial-gradient(560px 360px at 0% 100%, rgba(227, 214, 198, 0.22), transparent 74%),
    linear-gradient(180deg, #fbf8f3 0%, #f5efe6 52%, #efe6db 100%);
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
}

.bg-layer-1 {
  background:
    radial-gradient(420px 300px at 86% 12%, rgba(183, 157, 132, 0.12), transparent 72%),
    radial-gradient(360px 260px at 10% 84%, rgba(210, 189, 166, 0.14), transparent 72%);
}

.bg-layer-2 {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 34%),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0,
      rgba(255, 255, 255, 0) 128px,
      rgba(255, 255, 255, 0.1) 128px,
      rgba(255, 255, 255, 0.1) 129px
    );
  opacity: 0.45;
}

h1,
#app-panel .hero-panel h2,
.panel-login h2,
#app-panel .content-head h3 {
  font-family: 'Noto Serif TC', 'Times New Roman', serif;
  letter-spacing: -0.03em;
  font-weight: 600;
}

#app-panel[data-active-tab] {
  --tab-accent: #8b6f56;
  --tab-accent-deep: #544131;
  --tab-accent-soft: rgba(139, 111, 86, 0.12);
  --tab-accent-bg:
    linear-gradient(180deg, rgba(255, 252, 247, 0.98) 0%, rgba(248, 242, 234, 0.98) 100%);
}

.topbar {
  border-color: rgba(108, 92, 77, 0.12);
  background: rgba(251, 248, 243, 0.88);
  box-shadow: 0 20px 42px rgba(54, 42, 32, 0.08);
}

.eyebrow {
  color: var(--brand);
}

.topbar h1 {
  color: var(--ink);
}

.subhead,
.user-chip {
  border-color: rgba(108, 92, 77, 0.12);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: none;
}

.status-dot {
  background: #4f8a60;
}


.panel,
.panel-login,
.section-block,
.summary-card,
.module-card,
.list-item,
.desktop-table-wrap,
.card-form,
.pro-metric-card,
.root-metric-card,
.stock-chart-shell,
.strategy-rule-group-card,
.side-drawer-panel {
  border-color: rgba(108, 92, 77, 0.14);
  background: rgba(255, 253, 249, 0.97);
  box-shadow: 0 10px 22px rgba(54, 42, 32, 0.04);
}

#app-panel .section-block::before,
#app-panel .card-form::before,
#app-panel .summary-card::before,
#app-panel .module-card::before,
.pro-metric-card::after {
  background: linear-gradient(90deg, rgba(139, 111, 86, 0.5), rgba(139, 111, 86, 0.08), rgba(255, 255, 255, 0));
  opacity: 1;
}

.topbar h1,
#app-panel .hero-panel h2,
.section-block h4,
.summary-card h4,
.module-card h4 {
  color: var(--ink);
}

#app-panel .hero-panel {
  border-color: rgba(108, 92, 77, 0.14);
  background:
    radial-gradient(220px 140px at 100% 0%, rgba(225, 211, 195, 0.38), transparent 72%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.99) 0%, rgba(247, 241, 233, 0.98) 100%);
  box-shadow: 0 16px 34px rgba(54, 42, 32, 0.05);
}

#app-panel .hero-panel::after {
  opacity: 0.75;
}

#app-panel .hero-panel .hero-kicker {
  border-color: rgba(108, 92, 77, 0.14);
  background: rgba(255, 253, 249, 0.92);
  color: var(--brand-deep);
}

#app-panel .hero-panel .hero-desc,
.summary-note,
.module-card p,
.hint,
.content-subhead,
.meta-label,
.user-name,
.subhead {
  color: var(--ink-soft);
}

#app-panel .hero-panel .hero-meta {
  border-color: rgba(108, 92, 77, 0.12);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: none;
}

.app-primary-nav-top,
.app-primary-nav-bottom {
  border-color: rgba(108, 92, 77, 0.12);
  background: rgba(251, 248, 243, 0.92);
  box-shadow: 0 14px 30px rgba(54, 42, 32, 0.08);
}

.app-primary-nav-btn {
  color: var(--ink-soft);
}

.app-primary-nav-btn:hover {
  background: rgba(245, 237, 227, 0.88);
  color: var(--ink);
}

#app-panel .app-primary-nav-btn.active {
  background: rgba(236, 226, 213, 0.86);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(108, 92, 77, 0.08);
}

#app-panel .app-primary-nav-btn.active .sidebar-nav-icon {
  color: var(--brand-deep);
}

.btn {
  border-color: rgba(84, 65, 49, 0.1);
  background: linear-gradient(180deg, #5d493a 0%, #463426 100%);
  box-shadow: 0 12px 24px rgba(54, 42, 32, 0.16);
}

.btn:hover {
  box-shadow: 0 14px 28px rgba(54, 42, 32, 0.18);
}

.btn-subtle {
  border-color: rgba(108, 92, 77, 0.12);
  background: rgba(255, 253, 249, 0.92);
  box-shadow: none;
}

.btn-subtle:hover {
  background: rgba(246, 239, 230, 0.94);
}

.btn-danger {
  background: linear-gradient(180deg, #fff5f2 0%, #fce8e3 100%);
  border-color: rgba(178, 78, 70, 0.12);
}

#app-panel .summary-card h4,
.pro-metric-eyebrow,
.root-metric-label,
.desktop-table thead th {
  color: var(--ink-soft);
}

#app-panel .summary-card,
.pro-metric-card,
.root-metric-card,
.module-card {
  background: rgba(255, 253, 249, 0.98);
}

#app-panel .summary-card.success p,
.pro-metric-card.pmc-success .pro-metric-value {
  color: #6e8e70;
}

#app-panel .summary-card.warn p,
.pro-metric-card.pmc-warn .pro-metric-value {
  color: #9b6a31;
}

.summary-card-icon,
.pro-metric-icon {
  background: rgba(236, 226, 213, 0.7);
}

.summary-card-icon .sidebar-nav-icon,
.pro-metric-icon .sidebar-nav-icon {
  color: var(--brand);
}

#app-panel .subtab-btn {
  border-color: rgba(108, 92, 77, 0.1);
  background: rgba(255, 253, 249, 0.92);
  color: var(--ink-soft);
}

#app-panel .subtab-btn:hover {
  background: rgba(246, 239, 230, 0.94);
  color: var(--ink);
}

#app-panel .subtab-btn.active {
  background: rgba(236, 226, 213, 0.9);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(108, 92, 77, 0.08);
}

.module-kpi,
.badge {
  border-color: rgba(108, 92, 77, 0.1);
  background: rgba(248, 242, 234, 0.86);
  color: var(--ink-soft);
}

.hint-block {
  border-color: rgba(108, 92, 77, 0.1);
  background: rgba(250, 246, 240, 0.92);
}

.desktop-table thead th {
  background: rgba(248, 242, 234, 0.78);
  border-bottom-color: rgba(108, 92, 77, 0.1);
}

.desktop-table td {
  border-bottom-color: rgba(108, 92, 77, 0.08);
}

.desktop-table tbody tr:nth-child(2n) {
  background: rgba(250, 247, 242, 0.68);
}

.desktop-table tbody tr:hover td {
  background: rgba(245, 238, 229, 0.78);
}

.side-drawer-backdrop {
  background: rgba(47, 41, 36, 0.14);
}

.side-drawer-panel {
  box-shadow: -24px 0 48px rgba(54, 42, 32, 0.12);
}

@media (min-width: 768px) {
  .app-primary-nav-top {
    box-shadow: 0 12px 24px rgba(54, 42, 32, 0.05);
  }
}

@media (max-width: 767px) {
  .topbar {
    background: rgba(251, 248, 243, 0.94);
  }

  .app-primary-nav-bottom {
    background: rgba(251, 248, 243, 0.96);
    box-shadow: 0 16px 28px rgba(54, 42, 32, 0.12);
  }

  .app-primary-nav-bottom .app-primary-nav-btn.active {
    background: rgba(233, 223, 210, 0.94);
  }
}

/* ─────────────────────────────────────────
   1A. LOADING SPINNER
───────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.busy-indicator::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(44, 83, 100, 0.25);
  border-top-color: #2c5364;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ─────────────────────────────────────────
   1B. TOAST NOTIFICATION LEVELS
───────────────────────────────────────── */
@keyframes toast-dismiss { from { width: 100%; } to { width: 0; } }
.global-message::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: rgba(255,255,255,0.4);
}
.global-message.show::after { animation: toast-dismiss 3.2s linear forwards; }
.global-message.error.show::after { animation: toast-dismiss 5.2s linear forwards; }
.global-message.success { background: rgba(5, 120, 85, 0.94); }
.global-message.warn { background: rgba(180, 100, 0, 0.94); }
.global-message.info { background: rgba(27, 39, 51, 0.94); }
.global-message .toast-icon {
  font-weight: 700;
  margin-right: 6px;
}

/* ─────────────────────────────────────────
   1C. BUTTON PROCESSING STATE
───────────────────────────────────────── */
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn.processing::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* ─────────────────────────────────────────
   4A. TAB STRIP SCROLL INDICATOR
───────────────────────────────────────── */
.tab-strip-wrap {
  position: relative;
}
.tab-strip-wrap::before,
.tab-strip-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  z-index: 31;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.tab-strip-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.tab-strip-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}
.tab-strip-wrap.can-scroll-left::before { opacity: 1; }
.tab-strip-wrap.can-scroll-right::after { opacity: 1; }

/* ─────────────────────────────────────────
   5A. REQUIRED FIELD INDICATOR
───────────────────────────────────────── */
.form-grid label:has([required]),
.compact-inline-field:has([required]) {
  position: relative;
  padding-left: 0.9em;
}
.form-grid label:has([required])::before,
.compact-inline-field:has([required])::before {
  content: '*';
  color: var(--danger);
  font-weight: 700;
  font-size: 0.75rem;
  position: absolute;
  top: 1px;
  left: 0;
}

/* ─────────────────────────────────────────
   4B. PULL-TO-REFRESH INDICATOR
───────────────────────────────────────── */
.pull-refresh-indicator {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-2);
  transition: transform 0.2s;
}
.pull-refresh-indicator.visible {
  transform: translateX(-50%) translateY(0);
}
.pull-refresh-indicator::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid rgba(44, 83, 100, 0.25);
  border-top-color: #2c5364;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

/* Dark mode removed — light theme only */

/* ═══ Strategy Dashboard ═══ */
.strategy-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.strategy-profile-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface);
  transition: box-shadow var(--tr-fast);
}
.strategy-profile-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.strategy-profile-card .card-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.strategy-profile-card .card-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
  line-height: 1.4;
}
.strategy-profile-card .card-count {
  font-size: 0.85rem;
  font-weight: 500;
}
.strategy-profile-card .card-symbols {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 4px;
}
.strategy-profile-card.active {
  border-color: var(--brand);
  background: var(--brand-muted);
}

.strategy-assign-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.strategy-assign-table th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.strategy-assign-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.strategy-assign-table tr:hover td {
  background: var(--surface-soft);
}

.eval-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.eval-badge.pass { background: #d1fae5; color: #065f46; }
.eval-badge.partial { background: #fef3c7; color: #92400e; }
.eval-badge.waiting { background: #e0e7ff; color: #3730a3; }
.eval-badge.triggered { background: #fce7f3; color: #9d174d; }
.eval-badge.not_set { background: var(--surface-soft); color: var(--ink-soft); }

.signal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.signal-table th {
  text-align: left;
  font-weight: 600;
  padding: 8px 10px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.signal-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.signal-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}
.signal-badge.info { background: #dbeafe; color: #1e40af; }
.signal-badge.warning { background: #fef3c7; color: #92400e; }
.signal-badge.danger { background: #fee2e2; color: #991b1b; }

.macro-indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.macro-group-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--surface);
}
.macro-group-card h5 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.macro-group-card .macro-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.macro-group-card .macro-row:last-child {
  border-bottom: none;
}
.macro-group-card .macro-metric {
  font-weight: 500;
}
.macro-group-card .macro-value {
  font-weight: 600;
}
.macro-group-card .macro-advice {
  font-size: 0.75rem;
  color: var(--ink-soft);
  width: 100%;
  margin-top: 2px;
}

@media (max-width: 768px) {
  .strategy-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
  .macro-indicator-grid {
    grid-template-columns: 1fr;
  }
  .strategy-assign-table,
  .signal-table {
    font-size: 0.78rem;
  }
  .strategy-assign-table th,
  .strategy-assign-table td,
  .signal-table th,
  .signal-table td {
    padding: 5px 6px;
  }
}

/* ─────────────────────────────────────────
   D379. Frontstage refresh and navigation polish
───────────────────────────────────────── */
.subtab-strip,
.app-primary-nav {
  scrollbar-width: none;
}

.subtab-strip::-webkit-scrollbar,
.app-primary-nav::-webkit-scrollbar {
  display: none;
}

.subtab-strip.can-scroll-left,
.subtab-strip.can-scroll-right,
.app-primary-nav.can-scroll-left,
.app-primary-nav.can-scroll-right {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

#app-panel .subtab-strip {
  position: sticky;
  top: 72px;
  z-index: 38;
  align-items: center;
  min-height: 48px;
  padding: 7px;
  border: 1px solid rgba(196, 217, 225, 0.86);
  border-radius: 999px;
  background: rgba(255, 251, 246, 0.88);
  box-shadow: 0 12px 30px rgba(38, 62, 74, 0.09);
  backdrop-filter: blur(16px);
}

#app-panel .subtab-strip .subtab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#app-panel .subtab-strip .subtab-btn.active,
#app-panel .subtab-strip .subtab-btn[aria-pressed='true'] {
  box-shadow: 0 10px 20px rgba(255, 106, 136, 0.18);
}

.desktop-table tbody tr {
  transition: background-color 0.16s ease, box-shadow 0.16s ease;
}

.desktop-table tbody tr:focus-within td {
  background: rgba(255, 246, 238, 0.96);
  box-shadow: inset 3px 0 0 var(--brand);
}

.desktop-table-wrap {
  overscroll-behavior: contain;
}

.global-message[role='status'],
.busy-indicator[role='status'] {
  letter-spacing: 0.01em;
}

@media (max-width: 860px) {
  #app-panel .subtab-strip {
    top: 58px;
    margin-inline: -4px;
    border-radius: 22px;
  }

  .desktop-table-wrap {
    margin-inline: -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-table tbody tr,
  #app-panel .subtab-strip .subtab-btn.active,
  #app-panel .subtab-strip .subtab-btn[aria-pressed='true'] {
    transition: none;
  }
}