/* MostlyQR — app chrome (sign-in + dashboard). Layout-only; every value resolves
   to a Mostly Tiny design-system token, same as marketing.css. */

body { margin: 0; background: var(--bg); }
.ap-root { font-family: var(--font-sans); color: var(--fg); -webkit-font-smoothing: antialiased; min-height: 100vh; }

/* ── Shared topbar + account menu moved to @mostly-tiny/ui kit (web/_kit/
   forge-kit.css): .forge-appheader* / .forge-account*. The brand lockup is now
   .forge-appheader__brand (still used by the SignIn card). ── */

/* ── Page frame ── */
.ap-wrap { max-width: 1140px; margin: 0 auto; padding: 28px 24px 80px; }
.ap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ap-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.03em; margin: 0; }
.ap-sub { font-size: 14px; color: var(--fg-muted); margin: 6px 0 0; }
.ap-demo { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 10px 14px; border-radius: var(--radius); background: var(--accent-bg-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--fg)); font-size: 12.5px; font-weight: 500; }
.ap-demo svg { flex: none; color: var(--accent); }

/* ── Folder chips (F010) ── */
.ap-folders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ap-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-elev); color: var(--fg-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s var(--ease-out); }
.ap-chip:hover { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.ap-chip.on { background: var(--accent-bg-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: color-mix(in srgb, var(--accent) 82%, var(--fg)); }
.ap-chip__lbl { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.ap-chip__x { display: inline-grid; place-items: center; background: none; border: 0; padding: 0; margin-left: 2px; color: inherit; opacity: .65; cursor: pointer; }
.ap-chip__x:hover { opacity: 1; }
.ap-chip--add { border-style: dashed; }

/* ── Stat row ── */
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; }
.ap-stat { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: 18px 20px; }
.ap-stat__label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); }
.ap-stat__value { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
.ap-stat__delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.ap-stat__delta.up { color: var(--good); }
.ap-stat__delta.flat { color: var(--fg-subtle); }
.ap-stat__sub { font-size: 12px; color: var(--fg-muted); margin-top: 4px; }

/* ── Cards / panels ── */
.ap-panel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); }
.ap-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.ap-panel__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ap-panel__body { padding: 20px; }
.ap-grid2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }

/* ── Codes table ── */
.ap-codes { width: 100%; border-collapse: collapse; }
.ap-codes th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-subtle); padding: 0 16px 12px; }
.ap-codes td { padding: 14px 16px; border-top: 1px solid var(--hairline); vertical-align: middle; }
.ap-codes tr:hover td { background: color-mix(in srgb, var(--bg-chip) 50%, transparent); }
.ap-code__qr { width: 40px; height: 40px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--hairline); display: grid; place-items: center; flex: none; }
.ap-code__qr svg { width: 34px; height: 34px; }
/* Barcodes are wide, not square — keep their aspect ratio in the square code cell/preview. */
.ap-code__qr svg[aria-label="Barcode preview"] { width: 38px; height: auto; }
.ap-code__cell { display: flex; align-items: center; gap: 12px; }
.ap-code__title { font-size: 13.5px; font-weight: 600; }
.ap-code__url { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent); }
.ap-code__dest { font-size: 12.5px; color: var(--fg-muted); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-code__scans { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.ap-code__actions { display: flex; gap: 6px; justify-content: flex-end; }
.ap-iconbtn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); display: grid; place-items: center; cursor: pointer; transition: all .12s var(--ease-out); }
.ap-iconbtn:hover { color: var(--fg); border-color: var(--fg-subtle); }
.ap-iconbtn.danger:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

/* status pill */
.ap-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.ap-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.ap-status--active { background: var(--good-soft); color: color-mix(in srgb, var(--good) 64%, var(--fg)); }
.ap-status--active::before { background: var(--good); }
.ap-status--frozen { background: var(--accent-bg-soft); color: var(--accent); }
.ap-status--frozen::before { background: var(--accent); }
.ap-status--disabled { background: var(--bad-soft); color: var(--bad); }
.ap-status--disabled::before { background: var(--bad); }
.ap-frozen-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px; border-radius: var(--radius); background: var(--accent-bg-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--fg)); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.ap-frozen-note svg { flex: none; margin-top: 1px; color: var(--accent); }
/* Settings → upgrade picker: interval toggle + per-plan upsell rows */
.ap-billtoggle { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill, 999px); background: var(--bg-sunken, var(--bg-elev)); border: 1px solid var(--border); }
.ap-billtoggle button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 6px 14px; border-radius: var(--radius-pill, 999px); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); }
.ap-billtoggle button[data-on="true"] { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-soft, 0 1px 2px rgba(10,10,26,.06)); }
.ap-billtoggle__save { color: var(--accent); font-weight: 700; }
.ap-upsell { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 1px solid var(--border); border-radius: var(--radius); }
.ap-upsell__name { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; }
.ap-upsell__meta { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }

/* ── Mini charts ── */
/* Chart = Y-axis tick column + the bars/caption area, side by side. */
.ap-chart { display: flex; align-items: stretch; gap: 10px; }
.ap-chart__y { display: flex; flex-direction: column; justify-content: space-between; height: 140px; text-align: right; font-size: 10.5px; line-height: 1; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }
.ap-chart__main { flex: 1; min-width: 0; }
.ap-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.ap-bar { flex: 1; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--bg-elev))); border-radius: 4px 4px 2px 2px; min-height: 3px; transition: height .4s var(--ease-out); position: relative; }
.ap-bar:hover { filter: brightness(1.08); }
.ap-chartcap { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-subtle); margin-top: 8px; }
.ap-break { display: flex; flex-direction: column; gap: 12px; }
.ap-break__row { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 10px; }
.ap-break__label { font-size: 12.5px; color: var(--fg-muted); }
/* OS rows nested under their device family — slight indent + lighter weight so the
   parent/child hierarchy reads at a glance. */
.ap-break__row--child .ap-break__label { padding-left: 16px; font-size: 12px; color: var(--fg-subtle); }
.ap-break__track { height: 8px; border-radius: 999px; background: var(--bg-chip); overflow: hidden; }
.ap-break__fill { height: 100%; border-radius: 999px; background: var(--accent); }
.ap-break__val { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fg); text-align: right; font-weight: 600; }

/* upgrade gate (free plan, count-only) */
.ap-gate { text-align: center; padding: 40px 24px; }
.ap-gate__ic { width: 46px; height: 46px; border-radius: 13px; background: var(--accent-bg-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto 14px; }
.ap-gate__t { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.ap-gate__d { font-size: 13.5px; color: var(--fg-muted); max-width: 30em; margin: 8px auto 18px; line-height: 1.5; }

/* ── Auth (sign-in) ── */
.ap-auth { min-height: 100vh; display: grid; place-items: center; padding: 24px; background:
  radial-gradient(1200px 500px at 50% -10%, var(--accent-bg-soft), transparent 70%), var(--bg); }
.ap-authcard { width: 100%; max-width: 408px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 34px 32px; }
.ap-authcard__brand { display: flex; justify-content: center; margin-bottom: 18px; }
.ap-authcard h1 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; text-align: center; margin: 0; }
.ap-authcard p.sub { font-size: 14px; color: var(--fg-muted); text-align: center; margin: 8px 0 24px; line-height: 1.5; }
.ap-form { display: flex; flex-direction: column; gap: 14px; }
.ap-sent { text-align: center; }
.ap-sent__ic { width: 52px; height: 52px; border-radius: 50%; background: var(--good-soft); color: var(--good); display: grid; place-items: center; margin: 4px auto 16px; }
.ap-auth__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--fg-subtle); }
.ap-auth__promise { display: inline-flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; font-size: 12.5px; color: var(--fg-muted); }
.ap-auth__promise svg { color: var(--accent); }
.ap-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.ap-link:hover { text-decoration: underline; }

/* drawer for create/edit */
.ap-drawer__scrim { position: fixed; inset: 0; background: rgba(10,10,26,0.32); backdrop-filter: blur(8px); z-index: 100; }
.ap-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 92vw; background: var(--bg-elev);
  border-left: 1px solid var(--border); box-shadow: -20px 0 60px rgba(10,10,26,0.18); z-index: 101;
  display: flex; flex-direction: column; animation: drawerIn .24s var(--ease-out); }
@keyframes drawerIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }
.ap-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--hairline); }
.ap-drawer__title { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.ap-drawer__body { padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.ap-drawer__preview { display: grid; place-items: center; padding: 18px; background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--radius); }
.ap-drawer__preview svg { width: 150px; height: 150px; }
.ap-drawer__preview svg[aria-label="Barcode preview"] { width: 240px; max-width: 100%; height: auto; }
.ap-drawer__foot { margin-top: auto; padding: 16px 22px; border-top: 1px solid var(--hairline); display: flex; gap: 10px; }

/* ── Flow editor (node-flow / routing) ── */
.fl-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.fl-canvas { display: flex; flex-direction: column; align-items: center; }
.fl-colhint { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); align-self: flex-start; margin: 2px 0 10px; }

/* fixed scan / default nodes */
.fl-node { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--radius); background: var(--brand-midnight); color: #fff; box-shadow: var(--shadow-soft); font-weight: 600; font-size: 14px; }
.fl-node__ic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 40%, transparent); color: #fff; flex: none; }
.fl-node--default { background: var(--bg-elev); color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); align-items: stretch; flex-direction: column; gap: 6px; padding: 14px 16px; width: 100%; max-width: 520px; }
.fl-node--default .fl-node__lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-muted); font-weight: 600; }
.fl-node--default .fl-node__ic { background: var(--accent-bg-soft); color: var(--accent); }

.fl-wire { width: 2px; height: 22px; background: repeating-linear-gradient(var(--accent) 0 5px, transparent 5px 11px); opacity: 0.7; }
.fl-stack { width: 100%; max-width: 520px; display: flex; flex-direction: column; align-items: center; }

/* rule card */
.fl-rule { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 14px 16px; position: relative; transition: border-color .16s var(--ease-out), box-shadow .16s; }
.fl-rule.is-hit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg-soft); }
.fl-rule__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fl-rule__num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bg-soft); color: var(--accent); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.fl-rule__when { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.fl-rule__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fl-rule__hitbadge { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-bg-soft); padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.fl-rule__tools { display: flex; gap: 4px; }
.fl-cond { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fl-cond__type { flex: none; }
.fl-select, .fl-input { height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: 13px; padding: 0 10px; outline: none; }
.fl-select:focus, .fl-input:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 0 0 3px var(--accent-bg-soft); }
.fl-input { flex: 1; min-width: 0; }
.fl-cond__x, .fl-iconbtn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); display: grid; place-items: center; cursor: pointer; flex: none; transition: all .12s var(--ease-out); }
.fl-iconbtn:hover { color: var(--fg); border-color: var(--fg-subtle); }
.fl-iconbtn.danger:hover { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.fl-iconbtn:disabled { opacity: 0.35; cursor: default; }
.fl-addcond { font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: 2px 0; display: inline-flex; align-items: center; gap: 5px; }
.fl-dest { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.fl-dest__arrow { color: var(--accent); flex: none; }
.fl-days { display: flex; gap: 4px; }
.fl-day { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg); font-size: 11px; font-weight: 600; color: var(--fg-muted); cursor: pointer; }
.fl-day[data-on="true"] { background: var(--accent-bg-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.fl-time { display: flex; align-items: center; gap: 6px; flex: 1; }
/* country condition — selected countries as removable chips + an add dropdown */
.fl-countries { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.fl-country { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 3px 0 10px; border-radius: 8px; background: var(--bg-elev); border: 1px solid var(--border); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.fl-country__x { display: grid; place-items: center; width: 20px; height: 20px; border: none; background: none; color: var(--fg-subtle); cursor: pointer; border-radius: 6px; }
.fl-country__x:hover { background: var(--bg); color: var(--fg); }
.fl-country-add { flex: none; min-width: 150px; max-width: 200px; color: var(--fg-muted); }
.fl-addrule { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-bg-soft); color: var(--accent); font-weight: 600; font-size: 13px; cursor: pointer; }

/* integrations lane */
.fl-intlane { width: 100%; max-width: 520px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.fl-intlane__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 14px; }
.fl-ints { display: flex; flex-wrap: wrap; gap: 10px; }
.fl-int { display: inline-flex; align-items: center; gap: 9px; padding: 9px 10px 9px 9px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.fl-int__ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; flex: none; }
.fl-int__t { font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.fl-int__s { font-size: 11px; color: var(--fg-subtle); }
.fl-int__x { margin-left: 4px; color: var(--fg-subtle); cursor: pointer; background: none; border: none; display: grid; place-items: center; }
.fl-int--add { border-style: dashed; border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-bg-soft); color: var(--accent); cursor: pointer; font-weight: 600; font-size: 12.5px; padding: 9px 14px; }

/* inline URL form shown when adding a webhook/zapier integration */
.fl-inturl { margin-top: 12px; padding: 16px; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow-xs); }
.fl-inturl__head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.fl-inturl__lbl { font-size: 12.5px; color: var(--fg-muted); line-height: 1.45; margin: 0 0 10px; }
.fl-inturl__in { width: 100%; }
.fl-inturl__err { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--danger, #d23f3f); }
.fl-inturl__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* simulator panel (sticky) */
.fl-sim { position: sticky; top: 84px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); padding: 18px; }
.fl-sim__title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.fl-sim__sub { font-size: 12px; color: var(--fg-muted); margin-bottom: 16px; line-height: 1.45; }
.fl-sim__row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.fl-sim__row label { font-size: 11px; font-weight: 600; color: var(--fg-subtle); }
.fl-sim__result { margin-top: 6px; padding: 14px; border-radius: var(--radius); background: var(--brand-midnight); color: #fff; }
.fl-sim__rlbl { font-size: 11px; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 6px; }
.fl-sim__rurl { font-family: var(--font-mono); font-size: 12px; margin-top: 6px; word-break: break-all; color: #fff; }
.fl-sim__rvia { font-size: 11px; color: var(--accent); margin-top: 8px; font-weight: 600; }

/* recipe gallery */
.fl-recipes { width: 100%; max-width: 520px; }
.fl-recipes__h { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.fl-recipes__sub { font-size: 13px; color: var(--fg-muted); margin: 0 0 18px; }
.fl-recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fl-recipe { text-align: left; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-xs); padding: 16px; cursor: pointer; transition: all .14s var(--ease-out); }
.fl-recipe:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.fl-recipe__ic { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-bg-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 10px; }
.fl-recipe__t { font-size: 13.5px; font-weight: 600; }
.fl-recipe__d { font-size: 12px; color: var(--fg-muted); margin-top: 3px; line-height: 1.4; }
/* integration variant of the recipe card — brand-coloured icon + an "add" hint */
.fl-intcard { display: flex; flex-direction: column; }
.fl-intcard__add { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; font-size: 11.5px; font-weight: 600; color: var(--accent); }
/* A CONFIGURED integration card (same width/style as the add-cards, with an Edit/Remove footer). */
.fl-intcard--on { position: relative; border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); cursor: default; }
.fl-intcard__active { position: absolute; top: 13px; right: 13px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--good-soft); color: color-mix(in srgb, var(--good) 64%, var(--fg)); font-size: 10px; font-weight: 600; letter-spacing: .01em; }
.fl-intcard__active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); flex: none; }
.fl-intcard--on:hover { transform: none; box-shadow: var(--shadow-xs); border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); }
.fl-intcard__foot { display: flex; gap: 14px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); }
.fl-intcard__act { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--fg-muted); transition: color .12s var(--ease-out); }
.fl-intcard__act:hover { color: var(--fg); }
.fl-intcard__act--rm:hover { color: var(--bad); }
.fl-addmenu { position: relative; }
.fl-addmenu__pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 200px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; }
.fl-addmenu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: var(--font-sans); font-size: 13px; color: var(--fg); text-align: left; }
.fl-addmenu__item:hover { background: var(--bg-chip); }

@media (max-width: 940px) {
  .ap-stats { grid-template-columns: repeat(2, 1fr); }
  .ap-grid2 { grid-template-columns: 1fr; }
  .fl-layout { grid-template-columns: 1fr; }
  .fl-sim { position: static; }
  .fl-recipe-grid { grid-template-columns: 1fr; }
}

/* geo_radius condition — centre lat/lng + radius(m) + a "use my location" helper */
.fl-geo { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.fl-geo__n { width: 78px; flex: none; }
.fl-geo__rad { display: inline-flex; align-items: center; gap: 4px; }
.fl-geo__rad .fl-geo__n { width: 66px; }
.fl-geo__unit { font-size: 12px; color: var(--fg-subtle); }
.fl-geo__btn { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .12s var(--ease-out); }
.fl-geo__btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.fl-geo__btn:disabled { opacity: 0.55; cursor: default; }
/* simulator GPS row — two compact lat/lng inputs side by side */
.fl-sim__gps { display: flex; gap: 6px; }
.fl-sim__gps .fl-select { width: 50%; min-width: 0; }

/* geo inside/outside toggle + rule action (redirect vs block) + blocked result */
.fl-geo__io, .fl-action__seg { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--bg-chip, color-mix(in srgb, var(--fg) 6%, transparent)); border: 1px solid var(--border); flex: none; }
.fl-geo__io button, .fl-action__seg button { appearance: none; border: 0; background: transparent; color: var(--fg-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.fl-geo__io button[data-on="true"], .fl-action__seg button[data-on="true"] { background: var(--bg); color: var(--accent); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fl-action { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hairline); flex-wrap: wrap; }
.fl-action .fl-dest { margin-top: 0; padding-top: 0; border-top: 0; flex: 1; min-width: 220px; }
.fl-dest--block .fl-dest__arrow { color: var(--bad, #d4524e); }
.fl-sim__result.is-blocked { background: color-mix(in srgb, var(--bad, #d4524e) 12%, transparent); border-color: color-mix(in srgb, var(--bad, #d4524e) 35%, transparent); }
.fl-sim__result.is-blocked .fl-sim__rlbl { color: var(--bad, #d4524e); }

/* webhook "forward precise location" opt-in + the per-integration badge */
.fl-inturl__fwd { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 2px; cursor: pointer; }
.fl-inturl__fwd input { margin-top: 2px; flex: none; }
.fl-inturl__fwdt { display: block; font-size: 12.5px; font-weight: 600; }
.fl-inturl__fwdd { display: block; font-size: 11.5px; color: var(--fg-muted); line-height: 1.4; margin-top: 1px; }
.fl-int__loc { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--accent-bg-soft); color: var(--accent); font-size: 10.5px; font-weight: 600; vertical-align: middle; }

/* ── Scan map (geo analytics; pairs with _kit/geo-kit.css) ─────────────────── */
.ap-map__controls { display: flex; align-items: center; gap: 10px; }
.ap-map__range { min-width: 96px; font-size: 12.5px; }
.ap-map__toggle { display: inline-flex; padding: 3px; gap: 3px; border-radius: var(--radius-pill, 999px); background: var(--bg-sunken, var(--bg-chip)); border: 1px solid var(--border); }
.ap-map__tab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 5px 13px; border-radius: var(--radius-pill, 999px); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--fg-muted); transition: all .12s var(--ease-out); }
.ap-map__tab.is-on { background: var(--bg-elev); color: var(--fg); box-shadow: var(--shadow-soft, 0 1px 2px rgba(10,10,26,.06)); }
.ap-map__canvas { height: 340px; margin: 0; }
.ap-map__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--hairline); }
.ap-map__livedot { font-size: 11.5px; color: var(--fg-subtle); }
.ap-map__livedot::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e8413a; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(232,65,58,.18); }
.ap-map__approx { font-size: 11.5px; color: var(--fg-subtle); margin-left: auto; cursor: help; }
.ap-map__approx::before { content: "ⓘ"; margin-right: 4px; opacity: .7; }