/* ============================================================
   Dashboard Inspo — global page + 3 scoped dashboard themes
   ============================================================ */
:root {
  --bg: #f4f2ec;
  --ink: #171613;
  --ink-2: #4a4842;
  --mute: #8b8779;
  --line: rgba(23, 22, 19, 0.08);
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --grot: "Space Grotesk", "Inter", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* -------- TOP NAV -------- */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 40px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
}
.brand svg { color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--ink-2); }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links .pill {
  padding: 8px 14px; border-radius: 999px;
  background: var(--ink); color: #f4f2ec; font-weight: 500; font-size: 13px;
}

/* -------- HERO -------- */
.hero { padding: 80px 40px 40px; }
.hero-inner { max-width: 1100px; margin: 0 auto; }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--mute);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px;
}
.hero-title {
  margin: 22px 0 20px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 8vw, 108px); line-height: 0.98; letter-spacing: -0.02em;
}
.hero-title em { font-style: italic; color: #7a5b3a; }
.hero-sub {
  max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 24px;
}
.hero-meta {
  display: inline-flex; gap: 14px; align-items: center; font-size: 13px; color: var(--mute);
  font-family: var(--mono);
}
.hero-meta b { color: var(--ink); font-family: var(--sans); font-size: 16px; }

/* -------- GALLERY GRID -------- */
.gallery {
  padding: 40px 40px 80px;
  display: flex; flex-direction: column; gap: 80px;
  max-width: 1400px; margin: 0 auto;
}
.card {
  display: flex; flex-direction: column; gap: 18px;
}
.card-meta {
  display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-2);
  font-family: var(--mono); letter-spacing: .02em;
}
.card-meta .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--ink); color: #f4f2ec; font-weight: 600; font-size: 12px;
}
.card-meta .tag { color: var(--mute); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.card-meta .chip {
  margin-left: auto; padding: 6px 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); font-size: 12px; color: var(--ink);
}
.mock {
  position: relative; border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.04);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  min-height: 620px;
}

/* ============================================================
   THEME 1 — GROVE (sage & cream, personal wealth)
   ============================================================ */
.grove-mock {
  background: #ece7d7;
  padding: 22px;
  display: flex; gap: 18px;
  color: #171613;
  font-family: var(--sans);
}
.grove-rail {
  width: 58px; background: #fff; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.grove-rail .rail-logo {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: #3d5b3f;
}
.rail-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 0;
  background: transparent; color: #6b6b6b; cursor: pointer;
  display: grid; place-items: center;
}
.rail-btn.active { background: #171613; color: #ece7d7; }
.rail-spacer { flex: 1; }
.rail-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #3d5b3f; color: #ece7d7;
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  margin-top: 4px;
}

.grove-main { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.grove-head {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 4px 4px 6px;
}
.grove-head h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.grove-head p { margin: 2px 0 0; color: #7a7869; font-size: 13px; }
.grove-head-right { display: flex; align-items: center; gap: 10px; }
.grove-search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 12px; background: #fff; border-radius: 999px;
  color: #8a8779; font-size: 13px; min-width: 240px;
}
.grove-search svg { color: #171613; }
.ico-btn {
  position: relative; width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: #fff; display: grid; place-items: center; cursor: pointer;
}
.ico-btn .dot {
  position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border-radius: 50%;
  background: #d64b3b;
}

.grove-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi {
  background: #fff; border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label { font-size: 11px; color: #8a8779; }
.kpi-row { display: flex; justify-content: space-between; align-items: center; }
.kpi-val { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.kpi .mini-bars, .kpi svg { color: #3d5b3f; }
.kpi .coin {
  width: 32px; height: 32px; border-radius: 50%; background: #efe6cf;
  color: #a58236; display: grid; place-items: center; font-weight: 700; font-size: 13px;
}
.kpi-dark { background: #3d5b3f; color: #ece7d7; }
.kpi-dark .kpi-label { color: #b6c6b8; }
.kpi-dark svg { color: #ece7d7; }

.grove-row2 { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.grove-row3 { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.panel { background: #fff; border-radius: 14px; padding: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-title { font-weight: 600; font-size: 14px; }
.panel-title.small { font-size: 13px; margin-bottom: 4px; }
.badge-ok { color: #3d5b3f; font-size: 11px; font-weight: 500; margin-left: 4px; }
.panel-select { font-size: 11px; color: #8a8779; }
.chart-figures { display: flex; gap: 26px; margin: 10px 0 2px; }
.fig-label { font-size: 11px; color: #8a8779; }
.fig-row { display: flex; align-items: center; gap: 8px; }
.fig { font-weight: 700; font-size: 16px; }
.pill-up { background: #e7f0e5; color: #3d5b3f; font-size: 10px; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.pill-dn { background: #fbe2dd; color: #b23e2b; font-size: 10px; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.grove-line { width: 100%; height: 120px; }

.grove-gauge { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: relative; }
.gauge-big { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.gauge-note { font-size: 11px; color: #8a8779; }
.gauge-svg { width: 100%; margin-top: 6px; }
.gauge-pct { position: absolute; right: 18px; bottom: 16px; font-weight: 700; font-size: 20px; }

.grove-profile { display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar-lg { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; }
.prof-name { font-weight: 700; margin-top: 8px; }
.prof-mail { font-size: 11px; color: #8a8779; }
.prof-stats { display: flex; gap: 20px; margin-top: 10px; font-size: 11px; color: #8a8779; }
.prof-stats b { display: block; font-size: 15px; color: #171613; font-weight: 700; }

.grove-cards { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.grove-cards h4 { margin: 0 0 8px; font-size: 16px; line-height: 1.2; }
.mut { color: #8a8779; font-size: 11px; margin: 0 0 12px; line-height: 1.5; }
.btn-soft {
  background: #ece7d7; color: #171613; border: 0; padding: 8px 14px;
  border-radius: 999px; font-size: 12px; cursor: pointer; font-weight: 500;
}
.btn-solid {
  background: #3d5b3f; color: #ece7d7; border: 0; padding: 8px 14px;
  border-radius: 999px; font-size: 12px; cursor: pointer; font-weight: 500;
}
.fake-cards { position: relative; width: 150px; height: 100px; }
.fc { position: absolute; width: 130px; height: 78px; border-radius: 10px; }
.fc1 { top: 0; left: 20px; background: linear-gradient(135deg, #efe9d7, #d4cebb); }
.fc2 { top: 10px; left: 10px; background: linear-gradient(135deg, #7a9575, #4a6c4c); }
.fc3 { top: 22px; left: 0; background: linear-gradient(135deg, #2b2b28, #171613); }

.grove-transfers .tx-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tx-list li { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center; }
.tx-bar { display: block; height: 30px; width: 3px; border-radius: 2px; background: #3d5b3f; }
.tx-list b { font-size: 12px; }
.tx-list span:not(.pill-up):not(.pill-dn) { font-size: 10px; color: #8a8779; }
.tx-list div { display: flex; flex-direction: column; gap: 2px; }

.grove-safe { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.grove-safe h4 { margin: 4px 0 0; font-size: 15px; }

/* ============================================================
   THEME 2 — FLUX (black + neon lime, health)
   ============================================================ */
.flux-mock {
  background: #c8e64f;
  padding: 20px;
  display: flex; gap: 20px;
  color: #f4f2ec;
  font-family: var(--sans);
}
.flux-mock::before {
  content: ""; position: absolute; inset: 20px; border-radius: 22px;
  background: #1a1a1a;
  z-index: 0;
}
.flux-side {
  position: relative; z-index: 1;
  width: 190px; padding: 18px 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.flux-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; padding: 4px 8px;
  letter-spacing: -0.01em;
}
.flux-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.flux-nav li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; font-size: 13px;
  color: #b7b7b7; cursor: pointer;
}
.flux-nav li.on {
  background: #fff; color: #1a1a1a; font-weight: 600;
}
.flux-nav .ntf {
  margin-left: auto; background: #d64b3b; color: #fff;
  font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 700;
}
.flux-nav .ntf-lime { background: #c8e64f; color: #1a1a1a; }
.flux-promo {
  margin-top: auto; background: #c8e64f; color: #1a1a1a;
  border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.flux-promo::after {
  content: "🚀"; position: absolute; right: -6px; bottom: 20px; font-size: 44px;
  transform: rotate(-15deg);
}
.flux-promo b { font-size: 14px; }
.flux-promo p { font-size: 11px; margin: 0; line-height: 1.45; color: #1a1a1a; padding-right: 40px; }
.flux-promo button {
  align-self: stretch; margin-top: 6px; background: #1a1a1a; color: #c8e64f;
  border: 0; padding: 8px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  font-weight: 600; position: relative; z-index: 1;
}

.flux-main {
  position: relative; z-index: 1;
  flex: 1; padding: 18px 20px 20px 4px;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.flux-head { display: flex; justify-content: space-between; align-items: center; }
.flux-user { display: flex; align-items: center; gap: 10px; }
.flux-user .av {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #c8e64f, #6b7a2a);
}
.flux-user b { font-size: 13px; display: block; }
.flux-user span { font-size: 11px; color: #9c9c9c; }
.flux-head-r { display: flex; align-items: center; gap: 10px; }
.flux-search {
  background: #262626; padding: 8px 14px; border-radius: 999px;
  color: #9c9c9c; font-size: 12px; min-width: 220px;
}
.bell {
  position: relative; width: 34px; height: 34px; border-radius: 999px;
  background: #262626; border: 0; color: #f4f2ec; cursor: pointer;
  font-size: 13px;
}
.bell i {
  position: absolute; top: -3px; right: -3px;
  background: #d64b3b; color: #fff; font-size: 9px; padding: 1px 5px;
  border-radius: 999px; font-style: normal; font-weight: 700;
}

.flux-title { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.flux-title h3 { margin: 0; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.flux-title p { margin: 6px 0 0; color: #9c9c9c; font-size: 13px; }
.flux-date { display: flex; flex-direction: column; align-items: end; gap: 6px; font-size: 12px; color: #9c9c9c; }
.today { background: #fff; color: #1a1a1a; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.today.lime { background: #c8e64f; color: #1a1a1a; }

.flux-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.9fr 0.9fr;
  grid-template-rows: auto auto;
  gap: 12px;
  min-height: 0;
}
.flux-card { background: #fff; color: #1a1a1a; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.flux-card.energy { grid-row: span 2; }
.flux-card.wellness { }
.flux-card.sleep { grid-column: span 2; background: #1f1f1f; color: #f4f2ec; }
.flux-col { display: flex; flex-direction: column; gap: 12px; }
.flux-col .flux-card { flex: 1; }

.fc-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b6b6b; font-weight: 500; }
.fc-head .ico { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: #f0f0f0; align-items: center; justify-content: center; font-size: 12px; }
.fc-head .dots { margin-left: auto; color: #bbb; font-style: normal; }
.fc-big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.fc-big .tick { background: #c8e64f; color: #1a1a1a; font-size: 10px; padding: 2px 6px; border-radius: 999px; font-weight: 700; vertical-align: middle; margin-left: 6px; }
.fc-big .unit { color: #9c9c9c; font-size: 13px; font-weight: 500; }
.fc-sub { font-size: 11px; color: #6b6b6b; margin-top: -6px; }
.fc-note { font-size: 11px; color: #6b6b6b; margin-top: -4px; }
.fc-note b { color: #1a1a1a; font-weight: 700; }

.bubbles { position: relative; height: 110px; margin: 4px 0; }
.b { position: absolute; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #1a1a1a; font-size: 15px; }
.b span { display: block; font-size: 9px; font-weight: 500; color: rgba(0,0,0,.6); }
.b1 { width: 78px; height: 78px; background: #b39dff; left: 12px; top: 12px; }
.b2 { width: 62px; height: 62px; background: #1a1a1a; color: #fff; left: 96px; top: 26px; }
.b2 span { color: rgba(255,255,255,.7); }
.b3 { width: 52px; height: 52px; background: #c8e64f; left: 60px; top: 60px; }

.bar-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; font-size: 11px; color: #6b6b6b; }
.bar { height: 6px; background: #f0f0f0; border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: #b39dff; }
.bar.dark { background: #f0f0f0; }
.bar.dark i { background: #1a1a1a; }
.bar.lime i { background: #c8e64f; }

.dot-grid {
  flex: 1; margin-top: 6px; min-height: 80px;
  background-image:
    radial-gradient(circle, #b39dff 40%, transparent 40%),
    radial-gradient(circle, #e5deff 40%, transparent 40%);
  background-size: 12px 12px, 12px 12px;
  background-position: 0 0, 6px 6px;
  background-repeat: repeat;
  border-radius: 8px;
  -webkit-mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
          mask-image: linear-gradient(to right, black 0%, black 60%, transparent 100%);
}

.sleep-figs { display: flex; gap: 30px; margin-bottom: 6px; }
.sleep-figs > div { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #9c9c9c; }
.sleep-figs b { font-size: 24px; color: #f4f2ec; font-weight: 700; letter-spacing: -0.01em; }
.sleep-figs small { font-size: 12px; color: #9c9c9c; margin-left: 2px; }
.lime-bar, .pur-bar { display: inline-block; width: 4px; height: 22px; border-radius: 2px; }
.lime-bar { background: #c8e64f; }
.pur-bar { background: #b39dff; }
.sleep-chart { width: 100%; height: 130px; }
.sleep-months { display: flex; justify-content: space-between; font-size: 10px; color: #9c9c9c; margin-top: 2px; padding: 0 12px; }

/* ============================================================
   THEME 3 — ATLAS (cream + coral, logistics)
   ============================================================ */
.atlas-mock {
  background: #f7e6e4;
  padding: 20px;
  display: flex; gap: 18px;
  color: #171613;
  font-family: var(--sans);
}
.atlas-side {
  width: 200px; background: #fdfaf6; border-radius: 18px;
  padding: 18px 12px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}
.atlas-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; padding: 4px 6px;
  letter-spacing: -0.01em;
}
.atlas-user {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px;
  padding: 8px 10px;
}
.atlas-user .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #ffb3a2, #e0403c); }
.atlas-user b { font-size: 12px; display: block; }
.atlas-user span { font-size: 10px; color: #8a8175; }
.atlas-user .cv { margin-left: auto; color: #8a8175; }

.atlas-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.atlas-nav li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; font-size: 12px; color: #4a4842; cursor: pointer;
}
.atlas-nav li .ic { font-size: 11px; color: #8a8175; width: 14px; text-align: center; }
.atlas-nav li.on { background: #fdece9; color: #e0403c; font-weight: 600; }
.atlas-nav li.on .ic { color: #e0403c; }
.atlas-nav .badge { margin-left: auto; background: #e0403c; color: #fff; font-size: 9px; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.atlas-sep { height: 1px; background: rgba(0,0,0,.06); margin: 4px 0; }

.atlas-promo {
  margin-top: auto; background: #fdece9; border-radius: 14px; padding: 12px;
  position: relative; overflow: hidden;
}
.atlas-promo::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  background: linear-gradient(135deg, #e0403c, #b23028);
  border-radius: 6px; transform: rotate(30deg);
}
.atlas-promo b { font-size: 13px; display: block; }
.atlas-promo p { font-size: 10px; color: #8a8175; margin: 4px 0 10px; line-height: 1.4; }
.atlas-promo button {
  background: #171613; color: #fdfaf6; border: 0; padding: 7px 12px;
  border-radius: 999px; font-size: 11px; cursor: pointer; font-weight: 500;
}

.atlas-main { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.atlas-head { display: flex; justify-content: space-between; align-items: center; }
.atlas-head h3 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.crumbs { font-size: 11px; color: #8a8175; margin-top: 2px; }
.crumbs span { color: #cabab5; margin: 0 6px; }
.atlas-search {
  background: #fdfaf6; padding: 9px 16px; border-radius: 999px;
  color: #8a8175; font-size: 12px; min-width: 240px;
}

.atlas-row1 { display: grid; grid-template-columns: 200px 1fr 1.4fr; gap: 12px; }
.atlas-hero {
  position: relative; background: #fdfaf6; border-radius: 16px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  min-height: 200px;
}
.ah-badge {
  width: 32px; height: 32px; border-radius: 8px; background: #fdece9;
  display: grid; place-items: center; font-size: 15px;
}
.ah-label { font-size: 12px; color: #4a4842; margin-top: auto; }
.ah-big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin-top: -2px; }
.atlas-hero .pill-up { align-self: start; }
.atlas-hero .fold {
  position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  background: linear-gradient(225deg, #e0403c 0 50%, transparent 50%);
  border-radius: 0 16px 0 30px;
}

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.mini {
  background: #fdfaf6; border-radius: 12px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.mh { font-size: 11px; color: #8a8175; display: flex; align-items: center; gap: 6px; }
.mini b { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.pill-up, .pill-dn { display: inline-block; }
.atlas-mock .pill-up { background: #e6f0e7; color: #3d5b3f; }
.atlas-mock .pill-dn { background: #fbe2dd; color: #b23e2b; }

.atlas-line { background: #fdfaf6; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.al-head { display: flex; justify-content: space-between; align-items: start; }
.al-title { font-size: 13px; font-weight: 600; }
.al-big { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.al-select { font-size: 11px; color: #8a8175; padding: 6px 12px; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; }
.al-chart { width: 100%; height: 130px; }

.atlas-row2 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.atlas-panel { background: #fdfaf6; border-radius: 16px; padding: 14px 16px; }
.ap-head { display: flex; justify-content: space-between; align-items: start; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.ap-head span { color: #cabab5; }
.ap-head .hint { font-size: 10px; color: #8a8175; font-weight: 400; margin-top: 2px; }
.ap-head .hint b { color: #171613; font-weight: 700; }
.ap-head .scale { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #8a8175; font-weight: 400; }
.ap-head .scale i { width: 12px; height: 8px; border-radius: 2px; }
.ap-head .scale i:nth-child(2) { background: #f6cfc5; }
.ap-head .scale i:nth-child(3) { background: #e0403c; }
.ap-head .scale i:nth-child(4) { background: #171613; }
.ap-head .scale i:nth-child(5) { background: #171613; }
.ap-head .scale > span { margin-left: 6px; padding: 4px 10px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; color: #171613; }

.atlas-panel.country ul, .atlas-panel.company ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.atlas-panel.country li { display: grid; grid-template-columns: 20px 1fr 60px auto; gap: 8px; align-items: center; font-size: 11px; }
.atlas-panel.country .flg { font-size: 14px; }
.atlas-panel.country b { font-size: 12px; font-weight: 600; }
.bar1 { display: block; height: 6px; background: #f0e7e5; border-radius: 999px; overflow: hidden; }
.bar1 s { display: block; height: 100%; background: #e0403c; text-decoration: none; }
.atlas-panel.country li span:last-child { font-size: 10px; color: #8a8175; }

.atlas-panel.company li { display: grid; grid-template-columns: 22px 1fr 80px auto; gap: 8px; align-items: center; font-size: 11px; }
.atlas-panel.company .cico {
  width: 22px; height: 22px; border-radius: 6px; background: #fdece9; color: #e0403c;
  display: grid; place-items: center; font-size: 11px;
}
.atlas-panel.company b { font-size: 12px; font-weight: 600; }
.atlas-panel.company .mut { font-size: 10px; color: #8a8175; font-style: normal; margin: 0; }
.atlas-panel.company li span:last-child { font-size: 11px; font-weight: 600; }

.heatmap {
  display: grid; grid-template-columns: 40px repeat(13, 1fr); gap: 3px;
  margin-top: 4px;
}
.heat-axis { display: grid; grid-template-columns: 40px repeat(13, 1fr); font-size: 9px; color: #8a8175; margin-top: 6px; }
.heat-axis > span { padding-left: 4px; }
.heat-axis > span:first-child { visibility: hidden; }
.hm-day { font-size: 10px; color: #8a8175; align-self: center; }
.hm-cell { height: 14px; border-radius: 3px; }

.atlas-table { background: #fdfaf6; border-radius: 16px; padding: 14px 16px; }
.tab-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.tab-head b { font-size: 14px; }
.tabs { display: flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11px; color: #4a4842; }
.tabs span { padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.tabs span.on { background: #171613; color: #fdfaf6; }
.tabs .right { margin-left: 10px; border: 1px solid rgba(0,0,0,.1); padding: 6px 10px; }

.atlas-table table { width: 100%; border-collapse: collapse; font-size: 11px; }
.atlas-table th {
  text-align: left; font-weight: 500; font-size: 10px; color: #8a8175;
  border-bottom: 1px solid rgba(0,0,0,.06); padding: 8px 6px;
}
.atlas-table td {
  padding: 8px 6px; border-bottom: 1px solid rgba(0,0,0,.04); vertical-align: middle;
}
.atlas-table td b { display: block; font-weight: 600; }
.atlas-table td i { display: block; color: #8a8175; font-style: normal; font-size: 10px; margin-top: 2px; }
.prg { width: 60px; height: 5px; background: #f0e7e5; border-radius: 999px; overflow: hidden; display: inline-block; margin-right: 6px; vertical-align: middle; }
.prg s { display: block; height: 100%; background: #e0403c; text-decoration: none; }
.st { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; }
.st-tr { background: #171613; color: #fdfaf6; }
.st-out { background: #fbe2dd; color: #b23e2b; }
.st-dl { background: #e6f0e7; color: #3d5b3f; }
.st-pr { background: #eef1ff; color: #4a5bd6; }

/* -------- ABOUT / TEASER -------- */
.about {
  max-width: 1400px; margin: 40px auto 0; padding: 40px;
  border-top: 1px solid var(--line);
}
.about-inner {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start;
}
.about h2 { font-family: var(--serif); font-weight: 400; font-size: 44px; margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.05; }
.about p { color: var(--ink-2); max-width: 46ch; font-size: 15px; }
.teaser { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
.teaser li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px; border-bottom: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2);
}
.teaser li span {
  font-family: var(--mono); font-size: 11px; color: var(--mute);
}

/* -------- FOOT -------- */
.foot {
  display: flex; justify-content: space-between; padding: 30px 40px;
  color: var(--mute); font-size: 12px; font-family: var(--mono);
  border-top: 1px solid var(--line);
}

/* -------- RESPONSIVE -------- */
@media (max-width: 1200px) {
  .mock { min-height: unset; aspect-ratio: unset; }
}
@media (max-width: 900px) {
  .site-nav, .hero, .gallery, .about, .foot { padding-left: 22px; padding-right: 22px; }
  .about-inner { grid-template-columns: 1fr; }
  .teaser { grid-template-columns: 1fr; }
  .nav-links a:not(.pill) { display: none; }
}

/* ============================================================
   THEME 4 — NOCTURNE (deep navy fintech, terminal ops)
   ============================================================ */
.nocturne-mock {
  background: #0b1220;
  color: #cfd8ea;
  font-family: var(--sans);
  padding: 0;
  display: flex;
}
.noc-side {
  width: 220px;
  background: #0a1020;
  border-right: 1px solid #1a2439;
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
}
.noc-brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  color: #ffffff;
}
.dot-lit { width: 8px; height: 8px; border-radius: 50%; background: #4c8dff; box-shadow: 0 0 12px #4c8dff; }
.noc-brand .env {
  margin-left: auto; font-size: 9px; padding: 3px 6px;
  background: rgba(76,141,255,.14); color: #4c8dff; border-radius: 4px;
  letter-spacing: .12em;
}
.noc-search {
  background: #0f1729; border: 1px solid #1a2439; border-radius: 8px;
  padding: 8px 10px; font-size: 11px; color: #6a7ba0;
}
.noc-section {
  font-size: 9px; color: #4a597c; letter-spacing: .18em;
  padding: 8px 4px 2px;
}
.noc-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.noc-nav li {
  padding: 8px 10px; border-radius: 6px; font-size: 12px;
  color: #8a9ab8; display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.noc-nav li.on { background: rgba(76,141,255,.12); color: #cfd8ea; }
.noc-nav li span {
  margin-left: auto; font-size: 10px; padding: 1px 6px;
  background: #1a2439; border-radius: 999px; color: #8a9ab8;
}
.noc-nav li span.red { background: #3a1420; color: #ff7a90; }
.noc-status {
  margin-top: auto; display: flex; gap: 10px; align-items: center;
  padding: 10px; border: 1px solid #1a2439; border-radius: 8px;
}
.pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #3ee07f;
  box-shadow: 0 0 0 4px rgba(62,224,127,.12);
}
.noc-status b { display: block; font-size: 11px; color: #cfd8ea; }
.noc-status span { font-size: 10px; color: #6a7ba0; }

.noc-main { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.noc-head { display: flex; justify-content: space-between; align-items: end; }
.crumb-mono { font-family: var(--mono); font-size: 10px; color: #6a7ba0; letter-spacing: .08em; }
.crumb-mono b { color: #cfd8ea; font-weight: 500; }
.noc-head h3 { margin: 2px 0 0; font-size: 22px; color: #fff; letter-spacing: -0.01em; }
.noc-time { font-family: var(--mono); font-size: 11px; color: #6a7ba0; }
.noc-time .live { color: #3ee07f; margin-right: 6px; }
.noc-time b { color: #cfd8ea; }

.noc-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tile {
  background: #0f1729; border: 1px solid #1a2439; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.tile span { font-size: 10px; color: #6a7ba0; letter-spacing: .06em; }
.tile b { font-size: 18px; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
.tile i { font-family: var(--mono); font-size: 10px; font-style: normal; }
.tile i.up { color: #3ee07f; }
.tile i.dn { color: #ff7a90; }
.tile i.dim { color: #6a7ba0; }

.noc-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; min-height: 0; }
.noc-chart { background: #0f1729; border: 1px solid #1a2439; border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.nc-head { display: flex; justify-content: space-between; align-items: center; }
.nc-head b { color: #fff; font-size: 13px; }
.pill-lit { background: rgba(62,224,127,.12); color: #3ee07f; font-size: 10px; padding: 2px 7px; border-radius: 999px; font-weight: 600; margin-left: 6px; }
.nc-tf { display: flex; gap: 4px; font-family: var(--mono); font-size: 10px; }
.nc-tf span { padding: 3px 8px; border-radius: 4px; color: #6a7ba0; cursor: pointer; }
.nc-tf span.on { background: #1a2439; color: #cfd8ea; }
.candles { width: 100%; height: 200px; }

.noc-book { background: #0f1729; border: 1px solid #1a2439; border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 11px; }
.nb-head { display: flex; justify-content: space-between; align-items: center; }
.nb-head b { color: #fff; font-size: 13px; font-family: var(--sans); }
.nb-head span { font-size: 10px; color: #6a7ba0; }
.nb-list { display: flex; flex-direction: column; gap: 2px; }
.nb-list > div { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px 6px; align-items: center; }
.nb-list > div > s { position: absolute; inset: 0 auto 0 0; height: 100%; text-decoration: none; opacity: .18; border-radius: 3px; }
.nb-asks > div > s { background: #ff7a90; }
.nb-asks > div span { color: #ff7a90; z-index: 1; }
.nb-bids > div > s { background: #3ee07f; }
.nb-bids > div span { color: #3ee07f; z-index: 1; }
.nb-list > div b { color: #cfd8ea; text-align: right; z-index: 1; font-weight: 500; }
.nb-mid { text-align: center; padding: 6px 0; border-top: 1px solid #1a2439; border-bottom: 1px solid #1a2439; }
.nb-mid b { color: #fff; font-size: 15px; letter-spacing: -0.01em; font-family: var(--sans); }
.nb-mid span { color: #6a7ba0; font-size: 10px; margin-left: 8px; }

.noc-terminal { background: #070c17; border: 1px solid #1a2439; border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 11px; }
.nt-head { display: flex; align-items: center; gap: 10px; color: #6a7ba0; margin-bottom: 6px; }
.nt-head .live { color: #3ee07f; }
.nt-head .dim { margin-left: auto; font-size: 10px; }
.nt-body > div { color: #8a9ab8; padding: 3px 0; }
.nt-body i { color: #4a597c; font-style: normal; margin-right: 8px; }
.nt-body b { font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-right: 6px; font-size: 10px; }
.nt-body b.g { background: rgba(62,224,127,.15); color: #3ee07f; }
.nt-body b.y { background: rgba(255,193,7,.15); color: #ffc107; }
.nt-body b.r { background: rgba(255,122,144,.15); color: #ff7a90; }

/* ============================================================
   THEME 5 — SAND (warm AI workspace, ref image 1)
   ============================================================ */
.sand-mock {
  background: #ece7dc;
  padding: 22px;
  display: flex; gap: 18px;
  color: #171613;
  font-family: var(--sans);
  position: relative;
}
.sand-mock::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 90%, rgba(196,182,150,.4), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(180,170,140,.35), transparent 60%);
  pointer-events: none;
}
.sand-side {
  width: 200px; background: #e0d9c9; border-radius: 16px;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 1;
}
.sand-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 4px 6px; }
.sand-brand .wave { color: #d97a3d; font-size: 18px; }
.sand-icons { display: flex; gap: 6px; margin: 2px 0 4px; }
.sand-icons button {
  width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: #7a7869; cursor: pointer; font-size: 12px;
}
.sand-icons button.on { background: #cfc7b3; color: #171613; }
.sand-new {
  background: #171613; color: #ece7dc; border: 0;
  padding: 10px 14px; border-radius: 999px; font-size: 12px; cursor: pointer; font-weight: 500;
  text-align: left;
}
.sand-label { font-size: 10px; color: #8a8779; letter-spacing: .1em; margin-top: 6px; padding: 0 4px; }
.sand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sand-list li {
  padding: 8px 10px; border-radius: 8px; font-size: 12px; color: #4a4842; cursor: pointer;
}
.sand-list li.on { background: #cfc7b3; }
.sand-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-top: 1px solid rgba(0,0,0,.06);
}
.sav { width: 28px; height: 28px; border-radius: 50%; background: #171613; color: #ece7dc; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.sand-foot b { display: block; font-size: 12px; }
.sand-foot span { font-size: 10px; color: #8a8779; }
.sand-foot .cv { margin-left: auto; color: #8a8779; }

.sand-main { flex: 1; padding: 8px 20px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 1; min-width: 0; }
.sand-head { display: flex; justify-content: space-between; align-items: center; }
.sand-model {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; padding: 6px 12px;
  font-size: 12px; color: #4a4842;
}
.mdot { width: 8px; height: 8px; border-radius: 50%; background: #d97a3d; }
.sand-ctrl { font-size: 12px; color: #4a4842; }

.sand-hello { text-align: center; padding: 6px 0; }
.sand-hello h3 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 34px; letter-spacing: -0.01em;
}
.sand-hello p { margin: 4px 0 0; color: #8a8779; font-size: 15px; }

.sand-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stile {
  background: rgba(255,255,255,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 108px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.stile b { font-size: 14px; margin-top: 6px; }
.stile > span { font-size: 11px; color: #8a8779; }
.stile-art { height: 44px; display: flex; align-items: center; gap: 4px; }
.stile-art.art-img i {
  display: inline-block; width: 34px; height: 40px; border-radius: 4px;
  background: linear-gradient(135deg, #f4d9a3, #d97a3d);
  transform: rotate(-4deg);
}
.stile-art.art-img i:nth-child(2) { background: linear-gradient(135deg, #a3c6d6, #4a6c8a); transform: rotate(6deg) translate(-8px, 4px); }
.stile-art.art-file .f {
  width: 26px; height: 32px; border-radius: 3px; display: grid; place-items: center;
  color: #fff; font-size: 8px; font-weight: 700; font-family: var(--mono);
  transform: rotate(-6deg);
}
.stile-art.art-file .f.csv { background: #4a9b6e; }
.stile-art.art-file .f.pdf { background: #d64b3b; transform: rotate(2deg) translateY(-4px); }
.stile-art.art-file .f.doc { background: #3a75e6; transform: rotate(8deg); }
.stile-art.art-voice { position: relative; padding: 4px 0; overflow: hidden; }
.stile-art.art-voice svg {
  width: 100px; height: 32px; display: block; flex-shrink: 0;
}
.stile-art.art-voice .mic {
  position: absolute; right: 8px; top: 4px; width: 32px; height: 32px;
  border-radius: 50%; background: #3a75e6; color: #fff;
  display: grid; place-items: center; font-size: 12px;
}

.sand-input {
  margin-top: auto;
  background: rgba(255,255,255,.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 18px; padding: 8px 8px 8px 8px;
  display: flex; flex-direction: column;
}
.sand-new-tag {
  background: #d6e4c8; color: #3d5b3f;
  padding: 8px 14px; border-radius: 12px 12px 4px 4px; font-size: 11px;
  display: flex; justify-content: space-between; align-items: center;
}
.sand-new-tag b { color: #3d5b3f; cursor: pointer; }
.sand-composer {
  background: #fff; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; position: relative;
  border-radius: 4px 4px 12px 12px;
}
.sand-composer .ph { color: #8a8779; font-size: 13px; }
.sand-tools { display: flex; gap: 12px; font-size: 11px; color: #4a4842; }
.sand-composer .send {
  position: absolute; right: 12px; bottom: 12px;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: #171613; color: #ece7dc; font-size: 13px; cursor: pointer;
}
.sand-sugg {
  display: flex; gap: 8px; padding: 10px 4px 4px; flex-wrap: wrap;
}
.sand-sugg span {
  padding: 6px 12px; border-radius: 999px; font-size: 11px;
  background: rgba(255,255,255,.5); color: #4a4842;
  border: 1px solid rgba(0,0,0,.06);
}

/* ============================================================
   THEME 6 — PIPELINE (neobrutalist CRM board)
   ============================================================ */
.pipeline-mock {
  background: #f6f2e6;
  padding: 22px;
  color: #0f0f0f;
  font-family: "Space Grotesk", var(--sans);
  display: flex; flex-direction: column; gap: 16px;
}
.pl-head {
  display: flex; align-items: center; gap: 20px;
  background: #fff; border: 2px solid #0f0f0f; border-radius: 10px;
  padding: 10px 14px; box-shadow: 4px 4px 0 #0f0f0f;
}
.pl-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.pl-logo {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: #ffd93d; border: 2px solid #0f0f0f; border-radius: 6px;
  font-weight: 900; font-size: 12px;
}
.pl-nav { display: flex; gap: 4px; margin-left: 8px; }
.pl-nav a { padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.pl-nav a.on { background: #0f0f0f; color: #ffd93d; border-radius: 999px; font-weight: 700; }
.pl-actions { margin-left: auto; display: flex; gap: 8px; }
.btn-line, .btn-yell {
  border: 2px solid #0f0f0f; padding: 8px 14px; font-size: 12px; font-weight: 600;
  background: #fff; cursor: pointer; border-radius: 6px; font-family: inherit;
}
.btn-yell { background: #ffd93d; box-shadow: 3px 3px 0 #0f0f0f; }

.pl-sub { display: flex; align-items: end; justify-content: space-between; padding: 4px 6px; }
.pl-sub h3 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.pl-sub h3 em { font-style: normal; background: #ffd93d; padding: 0 6px; }
.pl-stats { display: flex; gap: 20px; font-size: 12px; color: #4a4842; }
.pl-stats b { font-size: 18px; color: #0f0f0f; margin-right: 4px; }

.pl-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; min-height: 0; }
.pl-col { display: flex; flex-direction: column; gap: 10px; }
.pl-col-h {
  background: #fff; border: 2px solid #0f0f0f; border-radius: 8px;
  padding: 10px 12px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .05em;
}
.pl-col-h .amt { margin-left: auto; font-weight: 700; }
.badge-b {
  background: #0f0f0f; color: #ffd93d;
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
}
.pl-card {
  background: #fff; border: 2px solid #0f0f0f; border-radius: 8px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 3px 3px 0 #0f0f0f;
}
.pl-card b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.pl-card .row { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #4a4842; }
.pl-card .av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700; }
.av-a { background: #d64b3b; } .av-b { background: #3a75e6; } .av-c { background: #7a5b3a; }
.av-d { background: #4a9b6e; } .av-e { background: #d97a3d; } .av-f { background: #6b3fa0; }
.av-g { background: #b23e2b; }
.pl-card .tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag-b { border: 1.5px solid #0f0f0f; padding: 2px 7px; font-size: 10px; font-weight: 600; border-radius: 4px; }
.pl-card .foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; border-top: 1.5px dashed #0f0f0f; font-size: 13px; font-weight: 700; }
.pr { padding: 2px 7px; font-size: 10px; font-weight: 700; border-radius: 4px; }
.pr-1 { background: #ffd93d; }
.pr-2 { background: #b8d9ff; }
.pr-3 { background: #f0f0f0; }
.pl-card.highlight { background: #ffd93d; }
.pl-card.win { background: #b8f0c9; }
.pl-card.ghost {
  background: transparent; border: 2px dashed #0f0f0f; box-shadow: none;
  color: #8a8779; text-align: center; font-size: 12px; padding: 20px 12px;
}

/* ============================================================
   THEME 7 — RIFF (music studio, purple/dark)
   ============================================================ */
.riff-mock {
  background: #12081f;
  padding: 0;
  display: flex;
  color: #e5cbff;
  font-family: var(--sans);
  position: relative;
  overflow: hidden;
}
.riff-mock::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 100%, rgba(194,151,255,.25), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(125,227,209,.15), transparent 40%);
  pointer-events: none;
}
.riff-side {
  width: 200px; padding: 20px 14px;
  background: rgba(255,255,255,.02);
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; z-index: 1;
}
.riff-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: #fff; }
.riff-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.riff-nav li {
  padding: 8px 12px; border-radius: 8px; font-size: 12px;
  color: #a58cc4; cursor: pointer;
}
.riff-nav li.on { background: rgba(194,151,255,.15); color: #fff; }
.riff-label { font-size: 10px; color: #6a5588; letter-spacing: .12em; margin: 8px 4px 4px; }
.riff-proj {
  padding: 8px 10px; border-radius: 8px; font-size: 12px; color: #a58cc4;
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.riff-proj.on { background: rgba(194,151,255,.12); color: #fff; }
.pdot { width: 8px; height: 8px; border-radius: 50%; }
.pd1 { background: #ffb1e6; } .pd2 { background: #c297ff; } .pd3 { background: #7de3d1; }

.riff-main { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; z-index: 1; }
.riff-head { display: flex; justify-content: space-between; align-items: end; }
.riff-crumb { font-size: 11px; color: #a58cc4; }
.riff-head h3 { margin: 2px 0 0; font-size: 26px; color: #fff; letter-spacing: -0.01em; }
.riff-transport { display: flex; align-items: center; gap: 8px; }
.riff-transport button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); color: #e5cbff; cursor: pointer; font-size: 12px;
}
.riff-transport .play { width: 42px; height: 42px; background: #c297ff; color: #12081f; border: 0; font-size: 14px; }
.riff-transport .time { font-family: var(--mono); font-size: 11px; color: #a58cc4; margin-left: 6px; }

.riff-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.riff-stats > div { background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 14px; }
.riff-stats span { display: block; font-size: 10px; color: #a58cc4; letter-spacing: .06em; }
.riff-stats b { font-size: 18px; color: #fff; font-weight: 700; letter-spacing: -0.01em; }

.riff-track { position: relative; background: rgba(255,255,255,.03); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 200px; }
.tr { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.tr:last-of-type { border-bottom: 0; }
.tr-name { font-family: var(--mono); font-size: 10px; color: #a58cc4; letter-spacing: .06em; }
.tr-wave { height: 34px; background: repeating-linear-gradient(90deg, rgba(194,151,255,.18) 0 2px, transparent 2px 6px); border-radius: 6px; }
.tr-wave.alt { background: linear-gradient(180deg, rgba(125,227,209,.08), rgba(125,227,209,.02)); }
.tr-wave[data-w="drums"] {
  background:
    repeating-linear-gradient(90deg, #c297ff 0 3px, transparent 3px 8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, black 40%, black 60%, transparent 80%);
          mask-image: linear-gradient(180deg, transparent 20%, black 40%, black 60%, transparent 80%);
}
.tr-wave[data-w="bass"] {
  background:
    repeating-linear-gradient(90deg, #7de3d1 0 2px, transparent 2px 12px);
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, black 50%, transparent 70%);
          mask-image: linear-gradient(180deg, transparent 30%, black 50%, transparent 70%);
}
.tr-wave[data-w="synth"] {
  background:
    repeating-linear-gradient(90deg, #ffb1e6 0 4px, transparent 4px 10px);
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, black 45%, black 55%, transparent 85%);
          mask-image: linear-gradient(180deg, transparent 15%, black 45%, black 55%, transparent 85%);
}
.tr-wave[data-w="vocals"] {
  background:
    repeating-linear-gradient(90deg, #ffb1e6 0 2px, transparent 2px 5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 25%, black 45%, black 55%, transparent 75%);
          mask-image: linear-gradient(180deg, transparent 25%, black 45%, black 55%, transparent 75%);
  opacity: .7;
}
.playhead { position: absolute; top: 12px; bottom: 12px; left: 42%; width: 2px; background: linear-gradient(180deg, #fff, transparent); pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }

.riff-bottom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pad {
  background: rgba(255,255,255,.04); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.pad b { font-size: 11px; color: #a58cc4; font-weight: 500; letter-spacing: .04em; }
.pad span { font-family: var(--mono); font-size: 11px; color: #fff; }
.knob {
  width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#c297ff 0deg, #c297ff 150deg, rgba(255,255,255,.08) 150deg);
  display: grid; place-items: center; position: relative;
}
.knob::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #1a0f2e;
}
.knob i { width: 2px; height: 10px; background: #fff; z-index: 1; margin-bottom: 22px; }
.knob.k2 { background: conic-gradient(#7de3d1 0deg, #7de3d1 65deg, rgba(255,255,255,.08) 65deg); }
.knob.k3 { background: conic-gradient(#ffb1e6 0deg, #ffb1e6 220deg, rgba(255,255,255,.08) 220deg); }
.knob.k4 { background: conic-gradient(#c297ff 0deg, #c297ff 300deg, rgba(255,255,255,.08) 300deg); }

/* ============================================================
   THEME 8 — FERN & FOLD (plant editorial, cream + sage)
   ============================================================ */
.fern-mock {
  background: #f2ecdb;
  padding: 26px 30px;
  color: #1e2a1f;
  font-family: var(--sans);
  display: flex; flex-direction: column; gap: 20px;
}
.fern-head { display: flex; align-items: center; gap: 30px; padding-bottom: 14px; border-bottom: 1px solid rgba(30,42,31,.12); }
.fern-brand { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; }
.fern-brand span { color: #6b8a6f; font-style: italic; }
.fern-nav { display: flex; gap: 22px; font-size: 13px; color: #4a5a4a; }
.fern-nav a.on { color: #1e2a1f; font-weight: 600; border-bottom: 1.5px solid #1e2a1f; padding-bottom: 2px; }
.fern-user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #6a7869; }
.fbell { color: #a35442; }
.fav { width: 30px; height: 30px; border-radius: 50%; background: #1e2a1f; color: #f2ecdb; display: grid; place-items: center; font-size: 11px; font-weight: 600; }

.fern-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; padding: 4px 0; }
.eyebrow-serif { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #6b8a6f; text-transform: uppercase; }
.fern-hero h3 {
  font-family: var(--serif); font-weight: 400; font-size: 44px;
  margin: 8px 0; line-height: 1; letter-spacing: -0.01em;
}
.fern-hero h3 em { color: #6b8a6f; font-style: italic; }
.fern-hero p { max-width: 50ch; font-size: 13px; color: #4a5a4a; }
.fern-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 20px; background: #fdfaf0; border: 1px solid rgba(30,42,31,.08); border-radius: 4px; }
.fern-kpis > div { display: flex; flex-direction: column; gap: 4px; }
.fern-kpis span { font-size: 10px; color: #6a7869; letter-spacing: .1em; text-transform: uppercase; }
.fern-kpis b { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.01em; }

.fern-body { display: grid; grid-template-columns: 1.8fr 1fr; gap: 20px; flex: 1; min-height: 0; }
.fern-table { background: #fdfaf0; border: 1px solid rgba(30,42,31,.08); border-radius: 4px; overflow: hidden; }
.ft-head, .ft-row {
  display: grid; grid-template-columns: 90px 1.4fr 1.1fr 60px 60px 90px;
  gap: 12px; padding: 12px 16px; align-items: center; font-size: 12px;
}
.ft-head { background: #ece7d7; color: #6a7869; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.ft-row { border-top: 1px solid rgba(30,42,31,.06); }
.ft-row .sku { font-family: var(--mono); font-size: 10px; color: #a35442; }
.ft-row b { font-size: 13px; }
.ft-row i { font-style: italic; color: #6a7869; font-size: 11px; display: block; margin-top: 2px; }
.ft-row .num { font-family: var(--mono); font-size: 13px; text-align: right; }
.chip-ok, .chip-warn, .chip-low {
  padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 600; text-align: center;
}
.chip-ok { background: #dfe9d4; color: #4a6a3a; }
.chip-warn { background: #f4e2c8; color: #8a5a1a; }
.chip-low { background: #f5d5c8; color: #a03828; }
.ft-row.low { background: rgba(245,213,200,.15); }

.fern-aside { display: flex; flex-direction: column; gap: 14px; }
.fa-card { background: #fdfaf0; border: 1px solid rgba(30,42,31,.08); border-radius: 4px; padding: 16px; }
.fa-h { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: #6b8a6f; text-transform: uppercase; }
.fa-title { font-family: var(--serif); font-size: 22px; margin: 4px 0 12px; letter-spacing: -0.01em; }
.fa-metric { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; border-bottom: 1px dashed rgba(30,42,31,.1); }
.fa-metric span { color: #6a7869; }
.fa-metric b { font-family: var(--mono); }
.fa-bar { margin-top: 10px; height: 4px; background: #e0d9c5; border-radius: 2px; overflow: hidden; }
.fa-bar s { display: block; height: 100%; background: #6b8a6f; text-decoration: none; }
.fa-quote { background: #ece7d7; border-color: transparent; position: relative; padding: 20px 16px 16px; }
.quote-mark { font-family: var(--serif); font-size: 60px; color: #6b8a6f; line-height: 1; position: absolute; top: -4px; left: 12px; }
.fa-quote p { font-family: var(--serif); font-size: 15px; line-height: 1.4; margin: 20px 0 10px; font-style: italic; }
.fa-meta { font-size: 11px; color: #6a7869; }
.fa-meta b { color: #1e2a1f; }

/* ============================================================
   THEME 9 — PRISM (glassmorphism calendar OS)
   ============================================================ */
.prism-mock {
  padding: 0; color: #1a1526;
  font-family: var(--sans);
  position: relative;
  background: #efeaff;
  overflow: hidden;
}
.prism-bg { position: absolute; inset: 0; }
.prism-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .8; }
.prism-bg .b1 { width: 400px; height: 400px; background: #ffd6ec; top: -80px; left: -60px; }
.prism-bg .b2 { width: 500px; height: 500px; background: #b8d9ff; bottom: -140px; right: -100px; }
.prism-bg .b3 { width: 320px; height: 320px; background: #d0f0d8; top: 40%; left: 40%; }

.prism-shell { position: relative; z-index: 1; display: flex; gap: 20px; padding: 22px; height: 100%; }
.prism-side {
  width: 240px; background: rgba(255,255,255,.5); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 24px rgba(80,50,140,.06);
}
.prism-brand { font-weight: 700; font-size: 16px; color: #4a3878; }
.prism-new {
  background: #1a1526; color: #efeaff; border: 0; padding: 10px 14px;
  border-radius: 12px; cursor: pointer; font-size: 12px; font-weight: 500; text-align: left;
}
.prism-mini { background: rgba(255,255,255,.4); border-radius: 12px; padding: 12px; }
.pm-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 8px; }
.pm-head b { color: #1a1526; }
.pm-head span { color: #6b5b8a; }
.pm-dow, .pm-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 10px; }
.pm-dow { color: #6b5b8a; padding: 4px 0; }
.pm-grid span { padding: 4px 0; color: #1a1526; border-radius: 50%; }
.pm-grid span.mut { color: #b8afd0; }
.pm-grid span.today { background: #1a1526; color: #efeaff; font-weight: 600; }

.prism-cals { display: flex; flex-direction: column; gap: 8px; }
.prism-label { font-size: 10px; color: #6b5b8a; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.prism-cals label { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.sw { width: 12px; height: 12px; border-radius: 4px; }
.sw1 { background: #ff8fbe; } .sw2 { background: #6bb5ff; } .sw3 { background: #4ecb8a; } .sw4 { background: #ffb84d; }
.sw.off { background: transparent; border: 1.5px solid #b8afd0; }

.prism-main {
  flex: 1; background: rgba(255,255,255,.55); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 20px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
  box-shadow: 0 8px 24px rgba(80,50,140,.06);
}
.prism-head { display: flex; justify-content: space-between; align-items: end; }
.prism-head h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0; letter-spacing: -0.01em; }
.prism-head p { margin: 2px 0 0; font-size: 12px; color: #6b5b8a; }
.prism-tabs { display: flex; gap: 4px; background: rgba(255,255,255,.5); padding: 4px; border-radius: 999px; font-size: 11px; }
.prism-tabs span { padding: 6px 12px; border-radius: 999px; color: #6b5b8a; cursor: pointer; }
.prism-tabs span.on { background: #1a1526; color: #efeaff; font-weight: 600; }

.prism-week { display: grid; grid-template-columns: 40px 1fr; gap: 6px; flex: 1; min-height: 220px; }
.pw-hours { display: flex; flex-direction: column; justify-content: space-between; padding: 20px 0 4px; font-family: var(--mono); font-size: 9px; color: #6b5b8a; }
.pw-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pw-day {
  position: relative; background: rgba(255,255,255,.4); border-radius: 10px;
  padding: 20px 4px 4px; overflow: hidden;
}
.pw-day b { position: absolute; top: 5px; left: 6px; font-size: 9px; color: #6b5b8a; font-weight: 500; letter-spacing: .06em; }
.pw-day > span { position: absolute; top: 5px; right: 6px; font-size: 10px; font-weight: 600; }
.pw-day.today { background: rgba(255,255,255,.7); }
.pw-day.today > span { background: #1a1526; color: #efeaff; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; top: 4px; }
.ev {
  position: absolute; left: 3px; right: 3px;
  padding: 4px 6px; font-size: 9px; font-weight: 500;
  border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.e1 { background: rgba(255,143,190,.65); color: #6b1a3f; }
.e2 { background: rgba(107,181,255,.65); color: #1a3d6b; }
.e3 { background: rgba(78,203,138,.65); color: #1a4d2e; }
.e4 { background: rgba(255,184,77,.65); color: #6b3d0f; }
.e5 { background: rgba(194,151,255,.7); color: #3d1a6b; }
.pw-now { position: absolute; left: 0; right: 0; height: 2px; background: #ff3355; z-index: 2; }
.pw-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #ff3355; }

.prism-agenda { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.6); }
.pa { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 6px 4px; }
.pa-dot { width: 10px; height: 10px; border-radius: 50%; }
.pa .d1 { background: #6bb5ff; } .pa .d2 { background: #ffb84d; } .pa .d3 { background: #c297ff; }
.pa b { display: block; font-size: 12px; }
.pa span { font-size: 10px; color: #6b5b8a; }
.pa-att {
  background: rgba(255,255,255,.6); padding: 3px 8px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px;
}

/* ============================================================
   THEME 10 — TRACER (matte black + neon green, golf)
   ============================================================ */
.tracer-mock {
  background: #0a1310;
  padding: 0;
  display: flex;
  color: #d0e6d8;
  font-family: var(--sans);
}
.tr-side {
  width: 220px; padding: 22px 16px;
  background: #060c09;
  border-right: 1px solid #1a2620;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; color: #fff;
}
.tr-brand .logo { color: #3ee07f; font-size: 16px; }
.tr-brand .ver { margin-left: auto; font-size: 9px; color: #5b7367; letter-spacing: .06em; }
.tr-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-nav li {
  padding: 8px 12px; border-radius: 6px; font-size: 12px;
  color: #7a9086; cursor: pointer;
}
.tr-nav li.on { background: rgba(62,224,127,.1); color: #3ee07f; }
.tr-round {
  margin-top: auto; padding: 14px; border: 1px solid #1a2620; border-radius: 10px;
}
.tr-label { font-size: 10px; color: #5b7367; letter-spacing: .1em; text-transform: uppercase; }
.tr-round b { display: block; color: #fff; font-size: 14px; margin: 4px 0 2px; }
.tr-round > span { font-size: 10px; color: #5b7367; }
.tr-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #1a2620; }
.tr-score > div span { font-size: 9px; color: #5b7367; letter-spacing: .06em; text-transform: uppercase; }
.tr-score > div b { font-family: var(--mono); font-size: 16px; color: #3ee07f; font-weight: 700; }

.tr-main { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tr-head { display: flex; justify-content: space-between; align-items: end; }
.tr-crumb { font-family: var(--mono); font-size: 10px; color: #5b7367; letter-spacing: .06em; }
.tr-crumb b { color: #d0e6d8; font-weight: 500; }
.tr-head h3 { margin: 2px 0 0; color: #fff; font-size: 24px; letter-spacing: -0.01em; }
.tr-head-r { display: flex; align-items: center; gap: 10px; }
.tr-tabs { display: flex; gap: 2px; background: #060c09; border: 1px solid #1a2620; border-radius: 999px; padding: 3px; font-size: 11px; }
.tr-tabs span { padding: 5px 10px; border-radius: 999px; color: #7a9086; cursor: pointer; }
.tr-tabs span.on { background: #3ee07f; color: #060c09; font-weight: 700; }
.tr-cta {
  background: #3ee07f; color: #060c09; border: 0;
  padding: 8px 16px; border-radius: 999px; font-size: 12px; cursor: pointer; font-weight: 700;
  font-family: var(--sans);
}

.tr-body { display: grid; grid-template-columns: 1.8fr 1fr; gap: 14px; flex: 1; min-height: 0; }
.tr-canvas { background: #060c09; border: 1px solid #1a2620; border-radius: 12px; padding: 10px; overflow: hidden; position: relative; }
.tr-canvas::before {
  content: ""; position: absolute; inset: 10px; border-radius: 8px;
  background-image:
    linear-gradient(rgba(62,224,127,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,224,127,.04) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.canvas-svg { width: 100%; height: 100%; position: relative; z-index: 1; }

.tr-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tr-metric {
  background: #060c09; border: 1px solid #1a2620; border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.tr-metric.big { grid-column: span 2; }
.tr-metric span { font-size: 10px; color: #5b7367; letter-spacing: .08em; text-transform: uppercase; }
.tr-metric b { font-family: var(--mono); font-size: 18px; color: #fff; font-weight: 700; letter-spacing: -0.01em; }
.tr-metric.big b { font-size: 26px; color: #3ee07f; }
.tr-metric b em { font-style: normal; font-size: 11px; color: #7a9086; font-weight: 500; margin-left: 4px; }
.spark { height: 24px; margin-top: 4px; }
.spark svg { width: 100%; height: 100%; }

.tr-timeline { background: #060c09; border: 1px solid #1a2620; border-radius: 10px; padding: 12px 14px; }
.tt-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tt-h b { color: #fff; font-size: 13px; }
.tt-h span { font-family: var(--mono); font-size: 10px; color: #5b7367; }
.tt-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tt-shot { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(62,224,127,.04); border-radius: 8px; }
.tt-i { width: 22px; height: 22px; border-radius: 50%; background: #1a2620; color: #3ee07f; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.tt-shot b { font-size: 12px; color: #fff; }
.tt-shot i { display: block; font-style: normal; color: #7a9086; font-size: 10px; }
.chip-g, .chip-r { padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.chip-g { background: rgba(62,224,127,.14); color: #3ee07f; }
.chip-r { background: rgba(255,133,96,.14); color: #ff8560; }

/* ============================================================
   THEME 11 — MAREN (skincare / soft blush + ivory, editorial)
   ============================================================ */
.maren-mock {
  background: #faf3ec;
  padding: 0;
  display: flex;
  color: #2a1e22;
  font-family: var(--sans);
}
.maren-side {
  width: 220px;
  padding: 26px 20px;
  background: #f3e9df;
  border-right: 1px solid rgba(122,80,80,.08);
  display: flex; flex-direction: column; gap: 18px;
}
.maren-brand {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.maren-brand em { font-style: italic; color: #b46b7d; }
.maren-brand span { display: block; font-family: var(--sans); font-size: 10px; font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: #8a6d70; margin-top: 4px; }

.maren-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.maren-nav li {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #5a4045;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.maren-nav li.on {
  background: #fff;
  color: #2a1e22;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(122,80,80,.06);
}
.maren-nav li span {
  font-family: var(--mono);
  font-size: 10px;
  color: #b48b8f;
  background: #f9ede4;
  padding: 2px 7px;
  border-radius: 999px;
}

.maren-note {
  margin-top: auto;
  padding: 16px;
  background: #fff;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 1px 2px rgba(122,80,80,.06);
}
.mn-mark {
  font-family: var(--serif);
  font-size: 54px;
  color: #d99cae;
  line-height: 1;
  position: absolute;
  top: -6px;
  left: 12px;
}
.maren-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  margin: 22px 0 8px;
  color: #4a2d33;
}
.maren-note span {
  font-size: 10px;
  color: #a08287;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.maren-main {
  flex: 1;
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.maren-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(122,80,80,.1);
}
.maren-head .eyebrow-serif {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b46b7d;
}
.maren-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  line-height: 1;
}
.maren-head h3 em { font-style: italic; color: #b46b7d; }

.maren-head-r { display: flex; align-items: center; gap: 12px; }
.maren-search {
  background: #fff;
  padding: 9px 16px;
  font-size: 12px;
  border-radius: 999px;
  color: #a08287;
  border: 1px solid rgba(122,80,80,.08);
}
.maren-cta {
  background: #2a1e22;
  color: #faf3ec;
  border: 0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
}
.mav {
  width: 34px; height: 34px; border-radius: 50%;
  background: #d99cae; color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: 13px;
}

.maren-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.maren-kpis > div {
  background: #fff;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.maren-kpis span:first-child {
  font-size: 10px;
  color: #a08287;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.maren-kpis b {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #2a1e22;
}
.maren-kpis i {
  font-family: var(--mono);
  font-size: 11px;
  color: #7a8f6b;
  font-style: normal;
}
.maren-kpis i.soft { color: #a08287; }

.maren-body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}
.mb-chart {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mb-head { display: flex; justify-content: space-between; align-items: flex-start; }
.mb-head h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.mb-tabs {
  display: flex;
  gap: 4px;
  background: #f3e9df;
  padding: 4px;
  border-radius: 999px;
  font-size: 10px;
  font-family: var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mb-tabs span { padding: 5px 10px; border-radius: 999px; color: #a08287; cursor: pointer; }
.mb-tabs span.on { background: #fff; color: #2a1e22; }

.mb-svg { width: 100%; height: 160px; display: block; }
.mb-ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  color: #b48b8f;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 4px;
}

.mb-side {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mbs-h h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.mb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-list li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px dashed rgba(122,80,80,.12);
}
.mb-list li:first-child { border-top: 0; }
.pd {
  width: 28px; height: 34px;
  border-radius: 6px 6px 3px 3px;
  position: relative;
}
.pd::before {
  content: "";
  position: absolute;
  top: -4px; left: 8px; right: 8px;
  height: 6px;
  border-radius: 3px 3px 0 0;
  background: currentColor;
  opacity: 0.5;
}
.pd-1 { background: linear-gradient(180deg, #f4c7c7, #e5a5a5); color: #a35b5b; }
.pd-2 { background: linear-gradient(180deg, #ede0d0, #d9c1a5); color: #8a6b45; }
.pd-3 { background: linear-gradient(180deg, #d9b8b0, #b48a80); color: #6b4a45; }
.pd-4 { background: linear-gradient(180deg, #c6d5c0, #9db095); color: #5a7048; }
.mb-list b { font-size: 13px; display: block; }
.mb-list li > div:nth-child(2) span {
  font-size: 11px;
  color: #a08287;
  font-style: italic;
  font-family: var(--serif);
}
.mb-num { text-align: right; }
.mb-num b { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; }
.mb-num span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: #a08287;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
}

.maren-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 22px;
  background: #f3e9df;
  border-radius: 14px;
}
.ms-item { display: flex; flex-direction: column; gap: 3px; }
.ms-item .eyebrow-serif {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b46b7d;
}
.ms-item b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.ms-item b em { font-style: italic; color: #b48b8f; font-size: 14px; margin-left: 4px; }
.ms-item .soft { font-family: var(--serif); font-style: italic; font-size: 12px; color: #8a6d70; }

/* ============================================================
   THEME 12 — ATELIER MARCHETTI (interior design, terracotta+sage)
   ============================================================ */
.atelier-mock {
  background: #f4ecdf;
  padding: 30px 34px;
  color: #2a231b;
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.atl-head {
  display: flex;
  align-items: center;
  gap: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(42,35,27,.15);
}
.atl-brand { display: flex; align-items: center; gap: 12px; }
.atl-logo {
  width: 42px; height: 42px;
  border: 1.5px solid #2a231b;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 22px;
}
.atl-brand b {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
}
.atl-brand span {
  font-size: 10px;
  color: #7a6b52;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}
.atl-nav {
  display: flex;
  gap: 26px;
  font-size: 13px;
  color: #5a4c38;
}
.atl-nav a { cursor: pointer; }
.atl-nav a.on {
  color: #b3573a;
  font-weight: 500;
  border-bottom: 1.5px solid #b3573a;
  padding-bottom: 2px;
}
.atl-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.atl-bell { color: #b3573a; font-size: 14px; }
.atl-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #2a231b;
  color: #f4ecdf;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 12px;
}

.atl-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  padding: 8px 0;
}
.atelier-mock .eyebrow-serif {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #b3573a;
}
.atl-hero h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  margin: 8px 0 12px;
  letter-spacing: -0.02em;
}
.atl-hero h3 em { font-style: italic; color: #7a8f6b; }
.atl-hero p {
  font-size: 13px;
  color: #5a4c38;
  max-width: 46ch;
  line-height: 1.5;
}
.atl-tags {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.atl-tags span {
  border: 1px solid #2a231b;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.atl-moodboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 78px);
  gap: 8px;
}
.mo {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.mo-1 { background: linear-gradient(135deg, #d9c1a5, #b48a5c); }
.mo-2 { background: linear-gradient(135deg, #b3573a, #7a3820); }
.mo-3 { background: linear-gradient(135deg, #e8dfc9, #cdbfa0); }
.mo-4 { background: linear-gradient(135deg, #7a8f6b, #4d5f42); }
.mo-5 { background: linear-gradient(135deg, #d9b09a, #a37864); }
.mo-6 { background: linear-gradient(135deg, #2a231b, #4a3d2a); }
.mo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.25), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,.15), transparent 60%);
}

.atl-body {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 20px;
  flex: 1;
  min-height: 0;
}
.atl-timeline {
  background: #fdf7ea;
  border: 1px solid rgba(42,35,27,.1);
  padding: 22px;
}
.tl-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.tl-head h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.tl-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 180px;
}
.tl-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-col > span {
  font-family: var(--mono);
  font-size: 9px;
  color: #7a6b52;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tl-bar {
  padding: 14px 10px;
  border-radius: 3px;
  color: #fdf7ea;
  min-height: 60px;
  display: flex;
  align-items: flex-end;
}
.tl-bar b { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.tl-bar.b-1 { background: #b3573a; min-height: 90px; }
.tl-bar.b-2 { background: #7a8f6b; min-height: 130px; }
.tl-bar.b-3 { background: #b48a5c; min-height: 70px; }
.tl-bar.b-4 { background: #4a3d2a; min-height: 110px; }
.tl-bar.b-5 { background: #2a231b; min-height: 90px; }
.tl-bar.hollow {
  background: transparent;
  border: 1.5px dashed;
  color: #5a4c38;
}
.tl-bar.hollow.b-2 { border-color: #7a8f6b; color: #4d5f42; }
.tl-bar.hollow.b-4 { border-color: #4a3d2a; color: #4a3d2a; }
.tl-bar.hollow.b-5 { border-color: #2a231b; color: #2a231b; }
.tl-legend {
  display: flex;
  gap: 18px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed rgba(42,35,27,.12);
  font-size: 11px;
  color: #5a4c38;
  flex-wrap: wrap;
}
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; display: inline-block; }
.lg-1 { background: #b3573a; } .lg-2 { background: #7a8f6b; } .lg-3 { background: #b48a5c; }
.lg-4 { background: #4a3d2a; } .lg-5 { background: #2a231b; }

.atl-aside { display: flex; flex-direction: column; gap: 16px; }
.atl-card {
  background: #fdf7ea;
  border: 1px solid rgba(42,35,27,.1);
  padding: 20px;
}
.atl-card h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 4px 0 14px;
  letter-spacing: -0.01em;
}
.atl-orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.atl-orders li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(42,35,27,.1);
}
.atl-orders li:last-child { border-bottom: 0; padding-bottom: 0; }
.atl-orders b { font-size: 13px; }
.atl-orders span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: #7a6b52;
  grid-column: 1;
}
.atl-orders em {
  font-style: normal;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  grid-row: span 2;
  align-self: center;
}
.atl-orders em.chip-ok { background: #dae4d0; color: #4d5f42; }
.atl-orders em.chip-warn { background: #f0dcc3; color: #7a5820; }
.atl-orders em.chip-low { background: #f0d0c3; color: #7a3820; }

.atl-quote { background: #b3573a; color: #fdf7ea; border: 0; position: relative; padding: 26px 22px; }
.atl-quote-mark {
  font-family: var(--serif);
  font-size: 74px;
  color: #fdf7ea;
  opacity: 0.4;
  line-height: 1;
  position: absolute;
  top: 8px;
  left: 16px;
}
.atl-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.35;
  margin: 22px 0 12px;
}
.atl-quote .soft {
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  color: rgba(253,247,234,.7);
  letter-spacing: .06em;
}

/* ============================================================
   THEME 13 — LEDGER & LACE (weddings, cream + dusty rose)
   ============================================================ */
.ledger-mock {
  background: #f8ede4;
  padding: 0;
  color: #2e1f22;
  font-family: var(--sans);
  display: flex;
}
.ld-side {
  width: 240px;
  padding: 26px 22px;
  background: #efe0d5;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld-brand {
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ld-brand em { font-style: italic; color: #c88b7a; }
.ld-brand span {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8a6b6f;
  margin-top: 4px;
}
.ld-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #c88b7a;
  margin-top: 6px;
}
.ld-event {
  padding: 14px 16px;
  background: #fdf6f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(122,80,80,.06);
}
.ld-event b {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
}
.ld-event span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: #7a5b60;
  margin-top: 6px;
  display: block;
}

.ld-count {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ld-count > div {
  padding: 14px;
  background: #fdf6f0;
  border-radius: 12px;
  text-align: center;
}
.ld-count b {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
}
.ld-count span {
  font-size: 9px;
  color: #8a6b6f;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
  display: block;
  line-height: 1.3;
}

.ld-nav { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ld-nav li {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  color: #5a3e42;
  cursor: pointer;
}
.ld-nav li.on {
  background: #fdf6f0;
  color: #2e1f22;
  font-weight: 500;
}

.ld-planner {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(122,80,80,.15);
}
.ld-pav {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #c88b7a;
  color: #fdf6f0;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 12px;
}
.ld-planner b { font-size: 12px; display: block; }
.ld-planner span { font-family: var(--serif); font-style: italic; font-size: 11px; color: #8a6b6f; }

.ld-main {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ld-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(122,80,80,.12);
}
.ledger-mock .eyebrow-serif {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #c88b7a;
}
.ld-head h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ld-head h3 em { font-style: italic; color: #c88b7a; }
.ld-actions { display: flex; align-items: center; gap: 10px; }
.ld-search {
  background: #fdf6f0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  color: #8a6b6f;
}
.ld-cta {
  background: #2e1f22;
  color: #f8ede4;
  border: 0;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 500;
}

.ld-kpis {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 14px;
  align-items: stretch;
}
.ld-ring {
  background: #fdf6f0;
  padding: 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ld-ring-t b {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: block;
  line-height: 1;
  margin: 4px 0;
}
.ld-ring-t .soft {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: #8a6b6f;
}
.ld-kpi {
  background: #fdf6f0;
  padding: 16px 18px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ld-kpi b {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}
.ld-kpi b em { font-style: italic; font-size: 14px; color: #8a6b6f; margin-left: 4px; }
.ld-kpi .soft {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: #8a6b6f;
}
.ld-bar {
  height: 4px;
  background: #efe0d5;
  border-radius: 2px;
  overflow: hidden;
  margin: 4px 0;
}
.ld-bar s {
  display: block;
  height: 100%;
  background: #c88b7a;
  text-decoration: none;
}

.ld-body {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  flex: 1;
  min-height: 0;
}
.ld-timeline {
  background: #fdf6f0;
  border-radius: 16px;
  padding: 22px 24px;
}
.ldt-h { margin-bottom: 18px; }
.ldt-h h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  margin: 4px 0 0;
  letter-spacing: -0.01em;
}
.ldt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ldt-list li {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px dashed rgba(122,80,80,.15);
}
.ldt-list li:first-child { border-top: 0; }
.ldt-time {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #c88b7a;
}
.ldt-list b { font-size: 13px; display: block; }
.ldt-list em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: #7a5b60;
  display: block;
  margin-top: 3px;
}
.ldt-tag {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ldt-tag.t-a { background: #efe0d5; color: #7a5b60; }
.ldt-tag.t-b { background: #f0dcc3; color: #7a5820; }
.ldt-tag.t-c { background: #dae4d0; color: #4d5f42; }
.ldt-tag.t-d { background: #e8d0c8; color: #8a3d38; }
.ldt-tag.t-e { background: #d8c8dc; color: #5b3a68; }

.ld-aside { display: flex; flex-direction: column; gap: 14px; }
.ld-card {
  background: #fdf6f0;
  border-radius: 16px;
  padding: 20px;
}
.ld-card h5 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 4px 0 12px;
  letter-spacing: -0.01em;
}
.ld-vendors { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ld-vendors li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(122,80,80,.15);
}
.ld-vendors li:last-child { border-bottom: 0; padding-bottom: 0; }
.vd {
  width: 12px; height: 12px;
  border-radius: 50%;
  grid-row: span 2;
  align-self: center;
}
.vd-1 { background: #c88b7a; }
.vd-2 { background: #b48ab3; }
.vd-3 { background: #7a8f6b; }
.ld-vendors b { font-size: 13px; display: block; }
.ld-vendors span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: #7a5b60;
  display: block;
  margin-top: 2px;
}

.ld-note { background: #efe0d5; position: relative; padding: 26px 22px; }
.ld-quote {
  font-family: var(--serif);
  font-size: 60px;
  color: #c88b7a;
  opacity: 0.5;
  line-height: 1;
  position: absolute;
  top: 4px;
  left: 14px;
}
.ld-note p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.4;
  margin: 22px 0 10px;
  color: #4a2d33;
}
.ld-note .soft {
  font-size: 10px;
  color: #8a6b6f;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
}

/* ================================================================
   CARD 14 — VERSE & VINE  (bone + fern + soft peach, editorial botanical)
   ================================================================ */
.card[data-theme="verse"] { --ink: #2a2a25; --paper: #f2ecdd; --accent: #6b8158; --peach: #d69477; --line: rgba(42,42,37,.12); }
.verse-mock {
  background: linear-gradient(180deg, #f2ecdd 0%, #ece5d1 100%);
  color: var(--ink);
  padding: 22px 26px 24px;
  display: grid; gap: 18px;
  grid-template-rows: auto auto 1fr;
  font-family: 'Inter', sans-serif;
  container-type: inline-size;
}
.verse-mock .eyebrow-serif {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: #6b8158;
}

.vv-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.vv-brand { display: flex; align-items: center; gap: 10px; }
.vv-mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: #d69477; color: #fff;
  display: grid; place-items: center; font-size: 14px;
}
.vv-brand b { display: block; font-family: 'Instrument Serif', serif; font-size: 18px; font-weight: 400; line-height: 1; }
.vv-brand span { display: block; font-size: 9.5px; color: #7c7a6c; margin-top: 3px; letter-spacing: .04em; }

.vv-nav { display: flex; gap: 20px; font-size: 12px; color: #5c5b52; }
.vv-nav a { position: relative; }
.vv-nav a.on { color: #2a2a25; font-weight: 600; }
.vv-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 1.5px; background: #6b8158; }

.vv-user { display: flex; align-items: center; gap: 10px; justify-self: end; }
.vv-av { width: 26px; height: 26px; border-radius: 50%; background: #6b8158; color: #fff; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; }

.vv-hero {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: end;
  padding-bottom: 4px;
}
.vv-hero h3 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: 30px; line-height: 1.08; margin: 8px 0 8px;
}
.vv-hero h3 em { color: #6b8158; font-style: italic; }
.vv-hero p { font-size: 11.5px; line-height: 1.5; color: #5c5b52; max-width: 380px; }
.vv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vv-kpis > div { padding: 12px 12px; background: rgba(255,255,255,.5); border-radius: 10px; border: 1px solid var(--line); }
.vv-kpis span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #7c7a6c; }
.vv-kpis b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; margin-top: 6px; line-height: 1; }
.vv-kpis em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 12px; color: #6b8158; font-weight: 400; }

.vv-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }

.vv-orders { background: #fbf6e7; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.vv-h h4 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; margin: 4px 0 12px; }
.vv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vv-list li {
  display: grid; grid-template-columns: 36px 44px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px dashed var(--line);
}
.vv-list li:first-child { border-top: 1px solid var(--line); }
.vv-day { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: #7c7a6c; letter-spacing: .1em; text-align: center; line-height: 1.2; }
.vv-day em { display: block; font-family: 'Instrument Serif', serif; font-style: normal; font-size: 18px; color: #2a2a25; margin-top: 2px; }
.vv-arr { width: 40px; height: 40px; border-radius: 50%; position: relative; overflow: hidden; }
.vv-arr::before, .vv-arr::after { content: ""; position: absolute; border-radius: 50%; }
.vv-arr.a-1 { background: radial-gradient(circle at 40% 40%, #f0c6ad, #c68a70 70%); }
.vv-arr.a-2 { background: radial-gradient(circle at 45% 45%, #b6c39a, #6b8158 70%); }
.vv-arr.a-3 { background: radial-gradient(circle at 40% 40%, #f5cfae, #d69477 70%); }
.vv-arr.a-4 { background: radial-gradient(circle at 45% 45%, #d8dcc0, #96a67b 70%); }
.vv-arr.a-5 { background: radial-gradient(circle at 40% 40%, #efd8b8, #b39268 70%); }
.vv-o b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.vv-o span { display: block; font-size: 10.5px; color: #7c7a6c; margin-top: 3px; line-height: 1.4; }
.vv-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 40px; white-space: nowrap;
}
.vv-tag.t-bloom { background: rgba(214,148,119,.18); color: #a5624a; }
.vv-tag.t-fern { background: rgba(107,129,88,.18); color: #4c6141; }
.vv-tag.t-peach { background: rgba(228,187,143,.35); color: #8a6a3f; }

.vv-aside { display: grid; gap: 14px; }
.vv-card { background: #fbf6e7; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.vv-card h5 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 17px; margin: 4px 0 10px; }
.vv-recipe { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vv-recipe li { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: #3d3d35; }
.vv-recipe em { margin-left: auto; padding-left: 12px; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 12px; color: #6b8158; white-space: nowrap; }
.stem { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.stem.s-1 { background: #e8b596; }
.stem.s-2 { background: #d9a24a; }
.stem.s-3 { background: #6b3a2a; }
.stem.s-4 { background: #8b9a6b; }
.stem.s-5 { background: #a5b58a; }
.vv-recipe-foot { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7c7a6c; }

.vv-cal { padding: 14px 16px; }
.vv-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vv-cal-h em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 13px; color: #6b8158; }
.vv-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vv-cal-grid s { display: grid; place-items: center; height: 24px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #5c5b52; background: rgba(255,255,255,.5); border-radius: 4px; text-decoration: none; }
.vv-cal-grid s.d { color: #a09d8f; font-size: 8.5px; letter-spacing: .1em; background: transparent; height: 16px; }
.vv-cal-grid s.on { background: #6b8158; color: #f2ecdd; }
.vv-cal-grid s.big { background: #d69477; color: #fff; }
.vv-cal-legend { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: #7c7a6c; flex-wrap: wrap; }
.vv-cal-legend span { display: flex; align-items: center; gap: 5px; }
.vv-cal-legend i.lg { width: 8px; height: 8px; border-radius: 50%; }
.vv-cal-legend .lg-a { background: rgba(255,255,255,.5); border: 1px solid #b5b0a0; }
.vv-cal-legend .lg-b { background: #d69477; }
.vv-cal-legend .lg-c { background: #6b8158; }
.vv-quote { background: #6b8158; color: #f2ecdd; position: relative; padding: 20px 22px; }
.vv-quote-m { position: absolute; top: 4px; left: 14px; font-family: 'Instrument Serif', serif; font-size: 50px; opacity: .35; line-height: 1; }
.vv-quote p { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 15px; line-height: 1.35; margin: 6px 0 8px; position: relative; }
.vv-quote .soft { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #d8dcc0; }

/* ================================================================
   CARD 15 — BLOOMÉ  (soft peach + terracotta ink, pilates)
   ================================================================ */
.card[data-theme="bloome"] { --ink: #3a2e29; --paper: #f7ece4; --accent: #c8735a; --line: rgba(58,46,41,.1); }
.bloome-mock {
  background: #f7ece4; color: var(--ink); font-family: 'Inter', sans-serif;
  display: grid; grid-template-columns: 210px 1fr; height: 100%;
  container-type: inline-size;
}
.bloome-mock .eyebrow-serif {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: #a67b6d;
}
.bloome-mock .soft { display: block; font-size: 10.5px; color: #7a6157; line-height: 1.4; margin-top: 4px; }

.bl-side { background: #efdccf; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
.bl-brand em { display: block; font-family: 'Instrument Serif', serif; font-style: italic; font-size: 26px; line-height: 1; color: #3a2e29; }
.bl-brand span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .14em; color: #a67b6d; margin-top: 4px; }
.bl-cta {
  background: #3a2e29; color: #f7ece4; border: none; padding: 10px 14px; border-radius: 40px;
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500; cursor: pointer; text-align: center;
}
.bl-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.bl-nav li {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  font-size: 12px; color: #5c473d; cursor: pointer;
}
.bl-nav li.on { background: #f7ece4; color: #3a2e29; font-weight: 600; }
.bl-nav li span { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #a67b6d; }
.bl-instructor { margin-top: auto; }
.bl-inst-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bl-inst { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; row-gap: 1px; align-items: center; }
.bl-inst b { font-size: 11.5px; }
.bl-inst span { grid-column: 2; font-size: 9.5px; color: #7a6157; }
.bav { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #fff; font-weight: 700; grid-row: 1 / span 2; }
.bav.i-a { background: #c8735a; }
.bav.i-b { background: #a67b6d; }
.bav.main { width: 32px; height: 32px; background: #3a2e29; font-size: 10px; }

.bl-main { padding: 20px 24px 22px; display: grid; gap: 16px; grid-template-rows: auto auto 1fr; min-width: 0; }
.bl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.bl-head h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 28px; line-height: 1.1; margin: 6px 0 6px; }
.bl-head h3 em { color: #c8735a; }
.bl-head p { font-size: 11.5px; color: #7a6157; line-height: 1.5; max-width: 440px; }
.bl-head-r { display: flex; align-items: center; gap: 10px; }
.bl-search {
  background: #fff; border: 1px solid var(--line); padding: 8px 14px; border-radius: 40px;
  font-size: 11px; color: #a67b6d;
}

.bl-kpis { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 12px; }
.bl-ring, .bl-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px; }
.bl-ring { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: center; }
.bl-ring b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 26px; line-height: 1; margin-top: 4px; color: #3a2e29; }
.bl-kpi b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 24px; line-height: 1; margin: 6px 0 8px; }
.bl-kpi b em { font-style: italic; color: #a67b6d; font-size: 15px; }
.bl-bar { height: 5px; background: #f0dcd0; border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.bl-bar s { display: block; height: 100%; background: #c8735a; text-decoration: none; }

.bl-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.bl-schedule { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.bl-sh-head h4 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; margin: 4px 0 12px; }
.bl-classes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bl-classes li {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 0; border-top: 1px dashed var(--line);
}
.bl-classes li:first-child { border-top: 1px solid var(--line); }
.bl-classes li.now { background: rgba(200,115,90,.06); margin: 0 -18px; padding: 10px 18px; border-radius: 8px; }
.bl-time { font-family: 'Instrument Serif', serif; font-size: 20px; color: #3a2e29; line-height: 1; }
.bl-c b { display: block; font-size: 12.5px; font-weight: 600; }
.bl-c span { display: block; font-size: 10.5px; color: #7a6157; margin-top: 3px; }
.chip-warn { display: inline-block; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: #a5624a; background: rgba(200,115,90,.15); padding: 3px 8px; border-radius: 30px; font-style: normal; }
.bl-fill { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bl-dots { display: flex; gap: 3px; }
.bl-dots s { width: 8px; height: 8px; border-radius: 50%; background: #c8735a; text-decoration: none; }
.bl-dots s.off { background: #f0dcd0; }
.bl-fill span { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .1em; color: #7a6157; }

.bl-aside { display: grid; gap: 14px; }
.bl-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.bl-card h5 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; margin: 4px 0 6px; }
.bl-mem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bl-mem-stats > div b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; color: #3a2e29; }
.bl-mem-stats > div span { display: block; font-size: 9.5px; color: #7a6157; line-height: 1.3; margin-top: 3px; }
.bl-note { background: #c8735a; color: #f7ece4; position: relative; }
.bl-quote-m { position: absolute; top: 2px; left: 12px; font-family: 'Instrument Serif', serif; font-size: 46px; opacity: .3; line-height: 1; }
.bl-note p { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; line-height: 1.35; margin: 4px 0 8px; position: relative; }
.bl-note .soft { color: #f2d4c6; }
.bl-week { padding: 14px 16px; }
.bl-week-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bl-week-h em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 13px; color: #c8735a; }
.bl-week-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 78px; }
.bl-week-chart > div { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 6px; height: 100%; }
.bl-week-chart s { display: block; background: #c8735a; border-radius: 3px; text-decoration: none; min-height: 6px; }
.bl-week-chart s.today { background: #3a2e29; }
.bl-week-chart s.faint { background: #efdccf; }
.bl-week-chart span { display: block; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #a67b6d; }
.bl-week-foot { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #7a6157; }
.bl-week-foot b { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; font-size: 12px; color: #3a2e29; letter-spacing: 0; }

/* ================================================================
   CARD 16 — SALT & WILLOW  (ivory + ochre, magazine editorial CMS)
   ================================================================ */
.card[data-theme="salt"] { --ink: #1e1c17; --paper: #f4ecdb; --accent: #a67b2f; --deep: #2f4033; --line: rgba(30,28,23,.12); }
.salt-mock {
  background: #f4ecdb; color: var(--ink); font-family: 'Inter', sans-serif;
  padding: 20px 26px 22px;
  display: grid; grid-template-rows: auto auto 1fr; gap: 18px;
  container-type: inline-size;
}
.salt-mock .eyebrow-serif {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: #a67b2f;
}

.sw-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sw-brand b { font-family: 'Instrument Serif', serif; font-size: 22px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; }
.sw-brand em { color: #a67b2f; font-style: italic; }
.sw-brand span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .16em; color: #6c6455; margin-top: 4px; text-transform: uppercase; }
.sw-nav { display: flex; gap: 22px; font-size: 12px; color: #4d463a; }
.sw-nav a.on { color: #1e1c17; font-weight: 600; position: relative; }
.sw-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -18px; height: 1.5px; background: #a67b2f; }
.sw-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.sw-search { background: #fff; border: 1px solid var(--line); padding: 7px 14px; border-radius: 40px; font-size: 11px; color: #8a8272; }
.sw-cta { background: #1e1c17; color: #f4ecdb; border: none; padding: 8px 14px; border-radius: 40px; font-size: 11.5px; font-weight: 500; cursor: pointer; }
.sw-av { width: 28px; height: 28px; border-radius: 50%; background: #a67b2f; color: #f4ecdb; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; }

.sw-hero { display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: center; }
.sw-cover {
  aspect-ratio: 3 / 4; background: #2f4033; border-radius: 4px; position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(30,28,23,.14);
}
.sw-cover-inner {
  position: absolute; inset: 0; padding: 18px 18px;
  color: #f4ecdb; display: flex; flex-direction: column;
}
.sw-cover-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #d9c68b; }
.sw-cover h4 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 32px; line-height: .95; margin: auto 0 8px; letter-spacing: -0.01em; }
.sw-cover h4 em { color: #d9c68b; }
.sw-cover-foot { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 11px; line-height: 1.35; color: #d9c68b; max-width: 160px; }
.sw-cover-num { position: absolute; bottom: 14px; right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .12em; color: #d9c68b; }

.sw-hero-info h3 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 32px; line-height: 1.02; margin: 6px 0 10px; letter-spacing: -0.01em; }
.sw-hero-info h3 em { color: #a67b2f; font-style: italic; }
.sw-hero-info p { font-size: 12px; color: #4d463a; line-height: 1.55; max-width: 520px; }
.sw-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.sw-hero-stats > div { padding: 10px 12px; background: rgba(255,255,255,.5); border: 1px solid var(--line); border-radius: 10px; }
.sw-hero-stats b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 22px; line-height: 1; }
.sw-hero-stats span { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #6c6455; margin-top: 6px; }

.sw-body { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.sw-pipeline { background: #fbf5e5; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.sw-p-head h4 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 18px; margin: 4px 0 12px; }
.sw-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sw-col { background: #f4ecdb; border-radius: 10px; padding: 10px 10px 8px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.sw-col-h { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 6px; border-bottom: 1px dashed var(--line); }
.sw-col-h b { font-size: 11.5px; }
.sw-col-h span { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: #8a8272; }
.sw-story { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.sw-story.tinted { background: #f0e6ce; }
.sw-story.ready { background: #2f4033; color: #f4ecdb; border-color: transparent; }
.sw-story.ready em { color: #d9c68b; }
.sw-cat { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 20px; align-self: flex-start; }
.sw-cat.c-a { background: rgba(166,123,47,.18); color: #7a5820; }
.sw-cat.c-b { background: rgba(47,64,51,.18); color: #2f4033; }
.sw-cat.c-c { background: rgba(180,138,179,.22); color: #6b4c6a; }
.sw-cat.c-d { background: rgba(200,115,90,.18); color: #a5624a; }
.sw-story.ready .sw-cat { background: rgba(217,198,139,.28); color: #d9c68b; }
.sw-story b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.sw-story em { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 11px; color: #6c6455; }

.sw-side { display: grid; gap: 14px; }
.sw-card { background: #fbf5e5; border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px; }
.sw-card h5 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 17px; margin: 4px 0 10px; }
.sw-card .soft { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: #8a8272; margin-top: 8px; }
.sw-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.sw-mini b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 17px; line-height: 1; color: #a67b2f; }
.sw-mini span { display: block; font-size: 9.5px; color: #6c6455; margin-top: 4px; line-height: 1.3; }
.sw-chart { margin-top: 10px; height: 50px; }
.sw-chart svg { width: 100%; height: 100%; }
.sw-quote { background: #1e1c17; color: #f4ecdb; position: relative; }
.sw-quote-m { position: absolute; top: 2px; left: 12px; font-family: 'Instrument Serif', serif; font-size: 46px; opacity: .35; line-height: 1; }
.sw-quote p { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 14px; line-height: 1.35; margin: 4px 0 8px; position: relative; }
.sw-quote .soft { color: #d9c68b; }