/*
 * Akomio application stylesheet.
 *
 * F12: this used to be a ~16 KB <style> block inlined into every single
 * page response - roughly half the weight of the marketing homepage, re-sent
 * on every navigation. Served as one cacheable file instead, versioned by
 * content hash so a deploy busts the cache and nothing else does.
 */

:root {
  /* Akomio brand — "sedlácká modrá": muted farmhouse blue on a warm
     natural ground. --brand-700 is darkened from the spec's #183F50 only
     where it carries body-text-sized link colour, to clear WCAG AA on
     --canvas; the hue/character is unchanged. */
  --brand-primary:#2D5F73; --brand-primary-dark:#183F50; --brand-primary-light:#DDEAF0;
  --brand-700:#183F50; --brand-600:#2D5F73; --brand-100:#DDEAF0;
  --ink-900:#203239; --ink-600:#5B6C72;
  --surface:#FFFFFF; --canvas:#F7F3EB; --accent-warm:#C77C5D;
  --accent:var(--brand-600); --ink:var(--ink-900); --bg:var(--canvas); --card:var(--surface);
  --border:#DFD8CC; --danger:#B6544B; --success:#4F7A59;
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 system-ui, sans-serif; color:var(--ink); background:var(--bg); }
a { color: var(--brand-700); }
:focus-visible { outline:3px solid var(--brand-600); outline-offset:2px; }
header.site { border-bottom:1px solid var(--border); background:var(--card); }
.bar { width:min(70rem, calc(100% - 2rem)); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; flex-wrap:wrap; gap:.5rem; }
.bar a.brand { font-weight:700; font-size:1.2rem; color:var(--ink-900); text-decoration:none; letter-spacing:-.01em; display:inline-flex; align-items:center; }
.brand-logo { display:block; height:1.9rem; width:auto; }
nav a, nav button.link { margin-left:1rem; color:var(--ink-900); text-decoration:none; }
nav a:hover, nav button.link:hover { color:var(--brand-600); }
.subnav { border-bottom:1px solid var(--border); background:var(--brand-100); }
.subnav .bar { padding:.5rem 0; overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; gap:0; }
.subnav a { margin:0 1.25rem 0 0; padding:.25rem 0; white-space:nowrap; color:var(--brand-700); text-decoration:none; font-size:.92rem; font-weight:600; border-bottom:2px solid transparent; }
.subnav a:last-child { margin-right:0; }
.subnav a.active, .subnav a:hover { border-bottom-color:var(--brand-600); color:var(--ink-900); }
/* F4 channel cards */
.pill { display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .55rem; border-radius:2rem; vertical-align:middle; margin-left:.4rem; }
.pill-active { background:#E7F0E9; color:#3C6145; border:1px solid #BFD6C5; }
.pill-warning { background:#FBF0E4; color:#8A5A34; border:1px solid #E5CFB4; }
.pill-waiting { background:#FBF0E4; color:#8A5A34; border:1px solid #E5CFB4; }
.pill-missing { background:#FBF0E4; color:#8A5A34; border:1px solid #E5CFB4; }
.pill-error { background:#FBEDEB; color:var(--danger); border:1px solid #EBC6C1; }
.pill-disabled { background:#EFECE6; color:var(--ink-600); border:1px solid var(--border); }
.channel-card { padding:1.25rem 1.5rem; }
.channel-head { border-bottom:1px solid var(--border); padding-bottom:.75rem; margin-bottom:1rem; }
.channel-head h2 { margin-bottom:.15rem; }
.channel-directions { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1.5rem; }
.channel-direction h3 { font-size:1rem; margin:0 0 .5rem; color:var(--ink-900); }
.channel-direction p { margin:.25rem 0; }
.wizard-step { border-top:1px solid var(--border); padding-top:1.25rem; margin-top:1.25rem; }
.wizard-step:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.wizard-step h2 { display:flex; align-items:center; gap:.6rem; font-size:1.15rem; }
.wizard-step .step-number { margin:0; }
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--border); margin:1rem 0 1.25rem; flex-wrap:wrap; }
.tabs a { padding:.5rem .9rem; text-decoration:none; color:var(--ink-600); font-weight:600; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a.active { color:var(--ink-900); border-bottom-color:var(--brand-600); }
.tabs a:hover { color:var(--brand-600); }
.pager { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1rem; }
/* F7 split-day occupancy calendar */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
table.occupancy { border-collapse:separate; border-spacing:0; }
table.occupancy th, table.occupancy td { border-bottom:none; padding:0; }
table.occupancy .unit-col { padding:.4rem .6rem; border-right:1px solid var(--border); position:sticky; left:0; background:var(--card); z-index:1; font-size:.9rem; }
table.occupancy .day-head { width:1.9rem; min-width:1.9rem; text-align:center; padding:.2rem 0; font-size:.7rem; font-weight:600; color:var(--ink-600); line-height:1.2; }
table.occupancy .day-head .dow { display:block; font-size:.62rem; text-transform:uppercase; opacity:.75; }
table.occupancy .day-head.today { color:var(--brand-700); background:var(--brand-100); border-radius:.25rem .25rem 0 0; }
.occ-cell { height:2rem; position:relative; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--surface); }
.occ-cell.today { box-shadow: inset 0 0 0 2px var(--brand-600); }
.occ-cell .half { position:absolute; top:0; bottom:0; width:50%; display:block; }
.occ-cell .half-morning { left:0; }
.occ-cell .half-afternoon { left:50%; }
.half-free { background:transparent; }
.half-booked { background:var(--brand-600); }
.half-request { background:var(--accent-warm); }
.half-manual { background:#8B8177; }
a.half:hover { filter:brightness(1.25); }
.occ-cell.turnover { outline:1px dashed var(--accent-warm); outline-offset:-1px; }
.legend { display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.85rem; color:var(--ink-600); }
.legend-item { display:inline-flex; align-items:center; gap:.35rem; }
.swatch { display:inline-block; width:.9rem; height:.9rem; border-radius:.2rem; border:1px solid var(--border); }
.swatch-free { background:var(--surface); }
.swatch-booked { background:var(--brand-600); }
.swatch-request { background:var(--accent-warm); }
.swatch-manual { background:#8B8177; }
.swatch-split { background:linear-gradient(90deg, var(--brand-600) 50%, var(--surface) 50%); }
/* F9 template tag picker */
.tag-picker { background:var(--bg); border:1px solid var(--border); border-radius:.6rem; padding:.9rem 1rem; margin:1rem 0; }
.tag-group { margin-bottom:.6rem; }
.tag-group h4 { margin:.4rem 0 .3rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-600); }
.tag-chip { display:inline-block; margin:.15rem .25rem .15rem 0; padding:.2rem .5rem; font:inherit; font-size:.78rem; background:var(--card); border:1px solid var(--border); border-radius:.35rem; cursor:pointer; color:var(--brand-700); }
.tag-chip:hover { border-color:var(--brand-600); background:var(--brand-100); }
.preview-row td { background:var(--bg); }
.preview-body { white-space:pre-wrap; }
.subnav-second { background:var(--surface); }
.subnav-second a { font-weight:600; }
/* F3 settings hub */
.settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; }
.settings-card { display:block; background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem 1.1rem; text-decoration:none; color:inherit; }
.settings-card:hover { border-color:var(--brand-600); }
.settings-card-title { display:block; font-weight:600; color:var(--ink-900); margin-bottom:.2rem; }
.telegram-connect-panel { max-width:52rem; margin:0 0 1.5rem; }
.telegram-connect-panel > h2 { margin:.25rem 0 1rem; }
.telegram-connect-panel > p:last-child { margin-bottom:0; }
.telegram-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.telegram-choice {
  display:flex;
  flex-direction:column;
  gap:.65rem;
  min-height:11rem;
  padding:1.1rem;
  color:inherit;
  text-decoration:none;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:.7rem;
}
.telegram-choice:hover,
.telegram-choice:focus-visible { border-color:var(--brand-600); background:var(--brand-100); }
.telegram-choice:focus-visible { outline:3px solid color-mix(in srgb, var(--brand-600) 35%, transparent); outline-offset:2px; }
.telegram-choice-title { color:var(--ink-900); font-size:1.05rem; }
.telegram-choice .muted { flex:1; }
.telegram-choice-action { color:var(--brand-700); font-weight:700; }
main { width:min(70rem, calc(100% - 2rem)); margin:2rem auto; }
.flash { padding:.75rem 1rem; border-radius:.5rem; margin-bottom:1rem; }
.flash.error { background:#FBEDEB; color:var(--danger); border:1px solid #EBC6C1; }
.flash.success { background:#E7F0E9; color:#3C6145; border:1px solid #BFD6C5; }
.card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; }
.btn { display:inline-block; background:var(--brand-600); color:white; border:none; padding:.6rem 1.1rem; border-radius:.5rem; cursor:pointer; text-decoration:none; font:inherit; font-weight:600; }
.btn:hover { background:var(--brand-700); }
.btn.secondary { background:transparent; color:var(--brand-600); border:1px solid var(--brand-600); }
.btn.secondary:hover { background:var(--brand-100); }
form.inline { display:inline; }
button.link { background:none; border:none; padding:0; font:inherit; cursor:pointer; }
label { display:block; margin:.75rem 0 .25rem; font-weight:600; }
input, select { width:100%; padding:.5rem .6rem; border:1px solid var(--border); border-radius:.4rem; font:inherit; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.muted { color:var(--ink-600); font-size:.9rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem; }
.stat .value { font-size:1.8rem; font-weight:700; }
.flash.impersonation { border-radius:0; margin:0; text-align:center; }
.flash.impersonation button.link { text-decoration:underline; }
/* Utility classes: the CSP has no 'unsafe-inline' for style-src, so a
   style="..." attribute is silently dropped by the browser - anything
   that isn't already covered by a named rule above goes here instead. */
.mt-sm { margin-top:.5rem; }
.mt-md { margin-top:1rem; }
.mt-lg { margin-top:1.5rem; }
.mt-xl { margin-top:2.5rem; }
.mt-xxl { margin-top:3rem; }
.mt-0 { margin-top:0; }
.mb-lg { margin-bottom:1.5rem; }
.ml-md { margin-left:1rem; }
.mx-sm { margin:0 .5rem; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.font-bold { font-weight:700; }
.font-normal { font-weight:normal; }
.danger-text { color:var(--danger); }
.success-text { color:var(--success); }
.narrow { width:auto; }
.overflow-x { overflow-x:auto; }
.nowrap { white-space:nowrap; }
.card-sm { max-width:24rem; }
.card-md { max-width:28rem; }
.card-lg { max-width:32rem; }
.card-xl { max-width:34rem; }
.card-xxl { max-width:40rem; }
.center-block { margin:auto; }
.min-w-md { min-width:14rem; }
.min-w-lg { min-width:16rem; }
.w-sm { width:6rem; }
.filters-row { display:flex; gap:1rem; align-items:end; flex-wrap:wrap; margin-bottom:1rem; }
.checklist { list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.check-mark { display:inline-block; width:1rem; height:1rem; border-radius:.25rem; border:2px solid var(--brand-600); vertical-align:middle; margin-right:.15rem; }
.check-mark.done { background:var(--brand-600); position:relative; }
.check-mark.done::after { content:""; position:absolute; left:.2rem; top:-.05rem; width:.3rem; height:.55rem; border:solid white; border-width:0 2px 2px 0; transform:rotate(45deg); }
.checkbox-label { font-weight:normal; display:flex; align-items:center; gap:.4rem; }
.reveal-box { border-color:var(--accent); margin-bottom:1.5rem; }
.day-cell { text-align:center; padding:.25rem; }
.day-cell.today { background:var(--bg); }
.status-cell { text-align:center; padding:.25rem; }
.status-cell.blocked { background:#FBEDEB; }
.status-cell.booked { background:#E7F0E9; }
.btn.danger-btn { background:var(--danger); }
.w-full { width:100%; }
h1 { font-size:clamp(1.8rem, 4vw + 1rem, 2.75rem); line-height:1.15; margin:0 0 .5rem; color:var(--ink-900); }
h2 { font-size:1.5rem; margin:0 0 1rem; color:var(--ink-900); }
.hero { padding:1rem 0 .5rem; }
.hero .lead { font-size:1.2rem; color:var(--ink-600); margin:0 0 .5rem; }
.step-number { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--brand-100); color:var(--brand-700); font-weight:700; margin:0 0 .5rem; }
details { border:1px solid var(--border); border-radius:.5rem; padding:.75rem 1rem; margin-bottom:.5rem; background:var(--card); }
details summary { cursor:pointer; font-weight:600; }
details p { margin-bottom:0; }
@media (max-width: 30rem) {
  .bar { gap:.35rem; }
  nav a, nav button.link { margin-left:.6rem; font-size:.92rem; }
}
.site-footer { border-top:1px solid var(--border); margin-top:2rem; background:var(--card); }
.footer-bar { padding:1rem 0; gap:1.25rem; justify-content:flex-start; }
.footer-bar a { color:var(--ink-600); text-decoration:none; font-size:.85rem; }
.footer-bar a:hover { color:var(--brand-600); }
.footer-grid { width:min(70rem, calc(100% - 2rem)); margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:1.5rem; padding:2rem 0 1rem; }
.footer-grid h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-600); margin:0 0 .6rem; }
.footer-grid a, .footer-grid p { display:block; color:var(--ink-600); text-decoration:none; font-size:.9rem; margin:0 0 .35rem; }
.footer-grid a:hover { color:var(--brand-600); }
.footer-legal { border-top:1px solid var(--border); }

/* --- Application UI consistency: admin + superadmin ---
   Marketing has a deliberately spacious section rhythm. The authenticated
   application should feel related without turning every screen into a landing
   page: top-level sections get clear separation, forms use one field system,
   cards consume useful horizontal space, and support threads/tables share the
   same surface language. Scoped through body.app-shell so public microsites,
   widgets and auth forms keep their own proportions. */
.app-shell main { margin-top:2.5rem; margin-bottom:4rem; }
.app-shell main > h1 { margin-bottom:1.25rem; }
.app-shell main > h1 + .section-lead { margin-top:-.45rem; }
.app-shell main > h1 + .muted { margin-top:-.45rem; margin-bottom:1.5rem; }
.app-shell main > p .btn { margin:.15rem .35rem .15rem 0; }
.app-shell main > h2:not(.visually-hidden) {
  margin-top:2.75rem;
  margin-bottom:.85rem;
  padding-top:2.15rem;
  border-top:1px solid var(--border);
  font-size:clamp(1.35rem, 1.15rem + .55vw, 1.65rem);
  letter-spacing:-.01em;
}
.app-shell main > h2.mt-xl:not(.visually-hidden),
.app-shell main > h2.mt-xxl:not(.visually-hidden) { margin-top:2.75rem; }
.app-shell main h3 { color:var(--ink-900); font-size:1.08rem; line-height:1.3; margin:1.5rem 0 .65rem; }
.app-shell .card > h2:first-child,
.app-shell .card > h3:first-child { margin-top:0; }
.app-shell .card { box-shadow:0 10px 28px -26px rgba(24,63,80,.7); }
.app-shell .grid { gap:1.1rem; }
.app-shell .stat { padding:1.15rem 1.25rem; min-height:5.7rem; }
.app-shell .stat .value { line-height:1.15; margin-bottom:.25rem; }

/* Historic card widths were sized for tiny setup forms and made newer,
   content-heavy settings (notably Web) look like a half-finished half-column.
   Keep truly compact cards compact, let normal forms breathe, and let XL/XXL
   surfaces use the page column. */
.app-shell main .card-md { max-width:42rem; }
.app-shell main .card-lg { max-width:52rem; }
.app-shell main .card-xl,
.app-shell main .card-xxl { max-width:none; width:100%; }
.app-shell main .form-narrow { width:100%; max-width:52rem; }

/* One form-control system. Textareas previously inherited browser defaults,
   so they were visually smaller and narrower than adjacent inputs. Checkbox,
   radio and colour inputs are explicitly excluded from full-width behaviour. */
.app-shell main input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.app-shell main select,
.app-shell main textarea {
  width:100%;
  min-height:2.75rem;
  padding:.62rem .72rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  background:var(--card);
  color:var(--ink-900);
  font:inherit;
  line-height:1.45;
}
.app-shell main textarea { min-height:7.5rem; resize:vertical; }
.app-shell main textarea[rows="8"] { min-height:12rem; }
.app-shell main input[type="file"] { min-height:auto; padding:.55rem; }
.app-shell main input[type="color"] { width:4.5rem; height:2.75rem; padding:.25rem; border:1px solid var(--border); border-radius:.5rem; background:var(--card); }
.app-shell main input[type="checkbox"],
.app-shell main input[type="radio"] { width:auto; min-height:auto; accent-color:var(--brand-600); }
.app-shell main label { margin-top:1rem; margin-bottom:.35rem; }
.app-shell main label.checkbox,
.app-shell main label.checkbox-label,
.app-shell main label.inline-checkbox { margin-top:.65rem; font-weight:500; }
.app-shell main .inline-checkbox { display:flex; align-items:center; gap:.5rem; }
.app-shell main fieldset { border:1px solid var(--border); border-radius:.65rem; padding:1rem 1.1rem; }
.app-shell main legend { padding:0 .35rem; font-weight:700; color:var(--ink-900); }
.app-shell main .checkbox-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(12rem,1fr)); gap:.45rem 1rem; }
.app-shell main .checkbox-grid .checkbox { display:flex; align-items:center; gap:.5rem; }

/* Tables: same visual surface across admin and superadmin, without touching
   the specialised split-day occupancy calendar. */
.app-shell table:not(.occupancy) { background:var(--card); }
.app-shell table:not(.occupancy) thead th {
  background:color-mix(in srgb, var(--brand-100) 58%, var(--card));
  color:var(--ink-900);
  font-size:.82rem;
  font-weight:700;
  vertical-align:bottom;
}
.app-shell table:not(.occupancy) tbody td { vertical-align:top; }
.app-shell table:not(.occupancy) tbody tr:hover td { background:color-mix(in srgb, var(--brand-100) 22%, var(--card)); }
.app-shell .overflow-x { border:1px solid var(--border); border-radius:.75rem; background:var(--card); }
.app-shell .overflow-x table { border:none; }

/* Support/ticket screens used semantic classes but had no visual rules. */
.app-shell .thread { display:grid; gap:.8rem; max-width:52rem; margin:1.5rem 0; }
.app-shell .thread-message { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:.75rem; background:var(--card); }
.app-shell .thread-message-support { border-color:color-mix(in srgb, var(--brand-600) 30%, var(--border)); background:color-mix(in srgb, var(--brand-100) 30%, var(--card)); }
.app-shell .thread-author { display:flex; gap:.75rem; align-items:baseline; justify-content:space-between; font-weight:700; color:var(--ink-900); }
.app-shell .thread-body { white-space:pre-wrap; margin:.55rem 0 0; }

/* Back links should read as navigation, not an accidental paragraph glued to
   the page title. */
.app-shell main > p:first-child > a[href] { display:inline-block; margin-bottom:.35rem; }
.legal-identity { max-width:42rem; }
.legal-identity p { margin:.3rem 0; }

@media (max-width:42rem) {
  .telegram-choice-grid { grid-template-columns:1fr; }
  .app-shell main { margin-top:1.6rem; }
  .app-shell main > h2:not(.visually-hidden) { margin-top:2rem; padding-top:1.6rem; }
  .app-shell .card { padding:1.15rem; }
  .app-shell .stat { min-height:auto; }
  .app-shell .thread-author { align-items:flex-start; flex-direction:column; gap:.15rem; }
}

/* --- Marketing homepage (F1, F17) ---
   .hero-marketing now renders outside <main> (see layout/base.html's
   {% block hero %}), so it is a direct child of <body> and its background
   naturally spans the full viewport width - no vw-based full-bleed hack
   needed, and therefore no risk of the horizontal-scrollbar-width overflow
   that trick can cause. .hero-inner reuses main's own width formula so the
   hero copy lines up exactly with every section below it. */
.hero-marketing { background:linear-gradient(180deg, var(--brand-100) 0%, var(--canvas) 100%); padding:3.75rem 0 3.5rem; }
.hero-inner { width:min(70rem, calc(100% - 2rem)); margin:0 auto; }
.hero-marketing h1 { margin-bottom:1rem; }
.hero-marketing .lead { font-size:1.25rem; color:var(--ink-900); margin:0 0 1rem; max-width:34rem; }
.hero-marketing .muted { }
.eyebrow { display:inline-block; background:var(--brand-600); color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:2rem; margin-bottom:1rem; }
.cta-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:1.25rem; }
.btn.lg { padding:.85rem 1.6rem; font-size:1.05rem; }
.section { margin:3.5rem 0; }
.section-lead { color:var(--ink-600); margin:0 0 1.5rem; }

/* Homepage-only typographic hierarchy and rhythm. Scoped to .home-section
   rather than the bare .section/h2/h3 selectors above, which admin pages
   (admin/settings.html, admin/languages.html) also use - a landing-page
   treatment has no business leaking into those.

   The underlying problem this fixes: a plain <h2> and a <h3> inside a
   .card rendered at the same weight and the same --ink-900 color, 5px
   apart in size - visually the same heading twice, which is why section
   titles and card titles blurred together instead of nesting. */
.home-section { margin:3.5rem 0; padding-top:2.5rem; border-top:1px solid var(--border); }
.home-section:first-of-type { border-top:none; padding-top:0; }
.home-section h2 { font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.05rem); letter-spacing:-.01em; margin-bottom:.6rem; }
.home-section .card h3,
.home-section .audience-card h3 { font-size:1.05rem; font-weight:700; color:var(--ink-900); margin:0 0 .35rem; }
.home-section .card,
.home-section .audience-card { transition:transform .15s ease, box-shadow .15s ease; }
.home-section .card:hover,
.home-section .audience-card:hover { transform:translateY(-3px); box-shadow:0 10px 24px -12px rgba(24,63,80,.25); }
.home-section .feature-icon { font-size:1.5rem; line-height:1; display:block; margin-bottom:.6rem; }

/* A denser panel treatment for the two most important sections, so the
   page reads as distinct chunks instead of one continuous scroll of
   same-looking blocks. Stays inside <main>'s existing width - no
   full-bleed/viewport tricks, so no horizontal-overflow risk. */
.section-panel { background:var(--card); border:1px solid var(--border); border-radius:1.25rem; padding:2.5rem clamp(1.25rem, 4vw, 2.5rem); }

.audience-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.audience-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.25rem; }
.audience-card h3 { margin:0 0 .35rem; font-size:1.05rem; color:var(--ink-900); }
.audience-card p { margin:0; color:var(--ink-600); font-size:.9rem; }
.audience-icon { font-size:1.5rem; line-height:1; display:block; margin-bottom:.5rem; }
.price-card { position:relative; display:flex; flex-direction:column; }
.price-card.featured { border-color:var(--brand-600); border-width:2px; }
.price-badge { position:absolute; top:-.7rem; left:1.25rem; background:var(--accent-warm); color:#fff; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.2rem .6rem; border-radius:2rem; }
.price-amount { font-size:2rem; font-weight:700; color:var(--ink-900); }
.price-card ul { list-style:none; padding:0; margin:.75rem 0 1.25rem; }
.price-card li { padding:.2rem 0 .2rem 1.3rem; position:relative; font-size:.9rem; color:var(--ink-600); }
.price-card li::before { content:"✓"; position:absolute; left:0; color:var(--brand-600); font-weight:700; }
.price-card .btn { margin-top:auto; }
.trust-note { background:var(--brand-100); border:1px solid var(--border); border-radius:.75rem; padding:1rem 1.25rem; color:var(--brand-700); }
.final-cta { background:var(--brand-700); color:#fff; border-radius:1rem; padding:3rem 2rem; text-align:center; }
.final-cta h2 { color:#fff; }
.final-cta p { color:var(--brand-100); }
.final-cta .btn { background:#fff; color:var(--brand-700); }
.final-cta .btn:hover { background:var(--brand-100); }

/* Homepage sync hub: the visual must communicate the product value before
   the visitor reads the explanatory cards below it. On desktop the flow is
   portals -> AKOMIO -> updated portals. On narrow screens the exact same
   semantic order becomes a vertical flow, so there is no tiny diagram or
   horizontal scrolling. All product/channel labels remain real DOM text. */
.sync-diagram {
  display:grid;
  grid-template-columns:minmax(0,1fr) 3.25rem minmax(12rem,1.08fr) 3.25rem minmax(0,1fr);
  gap:1rem;
  align-items:center;
  width:100%;
  margin:1.75rem auto 0;
}
.sync-side { min-width:0; }
.sync-side-label {
  margin:0 0 .65rem;
  color:var(--brand-700);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
  text-align:center;
}
.sync-channel-list { display:grid; gap:.55rem; }
.sync-channel {
  display:flex;
  align-items:center;
  gap:.65rem;
  min-width:0;
  padding:.72rem .85rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--canvas);
  color:var(--ink-900);
  font-size:.9rem;
  font-weight:700;
  box-shadow:0 5px 18px -16px rgba(24,63,80,.6);
}
.sync-status-dot {
  flex:0 0 auto;
  width:.58rem;
  height:.58rem;
  border-radius:50%;
  background:var(--brand-600);
  box-shadow:0 0 0 .22rem var(--brand-100);
}
.sync-side-out .sync-status-dot {
  background:var(--success);
  box-shadow:0 0 0 .22rem color-mix(in srgb, var(--success) 16%, transparent);
}
.sync-channel-booking {
  border-color:color-mix(in srgb, var(--brand-600) 42%, var(--border));
  background:color-mix(in srgb, var(--brand-100) 55%, var(--card));
}
.sync-channel-updated {
  border-color:color-mix(in srgb, var(--success) 28%, var(--border));
}
.sync-node-hub {
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:13.5rem;
  padding:1.4rem 1.1rem;
  border:1px solid var(--brand-700);
  border-radius:1.1rem;
  background:linear-gradient(155deg, var(--brand-700), var(--brand-900, var(--brand-700)));
  color:#fff;
  text-align:center;
  box-shadow:0 18px 38px -22px rgba(24,63,80,.7);
}
.sync-node-hub::before,
.sync-node-hub::after {
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.sync-node-hub::before { width:10rem; height:10rem; top:-5.5rem; right:-4rem; }
.sync-node-hub::after { width:7rem; height:7rem; bottom:-4rem; left:-2.75rem; }
.sync-hub-mark {
  display:grid;
  place-items:center;
  width:2.55rem;
  height:2.55rem;
  margin-bottom:.65rem;
  border-radius:.7rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:800;
  font-size:1.15rem;
}
.sync-node-hub .sync-node-title { color:#fff; font-size:1.35rem; letter-spacing:.055em; }
.sync-node-hub .sync-node-caption { color:var(--brand-100); font-size:.84rem; margin-top:.2rem; }
.sync-hub-divider { width:3rem; height:1px; background:rgba(255,255,255,.28); margin:.85rem 0 .7rem; }
.sync-hub-caption { max-width:14rem; color:#fff; font-size:.78rem; line-height:1.45; font-weight:600; }
.sync-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-600);
}
.sync-arrow span {
  display:grid;
  place-items:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:var(--brand-100);
  border:1px solid color-mix(in srgb, var(--brand-600) 22%, var(--border));
  font-size:1.45rem;
  font-weight:800;
  line-height:1;
}
.sync-arrow-out { color:var(--success); }
.sync-arrow-out span {
  background:color-mix(in srgb, var(--success) 10%, var(--card));
  border-color:color-mix(in srgb, var(--success) 22%, var(--border));
}

@media (max-width: 52rem) {
  .sync-diagram {
    grid-template-columns:minmax(0,1fr) 2.7rem minmax(10rem,1fr) 2.7rem minmax(0,1fr);
    gap:.6rem;
  }
  .sync-channel { padding:.62rem .7rem; font-size:.82rem; }
  .sync-node-hub { min-height:12.25rem; }
}

@media (max-width: 42rem) {
  .sync-diagram {
    grid-template-columns:1fr;
    gap:.7rem;
    max-width:25rem;
  }
  .sync-channel-list { grid-template-columns:1fr 1fr; }
  .sync-arrow span { transform:rotate(90deg); }
  .sync-node-hub { min-height:auto; padding:1.35rem 1.2rem; }
  .sync-side-label { margin-top:.2rem; }
}

@media (max-width: 26rem) {
  .sync-channel-list { grid-template-columns:1fr; }
}

/* F14.3 language picker */
.lang-form { display: inline-flex; align-items: center; margin-left: 1rem; }
.lang-select { width: auto; padding: .3rem 1.6rem .3rem .5rem; font-size: .88rem; border-radius: .4rem; background: var(--card); }
@media (max-width: 30rem) { .lang-select { font-size: .82rem; } }

/* --- Superadmin organization directory ---
   Organization management lives on its own page so the dashboard stays a
   compact overview. Filters remain dense, while trust/safety actions keep a
   deliberately small footprint inside the table. */
.app-shell .superadmin-filter-card { margin-top:.25rem; }
.app-shell .superadmin-filter-grid {
  display:grid;
  grid-template-columns:minmax(15rem, 2fr) minmax(11rem, 1fr) minmax(11rem, 1fr) auto;
  gap:1rem;
  align-items:end;
}
.app-shell .superadmin-filter-grid label { margin-top:0; }
.app-shell .superadmin-filter-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; padding-bottom:.02rem; }
.app-shell .superadmin-organizations-table { margin-top:.75rem; }
.app-shell .superadmin-actions-cell { min-width:20rem; }
.app-shell .superadmin-org-actions { display:flex; gap:.45rem; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.app-shell .superadmin-suspend-form { display:inline-flex; gap:.4rem; align-items:center; margin:0; }
.app-shell main .superadmin-suspend-reason {
  width:11.5rem;
  min-width:9rem;
  max-width:11.5rem;
  min-height:2.45rem;
  padding:.48rem .58rem;
  font-size:.9rem;
}
.app-shell .superadmin-org-actions .btn { white-space:nowrap; padding:.52rem .8rem; }

@media (max-width:54rem) {
  .app-shell .superadmin-filter-grid { grid-template-columns:1fr 1fr; }
  .app-shell .superadmin-filter-actions { grid-column:1 / -1; }
}
@media (max-width:36rem) {
  .app-shell .superadmin-filter-grid { grid-template-columns:1fr; }
  .app-shell .superadmin-filter-actions { grid-column:auto; }
}

/* --- Superadmin organization directory ---
   Tenant lookup lives on its own page; the dashboard remains an overview.
   Actions stay compact so trust/safety controls never determine table width. */
.app-shell .superadmin-section-action { margin:1rem 0 0; }
.app-shell .superadmin-filter-card { width:100%; max-width:none; margin-bottom:1rem; }
.app-shell .superadmin-filter-grid {
  display:grid;
  grid-template-columns:minmax(14rem,2fr) minmax(10rem,1fr) minmax(11rem,1fr) auto;
  gap:.85rem 1rem;
  align-items:end;
}
.app-shell .superadmin-filter-grid label { margin-top:0; }
.app-shell .superadmin-filter-actions { display:flex; gap:.5rem; align-items:center; padding-bottom:.05rem; }
.app-shell .superadmin-organizations-table table { min-width:58rem; }
.app-shell .superadmin-actions-cell { width:1%; min-width:13rem; }
.app-shell .superadmin-org-actions { display:flex; flex-wrap:wrap; gap:.45rem; align-items:flex-start; }
.app-shell .superadmin-suspend-details {
  position:relative;
  width:auto;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
}
.app-shell .superadmin-suspend-details > summary {
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  width:auto;
  margin:0;
}
.app-shell .superadmin-suspend-details > summary::-webkit-details-marker { display:none; }
.app-shell .superadmin-suspend-details[open] > summary { margin-bottom:.45rem; }
.app-shell .superadmin-suspend-form {
  display:grid;
  grid-template-columns:minmax(9rem,13rem) auto;
  gap:.4rem;
  align-items:center;
  width:max-content;
  max-width:21rem;
  padding:.55rem;
  border:1px solid color-mix(in srgb, var(--danger, #b6544b) 26%, var(--border));
  border-radius:.55rem;
  background:var(--card);
  box-shadow:0 12px 28px -22px rgba(24,63,80,.8);
}
.app-shell main .superadmin-suspend-reason {
  width:13rem;
  min-width:0;
  min-height:2.35rem;
  padding:.45rem .55rem;
  font-size:.86rem;
}
.app-shell .superadmin-suspend-form .btn { white-space:nowrap; }

@media (max-width:58rem) {
  .app-shell .superadmin-filter-grid { grid-template-columns:1fr 1fr; }
  .app-shell .superadmin-filter-actions { grid-column:1 / -1; }
}
@media (max-width:38rem) {
  .app-shell .superadmin-filter-grid { grid-template-columns:1fr; }
  .app-shell .superadmin-filter-actions { grid-column:auto; flex-wrap:wrap; }
  .app-shell .superadmin-suspend-form { grid-template-columns:1fr; width:min(17rem, 72vw); }
  .app-shell main .superadmin-suspend-reason { width:100%; }
}

/* --- Superadmin lead acquisition workspace --- */
.app-shell .health-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
.app-shell .health-page-header h1 { margin:0 0 .35rem; }
.app-shell .health-page-header p { margin:0; }
.app-shell .health-release { padding:.35rem .6rem; border:1px solid var(--border); border-radius:.45rem; color:var(--ink-600); font-size:.85rem; }
.app-shell .health-overall { display:flex; gap:1rem; align-items:flex-start; padding:1.3rem 1.4rem; border:1px solid var(--border); border-left-width:.45rem; border-radius:.75rem; background:var(--card); }
.app-shell .health-overall h2 { margin:0 0 .35rem; }
.app-shell .health-overall p { margin:.25rem 0; }
.app-shell .health-status-icon { display:grid; place-items:center; flex:0 0 2.4rem; width:2.4rem; height:2.4rem; border-radius:50%; color:#fff; font-size:1.4rem; font-weight:800; background:#66747b; }
.app-shell .health-overall.health-healthy { border-left-color:#2e7d4f; }
.app-shell .health-overall.health-warning { border-left-color:#b36b16; }
.app-shell .health-overall.health-critical, .app-shell .health-overall.health-unavailable { border-left-color:var(--danger); }
.app-shell .health-overall.health-healthy .health-status-icon { background:#2e7d4f; }
.app-shell .health-overall.health-warning .health-status-icon { background:#b36b16; }
.app-shell .health-overall.health-critical .health-status-icon, .app-shell .health-overall.health-unavailable .health-status-icon { background:var(--danger); }
.app-shell .health-badge { display:inline-flex; align-items:center; width:max-content; padding:.2rem .48rem; border:1px solid; border-radius:999px; font-size:.78rem; font-weight:750; line-height:1.2; white-space:nowrap; }
.app-shell .health-badge.health-healthy { color:#245d3c; background:#e7f3eb; border-color:#bcd9c5; }
.app-shell .health-badge.health-warning { color:#70470b; background:#fff3d3; border-color:#e4cb88; }
.app-shell .health-badge.health-critical { color:#8c2f29; background:#fbe9e7; border-color:#e2b9b5; }
.app-shell .health-badge.health-unavailable { color:#4f5c62; background:#eef1f2; border-color:#cbd2d5; }
.app-shell .health-resource-grid, .app-shell .health-check-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; }
.app-shell .health-card { min-width:0; padding:1.05rem 1.15rem; border:1px solid var(--border); border-radius:.75rem; background:var(--card); box-shadow:0 10px 28px -26px rgba(24,63,80,.7); }
.app-shell .health-card-heading { display:flex; justify-content:space-between; gap:.65rem; align-items:flex-start; }
.app-shell .health-card-heading h3 { margin:0; }
.app-shell .health-card p:last-child { margin-bottom:0; }
.app-shell .health-metric { margin:.75rem 0 .2rem; color:var(--ink-900); font-size:1.25rem; font-weight:750; }
.app-shell .health-services-table table { min-width:54rem; }
@media (max-width:38rem) {
  .app-shell .health-page-header { display:block; }
  .app-shell .health-release { display:inline-flex; margin-top:.65rem; }
  .app-shell .health-overall { padding:1rem; }
  .app-shell .health-resource-grid, .app-shell .health-check-grid { grid-template-columns:1fr; }
}

/* --- Superadmin lead acquisition workspace --- */
.app-shell .lead-page-header {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  margin:.25rem 0 1.35rem;
}
.app-shell .lead-page-header h1 { margin:.1rem 0 .3rem; }
.app-shell .lead-page-header p { margin:.15rem 0; }
.app-shell .lead-header-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; }
.app-shell .lead-filter-card { max-width:none; width:100%; padding:1.1rem; }
.app-shell .lead-filter-grid {
  display:grid; grid-template-columns:minmax(15rem,2fr) repeat(3,minmax(9rem,1fr));
  gap:.8rem 1rem; align-items:end;
}
.app-shell .lead-filter-grid label { margin-top:0; }
.app-shell .lead-filter-search { grid-column:span 2; }
.app-shell .lead-filter-actions { display:flex; gap:.45rem; align-items:center; }
.app-shell .lead-table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:1rem 0 .65rem; }
.app-shell .lead-table-wrap table { min-width:72rem; }
.app-shell .lead-table th, .app-shell .lead-table td { padding:.62rem .55rem; vertical-align:middle; }
.app-shell .lead-table tbody tr:hover { background:color-mix(in srgb,var(--brand-100) 40%,transparent); }
.app-shell .lead-cell-sub { font-size:.78rem; margin-top:.15rem; }
.app-shell .lead-truncate { display:block; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-shell .lead-row-action { padding:.42rem .68rem; white-space:nowrap; }
.lead-badge {
  display:inline-flex; align-items:center; width:max-content; max-width:100%;
  padding:.24rem .52rem; border-radius:999px; font-size:.76rem; line-height:1.2;
  font-weight:700; border:1px solid transparent; white-space:nowrap;
  color:var(--brand-700); background:var(--brand-100);
}
.lead-badge.status-new, .lead-badge.status-ready { color:#28526a; background:#e7f1f5; border-color:#c9dce4; }
.lead-badge.status-scheduled, .lead-badge.email-scheduled { color:#6b4a10; background:#fff5d9; border-color:#ead7a1; }
.lead-badge.status-contacted, .lead-badge.status-replied, .lead-badge.email-sent { color:#255d3b; background:#e7f3eb; border-color:#c3dec9; }
.lead-badge.status-interested, .lead-badge.status-trial_started, .lead-badge.status-converted { color:#1c654f; background:#dcf5ec; border-color:#a7d8c8; }
.lead-badge.status-not_interested, .lead-badge.status-unsubscribed, .lead-badge.status-invalid,
.lead-badge.email-failed, .lead-badge.email-cancelled { color:#8a3932; background:#fbe9e7; border-color:#ebc4bf; }
.lead-badge.email-sending, .lead-badge.email-draft { color:#5c5364; background:#f0edf2; border-color:#d7d0dc; }
.lead-badge.import-new, .lead-badge.template-enabled { color:#255d3b; background:#e7f3eb; border-color:#c3dec9; }
.lead-badge.import-duplicate { color:#6b4a10; background:#fff5d9; border-color:#ead7a1; }
.lead-badge.import-invalid, .lead-badge.template-disabled { color:#8a3932; background:#fbe9e7; border-color:#ebc4bf; }
.app-shell .lead-empty { text-align:center; padding:3rem 1.5rem; }
.app-shell .lead-form { max-width:none; }
.app-shell .lead-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1.1rem; }
.app-shell .lead-form-grid label { margin-top:0; }
.app-shell .lead-span-2 { grid-column:span 2; }
.app-shell .lead-permission-fieldset {
  border:1px solid var(--border); border-radius:.65rem; padding:1rem 1.15rem; margin:1.3rem 0;
}
.app-shell .lead-permission-fieldset legend { padding:0 .35rem; font-weight:700; }
.app-shell .lead-form-actions { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; margin-top:1rem; }
.app-shell .btn.disabled, .app-shell .btn[aria-disabled="true"] { opacity:.52; }
.app-shell .lead-detail-header { padding-bottom:.4rem; border-bottom:1px solid var(--border); }
.app-shell .lead-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.app-shell .lead-detail-grid .card { padding:1.15rem; }
.app-shell .lead-dl { display:grid; grid-template-columns:minmax(5rem,.75fr) minmax(0,1.5fr); gap:.55rem .8rem; margin:0; }
.app-shell .lead-dl dt { color:var(--muted); font-size:.86rem; }
.app-shell .lead-dl dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.app-shell .lead-next-date { font-size:1.2rem; font-weight:700; }
.app-shell .lead-workspace-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:1rem; align-items:start; }
.app-shell .lead-workspace-grid > div { display:grid; gap:1rem; }
.app-shell .lead-workspace-grid > section { min-width:0; }
.app-shell .lead-workspace-grid .card { margin:0; }
.app-shell .lead-preline { white-space:pre-line; overflow-wrap:anywhere; }
.app-shell .lead-section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.app-shell .lead-section-heading h2 { margin-top:0; }
.app-shell .lead-timeline { border-left:2px solid var(--border); margin-left:.4rem; padding-left:1.3rem; }
.app-shell .lead-timeline article { position:relative; padding:0 0 1.35rem; }
.app-shell .lead-timeline article::before { content:""; position:absolute; width:.62rem; height:.62rem; border-radius:50%; background:var(--brand-600); left:-1.68rem; top:.3rem; box-shadow:0 0 0 4px var(--card); }
.app-shell .lead-timeline time { display:block; color:var(--muted); font-size:.78rem; }
.app-shell .lead-timeline p { margin:.35rem 0 0; }
.app-shell .lead-email-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.app-shell .lead-email-row:last-child { border-bottom:0; }
.app-shell .lead-converted { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; border-color:#a7d8c8; background:#f4fbf8; }
.app-shell .lead-inline-search { display:flex; gap:.5rem; align-items:center; }
.app-shell .lead-inline-search input, .app-shell .lead-inline-search select { flex:1; min-width:0; }
.app-shell .lead-confirm { display:flex; gap:.55rem; align-items:flex-start; margin:1rem 0; }
.app-shell .lead-confirm input { width:auto; margin-top:.25rem; }
.app-shell .lead-danger-zone { border-color:color-mix(in srgb,var(--danger) 30%,var(--border)); }
.app-shell .lead-upload-card { max-width:46rem; margin-bottom:1rem; }
.app-shell .lead-upload-card input[type="file"] { padding:1.2rem; border:1px dashed var(--brand-600); background:var(--brand-100); }
.app-shell .lead-import-stats { margin-bottom:1rem; }
.app-shell .lead-mapping { margin-bottom:1rem; }
.app-shell .lead-mapping summary { cursor:pointer; }
.app-shell .lead-mapping form { margin-top:1rem; }
.app-shell .lead-mapping-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem 1rem; margin-bottom:1rem; }
.app-shell .lead-mapping-grid label { margin-top:0; font-family:monospace; font-size:.82rem; }
.app-shell .lead-import-confirm { max-width:40rem; margin-top:1rem; }
.app-shell .lead-composer-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(18rem,.8fr); gap:1rem; align-items:start; }
.app-shell .lead-composer-grid > .card { margin:0; min-width:0; }
.app-shell .lead-composer textarea { min-height:28rem; width:100%; font-family:inherit; line-height:1.55; }
.app-shell .lead-email-preview { position:sticky; top:1rem; max-height:calc(100vh - 2rem); overflow:auto; }
.app-shell .lead-template-picker { max-width:none; margin-bottom:1rem; }
.app-shell .lead-template-list { display:grid; gap:1rem; }
.app-shell .lead-template-excerpt { white-space:pre-line; color:var(--muted); }
.app-shell .lead-template-actions { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
.app-shell .lead-template-actions form { margin:0; }
.app-shell .lead-test-form { display:flex; flex:1 1 22rem; gap:.45rem; }
.app-shell .lead-test-form input { flex:1; min-width:12rem; }
.app-shell .lead-status-filter { display:flex; align-items:end; gap:.6rem; max-width:30rem; }
.app-shell .lead-status-filter label { margin:0; }
.app-shell .lead-recipient-preview { max-height:30rem; overflow:auto; }
.app-shell .lead-recipient-preview > div { display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:.6rem 0; border-bottom:1px solid var(--border); }
.lead-public-message { margin:4rem auto; text-align:center; padding:3rem; }

@media (max-width:64rem) {
  .app-shell .lead-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .lead-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-shell .lead-composer-grid { grid-template-columns:1fr; }
  .app-shell .lead-email-preview { position:static; max-height:none; }
}
@media (max-width:48rem) {
  .app-shell .lead-page-header { flex-direction:column; }
  .app-shell .lead-header-actions { justify-content:flex-start; }
  .app-shell .lead-workspace-grid { grid-template-columns:1fr; }
  .app-shell .lead-mapping-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:36rem) {
  .app-shell .lead-filter-grid, .app-shell .lead-form-grid, .app-shell .lead-detail-grid,
  .app-shell .lead-mapping-grid { grid-template-columns:1fr; }
  .app-shell .lead-filter-search, .app-shell .lead-span-2 { grid-column:auto; }
  .app-shell .lead-table-toolbar, .app-shell .lead-section-heading { align-items:flex-start; flex-direction:column; }
  .app-shell .lead-inline-search, .app-shell .lead-test-form, .app-shell .lead-status-filter { flex-direction:column; align-items:stretch; }
  .app-shell .lead-header-actions .btn, .app-shell .lead-form-actions .btn { width:100%; text-align:center; }
}