:root {
  --paper: #f4f0e8;
  --paper-deep: #eae3d8;
  --surface: #fffdf8;
  --surface-strong: #ffffff;
  --ink: #191a1b;
  --ink-soft: #353638;
  --muted: #77736c;
  --line: #d8d0c5;
  --line-strong: #b8afa3;
  --accent: #e64b2e;
  --accent-dark: #b92e19;
  --accent-wash: #fee5da;
  --positive: #25705a;
  --warning: #b26a1b;
  --danger: #a42c22;
  --rail: #1b1c1d;
  --rail-soft: #272829;
  --ops-navy: #07111f;
  --ops-blue: #2d8cff;
  --ops-cyan: #2dd4bf;
  --shadow: 0 24px 70px rgba(40, 30, 20, 0.12);
  --shadow-soft: 0 10px 30px rgba(40, 30, 20, 0.08);
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --display: "DIN Condensed", "Avenir Next Condensed", "Futura", "Hiragino Sans GB", sans-serif;
  --body: "Avenir Next", "Hiragino Sans GB", "PingFang SC", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 0%, rgba(230, 75, 46, 0.08), transparent 25rem),
    linear-gradient(rgba(25, 26, 27, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 26, 27, 0.018) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 28px 28px, 28px 28px, auto;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

::selection { color: white; background: var(--accent); }

:focus-visible {
  outline: 3px solid rgba(230, 75, 46, 0.34);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: white;
  background: var(--ink);
  border-radius: 6px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.app-shell {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 24px 18px 18px;
  color: #f8f4ed;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.04), transparent 42%),
    var(--rail);
  border-right: 1px solid #080909;
  overflow: hidden;
}

.rail::after {
  content: "";
  position: absolute;
  right: -78px;
  bottom: 74px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(230, 75, 46, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(230, 75, 46, 0.03), 0 0 0 58px rgba(230, 75, 46, 0.018);
  pointer-events: none;
}

.brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 25px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: white;
  overflow: hidden;
}
.brand-mark i {
  position: absolute;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: var(--accent);
  mix-blend-mode: screen;
}
.brand-mark i:first-child { left: 0; }
.brand-mark i:nth-child(2) { right: 0; opacity: .72; }
.brand-mark b { position: relative; z-index: 1; font: 700 10px/1 var(--body); letter-spacing: .08em; }
.brand strong { display: block; font: 700 19px/1 var(--display); letter-spacing: .05em; }
.brand small { display: block; margin-top: 6px; color: #aaa69f; font-size: 10px; letter-spacing: .12em; }
.internal-badge { padding: 3px 5px; color: #b9b4ac; border: 1px solid #484849; font-size: 8px; letter-spacing: .14em; }

.role-console { position: relative; z-index: 1; padding: 24px 3px 18px; }
.rail-kicker { margin-bottom: 11px; color: #8e8b85; font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.function-kicker { position: relative; z-index: 1; margin: 24px 7px 7px; }
.role-switch { display: grid; gap: 5px; }
.role-chip {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 6px 9px;
  color: #bab7b0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.role-chip:hover { color: white; transform: translateX(2px); }
.role-chip.active { color: white; background: #2c2d2e; border-color: #424344; }
.role-chip > span:first-child {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin-right: 10px;
  color: #96938d;
  border: 1px solid #4c4d4e;
  border-radius: 50%;
  font: 700 9px/1 var(--body);
  letter-spacing: .08em;
}
.role-chip.active > span:first-child { color: #fff; background: var(--accent); border-color: var(--accent); }
.role-chip b { font-size: 13px; font-weight: 600; }
.role-console > p { min-height: 48px; margin: 13px 7px 0; color: #8f8c86; font-size: 11px; line-height: 1.65; }

.main-nav { position: relative; z-index: 1; display: grid; gap: 7px; margin-top: 4px; }
.nav-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  width: 100%;
  padding: 12px 10px;
  color: #aaa7a1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
  transition: .2s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.035); }
.nav-item.active { color: white; background: #f7f2e9; }
.nav-item.active b, .nav-item.active small { color: var(--ink); }
.nav-item.active .nav-icon { color: white; background: var(--accent); border-color: var(--accent); }
.nav-icon {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #48494a;
  border-radius: 50%;
  font-size: 11px;
}
.nav-item b { display: block; font-size: 13px; font-weight: 650; }
.nav-item small { display: block; margin-top: 2px; color: #6f6f6c; font-size: 9px; letter-spacing: .04em; }
.nav-item:not(.active) small { color: #777570; }

.rail-signal {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 4px 0;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.signal-dot { width: 8px; height: 8px; background: #a8a29a; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255,255,255,.05); }
.signal-dot.online { background: #78b79a; box-shadow: 0 0 0 5px rgba(120,183,154,.1); }
.signal-dot.degraded { background: #e4a454; }
.rail-signal small { display: block; color: #777570; font-size: 8px; letter-spacing: .15em; }
.rail-signal strong { display: block; margin-top: 2px; color: #bbb7b0; font-size: 10px; font-weight: 500; }
.rail-foot { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 14px 4px 0; color: #5f5e5a; font-size: 8px; letter-spacing: .15em; }

.workspace { min-width: 0; }
.topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 18px;
  height: 72px;
  padding: 0 34px;
  background: rgba(244, 240, 232, .9);
  border-bottom: 1px solid rgba(184, 175, 163, .62);
  backdrop-filter: blur(16px);
}
.breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.breadcrumb i { color: var(--line-strong); font-style: normal; }
.breadcrumb strong { color: var(--ink); font-weight: 650; }
.topbar-role-switch { display: flex; align-items: center; justify-self: center; gap: 5px; }
.topbar-demo-actions { display: flex; justify-self: end; }
.topbar .role-chip {
  width: auto;
  min-height: 36px;
  padding: 4px 9px 4px 4px;
  color: var(--muted);
  background: rgba(255,255,255,.42);
  border-color: var(--line);
  border-radius: 999px;
}
.topbar .role-chip:hover { color: var(--ink); background: var(--surface); transform: none; }
.topbar .role-chip.active { color: var(--ink); background: var(--surface-strong); border-color: var(--ink); box-shadow: 0 4px 16px rgba(40,30,20,.08); }
.topbar .role-chip > span:first-child { width: 26px; height: 26px; margin-right: 7px; color: var(--muted); border-color: var(--line-strong); }
.topbar .role-chip.active > span:first-child { color: white; background: var(--ink); border-color: var(--ink); }
.topbar .role-chip b { font-size: 10px; white-space: nowrap; }
.role-tooltip {
  --tooltip-x: -50%;
  position: absolute;
  z-index: 90;
  top: calc(100% + 12px);
  left: 50%;
  display: block;
  width: min(430px, calc(100vw - 24px));
  padding: 18px;
  color: #f7fbff;
  background:
    linear-gradient(135deg, rgba(45,140,255,.24), transparent 48%),
    var(--ops-navy);
  border: 1px solid rgba(123,188,255,.56);
  border-radius: 14px;
  box-shadow: 0 22px 54px rgba(4,10,20,.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(var(--tooltip-x), -5px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.role-tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  background: #0b1a2d;
  border-top: 1px solid rgba(112,174,255,.34);
  border-left: 1px solid rgba(112,174,255,.34);
  transform: rotate(45deg);
}
.topbar .role-chip:first-child .role-tooltip { --tooltip-x: 0; left: 0; }
.topbar .role-chip:last-child .role-tooltip { --tooltip-x: 0; right: 0; left: auto; }
.topbar .role-chip:first-child .role-tooltip::before { left: 18px; }
.topbar .role-chip:last-child .role-tooltip::before { right: 18px; left: auto; }
.topbar .role-chip:hover .role-tooltip,
.topbar .role-chip:focus-visible .role-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tooltip-x), 0);
}
.role-tooltip-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 12px 10px;
  border-radius: 9px;
  text-align: left;
}
.role-tooltip-row + .role-tooltip-row { border-top: 1px solid rgba(157,197,255,.28); }
.role-tooltip-row strong { color: #58ead7; font-size: 13px; font-weight: 800; letter-spacing: .07em; line-height: 1.55; white-space: nowrap; }
.role-tooltip-row em { color: #fff; font-size: 15px; font-style: normal; font-weight: 650; line-height: 1.72; white-space: normal; }
.demo-next-button {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  min-width: 132px;
  min-height: 48px;
  padding: 7px 10px 7px 13px;
  color: white;
  background: var(--accent);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(230,75,46,.22);
  text-align: left;
  transition: .18s ease;
}
.demo-next-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.demo-next-button small { grid-column: 1; color: rgba(255,255,255,.68); font-size: 7px; font-weight: 750; letter-spacing: .15em; }
.demo-next-button strong { grid-column: 1; font-size: 11px; line-height: 1.15; }
.demo-next-button > span { grid-column: 2; grid-row: 1 / 3; align-self: center; padding-left: 9px; font-size: 18px; }

.demo-guide {
  position: sticky;
  z-index: 10;
  top: 84px;
  width: auto;
  max-height: calc(100vh - 96px);
  padding: 22px 20px;
  color: var(--ink);
  background: rgba(255,253,248,.98);
  border-left: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 0 0 0 12px;
  box-shadow: -14px 18px 36px rgba(40,30,20,.09);
  backdrop-filter: blur(18px);
  overflow: auto;
  animation: guide-in .24s ease both;
}
@keyframes guide-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.demo-guide-close { position: absolute; top: 8px; right: 9px; width: 29px; height: 29px; color: var(--muted); background: transparent; border: 0; font-size: 21px; }
.demo-guide-head { display: flex; align-items: center; gap: 8px; padding-right: 28px; }
.demo-guide-head span { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.demo-guide-head b { padding: 3px 7px; background: var(--ink); color: white; border-radius: 999px; font-size: 8px; font-weight: 650; }
.demo-guide h2 { margin: 9px 0 4px; font: 700 25px/1.05 var(--display); }
.demo-guide-summary { margin: 0 0 14px; color: var(--muted); font-size: 11px; }
.demo-guide dl { display: grid; gap: 7px; margin: 0; }
.demo-guide dl > div { display: grid; grid-template-columns: 66px minmax(0,1fr); gap: 10px; padding: 9px 10px; background: var(--paper); border-radius: 7px; }
.demo-guide dt { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; }
.demo-guide dd { margin: 0; font-size: 10px; line-height: 1.55; }
.demo-guide-input { border-left: 3px solid var(--warning); }
.demo-guide-result { border-left: 3px solid var(--positive); }
.demo-guide-foot { margin: 12px 0 0; color: var(--muted); font-size: 9px; }
.demo-target { position: relative; z-index: 2; outline: 3px solid rgba(230,75,46,.7) !important; outline-offset: 5px; box-shadow: 0 0 0 9px rgba(230,75,46,.1) !important; }

.workspace-body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; transition: grid-template-columns .24s ease; }
.workspace-body:has(.demo-guide:not([hidden])) { grid-template-columns: minmax(0, 1fr) clamp(320px, 29vw, 360px); }
.workspace-body .stage { min-width: 0; }
.workspace-body:has(.demo-guide:not([hidden])) .chat-view { width: calc(100% - 32px); padding-top: 28px; }
.workspace-body:has(.demo-guide:not([hidden])) .chat-masthead { align-items: flex-start; gap: 14px; }
.workspace-body:has(.demo-guide:not([hidden])) .chat-masthead h1 { font-size: clamp(38px, 4vw, 52px); }
.workspace-body:has(.demo-guide:not([hidden])) .welcome-block { grid-template-columns: 1fr; gap: 16px; }
.workspace-body:has(.demo-guide:not([hidden])) .welcome-copy {
  position: static;
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: start;
  padding-top: 6px;
}
.workspace-body:has(.demo-guide:not([hidden])) .welcome-copy .index { grid-row: 1 / 3; }
.workspace-body:has(.demo-guide:not([hidden])) .welcome-copy p { margin-top: 6px; }

.stage { min-height: calc(100vh - 72px); }
.panel { display: none; min-height: calc(100vh - 72px); }
.panel.active { display: block; animation: panel-in .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.view-pad { padding: 34px clamp(22px, 4vw, 58px) 64px; }
.eyebrow { color: var(--accent); font-size: 9px; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; }
.muted { color: var(--muted); }
.button-primary, .button-quiet, .button-dark, .inline-action {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 7px;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button-primary { color: white; background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 8px 20px rgba(230,75,46,.18); }
.button-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 11px 26px rgba(230,75,46,.24); }
.button-primary:disabled { cursor: wait; opacity: .56; transform: none; }
.button-quiet { background: transparent; border: 1px solid var(--line); }
.button-quiet:hover { background: var(--surface); border-color: var(--line-strong); }
.button-dark { color: white; background: var(--ink); border: 1px solid var(--ink); }
.button-dark:hover { background: #323335; transform: translateY(-1px); }
.inline-action { min-height: 34px; padding: 0 11px; color: var(--accent-dark); background: transparent; border: 1px solid #e5a491; font-size: 11px; }
.inline-action:hover { background: var(--accent-wash); }

/* AI sales conversation */
.chat-view {
  display: grid;
  grid-template-rows: auto minmax(250px, 1fr) auto;
  width: min(1120px, calc(100% - 44px));
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 38px 0 24px;
}
.chat-masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 0 4px 26px;
  border-bottom: 1px solid var(--line);
}
.chat-masthead h1 {
  max-width: 760px;
  margin: 7px 0 6px;
  font: 700 clamp(38px, 5vw, 64px)/.96 var(--display);
  letter-spacing: -.025em;
}
.chat-masthead h1 em { color: var(--accent); font-style: normal; }
.chat-masthead p { max-width: 690px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.session-stamp { flex: 0 0 auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.45); }
.session-stamp small { display: block; color: var(--muted); font-size: 8px; letter-spacing: .16em; }
.session-stamp strong { display: block; margin-top: 4px; font: 650 12px/1 var(--body); }

.conversation { padding: 28px 2px 24px; }
.welcome-block { display: grid; grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr); gap: 38px; align-items: start; padding: 26px 0 34px; }
.welcome-copy { position: sticky; top: 110px; padding: 20px 10px 0 2px; }
.welcome-copy .index { display: block; margin-bottom: 28px; color: var(--accent); font: 700 44px/1 var(--display); }
.welcome-copy h2 { margin: 0; font: 700 28px/1.15 var(--display); }
.welcome-copy p { margin: 13px 0 0; color: var(--muted); font-size: 13px; }
.scenario-list { display: grid; gap: 9px; }
.scenario-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 90px;
  padding: 14px 18px;
  color: var(--ink);
  background: rgba(255,253,248,.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  overflow: hidden;
  transition: .22s ease;
  animation: rise-in .45s both;
}
.scenario-card:nth-child(2) { animation-delay: .06s; }
.scenario-card:nth-child(3) { animation-delay: .12s; }
.scenario-card:hover { background: var(--surface); border-color: #bfa89f; transform: translateX(-5px); box-shadow: var(--shadow-soft); }
.scenario-card > span:first-child { color: var(--accent); font: 700 24px/1 var(--display); }
.scenario-card b { display: block; font-size: 14px; }
.scenario-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.scenario-card > i { font-style: normal; color: var(--accent); }
@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.message { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 13px; margin: 0 0 28px; animation: message-in .3s both; }
@keyframes message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.message.user { grid-template-columns: minmax(0, 1fr) 36px; padding-left: min(18vw, 210px); }
.message.user .message-avatar { grid-column: 2; }
.message.user .message-body { grid-row: 1; text-align: right; }
.message-avatar { display: grid; place-items: center; width: 34px; height: 34px; color: white; background: var(--ink); border-radius: 50%; font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.message.user .message-avatar { color: var(--ink); background: transparent; border: 1px solid var(--line-strong); }
.message-label { display: block; margin: 0 0 6px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.message-copy { display: inline-block; max-width: 850px; margin: 0; white-space: pre-wrap; }
.message.user .message-copy { padding: 12px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 3px 14px 14px; text-align: left; }
.message.assistant .message-copy { font-size: 15px; line-height: 1.75; }
.message-actions { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.message.user .message-actions { justify-content: flex-end; }
.message-action { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 8px; color: #625d56; background: rgba(255,253,248,.72); border: 1px solid #d7cec2; border-radius: 999px; font-size: 10px; font-weight: 650; transition: .18s ease; }
.message-action:hover { color: var(--accent-dark); background: white; border-color: #d69b8b; }
.message-action:disabled { cursor: wait; opacity: .62; }
.message-refresh-icon { display: inline-block; font-size: 14px; line-height: 1; }
.message-refresh.is-loading .message-refresh-icon { animation: query-spin .72s linear infinite; }
.thinking-line { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.thinking-line i { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; animation: pulse 1s infinite alternate; }
.thinking-line i:nth-child(2) { animation-delay: .2s; }
.thinking-line i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse { to { opacity: .2; transform: translateY(-3px); } }

.recommendation-stack { display: grid; gap: 14px; margin-top: 20px; }
.merchant-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(48,37,26,.055);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.merchant-card:hover { border-color: #c4b5a8; box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.merchant-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(230,75,46,.1), var(--shadow-soft); }
.merchant-card::before { content: ""; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--accent); opacity: .2; }
.merchant-card.selected::before { opacity: 1; }
.merchant-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; padding: 22px 24px 17px; border-bottom: 1px solid var(--line); }
.merchant-rank { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.merchant-head h3 { margin: 0; font: 700 26px/1 var(--display); letter-spacing: -.01em; }
.merchant-head p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.merchant-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.source-type-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 9px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.library-source-badge { color: #a93722; background: #fff0eb; border-color: #efb7aa; }
.web-source-badge { color: #075b70; background: #e8f6f7; border-color: #9bcdd3; }
.merchant-check { display: flex; align-items: center; gap: 9px; align-self: start; padding: 10px 13px; color: var(--accent-dark); background: #fff8f5; border: 2px solid #e6a899; border-radius: 999px; box-shadow: 0 5px 14px rgba(129,55,36,.08); font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.merchant-check:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(129,55,36,.14); }
.merchant-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.merchant-card.selected .merchant-check { color: white; background: var(--accent); border-color: var(--accent); box-shadow: 0 7px 18px rgba(230,75,46,.22); }
.merchant-body { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(250px, .84fr); }
.offer-zone, .resource-zone { padding: 18px 24px 21px; }
.resource-zone { background: #f0ebe3; border-left: 1px solid var(--line); }
.zone-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.zone-title span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; letter-spacing: 0; }
.offer-unit + .offer-unit, .resource-unit + .resource-unit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
.offer-unit strong, .resource-unit strong { display: block; font-size: 12px; }
.offer-benefit { margin: 5px 0 7px; color: var(--ink); font-size: 14px; font-weight: 650; }
.detail-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-pills span { padding: 4px 7px; color: var(--muted); background: rgba(255,255,255,.65); border: 1px solid var(--line); border-radius: 4px; font-size: 9px; }
.resource-unit p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.resource-price { color: var(--accent-dark) !important; font-weight: 650; }
.source-strip { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 11px 24px; background: #fbf8f2; border-top: 1px solid var(--line); }
.source-strip::before { content: "SOURCES"; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.source-strip a, .source-strip span { color: #5f5b55; font-size: 9px; text-underline-offset: 3px; }
.source-strip a:hover { color: var(--accent-dark); }

.ranked-results { margin-top: 22px; }
.ranked-results > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 17px 20px; background: rgba(255,253,248,.78); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ranked-results > header span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.ranked-results > header h2 { margin: 5px 0 4px; font: 700 25px/1 var(--display); letter-spacing: .01em; }
.ranked-results > header p { margin: 0; color: var(--muted); font-size: 11px; }
.ranked-results > header b { flex: 0 0 auto; padding: 5px 9px; color: var(--accent-dark); background: var(--accent-wash); border: 1px solid #e8b3a5; border-radius: 999px; font-size: 10px; }
.ranked-results .recommendation-stack { margin-top: 14px; }
.ranked-results-notice { margin: 10px 2px 0; padding: 10px 12px; color: #6b5b4f; background: #fff8e8; border: 1px solid #ead7ad; border-radius: 8px; font-size: 11px; }
.web-material-card { min-width: 0; color: var(--ink); background: var(--surface); border-color: #b8d2d6; }
.web-material-card::before { background: #16849a; opacity: .8; }
.web-material-card:hover { border-color: #79aeb8; }
.web-material-card.selected { border-color: #16849a; box-shadow: 0 0 0 2px rgba(22,132,154,.12), var(--shadow-soft); }
.web-material-card.selected::before { opacity: 1; }
.web-material-card .merchant-head { padding-bottom: 18px; color: var(--ink); background: var(--surface); border-bottom-color: var(--line); }
.web-material-card .merchant-rank { color: #087187; }
.web-material-card .merchant-head h3 { color: var(--ink); }
.web-detail-pills { margin-top: 12px; }
.web-material-card .detail-pills span { color: #4f5f62; background: #f0f7f7; border-color: #c8dfe2; }
.web-material-card .merchant-check { color: #075b70; background: #effafa; border-color: #73b5c1; }
.web-material-card .merchant-check input { accent-color: #16849a; }
.web-material-card.selected .merchant-check { color: white; background: #16849a; border-color: #16849a; box-shadow: 0 7px 18px rgba(22,132,154,.23); }
.web-material-body { padding: 19px 24px 22px; background: var(--surface); }
.web-material-body > p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.78; white-space: pre-wrap; }
.web-material-body .zone-title { color: #52666a; }
.web-material-body .zone-title span { color: #075b70; background: #e8f6f7; border-color: #9bcdd3; }
.web-key-points { display: grid; gap: 7px; margin-top: 14px; }
.web-key-points span { position: relative; padding: 9px 11px 9px 27px; color: #32494e; background: #eef7f7; border: 1px solid #c8dfe2; border-radius: 7px; font-size: 11px; line-height: 1.55; }
.web-key-points span::before { content: "•"; position: absolute; left: 12px; color: #16849a; font-weight: 900; }
.web-material-card .source-strip { color: #3f555a; background: #f2f8f8; border-top-color: #c8dfe2; }
.web-material-card .source-strip::before { color: #527176; }
.web-material-card .source-strip a { overflow-wrap: anywhere; }
.web-material-card .source-strip a { color: #075b70; font-weight: 650; }
.web-material-card .source-strip a:hover { color: #0b839b; }
.web-material-card .source-strip strong { margin-right: 7px; color: #075b70; font-size: 8px; letter-spacing: .12em; }

.composer-wrap { position: sticky; z-index: 10; bottom: 18px; padding-top: 10px; }
.composer {
  padding: 7px;
  background: rgba(255,253,248,.94);
  border: 1px solid #c9beb1;
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(43,32,20,.16);
  backdrop-filter: blur(15px);
}
.composer textarea { width: 100%; min-height: 76px; max-height: 190px; padding: 15px 16px 8px; color: var(--ink); background: transparent; border: 0; outline: 0; resize: vertical; line-height: 1.6; }
.composer textarea::placeholder { color: #9b958d; }
.composer-foot { display: flex; align-items: center; gap: 14px; padding: 6px 7px 6px 12px; }
.composer-foot .spacer { flex: 1; }
.online-toggle { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.online-toggle input { accent-color: var(--accent); }
.keyboard-hint { color: #9b958d; font-size: 9px; }
.send-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 116px; }
.send-button.querying { opacity: 1; }
.query-loop { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: white; border-radius: 50%; animation: query-spin .72s linear infinite; }
@keyframes query-spin { to { transform: rotate(360deg); } }

.selection-tray {
  position: fixed;
  z-index: 50;
  right: 26px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 14px;
  color: white;
  background: var(--ink);
  border: 1px solid #3b3c3e;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.26);
  animation: tray-in .3s both;
}
@keyframes tray-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.selection-overview { display: grid; gap: 7px; min-width: 260px; }
.selection-metric { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; }
.selection-metric > span { grid-row: 1; display: grid; place-items: center; width: 34px; height: 34px; color: white; background: var(--accent); border-radius: 50%; font-weight: 800; }
.selection-metric.web > span { color: #062925; background: var(--ops-cyan); }
.selection-metric p { grid-column: 2; grid-row: 1; }
.selection-tray p { margin: 0; }
.selection-tray strong { display: block; font-size: 11px; }
.selection-tray small { display: block; max-width: 230px; margin-top: 2px; color: #9d9a94; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection-tray .button-primary:disabled { cursor: not-allowed; }
.selection-tray .button-primary { min-height: 46px; padding-inline: 18px; font-size: 12px; font-weight: 850; box-shadow: 0 8px 22px rgba(230,75,46,.26); }

/* Material studio */
.section-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 27px; }
.section-hero h1 { margin: 6px 0 3px; font: 700 clamp(36px, 4.2vw, 56px)/1 var(--display); letter-spacing: -.02em; }
.section-hero p { max-width: 660px; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.scope-note { max-width: 250px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; }
.scope-note strong { color: var(--ink); }
.studio-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; min-height: 640px; }
.campaign-sidebar, .material-document { background: rgba(255,253,248,.75); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.campaign-sidebar { padding: 16px; }
.sidebar-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; padding: 0 2px; }
.sidebar-title strong { font-size: 11px; letter-spacing: .06em; }
.sidebar-title span { color: var(--muted); font-size: 9px; }
.campaign-list { display: grid; gap: 7px; }
.campaign-list-row { position: relative; min-width: 0; }
.campaign-item { width: 100%; padding: 12px 58px 12px 12px; background: transparent; border: 1px solid transparent; border-radius: 9px; text-align: left; transition: .18s ease; }
.campaign-item:hover { background: white; border-color: var(--line); }
.campaign-item.active { background: var(--ink); border-color: var(--ink); color: white; }
.campaign-item strong { display: block; font-size: 12px; }
.campaign-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.campaign-item.active small { color: #aaa8a2; }
.campaign-item .scope-chip { display: inline-block; margin-top: 9px; padding: 3px 6px; color: var(--accent-dark); background: var(--accent-wash); border-radius: 3px; font-size: 8px; }
.campaign-delete { position: absolute; z-index: 2; top: 10px; right: 8px; min-height: 27px; padding: 4px 7px; color: #8b4e43; background: #fff8f5; border: 1px solid #e4c2ba; border-radius: 6px; font-size: 11px; font-weight: 700; transition: .18s ease; }
.campaign-delete:hover { color: white; background: var(--danger); border-color: var(--danger); }
.campaign-delete:disabled { cursor: wait; opacity: .62; }
.campaign-list-row.active .campaign-delete { color: #ffd9d0; background: rgba(255,255,255,.08); border-color: rgba(255,217,208,.35); }
.campaign-list-row.active .campaign-delete:hover { color: white; background: var(--danger); border-color: var(--danger); }
.material-document { min-width: 0; padding: 22px; }
.studio-empty, .state-box { display: grid; place-items: center; min-height: 420px; padding: 40px; text-align: center; }
.state-box.compact { min-height: 160px; }
.state-box .state-symbol { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 15px; color: var(--accent); border: 1px solid #e6a997; border-radius: 50%; font: 700 20px/1 var(--display); }
.state-box strong { font-size: 14px; }
.state-box p { max-width: 430px; margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.state-box.error { color: var(--danger); }
.material-head { display: flex; justify-content: space-between; gap: 22px; align-items: start; padding: 4px 2px 20px; border-bottom: 1px solid var(--line); }
.material-head h2 { margin: 5px 0 4px; font: 700 30px/1.08 var(--display); }
.material-head p { margin: 0; color: var(--muted); font-size: 10px; }
.material-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.regenerate-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.regenerate-button.is-loading { color: var(--accent-dark); background: var(--accent-wash); border-color: #e9a492; opacity: 1; }
.button-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(230,75,46,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: query-spin .72s linear infinite;
}
.campaign-process {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin: 16px 0 2px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(40,30,20,.08);
  animation: process-enter .24s ease both;
}
@keyframes process-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.campaign-process.loading { color: #fff7f3; background: linear-gradient(120deg, #b92e19, var(--accent)); border-color: var(--accent); }
.campaign-process.success { color: #103f32; background: linear-gradient(120deg, #def3e9, #eef9f4); border-color: #8ac8af; }
.campaign-process.error { color: var(--danger); background: #fff0ed; border-color: #e4a397; }
.campaign-process-icon {
  width: 34px;
  height: 34px;
  border: 4px solid rgba(255,255,255,.34);
  border-top-color: white;
  border-radius: 50%;
  animation: query-spin .8s linear infinite;
}
.campaign-process-check, .campaign-process-error {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: white;
  background: var(--positive);
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
}
.campaign-process-error { background: var(--danger); }
.campaign-process strong { display: block; font-size: 14px; }
.campaign-process p { margin: 4px 0 0; color: inherit; opacity: .8; font-size: 11px; line-height: 1.55; }
.campaign-process-state { padding: 6px 9px; color: white; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 999px; font-size: 10px; font-weight: 750; }
.campaign-process-action { min-height: 40px; white-space: nowrap; }
.next-action-focus { animation: next-action-pulse .7s ease 2; }
@keyframes next-action-pulse { 50% { transform: translateY(-2px) scale(1.035); box-shadow: 0 0 0 7px rgba(230,75,46,.18), 0 12px 28px rgba(230,75,46,.25); } }
.demo-selection-focus { animation: demo-selection-pulse 1.15s ease-in-out infinite; }
.demo-action-pulse { animation: demo-action-pulse 1.05s ease-in-out infinite !important; }
@keyframes demo-selection-pulse {
  50% { transform: translateY(-2px) scale(1.045); box-shadow: 0 0 0 8px rgba(230,75,46,.14), 0 9px 24px rgba(230,75,46,.22); }
}
@keyframes demo-action-pulse {
  50% { transform: translateY(-3px) scale(1.055); box-shadow: 0 0 0 9px rgba(230,75,46,.2), 0 14px 34px rgba(230,75,46,.34); filter: saturate(1.18) brightness(1.08); }
}
.campaign-process-stream, .presentation-progress-slot { margin: 15px 0; }
.campaign-process-stream:empty, .presentation-progress-slot:empty { display: none; }
.operation-stream {
  overflow: hidden;
  color: #eaf2fb;
  background:
    radial-gradient(circle at 100% 0%, rgba(230,75,46,.2), transparent 18rem),
    linear-gradient(145deg, #111a26, #17283a);
  border: 1px solid #32465a;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(16,24,34,.16);
  text-align: left;
}
.operation-stream > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid rgba(185,207,229,.16); }
.operation-stream > header strong { display: block; color: white; font-size: 13px; }
.operation-stream > header small { display: block; margin-top: 3px; color: #9fb2c6; font-size: 10px; }
.operation-stream > header b { padding: 5px 8px; color: #ffd9d0; background: rgba(230,75,46,.18); border: 1px solid rgba(255,160,139,.28); border-radius: 999px; font-size: 9px; }
.operation-stream-spinner, .operation-stream-check, .operation-stream-error { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; }
.operation-stream-spinner { border: 3px solid rgba(255,255,255,.22); border-top-color: #ff765d; animation: query-spin .76s linear infinite; }
.operation-stream-check { color: white; background: var(--positive); font-size: 15px; font-weight: 850; }
.operation-stream-error { color: white; background: var(--danger); font-size: 15px; font-weight: 850; }
.operation-stream-log { max-height: 154px; padding: 7px 15px 11px; overflow-y: auto; scroll-behavior: smooth; scrollbar-color: #617b96 transparent; }
.operation-stream-row { display: grid; grid-template-columns: 58px 9px minmax(0,1fr); align-items: start; gap: 8px; padding: 6px 0; border-bottom: 1px dashed rgba(185,207,229,.1); animation: stream-row-in .24s ease both; }
.operation-stream-row:last-child { border-bottom: 0; }
.operation-stream-row time { padding-top: 1px; color: #7690aa; font: 700 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.operation-stream-dot { width: 7px; height: 7px; margin-top: 4px; background: #ff765d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,118,93,.11); animation: stream-dot-pulse 1s ease-in-out infinite; }
.operation-stream-row p { margin: 0; color: #d6e1ec; font-size: 11px; line-height: 1.55; }
.operation-stream-row.success p { color: #9ce0c9; font-weight: 700; }
.operation-stream-row.success .operation-stream-dot { background: #5fc4a1; box-shadow: 0 0 0 4px rgba(95,196,161,.12); animation: none; }
.operation-stream-row.error p { color: #ffb4a6; font-weight: 700; }
.operation-stream-row.error .operation-stream-dot { background: #ff765d; animation: none; }
.operation-stream-row.waiting p { color: #ffd9d0; font-weight: 700; }
.operation-stream-row.waiting .operation-stream-dot { background: #f4a261; box-shadow: 0 0 0 4px rgba(244,162,97,.12); }
.operation-stream.success { border-color: #529e83; }
.operation-stream.success > header b { color: #bff2df; background: rgba(49,128,100,.24); border-color: rgba(95,196,161,.35); }
.operation-stream.error { border-color: #b55645; }
@keyframes stream-row-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes stream-dot-pulse { 50% { opacity: .35; transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) {
  .demo-selection-focus, .demo-action-pulse { animation: none !important; outline: 4px solid rgba(230,75,46,.35); outline-offset: 4px; }
}
.scope-select { display: flex; align-items: center; gap: 7px; padding: 0 8px; background: white; border: 1px solid var(--line); border-radius: 7px; font-size: 9px; }
.scope-select select { height: 38px; background: transparent; border: 0; outline: 0; font-size: 10px; }
.material-tabs { display: flex; gap: 4px; margin: 17px 0 18px; padding-bottom: 8px; overflow-x: auto; scrollbar-width: thin; }
.material-tab { flex: 0 0 auto; padding: 9px 11px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 10px; font-weight: 650; }
.material-tab:hover { color: var(--ink); background: var(--paper); }
.material-tab.active { color: white; background: var(--ink); }
.material-editor { min-height: 420px; }
.editor-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; }
.editor-heading h3 { margin: 0; font: 700 23px/1 var(--display); }
.editor-heading p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.editor-actions { display: flex; gap: 7px; }
.structured-fields { display: grid; gap: 12px; }
.structured-group { padding: 14px; background: #f8f4ed; border: 1px solid var(--line); border-radius: 9px; }
.structured-group > .group-title { display: block; margin-bottom: 10px; color: var(--accent-dark); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.array-item { position: relative; padding: 12px; background: white; border: 1px solid var(--line); border-radius: 8px; }
.array-item + .array-item { margin-top: 8px; }
.array-index { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; color: white; background: var(--ink); border-radius: 50%; font-size: 8px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field + .field { margin-top: 12px; }
.field > span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
.field input, .field textarea, .field select, .filter-input, .pdf-page-control input {
  width: 100%;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input, .field select, .filter-input { min-height: 42px; padding: 0 11px; }
.field textarea { min-height: 96px; padding: 10px 11px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus, .filter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,75,46,.1); }
.field input:disabled, .field textarea:disabled, .field select:disabled { color: #77726b; background: #efebe4; }
.material-feedback { min-height: 22px; margin: 11px 2px 0; color: var(--positive); font-size: 10px; }
.presentation-panel { padding: 4px 0; }
.presentation-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 17px; }
.presentation-toolbar p { margin: 0; color: var(--muted); font-size: 10px; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.preview-page { margin: 0; padding: 8px; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 20px rgba(50,38,25,.06); }
.preview-page img { display: block; width: 100%; aspect-ratio: 16/9; background: #e9e4dc; object-fit: contain; }
.preview-page figcaption { display: flex; justify-content: space-between; padding: 7px 3px 0; color: var(--muted); font-size: 8px; }
.preview-frame { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 9px; background: white; }

/* Resource library */
.library-tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.library-tab { padding: 9px 13px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; font-weight: 650; }
.library-tab.active { color: white; background: var(--ink); border-color: var(--ink); }
.library-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 15px; }
.library-toolbar .filter-input { max-width: 360px; }
.library-toolbar small { color: var(--muted); }
.resource-upload-panel {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.28fr);
  margin: 0 0 22px;
  background: var(--surface-strong);
  border: 1px solid #aab9c9;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(7,17,31,.1);
  overflow: hidden;
}
.resource-upload-copy {
  position: relative;
  padding: 22px 24px;
  color: white;
  background:
    radial-gradient(circle at 100% 0%, rgba(45,140,255,.32), transparent 52%),
    linear-gradient(145deg, #07111f, #10243d);
}
.resource-upload-copy::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(45,212,191,.27);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(45,212,191,.035);
  pointer-events: none;
}
.upload-kicker { color: #72f0df; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.resource-upload-copy h2 { margin: 7px 0 8px; font: 700 27px/1.05 var(--display); letter-spacing: .01em; }
.resource-upload-copy p { max-width: 34ch; margin: 0; color: #d9e7f6; font-size: 12px; line-height: 1.7; }
.single-file-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: white; font-size: 12px; }
.single-file-note span { display: grid; place-items: center; width: 24px; height: 24px; color: #07111f; background: var(--ops-cyan); border-radius: 50%; font-size: 12px; font-weight: 850; }
.resource-upload-form { display: grid; align-content: center; gap: 14px; min-width: 0; padding: 20px 22px; }
.resource-file-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 76px;
  padding: 12px 14px;
  background: #f7fafc;
  border: 1px dashed #8fa7bf;
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.resource-file-picker:hover { background: #f0f7ff; border-color: var(--ops-blue); }
.resource-file-picker:has(input:focus-visible) { border-color: var(--ops-blue); box-shadow: 0 0 0 3px rgba(45,140,255,.18); }
.resource-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-picker-icon { display: grid; flex: 0 0 auto; place-items: center; width: 44px; height: 44px; color: white; background: var(--ops-navy); border-radius: 10px; font-size: 22px; font-weight: 700; }
.file-picker-label { min-width: 0; }
.file-picker-label b { display: block; color: var(--ops-navy); font-size: 14px; }
.file-picker-label small { display: block; margin-top: 4px; color: #55697d; font-size: 11px; overflow-wrap: anywhere; }
.resource-upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.resource-upload-status { display: flex; align-items: center; gap: 10px; min-width: 0; color: #506275; }
.resource-upload-status p { min-width: 0; margin: 0; }
.resource-upload-status strong, .resource-upload-status small { display: block; }
.resource-upload-status strong { color: var(--ops-navy); font-size: 12px; line-height: 1.35; }
.resource-upload-status small { max-width: 46ch; margin-top: 3px; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.upload-status-dot { flex: 0 0 auto; width: 10px; height: 10px; background: #93a4b5; border-radius: 50%; box-shadow: 0 0 0 4px rgba(147,164,181,.15); }
.resource-upload-status.selected .upload-status-dot { background: var(--ops-blue); box-shadow: 0 0 0 4px rgba(45,140,255,.14); }
.resource-upload-status.loading .upload-status-dot { background: var(--warning); box-shadow: 0 0 0 4px rgba(178,106,27,.14); animation: upload-pulse 1.1s ease-in-out infinite; }
.resource-upload-status.duplicate .upload-status-dot { background: var(--ops-blue); box-shadow: 0 0 0 4px rgba(45,140,255,.14); }
.resource-upload-status.success .upload-status-dot { background: var(--positive); box-shadow: 0 0 0 4px rgba(37,112,90,.14); }
.resource-upload-status.error .upload-status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(164,44,34,.14); }
.resource-upload-status.error strong, .resource-upload-status.error small { color: var(--danger); }
.resource-upload-button { flex: 0 0 auto; min-width: 126px; }
.resource-upload-button:disabled { cursor: not-allowed; opacity: .45; }
@keyframes upload-pulse { 50% { transform: scale(.72); opacity: .58; } }
.offer-grid, .resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.library-card { min-width: 0; padding: 17px; background: rgba(255,253,248,.85); border: 1px solid var(--line); border-radius: var(--radius); transition: .2s ease; }
.library-card:hover { border-color: #bcaea1; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.library-card h3 { margin: 4px 0 7px; font: 700 20px/1.1 var(--display); }
.library-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.library-card .offer-highlight { min-height: 48px; margin: 13px 0; color: var(--ink); font-size: 12px; font-weight: 650; }
.badge { flex: 0 0 auto; padding: 3px 6px; background: var(--paper-deep); border-radius: 3px; color: var(--muted); font-size: 8px; }
.badge.available { color: #135e49; background: #dceee6; }
.badge.checking { color: #8b571b; background: #f5e9d3; }
.badge.paused { color: #8e2f28; background: #f5dedb; }
.library-meta { display: grid; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.library-meta span { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 9px; }
.library-meta b { max-width: 70%; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.price-row b { color: var(--accent-dark); }
.card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.card-actions a, .card-actions button { padding: 6px 8px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 5px; font-size: 9px; text-decoration: none; }
.card-actions a:hover, .card-actions button:hover { color: var(--accent-dark); border-color: #dc9885; }
.pdf-workbench { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; }
.pdf-control { align-self: start; padding: 18px; background: var(--ink); border-radius: var(--radius); color: white; }
.pdf-control h3 { margin: 5px 0 7px; font: 700 23px/1 var(--display); }
.pdf-control p { margin: 0 0 17px; color: #aaa7a1; font-size: 10px; }
.pdf-page-control { display: grid; grid-template-columns: 36px 1fr 36px; gap: 6px; }
.pdf-page-control button { color: white; background: #303133; border: 1px solid #4c4d4e; border-radius: 6px; }
.pdf-page-control input { height: 38px; text-align: center; }
.pdf-open { display: block; margin-top: 13px; color: #e9b2a3; font-size: 10px; text-underline-offset: 3px; }
.pdf-canvas { min-height: 620px; padding: 14px; background: #d8d2c9; border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: center; overflow: auto; }
.pdf-canvas img { display: inline-block; width: auto; max-height: 840px; background: white; box-shadow: 0 12px 34px rgba(0,0,0,.17); }

/* Dialogs and feedback */
.dialog { width: min(680px, calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); overflow: auto; }
.dialog::backdrop { background: rgba(18,18,18,.67); backdrop-filter: blur(5px); }
.dialog-frame { position: relative; padding: 30px; }
.dialog-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; }
.dialog-heading { padding-right: 42px; }
.dialog-heading > span { color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.dialog-heading h2 { margin: 7px 0 6px; font: 700 32px/1.05 var(--display); }
.dialog-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.selected-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0; padding: 12px; background: var(--paper); border-radius: 8px; }
.selected-summary span { padding: 5px 8px; color: var(--accent-dark); background: white; border: 1px solid #edc2b6; border-radius: 999px; font-size: 9px; }
.selected-summary-group { flex: 1 1 240px; min-width: 0; }
.selected-summary-group > small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .06em; }
.selected-summary-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.selected-summary .empty-selection { color: var(--muted); border-color: var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid .field + .field { margin-top: 0; }
.span-2 { grid-column: 1 / -1; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.form-status { min-height: 18px; margin: 9px 0 0; color: var(--muted); font-size: 10px; text-align: right; }
.form-status .operation-stream { margin-top: 12px; }
.form-status.error, .error-text { color: var(--danger) !important; }
.offer-link-field { margin: 14px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.offer-link-field legend { padding: 0 5px; color: var(--muted); font-size: 9px; font-weight: 700; }
.offer-link-field > div { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; max-height: 220px; overflow: auto; }
.offer-link-field label { display: flex; align-items: flex-start; gap: 6px; padding: 7px; background: var(--paper); border-radius: 5px; font-size: 9px; }
.offer-link-field input { margin-top: 2px; accent-color: var(--accent); }
.toast { position: fixed; z-index: 100; top: 20px; right: 24px; max-width: 360px; padding: 12px 15px; color: white; background: var(--ink); border-left: 4px solid var(--positive); border-radius: 6px; box-shadow: var(--shadow); font-size: 11px; animation: toast-in .28s both; }
.toast.error { border-left-color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 224px minmax(0,1fr); }
  .rail { padding-inline: 13px; }
  .brand small, .internal-badge { display: none; }
  .welcome-block { grid-template-columns: 1fr; gap: 16px; }
  .welcome-copy { position: static; display: grid; grid-template-columns: 52px 1fr; align-items: start; padding-top: 6px; }
  .welcome-copy .index { grid-row: 1 / 3; }
  .welcome-copy p { margin-top: 6px; }
  .offer-grid, .resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .resource-upload-panel { grid-template-columns: minmax(210px, .68fr) minmax(330px, 1.32fr); }
  .studio-grid { grid-template-columns: 230px minmax(0,1fr); }
  .merchant-body { grid-template-columns: 1fr; }
  .resource-zone { border-left: 0; border-top: 1px solid var(--line); }
  .topbar { padding-inline: 20px; }
  .topbar .role-chip b { display: none; }
  .topbar .role-chip { padding-right: 4px; }
  .topbar .role-chip > span:first-child { margin-right: 0; }
  .workspace-body:has(.demo-guide:not([hidden])) { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 72px; }
  .app-shell { display: block; }
  .rail { position: relative; min-height: 0; height: auto; padding: 11px 14px 10px; overflow: visible; }
  .rail::after, .role-console > p, .rail-signal, .rail-foot { display: none; }
  .brand-lockup { align-items: center; padding: 0 0 10px; border: 0; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark i { width: 23px; height: 23px; }
  .brand strong { font-size: 16px; }
  .brand small { display: block; margin-top: 3px; font-size: 8px; }
  .rail-kicker { display: none; }
  .main-nav {
    position: fixed;
    z-index: 70;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    background: rgba(27,28,29,.97);
    border-top: 1px solid #343536;
    backdrop-filter: blur(14px);
  }
  .nav-item { grid-template-columns: 24px 1fr; width: auto; min-width: 102px; padding: 7px 9px; }
  .nav-icon { width: 21px; height: 21px; }
  .nav-item b { font-size: 10px; }
  .nav-item small { display: none; }
  .topbar { display: grid; grid-template-columns: minmax(0,1fr) auto; top: 0; height: auto; min-height: 58px; padding: 7px 10px; }
  .breadcrumb { display: none; }
  .topbar-role-switch { min-width: 0; overflow: visible; }
  .topbar-demo-actions { justify-self: end; }
  .topbar .role-chip { flex: 0 0 auto; min-height: 32px; }
  .topbar .role-chip > span:first-child { width: 23px; height: 23px; font-size: 7px; }
  .role-tooltip {
    --tooltip-x: 0;
    position: fixed;
    top: 64px;
    right: 10px !important;
    left: 10px !important;
    width: auto;
    transform: translateY(-5px);
  }
  .topbar .role-chip:hover .role-tooltip,
  .topbar .role-chip:focus-visible .role-tooltip { transform: translateY(0); }
  .role-tooltip::before { display: none; }
  .demo-next-button { min-width: 108px; min-height: 42px; padding-block: 5px; }
  .workspace-body, .workspace-body:has(.demo-guide:not([hidden])) { display: flex; flex-direction: column; }
  .demo-guide { position: relative; order: -1; top: auto; width: auto; max-height: none; margin: 10px; border: 1px solid var(--line-strong); border-top: 4px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow-soft); }
  .panel, .stage { min-height: calc(100vh - 113px); }
  .chat-view { width: calc(100% - 26px); min-height: calc(100vh - 113px); padding-top: 24px; }
  .chat-masthead { align-items: flex-start; padding-bottom: 20px; }
  .chat-masthead h1 { font-size: clamp(34px, 11vw, 48px); }
  .chat-masthead p { font-size: 11px; }
  .session-stamp { display: none; }
  .conversation { padding-top: 18px; }
  .welcome-copy { display: block; }
  .welcome-copy .index { margin-bottom: 10px; font-size: 28px; }
  .welcome-copy h2 { font-size: 21px; }
  .scenario-card { grid-template-columns: 30px 1fr 16px; min-height: 74px; padding: 11px 12px; }
  .scenario-card > span:first-child { font-size: 19px; }
  .scenario-card b { font-size: 12px; }
  .message { grid-template-columns: 29px minmax(0,1fr); gap: 8px; }
  .message.user { grid-template-columns: minmax(0,1fr) 29px; padding-left: 28px; }
  .message-avatar { width: 28px; height: 28px; font-size: 7px; }
  .merchant-head { grid-template-columns: 1fr; padding: 17px 16px 13px; }
  .merchant-head h3 { font-size: 22px; }
  .merchant-check { justify-self: start; }
  .offer-zone, .resource-zone { padding: 15px 16px; }
  .source-strip { padding: 10px 16px; }
  .ranked-results > header { gap: 10px; padding: 15px; }
  .web-material-body { padding: 16px; }
  .composer-wrap { bottom: 7px; }
  .composer { border-radius: 14px; }
  .composer textarea { min-height: 64px; padding: 11px 10px 5px; }
  .composer-foot { gap: 8px; padding-inline: 7px; }
  .keyboard-hint { display: none; }
  .send-button { min-width: 90px; min-height: 38px; padding-inline: 10px; }
  .selection-tray { right: 10px; bottom: 77px; left: 10px; justify-content: space-between; padding: 8px; }
  .selection-overview { min-width: 0; }
  .selection-tray small { max-width: 120px; }
  .selection-tray .button-primary { min-height: 38px; padding-inline: 11px; font-size: 10px; }
  .view-pad { padding: 24px 13px 35px; }
  .section-hero { display: block; }
  .section-hero h1 { font-size: 39px; }
  .scope-note { max-width: none; margin-top: 14px; }
  .studio-grid { display: block; }
  .campaign-sidebar { margin-bottom: 12px; padding: 11px; overflow-x: auto; }
  .campaign-list { display: flex; }
  .campaign-list-row { flex: 0 0 210px; }
  .campaign-item { height: 100%; }
  .material-document { padding: 14px; }
  .material-head { display: block; }
  .material-head h2 { font-size: 25px; }
  .material-head-actions { justify-content: flex-start; margin-top: 14px; }
  .campaign-process { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .campaign-process-action, .campaign-process-state { grid-column: 1 / -1; width: 100%; }
  .editor-heading { display: block; }
  .editor-actions { margin-top: 12px; }
  .preview-grid { grid-template-columns: 1fr; }
  .preview-frame { height: 480px; }
  .offer-grid, .resource-grid { grid-template-columns: 1fr; }
  .resource-upload-panel { grid-template-columns: 1fr; }
  .resource-upload-copy { padding: 19px 18px; }
  .resource-upload-copy p { max-width: none; }
  .resource-upload-form { padding: 16px; }
  .resource-upload-actions { align-items: stretch; flex-direction: column; }
  .resource-upload-button { width: 100%; }
  .library-toolbar { align-items: flex-start; flex-direction: column; }
  .library-toolbar .filter-input { max-width: none; }
  .pdf-workbench { grid-template-columns: 1fr; }
  .pdf-canvas { min-height: 360px; padding: 7px; }
  .dialog-frame { padding: 24px 18px; }
  .dialog-heading h2 { font-size: 27px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .offer-link-field > div { grid-template-columns: 1fr; }
  .toast { top: 12px; right: 12px; left: 12px; max-width: none; }
}

@media (max-width: 400px) {
  .brand small { display: none; }
  .role-chip b { font-size: 9px; }
  .nav-item { min-width: 96px; padding-inline: 7px; }
  .chat-masthead h1 { font-size: 37px; }
  .chat-masthead h1 em { display: block; }
  .online-toggle { font-size: 9px; }
  .selection-metric > span { width: 30px; height: 30px; }
  .selection-tray p strong { font-size: 9px; }
  .section-hero h1 { font-size: 35px; }
  .material-head-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .scope-select { grid-column: 1 / -1; }
}

/* Shared type scale keeps operational details readable across every workspace. */
:root {
  --text-micro: 11px;
  --text-small: 12px;
  --text-caption: 13px;
  --text-body: 15px;
}

body { font-size: 16px; }

.brand-mark b,
.internal-badge,
.rail-kicker,
.rail-signal small,
.rail-foot,
.demo-next-button small,
.demo-guide-head span,
.demo-guide-head b,
.demo-guide dt,
.demo-guide-foot,
.eyebrow,
.session-stamp small,
.message-label,
.merchant-rank,
.zone-title,
.detail-pills span,
.source-strip::before,
.source-strip a,
.source-strip span,
.keyboard-hint,
  .topbar .role-chip > span:first-child,
.message-avatar,
.selection-tray p strong,
.campaign-item .scope-chip,
.structured-group > .group-title,
.array-index,
.field > span,
.preview-page figcaption,
.badge,
.library-meta span,
.card-actions a,
.card-actions button,
.dialog-heading > span,
.selected-summary span,
.offer-link-field legend,
.offer-link-field label { font-size: var(--text-micro); }

.brand small,
.role-console > p,
.nav-item small,
.rail-signal strong,
.topbar .role-chip b,
.inline-action,
.merchant-check,
.resource-unit p,
.online-toggle,
.selection-tray small,
.scope-note,
.sidebar-title span,
.campaign-item small,
.material-head p,
.scope-select,
.scope-select select,
.material-tab,
.editor-heading p,
.material-feedback,
.presentation-toolbar p,
.library-tab,
.library-card p,
.pdf-control p,
.pdf-open,
.form-status { font-size: var(--text-small); }

.role-chip b,
.nav-item b,
.breadcrumb,
.demo-next-button strong,
.demo-guide-summary,
.demo-guide dd,
.session-stamp strong,
.scenario-card small,
.merchant-head p,
.offer-unit strong,
.resource-unit strong,
.sidebar-title strong,
.campaign-item strong,
.state-box p,
.toast { font-size: var(--text-caption); }

.chat-masthead p,
.welcome-copy p,
.scenario-card b,
.offer-benefit,
.library-card .offer-highlight { font-size: var(--text-body); }

.demo-guide dl > div { grid-template-columns: 76px minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}