:root {
  --teal-950: #0d47a1;
  --teal-800: #1565c0;
  --teal-700: #1976d2;
  --teal-600: #42a5f5;
  --teal-100: #bbdefb;
  --teal-50: #e3f2fd;
  --ink: rgba(0, 0, 0, .87);
  --slate: rgba(0, 0, 0, .60);
  --muted: rgba(0, 0, 0, .54);
  --line: rgba(0, 0, 0, .12);
  --surface: #fff;
  --warm: #fff4e5;
  --orange: #ed6c02;
  --shadow: 0 8px 32px rgba(0, 0, 0, .16);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: #f5f5f5;
  font-family: "Roboto", "Noto Sans TC", system-ui, sans-serif;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.demo-shell {
  display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(360px, 590px);
  gap: clamp(30px, 7vw, 100px);
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 42px;
}

.context-panel {
  display: flex;
  min-height: 650px;
  flex-direction: column;
  padding: 14px 0;
}

.brand-lockup {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--teal-950);
  font-weight: 800;
}

.brand-glyph, .assistant-avatar, .mini-avatar {
  display: grid;
  place-items: center;
  color: white;
  background: var(--teal-700);
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

.brand-glyph {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.context-copy {
  margin: auto 0 34px;
}

.eyebrow, .genui-kicker {
  color: var(--teal-700);
  font-family: "Roboto", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.context-copy h1 {
  max-width: 390px;
  margin: 12px 0 18px;
  font-size: clamp(36px, 4.3vw, 58px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.context-copy > p:last-child {
  max-width: 390px;
  margin: 0;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.85;
}

.flow-note {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 15px 13px;
  border-top: 1px solid rgba(7, 122, 115, .2);
  padding-top: 24px;
}

.flow-note > span {
  color: var(--teal-700);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.flow-note p { margin: 0; color: var(--slate); font-size: 13px; }
.flow-note strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.prototype-note { margin: 28px 0 0; color: var(--muted); font-size: 11px; }

.chat-phone {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  width: 100%;
  height: min(860px, calc(100vh - 60px));
  min-height: 650px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 12px;
  background: #fafafa;
  box-shadow: var(--shadow);
}

.chat-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 10px;
  align-items: center;
  padding: 17px 20px;
  color: white;
  background: var(--teal-700);
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14);
}

.icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: white;
  background: transparent;
  cursor: pointer;
}

.icon-button:hover { background: rgba(255,255,255,.1); }
.icon-button svg, .send-button svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.assistant-identity {
  display: flex;
  gap: 11px;
  align-items: center;
}

.assistant-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
}

.assistant-identity strong { display: block; font-size: 16px; }
.assistant-identity span { display: block; margin-top: 2px; color: rgba(255,255,255,.78); font-size: 11px; }
.assistant-identity i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #66bb6a; }

.conversation {
  overflow-y: auto;
  min-height: 0;
  padding: 18px 16px 32px;
  scroll-behavior: smooth;
}

.day-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 10px;
}
.day-marker::before, .day-marker::after { flex: 1; height: 1px; background: var(--line); content: ""; }

.message-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin: 0 0 16px;
  animation: rise .32s ease both;
}

.user-message { justify-content: flex-end; }
.message-stack { max-width: 80%; }
.user-message .message-stack { text-align: right; }

.mini-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
}

.bubble {
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
}

.assistant-bubble {
  border: 0;
  border-radius: 4px;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.12);
}

.user-bubble {
  border-radius: 4px;
  color: white;
  background: var(--teal-700);
}

.message-time {
  display: block;
  margin: 5px 4px 0;
  color: #98a5aa;
  font-family: "Roboto", sans-serif;
  font-size: 9px;
}

.typing { display: flex; gap: 4px; padding: 14px 18px; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: #8aa09e; animation: bounce 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

.generated-message { align-items: flex-start; }
.generated-stack { width: calc(100% - 36px); }

.genui-card {
  overflow: hidden;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #f5f5f5;
  box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.12);
}

.generation-status {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  color: var(--teal-800);
  border-bottom: 1px solid var(--line);
  background: white;
  font-size: 10px;
  font-weight: 700;
}

.generation-status.is-complete {
  color: #49635f;
  background: #f7fbfa;
}

.generation-spark {
  width: 11px;
  height: 11px;
  border: 2px solid rgba(7, 149, 139, .25);
  border-top-color: var(--teal-600);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.generation-done {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #2e7d32;
  font-size: 9px;
}

.generation-stage {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition:
    max-height .55s cubic-bezier(.2, .8, .2, 1),
    opacity .35s ease,
    transform .45s ease;
}

.generation-stage.is-visible {
  max-height: 900px;
  opacity: 1;
  transform: translateY(0);
}

.genui-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 17px;
  color: white;
  background: white;
  color: var(--ink);
}
.genui-header h2 { margin: 4px 0; font-size: 1.25rem; font-weight: 500; letter-spacing: .0075em; }
.genui-header p { margin: 0; color: var(--slate); font-size: 12px; }
.genui-header .genui-kicker { color: var(--teal-700); }
.available-pill { flex: 0 0 auto; border-radius: 16px; padding: 5px 10px; color: var(--teal-950); background: var(--teal-50); font-size: 11px; font-weight: 500; }
.rights-wallet { display: flex; flex-direction: column; background: #fff; }
.rights-wallet .generation-status { order: -1; }
.rights-wallet [data-stage="header"] { order: 0; }
.rights-wallet [data-stage="chart"] { order: 1; }
.rights-wallet [data-stage="cards"] { order: 2; }
.rights-wallet [data-stage="rules"] { order: 3; }
.rights-wallet [data-stage="summary"] { order: 4; }
.rights-card-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; padding: 0 18px 18px; }
.rights-bank-card { display: grid; align-content: start; gap: 3px; min-height: 138px; padding: 12px; border-radius: 12px; color: white; box-shadow: 0 5px 14px rgba(18, 38, 62, .12); }
.rights-bank-card.blue { background: linear-gradient(135deg, #1565c0, #42a5f5); }
.rights-bank-card.violet { background: linear-gradient(135deg, #532d8c, #9c6ade); }
.rights-bank-card.orange { background: linear-gradient(135deg, #d45113, #ff9a3c); }
.rights-bank-card span { font-size: 11px; font-weight: 800; }
.rights-bank-card small { opacity: .72; font-size: 9px; }
.rights-bank-card strong { align-self: end; font-size: 15px; }
.rights-bank-card em { opacity: .78; font-size: 8px; font-style: normal; }
.card-benefit-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.card-benefit-tags b { border-radius: 9px; padding: 3px 6px; color: white; background: rgba(255,255,255,.18); font-size: 7px; font-weight: 700; }
.rights-rule-panel { margin: 0 18px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fafcff; }
.rights-rule-panel > header { display: flex; justify-content: space-between; padding: 12px 14px; background: #eef5ff; }
.rights-rule-panel > header strong { font-size: 12px; }
.rights-rule-panel > header span { color: #42617e; font-size: 10px; }
.rights-rule-panel > article { position: relative; display: grid; grid-template-columns: 90px 1fr; padding: 9px 14px; border-top: 1px solid #edf1f5; }
.rights-rule-panel > article b { font-size: 10px; }
.rights-rule-panel > article span { color: var(--slate); font-size: 10px; }
.rights-rule-panel > article em { position: absolute; right: 13px; bottom: -7px; z-index: 1; padding: 1px 5px; border-radius: 8px; color: #6b7e91; background: white; font-size: 8px; font-style: normal; }
.rights-rule-panel > article:last-of-type em { display: none; }
.rights-window-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid var(--line); padding: 12px; }
.rights-window-results section { display: grid; gap: 5px; padding: 9px; border-radius: 8px; background: white; }
.rights-window-results strong { font-size: 10px; }
.rights-window-results span { color: var(--muted); font-size: 8px; }
.rights-window-results span.qualified { color: #20843d; font-weight: 800; }
.rights-visual { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(240px, 1.1fr); gap: 10px; align-items: center; border-top: 1px solid var(--line); padding: 16px 18px; }
.rights-chart { position: relative; width: min(100%, 285px); aspect-ratio: 1; margin: auto; }
.rights-chart svg { width: 100%; height: 100%; transform: rotate(140deg); }
.rights-track, .rights-progress { fill: none; stroke-linecap: butt; stroke-width: 10; stroke-dasharray: 82 18; }
.rights-track { stroke: #edf1f5; }
.rights-progress { stroke: var(--right-color); stroke-dasharray: calc(var(--progress) * .82) calc(100 - var(--progress) * .82); transition: stroke-dasharray .9s ease; }
.rights-chart-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.rights-chart-center strong { color: var(--ink); font-size: 32px; line-height: 1; }
.rights-chart-center span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.rights-legend { display: grid; gap: 5px; }
.rights-legend article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #edf1f5; }
.rights-legend article:last-child { border-bottom: 0; }
.rights-legend i { width: 8px; height: 8px; border-radius: 50%; }
.rights-legend div { display: grid; gap: 2px; }
.rights-legend strong { font-size: 11px; }
.rights-legend small { color: var(--muted); font-size: 9px; }
.rights-legend > article > span { color: #9a5a13; font-size: 9px; font-weight: 800; }
.rights-legend > article > span.unlocked { color: #20843d; }
.rights-rule-trigger { border: 0; border-radius: 12px; padding: 4px 7px; color: #8a5a10; background: #fff3d8; font-size: 8px; font-weight: 800; cursor: pointer; }
.rights-rule-trigger:not(.has-conflict) { color: #42617e; background: #edf4fb; }
.rights-rule-trigger[aria-expanded="true"] { color: white; background: #42617e; }
.airport-rule-detail { margin: 0 18px 16px; border: 1px solid #e1e7ee; border-radius: 10px; padding: 12px; background: #fbfcfe; }
.airport-rule-detail > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.airport-rule-detail > header div { display: grid; gap: 2px; }
.airport-rule-detail > header strong { font-size: 11px; }
.airport-rule-detail > header span { color: var(--muted); font-size: 8px; }
.airport-rule-detail > header > b { border-radius: 10px; padding: 3px 6px; color: #9a5a13; background: #fff2d7; font-size: 8px; }
.airport-rule-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.airport-rule-columns section { padding: 9px; border-radius: 8px; background: white; }
.airport-rule-columns section > strong { display: block; margin-bottom: 6px; font-size: 9px; }
.airport-rule-columns p { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0; padding: 6px 0; border-top: 1px solid #edf1f5; }
.airport-rule-columns p b, .airport-rule-columns p span { font-size: 8px; }
.airport-rule-columns p small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; }
.airport-rule-columns em { display: block; margin-top: 6px; color: #8a6432; font-size: 7px; font-style: normal; line-height: 1.5; }
.airport-rule-detail footer { margin-top: 9px; color: #526779; font-size: 8px; line-height: 1.5; }
.right-rule-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.right-rule-list p { display: grid; gap: 4px; margin: 0; padding: 9px; border-radius: 8px; background: white; }
.right-rule-list b { font-size: 8px; }
.right-rule-list span { color: #334b60; font-size: 9px; }
.right-rule-list small { color: var(--muted); font-size: 7px; line-height: 1.4; }
.airport-booking { overflow: hidden; background: white; }
.airport-booking > header { padding: 18px; border-bottom: 1px solid var(--line); }
.airport-booking h2 { margin: 4px 0; font-size: 20px; }
.airport-booking header p { margin: 0; color: var(--muted); font-size: 10px; }
.booking-steps { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: 8px; align-items: center; padding: 13px 18px; background: #f7fafb; }
.booking-steps b { color: #9aa6ad; font-size: 9px; }
.booking-steps b.active { color: var(--teal-700); }
.booking-steps i { height: 2px; background: #d8e0e3; }
.eligibility-step, .booking-form-step, .booking-review { padding: 18px; }
.eligibility-step label, .booking-form-grid > label { display: grid; gap: 5px; color: var(--slate); font-size: 10px; }
.airport-booking input, .airport-booking select { box-sizing: border-box; width: 100%; min-height: 38px; border: 1px solid #cfdadd; border-radius: 5px; padding: 8px 10px; background: white; font: inherit; }
.eligibility-context { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 12px 0; padding: 12px; border-radius: 8px; background: #eef8f6; }
.eligibility-context span, .eligibility-context small { color: var(--slate); font-size: 9px; }
.eligibility-context strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--teal-800); }
.airport-booking section > button { width: 100%; min-height: 40px; border: 0; border-radius: 5px; color: white; background: var(--teal-700); font-weight: 800; cursor: pointer; }
.eligibility-success { margin-bottom: 12px; border-radius: 7px; padding: 10px; color: #21743a; background: #edf8ef; font-size: 10px; font-weight: 800; }
.booking-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.booking-form-grid .wide, .booking-form-grid fieldset { grid-column: 1 / -1; }
.booking-form-grid fieldset { border: 1px solid #d5dfe2; border-radius: 6px; padding: 9px; }
.booking-form-grid fieldset label { margin-right: 12px; font-size: 10px; }
.booking-form-grid fieldset input { width: auto; min-height: 0; }
.booking-review { text-align: center; }
.booking-review p { color: var(--muted); font-size: 10px; }
.anomaly-card { background: #171e24; color: white; }
.anomaly-card > header { display: flex; justify-content: space-between; padding: 18px; }
.anomaly-card h2 { margin: 4px 0; font-size: 20px; }
.anomaly-card header p { margin: 0; color: #8d9aa5; font-size: 9px; }
.anomaly-badge { align-self: start; border-radius: 12px; padding: 5px 8px; color: #ffccd9; background: #5b1d31; font-size: 9px; font-weight: 800; }
.anomaly-range { display: flex; gap: 5px; padding: 0 18px 10px; }
.anomaly-range button { border: 0; border-radius: 12px; padding: 5px 10px; color: #8d9aa5; background: #222c34; font-size: 8px; cursor: pointer; }
.anomaly-range button.active { color: white; background: #146bd1; }
.anomaly-chart { position: relative; margin: 0 18px; padding: 5px 0 25px 32px; }
.anomaly-chart svg { display: block; width: 100%; overflow: visible; }
.chart-grid line { stroke: #2d3942; stroke-width: 1; }
.area-fill { fill: url(#areaFill); }
.area-line { fill: none; stroke: #66a8ff; stroke-width: 4; }
.anomaly-guide { stroke: #ef3c71; stroke-width: 2; stroke-dasharray: 5 5; }
.anomaly-dot { fill: #ef3c71; stroke: #171e24; stroke-width: 4; }
.y-labels { position: absolute; top: 6px; bottom: 25px; left: 0; display: flex; flex-direction: column; justify-content: space-between; color: #71818d; font-size: 7px; }
.x-labels { display: flex; justify-content: space-between; margin-top: 5px; color: #71818d; font-size: 7px; }
.x-labels strong { color: #ff6b96; }
.anomaly-point { position: absolute; top: 8%; left: 61.7%; display: grid; width: 24px; height: 24px; place-items: center; border: 0; border-radius: 50%; color: white; background: #ef3c71; font-weight: 900; cursor: pointer; transform: translate(-50%, -50%); box-shadow: 0 0 0 5px rgba(239,60,113,.18); }
.anomaly-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 5px 18px 18px; border: 1px solid #303c46; border-radius: 9px; padding: 12px; background: #202931; transition: border-color .2s; }
.anomaly-detail.is-highlighted { border-color: #ef3c71; }
.anomaly-detail div { display: grid; gap: 3px; }
.anomaly-detail span { color: #81909b; font-size: 7px; }
.anomaly-detail strong { font-size: 9px; }
.anomaly-detail button, .dispute-confirm button { grid-column: 1 / -1; border: 0; border-radius: 6px; padding: 9px; color: white; background: #b5244e; font-size: 9px; font-weight: 800; cursor: pointer; }
.dispute-confirm { margin: -5px 18px 18px; border-radius: 8px; padding: 12px; color: #322127; background: #fff0f4; }
.dispute-confirm p { margin: 4px 0 10px; font-size: 8px; }
.nearby-offers { background: #fff; }
.nearby-offers > header { display: flex; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.nearby-offers h2 { margin: 4px 0; font-size: 19px; }
.nearby-offers header p { margin: 0; color: var(--muted); font-size: 9px; }
.nearby-data-status { align-self: start; border-radius: 12px; padding: 5px 8px; color: #176d5f; background: #e6f7f3; font-size: 8px; font-weight: 800; }
.nearby-loading { display: grid; min-height: 220px; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 10px; }
.nearby-loading span { width: 28px; height: 28px; border: 3px solid #d9ece9; border-top-color: var(--teal-700); border-radius: 50%; animation: spin .8s linear infinite; }
.nearby-location-bar { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 11px 18px; background: #f7faf9; }
.nearby-location-bar > span { color: var(--muted); font-size: 8px; }
.nearby-location-bar select { border: 1px solid #cedbd9; border-radius: 6px; padding: 6px 8px; background: white; font-size: 9px; }
.nearby-location-bar small { color: #71817f; font-size: 7px; text-align: right; }
.nearby-carousel { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 8px; align-items: center; padding: 16px 10px 8px; }
.nearby-carousel.single { box-sizing: border-box; width: 100%; grid-template-columns: minmax(0, 1fr); padding-inline: 18px; }
.nearby-carousel.single article { width: 100%; min-width: 0; grid-template-columns: minmax(180px, .8fr) minmax(0, 1.2fr); }
.nearby-arrow { display: grid; width: 32px; height: 48px; place-items: center; border: 0; border-radius: 16px; color: #305b57; background: #edf5f4; font-size: 26px; cursor: pointer; }
.nearby-carousel article { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(170px, 1.2fr); min-height: 180px; overflow: hidden; border: 1px solid #dce5e4; border-radius: 10px; background: #f1f2f2; box-shadow: 0 4px 12px rgba(28,57,54,.08); }
.nearby-brand-image { display: grid; min-height: 180px; place-items: center; padding: 16px; background: white; }
.nearby-brand-image img { display: block; max-width: 100%; max-height: 110px; object-fit: contain; }
.nearby-store-copy { display: grid; align-content: center; padding: 16px; }
.nearby-store-copy > span { color: var(--teal-700); font-size: 8px; font-weight: 800; }
.nearby-store-copy h3 { margin: 4px 0; font-size: 17px; }
.nearby-store-copy > strong { color: #9a4e12; font-size: 10px; line-height: 1.5; }
.nearby-store-copy p { margin: 8px 0; color: var(--slate); font-size: 8px; line-height: 1.5; }
.nearby-store-copy a { justify-self: start; color: #1769d1; font-size: 10px; font-weight: 800; }
.nearby-pagination { display: flex; justify-content: center; gap: 10px; align-items: center; padding: 4px 16px 14px; color: var(--muted); font-size: 8px; }
.nearby-pagination span { display: flex; gap: 4px; }
.nearby-pagination i { width: 5px; height: 5px; border-radius: 50%; background: #c4d0cf; }
.nearby-pagination i.active { width: 14px; border-radius: 4px; background: var(--teal-700); }
.nearby-error { padding: 24px; text-align: center; }
.nearby-error p { color: var(--muted); font-size: 9px; }
.nearby-error button { border: 0; border-radius: 6px; padding: 8px 12px; color: white; background: var(--teal-700); }
.rights-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; margin: 0 18px 18px; padding: 13px 14px; border-radius: 10px; background: #f1f7ff; }
.rights-summary strong { font-size: 12px; }
.rights-summary span { color: var(--slate); font-size: 10px; line-height: 1.5; }
.rights-summary button { grid-column: 2; grid-row: 1 / span 2; border: 0; border-radius: 7px; padding: 9px 12px; color: white; background: #1976d2; font-size: 10px; font-weight: 800; cursor: pointer; }

.section-label {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 17px 17px 10px;
  font-size: 17px;
  font-weight: 500;
}
.section-label i { width: 4px; height: 24px; border-radius: 2px; background: var(--teal-700); }

.available-list { display: grid; gap: 10px; padding: 0 12px; }
.available-benefit { overflow: hidden; border: 0; border-radius: 4px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: box-shadow .2s ease; }
.available-benefit.is-open { box-shadow: 0 3px 6px rgba(0,0,0,.16); }

.benefit-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 15px;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.benefit-copy { display: block; min-width: 0; }
.benefit-title-row { display: flex; gap: 9px; align-items: center; }
.benefit-title-row strong { font-size: 16px; font-weight: 500; }
.benefit-icon { flex: 0 0 auto; width: 25px; height: 25px; fill: none; stroke: var(--teal-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefit-description { display: block; margin: 8px 0 4px 34px; color: var(--slate); font-size: 11px; line-height: 1.55; }
.benefit-link { display: block; margin-left: 34px; color: var(--teal-700); font-size: 11px; font-weight: 800; }

.usage {
  display: grid;
  align-self: stretch;
  align-content: center;
  border-left: 1px dashed #b9c9c7;
  padding-left: 10px;
  text-align: center;
}
.usage small { color: var(--muted); font-size: 10px; }
.usage strong { margin-top: 4px; color: #35454d; font-size: 17px; }
.chevron { color: var(--teal-600); font-size: 25px; line-height: 1; }

.benefit-detail {
  border-top: 1px solid #edf2f1;
  padding: 13px 15px 15px 49px;
  background: #fafafa;
}
.benefit-detail p { margin: 0 0 11px; color: var(--slate); font-size: 11px; line-height: 1.65; }
.benefit-detail button, .compact-status button {
  border: 0;
  min-height: 36px;
  border-radius: 4px;
  padding: 6px 16px;
  color: white;
  background: var(--teal-700);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02857em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.benefit-detail button:disabled { background: #5e9f9a; cursor: default; }

.locked-label { padding-top: 22px; }
.locked-card { margin: 0 12px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: white; }
.locked-banner { position: relative; overflow: hidden; padding: 13px 16px; color: #9a643f; background: var(--warm); font-size: 12px; font-weight: 800; }
.credit-card-art { position: absolute; right: 15px; bottom: -10px; width: 51px; height: 37px; border-radius: 7px; background: linear-gradient(135deg, #ff9c4a, #ff6f24); box-shadow: -9px -5px 0 rgba(255, 160, 77, .18); }
.credit-card-art::after { position: absolute; top: 10px; left: 0; width: 100%; height: 5px; background: rgba(255,255,255,.4); content: ""; }

.locked-benefit {
  display: grid;
  grid-template-columns: 29px 1fr 12px;
  gap: 10px;
  align-items: center;
  width: calc(100% - 24px);
  margin: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  text-align: left;
  background: white;
  cursor: pointer;
}
.locked-benefit:last-child { border-bottom: 0; }
.locked-icon .benefit-icon { stroke: #b9bfbe; }
.locked-benefit strong { display: block; font-size: 14px; font-weight: 500; }
.locked-benefit small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.compact-status {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 17px;
  background: white;
}
.status-orbit { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--teal-100); }
.status-orbit .benefit-icon { width: 29px; height: 29px; }
.compact-status h2 { margin: 2px 0; font-size: 19px; }
.compact-status p { margin: 0; color: var(--slate); font-size: 10px; }

.case-catalog,
.finance-case {
  background: #fff;
}

.case-header,
.finance-case-header {
  padding: 20px;
  border-bottom: 1px solid var(--line);
}

.case-header h2,
.finance-case-header h2 {
  margin: 4px 0 6px;
  font-size: 20px;
  font-weight: 500;
}

.case-header p,
.finance-case-header p {
  margin: 0;
  color: var(--slate);
  font-size: 12px;
  line-height: 1.6;
}

.case-command-list {
  display: grid;
  max-height: 430px;
  overflow-y: auto;
}

.case-command-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid var(--line);
  padding: 8px 16px;
}

.case-command-list article > span {
  color: var(--teal-700);
  font-size: 11px;
  font-weight: 700;
}

.case-command-list strong,
.case-command-list small {
  display: block;
}

.case-command-list strong { font-size: 13px; font-weight: 500; }
.case-command-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.finance-case-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.finance-metric {
  max-width: 118px;
  border-radius: 16px;
  padding: 6px 10px;
  color: var(--teal-950);
  background: var(--teal-50);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.finance-case-body { padding: 0 16px; }

.finance-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.finance-row:last-child { border-bottom: 0; }
.finance-row strong { font-size: 13px; font-weight: 500; }
.finance-row span { color: var(--ink); font-size: 12px; text-align: right; }
.finance-row small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }

.finance-case-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
}

.finance-case-actions button {
  min-height: 36px;
  border: 0;
  border-radius: 4px;
  padding: 6px 14px;
  color: var(--teal-700);
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
}

.finance-case-actions button:first-child {
  color: white;
  background: var(--teal-700);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.finance-case-actions button:disabled {
  color: rgba(0,0,0,.38);
  background: rgba(0,0,0,.12);
  box-shadow: none;
}

.finance-approval .finance-metric { color: #8a4b08; background: #fff4e5; }
.finance-security .finance-metric { color: #1b5e20; background: #e8f5e9; }
.finance-stream .finance-metric,
.finance-journey .finance-metric { position: relative; overflow: hidden; }
.finance-stream .finance-metric::after,
.finance-journey .finance-metric::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal-700) 75%, var(--line) 75%);
  content: "";
}

.spending-dashboard { padding: 18px 16px; }
.savings-calculator { display: grid; grid-template-columns: 1fr .9fr; gap: 16px; padding: 18px; background: #f7fafc; }
.savings-inputs { display: grid; gap: 10px; }
.savings-inputs label { position: relative; display: grid; gap: 5px; color: var(--slate); font-size: 10px; }
.savings-inputs input { box-sizing: border-box; width: 100%; height: 42px; border: 1px solid #cbd8dc; border-radius: 7px; padding: 0 42px 0 11px; background: white; font-size: 14px; font-weight: 700; }
.savings-inputs label span { position: absolute; right: 11px; bottom: 13px; color: var(--muted); font-size: 9px; }
.savings-result { display: grid; align-content: center; border-radius: 12px; padding: 18px; color: white; background: linear-gradient(145deg, #087f8c, #146c78); }
.savings-result > span { color: rgba(255,255,255,.72); font-size: 10px; }
.savings-result > strong { margin-top: 6px; font-size: 25px; }
.savings-result > div { height: 8px; margin-top: 18px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.2); }
.savings-result i { display: block; width: 0; height: 100%; border-radius: inherit; background: #7ee1b9; transition: width .25s ease; }
.savings-result small { margin-top: 7px; color: rgba(255,255,255,.72); }
.savings-result b { color: white; }
.savings-calculator.is-negative .savings-result { background: linear-gradient(145deg, #9b3c32, #73302a); }
.welcome-dashboard { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; padding: 18px; background: #f7fafc; }
.welcome-balance, .welcome-snapshot, .welcome-shortcuts { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: white; }
.welcome-balance { color: white; border-color: #27313a; background: #171e24; }
.welcome-balance { display: grid; align-content: start; }
.welcome-visual { display: flex; gap: 14px; align-items: center; }
.welcome-visual > div:last-child { display: grid; gap: 3px; }
.welcome-visual > div:last-child > strong { font-size: 17px; }
.asset-donut { display: grid; flex: 0 0 112px; height: 112px; place-content: center; border-radius: 50%; text-align: center; }
.figma-donut { background: radial-gradient(circle, #171e24 60%, transparent 61%), conic-gradient(#146bd1 0 45%, #171e24 45% 47%, #7a45d1 47% 68%, #171e24 68% 70%, #df2474 70% 83%, #171e24 83% 85%, #ff6200 85% 100%); box-shadow: 0 0 0 1px #26313a; }
.asset-donut span { color: #8d9aa5; font-size: 8px; }
.asset-donut strong { font-size: 18px; }
.welcome-balance .welcome-visual > div:last-child > small { color: #8d9aa5; }
.welcome-balance > span, .welcome-snapshot span { color: var(--muted); font-size: 10px; }
.welcome-balance > strong { margin-top: 5px; font-size: 25px; }
.welcome-balance > small, .welcome-snapshot small { margin-top: 3px; color: #6f7f88; font-size: 8px; }
.welcome-account-bars { display: grid; gap: 8px; margin-top: 20px; }
.welcome-account-bars i { position: relative; display: grid; grid-template-columns: 1fr auto; overflow: hidden; padding-bottom: 7px; font-style: normal; }
.welcome-account-bars i::after { position: absolute; bottom: 0; width: var(--share); height: 4px; border-radius: 3px; background: #146bd1; content: ""; }
.welcome-account-bars i:nth-child(2)::after { background: #7a45d1; }
.welcome-account-bars i:nth-child(3)::after { background: #ff6200; }
.welcome-account-bars b, .welcome-account-bars em { font-size: 9px; font-style: normal; }
.welcome-snapshot { display: grid; gap: 10px; }
.welcome-snapshot article { position: relative; display: grid; grid-template-columns: 1fr auto; padding-bottom: 9px; border-bottom: 1px solid #edf1f5; }
.welcome-snapshot article:last-child { border-bottom: 0; padding-bottom: 0; }
.welcome-snapshot strong { grid-column: 1 / -1; margin-top: 3px; font-size: 15px; }
.welcome-snapshot small { grid-column: 2; grid-row: 1; color: #2e7d32; }
.spark-bars { display: flex; grid-column: 1 / -1; gap: 3px; align-items: end; height: 30px; margin-top: 5px; }
.spark-bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: #8ed1d5; }
.spark-bars i:last-child { background: var(--teal-700); }
.mini-progress { grid-column: 1 / -1; height: 7px; margin-top: 8px; overflow: hidden; border-radius: 4px; background: #e8edef; }
.mini-progress i { display: block; width: 72%; height: 100%; background: #ffb74d; }
.rights-dots { display: flex; grid-column: 1 / -1; gap: 5px; margin-top: 8px; }
.rights-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--teal-600); box-shadow: inset 0 0 0 3px white; outline: 1px solid var(--teal-600); }
.welcome-shortcuts { grid-column: 1 / -1; }
.welcome-shortcuts > strong { font-size: 11px; }
.welcome-shortcuts > div { display: flex; gap: 8px; margin-top: 10px; }
.welcome-shortcuts button { flex: 1; border: 1px solid #c9d8df; border-radius: 7px; padding: 9px; color: #286878; background: white; font-size: 9px; font-weight: 700; cursor: pointer; }
@media (max-width: 650px) {
  .savings-calculator { grid-template-columns: 1fr; }
  .welcome-dashboard { grid-template-columns: 1fr; }
  .welcome-shortcuts { grid-column: 1; }
  .welcome-visual { align-items: center; }
  .asset-donut { flex-basis: 96px; height: 96px; }
  .welcome-shortcuts > div { flex-direction: column; }
  .nearby-location-bar { grid-template-columns: auto 1fr; }
  .nearby-location-bar small { grid-column: 1 / -1; text-align: left; }
  .nearby-carousel article { grid-template-columns: 1fr; }
  .nearby-carousel.single article { grid-template-columns: 1fr; }
  .nearby-brand-image { min-height: 100px; }
}
.spending-total { display: grid; grid-template-columns: 1fr auto; align-items: end; }
.spending-total small { grid-column: 1 / -1; color: var(--muted); }
.spending-total strong { margin-top: 4px; font-size: 28px; font-weight: 500; }
.spending-total span { color: #2e7d32; font-size: 11px; }
.mini-bars { display: flex; gap: 8px; align-items: end; height: 110px; margin-top: 16px; border-bottom: 1px solid var(--line); }
.mini-bars i { position: relative; flex: 1; height: var(--bar); border-radius: 3px 3px 0 0; background: var(--teal-100); }
.mini-bars i:last-child { background: var(--teal-700); }
.mini-bars span { position: absolute; right: 0; bottom: -20px; left: 0; color: var(--muted); font-size: 9px; font-style: normal; text-align: center; }
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 30px; }
.category-chips span { border-radius: 16px; padding: 5px 9px; background: #f1f3f4; font-size: 10px; }

.bill-payment { padding: 18px 16px; }
.bill-ring { display: grid; place-items: center; width: 150px; height: 150px; margin: 0 auto 16px; border: 12px solid var(--teal-50); border-top-color: var(--teal-700); border-radius: 50%; text-align: center; }
.bill-ring span { color: var(--muted); font-size: 11px; }
.bill-ring strong { font-size: 18px; font-weight: 500; }
.bill-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bill-meta span { border-radius: 4px; padding: 10px; background: #f5f5f5; color: var(--muted); font-size: 10px; }
.bill-meta strong { display: block; margin-top: 3px; color: var(--ink); font-size: 12px; }
.action-prompt { margin-top: 12px; border-left: 4px solid var(--teal-700); padding: 10px 12px; background: var(--teal-50); }
.action-prompt strong { font-size: 13px; }
.action-prompt p { margin: 2px 0 0; color: var(--slate); font-size: 10px; }

.approval-review { padding: 16px; }
.approval-icon { display: grid; width: 34px; height: 34px; margin-bottom: 8px; place-items: center; border-radius: 50%; color: #8a4b08; background: #fff4e5; font-weight: 700; }
.approval-review > p { margin: 12px 0 0; color: #8a4b08; font-size: 10px; }

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px; }
.benefit-grid article { min-height: 105px; border: 1px solid var(--line); border-radius: 4px; padding: 12px 10px; background: white; }
.benefit-grid b, .benefit-grid strong, .benefit-grid span { display: block; }
.benefit-grid b { color: var(--teal-700); font-size: 19px; }
.benefit-grid strong { margin-top: 10px; font-size: 11px; }
.benefit-grid span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.benefit-grid .locked { opacity: .55; background: #f5f5f5; }

.allocation-chart { display: grid; gap: 13px; padding: 18px 16px; }
.allocation-chart > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; font-size: 11px; }
.allocation-chart i { grid-column: 1 / -1; height: 8px; overflow: hidden; border-radius: 4px; background: #e0e0e0; }
.allocation-chart em { display: block; height: 100%; background: var(--teal-700); }

.budget-editor { display: grid; gap: 16px; padding: 18px 16px; }
.budget-editor label > span { display: flex; justify-content: space-between; font-size: 11px; }
.budget-editor b { font-weight: 500; }
.budget-editor input { width: 100%; accent-color: var(--teal-700); }

.score-panel { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; padding: 18px 16px; }
.score-gauge { display: grid; width: 120px; height: 120px; place-items: center; align-content: center; border: 13px solid #e8f5e9; border-top-color: #2e7d32; border-right-color: #2e7d32; border-radius: 50%; }
.score-gauge strong { font-size: 28px; font-weight: 500; }
.score-gauge span { color: #2e7d32; font-size: 10px; }
.score-factors { display: grid; gap: 9px; font-size: 10px; }
.loading-line { position: relative; overflow: hidden; border-radius: 4px; padding: 7px; background: #f5f5f5; }
.loading-line::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(25,118,210,.12), transparent); animation: shimmer 1.2s infinite; content: ""; }

.process-timeline { display: grid; padding: 14px 18px; }
.process-timeline > div { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 10px; min-height: 52px; }
.process-timeline > div:not(:last-child)::after { position: absolute; top: 27px; bottom: 0; left: 13px; width: 2px; background: var(--line); content: ""; }
.process-timeline i { display: grid; z-index: 1; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: white; background: #9e9e9e; font-size: 10px; font-style: normal; }
.process-timeline .active i, .process-timeline > div:has(i:first-child) i { background: var(--teal-700); }
.process-timeline strong, .process-timeline small { display: block; }
.process-timeline strong { font-size: 11px; }
.process-timeline small { color: var(--muted); font-size: 9px; }

.booking-picker { padding: 16px; }
.date-strip, .choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.date-strip button, .choice-grid button { border: 1px solid var(--line); border-radius: 4px; padding: 10px 6px; color: var(--ink); background: white; cursor: pointer; font-size: 10px; }
.date-strip .selected, .choice-grid .is-selected { border-color: var(--teal-700); color: var(--teal-700); background: var(--teal-50); }
.choice-grid { margin-top: 12px; }
.installment-grid { padding: 16px; margin: 0; }
.installment-grid button { display: grid; gap: 4px; }
.installment-grid span { color: var(--muted); font-size: 9px; }

.account-selector { display: grid; padding: 8px 16px; }
.account-selector label { display: flex; gap: 10px; align-items: center; min-height: 58px; border-bottom: 1px solid var(--line); cursor: pointer; }
.account-selector input { accent-color: var(--teal-700); }
.account-selector strong, .account-selector small { display: block; }
.account-selector strong { font-size: 11px; }
.account-selector small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.comparison-table { padding: 12px 16px; }
.comparison-table > div { display: grid; grid-template-columns: 1.4fr .8fr .8fr; min-height: 42px; align-items: center; border-bottom: 1px solid var(--line); font-size: 10px; }
.comparison-table span:not(:first-child) { text-align: right; }
.comparison-head { color: var(--muted); font-weight: 500; }
.comparison-recommendation { display: grid; gap: 4px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #e8f3ff; color: #174f86; }
.comparison-recommendation span { color: #49677f; font-size: 13px; }

.fx-quote { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 20px 16px; text-align: center; }
.fx-quote > div { border: 1px solid var(--line); border-radius: 4px; padding: 12px; }
.fx-quote span, .fx-quote strong { display: block; }
.fx-quote span { color: var(--muted); font-size: 10px; }
.fx-quote strong { margin-top: 4px; font-size: 20px; font-weight: 500; }
.fx-quote small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }

.upload-zone { display: grid; min-height: 180px; margin: 16px; place-items: center; align-content: center; border: 2px dashed #90caf9; border-radius: 6px; background: #f7fbff; text-align: center; }
.upload-zone > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: white; background: var(--teal-700); font-size: 20px; }
.upload-zone strong { margin-top: 12px; font-size: 12px; }
.upload-zone small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.voice-panel { display: grid; min-height: 190px; place-items: center; align-content: center; text-align: center; }
.voice-panel button { width: 72px; height: 72px; border: 12px solid var(--teal-50); border-radius: 50%; color: #d32f2f; background: white; box-shadow: 0 0 0 1px var(--line); font-size: 18px; }
.voice-panel strong { margin-top: 14px; font-size: 13px; }
.voice-panel span { margin-top: 4px; color: var(--muted); font-size: 10px; }

.calculator-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.calculator-panel label { color: var(--muted); font-size: 9px; }
.calculator-panel input, .mcp-app-preview input, .mcp-app-preview select { width: 100%; height: 38px; margin-top: 4px; border: 1px solid var(--line); border-radius: 4px; padding: 0 9px; background: white; }
.calculator-panel > div { grid-column: 1 / -1; display: flex; justify-content: space-between; border-radius: 4px; padding: 12px; background: var(--teal-50); font-size: 11px; }

.security-checks, .reasoning-summary { display: grid; gap: 9px; padding: 16px; }
.security-checks span { border-left: 4px solid #2e7d32; padding: 9px 11px; background: #e8f5e9; font-size: 10px; }
.reasoning-summary span { padding-left: 12px; color: var(--slate); font-size: 10px; }
.reasoning-summary strong { border-top: 1px solid var(--line); padding: 12px; color: var(--teal-950); background: var(--teal-50); font-size: 11px; }

.theme-preview { margin: 16px; border-radius: 6px; padding: 20px; color: white; background: #121212; box-shadow: 0 6px 14px rgba(0,0,0,.28); }
.theme-preview span, .theme-preview strong { display: block; }
.theme-preview span { color: rgba(255,255,255,.65); font-size: 10px; }
.theme-preview strong { margin-top: 5px; font-size: 22px; font-weight: 500; }
.theme-preview button { margin-top: 16px; border: 1px solid #90caf9; border-radius: 4px; padding: 7px 10px; color: #90caf9; background: transparent; }

.workspace-preview { display: grid; grid-template-columns: 92px 1fr; min-height: 160px; margin: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.workspace-preview nav { padding: 14px; color: white; background: #263238; font-size: 10px; line-height: 2.5; }
.workspace-preview main { display: grid; align-content: center; padding: 18px; }
.workspace-preview strong { font-size: 16px; }
.workspace-preview span { margin-top: 6px; color: var(--muted); font-size: 10px; }

.mcp-app-preview { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px; border: 1px solid var(--line); border-radius: 6px; padding: 32px 14px 14px; background: #fafafa; }
.sandbox-label { position: absolute; top: 0; right: 0; left: 0; padding: 6px 10px; color: var(--muted); background: #eeeeee; font-size: 8px; letter-spacing: .08em; }
.mcp-app-preview label { color: var(--muted); font-size: 9px; }

@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 13px 15px max(13px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
}
.composer input { width: 100%; height: 56px; border: 1px solid rgba(0,0,0,.23); border-radius: 4px; padding: 0 14px; color: var(--ink); background: white; font-size: 14px; }
.composer input:hover { border-color: rgba(0,0,0,.87); }
.composer input:focus { border: 2px solid var(--teal-700); outline: 0; padding-inline: 13px; }
.send-button { display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; color: white; background: var(--teal-700); cursor: pointer; box-shadow: 0 3px 5px rgba(0,0,0,.2); }
.send-button:hover { background: var(--teal-800); box-shadow: 0 5px 8px rgba(0,0,0,.22); }

.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-4px); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 850px) {
  body { background: #f7faf9; }
  .demo-shell { display: block; min-height: 100dvh; padding: 0; }
  .context-panel { display: none; }
  .chat-phone { height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
}

@media (max-width: 430px) {
  .conversation { padding-inline: 11px; }
  .generated-stack { width: calc(100% - 31px); }
  .genui-header { padding: 17px 15px 15px; }
  .genui-header h2 { font-size: 21px; }
  .benefit-main { grid-template-columns: minmax(0, 1fr) 68px 11px; padding: 13px 11px; }
  .benefit-title-row strong { font-size: 15px; }
  .benefit-description, .benefit-link { margin-left: 31px; }
  .compact-status { grid-template-columns: 45px 1fr; }
  .compact-status button { grid-column: 2; justify-self: start; }
}

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