/* VIBRIYOGN Ops — dashboard styles. Brand: ink + paper + signal yellow; VIBGYOR spectrum marks locations. */
:root {
  --ink: #0a0a0a;
  --ink-2: #1c1c1c;
  --ink-3: #2c2c2c;
  --paper: #ffffff;
  --ground: #eceef0;
  --line: #d9dce0;
  --line-2: #e7e9ec;
  --text: #16181b;
  --muted: #5b6168;
  --accent: #ffd400;
  --accent-ink: #0a0a0a;
  --good: #1fa85a;
  --warn: #ff8a00;
  --bad: #e63b2e;
  --info: #1e7fd8;
  --s1: #7b3fbf; --s2: #3b3fb5; --s3: #1e7fd8; --s4: #1fa85a; --s5: #e8b900; --s6: #ff8a00; --s7: #e63b2e;
  --spectrum: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5), var(--s6), var(--s7));
  --head: "Archivo", "Arial Black", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r: 14px;      /* panels, dialogs, flyouts */
  --r-sm: 10px;   /* buttons, inputs, menu items */
  --r-xs: 6px;    /* tags, small chips */
  /* Type scale: six sizes only */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px;
  /* 4px spacing grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --side: 248px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ground); color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--head); margin: 0; letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: var(--fs-2xl); font-weight: 800; }
h2 { font-size: var(--fs-xl); font-weight: 750; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, td.n, .kpi b { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; border-radius: var(--r-xs); }
[hidden] { display: none !important; }

/* ── Sign-in ─────────────────────────────────────────── */
.signin { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 40px; padding: 40px clamp(16px, 5vw, 72px); background: #f7f7f4; position: relative; overflow: hidden; isolation: isolate; }
.signin::before, .signin::after { display: none; content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.signin::before { width: 560px; height: 560px; left: -140px; top: -160px; background: radial-gradient(closest-side, #a8d0ff, transparent); }
.signin::after { width: 620px; height: 620px; right: -180px; bottom: -220px; background: radial-gradient(closest-side, #ffd36b, transparent); }
.signin-hero { max-width: 520px; justify-self: end; }
.hero-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
.hero-brand img { width: 30px; height: 30px; }
.hero-brand b { font-family: var(--head); font-weight: 800; letter-spacing: .06em; font-size: var(--fs-md); }
.signin-hero h2 { font-family: var(--head); font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 30px; color: var(--ink); }
.signin-hero h2 em { font-style: normal; background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 420px; }
.hero-app { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.06); box-shadow: 0 6px 20px rgba(0,0,0,.05); font-weight: 700; color: var(--ink); backdrop-filter: blur(6px); animation: bob 5s ease-in-out infinite; animation-delay: var(--d); }
.hero-app i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r); background: var(--c); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 40%, transparent); }
.hero-app svg { width: 21px; height: 21px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.hero-foot { display: flex; align-items: center; gap: 8px; margin: 26px 0 0; color: var(--muted); font-size: var(--fs-md); font-weight: 500; }
.hero-foot svg { width: 18px; height: 18px; color: var(--good); }
.signin-card { width: min(440px, 100%); justify-self: start; background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 24px 60px rgba(30,20,60,.12); border: 1px solid rgba(0,0,0,.05); }
.signin-card .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.signin-card .btn.primary:hover { filter: brightness(1.04); }
.sso-top { display: grid; gap: 8px; }
.sso-top a.sso { margin: 0; padding-top: 11px; padding-bottom: 11px; }
@media (max-width: 860px) {
  .signin { grid-template-columns: 1fr; gap: 22px; padding: 28px 16px 40px; align-content: start; }
  .signin-hero, .signin-card { justify-self: center; width: min(440px, 100%); }
  .hero-brand { justify-content: center; margin-bottom: 14px; }
  .signin-hero h2 { font-size: var(--fs-3xl); margin-bottom: 16px; text-align: center; }
  .hero-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: none; }
  .hero-app { flex-direction: column; gap: 6px; padding: 10px 4px; font-size: var(--fs-xs); animation: none; }
  .hero-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) { .hero-app { animation: none; } }
.signin-card .stripe { height: 6px; background: var(--spectrum); }
.signin-card .inner { padding: 28px; }
.signin-card .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.signin-card .brand img { width: 34px; height: 34px; }
.signin-card .brand span { font-family: var(--head); font-weight: 800; font-size: var(--fs-xl); }
.signin-card p { color: var(--muted); margin: 6px 0 18px; }
.code-input { font-size: var(--fs-2xl); letter-spacing: 0.3em; text-indent: 0.3em; text-align: center; font-variant-numeric: tabular-nums; min-width: 0; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── Shell ───────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100%; }
.side { background: var(--ink); color: #e8e8e8; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .stripe { height: 4px; background: var(--spectrum); flex: none; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 10px; text-decoration: none; }
.side .brand img { width: 28px; height: 28px; }
.side .brand b { font-family: var(--head); font-size: var(--fs-lg); font-weight: 800; color: #fff; }
.side .brand small { display: block; color: #9a9a9a; font-size: var(--fs-xs); }
.biz { margin: 6px 12px 12px; }
.biz select { width: 100%; background: var(--ink-2); color: #fff; border: 1px solid var(--ink-3); border-radius: var(--r-sm); padding: 9px 10px; }
.nav { display: flex; flex-direction: column; padding: 0 8px 12px; gap: 1px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); text-decoration: none; color: #cfcfcf; font-size: var(--fs-md); }
.nav a:hover { background: var(--ink-2); color: #fff; }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.nav a svg { width: 18px; height: 18px; flex: none; }
.nav .group { color: #8a8a8a; font-size: var(--fs-xs); padding: 16px 12px 6px; }
.nav a.soon { color: #8f8f8f; }
.nav a.soon em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); color: #777; }
.side .who { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--ink-3); font-size: var(--fs-sm); color: #a8a8a8; }
.side .who b { color: #fff; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.side .who button { background: none; border: 0; color: #a8a8a8; padding: 0; text-decoration: underline; cursor: pointer; font-size: var(--fs-sm); }

.main { min-width: 0; }
.topbar { display: none; }
.page { padding: 28px clamp(16px, 3vw, 36px) 64px; max-width: 1240px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head p { margin: 4px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ro-note { background: #fff7cc; border: 1px solid #f2df85; color: #5a4a00; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: 16px; }

/* ── Controls ────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--paper); padding: 9px 14px; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-size: var(--fs-md); text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #b9bec4; }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-3); }
.btn.signal { background: var(--accent); border-color: #e6bf00; color: var(--accent-ink); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 5px 10px; font-size: var(--fs-sm); }
.btn.block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--info); cursor: pointer; text-decoration: underline; font-size: inherit; }

label.f { display: block; margin-bottom: 14px; }
label.f > span { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 5px; }
label.f > small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 4px; }
input { min-width: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=url], input[type=datetime-local], select, textarea {
  width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm); padding: 9px 11px; min-height: 40px;
}
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.45); }
textarea { min-height: 84px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--ink); }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type=search] { max-width: 320px; }
.toolbar select { width: auto; }

/* ── Surfaces ────────────────────────────────────────── */
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.panel + .panel { margin-top: 16px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-head a, .panel-head .linkbtn { font-size: var(--fs-sm); }
.grid2 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi b { overflow-wrap: anywhere; }
.locq { display: inline-flex; align-items: center; gap: 5px; margin-right: 10px; }
.close-menu { display: none; }

/* Custom field rows (Settings) */
.field-row { display: grid; grid-template-columns: 1fr 130px 1fr auto auto; grid-template-areas: 'label type opts pub del' 'for for for for for'; gap: 8px; align-items: center; margin-bottom: 8px; }
.fr-label { grid-area: label; } .fr-type { grid-area: type; } .fr-opts { grid-area: opts; } .fr-pub { grid-area: pub; } .fr-del { grid-area: del; } .fr-for { grid-area: for; display: flex; align-items: center; gap: 10px; } .fr-for span { white-space: nowrap; } .fr-for input { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.field-row .fr-opts[hidden] { display: none; } .field-row:has(.fr-opts[hidden]) .fr-type { grid-column: span 2; }
.starter { border-top: 1px solid var(--line-2); margin-top: 14px; }
.starter select { flex: 1; min-width: 0; }
.grid2 > .panel + .panel { margin-top: 0; }
.stack > * + * { margin-top: 16px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* KPI strip: one ruled band, not a row of cards */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; overflow: hidden; }
.kpi { padding: 16px 18px; border-left: 1px solid var(--line-2); }
.kpi:first-child { border-left: 0; }
.kpi span { display: block; color: var(--muted); font-size: var(--fs-sm); }
.kpi b { display: block; font-family: var(--head); font-size: var(--fs-2xl); font-weight: 800; margin-top: 2px; }
.kpi.alert b { color: var(--bad); }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
th { text-align: left; font-weight: 600; color: var(--muted); font-size: var(--fs-sm); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #f7f8f9; }
.thumb { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; background: var(--ground); display: block; }
.thumb.empty { display: grid; place-items: center; color: #9aa0a6; }
.name-cell { display: flex; align-items: center; gap: 12px; }
.name-cell b { font-weight: 600; }
.name-cell small { display: block; color: var(--muted); }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--ground); color: var(--ink-3); white-space: nowrap; }
.tag.low { background: #ffe9e6; color: #b3261b; }
.tag.good { background: #e3f6ea; color: #136c3a; }
.tag.warn { background: #fff1de; color: #9a5300; }
.tag.info { background: #e3effc; color: #12569b; }
.tag.off { background: #eceef0; color: #6b7178; }
.mv { font-weight: 600; }
.mv.in { color: var(--good); }
.mv.out { color: var(--bad); }

/* Spectrum location chips and the stacked stock bar — the signature element */
.dot { width: 10px; height: 10px; border-radius: var(--r-xs); display: inline-block; flex: none; }
.spread { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line-2); min-width: 120px; }
.spread i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-sm); margin-top: 8px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.list li:last-child { border-bottom: 0; }
.list li .l { min-width: 0; }
.list li .l b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list li .l small { color: var(--muted); }

.empty-state { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin-bottom: 6px; }
.empty-state .btn { margin-top: 14px; }

.map { height: 360px; border-radius: var(--r-sm); border: 1px solid var(--line); z-index: 0; }
.map.short { height: 240px; }
.map.pick { height: 260px; cursor: crosshair; }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.photo { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--ground); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(10, 10, 10, 0.75); color: #fff; cursor: pointer; line-height: 1; }
.photo.add { border: 2px dashed var(--line); display: grid; place-items: center; color: var(--muted); cursor: pointer; font-size: var(--fs-sm); text-align: center; padding: 8px; }
.photo.add:hover { border-color: var(--ink); color: var(--ink); }

.quick { display: flex; gap: 8px; flex-wrap: wrap; }

/* Variant builder */
.axes { display: grid; gap: 10px; }
.axis { display: grid; grid-template-columns: 160px 1fr auto; gap: 8px; align-items: center; }
.vtable input { min-height: 34px; padding: 6px 8px; }
.vtable td { padding: 6px; }

/* Import steps */
.steps { margin: 0 0 14px; padding-left: 20px; }
.steps li { margin-bottom: 10px; line-height: 1.55; }
.steps li .btn { vertical-align: middle; }

/* Being built out */
.soon-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; max-width: 720px; position: relative; overflow: hidden; }
.soon-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 10px, var(--ink) 10px 20px); }
.soon-card h2 { margin-bottom: 8px; }
.soon-card .badge { display: inline-block; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-sm); padding: 3px 10px; border-radius: 99px; margin-bottom: 12px; }
.soon-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.soon-card li + li { margin-top: 4px; }

code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); }
pre { background: var(--ink); color: #f2f2f2; padding: 14px; border-radius: var(--r-sm); overflow-x: auto; white-space: pre; margin: 8px 0 0; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row { min-width: 0; }
.copy-row input { flex: 1; min-width: 0; }
.copy-row input[readonly] { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-sm); }

/* Dialog */
dialog { border: 0; border-radius: var(--r); padding: 0; width: min(640px, calc(100% - 24px)); max-height: calc(100% - 32px); background: var(--paper); color: var(--text); }
dialog.wide { width: min(900px, calc(100% - 24px)); }
dialog::backdrop { background: rgba(10, 10, 10, 0.55); }
dialog form.d { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.d-head { padding: 18px 20px 6px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.d-head button { background: none; border: 0; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; color: var(--muted); padding: 4px 8px; }
.d-body { padding: 10px 20px; overflow-y: auto; }
.d-foot { padding: 14px 20px 18px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line-2); }
.err { background: #ffe9e6; color: #8e1c13; padding: 9px 12px; border-radius: var(--r-sm); font-size: var(--fs-md); margin-bottom: 12px; }

.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 99px; font-size: var(--fs-md); z-index: 50; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.toast.bad { background: var(--bad); }

.loading { padding: 40px 0; color: var(--muted); }

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { border-left: 0; border-top: 1px solid var(--line-2); }
  .kpi:nth-child(-n + 2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--line-2); }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; height: 100dvh; width: min(290px, 86vw); z-index: 40; transform: translateX(-100%); transition: transform 0.2s ease; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .side .who { position: sticky; bottom: 0; background: var(--ink); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .side .who b { min-width: 0; }
  .side .who button { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--ink-3); border-radius: var(--r-sm); text-decoration: none; color: #fff; font-size: var(--fs-md); }
  body.menu-open { overflow: hidden; }
  .shell.open .side { transform: none; }
  .shell.open::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 30; }
  .topbar { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 20; }
  .topbar button { background: none; border: 0; color: #fff; padding: 4px; cursor: pointer; }
  .topbar b { font-family: var(--head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .page { padding: 20px 16px 56px; }
  h1 { font-size: var(--fs-xl); }
  .axis { grid-template-columns: 1fr; }
  .toolbar input[type=search] { max-width: none; }
}
/* ── Phones: comfortable layout ─────────────────────── */
@media (max-width: 820px) {
  /* 16px inputs stop iPhone from zooming in on every field */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=url], input[type=datetime-local], select, textarea { font-size: var(--fs-lg); min-height: 44px; }
  .btn { min-height: 44px; }
  .btn.small { min-height: 38px; padding: 6px 12px; }
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }
  .topbar button { width: 44px; height: 44px; display: grid; place-items: center; margin-left: -10px; }
  .close-menu { display: block; position: absolute; top: 10px; right: 8px; width: 44px; height: 44px; background: none; border: 0; color: #cfcfcf; font-size: var(--fs-2xl); line-height: 1; cursor: pointer; }
  .side .brand { padding-right: 56px; }
  .nav a { padding: 12px; font-size: var(--fs-md); }
  .page { padding: 18px 16px calc(56px + env(safe-area-inset-bottom)); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .page-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .page-head .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-head .actions > :first-child:nth-last-child(odd) { grid-column: span 2; }
  .page-head .actions .btn { width: 100%; }
  .quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .quick .btn { padding: 9px 6px; }
  .quick .btn:first-child { grid-column: span 2; }
  .panel { padding: 16px; border-radius: var(--r); }
  .panel-head { flex-wrap: wrap; }
  .toolbar input[type=search] { flex: 1 1 100%; }
  .toolbar select { flex: 1; }
  .list li { align-items: flex-start; }
  .list li .l b { white-space: normal; overflow: visible; }
  .list li > small, .list li > span:last-child { flex: none; text-align: right; }

  /* KPI band: two per row, last odd one full width */
  .kpis, .kpis.k3, .kpis.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 14px 16px; border-left: 0; border-top: 1px solid var(--line-2); }
  .kpi:nth-child(-n + 2) { border-top: 0; }
  .kpi:nth-child(even) { border-left: 1px solid var(--line-2); }
  .kpi:last-child:nth-child(odd) { grid-column: span 2; }
  .kpi b { font-size: var(--fs-2xl); }

  /* Tables become stacked cards */
  .table-wrap { margin: 0; padding: 0; overflow: visible; }
  .table-wrap[style*="max-height"] { overflow-y: auto; }
  table.rt, table.rt tbody, table.rt tr, table.rt td { display: block; width: 100% !important; }
  table.rt thead { display: none; }
  table.rt tr { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px; margin-bottom: 10px; background: var(--paper); }
  table.rt tr:last-child { margin-bottom: 0; }
  table.rt td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: right; min-height: 0; }
  table.rt td::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-sm); text-align: left; flex: none; }
  table.rt td:empty, table.rt td[data-label=""]:empty { display: none; }
  table.rt:not(.vtable) td:first-child { display: block; text-align: left; font-size: var(--fs-md); padding: 2px 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
  table.rt:not(.vtable) td:first-child::before { display: none; }
  table.rt td > .spread { flex: 1; max-width: 60%; }
  table.rt td .locq { margin: 0 0 0 10px; }
  tr.click:hover td { background: none; }
  tr.click:active { background: #f4f5f6; }
  table.vtable td input { max-width: 62%; flex: 1; }

  /* Settings field rows stack */
  .field-row { grid-template-columns: 1fr 1fr; grid-template-areas: 'label label' 'type opts' 'for for' 'pub del'; padding: 10px 0; border-bottom: 1px solid var(--line-2); margin-bottom: 0; }
  .fr-opts[hidden] + .fr-pub { grid-area: pub; }
  .field-row .fr-del { justify-self: end; }
  .field-row:has(.fr-opts[hidden]) .fr-type { grid-column: 1 / -1; }
  .fr-type { width: 100%; }
  table.rt td > .cv { min-width: 0; }
  table.rt:not(.vtable) td:first-child > .cv { display: block; }
  .axis { grid-template-columns: 1fr; }

  pre { white-space: pre-wrap; word-break: break-all; }

  /* Dialogs open as a bottom sheet */
  dialog, dialog.wide { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0; max-height: 94dvh; }
  dialog form.d { max-height: 94dvh; }
  .d-head { padding: 16px 16px 4px; }
  .d-head button { width: 44px; height: 44px; margin-right: -8px; }
  .d-body { padding: 8px 16px; }
  .d-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .d-foot .btn { flex: 1; }
  .d-foot [data-danger] { flex: 1 1 100%; order: 3; margin-right: 0 !important; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .steps { padding-left: 18px; }
  .photos { grid-template-columns: repeat(3, 1fr); }
  .photo button { width: 32px; height: 32px; }
  .toast { bottom: calc(18px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); text-align: center; }
  .signin { padding: 16px; align-items: start; padding-top: max(40px, 8vh); }
  .signin-card .inner { padding: 24px 20px; }
  .signin input.code-input { font-size: var(--fs-2xl); min-height: 52px; }
}
@media (max-width: 380px) {
  .kpi b { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── CRM ─────────────────────────────────────────────── */
.kpi b small.per { font-family: var(--body); font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
h3.sub { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 18px 0 4px; font-family: var(--body); }
h3.sub.late, .late { color: var(--bad); }
.late { font-weight: 600; }
.bar { height: 8px; background: var(--line-2); border-radius: var(--r-xs); margin-top: 6px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--r-xs); min-width: 2px; }
.tick { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--ink-3); border-radius: 7px; background: var(--paper); cursor: pointer; padding: 0; position: relative; }
.tick:hover:not(:disabled) { background: var(--accent); }
.tick:disabled { opacity: 0.4; cursor: default; }
.list li.click { cursor: pointer; }
.list li.click:hover { background: #f7f8f9; }
.list.tl li { padding: 12px 0; }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 14px; align-items: start; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.col { background: #e3e6e9; border-radius: var(--r); padding: 10px; min-height: 140px; scroll-snap-align: start; border-top: 4px solid var(--info); }
.col.won { border-top-color: var(--good); }
.col.lost { border-top-color: #9aa0a6; }
.col.over { outline: 2px dashed var(--ink); outline-offset: -2px; background: #fff7cc; }
.col header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 2px 4px 10px; }
.col header h3 { font-size: var(--fs-md); display: flex; align-items: center; gap: 6px; }
.col .none { text-align: center; padding: 18px 0; margin: 0; }
.card-d { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; display: block; }
.card-d:hover { border-color: var(--ink); }
.card-d b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.card-d small { display: block; color: var(--muted); }
.card-d small.late { color: var(--bad); }
.card-d .meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.card-d.stale { border-left: 4px solid var(--warn); }
.card-d.drag { opacity: 0.4; }
.card-d:focus-visible { outline-offset: 0; }

.mini-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.mini-row.cf { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) auto; }
.mini-btns { display: inline-flex; gap: 6px; }

@media (max-width: 820px) {
  .board { grid-auto-columns: 84%; margin: 0 -16px; padding: 0 16px 14px; scroll-padding: 0 16px; }
  .mini-row, .mini-row.cf { grid-template-columns: 1fr 1fr; }
  .mini-row > input[type=text]:first-child { grid-column: span 2; }
  .mini-btns { grid-column: span 2; }
  .tick { width: 30px; height: 30px; }
}

.list li > small.muted { white-space: nowrap; }

/* ── App picker (after sign-in) ─────────────────────────────────── */
.apps-page { min-height: 100vh; min-height: 100dvh; background: var(--ink); color: #fff; padding: 0 16px 48px; position: relative; }
.apps-page::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--spectrum); }
.apps-wrap { max-width: 880px; margin: 0 auto; }
.apps-head { display: flex; align-items: center; gap: 10px; padding: 22px 0; }
.apps-head img { width: 28px; height: 28px; }
.apps-head b { font-family: var(--head); font-weight: 800; letter-spacing: .04em; }
.apps-head .grow { flex: 1; }
.apps-head .who-sm { color: #9a9a9a; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ghost-btn { background: none; border: 1px solid #3b3b3b; color: #ddd; border-radius: 99px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: var(--fs-sm); flex: none; }
.ghost-btn:hover { border-color: #777; color: #fff; }
.apps-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0 22px; }
.apps-title h1 { font-family: var(--head); font-size: clamp(28px, 5vw, 40px); color: #fff; margin: 0; }
.apps-title p { margin: 0; color: #aaa; font-weight: 600; }
.apps-title select { background: var(--ink-3); border: 1px solid #3b3b3b; color: #fff; border-radius: var(--r-sm); padding: 9px 12px; font: inherit; font-weight: 600; min-width: 200px; }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.app-tile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 22px; border-radius: var(--r); background: var(--ink-2); border: 1px solid #2a2a2a; color: #fff; text-decoration: none; transition: transform .2s, border-color .2s, background-color .2s; }
.app-tile .ico { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r); background: var(--c); color: #fff; }
.app-tile .ico svg { width: 26px; height: 26px; }
.app-tile b { font-family: var(--head); font-size: var(--fs-xl); align-self: end; }
.app-tile small { color: #a3a3a3; font-size: var(--fs-md); align-self: start; display: inline-flex; align-items: center; gap: 6px; }
.app-tile small svg { width: 14px; height: 14px; }
.app-tile .go { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #777; transition: transform .2s, color .2s; }
.app-tile .go svg { width: 20px; height: 20px; }
.app-tile:not(.off):hover { transform: translateY(-2px); border-color: var(--c); background: #222; }
.app-tile:not(.off):hover .go { color: #fff; transform: translate(3px, -50%); }
.app-tile.off { background: transparent; border-style: dashed; color: #8a8a8a; }
.app-tile.off .ico { background: #2a2a2a; color: #6f6f6f; filter: grayscale(1); }
.app-tile.off b { color: #8a8a8a; }
.app-tile.off .go.ask { font-size: var(--fs-sm); font-weight: 700; color: #8a8a8a; border: 1px solid #3a3a3a; border-radius: 99px; padding: 4px 10px; opacity: 0; transition: opacity .2s; }
.app-tile.off:hover { border-color: #555; }
.app-tile.off:hover .go.ask, .app-tile.off:focus-visible .go.ask { opacity: 1; color: var(--accent); border-color: var(--accent); }
.admin-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: #aaa; text-decoration: none; font-weight: 600; }
.admin-link svg { width: 18px; height: 18px; } .admin-link:hover { color: #fff; }
@media (max-width: 640px) {
  .app-grid { grid-template-columns: 1fr; }
  .apps-head .who-sm { display: none; }
  .app-tile.off .go.ask { opacity: 1; }
}

/* Sign in with Google / Microsoft / Apple: provider-branded buttons */
a.sso { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; text-decoration: none; }
a.sso:hover { background: #f7f8f8; border-color: #c4c7c5; color: #1f1f1f; }
a.sso svg { width: 18px; height: 18px; flex: none; }
a.sso-apple { background: #000; color: #fff; border-color: #000; } a.sso-apple:hover { background: #1c1c1c; color: #fff; }

.signin-card .btn.primary:hover, .signin-card .btn.primary:focus-visible { background: #ffe14d; border-color: #ffe14d; color: var(--accent-ink); filter: none; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #f1f1ee; border-radius: var(--r); margin-bottom: 14px; }
.seg button { border: 0; background: none; padding: 9px 10px; border-radius: var(--r-sm); font: 600 14px var(--body); color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.seg button:hover:not([aria-selected="true"]) { color: var(--ink); }

/* ── Scan ── */
.scan-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 16px; }
.scan-top .seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper); }
.scan-top .seg button { border: 0; background: none; padding: 9px 14px; font-weight: 600; font-size: var(--fs-md); cursor: pointer; color: var(--muted); }
.scan-top .seg button[aria-selected=true] { background: var(--ink); color: #fff; }
.scan-loc { margin: 0; min-width: 200px; }
.scan-top p { flex-basis: 100%; }
.scan-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.scan-grid .panel + .panel { margin-top: 0; }
.cam-box { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: #111; }
.cam-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-frame { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border: 3px solid var(--accent); border-radius: var(--r); box-shadow: 0 0 0 999px rgba(0,0,0,.25); pointer-events: none; }
.cam-idle { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: #bbb; background: #111; font-size: var(--fs-md); }
.cam-idle svg { width: 40px; height: 40px; }
.scan-typed { display: flex; gap: 8px; margin-top: 12px; }
.scan-typed input { flex: 1; font-size: var(--fs-lg); }
.scan-list-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.scan-list-h h2 { font-size: var(--fs-lg); margin: 0; }
.sline { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2, var(--line)); }
.sline:first-child { border-top: 0; }
.sline.fresh { animation: flash 1s ease; }
@keyframes flash { from { background: #fff6b8; } to { background: transparent; } }
.sline img, .sline .thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; }
.sline .thumb.empty { display: grid; place-items: center; background: var(--ground, #eee); color: var(--muted); }
.sline .thumb.empty svg { width: 20px; height: 20px; }
.sl-name b { display: block; }
.sl-name small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.sl-name b.pos, .sl-name small b.pos { color: var(--good, #1fa85a); }
.sl-name small b.neg { color: var(--bad); }
.sl-qty { display: flex; align-items: center; gap: 4px; }
.sl-qty button { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); font-size: var(--fs-xl); cursor: pointer; }
.sl-qty input { width: 64px; text-align: center; font-size: var(--fs-lg); font-weight: 700; padding: 6px; }
.sl-x { border: 0; background: none; font-size: var(--fs-xl); color: var(--muted); cursor: pointer; padding: 4px 6px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.pick { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
.pick:hover { border-color: var(--ink); }
.pick b { display: block; } .pick small { color: var(--muted); }
@media (max-width: 860px) { .scan-grid { grid-template-columns: 1fr; } .scan-top .seg { width: 100%; } .scan-top .seg button { flex: 1; padding: 10px 6px; } .scan-loc { flex: 1; } }
@media (max-width: 520px) { .sline { grid-template-columns: 40px minmax(0, 1fr) auto; } .sl-qty { grid-column: 2 / 4; } .sl-x { grid-row: 1; grid-column: 3; } .cam-box { aspect-ratio: 1 / 1; } }
.sl-name small b { display: inline; }
@media (max-width: 640px) {
  .cam-box { aspect-ratio: 16 / 10; }
  .scan-grid > * { min-width: 0; max-width: 100%; }
  #camgo, #camstop { flex: 1; justify-content: center; }
  .scan-typed input { padding: 10px 12px; }
  .scan-top { margin-bottom: 12px; }
}
/* Date pickers: iOS gives them a fixed intrinsic width that spills out of narrow grids */
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; }

/* ── CRM: tickets, feed, insights, segments, customers, automations, 360 ── */
.bell { position: relative; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; }
.bell svg { width: 22px; height: 22px; }
.bell i { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff; font: 700 11px/18px var(--body); font-style: normal; display: none; }
.bell.on i { display: block; }
.side-bell { margin: 0 12px 6px; width: calc(100% - 24px); justify-content: flex-start; gap: 10px; background: #1a1a1a; border: 1px solid #2a2a2a; color: #d6d6d6; border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer; font: 600 14px var(--body); }
.side-bell:hover { background: #222; }
.side-bell i { position: static; margin-left: auto; }
.side-bell svg { width: 18px; height: 18px; }
@media (max-width: 900px) { .side-bell { display: none !important; } }
.npanel { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.25); display: flex; justify-content: flex-end; }
.np-card { width: min(420px, 100%); height: 100%; overflow: auto; background: var(--paper); padding: 18px; box-shadow: -10px 0 30px rgba(0,0,0,.15); }
.np-card li a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--text); }
.np-card li.unread a b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info); margin-right: 8px; vertical-align: 1px; }
.np-card li b { font-weight: 600; font-size: var(--fs-md); }
.tabs, .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chips { margin-bottom: 0; }
.tabs a, .chips a { padding: 7px 12px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: var(--fs-md); font-weight: 600; white-space: nowrap; }
.chips.sm a { padding: 4px 10px; font-size: var(--fs-sm); }
.tabs a[aria-selected="true"], .chips a[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs a[aria-selected="true"] .tag { background: #333; color: #fff; }
.list li.click { cursor: pointer; }
.list li.click:hover { background: #fafafa; }
.list li .r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.tlist .r { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; max-width: 50%; }
.convo { margin-top: 4px; }
.convo .msg { display: block; border: 0; border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; }
.convo .msg.reply { background: #eef5fd; }
.convo .msg.note { background: #fff8d6; }
.convo .msg p { margin: 4px 0 0; white-space: pre-wrap; }
.convo .mh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.at { color: var(--s2); }
.seg button[aria-selected="true"] { background: var(--paper); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.grid2.wide-l { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.feed .fi { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.feed .fdot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; }
.feed .fh { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.feed p { margin: 4px 0 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* charts: thin bars, rounded data ends, recessive axes */
.hbars { display: grid; gap: 8px; }
.hb { display: grid; grid-template-columns: minmax(70px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fs-md); }
.hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.hb-t { height: 10px; background: #f1f2f3; border-radius: var(--r-xs); overflow: hidden; }
.hb-t i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hb-v { white-space: nowrap; }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: calc(var(--h) + 22px); border-bottom: 1px solid var(--line); padding-bottom: 0; }
.vb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.vb-col { width: min(30px, 70%); height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.vb-col i { display: block; width: 100%; min-height: 2px; }
.vb-col i:first-child { border-radius: 4px 4px 0 0; }
.vb small { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; white-space: nowrap; height: 18px; }
.vb:hover .vb-col { filter: brightness(.92); }
.legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); }
.stackbar { display: flex; gap: 2px; height: 14px; border-radius: var(--r-xs); overflow: hidden; background: #f1f2f3; }
.stackbar i { display: block; min-width: 4px; }
.hmeter { display: inline-block; width: 64px; height: 8px; border-radius: var(--r-xs); background: #eceef0; overflow: hidden; vertical-align: middle; }
.hmeter i { display: block; height: 100%; border-radius: var(--r-xs); }
.hrow { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.tier { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: var(--r-xs); border: 1px solid; }
.tier.platinum { color: #3b3fb5; border-color: #b9bbe8; background: #f1f1fc; }
.tier.gold { color: #8a6400; border-color: #f0d68a; background: #fff8df; }
.tier.silver { color: #555b62; border-color: #cfd3d8; background: #f5f6f7; }
.tier.bronze { color: #8a4b1c; border-color: #e6c3a6; background: #fbf1e8; }
.custs li { align-items: flex-start; }
.custs .l b a { color: var(--text); }
.nps { font-family: var(--head); font-size: var(--fs-2xl); }
.nps.good { color: var(--good); } .nps.warn { color: var(--warn); } .nps.bad { color: var(--bad); }
.segs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 18px; }
.segcard { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 14px 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.segcard:hover { border-color: var(--ink); }
.segcard .num { font-family: var(--head); font-size: var(--fs-2xl); font-weight: 800; grid-row: span 2; align-self: center; }
.segcard small { grid-column: 1; }
.recipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recipes .panel { margin: 0; }
.rules .r { flex-direction: row; align-items: center; gap: 10px; }
.switch { position: relative; display: inline-block; width: 40px; height: 24px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: #cfd3d8; transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.act-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-bottom: 8px; }
.act-row > select:first-child { width: auto; flex: 0 0 auto; }
.act-row input[type=text] { flex: 1 1 180px; width: auto; }
.act-row select { width: auto; }
.act-row .inl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-md); white-space: nowrap; }
.act-row .inl input { width: 64px; }
.c360-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.c360-grid > div { background: #f7f8f9; border-radius: var(--r-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c360-grid .big { font-family: var(--head); font-size: var(--fs-xl); overflow-wrap: anywhere; }
.nba { margin-top: 12px; background: #fff8d6; border-radius: var(--r-sm); padding: 10px 14px; }
.nba ul { margin: 4px 0 0; padding-left: 18px; }
.cmf { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.cmf textarea { flex: 1; }
@media (max-width: 1100px) { .recipes { grid-template-columns: 1fr; } .c360-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid2.wide-l { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .tlist li, .custs li, .rules li { flex-direction: column; align-items: stretch; }
  .tlist .r, .custs .r, .rules .r { max-width: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; text-align: left; }
  .hb { grid-template-columns: minmax(0, 1fr) auto; }
  .hb-t { grid-column: 1 / -1; grid-row: 2; }
  .tabs, .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; padding: 2px; }
  .np-card { padding-top: calc(18px + env(safe-area-inset-top)); }
  .cmf { flex-direction: column; align-items: stretch; }
  .vb small { font-size: 10px; }
}
.grid2.wide-l { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
@media (max-width: 900px) { .grid2.wide-l { grid-template-columns: minmax(0, 1fr); } }
.list li .l b.at, .at { display: inline !important; }
.topbar .bell { margin-left: auto; }
.rules .l small { display: block; margin-top: 3px; }
.feed .l, .custs .l, .rules .l { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .rules .r { flex-direction: row !important; justify-content: space-between; flex-wrap: nowrap; }
  .rules .mini-btns { flex-wrap: nowrap; }
  .toolbar #who { flex: 1 1 100%; width: 100%; }
}
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: -4px 0 16px; }
.glance a { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); text-decoration: none; font-size: var(--fs-md); }
.glance a:hover { border-color: var(--ink); }
.glance svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
.glance a.bad svg, .glance em { color: var(--bad); font-style: normal; font-weight: 600; }
@media (max-width: 900px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pick-list { display: flex; flex-direction: column; gap: 4px; margin: -6px 0 10px; }
.pick-list button { text-align: left; padding: 8px 10px; border: 1px solid var(--line-2); background: var(--paper); border-radius: var(--r-sm); cursor: pointer; font: inherit; }
.pick-list button:hover { border-color: var(--ink); }
.good-t { color: var(--good); font-weight: 700; }
@media print { .side, .topbar, .no-print, .toast { display: none !important; } .shell { display: block; } .main { margin: 0 !important; } .panel { border: 0; } }
@media (max-width: 640px) {
  table.rt tfoot { display: block; width: 100%; }
  table.rt tfoot tr { display: flex; justify-content: space-between; align-items: center; width: 100% !important; background: var(--ground); border: 0; }
  table.rt tfoot td { display: block; width: auto !important; border: 0; padding: 0; text-align: left; }
  table.rt tfoot td:empty { display: none; }
}
/* When a business has both apps, the Inventory heading marks the switch into the other app */
.nav .group.app-split { color: var(--accent); font-family: var(--head); font-weight: 800; font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; margin-top: 14px; padding-top: 18px; border-top: 1px solid #2a2a2a; }
.doc-tot { text-align: right; margin: 8px 0 0; font-size: var(--fs-md); color: var(--muted); }
.doc-tot b { color: var(--text); }
.doc-sum { max-width: 320px; margin-left: auto; }
.doc-sum li { padding: 6px 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
@media (max-width: 640px) { .checks { grid-template-columns: 1fr; } .doc-sum { max-width: none; } }
/* Team & access */
.team li, .people li { display: block; }
.acc-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 10px; }
.acc-row .acc-f { margin: 0; flex: 1 1 140px; min-width: 0; }
.acc-row .acc-f span { font-size: var(--fs-xs); }
.acc-row .acc-preset { flex: 1 1 170px; width: auto; align-self: flex-end; }
.acc-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pbiz { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); }
@media (max-width: 640px) { .acc-row .acc-f, .acc-row .acc-preset { flex: 1 1 calc(50% - 10px); } }
.acc-row select { width: 100%; min-width: 0; }
.team li > *, .people li > * { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .acc-row .acc-preset { flex-basis: 100%; } .acc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-row .acc-preset { grid-column: 1 / -1; } }
.defs li { gap: 16px; } .defs li > span:last-child { text-align: right; }
@media (max-width: 640px) { .defs li { display: block; } .defs li > span { display: block; text-align: left !important; white-space: normal; } }
.danger-zone { border-color: #f1c9c4; }
.danger-zone .list li { gap: 12px; align-items: center; }
.danger-zone .list li .btn { flex: none; }

/* ── Menu: icon rail with hover flyouts (desktop), grouped accordion (phones) ── */
.rail { display: flex; flex-direction: column; gap: 4px; }
.rl, .ng-btn { display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #c9c9c9; cursor: pointer; text-decoration: none; font: 500 14px var(--body); border-radius: var(--r); }
.rl svg, .ng-btn > svg:first-child { width: 20px; height: 20px; flex: none; }
.rl:hover, .ng-btn:hover, .ng.open > .ng-btn { background: var(--ink-2); color: #fff; }
.rl[aria-current="page"], .ng.cur > .ng-btn { background: var(--accent); color: var(--accent-ink); }
.ng { position: relative; }
.ng-btn .chev { width: 8px; height: 8px; margin: 0 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; opacity: .7; }
.ng-fly a, .ng-fly button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); text-decoration: none; color: #d4d4d4; font: 500 14px var(--body); background: none; border: 0; cursor: pointer; white-space: nowrap; text-align: left; }
.ng-fly a svg, .ng-fly button svg { width: 17px; height: 17px; flex: none; color: var(--gc, #9a9a9a); }
.ng-fly a:hover, .ng-fly button:hover { background: #222226; color: #fff; }
.ng-fly a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ng-fly a[aria-current="page"] svg { color: var(--accent-ink); }
.ng-t { font: 800 11px var(--head); letter-spacing: .08em; text-transform: uppercase; color: var(--gc, #8a8a8a); padding: 4px 10px 6px; }
.me-mail { color: #9a9a9a; font-size: var(--fs-xs); padding: 0 10px 8px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.biz-badge { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; background: #26262b; color: #fff; font: 800 12px var(--head); letter-spacing: .02em; flex: none; }
.ng-biz > .ng-btn { background: none; color: #c9c9c9; }
.ng-biz > .ng-btn:hover, .ng-biz.open > .ng-btn { background: var(--ink-2); }
.ng-biz .ng-fly { max-height: 70vh; overflow-y: auto; }
.side-bell.rl { margin: 0; width: auto; border: 0; background: none; padding: 0; font: 500 14px var(--body); color: #c9c9c9; position: relative; }
.side-bell.rl i { position: absolute; top: 6px; right: 6px; margin: 0; }

@media (min-width: 821px) {
  :root { --side: 76px; }
  .side { overflow: visible; align-items: center; z-index: 30; }
  .side .brand { padding: 16px 0 12px; justify-content: center; }
  .side .brand span { display: none; }
  .rail { align-items: center; padding: 4px 0; }
  .rail-foot { margin-top: auto; padding: 10px 0 14px; border-top: 1px solid var(--ink-3); width: 100%; }
  .rl, .ng-btn { width: 48px; height: 48px; justify-content: center; padding: 0; }
  .rl > span, .ng-btn > span, .ng-btn .chev { display: none; }
  .ng.cur > .ng-btn::after { content: ""; position: absolute; left: -14px; top: 12px; bottom: 12px; width: 3px; border-radius: var(--r-xs); background: var(--accent); }
  .ng-fly { position: absolute; left: 100%; top: -8px; margin-left: 12px; min-width: 210px; padding: 8px; background: #141417; border: 1px solid #2a2a2f; border-radius: var(--r); box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25);
    visibility: hidden; opacity: 0; transform: translateX(-6px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .18s; z-index: 60; }
  .ng-fly::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
  .ng.open > .ng-fly, .ng:focus-within > .ng-fly { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .rl[title]:hover::after { content: attr(title); position: absolute; left: 100%; margin-left: 12px; background: #141417; color: #fff; border: 1px solid #2a2a2f; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; }
  .rl { position: relative; }
}
@media (min-width: 821px) and (hover: hover) {
  .ng:hover > .ng-fly { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
}
@media (max-width: 820px) {
  .rail { padding: 4px 10px; }
  .rail-foot { margin-top: auto; border-top: 1px solid var(--ink-3); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--ink); }
  .rl, .ng-btn { width: 100%; padding: 11px 12px; font-size: var(--fs-md); }
  .ng-fly { display: none; padding: 2px 0 8px 18px; }
  .ng.open > .ng-fly { display: block; }
  .ng.open > .ng-btn .chev { transform: rotate(225deg) translateY(-2px); }
  .ng-t { display: none; }
  .ng-fly a, .ng-fly button { padding: 11px 12px; font-size: var(--fs-md); }
  .ng-me .ng-fly { padding-left: 0; }
  .side-bell.rl i { position: static; margin-left: auto; }
}

/* ══ Design refresh (2026-11): calmer, denser, color only where it means something ══
   Warm grays, six type sizes, three radii, 4px grid. Yellow = the one key action and "you are here". */
:root {
  --ground: #f4f4f1;
  --paper: #ffffff;
  --line: #e2e2dd;
  --line-2: #ececE8;
  --text: #1b1b19;
  --muted: #6b6b65;
  --faint: #9b9b94;
  --ink-2: #1e1e20;
  --ink-3: #2b2b2e;
  --hover: #f7f7f4;
}
body { font-size: var(--fs-md); line-height: 1.5; }
h1 { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.02em; }
h2 { font-family: var(--body); font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.01em; }
h3 { font-family: var(--body); font-size: var(--fs-md); font-weight: 650; }
.page { padding: var(--sp-6) clamp(16px, 3vw, 40px) 64px; max-width: 1280px; }
.page-head { align-items: center; margin-bottom: var(--sp-5); }
.page-head p { font-size: var(--fs-sm); margin-top: 2px; }
.crumb { display: block; font: 600 var(--fs-xs) var(--body); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.crumb b { color: var(--app-c, var(--faint)); font-weight: 700; }

/* Surfaces: hairline borders, no heavy shadows */
.panel { border-color: var(--line); padding: var(--sp-4) var(--sp-5); box-shadow: none; }
.panel + .panel { margin-top: var(--sp-3); }
.panel-head { margin-bottom: var(--sp-3); }
.panel h2 { font-size: var(--fs-md); }

/* Numbers: Stripe-style, big but calm */
.kpis { border-color: var(--line); margin-bottom: var(--sp-3); }
.kpi { padding: var(--sp-3) var(--sp-4); }
.kpi span { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.kpi b { font-family: var(--body); font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; }

/* Buttons */
.btn { padding: 7px 12px; font-size: var(--fs-sm); font-weight: 600; border-color: var(--line); border-radius: var(--r-sm); transition: background .12s, border-color .12s; }
.btn:hover { border-color: #cfcfc8; background: var(--hover); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-3); border-color: var(--ink-3); }
.btn.signal:hover { background: #ffdc2e; border-color: #e6bf00; }
.btn.small { padding: 4px 10px; font-size: var(--fs-xs); }
.btn svg { width: 15px; height: 15px; }

/* Tables: dense, sticky header, row hover */
table { font-size: var(--fs-sm); }
th { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 8px 10px; background: var(--paper); position: sticky; top: 0; z-index: 1; }
td { padding: 8px 10px; }
tbody tr { transition: background .1s; }
tbody tr:hover td { background: var(--hover); }
tr.click { cursor: pointer; }

/* Status tags: soft, specific */
.tag { font-size: var(--fs-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--r-xs); }
.tag.off { background: #efefeb; color: var(--muted); }

/* Inputs */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], input[type=tel], input[type=url], input[type=datetime-local], select, textarea { border-color: var(--line); border-radius: var(--r-sm); }

/* Rail: recedes. Muted icons, no big yellow block; a thin yellow bar marks where you are. */
.side { background: #0c0c0d; }
.rl, .ng-btn { color: #8d8d88; }
.rl:hover, .ng-btn:hover, .ng.open > .ng-btn { background: #1c1c1f; color: #f2f2f0; }
.rl[aria-current="page"], .ng.cur > .ng-btn { background: #1c1c1f; color: #fff; }
.rl svg, .ng-btn > svg:first-child { width: 19px; height: 19px; }
.ng-fly a[aria-current="page"] { background: #24242a; color: #fff; }
.ng-fly a[aria-current="page"] svg { color: var(--accent); }
.ng-fly a[aria-current="page"]::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (min-width: 821px) {
  .rl, .ng-btn { width: 44px; height: 44px; border-radius: var(--r-sm); }
  .rl[aria-current="page"]::before, .ng.cur > .ng-btn::after { content: ""; position: absolute; left: -16px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--accent); }
  .rl[aria-current="page"] { position: relative; }
  .rail { gap: 2px; }
}
@media (max-width: 820px) {
  .rl[aria-current="page"], .ng.cur > .ng-btn { box-shadow: inset 3px 0 0 var(--accent); }
}

/* Command palette */
.cmdk { position: fixed; inset: 0; z-index: 200; background: rgba(12,12,13,.38); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; animation: cmdk-in .12s ease; }
@keyframes cmdk-in { from { opacity: 0; } }
.cmdk-box { width: min(640px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 80px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); }
.cmdk-in svg { width: 18px; height: 18px; color: var(--faint); flex: none; }
.cmdk-in input { flex: 1; border: 0 !important; outline: 0; background: none; font-size: var(--fs-lg) !important; padding: 16px 0; min-height: 0 !important; box-shadow: none !important; }
.cmdk kbd { font: 600 11px var(--body); color: var(--muted); background: var(--ground); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-sec { font: 600 var(--fs-xs) var(--body); color: var(--faint); padding: 10px 10px 4px; }
.cmdk-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-size: var(--fs-md); }
.cmdk-row svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.cmdk-row.on { background: var(--ground); }
.cmdk-row.on svg { color: var(--text); }
.cmdk-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cmdk-h { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 12px; flex: none; max-width: 50%; }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.cmdk-foot { display: flex; gap: 16px; padding: 8px var(--sp-4); border-top: 1px solid var(--line); color: var(--faint); font-size: var(--fs-xs); }
.cmdk-foot kbd { margin-right: 3px; }
body.cmdk-on { overflow: hidden; }
.tb-search { margin-left: auto; }
.tb-search + .bell { margin-left: 0; }
@media (min-width: 821px) { .tb-search { display: none; } }
@media (max-width: 820px) {
  .cmdk { padding: calc(10px + env(safe-area-inset-top)) 10px 10px; }
  .cmdk-box { max-height: 80dvh; }
  .cmdk-foot { display: none; }
  .cmdk-row { padding: 12px 10px; }
}
.tb-search svg { width: 22px; height: 22px; }
.topbar .tb-search { margin-left: auto; }
.topbar .tb-search + .bell { margin-left: 0; }
@media (max-width: 820px) { .page-head { align-items: stretch; } }

/* First-run tour */
.tour { position: fixed; inset: 0; z-index: 300; }
.tour-hit { position: absolute; inset: 0; }
.tour-spot { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(12,12,13,.55), 0 0 0 2px var(--accent); transition: left .35s var(--tour-ease), top .35s var(--tour-ease), width .35s var(--tour-ease), height .35s var(--tour-ease); pointer-events: none; }
.tour { --tour-ease: cubic-bezier(.16,1,.3,1); }
.tour.modal .tour-spot { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgba(12,12,13,.55); }
.tour-card { position: fixed; background: var(--paper); color: var(--text); border-radius: var(--r); padding: var(--sp-5); box-shadow: 0 24px 70px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.1); transition: left .35s var(--tour-ease), top .35s var(--tour-ease); animation: tour-in .3s var(--tour-ease); }
.tour.modal .tour-card { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)) !important; padding: var(--sp-6); text-align: left; }
.tour.modal .tour-card h3 { font-family: var(--head); font-size: var(--fs-xl); letter-spacing: -0.01em; }
@keyframes tour-in { from { opacity: 0; } }
.tour-card h3 { margin: 0 0 6px; font-size: var(--fs-lg); font-weight: 700; }
.tour-card p { margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.5; }
.tour-card kbd { font: 600 11px var(--body); background: var(--ground); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin: 0 1px; color: var(--text); }
.tour-n { font: 600 var(--fs-xs) var(--body); color: var(--faint); margin-bottom: 6px; }
.tour-act { display: flex; align-items: center; gap: 8px; margin-top: var(--sp-4); }
.tour-act .grow { flex: 1; }
.tour-skip { background: none; border: 0; padding: 0; color: var(--muted); font: 500 var(--fs-sm) var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tour-starts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }
.ng.tour-open .ng-fly { visibility: visible !important; opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; animation: none; } }
@media (max-width: 820px) { .tour-card { padding: var(--sp-4); } }

/* Menu icons wear their app's color (soft until hovered or current) */
.ng[style*="--gc"]:not(.ng-biz) > .ng-btn > svg:first-child { color: color-mix(in srgb, var(--gc) 62%, #8d8d88); transition: color var(--d2, .2s); }
.ng[style*="--gc"]:not(.ng-biz) > .ng-btn:hover > svg:first-child, .ng[style*="--gc"].open > .ng-btn > svg:first-child, .ng[style*="--gc"].cur > .ng-btn > svg:first-child { color: var(--gc); }
.ng-fly a svg { color: color-mix(in srgb, var(--gc, #9a9a9a) 80%, #9a9a9a); }
.ng.cur > .ng-btn::after { background: var(--gc, var(--accent)) !important; }
@media (max-width: 820px) { .rl[aria-current="page"], .ng.cur > .ng-btn { box-shadow: inset 3px 0 0 var(--gc, var(--accent)); } }
/* Clock-in timer running: a green pulse on its icon */
.ng.timing > .ng-btn { position: relative; }
.ng.timing > .ng-btn::before { content: ""; position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #1fa85a; box-shadow: 0 0 0 0 rgba(31,168,90,.6); animation: timing 1.8s infinite; }
@keyframes timing { 70% { box-shadow: 0 0 0 7px rgba(31,168,90,0); } 100% { box-shadow: 0 0 0 0 rgba(31,168,90,0); } }

/* Clock-in and Flow shown inside Ops */
.page.embed-page { padding: 0; max-width: none; position: relative; height: 100vh; height: 100dvh; }
.page.embed-page iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ground); opacity: 0; transition: opacity .2s; }
.page.embed-page.loaded iframe { opacity: 1; }
.embed-load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); pointer-events: none; }
.embed-load span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--text); animation: spin .7s linear infinite; }
.page.embed-page.loaded .embed-load { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
body.embed-on { overflow: hidden; }
@media (max-width: 820px) { .page.embed-page { height: calc(100dvh - var(--tb-h, 64px) * 1px); } }

/* Home: customizable cards */
.home-head h1 { font-size: var(--fs-2xl); }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); align-items: start; }
.hc, .hc-wrap > .hc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); min-width: 0; }
.hc-wide, .hc-wrap:has(.hc-wide) { grid-column: 1 / -1; }
.hc header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.hc header h3 { margin: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--muted); flex: 1; }
.hc-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); flex: none; }
.hc-ico svg { width: 15px; height: 15px; }
.hc-go { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--faint); }
.hc-go:hover { background: var(--ground); color: var(--text); }
.hc-go svg { width: 15px; height: 15px; }
.hc-num { font: 650 var(--fs-3xl)/1.1 var(--body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hc-num small { font-size: var(--fs-md); font-weight: 500; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.hc-num.bad { color: #c0392b; } .hc-num.warn { color: #b26a00; }
.hc-sub { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hc-sub.bad { color: #c0392b; } .hc-sub.warn { color: #b26a00; } .hc-sub.good { color: #1f8a4c; }
.hc-spark { display: block; width: 100%; height: 40px; margin-top: var(--sp-3); }
.hc-bars { display: flex; gap: 6px; align-items: flex-end; height: 64px; margin-top: var(--sp-3); }
.hc-bars > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.hc-bars i { display: block; background: color-mix(in srgb, var(--c) 70%, transparent); border-radius: 4px 4px 0 0; }
.hc-bars small { font-size: 10px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.hc-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.hc-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; color: var(--text); }
.hc-list li:last-child a { border-bottom: 0; }
.hc-list a:hover b { text-decoration: underline; }
.hc-l { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hc-l b { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-l small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-l small.bad { color: #c0392b; }
.hc-amt { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.hc-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.hc-apps a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, background .15s; }
.hc-apps a:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 5%, var(--paper)); transform: translateY(-1px); }
.hc-apps .ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; }
.hc-apps .ico svg { width: 20px; height: 20px; }
.hc-apps b { font-size: var(--fs-md); }
.hc-apps small { font-size: var(--fs-xs); color: var(--muted); }
/* Customize mode */
.hc-tip { background: #fffbe6; border: 1px solid #f3e3a1; color: #6b5a12; border-radius: var(--r-sm); padding: 10px 14px; font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
.hc-grid.editing .hc-wrap { position: relative; cursor: grab; }
.hc-grid.editing .hc-wrap > .hc { outline: 2px dashed transparent; transition: outline-color .15s; pointer-events: none; }
.hc-grid.editing .hc-wrap:hover > .hc { outline-color: color-mix(in srgb, var(--c, #999) 40%, transparent); }
.hc-wrap.dragging { opacity: .45; }
.hc-ed { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.hc-ed button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; display: grid; place-items: center; font-size: 18px; line-height: 1; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.hc-ed button svg { width: 14px; height: 14px; }
.hc-ed [data-mv="-1"] svg { transform: rotate(180deg); }
.hc-ed [data-rm]:hover { background: #fdecea; border-color: #f3b8b1; color: #c0392b; }
.hc-add { margin-top: var(--sp-4); }
.hc-add h2 { margin-bottom: var(--sp-3); }
.hc-add { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-2); }
.hc-add h2 { grid-column: 1 / -1; }
.hc-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; font: inherit; color: var(--text); }
.hc-opt:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 5%, var(--paper)); }
.hc-opt > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hc-opt b { font-size: var(--fs-sm); } .hc-opt small { font-size: var(--fs-xs); color: var(--muted); }
.hc-opt > svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
@media (max-width: 820px) { .hc-grid { grid-template-columns: 1fr; } .hc-apps { grid-template-columns: 1fr 1fr; } .hc-apps small { display: none; } }
.hc-grid.editing .hc-go { visibility: hidden; }

/* App picker (Add business, Settings → Modules) */
.app-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.app-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--paper); transition: border-color .15s, background .15s; }
.app-opt:hover { border-color: color-mix(in srgb, var(--c) 40%, var(--line)); }
.app-opt:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, var(--paper)); }
.app-opt input { accent-color: var(--c); width: 16px; height: 16px; flex: none; margin: 0; }
.app-opt .ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--c); color: #fff; flex: none; }
.app-opt .ico svg { width: 16px; height: 16px; }
.app-opt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.app-opt b { font-size: var(--fs-sm); } .app-opt small { font-size: var(--fs-xs); color: var(--muted); }
.slug-hint b { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .app-pick { grid-template-columns: 1fr; } }
.task-tags{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:8px;vertical-align:middle}.task-notes{display:block;margin-top:2px}.task-t{color:inherit;text-decoration:none}.task-t:hover{text-decoration:underline}

/* Marketing → Social */
.soc-nets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.soc-nets .panel { margin: 0; }
.soc-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: inline-grid; place-items: center; background: var(--ground); color: var(--muted); }
.soc-av svg { width: 18px; height: 18px; }
.soc-h { font-size: var(--fs-lg, 18px); margin: 22px 0 10px; display: flex; gap: 8px; align-items: center; }
.soc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.soc-post { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.soc-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.soc-cap { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.soc-targets { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.soc-t { display: block; }
.soc-thumbs { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-thumbs img, .soc-vid, .soc-th { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--ground); }
.soc-vid { display: inline-grid; place-items: center; color: var(--ink-3); }
.soc-vid svg { width: 24px; height: 24px; }
.soc-th { position: relative; display: inline-grid; place-items: center; }
.soc-th img, .soc-th .soc-vid { width: 100%; height: 100%; }
.soc-th button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; cursor: pointer; line-height: 1; }
.soc-thumbs.edit { margin-bottom: 8px; }
.soc-thumbs.edit:empty { display: none; }
.soc-pick { display: flex; flex-direction: column; gap: 8px; }
.soc-f { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.soc-f > span:first-child { font-weight: 600; font-size: var(--fs-sm); }

/* Lead inbox conversation */
.convo .msg.in { background: #f3f3f1; margin-right: 12%; }
.convo .msg.out { background: #eef5fd; margin-left: 12%; }
.convo .msg.auto { background: #fff8d6; margin-left: 12%; }
.convo .msg .mh svg { width: 15px; height: 15px; vertical-align: -2px; }
.tlist li.unread b { font-weight: 700; }
.tlist.ib .r { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }

/* Two-level category fields */
.cat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat2 select[hidden] { display: none; }
.cat2 small { grid-column: 1 / -1; }
.cat-edit { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; }
.cat-edit textarea { width: 100%; font: inherit; }
@media (max-width: 560px) { .cat2 { grid-template-columns: 1fr; } }

/* Marketing → Email and Texts */
.camp h3 { margin: 8px 0 4px; font-size: var(--fs-lg); }
.camp h3 a { color: inherit; text-decoration: none; }
.camp-sub { margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.camp-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.camp-stats span { font-size: var(--fs-xs); color: var(--muted); }
.camp-stats b { display: block; font-family: var(--head); font-size: var(--fs-lg); color: var(--ink); }
.mtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aud { align-items: end; }
.sms-prev { margin: 4px 0 14px; }
.bubble { white-space: pre-wrap; background: #e9f7ef; border: 1px solid #cdebd9; border-radius: 18px 18px 18px 4px; padding: 10px 14px; max-width: 360px; font-size: var(--fs-md); line-height: 1.45; }

/* Email builder v2 */
body.eb-mode #page { max-width: none; padding: 0; }
body.eb-mode .page-head, body.eb-mode .crumb { display: none; }
.eb2 { --eb-ink: #121212; --eb-line: #e6e3dc; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #efede8; }
.eb-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--eb-ink); color: #fff; flex-wrap: nowrap; overflow-x: auto; flex: none; }
.eb-bar > * { flex: none; }
.eb-bar .eb-sp { flex: 1; }
.eb-bar small { color: #a8a6a0; font-size: 12px; }
.eb-bar .eb-title { width: 260px !important; flex: 0 1 260px !important; background: transparent !important; border: 1px solid transparent !important; color: #fff; font: 700 17px var(--head); padding: 6px 10px !important; border-radius: 8px; min-width: 120px; width: 280px; min-height: 0 !important; }
.eb-bar .eb-title:hover, .eb-bar .eb-title:focus { border-color: #3a3a3a !important; background: #1c1c1c !important; outline: none; }
.eb-chip { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: #2a2a2a; color: #cfcdc6; }
.eb-chip.approved { background: #12406e; color: #cfe4fb; }
.eb-sp { flex: 1; }
.eb-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: #e8e6df; cursor: pointer; text-decoration: none; }
.eb-ic:hover { background: #252525; }
.eb-ic svg, .eb-dev svg { width: 19px; height: 19px; }
.eb-dev { display: flex; background: #222; border-radius: 10px; padding: 3px; }
.eb-dev button { border: 0; background: none; color: #a8a6a0; width: 36px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.eb-dev button.on { background: #fff; color: #111; }
.eb-btn { border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; font: 600 14px var(--body); cursor: pointer; background: #fff; color: #111; display: inline-flex; align-items: center; gap: 6px; }
.eb-bar .eb-btn.ghost { background: transparent; color: #fff; border-color: #3a3a3a; }
.eb-bar .eb-btn.ghost:hover { background: #222; }
.eb-btn.go { background: #ffd400; color: #111; font-weight: 700; }
.eb-btn.go:hover { background: #ffe14d; }
.eb-btn.small { padding: 7px 12px; font-size: 13px; background: var(--ink, #111); color: #fff; }
.eb-btn.small.ghost { background: #fff; color: #111; border-color: var(--eb-line); }
.eb-rule { height: 3px; background: linear-gradient(90deg, #7b3fbf, #3b3fb5, #1e7fd8, #1fa85a, #ffd400, #ff8a00, #e63b2e); flex: none; }
.eb-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; }
.eb-side, .eb-insp { background: #fff; overflow-y: auto; min-height: 0; }
.eb-side { border-right: 1px solid var(--eb-line); display: flex; flex-direction: column; }
.eb-insp { border-left: 1px solid var(--eb-line); padding: 18px 20px 40px; }
.eb-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 10px; border-bottom: 1px solid var(--eb-line); position: sticky; top: 0; background: #fff; z-index: 2; }
.eb-tabs button { border: 0; background: none; padding: 8px 4px; border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 600 12px var(--body); color: #6b6962; }
.eb-tabs button svg { width: 20px; height: 20px; }
.eb-tabs button.on { background: #f3f1ec; color: #111; }
.eb-pane { padding: 6px 18px 30px; }
.eb-pane h4, .eb-insp h5 { margin: 18px 0 10px; font: 700 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #8a877f; }
.eb-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.eb-tile { border: 1px solid var(--eb-line); background: #fff; border-radius: 12px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px; font: 600 12px var(--body); color: #2a2a2a; cursor: grab; touch-action: none; user-select: none; transition: transform .12s, box-shadow .12s, border-color .12s; }
.eb-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); border-color: var(--t, #bbb); }
.eb-tile .ti { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 14%, #fff); color: var(--t); }
.eb-tile .ti svg { width: 20px; height: 20px; }
.eb-tiles.lay { grid-template-columns: repeat(2, 1fr); }
.eb-tiles.lay.sm { grid-template-columns: repeat(3, 1fr); margin-bottom: 8px; }
.eb-tile.on { border-color: #1e7fd8; box-shadow: 0 0 0 2px #1e7fd833; }
.lp { display: flex; gap: 4px; width: 64px; height: 34px; }
.lp i { display: block; border-radius: 4px; background: #dfe9f6; border: 1.5px solid #9fc2ea; }
.lp i.img { background: #d9f2e2 linear-gradient(135deg, transparent 55%, #9ad7b0 55%); border-color: #8fd1a7; }
.eb-hint { font-size: 13px; color: #77746c; line-height: 1.5; margin: 14px 0 0; }
.eb-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.eb-theme { border: 1px solid var(--eb-line); background: #fff; border-radius: 12px; padding: 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.eb-theme .sw { display: flex; }
.eb-theme .sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-right: -6px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.eb-theme b { font-size: 14px; }
.eb-theme.on, .eb-theme:hover { border-color: #111; }
.eb-theme.on { box-shadow: 0 0 0 2px #111; }
.eb-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.eb-cl { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.eb-cl input[type=color] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--eb-line); border-radius: 8px; background: none; cursor: pointer; flex: none; }
.eb-f { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.eb-f > span { font-size: 13px; font-weight: 600; color: #2a2a2a; }
.eb-f input[type=text], .eb-f select, .eb-f textarea, .eb-soc input, .eb-adv input { width: 100%; min-height: 40px; font-size: 14px; }
.eb-seg { display: flex; background: #f3f1ec; border-radius: 10px; padding: 3px; gap: 2px; }
.eb-seg button { flex: 1; border: 0; background: none; padding: 7px 6px; border-radius: 8px; font: 600 13px var(--body); color: #6b6962; cursor: pointer; display: grid; place-items: center; }
.eb-seg button.on { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.eb-seg.ic svg { width: 18px; height: 18px; }
.eb-range { display: flex; align-items: center; gap: 10px; }
.eb-range input { flex: 1; accent-color: #111; }
.eb-range b { font-size: 12px; min-width: 42px; text-align: right; color: #6b6962; }
.eb-sws { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eb-sws button, .eb-sws label { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); cursor: pointer; position: relative; padding: 0; }
.eb-sws .on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e7fd8; }
.eb-sws .none { background: #fff linear-gradient(135deg, transparent 46%, #e63b2e 46%, #e63b2e 54%, transparent 54%); }
.eb-sws .cust { background: conic-gradient(#e63b2e, #ffd400, #1fa85a, #1e7fd8, #e63b2e); }
.eb-sws .cust.on { background: var(--c); }
.eb-sws .cust input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.eb-check { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0 0 14px; cursor: pointer; }
.eb-img { border: 2px dashed #d6d3cb; border-radius: 12px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; transition: border-color .15s, background .15s; }
.eb-img.over { border-color: #1fa85a; background: #effaf3; }
.eb-img img { width: 100%; max-height: 160px; object-fit: contain; border-radius: 8px; background: #f3f1ec; }
.eb-img .ph { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #8a877f; font-size: 13px; padding: 14px 0; cursor: pointer; }
.eb-img .ph svg { width: 30px; height: 30px; color: #1fa85a; }
.eb-adv { margin-top: 6px; font-size: 12px; color: #77746c; }
.eb-adv summary { cursor: pointer; }
.eb-adv input { margin-top: 6px; }
.eb-socstyle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.eb-socstyle button { border: 1px solid var(--eb-line); background: #fff; border-radius: 10px; padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eb-socstyle button.on { border-color: #1e7fd8; box-shadow: 0 0 0 2px #1e7fd833; }
.eb-socstyle span { display: flex; gap: 4px; }
.eb-socstyle img { width: 22px; height: 22px; }
.eb-socstyle small { font-size: 12px; color: #6b6962; }
.eb-soc { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eb-soc img { width: 26px; height: 26px; flex: none; }
.eb-ih { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.eb-ih b { font: 700 17px var(--head); flex: 1; }
.eb-ih .ti { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--t) 14%, #fff); color: var(--t); }
.eb-ih .ti svg { width: 19px; height: 19px; }
.eb-x { border: 0; background: #f3f1ec; width: 30px; height: 30px; border-radius: 8px; font-size: 18px; cursor: pointer; color: #6b6962; }
.eb-empty { text-align: left; color: #6b6962; font-size: 14px; line-height: 1.55; padding-top: 10px; }
.eb-empty h3 { color: #111; font-size: 17px; margin: 12px 0 6px; }
.eb-empty ul { padding-left: 18px; margin: 14px 0 0; }
.eb-empty li { margin-bottom: 8px; }
.eb-empty-ic { width: 46px; height: 46px; border-radius: 14px; background: #fff6c2; color: #8a6d00; display: grid; place-items: center; }
.eb-empty-ic svg { width: 24px; height: 24px; }
.eb-stage { overflow-y: auto; min-height: 0; padding: 22px 28px 60px; display: flex; flex-direction: column; align-items: center; background: #efede8 radial-gradient(#dcd9d1 1px, transparent 1px) 0 0 / 18px 18px; }
.eb-inbox { width: 100%; max-width: 680px; background: #fff; border: 1px solid var(--eb-line); border-radius: 14px 14px 0 0; padding: 12px 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.eb-inbox .av { width: 36px; height: 36px; border-radius: 50%; background: #111; color: #ffd400; display: grid; place-items: center; font-weight: 800; flex: none; }
.eb-inbox small { color: #8a877f; }
.eb-paper { width: 100%; max-width: 680px; border: 1px solid var(--eb-line); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.08); transition: max-width .25s; }
.eb-paper.mob { max-width: 390px; }
.eb-inbox:has(+ .eb-paper.mob) { max-width: 390px; }
.eb-paper iframe { width: 100%; border: 0; display: block; min-height: 560px; }
.eb-tb, .eb-tiles, .eb-fmt { user-select: none; -webkit-user-select: none; }
.eb-tb { position: fixed; z-index: 30; display: flex; align-items: center; gap: 2px; background: #1e7fd8; color: #fff; border-radius: 10px; padding: 3px; box-shadow: 0 6px 18px rgba(30,127,216,.35); }
.eb-tb .nm { font: 700 12px var(--body); padding: 0 8px 0 6px; }
.eb-tb button, .eb-tb .grab { width: 30px; height: 30px; border: 0; background: none; color: #fff; border-radius: 7px; cursor: pointer; display: grid; place-items: center; }
.eb-tb button:hover { background: rgba(255,255,255,.18); }
.eb-tb .grab svg { pointer-events: none; }
.eb-tb .grab { cursor: grab; touch-action: none; display: grid; place-items: center; border-radius: 7px; }
.eb-tb .grab:hover { background: rgba(255,255,255,.18); }
.eb-tb button.del:hover { background: #e63b2e; }
.eb-tb svg { width: 17px; height: 17px; }
.eb-fmt { position: fixed; z-index: 31; display: flex; align-items: center; gap: 2px; background: #121212; color: #fff; border-radius: 12px; padding: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.eb-fmt button { min-width: 32px; height: 32px; border: 0; background: none; color: #fff; border-radius: 8px; cursor: pointer; display: grid; place-items: center; font-size: 15px; }
.eb-fmt button:hover { background: #2c2c2c; }
.eb-fmt svg { width: 17px; height: 17px; }
.eb-fmt .sw { min-width: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); margin: 0 2px; }
.eb-fmt .sep { width: 1px; height: 22px; background: #333; margin: 0 4px; }
.eb-fmt select { background: #222; color: #fff; border: 0; border-radius: 8px; height: 32px; font-size: 13px; padding: 0 6px; min-height: 0; width: auto; }
.eb-drop { position: fixed; z-index: 32; background: #1e7fd8; border-radius: 3px; pointer-events: none; box-shadow: 0 0 0 3px rgba(30,127,216,.25); }
.eb-drop.box { background: rgba(30,127,216,.12); border: 2px solid #1e7fd8; box-shadow: none; }
.eb-ghost { position: fixed; z-index: 40; pointer-events: none; background: #111; color: #fff; font: 700 13px var(--body); padding: 8px 12px; border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
body.eb-dragging, body.eb-dragging * { cursor: grabbing !important; user-select: none; }
.eb-pv { display: grid; grid-template-columns: 1fr 390px; gap: 16px; align-items: start; }
.eb-pv iframe { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 1280px) { .eb-body { grid-template-columns: 260px minmax(0, 1fr) 290px; } .eb-bar .eb-btn.ghost[data-a=tpl] { display: none; } }
@media (max-width: 1020px) { .eb-body { grid-template-columns: 240px minmax(0, 1fr); } .eb-insp { position: fixed; right: 0; top: 0; bottom: 0; width: 320px; z-index: 35; box-shadow: -10px 0 30px rgba(0,0,0,.15); } .eb-insp:has(.eb-empty) { display: none; } }
@media (max-width: 700px) { .eb-body { grid-template-columns: 1fr; } .eb-side { display: none; } .eb-pv { grid-template-columns: 1fr; } }

/* ===== v1.1 consistency layer (working.vibriyogn.us first; see VIBRIYOGN Ops master document) =====
   One rule set every page follows, so moving page to page feels like one product. */
/* Page header: label, title, one line of help, actions on the right in a fixed order. */
.page-head { min-height: 64px; margin-bottom: var(--sp-5); }
.page-head h1 { font-size: var(--fs-2xl); line-height: 1.15; }
.page-head p { font-size: var(--fs-md); max-width: 72ch; }
.page-head .crumb { display: block; margin-bottom: 2px; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; }
.page-head .actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.page-head .actions > .btn, .page-head .actions > summary.btn, .page-head .more-menu > summary { min-height: 34px; }
/* The page's main action is always last (right-most) and always the same black button. */
.page-head .actions > .primary, .page-head .actions > .signal { order: 10; }
.page-head .actions > .btn.signal { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-head .actions > .btn.signal:hover { background: var(--ink-3); border-color: var(--ink-3); }
/* "More" menu for a fourth button and beyond. */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary svg { width: 14px; height: 14px; }
.more-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 220px; padding: var(--sp-1); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; gap: 2px; }
.more-pop > .btn { justify-content: flex-start; border-color: transparent; background: transparent; width: 100%; font-weight: 500; }
.more-pop > .btn:hover { background: var(--hover, #f4f4f1); }
/* Record names in tables: bold ink, underline only on hover (no permanently underlined links). */
td a:not(.btn), .list .l > b a, .list a.name { color: var(--ink); text-decoration: none; font-weight: 600; }
td a:not(.btn):hover, .list a.name:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Filter rows: same spacing on every page whether they are pills or dropdowns. */
.tabs, .seg.tabs, .toolbar { margin-bottom: var(--sp-3); }
/* Panels and number strips: one corner radius, one gap. */
.panel, .kpis { border-radius: var(--r); }
.panel + .panel, .kpis + .panel, .kpis + .tabs { margin-top: var(--sp-3); }
@media (max-width: 720px) {
  .page-head { min-height: 0; }
  .page-head .actions { display: grid; }
  .more-pop { left: 0; right: auto; }
}