/* ============================================================
   Orae Team — 浅色毛玻璃视觉层 (Glassmorphism)
   Loaded LAST on every page so it overrides base + page CSS.
   Light base + dispersed colored glow + translucent glass panels.
   ============================================================ */

:root {
  --glass:     oklch(1 0 0 / 0.56);   /* default glass fill           */
  --glass-2:   oklch(1 0 0 / 0.72);   /* stronger (nav, key panels)   */
  --glass-3:   oklch(1 0 0 / 0.40);   /* faint (inner rails)          */
  --glass-bd:  oklch(1 0 0 / 0.62);   /* hairline highlight edge      */
  --glass-bd2: oklch(0.7 0.02 60 / 0.16);
  --glass-blur: 22px;
  --glass-sh:  0 14px 40px oklch(0.42 0.05 40 / 0.12), 0 2px 8px oklch(0.42 0.05 40 / 0.06);
  --glass-sh-lg: 0 30px 70px oklch(0.4 0.06 40 / 0.18), 0 4px 14px oklch(0.4 0.06 40 / 0.08);
  --glass-hi:  inset 0 1px 0 oklch(1 0 0 / 0.7), inset 0 0 0 1px oklch(1 0 0 / 0.18);
  --page:      oklch(0.972 0.008 70);
}

/* ---------- light dispersed glow background ---------- */
html { background: var(--page); }
body { background: transparent; }
body::before {
  content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 6% -8%,  oklch(0.88 0.10 48 / 0.62), transparent 62%),
    radial-gradient(42vw 42vw at 100% 2%, oklch(0.87 0.09 358 / 0.52), transparent 60%),
    radial-gradient(58vw 56vw at 84% 96%, oklch(0.86 0.09 255 / 0.50), transparent 62%),
    radial-gradient(46vw 46vw at 10% 104%,oklch(0.89 0.08 150 / 0.40), transparent 62%);
  filter: saturate(1.05);
}

/* deep theme keeps a darker glow but still glassy */
html[data-theme="deep"] {
  --glass:    oklch(0.3 0.012 65 / 0.5);
  --glass-2:  oklch(0.32 0.013 65 / 0.66);
  --glass-3:  oklch(0.3 0.012 65 / 0.35);
  --glass-bd: oklch(1 0 0 / 0.12);
  --glass-bd2: oklch(1 0 0 / 0.08);
  --page:     oklch(0.2 0.012 65);
}
html[data-theme="deep"] body::before {
  background:
    radial-gradient(46vw 46vw at 6% -8%,  oklch(0.5 0.12 40 / 0.4), transparent 62%),
    radial-gradient(52vw 52vw at 92% 4%,  oklch(0.45 0.1 300 / 0.34), transparent 60%),
    radial-gradient(58vw 56vw at 84% 98%, oklch(0.42 0.1 255 / 0.4), transparent 62%);
}

/* ============================================================
   Shared primitives re-skinned as glass
   ============================================================ */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-bd2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--glass-sh), var(--glass-hi);
}
.tag {
  background: oklch(1 0 0 / 0.45);
  border-color: var(--glass-bd2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tag.accent { background: color-mix(in oklch, var(--accent) 14%, oklch(1 0 0 / 0.5)); }

.btn-soft, .btn-ghost {
  background: oklch(1 0 0 / 0.46);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 2px 10px oklch(0.42 0.05 40 / 0.07), var(--glass-hi);
}
.btn-soft:hover, .btn-ghost:hover { background: oklch(1 0 0 / 0.66); border-color: oklch(1 0 0 / 0.8); }
/* primary keeps brand color but gains a soft glassy highlight */
.btn-primary {
  background:
    linear-gradient(180deg, oklch(1 0 0 / 0.22), oklch(1 0 0 / 0) 42%),
    var(--accent);
  box-shadow: 0 8px 22px color-mix(in oklch, var(--accent) 40%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.4);
}
.btn-primary:hover { background: linear-gradient(180deg, oklch(1 0 0 / 0.18), oklch(1 0 0 / 0) 42%), var(--accent-press); }

/* ============================================================
   Nav (homepage) — frosted
   ============================================================ */
.nav {
  background: oklch(1 0 0 / 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border-bottom: 1px solid oklch(1 0 0 / 0.4);
}
.nav.scrolled {
  background: oklch(1 0 0 / 0.7);
  border-bottom-color: var(--glass-bd2);
  box-shadow: 0 6px 24px oklch(0.42 0.05 40 / 0.08);
}
.brand .mark { box-shadow: 0 4px 12px color-mix(in oklch, var(--accent) 38%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.45); }
.nav-links a:hover { background: oklch(1 0 0 / 0.5); }

/* ============================================================
   Homepage — bands & glass cards
   ============================================================ */
.band.alt {
  background: oklch(1 0 0 / 0.34);
  border-top: 1px solid oklch(1 0 0 / 0.5);
  border-bottom: 1px solid oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

.capx, .plan, .fc-output, .recommend-card, .hero-float, .starter,
.scan-txt, .disclaim {
  background: var(--glass);
  border: 1px solid var(--glass-bd2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--glass-sh), var(--glass-hi);
}
.starter, .hero-float, .fc-output { box-shadow: var(--glass-sh-lg), var(--glass-hi); }
.capx-stage { background: oklch(1 0 0 / 0.28); border-bottom-color: var(--glass-bd2); }
.starter-drop { background: oklch(1 0 0 / 0.4); border-color: oklch(0.7 0.02 60 / 0.25); }
.starter-drop:hover, .starter-drop.drag { background: color-mix(in oklch, var(--accent) 10%, oklch(1 0 0 / 0.5)); }
.eg-chip, .ready-dir, .fc-chip, .v3-tab, .fc-idx { background: oklch(1 0 0 / 0.5); border-color: var(--glass-bd2); }
.plan.feature { box-shadow: 0 0 0 1.5px var(--accent), var(--glass-sh-lg); }
.finale-card {
  background: oklch(1 0 0 / 0.4);
  border-color: oklch(1 0 0 / 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--glass-sh-lg), var(--glass-hi);
}

/* footer sits on glow, lighten its divider */
.foot { border-top-color: oklch(1 0 0 / 0.5); }

/* ============================================================
   Workbench shell — frosted sidebar + topbar + panels
   ============================================================ */
body.wb { background: transparent; }
.wb-app { background: transparent !important; }
.wb-main { background: transparent !important; }
.wb-config { background: transparent !important; }
.wb-result {
  background: oklch(1 0 0 / 0.42) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-left: 1px solid oklch(1 0 0 / 0.5) !important;
}
.wb-side {
  background: oklch(1 0 0 / 0.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  border-right: 1px solid oklch(1 0 0 / 0.5) !important;
}
.wb-top, .wb-topbar, .wb-main-head {
  background: oklch(1 0 0 / 0.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid oklch(1 0 0 / 0.5) !important;
}
.wb-plan {
  background: oklch(1 0 0 / 0.5) !important;
  border: 1px solid var(--glass-bd2) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--glass-sh), var(--glass-hi);
}
.wb-brand .mark { box-shadow: 0 4px 12px color-mix(in oklch, var(--accent) 38%, transparent), inset 0 1px 0 oklch(1 0 0 / 0.45); }

/* data center — future KPI placeholders */
.dc-kpi.future { opacity: 0.62; }
.dc-kpi.future .dc-v { color: var(--ink-3); }
.dc-kpi-soon { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 100px; }

/* ============================================================
   Login page — frosted brand panel + form card
   ============================================================ */
.auth { position: relative; }
.auth-brand {
  background: oklch(1 0 0 / 0.34) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-right: 1px solid oklch(1 0 0 / 0.5);
}
.auth-form { position: relative; }
.af-inner {
  background: var(--glass-2);
  border: 1px solid var(--glass-bd);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--glass-sh-lg), var(--glass-hi);
  border-radius: var(--r-lg);
  padding: 34px 34px 30px;
}
.af-control, .af-intent, .af-cc { background: oklch(1 0 0 / 0.5); }
.af-alt { background: oklch(1 0 0 / 0.5); }
.ab-reel { border-color: oklch(1 0 0 / 0.5); }

/* ============================================================
   Workbench — wizard confirm page + greyed future entries
   ============================================================ */
/* one-line 成片命名 display on confirm page */
.nameline { border: 1px solid var(--glass-bd2); border-radius: var(--r-sm); background: oklch(1 0 0 / 0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.nl-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.nl-k { font-size: 12.5px; font-weight: 600; color: var(--ink-3); flex: none; }
.nl-v { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; }
.nl-edit { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent); padding: 4px 10px; border-radius: 100px; border: 1px solid var(--accent-line); background: color-mix(in oklch, var(--accent) 8%, transparent); }
.nl-edit:hover { background: var(--accent-soft); }
.nl-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--glass-bd2); padding-top: 14px; }

/* params review block */
.plan-review { display: flex; flex-direction: column; gap: 12px; }
.plan-review .plan-edit-lead { font-size: 12.5px; font-weight: 560; color: var(--ink-3); }
.plan-review .sb-chips { display: flex; flex-wrap: wrap; gap: 9px; }

.wz-namefield .field-label { margin-bottom: 8px; }

/* greyed multi-store dropdown */
.dd-future { display: flex; align-items: center; gap: 8px; }
.dd-future .soon, .dd-ws-new .soon { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 7px; border-radius: 100px; }
.dd-ws-new .soon { margin-left: auto; }
.dd-ws-item.disabled, .dd-ws-new.disabled { opacity: 0.5; cursor: not-allowed; }
.dd-ws-item.disabled:hover, .dd-ws-new.disabled:hover { background: transparent; }