:root {
  color-scheme: light;
  --ink: #151a24;
  --muted: #646d7e;
  --brand: #c8272b;
  --brand-dark: #aa1f26;
  --line: #e1e5ec;
  --panel: #f5f6f9;
  --white: #fff;
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.owner { margin: 0; background: var(--white); color: var(--ink); min-width: 320px; }
.owner a { color: inherit; text-decoration: none; }
.owner button, .owner input, .owner select { font: inherit; }
.owner button { cursor: pointer; }
.owner button:disabled { cursor: not-allowed; opacity: .58; }
.owner :focus-visible { outline: 3px solid #df6464; outline-offset: 3px; }
.owner [hidden] { display: none !important; }
.owner img { display: block; max-width: 100%; }
.owner h1, .owner h2, .owner h3, .owner h4, .owner p { margin: 0; }
.owner svg.icon { flex: none; vertical-align: middle; }
.headset-icon { flex: none; display: block; }
[data-public-home] .showroom-layout { grid-template-columns: minmax(0, 1fr); }
[data-public-home] #part-panel { display: none; }
.boot { padding: 48px; font-size: 15px; color: var(--muted); }

.portal-ribbon {
  background: #262935;
  color: #e7e8ec;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 12px;
  letter-spacing: .025em;
}
.topbar {
  position: sticky;
  z-index: 26;
  top: 0;
  background: #0d0f14;
  color: #fff;
  box-shadow: 0 8px 20px #03060f36;
}
.topbar-inner {
  max-width: 1440px;
  min-height: 74px;
  margin: auto;
  padding: 0 42px;
  display: flex;
  align-items: center;
  gap: 27px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy b { font-size: 16px; font-weight: 760; white-space: nowrap; letter-spacing: .05em; }
.brand-copy small { color: #9aa4b5; font-size: 10px; font-weight: 640; letter-spacing: .065em; white-space: nowrap; }
.desktop-nav { display: flex; gap: 25px; align-items: center; margin-left: auto; font-size: 13px; }
.desktop-nav a, .header-plate { white-space: nowrap; color: #d8dbe2; transition: .2s ease; }
.desktop-nav a:hover, .header-plate:hover { color: #ff7775; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.logout, .menu-toggle { border: 0; background: transparent; color: #c2c8d3; padding: 7px; font-size: 13px; }
.menu-toggle, .mobile-menu, .mobile-bottom { display: none; }
.button {
  border: 1px solid transparent;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 14px !important;
  font-weight: 690 !important;
  white-space: nowrap;
  line-height: 1.25;
}
.button .icon { width: 17px; height: 17px; }
.button .headset-icon { width: 17px; height: 17px; }
.button.primary { color: #fff; background: linear-gradient(120deg, var(--portal-accent, #d62d30), var(--portal-accent, #b71f26)); box-shadow: 0 7px 16px #a71a2e2c; }
.button.primary:hover { background: linear-gradient(120deg, var(--portal-accent, #e23439), var(--portal-accent, #bc2129)); }
.button.light { background: #f4f5f8; border-color: #e2e5ec; color: #353c49; }
.button.light:hover { background: #e9edf4; }
.button.ghost { background: #1e2431b5; color: #f2f5fa; border-color: #7f899a77; }
.button.outline { background: transparent; color: #f5f6f8; border-color: #454b56; }
.button.dark { color: #fff; background: #171c28; }
.button.small { min-height: 36px; padding: 7px 11px; font-size: 12px !important; }

.hero {
  position: relative;
  min-height: 547px;
  background: #11151c;
  color: #fff;
  overflow: hidden;
  display: grid;
  align-content: end;
}
.hero-slides { position: relative; display: grid; }
.hero-slide { grid-area: 1 / 1; position: relative; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.hero-slide[aria-hidden=false] { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide .hero-image { opacity: 0; transition: opacity .6s ease; }
.hero-slide[aria-hidden=false] .hero-image { opacity: 1; }
.hero-image, .hero-overlay { position: absolute; inset: 0; pointer-events: none; }
.hero-image { background: #20232d url('/owner-assets/hero.svg') center 62% / cover no-repeat; }
.hero-image.blue { filter: hue-rotate(195deg) saturate(.68); }
.hero-image.silver { filter: grayscale(.85) brightness(1.17); }
.hero-image.warm { filter: hue-rotate(28deg) saturate(.7) brightness(.9); }
.hero-overlay { background: linear-gradient(90deg, #080b10 0%, #0a0d13e0 28%, #0a0d1359 60%, #0a0d1310 100%), linear-gradient(0deg,#090b10 0%,transparent 25%); }
.hero-content {
  width: min(1260px, calc(100% - 84px));
  margin: 0 auto;
  padding: 69px 0 44px;
  position: relative;
}
.eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #b22931; font-weight: 800; font-size: 11px; letter-spacing: .13em; }
.eyebrow .icon { width: 14px; height: 14px; }
.hero .eyebrow { color: #ffadac; border: 1px solid #d95e5d55; background: #581e254f; padding: 7px 10px; border-radius: 5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #f46163; box-shadow: 0 0 8px #fc575a; }
.hero h1 { font-size: clamp(40px, 5.05vw, 77px); margin: 16px 0 13px; font-weight: 840; letter-spacing: -.038em; line-height: 1.065; }
.hero-content > p { color: #d5d9e4; font-size: 15px; line-height: 1.7; max-width: 44ch; }
.hero-stats { margin: 24px 0; display: flex; gap: 20px; }
.hero-stats div { display: grid; gap: 4px; padding-right: 20px; border-right: 1px solid #f3f6ff35; }
.hero-stats div:last-child { border-right: 0; }
.hero-stats strong { font-size: 24px; line-height: 1.05; }
.hero-stats span { font-size: 11px; color: #b8c2d2; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; }
.hero-actions .button { border-radius: 999px; transition: .25s ease; }
.hero-art-caption { position: absolute; top: 359px; right: max(28px, calc((100% - 1200px) / 2)); display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border: 1px solid #777f91a1; border-radius: 10px; background: #111722dc; color: #e9edf4; pointer-events: none; }
.hero-art-caption b, .hero-art-caption small { display: block; }
.hero-art-caption b { font-size: 11px; }
.hero-art-caption small { margin-top: 2px; color: #b1bbcd; font-size: 10px; }
.status-dot { width: 7px; height: 7px; margin-top: 3px; border-radius: 50%; background: #42d996; box-shadow: 0 0 8px #43d79799; }
.hero-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(1260px, calc(100% - 48px)); margin: auto; }
.hero-tabs button { min-height: 38px; background: #141821dc; color: #b8c1d2; border: 1px solid #646a7869; border-radius: 8px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; text-align: left; font-size: 12px; transition: .2s ease; }
.hero-tabs button:is(:hover,[aria-current]) { border-color: var(--portal-accent, #eb0a1e); color: white; background: #eb0a1e29; }
.hero-tabs button span { color: #e56a69; font-size: 11px; font-weight: 760; }

.section-space { width: min(1260px, calc(100% - 84px)); margin: 0 auto; }
.content-section { padding: 69px 0; }
.quick-check { padding: 34px 0 40px; }
.recall-card { background: white; border: 1px solid var(--line); border-radius: 13px; padding: 25px; box-shadow: 0 11px 28px #1b29450e; }
.recall-card.compact { border-top: 3px solid var(--brand); }
.compact-recall-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 16px; }
.compact-recall-head .card-header, .compact-recall-head .mode-tabs { margin-bottom: 0; }
.card-header { display: flex; align-items: center; gap: 13px; margin-bottom: 21px; }
.card-header h2 { font-size: 22px; margin-bottom: 4px; }
.card-header p, .section-heading p { color: var(--muted); line-height: 1.68; }
.badge-icon { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; background: #fcebed; color: #b5252f; border-radius: 10px; }
.service-image { background: transparent; }
.service-image img { width: 100%; height: 100%; object-fit: contain; }
.card-header .badge-icon { width: 48px; height: 48px; }
.mini-tag { display: inline-flex; padding: 5px 8px; background: #fcebed; border-radius: 5px; color: #a8252d; font-size: 11px; font-weight: 720; }
.mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; background: #f0f2f6; padding: 5px; border-radius: 9px; margin-bottom: 19px; }
.mode-tabs button { padding: 11px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #606a7c; font-size: 13px; font-weight: 690; transition: .2s ease; }
.mode-tabs button .icon { width: 17px; height: 17px; }
.mode-tabs button[aria-pressed=true] { background: white; color: var(--brand-dark); box-shadow: 0 3px 9px #1b294512; border-color: #e5e6eb; }
.recall-form { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) max-content; gap: 13px; align-items: end; }
.field { display: grid; gap: 7px; color: #333b48; font-size: 13px; font-weight: 650; }
.field-control { position: relative; }
.field input { border: 1px solid #dadee7; padding: 0 12px; border-radius: 8px; height: 44px; width: 100%; color: var(--ink); background: #fafbfc; font-weight: 480; }
.field-control:has([data-clear-field]:not([hidden])) input { padding-right: 33px; }
.field-control [data-clear-field] { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); display: grid; place-items: center; padding: 4px; border: 0; border-radius: 5px; background: #eaedf3; color: #637087; }
.field-control [data-clear-field] .icon { width: 14px; height: 14px; }
.field input::placeholder, .login-field input::placeholder { color: #727c8e; }
.recall-submit { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-examples { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 14px; font-size: 12px; color: var(--muted); }
.quick-examples b { margin-right: 3px; }
.quick-examples button { padding: 5px 8px; border: 1px solid #e1e6ee; border-radius: 7px; color: #384459; background: #f8fafc; overflow-wrap: anywhere; }
.quick-examples button:hover { border-color: var(--portal-accent, #eb0a1e); color: var(--brand-dark); }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 17px; }
.feature { display: flex; flex-direction: column; gap: 9px; text-align: left; padding: 22px; color: #272e3b; border: 1px solid #e2e6ef; border-radius: 17px; background: #fff; box-shadow: 0 12px 30px #1b29450e; transition: .25s cubic-bezier(.16, 1, .3, 1); }
.feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; width: 100%; }
.feature strong { font-size: 19px; }
.feature small { color: var(--muted); font-size: 13px; line-height: 1.55; }
.feature b { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); font-size: 13px; }
.feature:hover { transform: translateY(-5px); border-color: var(--portal-accent, #eb0a1e); box-shadow: 0 20px 40px #eb0a1e1f; }
.compact .recall-submit .primary { transition: transform .2s ease; }
.compact .recall-submit .primary:hover { transform: translateY(-1px); }
.feature .badge-icon { width: 52px; height: 52px; }

.section-heading { margin-bottom: 22px; }
.section-heading h2 { margin: 7px 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.21; letter-spacing: -.026em; }
.section-heading p { font-size: 14px; }
.campaign-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.campaign-card { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 340px; overflow: hidden; border-radius: 20px; background: #151a24; color: #fff; }
.campaign-card img, .campaign-card::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.campaign-card img { object-fit: cover; transition: transform .55s ease; }
.campaign-card::after { content: ''; background: linear-gradient(0deg, #090e17f5, #090e17d9 36%, #090e170d 100%); }
.campaign-card:hover img, .campaign-card:focus-within img { transform: scale(1.055); }
.campaign-copy { padding: 22px; }
.campaign-copy h3 { margin: 9px 0; font-size: clamp(18px, 1.75vw, 24px); line-height: 1.35; }
.campaign-copy p { color: #edf0f5; margin-bottom: 14px; font-size: 13px; line-height: 1.6; }
.showroom { color: #f4f6f9; font-family: -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
.owner-vue-surface:has(.showroom) .topbar { position: relative; }
.showroom > .section-space { width: min(1440px, calc(100% - 48px)); padding: 28px; border: 1px solid #262c38; border-radius: 24px; background: linear-gradient(#0f121b, #161b28); box-shadow: 0 22px 46px #0b102332; }
.showroom .dark-heading { margin-bottom: 16px; }
.showroom .dark-heading h2 { margin: 11px 0 10px; font-size: 28px; font-weight: 900; line-height: normal; letter-spacing: 0; }
.showroom .dark-heading p { max-width: 680px; color: #a7b0c2; font-size: 13px; line-height: 1.6; }
.showroom .eyebrow { padding: 4px 11px; border: 1px solid #a74248; border-radius: 999px; background: #59222b78; color: #ffb0b0; font-size: 10px; }
.showroom-kicker { margin-left: 10px; color: #a7b0c2; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.showroom-settings, .showroom-views { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.showroom-settings { margin-bottom: 10px; }
.showroom-settings > span { min-width: 45px; color: #a7b0c2; font-size: 12px; }
.showroom-settings button, .showroom-toolbar button, .showroom-views button { border: 1px solid #363d4a; background: #20242e; color: #edf0f5; font-size: 12px; font-weight: 650; }
.showroom-settings button { min-width: 168px; min-height: 48px; padding: 6px 14px; border-radius: 12px; text-align: left; transition: .2s ease; }
.showroom-settings button:hover { border-color: #eb0a1e99; color: #fff; }
.showroom-settings button[aria-pressed=true] { border-color: var(--portal-accent, #eb0a1e); background: linear-gradient(135deg, #eb0a1e47, #0f172ae6); color: #fff; box-shadow: 0 6px 18px #eb0a1e40; }
.showroom-settings button b, .showroom-settings button small { display: block; }
.showroom-settings button small { margin-bottom: 2px; color: #ff9698; font-size: 10px; }
.showroom-views { margin-bottom: 23px; }
.showroom-views button, .showroom-actions button { padding: 6px 12px; border-radius: 999px; }
.showroom-views button { transition: .2s ease; }
.showroom-views button:is(:hover,[aria-pressed=true]) { border-color: var(--portal-accent, #eb0a1e); background: var(--portal-accent, #eb0a1e); color: #fff; }
.showroom-views [data-xray][aria-pressed=true] { background: #0284c7; border-color: #38bdf8; }
.showroom-actions button:hover { border-color: var(--portal-accent, #eb0a1e); background: #eb0a1e40; }
.showroom-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.showroom-stage { position: relative; border: 1px solid #272d38; border-radius: 20px; overflow: hidden; background: #090d16; }
.showroom-viewport { height: 538px; position: relative; }
.showroom-viewport canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; outline-offset: -4px; }
.showroom-viewport canvas:active { cursor: grabbing; }
.showroom-fallback { display: grid; height: 100%; align-items: center; overflow: hidden; }
.showroom-fallback img { height: 100%; width: 100%; object-fit: cover; object-position: center 65%; }
.showroom-fallback.xray img { filter: hue-rotate(160deg) grayscale(.4); }
.scene-caption { position: absolute; z-index: 1; pointer-events: none; top: 16px; left: 18px; max-width: calc(100% - 36px); display: grid; gap: 2px; padding: 10px 14px; border: 1px solid #2a3342; border-radius: 12px; background: #111827d9; }
.scene-caption strong { font-size: 13px; }
.scene-caption span, .scene-caption small { font-size: 11px; color: #a6b1c6; }
.scene-caption small { color: #86c2f7; }
.showroom-viewport .showroom-pin { position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 7px; transform: translate(-50%, -50%); padding: 6px 12px 6px 9px; border-radius: 999px; color: #fff; background: #0f172ad9; backdrop-filter: blur(8px); border: 1px solid #ffffff47; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px #0007; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.showroom-pin-dot, .showroom-pin-pulse { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.showroom-pin-dot { background: #fff; }
.showroom-pin-pulse { position: absolute; left: 9px; background: var(--portal-accent, #eb0a1e); animation: showroom-pin-pulse 1.6s ease infinite; }
.showroom-viewport .showroom-pin:is(:hover,[aria-pressed=true]) { z-index: 2; transform: translate(-50%, -50%) scale(1.08); background: var(--portal-accent, #eb0a1e); border-color: #fff; }
@keyframes showroom-pin-pulse {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(2.8); opacity: 0; }
}
.showroom-toolbar { position: absolute; z-index: 3; bottom: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; padding: 9px 12px; border: 1px solid #2b3240; border-radius: 14px; background: #111827e8; }
.showroom-colors { display: flex; gap: 8px; align-items: center; }
.showroom-colors span { margin-right: 5px; color: #c1cada; font-size: 11px; }
.showroom-colors [data-paint-name] { margin: 0 0 0 3px; color: #eef2f8; white-space: nowrap; }
.showroom-colors button { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: var(--swatch); border: 2px solid #ffffff59; transition: transform .18s ease; }
.showroom-colors button[aria-pressed=true] { transform: scale(1.18); border-color: var(--portal-accent, #eb0a1e); box-shadow: 0 0 0 2px #eb0a1e73; }
.showroom-actions { display: flex; gap: 8px; }
.part-layout { display: grid; gap: 14px; padding: 22px; border: 1px solid #313745; border-radius: 20px; background: #1b202a; }
.part-detail { display: grid; gap: 17px; min-width: 0; }
.part-copy { display: grid; justify-items: start; gap: 12px; }
.part-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; gap: 7px; }
.part-meta small { color: #a1aabb; font-size: 11px; }
.part-copy .eyebrow { letter-spacing: .04em; line-height: 1.55; }
.part-copy h3 { width: 100%; font-size: 18px; font-weight: 800; }
.part-copy p, .part-actions p { color: #b4bed0; font-size: 12px; line-height: 1.6; }
.part-model .mini-tag { color: #a1aabb; background: transparent; padding: 0; }
.part-model strong { font-size: 12px; color: #e2e8f3; }
.part-model small { color: #f5a1a5; font-size: 11px; }
.part-model { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 13px; align-items: center; padding: 12px; border: 1px solid #2e3749; border-radius: 12px; background: #141a29; }
.part-model > div:last-child { display: grid; gap: 4px; }
.part-art img { width: 108px; height: 64px; object-fit: cover; }
.part-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.part-tabs button { min-height: 51px; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 10px; text-align: left; border: 1px solid #373f4e; border-radius: 9px; color: #e7ecf6; background: #212632; transition: .18s ease; }
.part-tabs button[aria-pressed=true] { border-color: #c73d43; background: #48232e; }
.part-tabs button > span { font-size: 12px; font-weight: 800; color: #ef7f85; }
.part-tabs button b, .part-tabs button small { display: block; }
.part-tabs button b { font-size: 11px; }
.part-tabs button small { margin-top: 3px; color: #b4bfd1; font-size: 10px; }
.part-actions { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 9px; }
.part-actions > div { grid-column: 1 / -1; padding: 14px 13px; border: 1px solid #274b41; border-radius: 10px; background: #162725; }
.part-actions strong { color: #96dbb9; font-size: 13px; }
.part-actions .button { min-height: 40px; white-space: normal; font-size: 12px !important; }

.lineup-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 15px; }
.lineup-filters button { background: #f4f6f9; border: 1px solid var(--line); border-radius: 7px; color: #535e73; padding: 8px 12px; font-size: 13px; font-weight: 650; transition: .2s ease; }
.lineup-filters button[aria-pressed=true] { background: #fcebec; color: #a72028; border-color: #f0c9ce; }
.lineup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 250px)); justify-content: space-between; gap: 16px; }
.vehicle-card, .notice-card { background: white; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; transition: .22s ease; }
.vehicle-art { position: relative; background: #1b2028; height: 146px; }
.vehicle-art img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.vehicle-art span { position: absolute; z-index: 2; top: 9px; left: 10px; background: #101621cf; color: #e6e9ed; border-radius: 5px; padding: 5px 7px; font-size: 11px; }
.vehicle-card { transition: transform .18s ease-out, box-shadow .25s ease, border-color .25s ease; }
.vehicle-card:hover { border-color: #eb0a1e73; box-shadow: 0 22px 44px #0f172a1a; }
.vehicle-art img { transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.vehicle-card:hover .vehicle-art img { transform: scale(1.07) translateY(-3px); }
.vehicle-card-body, .notice-card { padding: 15px; }
.vehicle-card h3, .notice-card h3 { margin: 5px 0; font-size: 17px; }
.vehicle-card p, .notice-card p, .faq p { color: var(--muted); line-height: 1.62; font-size: 13px; }
.vehicle-card-body > div { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vehicle-card .button { min-height: 33px; padding: 6px 8px; font-size: 12px !important; }
.text-button { padding: 4px 0; border: 0; color: var(--brand-dark); font-size: 12px !important; font-weight: 730 !important; background: transparent; }
.text-button .icon { width: 14px; height: 14px; }
.muted, .notice-card time { color: var(--muted); font-size: 12px; }
.notices-wrap { background: #f3f5f8; }
.notice-filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.notice-filters label { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; padding: 0 9px; color: #66748a; background: #fff; }
.notice-filters label .icon { width: 17px; height: 17px; }
.notice-filters input, .notice-filters select { height: 39px; color: #354153; background: #fff; font-size: 13px; }
.notice-filters input { flex: 1; min-width: 0; border: 0; padding: 0; }
.notice-filters select { padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; }
.notices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.notice-card { display: grid; gap: 8px; justify-items: start; }
.notice-card:hover { background: #fff; border-color: var(--portal-accent, #eb0a1e); transform: translateY(-4px); box-shadow: 0 16px 32px #0f172a14; }
.notice-card h3 { margin: 1px 0; }
.notices-wrap .section-space { width: min(1260px, calc(100% - 48px)); }
.notices-wrap .notices-grid { gap: 20px; }
.notices-wrap .notice-card { padding: 22px; border-radius: 18px; min-width: 0; }
.notice-card h3 a { color: inherit; }
.notice-card h3 a:hover { color: var(--brand-dark); }
.notice-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.notice-card-series { display: grid; gap: 4px; border-top: 1px solid var(--line); width: 100%; padding-top: 9px; font-size: 13px; }
.notice-card-series small { color: var(--muted); }
.owner-vue-surface:has(.notice-detail, .recall-page) {
  --notice-accent: var(--portal-accent, #eb0a1e);
  font-family: -apple-system, "system-ui", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.owner-vue-surface:has(.notice-detail, .recall-page) .portal-ribbon { background: #060911; padding-block: 6px; }
.owner-vue-surface:has(.notice-detail, .recall-page) .topbar { background: rgb(11 15 25 / .95); }
.owner-vue-surface:has(.notice-detail, .recall-page) .topbar-inner { width: min(1440px, calc(100% - 48px)); min-height: 73px; padding-inline: 0; }
.notice-brand { gap: 12px; }
.notice-logo { display: grid; place-items: center; flex: none; width: 48px; height: 40px; border-radius: 10px; background: #fff; }
.notice-brand-copy { display: grid; grid-template-columns: auto auto; gap: 2px 8px; align-items: center; white-space: nowrap; }
.notice-brand-copy b { font-size: 16px; font-weight: 800; }
.notice-brand-copy > span { justify-self: start; border-radius: 4px; background: var(--notice-accent); padding: 2px 6px; font-size: 10px; font-weight: 700; }
.notice-brand-copy small { grid-column: 1 / -1; color: #94a3b8; font-size: 11px; }
.notice-detail { background: #f8fafc; color: #0f172a; padding-bottom: 56px; }
.notice-container { width: min(1240px, 100%); margin-inline: auto; }
.notice-detail-hero { padding: 40px 24px 48px; color: #fff; background: linear-gradient(135deg, #0b0f19, #1e293b); border-bottom: 3px solid var(--notice-accent); }
.notice-back { display: inline-flex; align-items: center; font-size: 13px; padding: 7px 14px; margin-bottom: 20px; background: #ffffff14; border: 1px solid #ffffff33; border-radius: 999px; }
.notice-back:hover { background: #ffffff26; }
.notice-eyebrow { margin-bottom: 8px; color: #f87171; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.notice-detail-hero h1 { margin: 0 0 18px; font-size: 30px; line-height: 1.3; font-weight: 900; overflow-wrap: anywhere; }
.notice-detail-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 13px; color: #cbd5e1; }
.notice-risk { padding: 4px 12px; border-radius: 999px; background: var(--notice-accent); color: #fff; font-size: 12px; font-weight: 700; }
.notice-detail-grid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 36px 24px 0; }
.notice-article, .notice-action-card { min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; }
.notice-article { padding: 32px; box-shadow: 0 10px 30px #0f172a0a; }
.notice-article section { margin-bottom: 28px; }
.notice-article h3 { margin-bottom: 14px; padding-left: 12px; border-left: 4px solid var(--notice-accent); font-size: 18px; font-weight: 800; }
.notice-article p { margin-bottom: 12px; color: #334155; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.notice-remedy { padding: 18px 20px; border: 1px solid #fecaca; border-radius: 14px; background: #fef2f2; }
.notice-remedy p { margin: 14px 0; color: #991b1b; font-size: 14px; line-height: 1.75; }
.notice-article dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; gap: 14px; }
.notice-article dl div { min-height: 69.5px; background: #f8fafc; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 12px; }
.notice-article dt { color: #64748b; font-size: 12px; }
.notice-article dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.notice-action-card { border-top: 4px solid var(--notice-accent); text-align: center; padding: 28px 24px; }
.notice-action-card img { display: inline-block; margin-bottom: 12px; }
.notice-action-card h4 { margin-bottom: 8px; font-size: 17px; }
.notice-action-card p { margin-bottom: 20px; color: #64748b; font-size: 13px; line-height: 1.55; }
.notice-action-primary, .notice-action-card .notice-action-secondary { display: block; width: 100%; min-height: 46px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.notice-action-card .notice-action-primary { margin-bottom: 10px; padding: 13px; background: var(--notice-accent); color: #fff; }
.notice-action-card .notice-action-primary:hover { background: #cc081a; }
.notice-action-secondary { padding: 12px; border: 1px solid #e2e8f0; background: #f8fafc; color: #0f172a; }
.notice-action-secondary:hover { background: #f1f5f9; }
.notice-detail-empty { padding: 36px 24px; }
.faq article { display: grid; grid-template-columns: max-content 1fr; align-items: start; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--line); transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.faq article:hover { border-color: #eb0a1e59; transform: translateY(-3px); box-shadow: 0 14px 30px #0f172a0f; }
.faq article > span { display: inline-block; padding: 4px 7px; border-radius: 6px; background: #fcebed; color: #b22931; font-size: 12px; font-weight: 780; }
.faq h3 { font-size: 14px; }
.faq p { padding: 5px 0 0; }
.empty-state { color: #909db1; padding: 26px 10px; text-align: center; }
.site-footer { background: #10131c; color: #d0d6e1; padding: 35px 0 0; }
.footer-inner { width: min(1260px, calc(100% - 84px)); display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 24px; margin: auto; }
.footer-inner > div { display: grid; justify-items: start; align-content: start; gap: 9px; }
.footer-inner p, .footer-inner > div > a:not(.brand), .footer-inner button { font-size: 12px; line-height: 1.55; color: #aeb8c9; }
.footer-inner strong { color: #f0f2f6; font-size: 13px; }
.footer-inner button { border: 0; padding: 0; background: none; }
.footer-bottom { padding: 14px 20px; margin-top: 24px; border-top: 1px solid #2e3341; text-align: center; font-size: 11px; color: #a3adc2; }

.recall-page { background: #f4f6fa; color: #0f172a; }
.recall-page + .site-footer { border-top: 3px solid var(--notice-accent); }
.page-cover { color: #fff; background: linear-gradient(125deg, #090d16, #1e293b 60%, #2a0a12); padding: 48px 0 84px; }
.recall-hero-inner, .query-section { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.recall-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.recall-hero-photo img { display: inline-block; width: 320px; height: 192px; object-fit: cover; box-shadow: 0 12px 35px #0005; }
.page-cover .eyebrow { margin-bottom: 12px; padding: 3.5px 12px; color: #f55b63; background: #eb0a1e29; border: 1px solid #e8515775; border-radius: 999px; letter-spacing: .19em; }
.page-cover h1 { margin: .67em 0 12px; font-size: 32px; }
.page-cover p { margin: 14px 0; color: #cbd5e1; font-size: 14px; line-height: 1.7; max-width: 620px; }
.query-section { position: relative; margin-top: -48px; padding-bottom: 64px; }
.query-section .recall-card { padding: 32px; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 14px 40px #0f172a19; }
.query-section .mode-tabs { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin-bottom: 24px; background: transparent; }
.query-section .mode-tabs button { min-height: 45px; padding: 11px 20px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #475569; font-size: 14px; font-weight: 700; }
.query-section .mode-tabs [aria-pressed=true] { background: #0f172a; color: #fff; border-color: #0f172a; box-shadow: none; }
.query-section .recall-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.query-section .field { gap: 8px; font-size: 13px; font-weight: 700; }
.query-section .field input { height: 50px; padding: 0 38px 0 16px; border-radius: 12px; border-color: #cbd5e1; background: #f8fafc; font-size: 15px; transition: .2s ease; }
.query-section .field input:focus { border-color: var(--portal-accent, #eb0a1e); background: #fff; }
.query-section .field-control [data-clear-field] { width: 22px; height: 22px; border-radius: 50%; background: #cbd5e1; color: #fff; right: 12px; }
.query-section .recall-submit { grid-column: 1 / -1; gap: 14px; }
.query-section .recall-submit .button { min-height: 52px; padding: 12px 24px; border-radius: 12px; }
.query-section .recall-submit .primary { flex: 1; background: linear-gradient(125deg, var(--portal-accent, #eb0a1e), var(--portal-accent, #a82222)); font-size: 16px !important; box-shadow: 0 12px 24px #eb0a1e4d; }
.query-section .recall-submit .light { min-width: 157px; background: #fff; border-color: #0f172a; color: #0f172a; }
.query-section .notice-line { margin: 20px 0 12px; color: #64748b; font-size: 12px; line-height: 1.6; }
.login-page, .access-dialog {
  --auth-accent: var(--portal-accent, #bd252e);
  --auth-accent-dark: color-mix(in srgb, var(--auth-accent), #0f172a 22%);
  --auth-tint: color-mix(in srgb, var(--auth-accent) 7%, #fff);
  --auth-ring: color-mix(in srgb, var(--auth-accent) 16%, transparent);
}
.login-page { min-height: calc(100dvh - 110px); display: grid; place-items: center; position: relative; padding: 32px 16px; overflow: hidden; background: #111827; }
.login-backdrop { position: absolute; inset: 0; background: #111827 url('/owner-assets/hero.svg') center / cover no-repeat; }
.login-card { position: relative; width: min(100%, 450px); padding: 28px; background: #fff; border: 1px solid #ffffffb3; border-radius: 24px; box-shadow: 0 22px 60px #04091266; }
.login-examples { margin-top: 0; }
.login-examples b { flex-basis: 100%; }
.login-heading { display: flex; align-items: center; gap: 14px; }
.login-mark, .access-mark { display: grid; place-items: center; flex: none; border-radius: 14px; }
.login-mark { width: 56px; height: 56px; border: 1px solid #e7eaf0; background: #f8fafc; }
.login-mark img { width: 40px; height: 40px; object-fit: contain; }
.login-heading h1 { margin-top: 3px; color: #111827; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; }
.login-heading .eyebrow { color: var(--auth-accent-dark); font-size: 11px; letter-spacing: .06em; }
.login-card .login-copy { color: #586579; font-size: 14px; line-height: 1.6; margin: 14px 0 24px; }
.login-form { display: grid; gap: 15px; }
.login-control { display: grid; gap: 7px; min-width: 0; }
.login-control > label { color: #263347; font-size: 13px; font-weight: 700; }
.login-field { display: flex; gap: 10px; align-items: center; min-height: 54px; padding: 4px 6px 4px 9px; background: #f8fafc; border: 1px solid #dce2ea; border-radius: 12px; transition: border-color .18s, background .18s, box-shadow .18s; }
.login-field:focus-within { border-color: var(--auth-accent); background: #fff; box-shadow: 0 0 0 3px var(--auth-ring); }
.login-field-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: #516077; background: #edf1f6; }
.login-field:focus-within .login-field-icon { color: var(--auth-accent-dark); background: var(--auth-tint); }
.login-field .icon { width: 17px; height: 17px; object-fit: contain; }
.login-field input { border: 0; background: transparent; min-width: 0; flex: 1; color: #111827; min-height: 42px; padding: 0; font-size: 16px; }
.login-field input:focus-visible { outline: none; }
.login-field input::placeholder { color: #637185; font-size: 14px; }
.login-field .login-code-button { flex: none; min-height: 44px; padding: 0 9px; border: 1px solid #dce2ea; border-radius: 9px; background: #fff; color: var(--auth-accent-dark); font-size: 12px; font-weight: 750; white-space: nowrap; transition: background .18s, border-color .18s; }
.login-code-button:hover:not(:disabled) { background: var(--auth-tint); border-color: var(--auth-accent); }
.agreement { display: flex; align-items: flex-start; gap: 8px; color: #586579; font-size: 12px; line-height: 1.7; }
.agreement input { flex: none; width: 16px; height: 16px; accent-color: var(--auth-accent); margin: 2px 0 0; }
.agreement button { border: 0; background: none; padding: 0; color: var(--auth-accent-dark); text-underline-offset: 3px; text-decoration: underline; }
.login-card .login-submit, .access-dialog .puzzle-confirm { min-height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-dark)); box-shadow: 0 6px 16px var(--auth-ring); transition: background .18s, box-shadow .18s; }
.login-card .login-submit:hover, .access-dialog .puzzle-confirm:hover { background: var(--auth-accent-dark); box-shadow: 0 8px 20px var(--auth-ring); }

.floating-chat { position: fixed; right: 24px; bottom: 24px; z-index: 29; display: flex; align-items: center; gap: 12px; width: 191px; min-height: 64px; padding: 9px 12px; background: linear-gradient(145deg,#161924,#282d3b); color: #fff; border: 1px solid #b7535c70; border-radius: 999px; box-shadow: 0 9px 25px #09162b55; transition: .25s cubic-bezier(.16, 1, .3, 1); }
.floating-chat:hover { transform: translateY(-3px); border-color: var(--portal-accent, #eb0a1e); box-shadow: 0 18px 40px #eb0a1e4d; }
.floating-chat .badge-icon { width: 42px; height: 42px; background: #d8222d; border-radius: 50%; }
.floating-chat .headset-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.floating-chat b, .floating-chat small { display: block; text-align: left; }
.floating-chat b { font-size: 14px; }
.floating-chat small { color: #ffffffae; font-size: 11px; margin-top: 2px; }
.chat-unread { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 20px; padding: 0 4px; background: #df2835; color: #fff; font-size: 10px; font-weight: 760; }
.owner-dialog { border: 1px solid #d4dbe5; border-radius: 14px; padding: 0; width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 36px); color: var(--ink); box-shadow: 0 16px 48px #0f172a55; }
.owner-dialog::backdrop { background: #0b101b99; backdrop-filter: blur(4px); }
.dialog-body { display: grid; gap: 12px; padding: 19px; }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; gap: 9px; }
.dialog-heading h2 { font-size: 20px; }
.dialog-heading button { border: 0; border-radius: 7px; padding: 5px; background: #eef0f5; color: #465269; }
.dialog-body p { color: #616d81; font-size: 13px; line-height: 1.55; }
.dialog-body > .button { justify-self: start; }
.access-dialog { width: min(416px, calc(100% - 32px)); max-height: calc(100dvh - 32px); border: 1px solid #e2e8f0; border-radius: 24px; box-shadow: 0 24px 72px #02061760; }
.access-dialog[open] { animation: access-enter .18s ease-out; }
.access-dialog::backdrop { background: #08111ec2; backdrop-filter: blur(6px); }
@keyframes access-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.access-dialog .dialog-body { padding: 22px; gap: 13px; }
.access-dialog .dialog-heading { align-items: center; justify-content: flex-start; gap: 11px; }
.access-mark { width: 42px; height: 42px; color: var(--auth-accent-dark); background: var(--auth-tint); }
.access-dialog .dialog-heading h2 { color: #111827; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.access-dialog .dialog-heading h2:focus { outline: none; }
.access-dialog .dialog-heading button { display: grid; place-items: center; flex: none; width: 38px; height: 38px; margin-left: auto; border-radius: 10px; background: #f1f4f8; color: #475569; }
.access-dialog .dialog-heading button:hover { background: #e4eaf2; }
.access-dialog .dialog-heading button .icon { width: 18px; height: 18px; }
.access-dialog .puzzle-intro { color: #586579; font-size: 13px; }
.puzzle-scene { overflow: hidden; height: clamp(108px, 27dvh, 172px); position: relative; border: 1px solid #dce2ea; border-radius: 14px; background: #181b24 url('/owner-assets/hero.svg') center 76% / cover; }
.puzzle-scene[data-variant="1"] { background-position: 87% 69%; }
.puzzle-scene[data-variant="2"] { background-position: 35% 65%; }
.puzzle-art { position: absolute; inset: 0 25px; }
.puzzle-target, .puzzle-piece { position: absolute; top: 48%; width: 46px; height: 46px; transform: translate(-50%, -50%); }
.puzzle-target { left: var(--target); fill: #020617bb; stroke: #fff; stroke-width: 1.4; stroke-dasharray: 3 3; }
.puzzle-piece { left: var(--position, 0%); fill: var(--auth-accent); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 2px 4px #02061788); }
.puzzle-aligned .puzzle-piece { fill: #15803d; }
.puzzle-controls { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; padding: 5px 12px 10px; border: 1px solid #e1e6ee; border-radius: 14px; background: #f8fafc; }
.puzzle-label { color: #263347; font-size: 13px; font-weight: 750; }
.puzzle-controls .puzzle-refresh { min-height: 36px; border: 0; border-radius: 8px; background: transparent; color: #475569; padding: 0 6px; font-size: 12px; font-weight: 650; }
.puzzle-refresh:hover { background: #edf1f6; }
.puzzle-slider, .puzzle-instruction { grid-column: 1 / -1; }
.puzzle-slider { --puzzle-thumb: #fff repeating-linear-gradient(to right, #64748b 0 2px, transparent 2px 5px) center / 12px 10px no-repeat; appearance: none; display: block; width: 100%; height: 44px; margin: 0; border-radius: 10px; background: transparent; cursor: grab; }
.puzzle-slider:active { cursor: grabbing; }
.puzzle-slider::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(to right, var(--auth-accent) var(--position, 0%), #e1e7ef var(--position, 0%)); }
.puzzle-slider::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(to right, var(--auth-accent) var(--position, 0%), #e1e7ef var(--position, 0%)); }
.puzzle-slider::-webkit-slider-thumb { appearance: none; width: 34px; height: 34px; margin-top: -12px; border: 1px solid #dce2ea; border-radius: 11px; background: var(--puzzle-thumb); box-shadow: 0 2px 7px #0f172a24; }
.puzzle-slider::-moz-range-thumb { width: 32px; height: 32px; border: 1px solid #dce2ea; border-radius: 11px; background: var(--puzzle-thumb); box-shadow: 0 2px 7px #0f172a24; }
.puzzle-instruction { color: #586579; font-size: 12px; line-height: 1.5; }
.puzzle-aligned .puzzle-instruction { color: #166534; }
.dialog-body > .puzzle-confirm { justify-self: stretch; }
.result-flag { justify-self: start; border-radius: 999px; background: #fde9ea; color: #a72128; padding: 5px 9px; font-size: 12px; font-weight: 750; }
.muted-flag { color: #475669; background: #e9edf3; }
.result-info { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-info div, .result-notice { border-radius: 8px; background: #f5f7fa; padding: 9px; }
.result-info dt { color: #636e80; font-size: 11px; margin-bottom: 3px; }
.result-info dd { margin: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.result-notice h4 { margin: 4px 0; font-size: 14px; }
.result-notice p { margin: 6px 0; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.result-notice .text-button { display: inline-flex; margin-top: 4px; }
.recall-result { display: grid; gap: 12px; margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 9px; background: #fff; scroll-margin-top: 88px; }
.recall-result h2 { font-size: 20px; }
.recall-result > .button { justify-self: start; }
@media (min-width: 761px) { .recall-result .result-info { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.toast { position: fixed; z-index: 115; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 28px); background: #141922; color: #fff; border: 1px solid #3d485d; padding: 9px 13px; border-radius: 8px; box-shadow: 0 8px 28px #02040a44; font-size: 13px; }

#showroom { scroll-margin-top: 12px; }
#lineup, #notices { scroll-margin-top: 81px; }

@media (max-width: 1120px) {
  .topbar-inner { padding: 0 22px; gap: 14px; }
  .desktop-nav { gap: 14px; }
  .desktop-support { display: none; }
  .recall-form { grid-template-columns: 1fr 1fr; }
  .recall-submit { grid-column: 1 / -1; }
  .compact .recall-form { grid-template-columns: 1fr 1fr max-content; }
  .compact .recall-submit { grid-column: auto; }
  .lineup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .owner { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  .portal-ribbon { padding: 5px 11px; min-height: 30px; gap: 5px; font-size: 9px; }
  .topbar-inner { min-height: 54px; padding: 0 13px; }
  .brand { gap: 7px; min-width: 0; flex-shrink: 1; }
  .brand-copy { min-width: 0; }
  .brand-copy b { overflow: hidden; text-overflow: ellipsis; }
  .brand img { width: 34px; height: 34px; }
  .brand-copy b { font-size: 14px; }
  .brand-copy small { font-size: 9px; }
  .desktop-nav, .desktop-support { display: none; }
  .header-actions { margin-left: auto; gap: 5px; }
  .menu-toggle { display: block; padding: 6px 0 6px 5px; }
  .menu-toggle .icon { width: 20px; height: 20px; }
  .header-plate { font-size: 12px; }
  .button.desktop-login { min-height: 29px; padding: 5px 7px; font-size: 11px !important; }
  .mobile-menu { display: grid; padding: 5px 13px 11px; border-top: 1px solid #282c39; }
  .mobile-menu a { font-size: 13px; padding: 8px 4px; }
  .mobile-bottom {
    display: grid;
    grid-template-columns: repeat(var(--nav-count, 5), 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    min-height: calc(56px + env(safe-area-inset-bottom));
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
    background: #10141f;
    border-top: 1px solid #2a3446;
    color: #a6b0c2;
  }
  .mobile-bottom a, .mobile-bottom button { position: relative; color: inherit; border: 0; background: none; display: grid; place-items: center; align-content: center; gap: 4px; padding: 0; font-size: 10px; }
  .mobile-bottom .chat-unread { right: calc(50% - 21px); top: 2px; }
  .mobile-bottom .icon { width: 20px; height: 20px; }
  .mobile-bottom .headset-icon { width: 20px; height: 20px; }
  .mobile-bottom [aria-current=page] { color: #f9cdcf; }
  .mobile-bottom [aria-current=page] .icon { background: #be2d34; border-radius: 50%; padding: 4px; width: 28px; height: 28px; }
  .hero { min-height: 438px; }
  .hero-image { background-position: 59% 72%; }
  .hero-overlay { background: linear-gradient(90deg,#0a0d14e9,#0a0d149e 66%,#0a0d142f), linear-gradient(0deg,#090b10 0%,transparent 27%); }
  .hero-content, .hero-tabs, .section-space, .footer-inner { width: calc(100% - 26px); }
  .hero-content { padding: 43px 0 22px; }
  .hero h1 { font-size: clamp(36px, 9vw, 47px); margin: 12px 0 9px; }
  .hero-content > p { font-size: 13px; max-width: 32ch; }
  .hero-stats { gap: 9px; margin: 18px 0; }
  .hero-stats div { padding-right: 9px; }
  .hero-stats strong { font-size: 18px; }
  .hero-stats span { font-size: 10px; }
  .hero-actions { gap: 5px; }
  .hero-actions .button { padding: 7px 8px; min-height: 35px; font-size: 11px !important; }
  .hero-actions .button .icon { width: 13px; height: 13px; }
  .hero-art-caption { display: none; }
  .hero-tabs { gap: 4px; }
  .hero-tabs button { display: grid; gap: 3px; padding: 8px 5px; font-size: 9px; line-height: 1.3; }
  .hero-tabs button span { font-size: 9px; }
  .quick-check { padding: 18px 0 23px; }
  .recall-card { padding: 12px; }
  .compact-recall-head { align-items: stretch; flex-direction: column; gap: 8px; margin-bottom: 9px; }
  .card-header { gap: 7px; margin-bottom: 12px; }
  .card-header .badge-icon { width: 32px; height: 32px; border-radius: 7px; }
  .card-header .badge-icon .icon { width: 19px; height: 19px; }
  .card-header h2 { font-size: 15px; }
  .card-header p { font-size: 10px; }
  .card-header .mini-tag { display: none; }
  .mode-tabs { margin-bottom: 11px; gap: 3px; padding: 3px; }
  .mode-tabs button { font-size: 10px; padding: 8px 5px; gap: 3px; }
  .mode-tabs button .icon { width: 13px; height: 13px; }
  .recall-form, .compact .recall-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .field { gap: 3px; font-size: 12px; }
  .field input { height: 38px; }
  .recall-submit, .compact .recall-submit { grid-column: 1 / -1; }
  .recall-submit .button { min-height: 38px; flex: 1; font-size: 12px !important; }
  .feature-grid { gap: 10px; margin-top: 12px; }
  .feature { padding: 14px 12px; gap: 7px; }
  .feature .badge-icon { width: 34px; height: 34px; }
  .feature .mini-tag { font-size: 10px; }
  .feature strong { font-size: 15px; }
  .feature small, .feature b { font-size: 11px; }
  .content-section { padding: 33px 0; }
  .campaign-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .campaign-card { min-height: 265px; }
  .campaign-copy { padding: 16px; }
  .section-heading { margin-bottom: 13px; }
  .section-heading p { font-size: 12px; }
  .showroom > .section-space { width: calc(100% - 32px); padding: 14px; }
  .showroom .dark-heading h2 { font-size: 21px; }
  .showroom-kicker { display: block; margin: 11px 0 0; }
  .showroom-layout { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .showroom-settings, .showroom-views { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .showroom-settings { margin-bottom: 13px; }
  .showroom-views { margin-bottom: 29px; }
  .showroom-settings button, .showroom-views button { flex: none; }
  .showroom-settings > span { display: none; }
  .showroom-viewport { height: 358px; }
  .scene-caption { top: 9px; left: 9px; max-width: calc(100% - 18px); padding: 6px 9px; }
  .scene-caption strong { font-size: 12px; }
  .scene-caption span, .scene-caption small { font-size: 10px; }
  .showroom-viewport .showroom-pin { padding: 5px 6px; font-size: 9px; }
  .showroom-pin-pulse { left: 6px; }
  .showroom-toolbar { bottom: 8px; left: 12px; right: 12px; padding: 6px 8px; }
  .showroom-toolbar button { font-size: 12px; }
  .part-layout { padding: 22px; }
  .part-tabs, .part-actions { grid-template-columns: minmax(0, 1fr); }
  .part-model { grid-template-columns: minmax(72px, 42%) minmax(0, 1fr); min-height: 116px; }
  .part-actions .button { white-space: normal; }
  .lineup-grid, .notices-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .vehicle-card-body, .notice-card { padding: 8px; }
  .vehicle-card h3, .notice-card h3 { font-size: 13px; }
  .vehicle-card p, .notice-card p { font-size: 11px; }
  .vehicle-art { height: 100px; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 15px 9px; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
  .login-page { min-height: calc(100dvh - 140px); padding: 24px 16px; justify-items: center; }
  .login-card { padding: 23px 19px; border-radius: 20px; }
  .login-mark { width: 48px; height: 48px; }
  .login-mark img { width: 34px; height: 34px; }
  .login-card .login-copy { margin-bottom: 19px; }
  .access-dialog { border-radius: 20px; }
  .access-dialog .dialog-body { padding: 17px; }
  .access-dialog .dialog-heading h2 { font-size: 18px; }
  .floating-chat { bottom: calc(65px + env(safe-area-inset-bottom)); right: 9px; width: auto; min-height: 0; border-radius: 50%; padding: 0; }
  .floating-chat-copy { display: none; }
  .floating-chat .badge-icon { width: 38px; height: 38px; }
  .toast { bottom: calc(66px + env(safe-area-inset-bottom)); }
  #lineup, #notices { scroll-margin-top: 59px; }
}

.portal-ribbon a { color: #ff9296; font-weight: 700; margin-left: auto; }
.desktop-nav [aria-current="page"] { background: #ffffff13; color: white; border-radius: 999px; }
.desktop-nav [href="#/recall"][aria-current="page"] { background: #752c394b; box-shadow: inset 0 0 0 1px #ae4b5d66; }
.compact-recall-head .mode-tabs button[aria-pressed=true] { background: #0f172a; color: white; border-color: #0f172a; }

@media (min-width: 901px) {
  .portal-ribbon { justify-content: flex-start; padding-inline: max(24px, calc((100% - 1440px) / 2)); }
  .topbar-inner, .quick-check { width: min(1440px, calc(100% - 48px)); }
  .hero { min-height: 560px; grid-template-rows: minmax(492px, auto) 68px; align-content: normal; }
  .hero-content { width: min(1440px, calc(100% - 48px)); padding: 65px 0 26px; }
  .hero h1 { font-size: clamp(35px, 3.4vw, 58px); line-height: 1.19; max-width: 52%; }
  .hero-content > p { max-width: min(51vw, 620px); min-height: 50px; }
  .hero-stats { width: fit-content; padding: 12px 16px; background: #ffffff09; border: 1px solid #ffffff22; border-radius: 12px; }
  .hero-stats strong { font-size: 19px; }
  .hero-art-caption { right: calc(max(28px, (100% - 1200px) / 2) + min(19.5vw, 250px)); transform: translateX(50%); border-radius: 999px; }
}
@media (min-width: 1121px) {
  .owner-vue-surface:has(.notice-detail, .recall-page) .desktop-nav { flex: 1; gap: 4px; margin-left: 0; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .desktop-nav a { padding: 9px 13px; font-weight: 600; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .desktop-nav [aria-current=page]::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--notice-accent); }
  .owner-vue-surface:has(.notice-detail, .recall-page) .desktop-support { padding-inline: 13px; border-color: transparent; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .desktop-support .headset-icon { filter: brightness(0) invert(1); }
  .owner-vue-surface:has(.recall-page) .desktop-nav [href="#/recall"][aria-current] { background: var(--notice-accent); }
  .owner-vue-surface:has(.recall-page) .desktop-nav [href="#/recall"][aria-current]::before { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .access-dialog[open] { animation: none; }
  .owner .hero-slide, .owner .hero-slide .hero-image, .owner .showroom-pin, .campaign-card img { transition-duration: 0s; }
  .owner .showroom-pin-pulse { animation: none; opacity: 0; }
}

@media (max-width: 760px) {
  .notices-wrap .section-space { width: calc(100% - 32px); }
  .notices-wrap .notices-grid, .notice-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .notices-wrap .notice-card h3 { font-size: 17px; }
  .notices-wrap .notice-card p { font-size: 13px; }
  .notice-article dl { grid-template-columns: minmax(0, 1fr); }
  .recall-hero-inner, .query-section { width: calc(100% - 32px); }
  .recall-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .page-cover { padding: 28px 0 64px; }
  .page-cover h1 { font-size: 24px; }
  .recall-hero-photo { text-align: center; }
  .recall-hero-photo img { width: 240px; height: 144px; }
  .query-section .recall-card { padding: 20px 16px; }
  .query-section .mode-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .query-section .mode-tabs button { min-height: 41.5px; padding: 10px; }
  .query-section .mode-tabs button:first-child { min-height: 43px; }
  .query-section .recall-form { grid-template-columns: minmax(0, 1fr); }
  .query-section .recall-submit { flex-direction: column; }
  .query-section .recall-submit .primary { position: relative; min-height: 0; padding: 1px 6px; border: 0; line-height: normal; }
  .query-section .recall-submit .primary::after { content: ''; position: absolute; inset: -9px 0; }
  .query-section .recall-submit .light { font-size: 13px !important; }
}

@media (max-width: 900px) {
  .owner-vue-surface:has(.notice-detail, .recall-page) .portal-ribbon { min-height: 32px; padding: 5px 14px; gap: 10px; justify-content: flex-start; font-size: 12px; line-height: 16px; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .topbar-inner { width: auto; min-height: 61px; padding-inline: 14px; }
  .notice-logo { width: 42px; height: 34px; }
  .notice-logo img { width: 26px; height: 26px; }
  .notice-brand { gap: 12px; flex-shrink: 1; min-width: 0; }
  .notice-brand-copy { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .notice-brand-copy b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
  .notice-brand-copy small { display: none; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .mobile-bottom { min-height: calc(64px + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom); align-items: center; background: #0b0f19; border-color: #ffffff24; color: #94a3b8; box-shadow: 0 -8px 28px #0006; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .mobile-bottom :is(a, button) { display: flex; flex-direction: column; justify-content: center; height: 54px; gap: 3px; padding: 4px 0; font-size: 11px; font-weight: 600; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .mobile-bottom [aria-current=page] { color: #fff; font-weight: 700; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .mobile-bottom [aria-current=page] .icon { width: 40px; height: 40px; margin-top: -16px; padding: 7.5px; border: 2.5px solid #0b0f19; background: linear-gradient(135deg, var(--notice-accent), #c80818); box-shadow: 0 6px 16px #eb0a1e80; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .floating-chat { bottom: calc(78px + env(safe-area-inset-bottom)); right: 14px; width: 60px; min-height: 60px; justify-content: center; }
  .owner-vue-surface:has(.notice-detail, .recall-page) .floating-chat .badge-icon { width: 42px; height: 42px; }
}

/* BYD-focused recall homepage */
.owner[data-portal-brand="byd"] { --brand-dark: #075d55; }
.owner[data-portal-brand="byd"] .portal-ribbon { background: #103d3d; color: #d7f8ee; }
.owner[data-portal-brand="byd"] .portal-ribbon a { color: #fff; font-weight: 700; }
.owner[data-portal-brand="byd"] .topbar { background: #0b2024; }
.owner[data-portal-brand="byd"] .hero { background: #0a292d; }
.owner[data-portal-brand="byd"] .hero-image[data-slide-art] {
  background: #102f33 var(--slide-photo) right center / 62% auto no-repeat;
}
.owner[data-portal-brand="byd"] .hero-image[data-slide-art]::after { content: none; }
.owner[data-portal-brand="byd"] .hero-overlay {
  background: linear-gradient(90deg, #09272b 11%, #09272bf5 34%, #09272b59 61%, #09272b0a 100%),
    linear-gradient(0deg, #09272b 0%, transparent 30%);
}
.owner[data-portal-brand="byd"] .hero h1 { max-width: 13em; font-size: clamp(38px, 4.4vw, 65px); }
.owner[data-portal-brand="byd"] .hero .eyebrow {
  color: #c1f8e9; border-color: #5fcdb270; background: #0c5e534f;
}
.owner[data-portal-brand="byd"] .live-dot { background: #56e7bd; box-shadow: 0 0 8px #47c6a7; }
.owner[data-portal-brand="byd"] .hero-tabs button { background: #0d383b; color: #d4eee7; }
.owner[data-portal-brand="byd"] .hero-tabs button[aria-current] { background: #145349; }
.owner[data-portal-brand="byd"] .hero-tabs button span { color: #8dedce; }
.owner[data-portal-brand="byd"] .lineup-filters button[aria-pressed="true"] {
  color: #075d55; background: #e1f5ed; border-color: #94d7c5;
}
.byd-lookup {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(18px, 3vw, 32px); border: 1px solid #a8dfce; border-radius: 16px; background: #effaf6;
}
.byd-lookup .eyebrow { color: #087167; }
.byd-lookup h2 { margin-top: 5px; font-size: clamp(20px, 2.6vw, 28px); }
.byd-lookup p { margin-top: 5px; color: #3f615e; line-height: 1.6; font-size: 14px; }
.byd-lookup + #recall-panel { margin-top: 20px; }
.owner[data-portal-brand="byd"] .notices-wrap { margin: 24px 0 32px; }
.owner[data-portal-brand="byd"] .notice-filters { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
@media (max-width: 760px) {
  .owner[data-portal-brand="byd"] .hero-image[data-slide-art] { background-size: cover; background-position: 61% center; }
  .owner[data-portal-brand="byd"] .hero-overlay { background: linear-gradient(90deg, #09272bf2, #09272b91 64%, #09272b55); }
  .owner[data-portal-brand="byd"] .hero h1 { font-size: clamp(30px, 7vw, 40px); }
  .byd-lookup { align-items: flex-start; flex-direction: column; gap: 12px; }
}

.owner[data-portal-brand="byd"] .mini-tag { color: #075d55; background: #e4f5ef; }
.owner[data-portal-brand="byd"] .vehicle-image-credit { color: #4e6764; font-size: 11px; }

/* BYD exterior viewer */
.showroom-model-picker { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; column-gap: 12px; }
.showroom-series { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 10px; color: #c1cada; font-size: 12px; }
.showroom-series span { flex: none; }
.showroom-series select { min-width: 0; max-width: min(260px, 64vw); min-height: 42px; padding: 6px 9px; border: 1px solid #363d4a; border-radius: 10px; background: #20242e; color: #edf0f5; font-size: 13px; }
.showroom-openings { margin-top: -12px; }
.showroom-openings[hidden] { display: none; }
.showroom-orbit { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; user-select: none; outline-offset: -4px; }
.showroom-orbit:active { cursor: grabbing; }
.showroom-orbit img, .showroom-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.showroom-orbit img { object-fit: contain; }
.showroom-orbit text { font-family: system-ui, sans-serif; font-weight: 750; }
.showroom-model-status { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border: 1px solid #2a3342; border-radius: 10px; color: #edf0f5; background: #111827e8; font-size: 13px; text-align: center; pointer-events: none; }
.scene-caption strong[data-paint-label] { width: fit-content; margin: 0 0 2px; padding: 3px 8px; border-radius: 6px; }
.scene-caption [data-scene-source] { width: fit-content; pointer-events: auto; color: #b5c4d8; font-size: 11px; text-decoration: underline; text-underline-offset: 2px; }
.showroom-colors { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.showroom-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.owner[data-portal-brand="byd"] .showroom-layout { grid-template-columns: minmax(0, 1fr); }
.owner[data-portal-brand="byd"] #part-panel:empty { display: none; }
@media (max-width: 760px) { .showroom-model-picker .showroom-settings { width: 100%; } }

@media (max-width: 760px) {
  .showroom-stage:has(.showroom-viewport:is([data-presentation="orbit"], [data-presentation="photo"], [data-presentation="unavailable"])) .showroom-toolbar {
    position: relative; inset: auto; margin: 0 8px 8px;
  }
}

.showroom-viewport[data-presentation="photo"] .showroom-fallback { position: absolute; inset: 0; min-height: 0; padding: 80px 18px 62px; }
.showroom-viewport[data-presentation="photo"] .showroom-fallback img { min-height: 0; object-fit: contain; object-position: center; }
@media (max-width: 760px) {
  .showroom-viewport[data-presentation="photo"] .showroom-fallback { padding: 82px 8px 12px; }
}

.showroom .dark-heading [data-scroll="more-nev"] { margin-top: 12px; }

/* AITO homepage uses the colors of its original exterior photos. */
.owner[data-portal-brand="aito"] .brand > img { width: 80px; height: auto; }
.owner[data-portal-brand="aito"] .hero-image[data-slide-art] {
  background: #171c1b var(--slide-photo) right center / cover no-repeat;
  filter: none;
}
.owner[data-portal-brand="aito"] .hero-image[data-slide-art]::after { content: none; }
.owner[data-portal-brand="aito"] .hero-overlay {
  background: linear-gradient(90deg, #101614f2, #101614b3 38%, #10161424 75%),
    linear-gradient(0deg, #101614a8, transparent 28%);
}
@media (max-width: 700px) {
  .owner[data-portal-brand="aito"] .brand > img { width: 58px; }
  .owner[data-portal-brand="aito"] .hero-image[data-slide-art] { background-position: 60% center; }
}

/* The verification dialog uses the same green for alignment and confirmation. */
.access-dialog:is(.puzzle-aligned, .puzzle-verified) {
  --auth-accent: #15803d;
  --auth-accent-dark: #166534;
  --auth-tint: #e9f9ee;
  --auth-ring: #15803d33;
}
.access-dialog:is(.puzzle-aligned, .puzzle-verified) .puzzle-controls {
  border-color: #a6ddba;
  background: var(--auth-tint);
}
.access-dialog:is(.puzzle-aligned, .puzzle-verified) .puzzle-instruction { color: #166534; }
.access-dialog.puzzle-verified .puzzle-confirm:disabled { opacity: 1; }

/* Vehicle lookup and owner service on the AITO homepage. */
.home-workbench .recall-workbench { border-radius: 18px; }
.workbench-tag {
  display: inline-block; margin: 4px 0; padding: 3px 8px;
  border-radius: 999px; background: #ebfaf0; color: #166534; font-size: 12px; font-weight: 650;
}
.recall-workbench .workbench-note { margin: 12px 0 0; font-size: 12px; }
.home-workbench .feature b::after { content: '›'; float: right; font-size: 17px; line-height: 1; }
.showroom-guide {
  margin-top: 20px; padding: 19px; border: 1px solid #ffffff22;
  border-radius: 16px; background: #ffffff09;
}
.showroom-guide h3 { margin: 9px 0 6px; color: #f5f7fa; font-size: 18px; }
.showroom-guide p { margin: 0; color: #c1cad8; font-size: 14px; line-height: 1.6; }
.showroom-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.owner-guide-card { max-width: 760px; }
@media (max-width: 760px) {
  .owner .workbench-hero { min-height: 0; grid-template-rows: minmax(0, auto) auto; padding-bottom: 10px; }
  .workbench-hero .hero-content { padding: 26px 0 19px; }
  .workbench-hero .hero-content h1 { margin: 5px 0 0; font-size: clamp(23px, 6vw, 36px); }
  .workbench-hero .hero-content > :is(p, .hero-stats, .hero-actions) { display: none; }
  .workbench-hero .hero-tabs {
    display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none;
  }
  .workbench-hero .hero-tabs button { flex: 0 0 auto; display: flex; gap: 6px; padding: 7px 10px; font-size: 11px; }
  .home-workbench .recall-workbench { padding: 16px; }
  .recall-workbench .card-header h2 { font-size: 17px; }
  .recall-workbench .card-header p, .recall-workbench .mode-tabs button { font-size: 12px; }
  .recall-workbench .recall-form { margin-top: 13px; gap: 11px; }
  .recall-workbench .field input { height: 44px; font-size: 16px; }
  .recall-workbench .recall-submit .button { min-height: 44px; }
  .home-workbench .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .home-workbench .feature { padding: 14px; }
}

/* The official AITO wordmark is white and uses a wide aspect ratio. */
.owner[data-portal-brand="aito"] .login-mark {
  width: 89px; border-color: #202728; background: #202728;
}
.owner[data-portal-brand="aito"] .login-mark img { width: 72px; height: auto; }

/* Recall introduction and form share one workbench on the homepage. */
#quick-check.home-workbench { scroll-margin-top: 12px; }
.workbench-intro {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px;
  align-items: center; padding: 28px 30px 52px; border-radius: 20px 20px 0 0;
  background: linear-gradient(130deg, #101724 15%, #1a2234 72%, #33212a); color: #f8fafc;
}
.workbench-intro h2 { margin: 14px 0 10px; font-size: clamp(23px, 3vw, 36px); line-height: 1.3; }
.workbench-intro p { margin: 0; color: #d4dce9; font-size: 14px; line-height: 1.7; }
.workbench-intro .eyebrow { color: #ffc2c3; border: 1px solid #d25458; background: #3b202b; }
.workbench-intro img { width: 100%; max-height: 225px; object-fit: cover; border-radius: 8px; }
.home-workbench #recall-panel { position: relative; margin: -22px 14px 0; }
.home-workbench .recall-workbench { border: 1px solid #e1e5eb; box-shadow: 0 14px 34px #17263a1a; }
.recall-workbench .mode-tabs button[aria-pressed="true"] { background: #111a2c; color: #fff; border-color: #111a2c; }
.recall-workbench .recall-submit .primary { background: linear-gradient(135deg, #d91d2f, #b71b24); color: #fff; }
.recall-workbench .recall-submit .light { border: 1px solid #111a2c; color: #111a2c; }
@media (max-width: 760px) {
  .workbench-intro { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 16px 40px; }
  .workbench-intro img { width: min(100%, 260px); height: 140px; justify-self: center; }
  .home-workbench #recall-panel { margin-inline: 9px; }
  .recall-workbench .mode-tabs { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .recall-workbench .mode-tabs button { min-height: 42px; }
  .recall-workbench .recall-submit { flex-direction: column; }
  .recall-workbench .recall-submit .button { flex: auto; }
}