/* ShopLeads preview: brand-kit tokens (Night, Iris, Ice, Citron, Paper) on DealerData's structure:
   grain-gradient covers for the public site, a quiet light app with a sidebar. */
/* Geist + Geist Mono (SIL OFL 1.1, fonts/Geist-OFL.txt): a search-tool grotesk for everything, mono for code and data. */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/GeistMono-Variable-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --night: #1B2440; --iris: #657DB5; --iris-deep: #3E5488; --ice: #BECFE3; --citron: #DCE487; --paper: #F6F4EA;
  --bg: #F4F5F8; --panel: #FFFFFF; --ink: #1B2440; --muted: #62687A; --line: #E2E5EC; --soft: #F1F3F8; --head: #FAFBFD;
  --accent: #3E5488; --accent-soft: #E8ECF6;
  --good: #1F8A4C; --good-soft: #E3F3E8; --warn: #A86F00; --warn-soft: #FBF0D9; --bad: #B4322B; --bad-soft: #F8E4E2; --off: #8A90A0; --off-soft: #EEEFF2;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: var(--display);   /* older pages still say --serif: it now points at the display sans */
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0E1424; --panel: #151C30; --ink: #E9ECF4; --muted: #9BA2B7; --line: #262E46; --soft: #1B2338; --head: #18203A;
  --accent: #B9C7EA; --accent-soft: #22305A; --good: #5CC98A; --good-soft: #163526; --warn: #E5B24A; --warn-soft: #3A2D10; --bad: #F08A80; --bad-soft: #3D1D1B; --off: #7E869C; --off-soft: #232A40; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0E1424; --panel: #151C30; --ink: #E9ECF4; --muted: #9BA2B7; --line: #262E46; --soft: #1B2338; --head: #18203A;
  --accent: #B9C7EA; --accent-soft: #22305A; --good: #5CC98A; --good-soft: #163526; --warn: #E5B24A; --warn-soft: #3A2D10; --bad: #F08A80; --bad-soft: #3D1D1B; --off: #7E869C; --off-soft: #232A40; color-scheme: dark }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
a { color: var(--accent) }
button, input, select { font: inherit; color: inherit }
h1, h2, h3 { text-wrap: balance; margin: 0 }
p { margin: 0 }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)) }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--citron); color: #1B2440 }
.btn:hover { filter: brightness(1.04) }
.btn.dark { background: var(--night); color: #fff }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.dark { background: #E9ECF4; color: #0E1424 } }
:root[data-theme="dark"] .btn.dark { background: #E9ECF4; color: #0E1424 }
.btn.line { background: transparent; color: inherit; border: 1px solid currentColor }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px }
.label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase }
.muted { color: var(--muted) }
.mono { font-family: var(--mono); font-size: 12.5px }
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap }
.p-ok { background: var(--good-soft); color: var(--good) } .p-warn { background: var(--warn-soft); color: var(--warn) } .p-bad { background: var(--bad-soft); color: var(--bad) }
.p-off { background: var(--off-soft); color: var(--off) } .p-acc { background: var(--accent-soft); color: var(--accent) } .p-cit { background: var(--citron); color: #3B4508 }
.sig { display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); margin: 1px 3px 1px 0; white-space: nowrap }

/* grain cover (public pages) */
.cover { position: relative; color: #F3F5FA; background: #121A30 url('/brand/hero.webp') center/cover no-repeat; overflow: hidden }
.cover.band { background-image: url('/brand/band.webp') }
.cover > * { position: relative; z-index: 1 }
.nav { display: flex; align-items: center; gap: 18px; padding-block: 18px }
.nav img { height: 26px; display: block }
.nav .sp { margin-left: auto }
.nav a.link { color: rgba(243, 245, 250, .86); text-decoration: none; font-weight: 500 }
.hero { padding-block: clamp(56px, 10vw, 120px) clamp(48px, 8vw, 96px); display: flex; flex-direction: column; gap: 22px; max-width: 860px }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6vw, 72px); line-height: 1.02; letter-spacing: -.045em }
.hero p.lead { font-size: clamp(16px, 1.6vw, 19px); color: rgba(243, 245, 250, .84); max-width: 62ch }
.domain-form { display: flex; gap: 8px; flex-wrap: wrap; max-width: 620px }
.domain-form input { flex: 1 1 260px; min-width: 0; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff }
.domain-form input::placeholder { color: rgba(243, 245, 250, .6) }
.examples { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: rgba(243, 245, 250, .72) }
.examples button { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 12.5px }
.proof { display: flex; gap: 28px; flex-wrap: wrap; padding-block: 18px 26px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(243, 245, 250, .8) }
.proof b { display: block; font-size: 22px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums }

/* public sections */
.sec { padding-block: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 28px }
.sec h2 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.04em; line-height: 1.08 }
.sec .intro { color: var(--muted); max-width: 64ch; font-size: 17px }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px }
.tile h3 { font-size: 17px; font-weight: 600 }
.tile .n { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--accent) }
.record { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 860px) { .record { grid-template-columns: minmax(0, 1fr) } }
.record > div { padding: 22px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.record > div + div { border-left: 1px solid var(--line); background: var(--head) }
@media (max-width: 860px) { .record > div + div { border-left: 0; border-top: 1px solid var(--line) } }
.footer { border-top: 1px solid var(--line); padding-block: 26px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: 13.5px }
.footer img { height: 20px }
.footer .sp { margin-left: auto }

/* store mini-card used in previews */
.logo { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--soft); display: grid; place-items: center; font-weight: 600; font-size: 13px; overflow: hidden; border: 1px solid var(--line) }
.logo img { width: 22px; height: 22px }
.store { display: flex; align-items: center; gap: 10px; min-width: 0 }
.store .nm { font-weight: 600 }
.store .dm { font-size: 12.5px; color: var(--muted) }
.blur { filter: blur(4px); user-select: none }
.score { display: flex; align-items: center; gap: 6px; min-width: 96px }
.score i { display: block; height: 6px; border-radius: 3px; background: var(--line); flex: 1; position: relative; overflow: hidden }
.score i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--iris) }
.score b { font-variant-numeric: tabular-nums; width: 28px; text-align: right; font-size: 13px }

/* forms */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr) } .auth .cover { min-height: 260px } }
.auth .formside { display: flex; align-items: center; justify-content: center; padding: 40px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)) }
.form { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px }
.form h1 { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.04em }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500 }
.field input { padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel) }
.err { color: var(--bad); font-size: 13.5px; min-height: 1.2em }
@media (prefers-reduced-motion: no-preference) { .fade { animation: fade .35s ease-out both } @keyframes fade { from { opacity: .3; transform: translateY(6px) } to { opacity: 1; transform: none } } }

[hidden] { display: none !important }

@media (max-width: 760px) { .nav a.link:not(.keep) { display: none } .nav { gap: 12px } .nav .btn { padding: 9px 12px } }

/* app-embed:start · generated from css/app.css by scope_app_css.py, every rule scoped under .appui. Do not edit by hand. */
.appui {--bg:#F4F4F0; --card:#FFFFFF; --ink:#1B2440; --muted:#62687A; --line:#E3E4E8; --soft:#F2F3F6; --head:#FAFAF8;
  --iris:#657DB5; --iris-ink:#3E5488; --iris-soft:#E8ECF6; --ice:#BECFE3; --citron:#DCE487; --citron-ink:#4E5A0E;
  --good:#1F8A4C; --good-soft:#E3F3E8; --warn:#A86F00; --warn-soft:#FBF0D9; --off:#8A90A0; --off-soft:#EEEFF2;
  --display:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow:0 1px 2px rgba(27,36,64,.05), 0 18px 40px -26px rgba(27,36,64,.4);}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appui {--bg:#0E1424; --card:#151C30; --ink:#E9ECF4; --muted:#9BA2B7; --line:#262E46; --soft:#1B2338; --head:#18203A;
  --iris:#8EA3D6; --iris-ink:#B9C7EA; --iris-soft:#22305A; --citron-ink:#DCE487; --citron-mix:16%;
  --good:#5CC98A; --good-soft:#163526; --warn:#E5B24A; --warn-soft:#3A2D10; --off:#7E869C; --off-soft:#232A40;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -24px rgba(0,0,0,.8); color-scheme:dark}
}
:root[data-theme="dark"] .appui {--bg:#0E1424; --card:#151C30; --ink:#E9ECF4; --muted:#9BA2B7; --line:#262E46; --soft:#1B2338; --head:#18203A;
  --iris:#8EA3D6; --iris-ink:#B9C7EA; --iris-soft:#22305A; --citron-ink:#DCE487; --citron-mix:16%;
  --good:#5CC98A; --good-soft:#163526; --warn:#E5B24A; --warn-soft:#3A2D10; --off:#7E869C; --off-soft:#232A40;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 18px 40px -24px rgba(0,0,0,.8); color-scheme:dark}
.appui .grain {position:relative; overflow:hidden; color:#F3F5FA}
.appui .grain::after {content:""; position:absolute; inset:0; pointer-events:none; opacity:.38; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.appui .grain > * {position:relative; z-index:1}
.appui .g-indigo {background:radial-gradient(42% 60% at 88% 0%, #6C87BC, transparent 72%), radial-gradient(36% 58% at 4% 100%, #B2C7DD, #536BA3 38%, transparent 72%), radial-gradient(70% 70% at 50% 50%, #222F4D, transparent 80%), #0E1527}
.appui .g-iris {background:radial-gradient(28% 40% at 8% 26%, #5869AB, transparent 70%), radial-gradient(60% 22% at 62% 84%, #B7BDDD, #8586C1 40%, transparent 75%), radial-gradient(30% 30% at 30% 55%, #5869AB99, transparent 75%), #101424}
.appui .g-citron {background:radial-gradient(90% 40% at 50% 100%, #DCE487, #ADB976 30%, #7A9064 55%, transparent 80%), radial-gradient(60% 60% at 50% 30%, #323F2B, transparent 80%), #1D251E}
.appui .g-glacier {background:radial-gradient(50% 55% at 50% 52%, transparent 30%, #82A8BA88 48%, transparent 70%), radial-gradient(70% 70% at 50% 50%, #244455, transparent 85%), #101E29}
.appui .g-terra {background:radial-gradient(30% 45% at 82% 12%, #DEC1A1, #B78675 40%, transparent 75%), radial-gradient(40% 50% at 30% 80%, #452C35, transparent 80%), radial-gradient(30% 40% at 10% 30%, #84626C55, transparent 75%), #21171A}
.appui .g-pearl {background:radial-gradient(10% 70% at 18% 50%, #ABB4B4, transparent 75%), radial-gradient(12% 60% at 70% 30%, #6F7D8B, transparent 80%), radial-gradient(60% 60% at 50% 60%, #353F4A, transparent 85%), #171E26}
.appui .brand {display:flex; align-items:center; gap:10px; font-weight:500; font-size:20px; letter-spacing:-.02em}
.appui .brand svg {width:22px; height:23px; flex:none}
.appui .app {position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; overflow:clip}
.appui .app-top {display:flex; align-items:center; gap:22px; padding:0 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; min-height:54px}
.appui .app-top .brand {font-size:16px; color:var(--ink)}
.appui .app-top .brand svg {width:18px; height:19px; fill:var(--ink)}
.appui .tabs {display:flex; gap:18px; flex-wrap:wrap; align-self:stretch}
.appui .tabs button {font:inherit; font-size:13.5px; border:0; background:none; color:var(--muted); padding:16px 0 14px; cursor:pointer; border-bottom:2px solid transparent}
.appui .tabs button[aria-pressed="true"] {color:var(--ink); font-weight:600; border-bottom-color:var(--ink)}
.appui .credits {margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--muted)}
.appui .credits b {color:var(--ink); font-weight:600}
.appui .avatar-me {width:28px; height:28px; border-radius:50%; background:var(--iris-soft); color:var(--iris-ink); display:grid; place-items:center; font-weight:600; font-size:12px}
.appui .app-body {display:grid; grid-template-columns:262px minmax(0,1fr)}
@media (max-width:900px) {
  .appui .app-body {grid-template-columns:minmax(0,1fr)}
  .appui .side {border-right:0!important; border-bottom:1px solid var(--line)}
}
.appui .side {border-right:1px solid var(--line); padding:14px 14px 18px; display:flex; flex-direction:column; gap:4px}
.appui .side-head {display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:14px; padding:2px 2px 8px}
.appui .side-head button {font:inherit; font-size:12px; color:var(--muted); background:none; border:0; cursor:pointer}
.appui details.f {border-bottom:1px solid var(--line)}
.appui details.f:last-of-type {border-bottom:0}
.appui details.f summary {list-style:none; cursor:pointer; padding:11px 2px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px}
.appui details.f summary::-webkit-details-marker {display:none}
.appui details.f summary svg {width:15px; height:15px; color:var(--muted); flex:none}
.appui details.f summary::after {content:""; margin-left:auto; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg) translateY(-2px); transition:transform .15s}
.appui details.f[open] summary::after {transform:rotate(-135deg) translateY(-1px)}
.appui .f-body {padding:0 2px 14px; display:flex; flex-direction:column; gap:8px}
.appui .chips {display:flex; flex-wrap:wrap; gap:6px}
.appui .chip {font:inherit; font-size:12px; border-radius:999px; padding:4px 10px; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink); display:inline-flex; align-items:center; gap:6px}
.appui .chip small {color:var(--muted); font-size:11px}
.appui .chip[aria-pressed="true"] {background:var(--ink); border-color:var(--ink); color:var(--card)}
.appui .chip[aria-pressed="true"] small {color:inherit; opacity:.7}
.appui .facet {display:flex; align-items:center; gap:9px; font-size:13px; cursor:pointer; padding:5px 6px; border-radius:7px}
.appui .facet:hover {background:var(--soft)}
.appui .facet input {accent-color:var(--ink); width:14px; height:14px; margin:0}
.appui .facet .ct {margin-left:auto; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.appui .facet .ic {width:16px; height:16px; flex:none}
.appui .hist {display:flex; align-items:flex-end; gap:3px; height:34px}
.appui .hist i {flex:1; border-radius:2px 2px 0 0; background:var(--line)}
.appui .hist i.on {background:var(--iris)}
.appui input[type=range] {width:100%; accent-color:var(--ink)}
.appui .range-lbl {display:flex; justify-content:space-between; font-size:12px; color:var(--muted)}
.appui .main {padding:16px 18px 18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.appui .main-head {display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.appui .main-head h3 {font-size:22px; font-weight:600; letter-spacing:-.01em}
.appui .main-head .sub {font-size:12.5px; color:var(--muted)}
.appui .searchrow {display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.appui .search {flex:1; min-width:200px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; padding:8px 12px; background:var(--card); color:var(--muted)}
.appui .search input {border:0; outline:0; font:inherit; font-size:14px; flex:1; background:transparent; color:var(--ink); min-width:0}
.appui .kbd {font-size:11px; border:1px solid var(--line); border-radius:5px; padding:1px 6px; color:var(--muted)}
.appui .btn {font:inherit; font-size:13px; font-weight:600; border-radius:10px; padding:9px 14px; cursor:pointer; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.appui .btn.primary {background:var(--ink); color:var(--card); border-color:var(--ink)}
.appui .example {font-size:11px; padding:2px 8px; border-radius:999px; border:1px dashed var(--muted); color:var(--muted); margin-left:auto}
.appui .tablebox {overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.appui table {border-collapse:collapse; width:100%; min-width:1020px; font-size:13px}
.appui th {font-size:12px; color:var(--muted); font-weight:500; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--head); white-space:nowrap}
.appui th.sortable {cursor:pointer; color:var(--ink)}
.appui td {padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.appui tbody tr {cursor:pointer}
.appui tbody tr:hover {background:var(--soft)}
.appui tbody tr:last-child td {border-bottom:0}
.appui .store {display:flex; align-items:center; gap:10px; min-width:200px}
.appui .tile {width:32px; height:32px; border-radius:8px; display:grid; place-items:center; font-weight:600; font-size:12px; flex:none; background:var(--soft); color:var(--muted); border:1px solid var(--line)}
.appui .store b {display:block; font-weight:600; font-size:13.5px}
.appui .store span {color:var(--muted); font-size:12px}
.appui .pill {display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:6px; white-space:nowrap; background:var(--soft); color:var(--muted)}
.appui .pill.ink {background:var(--ink); color:var(--card)}
.appui .pill.iris {background:var(--iris-soft); color:var(--iris-ink)}
.appui .pill.citron {background:color-mix(in srgb,var(--citron) var(--citron-mix,55%),var(--card)); color:var(--citron-ink)}
.appui .sales b {font-size:14px; font-weight:600}
.appui .sales small {color:var(--muted); font-size:11.5px}
.appui .sales .meter {display:block; height:3px; width:84px; border-radius:2px; background:var(--line); margin-top:5px; overflow:hidden}
.appui .sales .meter i {display:block; height:100%; background:var(--iris)}
.appui .trend {display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap}
.appui .up {color:var(--good)}
.appui .down {color:#C2453F}
.appui .soc {display:flex; gap:10px; align-items:center}
.appui .soc span {display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--muted)}
.appui .soc svg {width:16px; height:16px; flex:none}
.appui .status {display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:2px 9px 2px 7px; border-radius:999px; white-space:nowrap}
.appui .status::before {content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.appui .status.open {background:var(--good-soft); color:var(--good)}
.appui .status.pw {background:var(--warn-soft); color:var(--warn)}
.appui .status.closed {background:var(--off-soft); color:var(--off)}
.appui .ads {display:inline-flex; align-items:center; gap:6px; font-size:12.5px; white-space:nowrap}
.appui .ads svg {width:15px; height:15px}
.appui .sigs {display:flex; flex-wrap:wrap; gap:4px; max-width:230px}
.appui .people-ct b {font-weight:600}
.appui .people-ct small {display:block; color:var(--muted); font-size:11.5px}
.appui .empty {padding:40px; text-align:center; color:var(--muted)}
.appui .refresh {border-top:1px solid var(--line); background:var(--head); padding:10px 18px; font-size:12.5px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.appui .refresh .t {font-weight:600}
.appui .refresh .w {color:var(--muted); margin-right:6px}
.appui .refresh .n {font-weight:600; padding:2px 8px; border-radius:6px; background:var(--ink); color:var(--card)}
.appui .refresh .n.neg {background:var(--soft); color:var(--muted); border:1px solid var(--line)}
.appui .refresh .d {color:var(--muted); margin-right:6px}
.appui .drawer {position:absolute; top:0; right:0; bottom:0; width:min(430px,100%); background:var(--card); border-left:1px solid var(--line); box-shadow:-24px 0 50px -34px rgba(0,0,0,.55); z-index:6; display:flex; flex-direction:column; transform:translateX(105%); transition:transform .25s ease; overflow-y:auto}
.appui .drawer.open {transform:none}
.appui .d-cover {padding:18px 18px 22px}
.appui .d-close {position:absolute; right:12px; top:12px; z-index:2; border:0; background:rgba(255,255,255,.16); color:#fff; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px}
.appui .d-cover .tile {background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22)}
.appui .d-cover h3 {font-family:var(--display); font-weight:600; font-size:28px; letter-spacing:-.02em; margin-top:14px}
.appui .d-cover p {opacity:.8; font-size:13px}
.appui .d-stats {display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:14px 18px}
.appui .d-stat {border:1px solid var(--line); border-radius:10px; padding:10px}
.appui .d-stat small {display:block; font-size:11.5px; color:var(--muted)}
.appui .d-stat b {font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.appui .d-sec {padding:6px 18px 14px; display:flex; flex-direction:column; gap:8px}
.appui .d-sec h4 {margin:0; font-size:12px; font-weight:600; color:var(--muted)}
.appui .techs {display:flex; flex-wrap:wrap; gap:6px}
.appui .person {display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
.appui .person:last-child {border-bottom:0}
.appui .av {width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; font-weight:600; background:var(--iris-soft); color:var(--iris-ink)}
.appui .person b {font-size:13px}
.appui .person small {display:block; color:var(--muted); font-size:12px}
.appui .mask {font-size:12px; color:var(--muted)}
.appui .reveal {font:inherit; font-size:11.5px; font-weight:600; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:5px 9px; border-radius:8px; cursor:pointer; white-space:nowrap}
.appui .timeline {display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--line); padding-left:14px; margin-left:4px}
.appui .timeline div {font-size:13px; position:relative}
.appui .timeline div::before {content:""; position:absolute; left:-18.5px; top:6px; width:8px; height:8px; border-radius:50%; background:var(--iris); box-shadow:0 0 0 3px var(--card)}
.appui .timeline small {color:var(--muted); display:block; font-size:11.5px}
.appui .app {border: 0; border-radius: 0; box-shadow: none; min-height: 100vh; display: flex; flex-direction: column; overflow: visible}
.appui .app-top {position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--card); padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px))}
.appui .app-top .logo-img {height: 22px; display: block}
.appui .app-top .logo-dark {display: none}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .appui .app-top .logo-light {display: none}
  :root:not([data-theme="light"]) .appui .app-top .logo-dark {display: block}
}
.appui .tabs button:disabled {opacity: .45; cursor: default}
.appui .me {position: relative}
.appui .me button.avatar-me {border: 0; cursor: pointer}
.appui .menu {position: absolute; right: 0; top: 36px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 8px; min-width: 220px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; z-index: 30}
.appui .menu button {text-align: left; border: 0; background: none; padding: 7px 8px; border-radius: 8px; cursor: pointer; color: var(--ink)}
.appui .menu button:hover {background: var(--soft)}
.appui .app-body {flex: 1; align-items: start}
.appui .side {position: sticky; top: 55px; max-height: calc(100vh - 55px); overflow: auto}
@media (max-width: 900px) {
  .appui .side {position: static; max-height: none}
}
.appui .main {padding-left: 18px; padding-right: max(18px, env(safe-area-inset-right, 0px))}
.appui .view {display: none}
.appui .view.on {display: flex}
.appui .fitbar {display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 13px}
.appui .fitbar b {font-weight: 600}
.appui .fitbar .sig, .appui .d-sec .sig {background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff}
.appui .sig {display: inline-block; font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); white-space: nowrap}
.appui .d-sec .sig {background: var(--soft); border-color: var(--line); color: var(--ink)}
.appui .scorebar {display: flex; align-items: center; gap: 6px; min-width: 100px}
.appui .scorebar i {display: block; height: 6px; border-radius: 3px; background: var(--line); flex: 1; position: relative; overflow: hidden}
.appui .scorebar i::after {content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--iris)}
.appui .scorebar b {width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12.5px}
.appui .tile img {width: 22px; height: 22px}
.appui .soc a {display: inline-flex}
.appui .soc .more {font-size: 11.5px; color: var(--muted)}
.appui .verdict {font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px}
.appui .v-ok {background: var(--good-soft); color: var(--good)}
.appui .v-warn {background: var(--warn-soft); color: var(--warn)}
.appui .v-bad {background: #F8E4E2; color: #B4322B}
.appui .v-off {background: var(--off-soft); color: var(--off)}
.appui .snapline {border-top: 1px solid var(--line); background: var(--head); padding: 10px 18px; font-size: 12.5px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap}
.appui .snapline b {color: var(--ink)}
.appui .scrim {position: fixed; inset: 0; background: rgba(10, 14, 28, .32); z-index: 19}
.appui .drawer {position: fixed; top: 0; bottom: 0; right: 0; width: min(640px, 100%); z-index: 20; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px)}
.appui .d-cover {padding: 20px 22px 22px}
.appui .d-cover .tile {width: 44px; height: 44px; border-radius: 12px}
.appui .d-cover .tile img {width: 30px; height: 30px}
.appui .d-cover a {color: #E7EDA6}
.appui .d-stats {grid-template-columns: repeat(3, minmax(0, 1fr))}
.appui .d-tabs {display: flex; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--line); overflow-x: auto; position: sticky; top: 0; background: var(--card); z-index: 2}
.appui .d-tabs button {border: 0; background: none; padding: 11px 0 9px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; font: inherit; font-size: 13px}
.appui .d-tabs button[aria-pressed="true"] {color: var(--ink); font-weight: 600; border-bottom-color: var(--ink)}
.appui .d-body {display: flex; flex-direction: column; gap: 4px; padding: 10px 0 30px}
.appui .d-sec p {font-size: 13.5px}
.appui .kv {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px 16px}
.appui .kv small {display: block; font-size: 11.5px; color: var(--muted)}
.appui .kv b {font-weight: 600; font-size: 13.5px; word-break: break-word; font-variant-numeric: tabular-nums}
.appui .person .contact {font-family: ui-monospace, Menlo, monospace; font-size: 12px}
.appui .person .acts {display: flex; flex-direction: column; align-items: flex-end; gap: 4px}
.appui .bigview {flex-direction: column; gap: 12px; padding: 16px max(18px, env(safe-area-inset-right, 0px)) 30px max(18px, env(safe-area-inset-left, 0px))}
.appui .fitpanel {border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 10px}
.appui .fitpanel h3 {font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.02em}
.appui .inp {padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: inherit}
.appui .toast {position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 40}
.appui [hidden] {display: none !important}
.appui .ico {width: 15px; height: 15px; flex: none; vertical-align: -3px}
.appui .ic-wrap {display: inline-flex; color: var(--iris-ink)}
.appui .vert {display: inline-flex; align-items: center; gap: 6px; text-transform: capitalize}
.appui .vert .ico {color: var(--iris-ink)}
.appui .tools {display: flex; gap: 4px; align-items: center; min-width: 120px}
.appui .tool-ic {width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line); background: #fff}
.appui .pill .ico {width: 13px; height: 13px; margin-right: 2px}
.appui .lockpill {background: var(--iris-soft); color: var(--iris-ink)}
.appui .app-logo {width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); background: #fff; flex: none}
.appui .lockcard {filter: none; position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; background: var(--card)}
.appui .lockcard .blurred {filter: blur(5px); user-select: none; pointer-events: none; color: var(--muted)}
.appui .lockcard .ic-wrap {width: 30px; height: 30px; border-radius: 8px; background: var(--iris-soft); display: grid; place-items: center}
.appui .modal-scrim {position: fixed; inset: 0; background: rgba(10, 14, 28, .45); backdrop-filter: blur(2px); z-index: 50; display: grid; place-items: center; padding: 20px}
.appui .modal {width: min(520px, 100%); background: var(--card); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow)}
.appui .modal .mh {padding: 22px}
.appui .modal .mh h3 {font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -.02em; color: #fff; margin-top: 6px}
.appui .modal .mb {padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px}
@media (prefers-reduced-motion: no-preference) {
  .appui .modal {animation: viewin .26s ease-out}
  @keyframes viewin{ from { opacity: 0; transform: translateY(8px) scale(.98) } }
}
.appui .blurred {filter: blur(5px); user-select: none; -webkit-user-select: none; pointer-events: none; color: var(--muted)}
.appui .lockrow td {cursor: default}
.appui .app-body.noside {grid-template-columns: minmax(0, 1fr)}
.appui .vert {white-space: nowrap}
.appui .vert + .note {display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 220px}
.appui .upsell {display: flex; flex-direction: column; gap: 8px; margin-top: 6px}
.appui .pgrid {display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px}
.appui .pcard {display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; font-size: 12.5px; line-height: 1.3}
.appui .pcard img, .appui .pcard .pimg-none {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--soft)}
.appui .pcard b {font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.appui .pcard small {color: var(--muted)}
.appui .pcard s {opacity: .7}
.appui .pcard:hover img {outline: 2px solid var(--iris); outline-offset: 1px}
.appui .hoverpop {position: fixed; z-index: 40; width: 300px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; display: flex; flex-direction: column; gap: 10px}
.appui .hoverpop[hidden] {display: none}
.appui .hp-head {display: flex; gap: 10px; align-items: center}
.appui .hp-head small {display: block; color: var(--muted); font-size: 12px}
.appui .hp-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px}
.appui .hp-grid a {display: flex; flex-direction: column; gap: 2px; color: var(--muted); text-decoration: none; font-size: 11px}
.appui .hp-grid img, .appui .hp-grid .pimg-none {width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--soft)}
@media (prefers-reduced-motion: no-preference) {
  .appui .hoverpop:not([hidden]) {animation: viewin .16s ease-out}
}
.appui .keyshow {display: flex; gap: 8px; align-items: center; flex-wrap: wrap}
.appui .keyshow code {font-family: var(--mono); font-size: 13px; padding: 8px 10px; border: 1px dashed var(--iris); border-radius: 10px; word-break: break-all; user-select: all}
.appui pre.code {font-family: var(--mono); font-size: 12.5px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; margin: 0}
.appui #v-api .main-head {display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap}
.appui #apinew, .appui #apihow {display: flex; flex-direction: column; align-items: stretch}
.appui #apinew .searchrow .inp {flex: 1; min-width: 220px}
/* app-embed:end */

/* the embedded app sits in a frame, not the viewport: the real components, positioned inside their box */
.appui { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); text-align: left; -webkit-font-smoothing: antialiased }
.appui .app { min-height: 0; height: 100%; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--line) }
.appui .app-top, .appui .side { position: relative; top: auto; max-height: none }
.appui .app-body { flex: 1; min-height: 0; overflow: hidden }
.appui .drawer { position: absolute; top: 0; bottom: 0; right: 0; left: auto; width: 46%; padding: 0; z-index: 6; transition: none; overflow: hidden }
.appui .tile { padding: 0; gap: 0 }
.appui h3, .appui h4, .appui p { margin: 0 }
.appui table { min-width: 0; table-layout: fixed }
.appui .tablebox { overflow: hidden }
.appui .d-tabs { position: relative }
.appui .cursor { position: absolute; left: 0; top: 0; z-index: 12; width: 20px; height: 20px; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); visibility: hidden }
/* the app window: the real app at its desktop size (1180 x 720), scaled to the box it sits in; the app's own viewport
   breakpoints must not fire inside it, so its desktop grid is pinned */
.appwin { position: relative; border-radius: 16px; overflow: hidden; background: var(--card, #fff); box-shadow: 0 40px 80px -40px rgba(5, 12, 30, .7), 0 0 0 1px rgba(255, 255, 255, .12) }
.appwin .acv { position: relative; overflow: hidden }
.appwin .acam { position: absolute; left: 0; top: 0; width: 1180px; height: 720px; transform-origin: 0 0; will-change: transform }
.appwin .app { height: 720px; border: 0; border-radius: 0 }
.appwin .app-body { display: grid !important; grid-template-columns: 262px minmax(0, 1fr) !important }
.appwin .side { border-right: 1px solid var(--line) !important; border-bottom: 0 !important; overflow: hidden }
.appwin .search { min-width: 0 } .appwin .aq { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; white-space: nowrap; overflow: hidden }
.appwin .aq .tc { display: inline-block; width: 2px; height: 15px; background: currentColor; vertical-align: -2px; margin-left: 1px }
.appwin .arow td { padding-top: 10px; padding-bottom: 10px }
.appwin .drawer .d-body { padding-bottom: 12px }
.appwin .ds-ppl { display: none }
/* sign-up and log-in: the inside of the app, small, on a gradient card beside the form (hidden on phones) */
.authcard { position: relative; margin-top: 10px; border-radius: 20px; padding: 16px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
  background: radial-gradient(70% 70% at 90% 0%, #E8EDB0, #DCE487 25%, transparent 62%), radial-gradient(60% 70% at 0% 100%, #BECFE3, #657DB5 45%, transparent 80%), #3E5488 }
.authcard .appwin { border-radius: 12px }
@media (max-width: 900px) { .authcard { display: none } }
.appwin .dmc { display: flex; align-items: center; gap: 8px; min-width: 0 } .appwin .dmc .av { width: 28px; height: 28px; flex: none; font-size: 10.5px }

.keyword-entry{display:flex;gap:6px;align-items:center;width:100%;min-width:0}.keyword-entry .inp{flex:1;min-width:0;width:0;padding:9px 10px;font-size:12px}.keyword-entry .btn{flex:none;padding:8px 10px;min-height:36px;font-size:12px}.keyword-entry+ .chips{margin-top:9px;gap:6px}.vars .var{gap:14px;padding-block:15px}.vars .var-v small{line-height:1.6}.vars .var-v b{line-height:1.65}.vars{gap:16px}

/* the hero's copy of the app: filter rows as bar charts and the brand-colored profile cover, as in app.css */
.appui .chips.bars { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 3px }
.appui .chip.bar { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 9px; align-items: center; width: 100%; text-align: left; border-radius: 9px; padding: 5px 9px 5px 6px; min-height: 34px; border: 1px solid transparent; background: none; color: var(--ink) }
.appui .chip.bar .b-ic { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--card); border: 1px solid var(--line); overflow: hidden }
.appui .chip.bar .b-ic svg { width: 15px; height: 15px; color: var(--muted) }
.appui .chip.bar .b-l { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.appui .chip.bar .b-t { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.appui .chip.bar .b-t i { display: block; height: 100%; border-radius: 8px 3px 3px 8px; background: color-mix(in srgb, var(--iris) 15%, transparent); box-shadow: inset -2px 0 0 color-mix(in srgb, var(--iris) 45%, transparent) }
.appui .chip.bar:has(> .b-ic:empty) { grid-template-columns: minmax(0, 1fr); padding-left: 10px }
.appui .chip.bar:has(> .b-ic:empty) .b-ic { display: none }
.appui .chip.bar[aria-pressed="true"] { border-color: color-mix(in srgb, var(--iris) 55%, transparent); background: none; color: var(--ink) }
.appui .chip.bar[aria-pressed="true"] .b-l { font-weight: 600 }
.appui .chip.bar[aria-pressed="true"] .b-t i { background: color-mix(in srgb, var(--iris) 34%, transparent); box-shadow: inset -2px 0 0 var(--iris) }
.appui .b-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 4px }
.appui .b-mono { width: 100%; height: 100%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--soft) }
.appui .d-cover.bh-brand { background: linear-gradient(135deg, var(--bh-l1) 0%, var(--bh-l2) 100%); color: var(--bh-lt) }
.appui .d-cover.bh-brand h3, .appui .d-cover.bh-brand p, .appui .d-cover.bh-brand a { color: var(--bh-lt) }
.appui .d-cover.bh-brand .d-close { background: color-mix(in srgb, var(--bh-lt) 14%, transparent); color: var(--bh-lt) }
.appui .d-cover.bh-brand .tile { background: #fff }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appui .d-cover.bh-brand { background: linear-gradient(135deg, var(--bh-d1) 0%, var(--bh-d2) 100%); color: var(--bh-dt) }
  :root:not([data-theme="light"]) .appui .d-cover.bh-brand h3, :root:not([data-theme="light"]) .appui .d-cover.bh-brand p, :root:not([data-theme="light"]) .appui .d-cover.bh-brand a { color: var(--bh-dt) } }
@media (max-width: 600px) { #logout { min-height: 32px; padding-inline: 6px } .footer a, .legal nav a, .hdr .link.keep { display: inline-block; padding-block: 6px } }
.appui .tech { display: inline-flex; align-items: center; gap: 6px } .appui .tech img { width: 16px; height: 16px; border-radius: 4px; flex: none }