/* GTINcodes.com 2.0 — design tokens on top of Bootstrap 5.3
   Ink for text and primary actions, one laser-red accent reserved for the scanner line,
   verified green only for ownership states. Digits use a mono face, like the human-readable
   line under a real barcode. */

@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 700; font-display: swap; src: url("../fonts/instrument-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; src: url("../fonts/instrument-sans-latin-ext-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF; src: url("../fonts/instrument-sans-latin-ext-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --ink: #142033;
  --ink-2: #2a3850;
  --slate: #5a6577;
  --rule: #dce1e8;
  --fog: #f2f4f7;
  --paper: #ffffff;
  --laser: #e5372b;
  --verified: #0b7a55;
  --verified-tint: #e3f3ec;
  --warn: #9a5b00;
  --warn-tint: #fdf2dd;

  --bs-body-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-secondary-color: var(--slate);
  --bs-border-color: var(--rule);
  --bs-link-color: var(--ink);
  --bs-link-color-rgb: 20, 32, 51;
  --bs-link-hover-color: var(--ink-2);
  --bs-primary: var(--ink);
  --bs-primary-rgb: 20, 32, 51;
  --bs-success: var(--verified);
  --bs-success-rgb: 11, 122, 85;
  --bs-danger: #c42b20;
  --bs-danger-rgb: 196, 43, 32;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: .75rem;
  --bs-focus-ring-color: rgba(229, 55, 43, .35);
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

[hidden] { display: none !important; }
body { font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; flex: none; }
.mono, .gtin { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: .02em; }
:focus-visible { outline: 3px solid rgba(229, 55, 43, .55); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); border-color: var(--laser); }

/* Type scale (1.333) */
.display-hero { font-size: clamp(2.4rem, 5.2vw, 3.6rem); line-height: 1.04; font-weight: 600; letter-spacing: -.025em; }
h1, .h1 { font-weight: 600; letter-spacing: -.02em; }
h2, .h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
h3, .h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.lead { font-size: 1.2rem; color: var(--slate); max-width: 34em; }
.text-slate { color: var(--slate) !important; }
.measure { max-width: 38em; }

/* Buttons */
.btn { font-weight: 600; border-radius: .55rem; padding: .7rem 1.15rem; }
.btn-sm { padding: .35rem .7rem; }
.btn-ink { --bs-btn-color: #fff; --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2); --bs-btn-active-bg: #0b1422; --bs-btn-active-color: #fff; }
.btn-line { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--rule); --bs-btn-hover-bg: var(--fog); --bs-btn-hover-border-color: #c5ccd6; --bs-btn-hover-color: var(--ink); background: #fff; }
.btn-verified { --bs-btn-color: #fff; --bs-btn-bg: var(--verified); --bs-btn-border-color: var(--verified); --bs-btn-hover-bg: #096545; --bs-btn-hover-color: #fff; }
.form-control, .form-select { border-color: #cbd2dc; padding: .65rem .85rem; border-radius: .55rem; }
.form-label { font-weight: 500; font-size: .94rem; margin-bottom: .3rem; }
.form-text { color: var(--slate); }

/* ---------- Site header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px); position: sticky; top: 0; z-index: 1030; }
.site-header .nav-link { color: var(--ink); font-weight: 500; padding: .5rem .8rem; }
.site-header .nav-link:hover { color: var(--ink-2); text-decoration: underline; }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-mark { width: 30px; height: 22px; }
.brand .tld { color: var(--slate); font-weight: 500; }
.lang-switch .dropdown-toggle { font-weight: 500; }

/* ---------- Hero: the scanner label is the one memorable element ---------- */
.hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.lookup-form { max-width: 34rem; }
.lookup-form .btn { white-space: nowrap; }
.lookup-form .form-control { min-width: 0; }
.lookup-input { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .08em; padding: .85rem 1rem; }
.lookup-hint { font-size: .92rem; color: var(--slate); }
.lookup-hint button { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; background: none; border: 0; padding: 0; font-family: var(--mono); }

.label-card { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 1rem; padding: 2rem 2rem 1.5rem; box-shadow: 0 1px 0 rgba(20,32,51,.04), 0 18px 40px -24px rgba(20,32,51,.35); overflow: hidden; }
.label-card::before { content: ""; position: absolute; inset: 10px; border: 1px dashed #e3e7ed; border-radius: .6rem; pointer-events: none; }
.label-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; color: var(--slate); margin-bottom: 1rem; position: relative; }
.barcode-wrap { position: relative; padding: .25rem 0 0; }
.barcode-wrap svg { width: 100%; height: auto; display: block; }
.scan-line { position: absolute; left: -4%; right: -4%; height: 2px; top: 10%; background: var(--laser); box-shadow: 0 0 12px 2px rgba(229,55,43,.55); opacity: 0; border-radius: 2px; }
.scanning .scan-line { animation: scan 1.1s ease-in-out 1; }
@keyframes scan { 0% { top: 6%; opacity: 0; } 12% { opacity: 1; } 50% { top: 78%; } 88% { opacity: 1; } 100% { top: 6%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scanning .scan-line { animation: none; } }

.owner-line { position: relative; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); min-height: 4.6rem; }
.owner-line .state { display: flex; gap: .65rem; align-items: flex-start; }
.owner-line .state .icon { font-size: 1.35rem; margin-top: .1rem; }
.owner-line strong { display: block; font-size: 1.08rem; }
.state-protected { color: var(--verified); }
.state-unprotected, .state-unassigned { color: var(--warn); }
.state-unknown, .state-invalid { color: var(--slate); }
.owner-line .state p { color: var(--slate); margin: .1rem 0 0; font-size: .95rem; }

.trust-line { margin-top: 1.25rem; color: var(--slate); font-size: .95rem; }
.trust-line .mono { color: var(--ink); }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-fog { background: var(--fog); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.steps li { counter-increment: step; position: relative; padding-top: 3.1rem; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--mono); font-weight: 500; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.1rem; left: 2.9rem; right: -1.3rem; border-top: 1.5px dashed #b9c1cc; }
.steps h3 { font-size: 1.15rem; }
.steps p { color: var(--slate); margin: 0; }

/* Pricing */
.billing-toggle { display: inline-flex; border: 1px solid var(--rule); border-radius: 2rem; padding: .25rem; background: #fff; }
.billing-toggle button { border: 0; background: none; padding: .45rem 1rem; border-radius: 2rem; font-weight: 600; color: var(--slate); }
.billing-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.plan { background: #fff; border: 1px solid var(--rule); border-radius: .9rem; padding: 1.75rem; height: 100%; display: flex; flex-direction: column; }
.plan.featured { border: 2px solid var(--ink); }
.plan .price { font-size: 2.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.plan .per { color: var(--slate); font-size: .95rem; }
.plan ul { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.plan li { display: flex; gap: .55rem; padding: .3rem 0; }
.plan li .icon { color: var(--verified); margin-top: .3rem; }
.plan .bonus { color: var(--verified); font-weight: 600; font-size: .95rem; min-height: 1.5em; }
.plan .tag { font-size: .8rem; font-weight: 600; color: var(--ink); background: var(--fog); border: 1px solid var(--rule); border-radius: 2rem; padding: .15rem .6rem; }

.shop-list { columns: 2 14rem; column-gap: 2rem; list-style: none; padding: 0; }
.shop-list li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 1rem; }

.faq details { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--slate); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--slate); margin: .6rem 0 0; max-width: 46em; }

.site-footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; color: var(--slate); font-size: .94rem; }
.site-footer a { color: var(--slate); }

/* ---------- Home: facts, honest lists, channels, anatomy, compare, guides ---------- */
.facts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: .35rem 2rem; color: var(--slate); font-size: .95rem; }
@media (max-width: 420px) { .facts { grid-template-columns: 1fr; } }
.facts .mono { color: var(--ink); font-weight: 500; }
.label-card .lookup-form { position: relative; max-width: none; }

.ticks, .dashes { list-style: none; padding: 0; margin: 0 0 1rem; }
.ticks li { display: flex; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); }
.ticks li .icon { color: var(--verified); margin-top: .3rem; font-size: 1.1rem; }
.honest { border-left: 3px solid var(--ink); padding: .25rem 0 .25rem 1.5rem; }
.dashes li { position: relative; padding: .45rem 0 .45rem 1.25rem; color: var(--ink-2); }
.dashes li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: .6rem; border-top: 1.5px solid var(--slate); }

.channel-table { background: #fff; border: 1px solid var(--rule); border-radius: .75rem; overflow: hidden; }
.channel-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.fit { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.fit-ok { color: var(--verified); }
.fit-check { color: var(--warn); }
.fit-gs1 { color: var(--slate); }

.anatomy { display: grid; grid-template-columns: max-content max-content max-content 1fr; column-gap: .15em; margin: 1rem 0 1.5rem; font-size: clamp(1.9rem, 6.5vw, 4.75rem); }
.anatomy .digits { grid-row: 1; font-family: var(--mono); letter-spacing: .06em; line-height: 1; padding-bottom: .12em; border-bottom: 3px solid var(--ink); }
.anatomy .d-prefix { grid-column: 1; border-bottom-color: var(--slate); }
.anatomy .d-company { grid-column: 2; }
.anatomy .d-check { grid-column: 3; color: var(--laser); border-bottom-color: var(--laser); }
.anatomy .cap { grid-row: 2; font-size: .9rem; color: var(--slate); padding: .6rem 1.25rem 0 0; width: 0; min-width: 100%; }
.anatomy .cap strong { display: block; color: var(--ink); font-size: .95rem; }
.anatomy .cap:nth-of-type(4) { grid-column: 1; }
.anatomy .cap:nth-of-type(5) { grid-column: 2; }
.anatomy .cap-check { grid-column: 3 / 5; }
@media (max-width: 575.98px) {
  .anatomy { grid-template-columns: max-content max-content max-content 1fr; }
  .anatomy .cap { width: auto; padding-right: 0; grid-column: 1 / -1 !important; }
  .anatomy .cap:nth-of-type(4) { grid-row: 2; } .anatomy .cap:nth-of-type(5) { grid-row: 3; } .anatomy .cap-check { grid-row: 4; }
}
.cd-tool { background: #fff; border: 1px solid var(--rule); border-radius: .9rem; padding: 1.4rem; }
.cd-result { font-size: 1.6rem; margin-bottom: .35rem; }
.cd-result b { color: var(--laser); font-weight: 500; }
.cd-bars svg { max-width: 16rem; width: 100%; height: auto; }
.link-list { list-style: none; padding: 0; }
.link-list li { padding: .45rem 0; border-bottom: 1px solid var(--rule); }

.compare-table { border-top: 2px solid var(--ink); }
.compare-table thead th { font-size: 1rem; color: var(--ink); }
.compare-table th[scope="row"] { color: var(--slate); font-weight: 500; width: 22%; }
.compare-table td { width: 39%; }

.guide-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0 2.5rem; }
.guide-list a { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.guide-list a strong { display: block; font-size: 1.08rem; margin-bottom: .2rem; }
.guide-list a span { color: var(--slate); font-size: .95rem; display: block; }
.guide-list a:hover strong { text-decoration: underline; }

/* ---------- Blog ---------- */
.blog-head { padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; }
.crumbs { font-size: .9rem; color: var(--slate); margin-bottom: 1rem; }
.crumbs a { color: var(--slate); }
.post-meta { color: var(--slate); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-bottom: 4rem; }
@media (min-width: 992px) { .post-layout { grid-template-columns: 15rem minmax(0, 44rem); } }
.toc { font-size: .92rem; }
@media (min-width: 992px) { .toc { position: sticky; top: 5.5rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; } }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: .3rem 0 .3rem .9rem; color: var(--slate); text-decoration: none; line-height: 1.35; }
.toc a:hover { color: var(--ink); }
.prose { font-size: 1.075rem; line-height: 1.72; }
.prose h2 { margin: 2.6rem 0 .9rem; font-size: 1.65rem; scroll-margin-top: 5.5rem; }
.prose h3 { margin: 1.8rem 0 .6rem; font-size: 1.22rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.1rem; }
.prose li { margin-bottom: .35rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.5rem 0; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: .55rem .6rem; text-align: left; vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--ink); }
.prose blockquote { border-left: 3px solid var(--rule); padding: .2rem 0 .2rem 1.2rem; color: var(--ink-2); font-style: italic; }
.prose code { font-family: var(--mono); font-size: .92em; color: var(--ink); background: var(--fog); padding: .05rem .3rem; border-radius: .25rem; }
.prose .callout { border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: .5rem; padding: 1rem 1.2rem; margin: 1.5rem 0; background: #fff; }
.prose .callout.warning { border-left-color: var(--warn); background: var(--warn-tint); }
.prose .callout > :last-child { margin-bottom: 0; }
.takeaways { background: var(--fog); border-radius: .75rem; padding: 1.25rem 1.4rem; margin-bottom: 2rem; }
.takeaways ul { margin: 0; padding-left: 1.1rem; }
.post-faq details { border-bottom: 1px solid var(--rule); padding: .9rem 0; }
.post-faq summary { font-weight: 600; cursor: pointer; }
.post-cta { border: 1px solid var(--rule); border-radius: .9rem; padding: 1.5rem; margin-top: 3rem; display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.blog-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.blog-filter a { border: 1px solid var(--rule); border-radius: 2rem; padding: .3rem .85rem; text-decoration: none; color: var(--ink); font-size: .92rem; }
.blog-filter a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; }
.footer-cols h2 { font-size: .95rem; color: var(--ink); margin-bottom: .6rem; letter-spacing: 0; }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { padding: .2rem 0; }

/* Verify page result */
.result-panel { border: 1px solid var(--rule); border-radius: 1rem; padding: 1.75rem; background: #fff; }
.result-panel.protected { border-color: var(--verified); background: linear-gradient(var(--verified-tint), #fff 60%); }

/* ---------- Account + admin shells ---------- */
.shell { display: grid; grid-template-columns: 15.5rem 1fr; min-height: 100vh; }
.shell-nav { background: var(--fog); border-right: 1px solid var(--rule); padding: 1.25rem .85rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.shell-nav .brand { padding: .25rem .6rem 1.25rem; }
.shell-nav .nav-link { color: var(--ink); border-radius: .5rem; padding: .5rem .65rem; display: flex; gap: .6rem; align-items: center; font-weight: 500; }
.shell-nav .nav-link:hover { background: #e6e9ef; text-decoration: none; }
.shell-nav .nav-link.active { background: #fff; box-shadow: inset 0 0 0 1px var(--rule); font-weight: 600; }
.shell-nav .nav-group { font-size: .8rem; color: var(--slate); padding: 1.1rem .65rem .35rem; font-weight: 500; }
.shell-main { padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; min-width: 0; }
.shell-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.shell-top h1 { font-size: 1.6rem; margin: 0; }
@media (max-width: 991.98px) {
  .shell { grid-template-columns: 1fr; }
  .shell-nav { position: static; height: auto; display: none; }
  .shell-nav.show { display: block; }
}

.impersonation-bar { background: var(--laser); color: #fff; padding: .55rem 1rem; display: flex; justify-content: center; gap: 1rem; align-items: center; font-weight: 500; position: sticky; top: 0; z-index: 1040; }
.impersonation-bar .btn { --bs-btn-padding-y: .2rem; background: #fff; color: var(--laser); border: 0; }
.staging-bar { background: #fff4e5; color: var(--warn); border-bottom: 1px solid #f3dcb5; font-size: .88rem; padding: .35rem 1rem; text-align: center; }

.panel { background: #fff; border: 1px solid var(--rule); border-radius: .8rem; padding: 1.25rem 1.35rem; }
.panel + .panel { margin-top: 1.25rem; }
.panel-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 .9rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.kpi { border: 1px solid var(--rule); border-radius: .8rem; padding: 1rem 1.1rem; background: #fff; height: 100%; }
.kpi .v { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-feature-settings: "tnum"; }
.kpi .l { color: var(--slate); font-size: .9rem; }
.kpi.alert-kpi { border-color: #f0c8c4; background: #fff7f6; }

.table { --bs-table-color: var(--ink); font-size: .94rem; }
.table > :not(caption) > * > * { padding: .6rem .65rem; border-bottom-color: var(--rule); }
.table thead th { font-weight: 600; color: var(--slate); font-size: .85rem; border-bottom-width: 1px; white-space: nowrap; }
.table-hover tbody tr:hover > * { background: #f7f8fa; }
.row-link { cursor: pointer; }

.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; border-radius: 2rem; padding: .12rem .6rem; border: 1px solid transparent; white-space: nowrap; }
.pill-ok { background: var(--verified-tint); color: var(--verified); }
.pill-warn { background: var(--warn-tint); color: var(--warn); }
.pill-bad { background: #fdeceb; color: #b3261e; }
.pill-muted { background: var(--fog); color: var(--slate); border-color: var(--rule); }

.protect-banner { border-radius: 1rem; padding: 1.5rem 1.6rem; display: flex; gap: 1.25rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.protect-banner.off { background: var(--ink); color: #fff; }
.protect-banner.off p { color: #c9d1dd; }
.protect-banner.on { background: var(--verified-tint); border: 1px solid #bfe3d3; }
.protect-banner h2 { font-size: 1.35rem; margin: 0 0 .25rem; }
.protect-banner p { margin: 0; }

.auth-wrap { min-height: calc(100vh - 4.5rem); display: grid; place-items: center; padding: 2.5rem 1rem; }
.auth-card { width: 100%; max-width: 27rem; }
.auth-card .divider { display: flex; align-items: center; gap: .75rem; color: var(--slate); font-size: .88rem; margin: 1.5rem 0; }
.auth-card .divider::before, .auth-card .divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.dl-grid { display: grid; grid-template-columns: 10rem 1fr; gap: .35rem 1rem; margin: 0; }
.dl-grid dt { color: var(--slate); font-weight: 400; }
.dl-grid dd { margin: 0; overflow-wrap: anywhere; }

.email-frame { width: 100%; height: 70vh; border: 1px solid var(--rule); border-radius: .6rem; background: #fff; }
.qr-box { width: 200px; height: 200px; }
.qr-box svg { width: 100%; height: 100%; }
.secret { font-family: var(--mono); letter-spacing: .12em; word-break: break-all; }

/* Keep the sidebar colour running the full page height on long pages */
@media (min-width: 992px) {
  .shell { background: linear-gradient(to right, var(--fog) 15.5rem, var(--rule) 15.5rem, var(--rule) calc(15.5rem + 1px), transparent calc(15.5rem + 1px)); }
}

@media (max-width: 575.98px) {
  .channel-table thead { display: none; }
  .channel-table tr { display: grid; grid-template-columns: 1fr auto; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
  .channel-table th[scope="row"], .channel-table td { display: block; border: 0; white-space: normal; }
  .channel-table td.small { grid-column: 1 / -1; padding-top: 0; }
  .compare-table th[scope="row"] { width: auto; }
}
@media (max-width: 767.98px) { .steps li::after { display: none; } }

.goal-bar { height: .75rem; background: var(--fog); border: 1px solid var(--rule); border-radius: 1rem; overflow: hidden; }
.goal-bar span { display: block; height: 100%; background: var(--verified); border-radius: 1rem; min-width: .5rem; }

/* ---- Support inbox ---------------------------------------------------- */
.sp { display: grid; grid-template-columns: 320px minmax(0, 1fr) 260px; gap: 0; height: calc(100vh - 7.5rem); min-height: 520px; background: #fff; border: 1px solid var(--rule); border-radius: .75rem; overflow: hidden; }
.sp-col { display: flex; flex-direction: column; min-height: 0; }
.sp-listcol { border-right: 1px solid var(--rule); background: #fbfcfd; }
.sp-search { display: flex; gap: .4rem; padding: .6rem; border-bottom: 1px solid var(--rule); }
.sp-search select { max-width: 120px; }
.sp-views { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); font-size: .82rem; }
.sp-views a { text-decoration: none; padding: .15rem .5rem; border-radius: 999px; color: var(--slate); }
.sp-views a.on { background: var(--ink); color: #fff; }
.sp-count { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 999px; background: #e8ecf1; color: var(--ink); font-size: .75rem; text-align: center; }
.sp-views a.on .sp-count { background: rgba(255,255,255,.2); color: #fff; }
.sp-list { overflow-y: auto; flex: 1; }
.sp-item { display: block; padding: .65rem .75rem; border-bottom: 1px solid #eef1f4; text-decoration: none; color: var(--ink); }
.sp-item:hover { background: #f3f6f9; }
.sp-item.on { background: #e9f0fb; }
.sp-item.unread .sp-who::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #2563eb; margin-right: .4rem; vertical-align: middle; }
.sp-item.unread .sp-who { font-weight: 700; }
.sp-item-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.sp-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-time { color: var(--slate); font-size: .75rem; white-space: nowrap; }
.sp-preview { color: var(--slate); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .1rem; }
.sp-tags { display: flex; gap: .25rem; margin-top: .3rem; flex-wrap: wrap; }
.sp-tag { font-size: .7rem; padding: .05rem .4rem; border-radius: .3rem; background: #eef1f4; color: var(--slate); }
.sp-tag-ai { background: #efe9fe; color: #6d28d9; }
.sp-empty { padding: 2rem 1rem; color: var(--slate); text-align: center; }
.sp-conv { min-width: 0; }
.sp-none { align-items: center; justify-content: center; text-align: center; }
.sp-head { display: flex; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.sp-head select { max-width: 150px; }
.sp-title { font-weight: 700; }
.sp-thread { flex: 1; overflow-y: auto; padding: 1rem; background: #f7f8fa; }
.sp-msg { display: flex; flex-direction: column; margin-bottom: .75rem; max-width: 78%; }
.sp-msg .sp-bubble { padding: .6rem .8rem; border-radius: .8rem; background: #fff; border: 1px solid #e3e7ec; overflow-wrap: anywhere; font-size: .93rem; line-height: 1.5; }
.sp-msg .sp-meta { font-size: .72rem; color: var(--slate); margin-top: .2rem; }
.sp-customer { align-items: flex-start; }
.sp-agent, .sp-ai, .sp-note { margin-left: auto; align-items: flex-end; }
.sp-agent .sp-bubble { background: #1f3b64; color: #fff; border-color: #1f3b64; }
.sp-agent .sp-bubble a { color: #cfe0ff; }
.sp-ai .sp-bubble { background: #f3efff; border-color: #e4dafe; }
.sp-note .sp-bubble { background: #fff8db; border-color: #f3e3a1; }
.sp-system { max-width: 100%; align-items: center; }
.sp-sys { font-size: .78rem; color: var(--slate); text-align: center; padding: .2rem .6rem; }
.sp-file { margin-top: .4rem; }
.sp-file img { max-width: 220px; max-height: 180px; border-radius: .4rem; display: block; }
.sp-typing { font-size: .8rem; color: var(--slate); font-style: italic; }
.sp-reply { border-top: 1px solid var(--rule); padding: .7rem 1rem; background: #fff; }
.sp-reply textarea { resize: vertical; }
.sp-reply.note textarea { background: #fffbe8; }
.sp-tabs { display: flex; gap: 1rem; align-items: center; font-size: .85rem; margin-bottom: .4rem; }
.sp-side { border-left: 1px solid var(--rule); padding: .8rem; overflow-y: auto; font-size: .88rem; }
.sp-side h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin: 1rem 0 .4rem; }
.sp-side h3:first-child { margin-top: 0; }
.sp-mini { list-style: none; padding: 0; margin: 0; }
.sp-mini li { padding: .25rem 0; border-bottom: 1px solid #f0f2f5; font-size: .82rem; }
@media (max-width: 1200px) { .sp { grid-template-columns: 280px minmax(0, 1fr); } .sp-side { display: none; } }
@media (max-width: 760px) { .sp { grid-template-columns: 1fr; height: auto; } .sp-listcol { max-height: 45vh; } .sp-conv { min-height: 70vh; } }
.nav-badge { margin-left: auto; background: #dc3545; color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .45rem; min-width: 1.3rem; text-align: center; }
/* support: translation */
.sp-orig { margin-top: .4rem; font-size: .8rem; }
.sp-orig summary { cursor: pointer; opacity: .7; list-style: none; }
.sp-orig summary::-webkit-details-marker { display: none; }
.sp-orig summary::before { content: "🌐 "; }
.sp-orig[open] summary { margin-bottom: .3rem; }
.sp-orig > div { border-top: 1px dashed currentColor; padding-top: .35rem; opacity: .85; }
.sp-tr { font-size: .85rem; }
.sp-kn-text { white-space: pre-wrap; font-size: .82rem; max-height: 18rem; overflow: auto; background: #f6f7f9; border-radius: .5rem; padding: .6rem .8rem; }
.sp-tabs { flex-wrap: wrap; row-gap: .3rem; } .sp-tabs label { white-space: nowrap; }

/* ---------- Insights ---------- */
.ins-sources { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-bottom: .9rem; }
.ins-src { background: #ecfdf3; color: #14532d; border-radius: 999px; padding: .15rem .6rem; }
.ins-src.off { background: #fef3c7; color: #78350f; }
.ins-log { white-space: pre-wrap; font-size: .75rem; max-width: 60rem; background: #f8fafc; padding: .5rem; border-radius: .4rem; }
.ins-tabs { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .8rem; }
.ins-tabs a { padding: .3rem .65rem; border-radius: .45rem; color: var(--ink); text-decoration: none; font-size: .875rem; }
.ins-tabs a.on { background: var(--ink); color: #fff; }
.ins-list { display: grid; gap: .6rem; }
.ins-item { background: #fff; border: 1px solid var(--rule); border-radius: .7rem; padding: .8rem 1rem; }
.ins-item h2 { font-size: 1rem; margin: .35rem 0 .3rem; }
.ins-item.ins-doing { border-left: 4px solid #2563eb; }
.ins-item.ins-done, .ins-item.ins-dismissed { opacity: .7; }
.ins-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ins-actions { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ins-actions input { max-width: 20rem; }
.pill-bad { background: #fee2e2; color: #991b1b; }
.pill-muted { background: #f1f5f9; color: #334155; }

/* ---------- Compact admin (2026-10) ---------- */
.shell { grid-template-columns: 13.5rem 1fr; }
.shell-nav { padding: .9rem .6rem; font-size: .875rem; }
.shell-nav .brand { padding: .15rem .5rem .8rem; }
.shell-nav .nav { gap: 0 !important; }
.shell-nav .nav-link { padding: .3rem .55rem; gap: .5rem; border-radius: .4rem; }
.shell-nav .nav-link .icon { width: .95rem; height: .95rem; opacity: .75; }
.shell-nav .nav-group { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .8rem .55rem .2rem; }
.shell-main { padding: 1.1rem clamp(.85rem, 2vw, 1.75rem) 2.5rem; font-size: .925rem; }
.shell-top { margin-bottom: .9rem; }
.shell-top h1 { font-size: 1.3rem; }
.shell-main .panel { padding: .9rem 1rem; border-radius: .6rem; }
.shell-main .panel + .panel { margin-top: .9rem; }
.shell-main .panel-title { font-size: .95rem; margin-bottom: .6rem; }
.shell-main .kpi { padding: .7rem .85rem; border-radius: .6rem; }
.shell-main .kpi .v { font-size: 1.35rem; }
.shell-main .kpi .l { font-size: .8rem; }
.shell-main .table { font-size: .875rem; }
.shell-main .table > :not(caption) > * > * { padding: .4rem .5rem; }
.shell-main .table thead th { font-size: .75rem; }
.shell-main .btn:not(.btn-sm):not(.btn-lg) { padding: .38rem .8rem; font-size: .875rem; }
.shell-main .form-control:not(.form-control-sm), .shell-main .form-select:not(.form-select-sm) { padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; }
.shell-main .form-label { margin-bottom: .2rem; font-size: .85rem; }
.shell-main .alert { padding: .55rem .85rem; }
.shell-main .btn-sm { padding: .22rem .55rem; font-size: .8rem; border-radius: .4rem; }
.shell-main .form-control-sm, .shell-main .form-select-sm { padding-top: .2rem; padding-bottom: .2rem; font-size: .82rem; min-height: 0; }
.shell-main .input-group-sm > .form-select { min-width: 4.8rem; }
@media (max-width: 991.98px) { .shell { grid-template-columns: 1fr; } }

/* ---------- Money ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.kpis .kpi { display: flex; flex-direction: column; gap: .1rem; }
.kpis .kpi > span { color: var(--slate); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.kpis .kpi > b { font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; font-feature-settings: "tnum"; }
.kpis .kpi > small { color: var(--slate); font-size: .78rem; }
.kpis .kpi.ok > b { color: #15803d; } .kpis .kpi.bad > b { color: #b3261e; }
.money-chart { width: 100%; height: auto; display: block; }
.money-chart .b-rev { fill: #16a34a; } .money-chart .b-ads { fill: #f97316; } .money-chart .b-fix { fill: #cbd5e1; }
.money-chart .ax { font-size: 11px; fill: #64748b; }
.money-chart g:hover rect { opacity: .8; }
.lg { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; vertical-align: -1px; }
.lg-rev { background: #16a34a; } .lg-ads { background: #f97316; } .lg-fix { background: #cbd5e1; }

/* ---------- Admin layout fixes (2026-10-16) ---------- */
/* the full-height sidebar colour follows the compact width (was still drawn at 15.5rem) */
@media (min-width: 992px) {
  .shell { background: linear-gradient(to right, var(--fog) 13.5rem, var(--rule) 13.5rem, var(--rule) calc(13.5rem + 1px), transparent calc(13.5rem + 1px)); }
  .shell-nav { border-right: 0; scrollbar-width: thin; scrollbar-color: #cdd3dc transparent; }
}
.shell-nav::-webkit-scrollbar { width: 6px; }
.shell-nav::-webkit-scrollbar-thumb { background: #cdd3dc; border-radius: 3px; }
.shell-nav::-webkit-scrollbar-track { background: transparent; }
/* dashboard: shop links */
.shop-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.shop-links li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.shop-links li > a, .shop-links li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-links .btn { margin-left: auto; flex: none; }
/* tables never push the page sideways: they scroll inside their panel */
.shell-main .panel { min-width: 0; }
.shell-main .table-responsive, .shell-main .panel > .table, .shell-main .panel > table { max-width: 100%; }
@media (max-width: 991.98px) {
  .shell-main .panel:has(> table), .shell-main .panel:has(> .table) { overflow-x: auto; }
  .shell-main { padding: .9rem .75rem 2rem; }
  .shell-top h1 { font-size: 1.15rem; }
  .shell-nav { border-right: 0; border-bottom: 1px solid var(--rule); }
}
.shell-main .text-break, .shell-main .panel p, .shell-main .panel li { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .shell-main .ins-actions input { max-width: 100%; flex: 1 1 100%; } }
.report-frame { display: block; width: 100%; height: 2000px; border: 1px solid var(--rule); border-radius: .5rem; background: #f2f4f7; }
@media (max-width: 575.98px) { .report-frame { height: 2300px; } }

/* ---------- Seasonal themes (admin) ---------- */
.season-list { display: grid; gap: .7rem; }
.season-row.is-on { box-shadow: inset 3px 0 0 #15803d; }
.season-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.season-name { flex: 1; min-width: 12rem; }
.season-mode { width: auto; min-width: 13rem; }
.season-swatch { width: 2.4rem; height: 2.4rem; border-radius: .5rem; flex: none; border: 1px solid rgba(0,0,0,.08); }
.sw-black_friday { background: linear-gradient(135deg, #0b0b0c 60%, #ffd60a 60%); }
.sw-cyber_monday { background: linear-gradient(135deg, #0a1f44 60%, #22d3ee 60%); }
.sw-singles_day { background: linear-gradient(135deg, #c8102e 60%, #ffd166 60%); }
.sw-christmas { background: linear-gradient(135deg, #0f4d2e 60%, #e63946 60%); }
.sw-new_year { background: linear-gradient(135deg, #14213d 60%, #fca311 60%); }
.sw-valentines { background: linear-gradient(135deg, #9d174d 60%, #fbcfe8 60%); }
.sw-easter { background: linear-gradient(135deg, #fef3c7 60%, #84cc16 60%); }
.sw-summer { background: linear-gradient(135deg, #0e7490 60%, #fde047 60%); }
.sw-back_to_school { background: linear-gradient(135deg, #facc15 60%, #1d4ed8 60%); }
.sw-halloween { background: linear-gradient(135deg, #1c1917 60%, #f97316 60%); }
.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem 1rem; margin-top: .7rem; }
.season-prev .btn { margin: 0 .3rem .3rem 0; }
.season-texts { display: grid; gap: .35rem; margin-top: .5rem; }
.season-lang { display: grid; grid-template-columns: 2.4rem minmax(0, 14rem) minmax(0, 1fr); gap: .4rem; align-items: center; }
@media (max-width: 575.98px) { .season-lang { grid-template-columns: 2.4rem 1fr; } .season-lang input:last-child { grid-column: 2; } .season-mode { width: 100%; } }
.season-save { position: sticky; bottom: 0; background: linear-gradient(transparent, #fff 35%); padding: 1rem 0 .5rem; margin-top: .5rem; }

/* ---------- Redirects & 404 ---------- */
.rd-add { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.rd-table .rd-c { width: 2rem; }
.rd-table .rd-to { min-width: 14rem; }
@media (max-width: 767.98px) { .rd-add { grid-template-columns: 1fr; } .rd-add > span { display: none; } }

/* ---------- Period picker + charts ---------- */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.period-presets { display: inline-flex; flex-wrap: wrap; background: var(--fog); border: 1px solid var(--rule); border-radius: .5rem; padding: .15rem; gap: .1rem; }
.period-presets button, .period-custom > summary { border: 0; background: transparent; padding: .28rem .6rem; border-radius: .38rem; font: inherit; font-size: .82rem; color: var(--slate); cursor: pointer; white-space: nowrap; }
.period-presets button:hover, .period-custom > summary:hover { background: #fff; color: var(--ink); }
.period-presets button.on, .period-custom > summary.on { background: var(--ink); color: #fff; font-weight: 600; }
.period-custom { position: relative; }
.period-custom > summary { list-style: none; border: 1px solid var(--rule); background: #fff; }
.period-custom > summary::-webkit-details-marker { display: none; }
.period-dates { position: absolute; z-index: 20; top: calc(100% + .3rem); left: 0; display: flex; gap: .35rem; align-items: center; background: #fff; border: 1px solid var(--rule); border-radius: .5rem; padding: .5rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); white-space: nowrap; }
.period-dates input { width: 9.5rem; }
.period > select { width: auto; }
.period-label { margin-bottom: .8rem; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: .9rem; margin-bottom: .9rem; }
.chart-grid > .panel { margin: 0 !important; }
.chart-card { min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--slate); margin-bottom: .25rem; }
.chart-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: .35rem; }
.chart-legend i.dash { border-top-style: dashed; }
figure.chart { margin: 0; position: relative; }
.chart-plot { position: relative; width: 100%; }
.chart-plot svg { display: block; overflow: visible; }
.chart-plot .c-grid { stroke: #ecebe7; stroke-width: 1; }
.chart-plot .c-zero { stroke: #c9c8c2; stroke-width: 1; }
.chart-plot .c-ylab, .chart-plot .c-xlab { fill: #6b6a64; font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-plot .c-cross { stroke: #9a998f; stroke-width: 1; }
.chart-plot rect[tabindex]:focus { outline: none; }
.chart-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--rule); border-radius: .45rem; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); padding: .45rem .6rem; font-size: .78rem; min-width: 9rem; z-index: 5; }
.chart-tip .tt-h { color: var(--slate); margin-bottom: .2rem; }
.chart-tip .tt-r { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.chart-tip .tt-k { display: inline-block; width: 12px; border-top: 2px solid; }
.chart-tip .tt-k.dash { border-top-style: dashed; }
.chart-tip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.chart-tip .tt-n { color: var(--slate); }
.chart-table summary { color: var(--slate); cursor: pointer; margin-top: .3rem; }
.kpi .delta, .delta { font-size: .75rem; font-weight: 700; color: var(--slate); margin-left: .35rem; white-space: nowrap; }
.delta.up { color: #0f7b4a; } .delta.down { color: #c0392b; }
@media (max-width: 575.98px) { .period-dates { position: static; flex-wrap: wrap; box-shadow: none; } .period-dates input { width: 8.5rem; } }
.period > select { min-width: 9.5rem; }

/* traffic source of an order: a dot in the group colour (colour never alone: the label says it) */
.src{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.src::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--src,#c9c8c0)}
.src-paid{--src:#eb6834}.src-seo{--src:#2a78d6}.src-ai{--src:#eda100}.src-direct{--src:#1baf7a}.src-other{--src:#9a998f}.src-unknown{--src:#d6d5cf}
.src-bar{display:flex;gap:2px;height:.6rem;margin:.25rem 0 .9rem;border-radius:4px;overflow:hidden}
.src-bar span{background:var(--src);min-width:2px}
.src-table tr[data-href]{cursor:pointer}
.src-table a{color:inherit;text-decoration:none}
.src-table .src-sub td{color:var(--slate,#5b6672)}

/* shop health */
.health-sum{display:flex;gap:.8rem;align-items:center;padding:.9rem 1.1rem;border-radius:12px;margin-bottom:1rem;border:1px solid}
.health-sum .icon{width:1.5rem;height:1.5rem;flex:none}
.health-sum.is-ok{background:#ecf8f2;border-color:#bfe6d2;color:#0f5c3f}
.health-sum.is-bad{background:#fdf0ee;border-color:#f3c7c0;color:#8c1d12}
.health-table tr.hs-first td{border-top:2px solid var(--line,#e6e5df)}
.health-table tbody tr:first-child td{border-top:0}
.health-log{list-style:none;padding:0;margin:0;max-height:22rem;overflow:auto}
.health-log li{padding:.45rem 0 .45rem .9rem;border-bottom:1px solid var(--line,#e6e5df);position:relative}
.health-log li::before{content:"";position:absolute;left:0;top:.85rem;width:.45rem;height:.45rem;border-radius:50%;background:#1baf7a}
.health-log li.down::before{background:#d92d20}

/* funnel */
.fn-steps{display:grid;gap:.7rem}
.fn-step{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr 9rem;gap:1rem;align-items:center}
.fn-bar{height:1.6rem;background:#f3f2ee;border-radius:4px;overflow:hidden}
.fn-bar span{display:block;height:100%;background:#2a78d6;border-radius:0 4px 4px 0}
.fn-step:first-child .fn-bar span{background:#9fc2ec}
.fn-step:last-child .fn-bar span{background:#1baf7a}
.fn-v{text-align:right;font-feature-settings:"tnum"}
.kpis.kpis-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){
  .fn-step{grid-template-columns:1fr auto;gap:.3rem .8rem}
  .fn-bar{grid-column:1 / -1;grid-row:2}
  .kpis.kpis-3{grid-template-columns:1fr}
}

/* account: company details before the first invoice */
.inv-dialog { border: 0; border-radius: 14px; padding: 1.4rem; max-width: 560px; width: calc(100% - 2rem); box-shadow: 0 20px 60px rgba(15, 23, 42, .25); }
.inv-dialog::backdrop { background: rgba(15, 23, 42, .45); }

/* account: free codes for a review */
.rv-shop { border: 1px solid var(--rule, #e6e5df); border-radius: 12px; padding: .9rem 1rem; margin-top: .7rem; }
.rv-steps { margin: .6rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }

/* support inbox: the six filters as a clear list, the rest under it */
.sp-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: .5rem; border-bottom: 1px solid var(--rule); }
.sp-filters a { display: flex; align-items: center; gap: .45rem; padding: .4rem .55rem; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: .85rem; font-weight: 500; }
.sp-filters a:hover { background: #eef1f4; }
.sp-filters a.on { background: var(--ink); color: #fff; }
.sp-filters a .icon { opacity: .7; flex: none; }
.sp-filters a span:first-of-type { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-filters .sp-count { font-variant-numeric: tabular-nums; }
.sp-filters .sp-count.zero { opacity: .45; background: transparent; }
.sp-filters a.on .sp-count { background: rgba(255,255,255,.2); color: #fff; }
.sp-more { display: flex; flex-wrap: wrap; gap: .15rem .7rem; padding: .35rem .9rem .5rem; border-bottom: 1px solid var(--rule); color: var(--slate); }
.sp-more a { color: var(--slate); text-decoration: none; }
.sp-more a:hover, .sp-more a.on { color: var(--ink); text-decoration: underline; }