@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700,800");

/* ============================================================
   Xelthron Business Network ? product UI (Vater port)
   Source: globals.css + app-shell / dashboard / feed / logo
   ============================================================ */

:root {
  --navy: #071424;
  --blue: #1664ea;
  --blue-dark: #0b2b50;
  --cyan: #13bce9;
  --pale: #f3f7fd;
  --surface: #fff;
  --surface-2: #f8faff;
  --soft: #eaf0f8;
  --text: #0d1b35;
  --muted: #66758f;
  --border: #d9e3f0;
  --shadow: 0 8px 28px rgba(27, 65, 120, 0.07);
  --primary: var(--blue);
  --card: var(--surface);
  --soft-blue: #e9f2ff;
  --user-workspace-background: var(--pale);
  --user-workspace-background-color: var(--pale);
  --user-workspace-background-image: none;
  --user-workspace-background-size: auto;
  --radius: 18px;
  --app-header-height: 76px;
  /* Responsive tokens (media queries use matching px literals) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-shell: 900px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --mobile-nav-height: 64px;
  --page-gutter: clamp(10px, 2.2vw, 24px);
  --fs-body: clamp(0.94rem, 0.9rem + 0.2vw, 1rem);
  --fs-h1: clamp(1.45rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h2: clamp(1.2rem, 1.05rem + 0.7vw, 1.65rem);
  --fs-h3: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  /* Global overlay layer scale — Leaflet stays inside isolated content */
  --z-base: 0;
  --z-header: 100;
  --z-overlay: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (max-height: 700px) {
  :root {
    --app-header-height: 64px;
  }
}

html[data-theme="dark"],
:root[data-theme="dark"],
[data-theme="dark"] {
  --pale: #081426;
  --surface: #101f35;
  --surface-2: #142741;
  --soft: #0c1a2e;
  --text: #edf5ff;
  --muted: #9eb0c7;
  --border: #29405c;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  --primary: #3b82f6;
  --card: var(--surface);
  --soft-blue: #142741;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--pale);
  color-scheme: light;
  height: 100%;
}

html[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  color: var(--text);
  background: var(--pale);
  font-size: var(--fs-body);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

body.app-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

img[style*="object-fit"],
video[style*="object-fit"],
.object-cover,
[data-object-fit="cover"] {
  max-width: 100%;
}

.app-shell,
.network-main,
.app-content,
.feed-dashboard,
.dashboard-main,
.feed-layout,
.dashboard-grid,
.linkedin-grid {
  min-width: 0;
  max-width: 100%;
}

h1,
h2,
h3,
p,
strong,
small,
span,
a {
  overflow-wrap: break-word;
}

a {
  text-decoration: none;
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

.focusable:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #69e7f7;
  outline-offset: 2px;
}

/* ---------- Primitives ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 11px;
  padding: 0.72rem 1rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.btn-cyan {
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  border: 0;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.btn-danger {
  background: #e5484d;
  color: #fff;
  border-color: #e5484d;
}

.muted {
  color: var(--muted);
}

.pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  background: var(--surface);
  font-size: 0.84rem;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-weight: 800;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.theme-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.card input,
.card select,
.card textarea {
  max-width: 100%;
}

/* ---------- Logo / brand mark ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.logo.inverse,
.logo--inverse {
  color: #fff;
}

.logo img,
.logo__mark {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(0, 174, 239, 0.2);
  flex-shrink: 0;
}

.logo.compact img,
.logo--compact img,
.logo.compact .logo__mark,
.logo--compact .logo__mark {
  width: 44px;
  height: 44px;
}

.logo strong,
.logo__name {
  display: block;
  letter-spacing: 1.8px;
  font-weight: 800;
}

.network-brand-slot {
  order: 2;
  flex: 0 0 236px;
  height: 100%;
}
.network-brand {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.network-brand:hover,
.network-brand:focus-visible {
  color: var(--text);
  text-decoration: none;
}
.network-brand-copy {
  display: grid;
  justify-items: center;
  line-height: 1;
}
.network-brand-copy strong {
  font-size: 19.5px;
  font-weight: 900;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
}
.network-brand-copy small {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: #35b9e5;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.25em;
  padding-left: 0.25em;
  text-transform: uppercase;
}
.network-brand-copy i {
  width: 12px;
  height: 1px;
  background: #35b9e5;
  opacity: 0.72;
  display: inline-block;
  flex: 0 0 auto;
}

[data-theme="dark"] .network-brand-copy strong {
  color: inherit;
}

.logo small,
.logo__tag {
  display: block;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--muted);
}

.logo.inverse small,
.logo.inverse .logo__tag,
.logo--inverse small,
.logo--inverse .logo__tag {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Forms ---------- */

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--muted);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.form-group textarea,
textarea {
  min-height: 110px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 620px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 9px;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.flash-success {
  background: color-mix(in srgb, #2ecc71 15%, var(--surface));
  color: #1a7a45;
  border: 1px solid color-mix(in srgb, #2ecc71 35%, var(--border));
}

.flash-error {
  background: color-mix(in srgb, #e5484d 12%, var(--surface));
  color: #b42318;
  border: 1px solid color-mix(in srgb, #e5484d 35%, var(--border));
}

[data-theme="dark"] .flash-error {
  color: #ff8a7a;
}

[data-theme="dark"] .flash-success {
  color: #2ecc71;
}

/* ---------- Modal ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 400);
  background: rgba(3, 12, 27, 0.64);
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
}

.form-modal {
  width: min(680px, 100%);
  padding: 24px;
  display: grid;
  gap: 15px;
}

/* Marketplace create product modal — sits in the area below the app header */
html.mp-create-open,
html.mp-create-open body {
  overflow: hidden;
}
.mp-create-modal.modal {
  /* Geometry under fixed header; do not cover/clip the nav */
  inset: auto;
  top: var(--app-header-height, 76px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal, 400);
  overflow: hidden;
  place-items: center;
  padding: 18px clamp(12px, 2vw, 24px) 22px;
  background: rgba(3, 12, 27, 0.58);
}
.mp-create-form {
  width: min(920px, 100%);
  max-height: min(720px, calc(100dvh - var(--app-header-height, 76px) - 40px));
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(7, 20, 36, 0.22);
  background: var(--card, var(--surface));
}
.mp-create-header,
.mp-create-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card, var(--surface));
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
.mp-create-footer {
  border-bottom: 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--surface) 92%, var(--pale));
}
.mp-create-header-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mp-create-header h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
}
.mp-create-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.mp-create-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  display: grid;
  place-items: center;
}
.mp-create-close:hover {
  background: var(--pale, var(--surface-2));
}
.mp-create-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  scrollbar-gutter: stable;
}
.mp-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
  gap: 10px;
  align-items: start;
}
.mp-create-col {
  display: grid;
  gap: 10px;
}
.mp-create-section {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.mp-create-section h3 {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}
.mp-create-section label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
}
.mp-create-section input,
.mp-create-section select,
.mp-create-section textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  padding: 7px 10px;
  font: inherit;
  font-size: 0.92rem;
}
.mp-create-section textarea {
  min-height: 56px;
  resize: vertical;
}
.mp-create-section textarea[name="short_description"] {
  min-height: 44px;
  max-height: 72px;
}
.mp-create-section textarea[name="description"] {
  min-height: 72px;
  max-height: 140px;
}
.mp-create-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mp-create-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mp-create-counter {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  justify-self: end;
}
.mp-create-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mp-create-section-head .btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}
.mp-create-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.mp-create-feature {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 4px;
  align-items: center;
}
.mp-create-feature .btn {
  min-height: 32px;
  min-width: 32px;
  padding: 0 8px;
}
.mp-create-hint {
  margin: 0;
  font-size: 11px;
}
.mp-create-media-zone {
  display: grid;
  gap: 8px;
}
.mp-create-preview-wrap .mp-edit-preview {
  width: 100%;
  max-width: none;
  max-height: 140px;
}
.mp-create-live {
  display: grid;
  gap: 6px;
}
.mp-create-live-media {
  aspect-ratio: 16 / 9;
  max-height: 110px;
  border-radius: 9px;
  background: var(--pale) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.85rem;
}
.mp-create-live-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mp-create-live h4 {
  margin: 0;
  font-size: 0.95rem;
}
.mp-create-live p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-create-live-price {
  display: grid;
  gap: 1px;
}
.mp-create-live-price strong {
  font-size: 1.02rem;
}
.mp-create-live-price span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.mp-create-footer .btn {
  min-height: 38px;
}
@media (max-width: 1024px) {
  .mp-create-form {
    width: min(860px, 100%);
  }
}
@media (max-width: 900px) {
  .mp-create-layout {
    grid-template-columns: 1fr;
  }
  .mp-create-row,
  .mp-create-row--3 {
    grid-template-columns: 1fr;
  }
  .mp-create-form {
    max-height: calc(100dvh - var(--app-header-height, 76px) - 28px);
  }
}
@media (max-width: 720px) {
  .mp-create-modal.modal {
    padding: 0;
    place-items: stretch;
  }
  .mp-create-form {
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .form-modal.mp-create-form > .mp-create-footer {
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
  }
  .mp-create-footer .btn {
    flex: 1 1 auto;
  }
}

/* Keep create footer actions in a stable order vs. global form-modal mobile rules */
.form-modal.mp-create-form > .mp-create-footer {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}
.form-modal.mp-create-form > .mp-create-footer .btn {
  width: auto;
}

.form-modal header,
.form-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.form-modal header h2 {
  margin: 0;
}

.form-modal header button {
  border: 0;
  background: transparent;
  color: var(--text);
}

.form-modal label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}

.form-modal input,
.form-modal textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  padding: 11px;
  font: inherit;
}

.modal-card {
  width: min(620px, 100%);
  padding: 22px;
}

.modal-card header {
  display: flex;
  justify-content: space-between;
}

.modal-card header button {
  border: 0;
  background: transparent;
}

.modal-card textarea {
  width: 100%;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}

.modal-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  font-size: 11px;
}

.types {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.types button {
  display: flex;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--surface);
}

.types button.active {
  background: var(--blue);
  color: white;
}

/* ---------- Composer modal (modern media editor) ---------- */

.composer-modal .composer-modal-card {
  width: min(760px, 100%);
  max-height: min(92vh, 900px);
  max-height: min(92dvh, 900px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.composer-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.composer-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.composer-modal-as {
  margin: 6px 0 0;
  font-size: 12px;
}

.composer-modal-as strong {
  color: var(--text);
  font-weight: 750;
}

.composer-actor-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
}

.composer-actor-row label {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted, #667085);
}

.composer-acting-as {
  min-width: min(100%, 260px);
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border, #d0d5dd);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.composer-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

.composer-close:hover,
.composer-close:focus-visible {
  background: var(--surface-2);
  outline: none;
}

#xbn-composer-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px 18px;
  overflow: auto;
  min-height: 0;
}

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

.composer-format {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.composer-format.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.composer-format:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 50%, white);
  outline-offset: 1px;
}

.composer-editor textarea {
  width: 100%;
  margin: 0;
  min-height: 120px;
  max-height: 220px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  line-height: 1.45;
}

.composer-editor textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--blue) 40%, white);
  outline-offset: 0;
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}

.composer-editor-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.composer-charcount {
  font-size: 11px;
  color: var(--muted);
  font-weight: 650;
}

.composer-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer-link-chip {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-dropzone {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  padding: 22px 16px;
  background: color-mix(in srgb, var(--surface-2) 70%, #fff);
  cursor: pointer;
  min-height: 112px;
}

.composer-dropzone.is-dragover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}

.composer-dropzone:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 50%, white);
}

.composer-media-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.composer-media-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}

.composer-media-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
}

.composer-media-thumb img,
.composer-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.composer-media-thumb audio {
  width: 64px;
}

.composer-media-copy strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.composer-media-copy small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.composer-media-status {
  display: inline-flex;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: var(--surface-2);
  color: var(--muted);
}

.composer-media-status.is-ready { background: #e7f8ef; color: #087a46; }
.composer-media-status.is-uploading,
.composer-media-status.is-processing { background: #eef5ff; color: #1664ea; }
.composer-media-status.is-failed { background: #fff0f0; color: #b42318; }

.composer-media-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  margin-top: 8px;
  overflow: hidden;
}

.composer-media-progress > span {
  display: block;
  height: 100%;
  background: var(--blue);
  width: 0;
}

.composer-media-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.composer-media-actions button {
  border: 0;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text);
}

.composer-media-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.composer-media-fields label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.composer-media-fields input {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}

.composer-error {
  color: #b42318 !important;
  font-size: 12px;
  margin: 0;
}

.composer-modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
}

.composer-modal-foot .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.feed-post__media-stack {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.feed-post__media figcaption,
.feed-post__media--video > .muted {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

.feed-post__media--video {
  --media-max-h: min(70vh, 680px);
  --ar-w: 16;
  --ar-h: 9;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  aspect-ratio: var(--ar-w) / var(--ar-h);
  width: min(100%, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

.feed-post__media--video.feed-post__media--landscape {
  --media-max-h: min(56vw, 480px);
  width: min(100%, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media--video.feed-post__media--portrait {
  --media-max-h: min(70vh, 680px);
  max-width: min(100%, 420px);
  width: min(100%, 420px, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media--video.feed-post__media--square {
  --media-max-h: min(70vh, 520px);
  max-width: min(100%, 480px);
  width: min(100%, 480px, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media--video.feed-post__media--unknown {
  --ar-w: 16;
  --ar-h: 9;
  --media-max-h: min(56vw, 480px);
  width: min(100%, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media--video > .feed-video-poster,
.feed-post__media--video > video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  background: #0f172a;
  border-radius: inherit;
}

.feed-post__media--video.is-playing > .feed-video-poster {
  display: none;
}

.feed-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0f172a;
  cursor: pointer;
  color: #fff;
}

.feed-video-poster__img,
.feed-video-poster__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  background: #0f172a;
}

.feed-video-poster__placeholder {
  background:
    linear-gradient(145deg, #0f172a 0%, #1e3a5f 55%, #0f172a 100%);
}

.feed-post__media-block {
  margin: 10px 0 14px;
}

.feed-post__media-block > .feed-post__media {
  margin: 0;
}

.feed-post__media-caption {
  margin: 6px 2px 0;
  font-size: 12px;
}

.feed-post__media figcaption {
  margin: 6px 2px 0;
  font-size: 12px;
  color: var(--muted);
}

.feed-video-poster__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.62);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}

.feed-video-poster:hover .feed-video-poster__play,
.feed-video-poster:focus-visible .feed-video-poster__play {
  background: rgba(15, 23, 42, 0.78);
  transform: translate(-50%, -50%) scale(1.04);
}

.feed-video-poster__play svg {
  margin-left: 3px;
}

.feed-video-poster--processing {
  cursor: default;
}

.feed-video-poster__badge {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.composer-poster-field {
  display: grid;
  gap: 8px;
}

.composer-poster-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.composer-poster-preview {
  width: min(100%, 280px);
  max-height: 320px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  margin-top: 4px;
}

.composer-poster-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.composer-poster-hint {
  margin: 0;
  font-size: 12px;
}

.composer-media-thumb img.composer-poster-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feed-post__audio {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  margin: 10px 0 14px;
}

.feed-post__audio audio {
  width: 100%;
}

.feed-post__doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  margin: 10px 0 14px;
  background: #fff;
}

.feed-post__doc-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 12%, #fff);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.feed-post__doc strong,
.feed-post__doc small {
  display: block;
}

@media (max-width: 720px) {
  .composer-modal {
    padding: 0;
    align-items: stretch;
  }

  .composer-modal .composer-modal-card {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .composer-format span {
    font-size: 11px;
  }

  .composer-media-item {
    grid-template-columns: 64px 1fr;
  }

  .composer-media-actions {
    grid-column: 1 / -1;
    flex-direction: row;
  }
}

.upload {
  display: flex;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 24px;
}

.upload input {
  display: none;
}

.selected {
  color: #0a8f60;
  font-size: 12px;
}

.preview {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #0a8f60;
}

.preview img,
.preview video {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 10px;
  background: #08152a;
}

.preview button {
  justify-self: start;
  border: 0;
  background: transparent;
  color: #c0392b;
  padding: 0;
}

.upload-error {
  color: #c0392b;
  font-size: 12px;
}

.media-hint {
  margin: 8px 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

/* ---------- Marketing helpers (light pale + navy accents) ---------- */

/* ---------- Public / marketing shell (Vater PublicShell) ---------- */

.public-header {
  height: var(--app-header-height, 76px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  width: min(100%, 1200px);
  margin: auto;
  padding: 0 clamp(12px, 2vw, 22px);
  gap: clamp(10px, 2vw, 20px);
  background: var(--surface);
  box-sizing: border-box;
  min-width: 0;
}

.public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 22px);
  margin-left: auto;
  min-width: 0;
}

.public-nav a {
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
}

.public-nav a:hover {
  color: var(--blue);
}

.public-lang {
  display: flex;
  padding: 4px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.public-header .public-lang {
  margin-left: 0;
}

.public-header .public-nav + .public-lang {
  margin-left: 0;
}

.public-lang a {
  border: 0;
  border-radius: 7px;
  padding: 7px 10px;
  font-weight: 800;
  font-size: 12px;
  color: var(--muted);
}

.public-lang a.is-active {
  background: var(--blue-dark);
  color: #fff;
}

.public-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 46px 24px;
  margin-top: 60px;
}

.public-footer-inner {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.public-footer .muted {
  max-width: 360px;
  margin-top: 12px;
}

.public-footer-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.public-footer-links a {
  font-weight: 650;
}

/* Vater LandingPage (localhost:3000/en) */
.landing-body {
  background: var(--pale, #f3f7fd);
  margin: 0;
}
.landing-shell {
  max-width: 1520px;
  margin: auto;
  padding: 18px 28px 30px;
  color: var(--text);
}
.landing-shell .network-compliance-footer {
  margin-top: 24px;
}
.landing-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 25px;
  padding: 13px 17px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 12px 40px rgba(6, 31, 69, .08);
  backdrop-filter: blur(18px);
}
.landing-header .landing-brand {
  display: flex;
  width: 138px;
  height: 72px;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}
.landing-header .landing-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
.landing-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.landing-header .logo strong {
  display: block;
  font-size: 14px;
  letter-spacing: .04em;
}
.landing-header .logo small {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 700;
}
.landing-header nav {
  display: flex;
  gap: 25px;
}
.landing-header nav a {
  font-size: 13px;
  font-weight: 750;
  color: var(--muted);
  text-decoration: none;
}
.landing-header nav a:hover {
  color: var(--blue);
}
.landing-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.landing-login,
.landing-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 17px;
  border: 1px solid var(--border);
  border-radius: 11px;
  font-weight: 800;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
.landing-join {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.landing-shell .landing-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 54px;
  align-items: center;
  padding: 92px 28px 68px;
  background: transparent;
  color: var(--text);
  min-width: 0;
}
.landing-eyebrow {
  display: block;
  color: #10bddd;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .16em;
  margin: 0;
}
.hero-copy h1 {
  max-width: 700px;
  margin: 17px 0 20px;
  font-size: clamp(43px, 5vw, 72px);
  line-height: 1.01;
  letter-spacing: -.055em;
  color: var(--text);
}
.hero-copy > p {
  max-width: 680px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
.hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.hero-benefits span {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.hero-benefits svg {
  color: #0ba579;
}
.hero-buttons {
  display: flex;
  gap: 11px;
  margin: 25px 0 20px;
  flex-wrap: wrap;
}
.hero-copy > small {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  max-width: 640px;
  color: var(--muted);
  line-height: 1.5;
}
.hero-proof {
  overflow: hidden;
  border: 1px solid rgba(75, 214, 245, .35);
  border-radius: 24px;
  background: #edf4ff;
  box-shadow: 0 34px 80px rgba(4, 35, 77, .2);
  transform: perspective(1200px) rotateY(-3deg);
}
.hero-proof > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
}
.proof-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
  background: #fff;
  border-top: 1px solid #d9e5f6;
  color: #62718b;
  font-size: 12px;
  font-weight: 650;
}
.proof-caption svg {
  flex: 0 0 auto;
  color: #0ba579;
}
.product-window {
  overflow: hidden;
  border: 1px solid rgba(75, 214, 245, .35);
  border-radius: 24px;
  background: #edf4ff;
  box-shadow: 0 34px 80px rgba(4, 35, 77, .2);
  transform: perspective(1200px) rotateY(-3deg);
}
.product-top {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  background: #fff;
  border-bottom: 1px solid #d9e5f6;
  color: #62718b;
}
.product-top span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dbe4f0;
}
.product-top span:first-child {
  background: #20b8db;
}
.product-top b {
  margin-left: 8px;
  font-size: 11px;
}
.product-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 390px;
}
.product-body aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 15px;
  background: #fff;
  border-right: 1px solid #d9e5f6;
  color: #0b1d3b;
}
.product-window .avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1770ef, #19c6df);
  color: #fff;
  font-weight: 900;
}
.product-body aside strong {
  margin-top: 10px;
}
.product-body aside i {
  font-size: 10px;
  color: #71809b;
  margin: 4px 0 23px;
  font-style: normal;
}
.product-body aside em {
  width: 100%;
  padding: 9px 11px;
  font-style: normal;
  font-size: 11px;
  border-radius: 8px;
}
.product-body aside em:first-of-type {
  background: #e9f2ff;
  color: #1466e8;
  font-weight: 800;
}
.product-main {
  padding: 25px;
}
.product-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid #d7e3f4;
  border-radius: 12px;
  background: #fff;
  color: #8490a5;
  font-size: 12px;
}
.product-banner {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 18px;
  padding: 28px;
  border-radius: 16px;
  background: radial-gradient(circle at 90% 10%, #175183, #081d48 70%);
  color: white;
}
.product-banner small {
  color: #4bdef7;
  font-weight: 900;
  letter-spacing: .12em;
}
.product-banner strong {
  font-size: 25px;
  line-height: 1.2;
}
.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-top: 16px;
}
.metric-row span {
  padding: 17px 6px;
  text-align: center;
  border: 1px solid #d7e3f4;
  border-radius: 12px;
  background: #fff;
  color: #68758c;
  font-size: 9px;
}
.metric-row b {
  display: block;
  color: #0d2244;
  font-size: 21px;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.value-section .value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.value-grid article {
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.value-grid strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  margin-bottom: 6px;
}
.value-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.comparison-section .comparison-table {
  margin-top: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  background: var(--surface);
}
.comparison-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr .7fr;
  gap: 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.comparison-row:last-child {
  border-bottom: 0;
}
.comparison-row > * {
  padding: 14px 16px;
  color: var(--muted);
}
.comparison-row > :first-child {
  color: var(--text);
  font-weight: 700;
}
.comparison-head {
  background: color-mix(in srgb, var(--pale) 70%, var(--surface));
}
.comparison-head > * {
  color: var(--text) !important;
  font-size: 12px;
  font-weight: 800;
}
.trust-strip span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}
.trust-strip svg {
  color: #11a77b;
}
.landing-section {
  padding: 90px 28px;
}
.landing-section h2,
.landing-cta-band h2 {
  max-width: 800px;
  margin: 12px 0;
  font-size: clamp(34px, 4vw, 55px);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.section-lead {
  max-width: 800px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 38px;
}
.feature-grid article {
  display: flex;
  gap: 17px;
  padding: 25px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface);
}
.feature-icon {
  display: grid;
  place-items: center;
  flex: 0 0 45px;
  height: 45px;
  border-radius: 12px;
  background: var(--soft-blue, var(--soft, #e9f2ff));
  color: var(--blue);
}
.feature-grid h3 {
  margin: 8px 0 6px;
  font-size: 18px;
}
.feature-grid p,
.faq-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.status {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #07845f;
}
.status.prototype {
  color: #9c6500;
}
.benefit-section {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 55px;
  align-items: center;
  border-block: 1px solid var(--border);
}
.benefit-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.benefit-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.benefit-points svg {
  color: var(--blue);
  flex: 0 0 auto;
}
.landing-section.marketplace {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 55px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}
.market-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 20px 0;
}
.market-tags span {
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--soft-blue, var(--soft, #e9f2ff));
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.offer-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.offer-cards article {
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.offer-visual {
  overflow: hidden;
  display: block;
  height: 145px;
  margin-bottom: 13px;
  border-radius: 11px;
  background: #07182f;
}
.offer-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offer-visual.consulting {
  background: none;
}
.offer-cards b,
.offer-cards small {
  display: block;
  padding: 2px 5px;
}
.offer-cards small {
  color: var(--muted);
}
.ai-section {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
  margin: 50px 0;
  padding: 64px;
  border-radius: 24px;
  background: radial-gradient(circle at 10% 20%, #164c7c, #06162f 68%);
  color: #fff;
}
.ai-section .ai-icon {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(70, 224, 249, .5);
  border-radius: 50%;
  background: rgba(20, 152, 200, .12);
  color: #4de4fa;
}
.ai-section h2 {
  margin-top: 14px;
  color: #fff;
}
.ai-section p {
  max-width: 820px;
  color: #c5d4e8;
  line-height: 1.7;
}
.ai-section .status {
  display: inline-block;
  margin-bottom: 12px;
  color: #ffd36b;
}
.pricing-section {
  text-align: center;
}
.pricing-section > h2,
.pricing-section > .section-lead {
  margin-left: auto;
  margin-right: auto;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 400px));
  justify-content: center;
  gap: 18px;
  margin: 35px auto 0;
}
.price-grid--3 {
  grid-template-columns: repeat(3, minmax(240px, 340px));
  max-width: 1100px;
}
.price-card {
  position: relative;
  padding: 27px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.price-card.featured {
  border-color: var(--blue);
  box-shadow: 0 16px 45px rgba(27, 103, 235, .13);
}
.price-badge {
  position: absolute;
  right: 18px;
  top: 18px;
  color: #9b6900;
  font-size: 10px;
  font-weight: 900;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 18px 0 8px;
}
.price b {
  font-size: 38px;
}
.price span {
  color: var(--muted);
}
.trial-line {
  display: block;
  min-height: 35px;
  color: #07845f;
  font-size: 12px;
}
.price-card ul {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 20px 0;
  list-style: none;
}
.price-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.price-card li svg {
  width: 16px;
  color: #0da777;
}
.pricing-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin-top: 27px;
}
.pricing-assurances span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.pricing-assurances svg {
  width: 15px;
  color: #0da777;
}
.pricing-note {
  max-width: 800px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px;
}
.faq-list details {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}
.faq-list summary {
  cursor: pointer;
  font-weight: 800;
}
.faq-list p {
  margin-top: 12px;
}
.landing-cta,
.landing-cta-band {
  text-align: center;
  margin: 10px 0 28px;
  padding: 70px 25px;
  border-radius: 24px;
  background: radial-gradient(circle at 70% 0%, #165488, #061b43 65%);
  color: #fff;
}
.landing-cta h2,
.landing-cta-band h2 {
  margin: 0 auto 14px;
  color: #fff;
}
.landing-cta p,
.landing-cta-band p {
  color: #c8d7ee;
}
.landing-cta .landing-join,
.landing-cta-band .landing-join {
  margin-top: 15px;
  background: #1d6ff0;
  border-color: #1d6ff0;
}
@media (max-width: 1300px) and (min-width: 1025px) {
  .landing-shell .landing-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
  }
  .hero-copy h1 {
    font-size: 48px;
  }
}
@media (max-width: 1024px) {
  .landing-header {
    grid-template-columns: 1fr auto;
  }
  .landing-header nav {
    display: none;
  }
  .landing-shell .landing-hero {
    grid-template-columns: 1fr;
    padding-top: 60px;
  }
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .landing-section.marketplace,
  .benefit-section {
    grid-template-columns: 1fr;
  }
  .product-window,
  .hero-proof {
    transform: none;
  }
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .landing-shell {
    padding: 8px;
    overflow-x: clip;
  }
  .landing-header {
    top: 4px;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 8px 10px;
  }
  .landing-header .landing-brand {
    width: 104px;
    height: 54px;
    margin: auto;
    justify-content: center;
  }
  .landing-header .landing-brand img {
    object-position: center;
  }
  .landing-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, .82fr) minmax(0, 1.08fr);
    width: 100%;
    gap: 5px;
  }
  .landing-actions > * {
    min-width: 0;
  }
  .landing-actions > .landing-login,
  .landing-actions > .landing-join {
    display: inline-flex !important;
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .landing-shell .landing-hero,
  .landing-section {
    padding: 48px 8px;
  }
  .landing-shell .landing-hero {
    gap: 28px;
  }
  .hero-copy h1 {
    font-size: clamp(32px, 10vw, 38px);
    overflow-wrap: break-word;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-buttons a {
    width: 100%;
    min-height: 46px;
  }
  .hero-proof {
    border-radius: 16px;
  }
  .proof-caption {
    font-size: 10px;
  }
  .feature-grid,
  .value-grid,
  .price-grid,
  .faq-list,
  .offer-cards,
  .benefit-points {
    grid-template-columns: 1fr;
  }
  .landing-section.marketplace {
    padding: 32px 16px;
  }
  .offer-visual {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .ai-section {
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 30px 0;
    padding: 34px 18px;
  }
  .ai-section .ai-icon {
    width: 95px;
    height: 95px;
  }
  .comparison-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .comparison-row {
    min-width: 620px;
    grid-template-columns: 1.2fr 1fr .7fr;
    font-size: 11px;
  }
  .trust-strip {
    justify-content: flex-start;
  }
  .landing-cta,
  .landing-cta-band {
    padding: 42px 18px;
  }
  .landing-cta .landing-join,
  .landing-cta-band .landing-join {
    width: 100%;
    min-height: 46px;
  }
}

.static-public {
  min-height: 600px;
  max-width: 900px;
  margin: 70px auto;
  padding: 0 24px;
}

.static-eyebrow {
  color: #087e8b;
  font-weight: 800;
  margin: 0 0 10px;
}

.static-public h1 {
  font-size: clamp(38px, 6vw, 58px);
  line-height: 1.1;
  margin: 0 0 16px;
}

.static-lead {
  font-size: 19px;
  line-height: 1.7;
  max-width: 760px;
  margin: 0;
}

.auth-form-card {
  padding: 26px;
  max-width: 580px;
  margin-top: 30px;
}

.auth-form-card form {
  display: grid;
  gap: 16px;
}

.auth-form-card label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.auth-form-card input,
.auth-form-card select {
  padding: 12px;
  border: 1px solid #dde5ee;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.auth-form-note {
  font-size: 13px;
  margin-top: 16px;
}

.marketing-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pale);
}

.marketing-footer-wrap {
  margin-top: auto;
  width: min(100% - clamp(16px, 3vw, 48px), 1200px);
  margin-inline: auto;
  padding-bottom: clamp(16px, 3vw, 28px);
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .public-header .public-lang {
    margin-left: auto;
  }
}

/* ---------- Legacy marketing helpers ---------- */

.marketing-page {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  background: var(--pale);
  color: var(--text);
}

.hero {
  position: relative;
  width: 100%;
  min-height: min(72vh, 640px);
  display: grid;
  align-items: center;
  padding: 4rem 1.25rem;
  background:
    linear-gradient(120deg, rgba(7, 20, 36, 0.04), rgba(22, 100, 234, 0.08)),
    var(--pale);
  color: var(--text);
}

.hero__content {
  width: min(100%, 720px);
  margin: 0 auto;
}

.hero__brand,
.hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--navy);
  line-height: 1.1;
}

[data-theme="dark"] .hero__brand,
[data-theme="dark"] .hero h1 {
  color: var(--text);
}

.hero__headline {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 650;
  color: var(--blue);
  line-height: 1.35;
}

.hero__lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 36rem;
  line-height: 1.55;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.auth-card,
.auth-panel {
  margin: 2.5rem auto;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  color: var(--text);
}

.auth-panel {
  width: min(100%, 420px);
}

.auth-card h1,
.auth-panel h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  color: var(--navy);
}

[data-theme="dark"] .auth-card h1,
[data-theme="dark"] .auth-panel h1 {
  color: var(--text);
}

.marketing-section {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}

.marketing-section h2 {
  font-size: 1.75rem;
  margin: 0 0 0.5rem;
  color: var(--navy);
}

[data-theme="dark"] .marketing-section h2 {
  color: var(--text);
}

.marketing-section > p {
  color: var(--muted);
  max-width: 40rem;
}

/* ---------- App shell (network header / nav) ---------- */

.app-shell {
  flex: 1 1 auto;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pale);
}

.network-header,
.app-nav,
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 100);
  flex: 0 0 auto;
  height: var(--app-header-height, 76px);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  overflow: visible;
}

.network-header-inner,
.app-nav {
  height: 100%;
  width: min(100% - 44px, 1400px);
  max-width: 1400px;
  margin: auto;
  padding: 0 22px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  min-width: 0;
}

.network-header-inner > .top-nav {
  order: 1;
  margin-left: 0;
  margin-right: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}

.network-header-inner > .network-brand-slot {
  order: 2;
  flex: 0 0 236px;
  height: 100%;
}

.network-header-inner > .header-actions {
  order: 3;
  margin-left: auto;
}

.top-nav,
.app-nav__links {
  display: flex;
  height: 100%;
  align-items: stretch;
  margin-left: 0;
  gap: 0;
}

.top-link,
.app-nav__links a {
  position: relative;
  min-width: 76px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.15;
  padding: 0 8px;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
}

.top-link:hover,
.top-link.active,
.app-nav__links a:hover,
.app-nav__links a.is-active {
  color: var(--blue);
}

.top-link.active:after,
.app-nav__links a.is-active:after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 3px 3px 0 0;
}

.header-actions,
.app-nav__user {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--border);
  padding-left: 12px;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: none;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.9rem;
}

.header-actions > .lang-menu,
.header-actions > .profile-trigger,
.header-actions > .btn,
.header-actions > form {
  flex: 0 0 auto;
}

.profile-trigger {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
}

.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 11px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(168px, 22vw);
  overflow: hidden;
}
.weather-chip__icon,
.weather-chip__spinner {
  flex: 0 0 auto;
}
.weather-chip__text {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
}
.weather-chip__place {
  min-width: 0;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-chip__sep,
.weather-chip__temp {
  flex: 0 0 auto;
  white-space: nowrap;
}
.weather-chip__sep[hidden],
.weather-chip__temp[hidden] {
  display: none !important;
}
.weather-chip:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
}
.weather-chip.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.weather-chip svg {
  color: var(--blue);
}
.weather-chip__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: xbn-weather-spin 0.7s linear infinite;
}
@keyframes xbn-weather-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .weather-chip__spinner { animation: none; border-top-color: var(--muted); }
}

.weather-wrap {
  position: relative;
  display: inline-flex;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}

/* Desktop ≥1024: Ort + Temperatur */
@media (min-width: 1024px) {
  .weather-chip {
    max-width: min(280px, 32vw);
  }
}

/* Engere Laptops: Ort stark kürzen, Temperatur bleibt */
@media (max-width: 1023px) and (min-width: 901px) {
  .weather-chip {
    max-width: min(148px, 20vw);
    padding: 8px 9px;
  }
  .weather-chip.weather-chip--has-temp .weather-chip__place {
    max-width: 5.5rem;
  }
}

/* Mobile: Icon + Temperatur (Ort nur im Popover) */
@media (max-width: 900px) {
  .weather-chip {
    max-width: none;
    flex: 0 0 auto;
    padding: 8px;
  }
  .weather-chip.weather-chip--has-temp .weather-chip__place,
  .weather-chip.weather-chip--has-temp .weather-chip__sep {
    display: none;
  }
  .weather-chip.weather-chip--prompt .weather-chip__place {
    max-width: 7.5rem;
  }
}

.weather-popover {
  position: fixed;
  z-index: var(--z-overlay, 200);
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 22px 65px rgba(5, 18, 38, 0.24);
}
.weather-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}
.weather-popover header strong {
  display: block;
  font-size: 0.92rem;
}
.weather-popover header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.weather-popover header button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
}
.weather-popover__body {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.weather-popover__action {
  width: 100%;
  justify-content: center;
}
.weather-popover__hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted);
}
.weather-popover__meta {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
}
.weather-popover__status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
  color: var(--text);
}
.weather-popover__status.is-error {
  background: color-mix(in srgb, #c45c26 10%, var(--surface-2));
}

.weather-manual {
  display: grid;
  gap: 6px;
}
.weather-manual__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}
.weather-manual__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.weather-manual__results {
  list-style: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  max-height: 180px;
  overflow: auto;
}
.weather-manual__results li {
  margin: 0;
}
.weather-manual__pick {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
}
.weather-manual__pick:hover,
.weather-manual__pick:focus {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
}
.weather-manual__empty {
  padding: 10px;
  font-size: 0.8rem;
  color: var(--muted);
}

.header-popover {
  position: fixed;
  z-index: var(--z-overlay, 200);
  right: max(12px, min(170px, calc(100vw - 352px)));
  top: calc(var(--app-header-height, 76px) + 8px);
  width: min(340px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  overflow: hidden;
  box-shadow: 0 22px 65px rgba(5, 18, 38, 0.24);
}

.header-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
}

.header-popover header small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.header-popover header button {
  border: 0;
  background: transparent;
}

.notification-panel > a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.notification-panel > a.unread {
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.notification-panel > a span > strong,
.notification-panel > a span > small,
.notification-panel time {
  display: block;
}

.notification-panel > a span > strong {
  font-size: 12px;
}

.notification-panel > a span > small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.notification-panel time {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}

.notice-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
}

.notification-panel footer {
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notification-panel footer button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
}

.notification-panel footer .xbn-notify-clear-all {
  color: var(--muted);
  font-weight: 600;
}

/* Max ~3 visible notification rows; overflow scrolls inside the list */
#xbn-notify-list.xbn-notify-list {
  --xbn-notify-visible-rows: 3;
  --xbn-notify-row-size: 4.85rem;
  max-height: calc(var(--xbn-notify-visible-rows) * var(--xbn-notify-row-size));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#xbn-notify-list > a,
#xbn-notify-list .notice-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  min-height: var(--xbn-notify-row-size, 4.85rem);
  box-sizing: border-box;
}

#xbn-notify-list .notice-item-main {
  min-width: 0;
}

#xbn-notify-list .notice-dismiss {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

#xbn-notify-list .notice-dismiss:hover {
  background: var(--surface-2);
  color: var(--text);
}

.create-menu {
  right: 430px;
  width: 250px;
  padding-bottom: 7px;
}

.create-menu > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  font-size: 12px;
}

.create-menu > a:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.conference-modal {
  width: min(650px, 100%);
  padding: 24px;
}

.conference-modal > header {
  display: flex;
  justify-content: space-between;
}

.conference-modal > header small {
  color: var(--blue);
  font-weight: 800;
}

.conference-modal > header h2 {
  margin: 5px 0;
}

.conference-modal > header button {
  border: 0;
  background: transparent;
}

.conference-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 18px 0;
}

.conference-options > button {
  display: grid;
  gap: 6px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
}

.conference-options > button.active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

.conference-options small {
  color: var(--muted);
}

.conference-modal > label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 14px;
}

.conference-modal > label input {
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
}

.conference-ready {
  text-align: center;
  padding: 22px;
}

.conference-ready code {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--surface-2);
  font-size: 18px;
  color: var(--blue);
}

.notification-dot {
  position: absolute;
  right: 3px;
  top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e5484d;
  color: white;
  font-size: 10px;
  font-style: normal;
}

.network-main,
.app-main,
.app-content {
  position: relative;
  z-index: var(--z-base, 0);
  isolation: isolate;
  width: min(100% - clamp(16px, 3vw, 40px), 1360px);
  max-width: 1360px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 24px) 0 clamp(24px, 3vw, 40px);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
  overflow: visible;
  box-sizing: border-box;
}

/* Feed: Header → Main (flex) → Footer; document scroll, no fixed footer */
.network-main:has(> .feed-dashboard),
.app-content:has(> .feed-dashboard) {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.network-main > .network-compliance-footer,
.app-content > .network-compliance-footer {
  width: min(100% - clamp(24px, 4vw, 32px), 1320px);
  max-width: 1320px;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: clamp(16px, 2vw, 28px);
  margin-left: auto;
  flex: 0 0 auto;
  position: static;
  box-sizing: border-box;
}

.app-main--narrow {
  max-width: 560px;
}

.app-footer {
  padding: 1.25rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

.mobile-bottom {
  position: fixed;
  z-index: 25;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mobile-bottom a {
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
}

@media (max-width: 650px) {
  .conference-options {
    grid-template-columns: 1fr;
  }

  .header-popover {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .network-main,
  .app-main {
    padding: clamp(14px, 2vw, 18px) clamp(10px, 2vw, 14px) calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .network-main:has(> .feed-dashboard),
  .app-content:has(> .feed-dashboard) {
    padding: 0;
  }

  .network-header-inner,
  .app-nav {
    padding: 0 12px;
    gap: 8px;
  }

  .network-main > .network-compliance-footer,
  .app-content > .network-compliance-footer,
  .feed-dashboard > .network-compliance-footer,
  .dashboard-main > .network-compliance-footer {
    margin-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .conference-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1320px) and (min-width: 901px) {
  .top-link,
  .app-nav__links a {
    min-width: 56px;
    padding: 0 4px;
  }

  .network-header-inner,
  .app-nav {
    padding-inline: 12px;
    gap: 6px;
  }

  .network-header-inner > .network-brand-slot,
  .network-brand-slot {
    flex-basis: 168px;
    min-width: 0;
  }

  .network-header-inner > .top-nav,
  .top-nav {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .network-header-inner > .top-nav::-webkit-scrollbar,
  .top-nav::-webkit-scrollbar {
    display: none;
  }

  .header-actions,
  .app-nav__user {
    gap: 6px;
    padding-left: 8px;
    min-width: 0;
    flex-shrink: 0;
  }

  .lang-menu__trigger .desktop-only {
    display: none !important;
  }

  .lang-menu__trigger {
    padding: 8px 10px;
  }
}

@media (max-width: 1220px) and (min-width: 901px) {
  .top-link,
  .app-nav__links a {
    min-width: 52px;
    padding: 0 4px;
  }

  .network-header-inner > .network-brand-slot,
  .network-brand-slot {
    flex-basis: 152px;
  }

  .network-brand-copy strong {
    font-size: 18px;
  }

  .network-brand-copy i {
    width: 8px;
  }

  .network-header-inner,
  .app-nav {
    padding-inline: 14px;
  }

  .header-actions,
  .app-nav__user {
    gap: 6px;
    padding-left: 8px;
  }

  .header-actions .btn {
    padding: 8px;
  }
}

/* ---------- Account menu (Vater AccountMenu + open/close motion) ---------- */

.account-menu {
  position: fixed;
  z-index: var(--z-overlay, 200);
  right: max(12px, min(20px, calc(100vw - 302px)));
  top: calc(var(--app-header-height, 76px) + 8px);
  width: min(290px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  overflow: hidden;
  box-shadow: 0 22px 65px rgba(5, 18, 38, 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  will-change: opacity, transform;
}

.account-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Allow opacity transition (native [hidden] uses display:none) */
.account-menu[hidden] {
  display: block !important;
}

.account-menu header {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 13px;
}

.account-menu header strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.account-menu header small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
}

.account-menu header button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 8px;
}

.account-menu header button:hover {
  color: var(--text);
  background: var(--surface-2);
}

.view-profile {
  display: block;
  margin: 0 14px 10px;
  text-align: center;
  border: 1px solid var(--blue);
  border-radius: 999px;
  padding: 7px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  background: var(--surface);
}

.view-profile:hover {
  background: var(--soft-blue, var(--soft));
}

.account-menu nav {
  border-top: 1px solid var(--border);
  padding: 8px;
}

.account-menu nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 9px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}

.account-menu nav a svg {
  flex: 0 0 auto;
  color: var(--muted);
}

.account-menu nav a:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.account-menu nav a:hover svg {
  color: var(--blue);
}

.account-menu footer {
  border-top: 1px solid var(--border);
  padding: 9px;
}

.account-menu footer button {
  border: 0;
  background: transparent;
  display: flex;
  gap: 8px;
  padding: 8px;
  color: var(--muted);
  width: 100%;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  align-items: center;
  border-radius: 8px;
}

.account-menu footer button:hover {
  background: var(--surface-2);
}

.chat-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.chat-panel-head-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-panel-head-actions button {
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: var(--text);
}

.chat-mode-switch button.active {
  background: #dff4ff;
  color: #075f8c;
}

.chat-list {
  overflow-y: auto;
  flex: 1;
}

.chat-list-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: inherit;
}

.chat-list-item:hover {
  background: var(--surface-2);
}

.chat-list-item strong,
.chat-list-item small,
.chat-list-item time {
  display: block;
}

.chat-list-item small {
  color: var(--muted);
  margin-top: 4px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-list-item time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
}

.chat-empty {
  padding: 24px 16px 8px;
  text-align: center;
}

.chat-empty-cta {
  display: block;
  margin: 8px 16px 20px;
  text-align: center;
}

.mobile-bottom-btn {
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.conference-room {
  padding: 0;
  overflow: hidden;
}

.conference-room__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.conference-room__head small {
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.conference-room__head h1 {
  margin: 4px 0 6px;
  font-size: 1.35rem;
}

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

.conference-room__frame {
  height: min(720px, calc(100vh - 220px));
  height: min(720px, calc(100dvh - 220px));
  min-height: min(420px, 70svh);
  background: #0a1628;
}

.conference-room__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.top-link {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ---------- Chat panel (global floating messenger) ---------- */

.chat-panel {
  --xbn-chat-panel-width: min(360px, calc(100vw - 32px));
  --xbn-chat-panel-max-height: min(560px, calc(100dvh - var(--app-header-height, 76px) - 32px));
  --xbn-chat-visible-rows: 3;
  --xbn-chat-row-size: 4.35rem;
  position: fixed;
  z-index: var(--z-overlay, 200);
  right: 16px;
  bottom: 16px;
  top: auto;
  width: var(--xbn-chat-panel-width);
  height: var(--xbn-chat-panel-max-height);
  max-height: var(--xbn-chat-panel-max-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 48px rgba(7, 20, 36, 0.22);
  border-radius: 14px;
  transform-origin: bottom right;
  pointer-events: auto;
}
.chat-panel[hidden] {
  display: none !important;
}
.chat-panel.is-expanded {
  height: var(--xbn-chat-panel-max-height);
  max-height: var(--xbn-chat-panel-max-height);
  box-shadow: 0 16px 44px rgba(7, 20, 36, 0.26);
  border-radius: 14px;
}

.chat-panel .chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  cursor: default;
  user-select: none;
  min-height: 56px;
  height: 56px;
  box-sizing: border-box;
  background: #fff;
  color: var(--text);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.chat-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
}

.chat-head-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

.chat-head-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.chat-head-messages-label {
  display: none;
}

.chat-panel.chat-head-mode-inbox .chat-head-name-live,
.chat-panel.chat-head-mode-inbox .chat-head-status {
  display: none !important;
}

.chat-panel.chat-head-mode-inbox .chat-head-messages-label {
  display: block;
}

.chat-panel.chat-head-mode-thread .chat-head-messages-label,
.chat-panel.chat-head-mode-thread .chat-unread-pill {
  display: none !important;
}

.chat-panel.is-minimized.chat-head-mode-thread .chat-head-name-live,
.chat-panel.is-minimized.chat-head-mode-thread .chat-head-status {
  display: none !important;
}

.chat-panel.is-minimized .chat-head-messages-label {
  display: block !important;
}

.chat-panel.is-minimized .chat-unread-pill:not([hidden]) {
  display: inline-flex !important;
  margin-top: 2px;
}

.chat-unread-pill {
  display: none;
  align-items: center;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, #fff);
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.chat-panel.is-minimized.chat-head-mode-inbox .chat-unread-pill:not([hidden]) {
  display: inline-flex;
}

.chat-unread-pill[hidden] {
  display: none !important;
}

.chat-head-actions {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

.chat-menu-wrap {
  position: relative;
}

.chat-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: calc(var(--z-overlay, 200) + 1);
  min-width: 220px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 12px 32px rgba(7, 20, 36, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-menu[hidden] {
  display: none !important;
}

.chat-menu [role="menuitem"] {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}

.chat-menu [role="menuitem"]:hover,
.chat-menu [role="menuitem"]:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.chat-panel .chat-head .icon-button {
  cursor: pointer;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #334155;
  display: grid;
  place-items: center;
}

.chat-panel .chat-head .icon-button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.chat-panel .chat-head .icon-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 55%, white);
  outline-offset: 1px;
}

.chat-online-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a9b65;
  margin-right: 4px;
  vertical-align: middle;
}

.chat-head-status {
  font-size: 11px;
  line-height: 1.2;
}

.chat-panel.is-collapsed .chat-mode-switch,
.chat-panel.is-collapsed #xbn-chat-list-view,
.chat-panel.is-collapsed #xbn-chat-compose-view,
.chat-panel.is-collapsed #xbn-chat-thread-view,
.chat-panel.is-collapsed #xbn-chat-footer {
  display: none !important;
}

.chat-panel.is-minimized {
  width: var(--xbn-chat-panel-width, min(360px, calc(100vw - 32px)));
  height: 56px;
  max-height: 56px;
  right: 16px;
  bottom: 16px;
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(7, 20, 36, 0.22);
  overflow: visible;
}

.chat-panel.is-minimized .chat-mode-switch,
.chat-panel.is-minimized #xbn-chat-list-view,
.chat-panel.is-minimized #xbn-chat-compose-view,
.chat-panel.is-minimized #xbn-chat-thread-view,
.chat-panel.is-minimized #xbn-chat-footer {
  display: none !important;
}

.chat-panel.is-minimized .chat-head {
  border-bottom: 0;
  min-height: 56px;
  height: 56px;
  padding: 0 6px 0 12px;
  cursor: pointer;
  border-radius: 14px;
}

.chat-panel.is-minimized .chat-head-main {
  cursor: pointer;
}

.chat-panel.is-compose #xbn-chat-compose-view {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#xbn-chat-compose-view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #fff;
}

.chat-compose-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.chat-compose-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: inherit;
}

.chat-compose-head button:hover,
.chat-compose-head button:focus-visible {
  background: var(--surface-2);
}

.chat-compose-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}

.chat-compose-search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: inherit;
}

.chat-compose-results {
  flex: 1;
  overflow: auto;
  padding: 0 8px 12px;
}

.chat-compose-hint {
  padding: 16px 12px;
  font-size: 13px;
}

.chat-compose-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
}

.chat-compose-person:hover,
.chat-compose-person:focus-visible {
  background: var(--surface-2);
  outline: none;
}

@media (max-width: 760px) {
  .chat-panel.is-minimized {
    right: 12px;
    bottom: 76px;
    width: min(320px, calc(100vw - 24px));
  }
}

.chat-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 6px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.chat-mode-switch button {
  border: 0;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  color: var(--muted);
}

.private-mode .chat-mode-switch button.active {
  background: #dff4ff;
  color: #075f8c;
}

.company-mode .chat-mode-switch button.active {
  background: #173f88;
  color: white;
}

.company-mode .chat-head {
  background: #fff;
  color: var(--text);
}

.company-mode .chat-head .muted {
  color: var(--muted);
}

.company-mode .chat-head .icon-button {
  color: #334155;
}

.company-mode .chat-head .icon-button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.company-mode .active-chat-head .icon-button,
.company-mode .message-form .icon-button,
.company-mode .attach-button {
  color: inherit;
}

.private-mode .chat-head .icon-button:hover {
  background: var(--surface-2);
  color: var(--blue);
}

.company-mode .avatar {
  background: linear-gradient(135deg, #13336d, #2867c7);
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.icon-button {
  border: 0;
  background: transparent;
  padding: 7px;
  border-radius: 8px;
}

.icon-button:hover {
  background: var(--surface-2);
}

.chat-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--surface-2);
  border-radius: 9px;
}

.chat-search input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
}

.chat-tabs {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
}

.chat-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 13px;
  font-weight: 700;
}

.chat-tabs button:first-child {
  color: var(--blue);
  border-color: var(--blue);
}

.conversation-list {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(var(--xbn-chat-visible-rows, 3) * var(--xbn-chat-row-size, 4.35rem));
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.conversation {
  min-height: var(--xbn-chat-row-size, 4.35rem);
  box-sizing: border-box;
}

#xbn-chat-list-view,
#xbn-chat-thread-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#xbn-notify-list > a,
#xbn-notify-list .notice-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 8px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

#xbn-notify-list .notice-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

#xbn-notify-list > a.unread,
#xbn-notify-list .notice-item.unread {
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}

#xbn-notify-list > a span > strong,
#xbn-notify-list > a span > small,
#xbn-notify-list .notice-link span > strong,
#xbn-notify-list .notice-link span > small,
#xbn-notify-list time {
  display: block;
}

#xbn-notify-list > a span > strong,
#xbn-notify-list .notice-link span > strong {
  font-size: 12px;
}

#xbn-notify-list > a span > small,
#xbn-notify-list .notice-link span > small {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

#xbn-notify-list time {
  font-size: 9px;
  color: var(--muted);
  margin-top: 4px;
}

.conversation {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.conversation:hover {
  background: var(--surface-2);
}

.conversation-copy {
  min-width: 0;
}

.conversation-copy strong,
.conversation-copy small {
  display: block;
}

.conversation-copy small {
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation time {
  align-self: start;
  color: var(--muted);
  font-size: 11px;
}

.chat-panel footer {
  text-align: center;
  padding: 13px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
}

.active-chat-head {
  display: grid;
  grid-template-columns: 30px 42px 1fr;
  gap: 8px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.active-chat-head > button {
  border: 0;
  background: transparent;
}

.active-chat-head small {
  display: block;
  margin-top: 2px;
  color: #0a9b65;
}

.message-stream {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 15px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 9px;
  overscroll-behavior: contain;
}

.bubble {
  max-width: min(82%, 100%);
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
  padding: 9px 11px;
  font-size: 13px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bubble.mine {
  align-self: flex-end;
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  border-radius: 14px 14px 4px 14px;
}
.bubble.is-pending {
  opacity: 0.72;
}
.bubble.is-failed {
  outline: 1px solid #e5484d;
}

.bubble time {
  display: block;
  font-size: 9px;
  opacity: 0.7;
  text-align: right;
  margin-top: 4px;
}

.bubble-translate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bubble-translate-btn,
.bubble-original-btn,
.bubble-view-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.85;
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bubble.mine .bubble-translate-btn,
.bubble.mine .bubble-original-btn,
.bubble.mine .bubble-view-toggle {
  color: rgba(255, 255, 255, 0.92);
}

.bubble-translation {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: 12.5px;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.bubble-translation small {
  display: block;
  font-size: 10px;
  opacity: 0.75;
  margin-bottom: 3px;
}

.xbn-message-toast-host {
  position: fixed;
  z-index: var(--z-toast, 500);
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(320px, calc(100vw - 24px));
  pointer-events: none;
}

.xbn-message-toast {
  pointer-events: auto;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(5, 18, 38, 0.22);
  padding: 12px 14px;
  cursor: pointer;
  animation: xbn-toast-in 0.28s ease;
}

.xbn-message-toast.is-out {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.xbn-message-toast strong,
.xbn-message-toast span {
  display: block;
}

.xbn-message-toast strong {
  font-size: 13px;
  margin-bottom: 4px;
}

.xbn-message-toast span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes xbn-toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bubble-context,
.message-context {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-bottom: 4px;
}

.bubble-context.is-private,
.message-context.is-private,
.bubble-context.is-person,
.message-context.is-person {
  color: inherit;
  opacity: 0.7;
}

.bubble-context-sub,
.message-context-sub {
  display: block;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.65;
  margin: -2px 0 4px;
}

.bubble.mine .bubble-context.is-company,
.message.mine .message-context.is-company {
  opacity: 0.95;
}

.xbn-chat-notice {
  margin: 8px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
  font-size: 12px;
  line-height: 1.35;
}

.xbn-chat-notice[hidden] {
  display: none !important;
}

.message-form {
  display: flex;
  gap: 7px;
  padding: 11px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
  background: var(--surface);
}

.message-form input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 10px 13px;
}

.message-form button {
  width: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: grid;
  place-items: center;
}

.message-form .attach-button {
  background: transparent !important;
  color: var(--muted) !important;
  border: 0 !important;
  width: 34px;
}

.compact-attachment-ready {
  padding: 0 12px 9px;
  background: var(--surface);
  font-size: 10px;
  color: var(--muted);
}

.compact-attachment-ready button {
  border: 0;
  background: transparent;
  color: #b3333d;
}

.bubble .compact-file {
  display: block;
  margin-top: 6px;
  padding: 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 10px;
}

.company-mode .bubble.mine,
.company-mode .message-form button {
  background: #174b9b;
  border-color: #174b9b;
}

.private-mode .bubble.mine,
.private-mode .message-form button {
  background: #159bd3;
  border-color: #159bd3;
}

@media (max-width: 900px) {
  .chat-panel.is-expanded {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(var(--mobile-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 8px);
    height: min(78svh, 560px);
    max-height: min(78svh, 560px);
    border-radius: 14px;
  }

  .chat-panel:not(.is-minimized):not(.is-collapsed) {
    bottom: calc(var(--mobile-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 8px);
  }

  .bubble {
    max-width: min(92%, 100%);
    padding: 10px 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
  }

  .bubble-body,
  .bubble-translation,
  .bubble .bubble-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bubble-body p + p,
  .bubble-translation p + p {
    margin-top: 0.55em;
  }

  .bubble a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .bubble-reply,
  .bubble-quote,
  .message-reply-preview {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .message-bubble {
    max-width: min(92%, 100%);
    padding: 10px 12px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ---------- Dashboard / LinkedIn grid (document scroll) ---------- */

.feed-dashboard,
.dashboard-main {
  width: min(100% - clamp(24px, 4vw, 32px), 1320px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(16px, 2.2vw, 24px) 0 clamp(24px, 3vw, 40px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  background-color: var(--user-workspace-background-color, var(--pale));
  background-image: var(--user-workspace-background-image, none);
  background-size: var(--user-workspace-background-size, auto);
  overflow: visible;
  min-width: 0;
}

.feed-layout,
.linkedin-grid,
.dashboard-grid {
  display: grid;
  /* Flexible rails so MacBook / ~1280–1440 CSS widths keep 3 columns */
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 260px);
  gap: clamp(12px, 1.5vw, 18px);
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: transparent;
  min-width: 0;
  overflow: visible;
  flex: 1 0 auto;
}

.feed-layout > .left-rail,
.feed-layout > .feed-left,
.dashboard-grid > .left-rail,
.dashboard-grid > .feed-left {
  grid-column: 1;
  grid-row: 1;
  overflow: visible;
}

.feed-layout > .feed-column,
.feed-layout > .feed-center,
.dashboard-grid > .feed-column,
.dashboard-grid > .feed-center {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feed-layout > .right-rail,
.feed-layout > .feed-right,
.dashboard-grid > .right-rail,
.dashboard-grid > .feed-right {
  grid-column: 3;
  grid-row: 1;
  overflow: visible;
}

.feed-static-top {
  /* Avoid display:contents — Safari/WebKit often breaks flex/grid participation + ResizeObserver */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
  width: 100%;
}

.feed-layout > .left-rail,
.feed-layout > .feed-left,
.feed-layout > .right-rail,
.feed-layout > .feed-right,
.dashboard-grid > .left-rail,
.dashboard-grid > .feed-left,
.dashboard-grid > .right-rail,
.dashboard-grid > .feed-right {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.dash-feed-stack {
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.dash-customize-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.dash-customize-bar__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.dash-customize-bar__copy strong { font-size: 0.95rem; }
.dash-customize-bar__copy span { font-size: 0.82rem; color: var(--muted); }
.dash-customize-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dash-customize-reset { margin: 0; }

.feed-dashboard.is-customizing .dash-module {
  position: relative;
  outline: 1px dashed color-mix(in srgb, var(--blue) 30%, var(--border));
  outline-offset: 2px;
  border-radius: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease, outline-color 180ms ease;
}
.feed-dashboard.is-customizing.is-reduced-motion .dash-module,
.feed-dashboard.is-customizing.is-reduced-motion .dash-drop-placeholder,
.feed-dashboard.is-customizing.is-reduced-motion .dash-drag-ghost {
  transition: none !important;
}
.feed-dashboard .dash-module.is-layout-removed {
  display: none !important;
}
.feed-dashboard.is-customizing .dash-module.is-layout-hidden {
  opacity: 0.45;
  filter: grayscale(0.25);
}
.feed-dashboard.is-customizing .dash-module.is-drag-source {
  display: none !important;
}
.feed-dashboard.is-customizing.is-dash-dragging .dash-module:not(.is-drag-source) {
  transition: transform 180ms ease, margin 180ms ease;
}

.dash-module-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface-2));
  border-radius: 10px 10px 0 0;
}
.dash-module-chrome__handle {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dash-module-chrome__handle:hover {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}
.dash-module-chrome__handle:active,
body.dash-grabbing .dash-module-chrome__handle {
  cursor: grabbing;
}
body.dash-grabbing {
  cursor: grabbing !important;
  user-select: none;
}
body.dash-grabbing * {
  cursor: grabbing !important;
}
.dash-module-chrome__label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  flex: 1;
  min-width: 0;
}
.dash-module-chrome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.dash-mod-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}
.dash-mod-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dash-mod-menu { position: relative; }
.dash-mod-menu > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.dash-mod-menu > summary::-webkit-details-marker { display: none; }
.dash-mod-menu__list {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 220px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.dash-mod-menu__list button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
}
.dash-mod-menu__list button:hover { background: var(--surface-2); }

.dash-drag-ghost {
  position: fixed;
  z-index: 10050;
  margin: 0 !important;
  pointer-events: none;
  opacity: 0.88;
  transform-origin: top left;
  box-shadow: 0 18px 40px rgba(8, 40, 72, 0.22);
  outline: 2px solid var(--blue) !important;
  outline-offset: 0;
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  max-height: min(70vh, 520px);
  max-height: min(70dvh, 520px);
}
.dash-drag-ghost .dash-module-chrome__actions,
.dash-drag-ghost .dash-mod-menu {
  display: none !important;
}

.dash-drop-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  margin: 0;
  padding: 12px;
  border: 2px dashed color-mix(in srgb, var(--blue) 55%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  box-sizing: border-box;
  transition: min-height 180ms ease, background 180ms ease, border-color 180ms ease;
}
.dash-drop-placeholder__line {
  display: block;
  width: min(100%, 180px);
  height: 3px;
  border-radius: 999px;
  background: var(--blue);
  opacity: 0.85;
}
.dash-drop-placeholder__label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
}

.feed-dashboard.is-dash-dragging [data-dash-zone].is-drop-allowed {
  outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}
.feed-dashboard.is-dash-dragging [data-dash-zone].is-drop-active {
  outline-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}
.feed-dashboard.is-dash-dragging [data-dash-zone].is-drop-denied {
  outline: 2px dashed color-mix(in srgb, #9aa3b2 50%, var(--border));
  outline-offset: 4px;
  border-radius: 16px;
  opacity: 0.72;
  filter: grayscale(0.15);
}

.feed-dashboard.is-touch-preferred .dash-module-chrome__handle {
  /* Handle stays available; menu remains the primary mobile alternative */
  min-width: 36px;
  min-height: 36px;
}

@media (max-width: 900px) {
  .dash-customize-bar__actions { width: 100%; }
  .dash-customize-bar__actions .btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .feed-dashboard.is-customizing .dash-module,
  .dash-drop-placeholder,
  .dash-drag-ghost {
    transition: none !important;
  }
}

.feed-dashboard > .network-compliance-footer,
.dashboard-main > .network-compliance-footer {
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  position: static;
}

.feed-layout > .modal:not(.interest-dialog),
.dashboard-grid > .modal:not(.interest-dialog) {
  /* Partner / other modals inside the grid: keep fixed overlay semantics */
  position: fixed;
  inset: 0;
  z-index: 11000;
  width: auto;
  height: auto;
  margin: 0;
  grid-column: unset;
  grid-row: unset;
}

.left-rail,
.right-rail {
  display: grid;
  gap: 15px;
  min-width: 0;
  max-width: 100%;
}

.left-rail > *,
.right-rail > *,
.feed-column > * {
  min-width: 0;
  max-width: 100%;
}

.feed-column:not(.feed-center) {
  display: grid;
  gap: 15px;
  min-width: 0;
}

.profile-card {
  text-align: center;
  overflow: hidden;
  padding-bottom: 0;
}

.profile-cover {
  height: 72px;
  background: linear-gradient(120deg, #081a3b, #1766bc 65%, #18c1e9);
  background-size: cover;
  background-position: center;
}

.profile-avatar {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: -42px auto 10px;
  border: 4px solid var(--surface);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.profile-card h2 {
  font-size: 18px;
  margin: 5px 12px;
  line-height: 1.25;
}

.profile-card p {
  font-size: 12px;
  margin: 5px 15px;
  line-height: 1.45;
}

.profile-card > small {
  display: block;
  padding: 0 14px;
  line-height: 1.45;
}

.profile-company {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding: 13px;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.profile-company-initials,
.partner-chip-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(66, 101, 146, 0.18);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

.partner-chip-initials {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
}

.profile-metrics {
  border-top: 1px solid var(--border);
  padding: 8px 0;
}

.profile-metrics > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 11px;
  text-align: left;
}

.profile-metrics span {
  max-width: 165px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.profile-metrics b {
  color: var(--blue);
}

.edit-profile-link {
  display: block;
  border-top: 1px solid var(--border);
  padding: 10px 13px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.interest-card {
  padding: 14px;
  text-align: left;
}

.interest-card h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.interest-card p {
  font-size: 11px;
  line-height: 1.4;
}

.interest-empty {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.35rem;
}

.interest-empty .muted {
  margin: 0;
  font-size: 12px;
}

.interest-chip-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.interest-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border, #d5e0ec));
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  word-break: break-word;
}

/* Interests modal: always viewport-centered, never clipped by rails */
.interest-dialog.modal,
#xbn-interest-modal.modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px 16px;
  margin: 0;
  width: auto;
  height: auto;
  max-width: none;
  background: rgba(8, 18, 36, 0.55);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  grid-column: unset;
  grid-row: unset;
  justify-self: unset;
  align-self: unset;
}

.interest-dialog.modal[hidden],
#xbn-interest-modal.modal[hidden] {
  display: none !important;
}

.interest-modal {
  width: min(640px, 100%);
  max-height: min(88vh, 820px);
  max-height: min(88dvh, 820px);
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(8, 18, 36, 0.28);
  border-radius: 16px;
}

.interest-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px 12px;
  flex: 0 0 auto;
}

.interest-modal__head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.interest-modal__head p {
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.45;
  max-width: 36rem;
}

.interest-modal__close {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 4px;
  border-radius: 8px;
  cursor: pointer;
  flex: 0 0 auto;
}

.interest-modal__close:hover {
  color: var(--text);
  background: var(--surface-2);
}

#xbn-interest-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  margin: 0 !important;
  padding: 0 22px 18px;
}

.interest-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  flex: 0 0 auto;
}

.interest-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.interest-modal__error {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #df3346 12%, var(--surface));
  color: #b42318;
  font-size: 12px;
}

.interest-modal__limit {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--text, #1f2a37);
  font-size: 12px;
  line-height: 1.4;
}

.interest-catalog {
  display: grid;
  gap: 14px;
  max-height: none;
  overflow: auto;
  padding: 2px 4px 8px 0;
  min-height: 180px;
  flex: 1;
}

.interest-category__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.interest-category__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.interest-catalog label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.35;
  cursor: pointer;
  background: var(--surface);
}

.interest-catalog label span {
  min-width: 0;
}

.interest-catalog label.selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.interest-catalog label.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--soft, #f5f8fc);
  border-color: var(--border, #d5e0ec);
}

.interest-catalog label.is-disabled input {
  cursor: not-allowed;
}

.interest-catalog input {
  margin-top: 2px;
  accent-color: var(--blue);
  flex: 0 0 auto;
}

.interest-modal__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

.interest-modal__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

@media (max-width: 720px) {
  .interest-dialog.modal,
  #xbn-interest-modal.modal {
    padding: 0;
    place-items: stretch;
  }

  .interest-modal {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    min-height: 100dvh;
    border-radius: 0;
  }

  .interest-category__grid {
    grid-template-columns: 1fr;
  }

  .interest-modal__foot {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

.manage-interests {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 9px;
  border: 1px solid var(--blue);
  border-radius: 9px;
  background: transparent;
  color: var(--blue);
  padding: 8px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.quick-card,
.company-card {
  padding: 13px;
}

.quick-card a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 3px;
  font-size: 12px;
  line-height: 1.3;
  min-width: 0;
}

.quick-card a svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
}

.quick-card a span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-card a:hover {
  color: var(--blue);
}

.quick-card b {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--blue);
}

.company-card > p {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Legacy flex rule broke nested “Weitere Unternehmensseiten” blocks — scoped to hero only via new BEM. */
.company-card > a {
  display: flex;
  align-items: center;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  margin-top: 14px;
  justify-content: space-between;
  gap: 6px;
  line-height: 1.35;
  min-width: 0;
}

.company-manage-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.company-manage-card__eyebrow {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-manage-card__hero {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.company-manage-card__logo {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-2, #eef2f7);
}

.company-manage-card__logo--fallback {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #0d47a1, #1bb8d4);
}

.company-manage-card__hero-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.company-manage-card__name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-manage-card__badge {
  display: block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.company-manage-card__action {
  margin-top: 0 !important;
  justify-content: flex-start;
  gap: 4px;
  font-size: 12px !important;
}

.company-manage-card__action span {
  min-width: 0;
  white-space: nowrap;
}

.company-manage-card__further {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border, #d0d5dd);
  min-width: 0;
}

.company-manage-card__more {
  margin: 0;
  font-size: 10px;
  line-height: 1.35;
  font-weight: 650;
}

.company-manage-card__preview {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.company-manage-card__sub {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 4px 0;
  text-decoration: none;
  color: inherit !important;
  font-weight: 650 !important;
  font-size: 11px !important;
  min-width: 0;
  justify-content: flex-start !important;
}

.company-manage-card__sub:hover {
  color: var(--blue) !important;
}

.company-manage-card__sub:hover .company-manage-card__sub-name {
  color: var(--blue);
}

.company-manage-card__sub-logo {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--surface-2, #eef2f7);
}

.company-manage-card__sub-logo--fallback {
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #1565c0, #26c6da);
}

.company-manage-card__sub-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.company-manage-card__sub-name {
  display: block;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.company-manage-card__sub-badge {
  display: block;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
}

.company-manage-card__further-title {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.company-manage-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.company-manage-card__row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2, rgba(15, 23, 42, 0.04));
  color: var(--text) !important;
  font-weight: 650 !important;
  font-size: 12px !important;
  text-decoration: none;
  min-width: 0;
  justify-content: flex-start !important;
}

.company-manage-card__row:hover {
  color: var(--blue) !important;
}

.company-manage-card__row img,
.company-manage-card__row-fallback {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
}

.company-manage-card__row-fallback {
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #1565c0, #26c6da);
}

.company-manage-card__row-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.company-manage-card__row svg {
  flex: 0 0 auto;
  opacity: 0.65;
}

.company-manage-card__create {
  display: inline-flex !important;
  margin-top: 2px !important;
  justify-content: flex-start !important;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.company-manage-card__empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

/* —— Central company management pages —— */
.companies-manage-page,
.company-manage-hub-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 4px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.companies-manage-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 20px;
}

.companies-manage-page__eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.companies-manage-page h1,
.company-manage-hub-page__intro h1 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.25;
}

.companies-manage-page__lead {
  margin: 8px 0 0;
  max-width: 42rem;
  line-height: 1.5;
}

.companies-manage-empty {
  padding: 28px 24px;
  text-align: center;
}

.companies-manage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}

.companies-manage-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  padding: 0;
}

.companies-manage-item.is-main {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 35%, transparent);
}

.companies-manage-item__cover {
  height: 88px;
  background: linear-gradient(120deg, #0d47a1, #1bb8d4);
  background-size: cover;
  background-position: center;
}

.companies-manage-item__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
  min-width: 0;
}

.companies-manage-item__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: -28px;
  min-width: 0;
}

.companies-manage-item__logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--surface, #fff);
  background: var(--surface, #fff);
  flex: 0 0 auto;
}

.companies-manage-item__logo--fallback {
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #0d47a1, #1bb8d4);
  border-color: var(--surface, #fff);
}

.companies-manage-item__titles {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 22px;
}

.companies-manage-item__name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.companies-manage-item__meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}

.companies-manage-item__summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}

.companies-manage-item__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
}

.companies-manage-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.company-manage-hub-page__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.company-manage-hub-page__crumb a {
  color: var(--blue);
  font-weight: 650;
}

.company-manage-hub-page__hero {
  padding: 0;
  overflow: hidden;
}

.company-manage-hub-page__cover {
  height: 120px;
  background: linear-gradient(120deg, #081b3f, #1bb8d4);
  background-size: cover;
  background-position: center;
}

.company-manage-hub-page__hero-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  padding: 0 18px 18px;
  align-items: start;
}

.company-manage-hub-page__logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  margin-top: -28px;
  border: 3px solid var(--surface, #fff);
  background: var(--surface, #fff);
}

.company-manage-hub-page__logo--fallback {
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #0d47a1, #1bb8d4);
}

.company-manage-hub-page__intro {
  grid-column: 2;
  min-width: 0;
  padding-top: 12px;
}

.company-manage-hub-page__badge {
  margin: 0 0 4px;
  font-size: 12px;
}

.company-manage-hub-page__tagline {
  margin: 6px 0 0;
  line-height: 1.45;
}

.company-manage-hub-page__stats,
.company-manage-hub-page__note {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.company-manage-hub-page__quick {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.company-manage-hub-page__sections-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.company-manage-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.company-manage-hub-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.company-manage-hub-tile:hover {
  color: inherit;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 40%, transparent);
}

.company-manage-hub-tile strong {
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.company-manage-hub-tile span {
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .company-manage-hub-page__hero-body {
    grid-template-columns: 1fr;
  }

  .company-manage-hub-page__intro {
    grid-column: 1;
    padding-top: 0;
  }

  .company-manage-hub-page__logo {
    margin-top: -36px;
  }
}

.feed-column {
  min-width: 0;
}

.network-banner {
  background: linear-gradient(120deg, #081b3f, #123a78);
  color: white;
  padding: 26px 28px 30px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: none;
}

.network-banner h1 {
  font-size: clamp(20px, 2vw, 25px);
  margin: 7px 0;
  line-height: 1.25;
}

.network-banner p {
  color: #cbd9ed;
  font-size: 13px;
  margin: 0;
}

.network-banner small {
  color: #69e7f7;
  font-weight: 800;
  letter-spacing: 1.2px;
}

.people-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 auto 16px;
  padding: 10px 10px 10px 16px;
  border-radius: 15px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow);
}

.people-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.people-search button {
  border: 0;
  border-radius: 9px;
  padding: 9px 14px;
  background: var(--blue);
  color: white;
  font-weight: 750;
}

.network-search-card {
  margin-bottom: 15px;
  padding: 12px;
}

.search-kind {
  display: flex;
  gap: 5px;
  margin-bottom: 9px;
}

.search-kind button {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.search-kind button.active {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
}

.network-search-card form {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px 8px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
}

.network-search-card form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.network-search-card form button {
  border: 0;
  border-radius: 9px;
  padding: 9px 14px;
  background: var(--blue);
  color: white;
  font-weight: 800;
}

.search-results {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}

.search-results > a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  padding: 7px;
  border-radius: 9px;
}

.search-results > a:hover {
  background: var(--soft);
}

.search-results .avatar {
  width: 34px;
  height: 34px;
  font-size: 10px;
}

.search-results small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 2px;
}

.not-found {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: var(--muted);
}

.not-found strong,
.not-found small {
  display: block;
}

.not-found strong {
  color: var(--text);
  font-size: 12px;
}

.not-found small {
  font-size: 10px;
  margin-top: 3px;
}

.partner-slider {
  position: relative;
  margin-bottom: 0;
  padding: 19px 0;
  overflow: hidden;
  background: linear-gradient(120deg, #081b3f, #123a78);
  color: white;
}

.partner-slider > header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px 15px;
}

.partner-slider > header small {
  color: #69e7f7;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}

.partner-slider h2 {
  margin: 5px 0;
  font-size: 20px;
}

.partner-slider header p {
  margin: 0;
  color: #cbd9ed;
  font-size: 11px;
}

.partner-slider > header > button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #5579a7;
  border-radius: 9px;
  background: #123362;
  color: white;
}

.partner-window {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.partner-track {
  display: flex;
  gap: 10px;
  width: max-content;
  padding: 0 14px;
  animation: partner-scroll 28s linear infinite;
}

.partner-window:hover .partner-track {
  animation-play-state: paused;
}

.partner-chip {
  box-sizing: border-box;
  flex: 0 0 220px;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #426592;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  overflow: hidden;
}

.partner-chip > div {
  min-width: 0;
  max-width: 148px;
  overflow: hidden;
}

.partner-chip strong,
.partner-chip small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-chip strong {
  font-size: 11px;
}

.partner-chip small {
  color: #b9cce5;
  font-size: 9px;
  margin-top: 3px;
}

@keyframes partner-scroll {
  to {
    transform: translateX(calc(-50% - 5px));
  }
}

.empty-partners {
  padding: 0 20px;
  color: #cbd9ed;
}

.partner-modal {
  width: min(520px, 100%);
  padding: 20px;
  color: var(--text);
}

.partner-modal > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.partner-modal > header button {
  border: 0;
  background: transparent;
  color: var(--text);
}

.partner-modal > label {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border-radius: 9px;
}

.partner-modal > label.selected {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-weight: 750;
}

.partner-modal > .btn {
  margin-top: 14px;
  width: 100%;
}

/* ---------- Composer (PHP feed) ---------- */

.composer-card {
  padding: 16px;
  margin-bottom: 15px;
}

.composer-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.composer-head textarea {
  flex: 1;
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  resize: vertical;
}

.composer-card .composer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  grid-template-columns: none;
}

.composer-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.composer-attach input[type="file"] {
  max-width: 220px;
  font-size: 12px;
}

.composer-card select {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  padding: 8px 10px;
}

.feed-post__body {
  line-height: 1.6;
  margin: 12px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

.feed-tx-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 28px;
  margin: -4px 0 10px;
}
.feed-tx-hint {
  font-size: 0.8rem;
}
.feed-tx-toggle {
  display: inline;
  margin: 0;
}
.feed-tx-toggle-btn,
.feed-tx-toggle .post-comment__action {
  font-size: 0.8rem;
  padding: 0;
  min-height: 0;
  border: 0;
  background: none;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.composer-lang-field {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.composer-lang-field select {
  width: 100%;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}
.feed-post-edit {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: grid;
  gap: 16px;
}
.feed-post-edit__form {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.feed-post-edit__form label,
.feed-post-edit__media-item label {
  display: grid;
  gap: 6px;
}
.feed-post-edit__form textarea,
.feed-post-edit__form select,
.feed-post-edit__form input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface-2);
  color: var(--text);
}
.feed-post-edit__media {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 14px;
}
.feed-post-edit__media-item {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.feed-post-edit__media-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.feed-post-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.feed-tx-admin .admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.feed-tx-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 6px 10px;
  max-height: 240px;
  overflow: auto;
  padding: 8px 0;
}
.comment-edit-form textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  resize: vertical;
}
.post-menu a {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
.post-menu a:hover {
  background: var(--surface-2);
}

.feed-post__media {
  --media-max-h: min(70vh, 680px);
  --ar-w: 16;
  --ar-h: 9;
  margin: 10px 0 14px;
  width: min(100%, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: var(--soft);
  aspect-ratio: var(--ar-w) / var(--ar-h);
  min-height: 0;
  contain: layout;
  margin-inline: auto;
}

.feed-post__media.feed-post__media--landscape {
  --media-max-h: min(56vw, 480px);
  width: min(100%, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media.feed-post__media--portrait {
  --media-max-h: min(70vh, 680px);
  max-width: min(100%, 420px);
  width: min(100%, 420px, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media.feed-post__media--square {
  --media-max-h: min(70vh, 520px);
  max-width: min(100%, 480px);
  width: min(100%, 480px, calc(var(--media-max-h) * var(--ar-w) / var(--ar-h)));
}

.feed-post__media.feed-post__media--unknown {
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  max-height: min(70vh, 680px);
}

.feed-post__media.is-broken,
.feed-post__media:has(img.is-broken) {
  display: none;
}

.feed-post__media:not(.feed-post__media--video) > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: var(--soft);
}

.feed-post__media.feed-post__media--unknown:not(.feed-post__media--video) > img,
.feed-post__media.feed-post__media--native:not(.feed-post__media--video) > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(70vh, 680px);
  margin-inline: auto;
}

.feed-action {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.feed-action:hover {
  color: var(--blue);
}

.news-side-card,
.contacts-side-card,
.reputation-side-card {
  padding: 14px;
}

.news-side-card header,
.contacts-side-card h3,
.reputation-side-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
  font-size: 15px;
}

.news-side-item,
.contact-row {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.contact-row {
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}

.news-side-item small,
.contact-row small {
  display: block;
  font-size: 11px;
}

/* ---------- Composer (legacy Vater trigger) ---------- */

.composer {
  padding: 14px 16px 8px;
  margin-bottom: 15px;
}

.composer-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.composer-top > .avatar {
  width: 48px;
  height: 48px;
  margin-top: 0;
}

.composer-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer-main > button,
.composer-top > button {
  width: 100%;
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-align: left;
  padding: 0 18px;
  min-height: 48px;
  height: 48px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
}

.composer-main > button:hover,
.composer-top > button:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--blue) 28%, var(--border));
}

.composer-main > button:focus-visible,
.composer-top > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 50%, white);
  outline-offset: 1px;
}

.composer-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
  font-weight: 500;
}

.composer-context strong {
  color: var(--text);
  font-weight: 750;
}

.composer-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.composer-actions button {
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.composer-actions button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.composer-actions button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 45%, white);
  outline-offset: 1px;
}

.composer textarea {
  width: 100%;
  min-height: 90px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  padding: 0.75rem;
  font: inherit;
  resize: vertical;
  margin-bottom: 0.75rem;
}

/* ---------- Right rail cards ---------- */

.news-card,
.people-card,
.brand-card {
  padding: 18px;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

#xbn-news-network,
#xbn-news-world {
  min-width: 0;
  max-width: 100%;
}

.news-card .news-row {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.news-card .news-row strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
}

.news-card .news-row small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rail-title h2,
.people-card h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

.rail-title small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: -8px;
}

.news-heading-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.news-heading-actions button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--blue);
}

.news-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 14px 0 4px;
  border-radius: 10px;
  background: var(--soft);
}

.news-switch button {
  border: 0;
  border-radius: 8px;
  padding: 7px 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.news-switch button.active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(7, 20, 36, 0.1);
}

.news-card .news-topic {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.news-card .news-row > svg {
  position: absolute;
  right: 0;
  bottom: 12px;
  color: var(--muted);
}

.news-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.news-status.error {
  color: #a25326;
}

.spin {
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.news-card .all-news {
  display: flex;
  align-items: center;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: var(--blue);
  padding: 8px 0;
}

.news-settings-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 15, 32, 0.5);
  backdrop-filter: blur(3px);
}

.news-settings {
  width: min(520px, 100%);
  padding: 22px;
}

.news-settings header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.news-settings h3 {
  margin: 0;
}

.news-settings header p,
.settings-note {
  color: var(--muted);
  font-size: 12px;
}

.news-settings header > button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}

.source-grid button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
}

.source-grid button.selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--blue);
}

.custom-feed-box {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
}

.custom-feed-box > strong {
  font-size: 13px;
}

.custom-feed-box > p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.custom-feed-box > div:not(.saved-feed) {
  display: flex;
  gap: 7px;
}

.custom-feed-box input {
  min-width: 0;
  flex: 1;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}

.custom-feed-box > div > button {
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--blue);
  color: white;
  font-weight: 750;
}

.feed-error {
  display: block;
  margin-top: 6px;
  color: #b54730;
}

.saved-feed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 11px;
}

.saved-feed span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-feed button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.people-card .contact-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.people-card .avatar {
  grid-row: span 1;
  transition: transform 0.18s ease;
}

.people-card .avatar:hover {
  transform: translateY(-1px);
}

.contact-info strong,
.contact-info small {
  display: block;
}

.contact-info small {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
}

.people-card .contact-info {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.people-card .contact-info > a {
  display: grid;
  gap: 2px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.contact-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.contact-signal {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.contact-signal--soft {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--muted);
}

.people-card .contact-row button {
  grid-column: 2;
  width: max-content;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  padding: 5px 12px;
  font-weight: 700;
  font-size: 12px;
}

.people-card .contact-row button.requested {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  border-color: transparent;
  color: var(--text);
}

.view-contacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
}

/* Passende Kontakte — mixed network suggestions */
.network-suggest-card {
  padding: 1rem 1rem 0.9rem;
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.network-suggest-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--text, #0d1b35);
}

.network-suggest-empty {
  padding: 0.75rem 0.8rem;
  border-radius: 0.7rem;
  border: 1px dashed var(--border, #d9e3f0);
  background: var(--surface-2, #f8faff);
}

.network-suggest-empty p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted, #66758f);
}

.network-suggest-list {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.network-suggest-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  min-width: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border, #e4ebf4);
}

.network-suggest-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.network-suggest-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
}

.network-suggest-item--company .network-suggest-avatar {
  border-radius: 0.55rem;
}

.network-suggest-body {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.network-suggest-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}

.network-suggest-name {
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--text, #0d1b35);
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.3;
}

.network-suggest-name:hover {
  color: var(--blue, #1664ea);
}

.network-suggest-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--soft, #eaf0f8);
  color: var(--muted, #5b6f86);
}

.network-suggest-badge--company {
  background: color-mix(in srgb, var(--blue) 12%, #fff);
  color: var(--blue, #1664ea);
}

.network-suggest-badge--complete {
  background: color-mix(in srgb, #7c3aed 12%, #fff);
  color: #6d28d9;
}

.network-suggest-meta,
.network-suggest-company-link {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #66758f);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.network-suggest-company-link {
  color: var(--blue, #1664ea);
  text-decoration: none;
  font-weight: 600;
}

.network-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.network-suggest-actions form {
  margin: 0;
  display: inline;
}

.network-suggest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--blue, #1664ea);
  background: var(--blue, #1664ea);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}

.network-suggest-btn--ghost {
  background: transparent;
  color: var(--blue, #1664ea);
}

.network-suggest-status {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted, #66758f);
}

.network-suggest-status.is-ok {
  color: #15803d;
}

.network-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1rem;
}

.network-tabbar a {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border, #d9e3f0);
  background: var(--surface, #fff);
  color: var(--muted, #66758f);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.network-tabbar a.is-active {
  border-color: var(--blue, #1664ea);
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  color: var(--blue, #1664ea);
}

.network-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 0.85rem;
}

.network-company-card {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.85rem;
  background: var(--surface, #fff);
  min-width: 0;
}

.network-company-card__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.network-company-card__logo {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.55rem;
  background: var(--soft, #eaf0f8) center/cover no-repeat;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--blue);
}

.network-company-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.brand-card {
  display: grid;
  gap: 8px;
}

.brand-card small {
  color: var(--muted);
}

.reputation-card {
  padding: 18px;
  overflow: hidden;
}

.vip-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-bottom: 12px;
  border-radius: 999px;
  padding: 5px 9px;
  background: linear-gradient(110deg, #17120a, #9a6a08, #f6d366);
  color: white;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.reputation-card > a strong,
.reputation-card > a small {
  display: block;
}

.reputation-card > a small {
  color: var(--muted);
  font-size: 10px;
  margin-top: 4px;
}

/* Product reviews (separate from company ratings) */
.product-reviews-card {
  display: grid;
  gap: 0.75rem;
}

.product-reviews-card__empty {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #66758f);
}

.product-reviews-card__link {
  justify-self: start;
}

.mp-detail-product-rating,
.product-review-panel__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  min-width: 0;
}

.mp-detail-product-rating {
  margin: 0.35rem 0 0.55rem;
}

.mp-detail-product-rating b,
.product-review-panel__summary b {
  font-size: 1.15rem;
  color: var(--text, #0d1b35);
}

.product-review-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.product-review-panel__head {
  display: grid;
  gap: 0.55rem;
}

.product-review-panel__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.product-review-form {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.85rem;
  background: var(--surface-2, #f8faff);
  min-width: 0;
}

.product-review-form .muted {
  margin: 0;
  font-size: 0.8rem;
}

.product-review-form__stars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.product-review-form__star {
  cursor: pointer;
  display: grid;
  place-items: center;
}

.product-review-form__star input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.product-review-form__stars:has(.product-review-form__star input:checked) .product-review-form__star svg {
  fill: #f6bd2b;
}

.product-review-form__star:has(input:checked) ~ .product-review-form__star svg {
  fill: none;
}

.product-review-form__comment {
  display: grid;
  gap: 0.35rem;
  font-size: 0.85rem;
  min-width: 0;
}

.product-review-form__comment textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  resize: vertical;
  min-height: 4.5rem;
  font: inherit;
}

.product-review-form .btn {
  justify-self: start;
}

.product-review-list {
  display: grid;
  gap: 0.7rem;
  min-width: 0;
}

.product-review-item {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.75rem;
  background: #fff;
  min-width: 0;
}

.product-review-item header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin-bottom: 0.35rem;
}

.product-review-item time,
.product-review-item p {
  margin: 0;
  color: var(--muted, #66758f);
  font-size: 0.82rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.company-product-reviews {
  display: grid;
  gap: 1rem;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 0 2rem;
  min-width: 0;
}

.company-product-reviews__hero {
  padding: 1.15rem 1.2rem;
  display: grid;
  gap: 0.55rem;
}

.company-product-reviews__hero h1 {
  margin: 0;
  font-size: 1.35rem;
}

.company-product-reviews__empty {
  margin: 0;
  color: var(--muted, #66758f);
  font-size: 0.9rem;
}

.company-product-reviews__list {
  display: grid;
  gap: 0.9rem;
}

.company-product-reviews__item {
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.company-product-reviews__item-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}

.company-product-reviews__thumb {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 0.65rem;
  border: 1px solid var(--border, #d9e3f0);
  background: var(--soft, #eaf0f8) center/cover no-repeat;
}

.company-product-reviews__item-copy h2 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.company-product-reviews__item-copy h2 a {
  color: inherit;
  text-decoration: none;
}

.company-product-reviews__item-copy h2 a:hover {
  color: var(--blue, #1664ea);
}

@media (max-width: 640px) {
  .company-product-reviews__item-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-product-reviews__thumb {
    width: 100%;
    height: 8rem;
  }
}


.rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.rating-summary > b {
  font-size: 28px;
}

.rating-summary span {
  display: flex;
  gap: 1px;
}

.rating-summary small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 3px;
}

.value-rank {
  padding: 11px;
  border-radius: 11px;
  background: color-mix(in srgb, #dba928 10%, var(--soft));
}

.value-rank > span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.rank-scale {
  height: 7px;
  margin: 9px 0 5px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #15171b,
    #195c31,
    #50c878,
    #22bec6,
    #e6cf36,
    #d7a313
  );
  position: relative;
}

.rank-scale i {
  position: absolute;
  right: 2px;
  top: -3px;
  width: 13px;
  height: 13px;
  border: 2px solid white;
  border-radius: 50%;
  background: #d7a313;
  box-shadow: 0 1px 4px #755500;
}

.value-rank small {
  color: #8c6504;
  font-size: 9px;
  font-weight: 800;
}

.rate-once {
  margin-top: 12px;
}

.rate-once > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

/* Dashboard company rating card */
.reputation-card--dash {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1rem 1rem 0.95rem;
  display: grid;
  gap: 0.7rem;
  overflow: hidden;
}

.rep-dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(110deg, #17120a, #9a6a08, #f6d366);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.rep-dash-badge svg {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
}

.rep-dash-head {
  min-width: 0;
}

.rep-dash-identity {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.rep-dash-identity:hover .rep-dash-name {
  color: var(--blue, #1664ea);
}

.rep-dash-name {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text, #0d1b35);
  overflow-wrap: anywhere;
}

.rep-dash-tags {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--muted, #66758f);
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 500;
}

.rep-dash-score {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.rep-dash-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  flex: 0 0 auto;
}

.rep-dash-star {
  position: relative;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.rep-dash-star__base,
.rep-dash-star__fill {
  display: block;
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
}

.rep-dash-star__fill {
  clip-path: inset(0 0 0 0);
}

.rep-dash-star--half .rep-dash-star__fill {
  clip-path: inset(0 50% 0 0);
}

.rep-dash-score__meta {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.rep-dash-score__meta b {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text, #0d1b35);
  letter-spacing: -0.01em;
}

.rep-dash-score__meta small {
  color: var(--muted, #66758f);
  font-size: 0.6875rem;
  line-height: 1.3;
  font-weight: 500;
}

.rep-dash-scale {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding-top: 0.1rem;
}

.rep-dash-scale__track {
  position: relative;
  height: 0.4rem;
  margin: 0.15rem 0.2rem 0.05rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 48%, #22c55e 100%);
  box-sizing: border-box;
}

.rep-dash-scale__marker {
  position: absolute;
  top: 50%;
  width: 0.7rem;
  height: 0.7rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--blue, #1664ea);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rep-dash-scale--red .rep-dash-scale__marker {
  background: #dc2626;
}

.rep-dash-scale--yellow .rep-dash-scale__marker {
  background: #d97706;
}

.rep-dash-scale--green .rep-dash-scale__marker {
  background: #16a34a;
}

.rep-dash-scale--neutral .rep-dash-scale__marker {
  background: var(--blue, #1664ea);
}

.rep-dash-scale__ends {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 0.05rem;
}

.rep-dash-scale__ends span {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--muted, #66758f);
  white-space: nowrap;
}

.rep-dash-verdict {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--muted, #5b6f86);
}

.rep-dash-scale--red .rep-dash-verdict {
  color: #b45309;
}

.rep-dash-scale--yellow .rep-dash-verdict {
  color: #a16207;
}

.rep-dash-scale--green .rep-dash-verdict {
  color: #15803d;
}

.rep-dash-scale--neutral .rep-dash-verdict {
  color: var(--muted, #5b6f86);
  font-weight: 500;
}

.rep-dash-empty {
  margin: 0;
  padding: 0.7rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px dashed var(--border, #d9e3f0);
  background: var(--surface-2, #f8faff);
}

.rep-dash-empty p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--muted, #66758f);
}

.rep-dash-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  width: max-content;
  max-width: 100%;
  margin-top: 0.05rem;
  color: var(--blue, #1664ea);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.3;
}

.rep-dash-link svg {
  width: 0.8rem;
  height: 0.8rem;
}

.rep-dash-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.rep-dash-create {
  display: grid;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
}

.rep-dash-create strong {
  color: var(--text, #0d1b35);
  font-size: 0.9rem;
}

.rep-dash-create small {
  color: var(--muted, #66758f);
  font-size: 0.75rem;
  line-height: 1.4;
}

.rate-once > div {
  display: flex;
  margin-top: 6px;
}

.rate-once button {
  border: 0;
  background: transparent;
  color: #d39b10;
  padding: 2px;
}

.rate-once button:disabled {
  cursor: default;
  opacity: 1;
}

/* Mid laptops / MacBook CSS widths: keep 3 columns with tighter rails */
@media (max-width: 1439px) and (min-width: 1180px) {
  .feed-layout,
  .linkedin-grid,
  .dashboard-grid {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 230px);
    gap: 12px;
  }

  .feed-dashboard,
  .dashboard-main {
    width: min(100% - clamp(16px, 2.5vw, 24px), 1320px);
  }
}

/* Narrow tablets / small laptops: 2 columns (right rail under) */
@media (max-width: 1179px) and (min-width: 768px) {
  .feed-layout,
  .linkedin-grid,
  .dashboard-grid {
    grid-template-columns: minmax(0, min(220px, 32%)) minmax(0, 1fr);
  }

  .feed-layout > .left-rail,
  .feed-layout > .feed-left,
  .dashboard-grid > .left-rail,
  .dashboard-grid > .feed-left {
    grid-column: 1;
    grid-row: 1;
  }

  .feed-layout > .feed-column,
  .feed-layout > .feed-center,
  .dashboard-grid > .feed-column,
  .dashboard-grid > .feed-center {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .feed-layout > .right-rail,
  .feed-layout > .feed-right,
  .dashboard-grid > .right-rail,
  .dashboard-grid > .feed-right {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 15px;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .feed-dashboard,
  .dashboard-main {
    width: min(100% - clamp(16px, 4vw, 24px), 1320px);
    padding: clamp(12px, 3vw, 16px) 0 clamp(20px, 4vw, 32px);
  }

  .network-main > .network-compliance-footer,
  .app-content > .network-compliance-footer {
    width: min(100% - clamp(16px, 4vw, 24px), 1320px);
  }

  .feed-layout,
  .linkedin-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .feed-layout > .left-rail,
  .feed-layout > .feed-left,
  .feed-layout > .feed-column,
  .feed-layout > .feed-center,
  .feed-layout > .right-rail,
  .feed-layout > .feed-right,
  .dashboard-grid > .left-rail,
  .dashboard-grid > .feed-left,
  .dashboard-grid > .feed-column,
  .dashboard-grid > .feed-center,
  .dashboard-grid > .right-rail,
  .dashboard-grid > .feed-right {
    grid-column: 1;
    grid-row: auto;
    display: grid;
  }

  /* Mobile order: Feed → right modules → left modules */
  .feed-layout > .feed-column,
  .feed-layout > .feed-center,
  .dashboard-grid > .feed-column,
  .dashboard-grid > .feed-center {
    order: 1;
  }

  .feed-layout > .right-rail,
  .feed-layout > .feed-right,
  .dashboard-grid > .right-rail,
  .dashboard-grid > .feed-right {
    order: 2;
    grid-template-columns: 1fr;
  }

  .feed-layout > .left-rail,
  .feed-layout > .feed-left,
  .dashboard-grid > .left-rail,
  .dashboard-grid > .feed-left {
    order: 3;
  }

  .feed-dashboard > .network-compliance-footer,
  .dashboard-main > .network-compliance-footer {
    margin-top: auto;
  }

  .network-banner {
    border-radius: 14px;
    padding: 22px;
  }

  .composer-actions button {
    font-size: 12px;
  }

  .people-search button {
    padding: 9px 12px;
  }

  .network-banner .logo {
    display: none;
  }
}

@media (max-width: 760px) {
  .feed-layout > .right-rail,
  .dashboard-grid > .right-rail {
    grid-template-columns: 1fr;
  }
}

/* ---------- Feed controls & posts ---------- */

.feed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px 12px;
}

.feed-controls small {
  display: block;
  margin-top: 2px;
}

.feed-controls select {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 9px;
  padding: 8px;
}

.feed-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feed-scroll-region,
.feed-posts-scroll,
.dashboard-posts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow: visible;
  align-items: stretch;
}

/* Default: no inner scroll — posts flow in the document (≤3 posts). */
#xbn-feed-posts.feed-posts-scroll,
#xbn-feed-posts.feed-list-scroll {
  height: auto;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  min-height: 0;
}

.dash-feed-stack,
.feed-column.feed-center,
.feed-layout > .feed-center {
  min-height: 0;
}

/* >3 posts on tablet/desktop: only the center list scrolls.
   Height comes from JS (--feed-list-height): viewport-stable, not content-measured. */
@media (min-width: 768px) {
  #xbn-feed-posts.feed-list-scroll.is-feed-scrollable {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    height: var(--feed-list-height, min(70vh, 988px));
    max-height: var(--feed-list-height, min(70vh, 988px));
    box-sizing: border-box;
    padding-right: 4px;
    min-height: 0;
    flex: 0 1 auto;
  }
}

@media (max-width: 767px) {
  #xbn-feed-posts.feed-list-scroll.is-feed-scrollable {
    height: auto !important;
    max-height: none !important;
    overflow: visible;
    padding-right: 0;
  }
}

.feed-scroll-region .feed-post,
.feed-posts-scroll .feed-post,
.dashboard-posts .feed-post,
#xbn-feed-posts .feed-post {
  margin-bottom: 0;
  flex: 0 0 auto;
  align-self: stretch;
  height: auto !important;
  max-height: none !important;
  min-height: min-content;
  overflow: visible;
}

.feed-posts-end,
.feed-load-more-wrap {
  margin: 4px 0 8px;
  padding: 18px 12px;
  text-align: center;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.feed-posts-end {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}

.feed-load-more-wrap {
  padding-top: 8px;
}

.feed-load-more-wrap .btn {
  min-width: min(220px, 100%);
  width: min(100%, 280px);
}

.feed-post {
  padding: 18px;
  margin-bottom: 14px;
  overflow: visible;
  height: auto;
  max-height: none;
  min-width: 0;
  max-width: 100%;
}

.feed-post header {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
}

.feed-post header small {
  display: block;
  margin-top: 3px;
}

.feed-post header > button,
.feed-post header .post-menu-toggle {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
}

.post-menu-wrap {
  position: relative;
}

.post-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
  display: grid;
  gap: 2px;
}

.post-menu[hidden] {
  display: none !important;
}

.post-menu button {
  border: 0;
  background: transparent;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  cursor: pointer;
}

.post-menu button:hover {
  background: var(--soft);
}

.feed-post > p {
  line-height: 1.6;
}

.feed-post > img,
.feed-post > video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 680px);
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin-inline: auto;
}

.media-loading {
  display: grid;
  place-items: center;
  min-height: 160px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
}

.article-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 900;
}

.counts {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  padding: 10px 2px;
}

.feed-post footer {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
}

.feed-post footer form {
  flex: 1;
  margin: 0;
  display: flex;
}

.feed-post footer .feed-action {
  width: 100%;
  cursor: pointer;
}

.post-comment-form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
}

.post-comment-form input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}

.feed-post footer button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}

.feed-post footer button.active {
  color: var(--blue);
}

.feed-post footer button.liked {
  color: #df3346;
}

.feed-post footer button.liked svg {
  fill: #df3346;
}

.feed-post footer button.saved {
  color: #c69312;
}

.feed-post footer button.saved svg {
  fill: #f1c84b;
}

.feed-post footer button.notifying {
  color: #159447;
}

.feed-post footer button.notifying svg {
  fill: #39bc68;
}

.feed-action.notifying {
  color: #159447;
}

.feed-action.notifying svg {
  fill: #39bc68;
}

.share-menu {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--soft);
}

.share-menu[hidden] {
  display: none !important;
}

.share-menu > strong {
  font-size: 11px;
}

.share-menu > div {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.share-menu button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.post-comments {
  display: grid;
  gap: 8px;
  padding: 4px 14px 0;
}

.post-comment {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 12px;
  font-size: 13px;
}

.post-comment .avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  font-size: 11px;
}

.post-comment__body {
  flex: 1;
  min-width: 0;
}

.post-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 2px;
}

.post-comment__meta strong {
  font-size: 13px;
}

.post-comment__meta time {
  font-size: 11px;
}

.post-comment__text {
  margin: 0;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.post-comment__text--moderated,
.post-comment--moderated .post-comment__text {
  color: var(--muted);
  font-style: italic;
}

.post-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 6px;
}

.post-comment__action {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.post-comment__action:hover {
  color: var(--blue);
}

.post-comment__action--danger:hover {
  color: #df3346;
}

.post-comment__delete {
  display: inline;
  margin: 0 !important;
}

.post-comment-replies {
  display: grid;
  gap: 6px;
  margin: 6px 0 0 40px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.post-comment--reply {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-radius: 10px;
  font-size: 12px;
}

.post-comment--reply .avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

.reply-form {
  display: grid !important;
  gap: 6px;
  margin-top: 8px !important;
  padding: 0 !important;
}

.reply-form[hidden] {
  display: none !important;
}

.reply-form__hint {
  font-size: 11px;
  font-weight: 600;
}

.reply-form__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.reply-form input {
  flex: 1;
  padding: 7px 12px !important;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.reply-form__cancel {
  flex: 0 0 auto;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

.feed-post form {
  display: flex;
  margin-top: 10px;
}

.feed-post form input {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 9px 13px;
}

.feed-post form button {
  border: 0;
  background: transparent;
  color: var(--blue);
}

@media (max-width: 600px) {
  .feed-post footer button {
    font-size: 0;
  }

  .feed-post footer button svg {
    width: 18px;
  }
}

/* ---------- Page helpers used by PHP templates ---------- */

.page-header {
  margin-bottom: 1.25rem;
}

.page-header h1 {
  font-size: 1.65rem;
  margin: 0 0 0.35rem;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.directory-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem;
  box-shadow: var(--shadow);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.directory-card:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  transform: translateY(-2px);
}

.directory-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.directory-card p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

.profile-hero {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}

.profile-hero__cover {
  height: 140px;
  background: linear-gradient(120deg, var(--navy), #0d3a55 50%, var(--cyan));
}

.profile-hero__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  padding: 0 1.25rem 1.25rem;
  margin-top: -40px;
}

.profile-hero__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  object-fit: cover;
  background: var(--surface-2);
}

.thread-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.thread-item {
  display: block;
  padding: 0.85rem 1rem;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}

.thread-item:hover {
  border-color: var(--blue);
  text-decoration: none;
}

.message-bubble {
  max-width: 75%;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: var(--surface-2);
  margin-bottom: 0.6rem;
}

.message-bubble--mine {
  margin-left: auto;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
}

.event-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-item {
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--cyan);
  background: var(--surface);
  border-radius: 0 9px 9px 0;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--cyan);
}

/* ---------- Desktop / mobile utilities ---------- */

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

@media (max-width: 900px) {
  .desktop-only {
    display: none !important;
  }

  .app-main {
    padding-bottom: 76px !important;
  }

  .app-nav__links {
    display: none;
  }
}

@media (min-width: 901px) {
  .mobile-only {
    display: none !important;
  }
}

/* ---------- News workspace (Vater) ---------- */
.news-workspace { display: grid; gap: 18px; }
.news-page-header {
  border-radius: 22px;
  padding: 30px;
  background: linear-gradient(120deg, #071a3e, #154f94);
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.news-page-header p {
  color: #69e7f7;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.5px;
  margin: 0;
}
.news-page-header h1 { margin: 7px 0; font-size: 32px; }
.news-page-header span { color: #cedcf0; }
.news-page-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.news-page-tabs a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 750;
  text-decoration: none;
}
.news-page-tabs a.active {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.news-full-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.news-full-list article.network-news-item { padding: 22px; }
.news-full-list h2, .world-full-list h2 { font-size: 18px; line-height: 1.35; margin: 0.4rem 0; }
.news-full-list p { color: var(--muted); line-height: 1.55; }
.news-full-list small { display: block; color: var(--muted); margin: 12px 0; }
.news-topic {
  width: max-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}
.world-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  align-items: start;
}
.source-panel { padding: 18px; display: grid; gap: 8px; position: sticky; top: 90px; }
.source-panel h2 { font-size: 17px; margin: 0; }
.source-panel p { font-size: 11px; color: var(--muted); margin: 0; }
.source-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-radius: 9px;
  font-size: 12px;
}
.source-panel label.selected {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-weight: 750;
}
.world-full-list { display: grid; gap: 11px; }
.world-full-list > a {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 19px;
  text-decoration: none;
  color: inherit;
}
.world-full-list > a span,
.world-full-list > a small { color: var(--muted); font-size: 11px; }
.world-full-list > a h2 { grid-column: 1 / 3; margin: 8px 0; }

.news-tools {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 0.6fr) auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
}
.news-tools label { display: grid; gap: 6px; margin: 0; }
.news-tools label span,
.news-tools-search span { font-size: 11px; font-weight: 750; color: var(--muted); }
.news-tools input,
.news-tools select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
  color: inherit;
}
.news-tools-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.news-empty {
  grid-column: 1 / -1;
  padding: 36px 28px;
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.news-empty h2 { margin: 0; font-size: 20px; }
.news-empty p { margin: 0; color: var(--muted); max-width: 42ch; }
.news-issue-card {
  display: grid;
  gap: 12px;
  padding: 0;
  overflow: hidden;
}
.news-issue-card.is-new { box-shadow: inset 3px 0 0 var(--blue); }
.news-issue-cover {
  height: 120px;
  background: center / cover no-repeat #0d2a52;
}
.news-issue-head,
.news-issue-foot,
.news-issue-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.news-issue-head,
.news-issue-foot,
.news-issue-card > h2,
.news-issue-card > p {
  padding-left: 18px;
  padding-right: 18px;
}
.news-issue-card > h2 { margin: 0; font-size: 18px; line-height: 1.35; }
.news-issue-card > p { margin: 0; color: var(--muted); line-height: 1.5; }
.news-issue-head { padding-top: 16px; }
.news-issue-foot {
  padding-bottom: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news-publisher-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #123968 center / cover no-repeat;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  flex: 0 0 auto;
}
.news-issue-meta { display: grid; gap: 4px; min-width: 0; flex: 1; }
.news-publisher-name {
  font-weight: 750;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-unread-badge {
  margin-left: auto;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
}
.news-world-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.news-world-bar p { margin: 0; color: var(--muted); }
.news-world-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.news-world-thumb {
  min-height: 100%;
  background: #0d2a52 center / cover no-repeat;
}
.news-world-body {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  align-content: start;
}
.news-world-body h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.news-world-body p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.news-world-body small { color: var(--muted); }
.news-sources-panel { padding: 22px; display: grid; gap: 18px; }
.news-sources-layout {
  display: grid;
  gap: 16px;
}
.news-sources-section {
  padding: 22px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.news-sources-intro h2,
.news-sources-intro h3 { margin: 0 0 6px; }
.news-sources-intro p,
.news-section-hint { margin: 0; color: var(--muted); font-size: 13px; }
.news-sources-section-block {
  display: grid;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.news-sources-section-block h3 { margin: 0; font-size: 16px; }
.news-sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.news-source-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  background: var(--bg);
  min-width: 0;
  min-height: 96px;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.news-source-card input,
.news-topic-tag input { position: absolute; opacity: 0; pointer-events: none; }
.news-source-card,
.news-topic-tag { position: relative; }
.news-source-chip.selected,
.news-source-card.selected,
.news-source-card:has(input:checked),
.news-topic-tag.selected,
.news-topic-tag:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-weight: 750;
}
.news-source-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
}
.news-source-card-body {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.news-source-card-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.news-source-category {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-source-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  margin-top: 2px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #94a3b8 16%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.news-source-status-badge.is-active,
.news-source-card.selected .news-source-status-badge,
.news-source-card:has(input:checked) .news-source-status-badge {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}
.news-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94a3b8;
}
.news-source-status-badge.is-active .news-status-dot,
.news-source-card.selected .news-status-dot,
.news-source-card:has(input:checked) .news-status-dot {
  background: var(--blue);
}
.news-sources-sticky-actions {
  position: sticky;
  bottom: 12px;
  padding: 12px;
  margin: 4px -4px 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.news-sources-actions .btn.is-loading {
  opacity: .75;
  pointer-events: none;
}
.news-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.news-topic-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.news-topic-tag.selected {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
}
.news-topics-field { display: grid; gap: 6px; }
.news-topics-field span,
.news-custom-grid label > span,
.news-filter-row label > span { font-size: 12px; font-weight: 750; }
.news-topics-field input,
.news-custom-grid input,
.news-custom-grid select,
.news-filter-row select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 12px;
  background: var(--bg);
  color: inherit;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.news-topics-field small { color: var(--muted); }
.news-filter-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 14px;
  align-items: start;
}
.news-filter-row label { display: grid; gap: 6px; margin: 0; }
.news-countries-field {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.news-countries-field legend {
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 6px;
  padding: 0;
}
.news-sources-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.news-custom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.news-custom-grid label { display: grid; gap: 6px; margin: 0; min-width: 0; }
.news-switch-label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  align-self: end;
  padding-bottom: 8px;
}
.news-switch-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  position: static;
  opacity: 1;
  pointer-events: auto;
}
.news-saved-list { display: grid; gap: 10px; }
.news-saved-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
.news-saved-card.is-active {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
}
.news-saved-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.news-saved-body strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-saved-body > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 11px;
}
.news-saved-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.news-saved-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.news-empty-inline {
  padding: 28px 18px;
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.news-empty-inline h3 { margin: 0; }
.news-empty-inline p { margin: 0; color: var(--muted); max-width: 42ch; }
.news-card .news-status a {
  display: inline-block;
  margin-top: 8px;
  color: var(--blue);
  font-weight: 750;
}
@media (max-width: 900px) {
  .news-tools { grid-template-columns: 1fr; }
  .news-world-card { grid-template-columns: 1fr; }
  .news-world-thumb { height: 140px; }
  .news-filter-row,
  .news-custom-grid,
  .news-saved-card {
    grid-template-columns: 1fr;
  }
  .news-saved-actions { justify-content: flex-start; }
}

/* ---------- Analytics ---------- */
.analytics-workspace { display: grid; gap: 16px; }
.analytics-hero {
  border-radius: 20px;
  padding: 26px;
  background: linear-gradient(120deg, #071a3e, #14569c);
  color: white;
}
.analytics-hero p {
  margin: 0;
  color: #69e7f7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.analytics-hero h1 { margin: 6px 0; }
.analytics-hero span { color: #cedcf0; }
.analytics-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.analytics-tabs a {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.analytics-tabs a.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.analytics-chart { padding: 22px; }
.chart-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.chart-heading small { display: block; color: var(--muted); }
.chart-heading strong { display: block; font-size: 28px; margin: 4px 0; }
.chart-heading span { color: var(--muted); font-size: 12px; }
.bar-chart {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 180px;
  padding-top: 12px;
}
.bar-chart > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 160px;
  justify-content: flex-end;
}
.bar-chart span {
  display: block;
  width: 100%;
  max-width: 36px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  min-height: 8px;
}
.bar-chart small { color: var(--muted); font-size: 11px; }

/* ---------- Settings hub ---------- */
.settings-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}
.settings-head p {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 800;
  margin: 0;
}
.settings-head h1 { margin: 6px 0; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.setting-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
  padding: 21px;
  text-decoration: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  border-radius: 18px;
  background: var(--surface);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.setting-card:hover,
.setting-card:focus-visible {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  outline: none;
}
.setting-card-icon,
.setting-card > svg {
  color: var(--blue);
  margin-top: 2px;
}
.setting-card h2 { font-size: 17px; margin: 0 0 6px; }
.setting-card p { font-size: 12px; line-height: 1.5; margin: 0; }

.data-card {
  padding: 20px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.data-card h2 {
  margin: 0 auto 0 0;
  font-size: 18px;
}
.data-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.data-card .inline-form { margin: 0; }
.btn-danger-outline {
  color: #c43b45 !important;
  border-color: color-mix(in srgb, #c43b45 35%, var(--border)) !important;
}
.btn-danger {
  background: #c43b45;
  border-color: #c43b45;
  color: #fff;
}
.settings-dialog {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  max-width: min(520px, 92vw);
  background: var(--surface);
  color: var(--text);
}
.settings-dialog::backdrop { background: rgba(7, 20, 36, 0.45); }
.settings-dialog .dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}
.settings-dialog .check-confirm {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
}

/* Dedicated appearance page */
.appearance-page {
  display: grid;
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 32px;
  box-sizing: border-box;
}
.appearance-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.appearance-breadcrumb a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}
.appearance-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}
.appearance-hero > div > p {
  margin: 0;
  max-width: 54ch;
}
.appearance-scope-switch {
  display: inline-flex;
  margin-top: 14px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  gap: 2px;
}
.appearance-scope-switch .scope-btn {
  text-decoration: none;
  color: var(--text);
  border: 0;
  background: transparent;
  padding: 8px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
}
.appearance-scope-switch .scope-btn.active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}
.appearance-context {
  margin: 10px 0 0;
  font-size: 0.85rem;
}
.appearance-explain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.appearance-explain article {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.appearance-explain h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.88rem;
}
.appearance-explain p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.45;
}
.appearance-grid {
  display: grid;
  gap: 16px;
}
.appearance-card {
  padding: 20px;
  display: grid;
  gap: 14px;
}
.appearance-card > header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.appearance-card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
  color: var(--blue);
  flex-shrink: 0;
}
.appearance-card-note {
  margin: 0;
  font-size: 0.78rem;
}
.appearance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.appearance-actions > span { flex: 1; }
.appearance-hub-cta {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .appearance-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .appearance-page { padding: 0 0 24px; }
  .appearance-explain { grid-template-columns: 1fr; }
  .appearance-scope-switch { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .appearance-actions > span { display: none; }
  .appearance-actions .btn { flex: 1 1 auto; justify-content: center; }
  .appearance-hub-cta { grid-template-columns: 1fr; }
}

/* Personalization panel (Next personalization-settings parity) */
.personalization-panel { margin-top: 16px; padding: 22px; }
.personalization-panel > header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.personalization-panel h2,
.personalization-panel h3 { margin: 0; }
.personalization-panel header p { margin: 6px 0; font-size: 12px; }
.personalization-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #eaf2ff;
  color: var(--blue);
  flex-shrink: 0;
}
.dashboard-layout-setting {
  display: grid;
  grid-template-columns: 34px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.dashboard-layout-icon { color: var(--blue); display: grid; place-items: center; }
.dashboard-layout-setting h3 { font-size: 15px; }
.dashboard-layout-setting p { margin: 4px 0 0; font-size: 11px; }
.dashboard-layout-actions { display: grid; justify-items: end; gap: 6px; }
.dashboard-layout-actions > span { font-size: 10px; color: var(--muted); }
.dashboard-layout-actions > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dashboard-layout-scope {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.dashboard-layout-scope button,
.profile-scope-switch button,
.direction-choice button,
.pattern-size button {
  cursor: pointer;
}
.dashboard-layout-scope button {
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}
.dashboard-layout-scope button.active {
  background: #eaf2ff;
  color: var(--blue);
}
.dashboard-layout-setting .btn { min-height: 36px; padding: 8px 12px; font-size: 11px; }
.profile-scope-switch {
  display: inline-flex;
  max-width: 100%;
  overflow-x: auto;
  margin-top: 18px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface-2);
  -webkit-overflow-scrolling: touch;
}
.profile-scope-switch button {
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 750;
  white-space: nowrap;
}
.profile-scope-switch button.active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(22, 100, 234, 0.12);
}
.personalization-preview {
  display: grid;
  gap: 7px;
  margin: 12px 0 20px;
  padding: 22px;
  border-radius: 16px;
  min-height: 170px;
  align-content: end;
  color: var(--text);
  border: 1px solid var(--border);
  overflow: hidden;
  box-sizing: border-box;
}
.personalization-preview span {
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.4px;
  color: var(--blue);
}
.personalization-preview strong { font-size: 22px; }
.personalization-preview small { color: var(--muted); }
.preview-cards {
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 0.8fr;
  gap: 8px;
}
.preview-cards i {
  display: block;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.design-category { margin-top: 20px; }
.design-category h3 { font-size: 14px; margin-bottom: 10px; }
.design-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.design-grid button,
.design-tile {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.design-grid button:hover,
.design-grid button:focus-visible,
.design-tile:hover,
.design-tile:focus-visible {
  border-color: var(--blue);
  outline: 2px solid color-mix(in srgb, var(--blue) 35%, transparent);
  outline-offset: 1px;
}
.design-grid button > span.design-swatch,
.design-swatch {
  height: 42px;
  border-radius: 7px;
  background-size: 24px 24px !important;
  display: block;
}
.design-grid button small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
}
.design-grid button.selected,
.design-tile.selected {
  border: 2px solid var(--blue);
  padding: 6px;
}
.design-check {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
  color: #0b2348;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.pattern-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(130px, 0.7fr));
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.pattern-settings h3 { font-size: 15px; }
.pattern-settings p { margin: 5px 0 0; font-size: 11px; }
.pattern-settings label,
.pattern-size {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}
.pattern-settings input[type="color"],
.custom-design input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}
.pattern-intensity { grid-template-columns: 1fr auto; }
.pattern-intensity input { grid-column: 1 / -1; width: 100%; accent-color: var(--blue); }
.pattern-size > div,
.direction-choice > div { display: flex; height: 40px; }
.pattern-size button,
.direction-choice button {
  flex: 1;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 9px;
  color: var(--text);
}
.pattern-size button:first-child,
.direction-choice button:first-child { border-radius: 9px 0 0 9px; }
.pattern-size button:last-child,
.direction-choice button:last-child { border-radius: 0 9px 9px 0; }
.pattern-size button.active,
.direction-choice button.active {
  border-color: var(--blue);
  background: #eaf2ff;
  color: var(--blue);
}
.custom-design {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(120px, 0.45fr));
  gap: 12px;
  align-items: end;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.custom-design h3 { font-size: 15px; }
.custom-design p { margin: 5px 0 0; font-size: 11px; }
.custom-design label,
.direction-choice {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}
.personalization-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 15px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #e7f8ef;
  color: #087a46;
  font-size: 12px;
  font-weight: 750;
}
.personalization-panel > footer {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  align-items: center;
}
.personalization-panel > footer span { flex: 1; }
.personalization-panel > footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.user-accent-button {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

@media (max-width: 1024px) {
  .design-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .design-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .custom-design,
  .pattern-settings { grid-template-columns: 1fr 1fr; }
  .custom-design > div,
  .pattern-settings > div:first-child { grid-column: 1 / -1; }
  .dashboard-layout-setting { grid-template-columns: 34px 1fr; }
  .dashboard-layout-actions { grid-column: 2; justify-items: start; }
  .personalization-preview { min-height: 160px; }
}
@media (max-width: 700px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-head,
  .data-card { flex-direction: column; align-items: stretch; }
  .data-card h2 { margin: 0 0 8px; }
  .design-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .design-grid button { min-height: 72px; }
}
@media (max-width: 600px) {
  .design-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .personalization-panel { padding: 16px; overflow-x: hidden; }
  .personalization-panel > footer { flex-wrap: wrap; }
  .personalization-panel > footer span { display: none; }
  .personalization-preview {
    min-height: 140px;
    overflow: hidden;
  }
  .custom-design,
  .pattern-settings { grid-template-columns: 1fr; }
  .custom-design > div,
  .pattern-settings > div:first-child { grid-column: auto; }
  .dashboard-layout-setting { grid-template-columns: 1fr; }
  .dashboard-layout-icon { display: none; }
  .dashboard-layout-actions > div { justify-content: stretch; flex-direction: column; }
  .dashboard-layout-actions .btn { width: 100%; justify-content: center; }
}

.settings-card-wide {
  max-width: 720px;
  width: 100%;
  box-sizing: border-box;
}
.settings-weather,
.settings-weather-privacy {
  display: grid;
  gap: 12px;
}
.settings-weather__current {
  display: grid;
  gap: 4px;
}
.settings-weather__current .is-empty {
  font-weight: 600;
  color: var(--muted);
}
.settings-weather__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.settings-weather__manual {
  display: grid;
  gap: 6px;
}
.settings-weather__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.settings-weather__results {
  list-style: none;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 200px;
  overflow: auto;
  background: var(--surface);
}
.settings-weather__pick {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
}
.settings-weather__pick:hover,
.settings-weather__pick:focus {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
}
.settings-weather__empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
.settings-weather__status {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
}
.settings-weather__status.is-error {
  background: color-mix(in srgb, #c45c26 10%, var(--surface-2));
}
.settings-weather.is-busy .settings-weather__actions .btn {
  opacity: 0.7;
}
.settings-weather__toggle-form {
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* ---------- Language / Region / Weather settings ---------- */
.language-page {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 8px 0 40px;
  display: grid;
  gap: 18px;
  box-sizing: border-box;
}
.language-page__hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}
.language-page__hero p {
  margin: 0;
  max-width: 62ch;
}
.language-page__note {
  margin-top: 10px !important;
  font-size: 0.86rem;
}
.language-page__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.language-card {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
  box-sizing: border-box;
}
.language-card__head h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.language-card__head p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
}
.language-fields {
  display: grid;
  gap: 14px;
}
.language-fields__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.language-page .form-group {
  display: grid;
  gap: 6px;
  margin: 0;
}
.language-page .form-group > label,
.language-page .settings-weather__manual > label {
  font-weight: 700;
  font-size: 0.86rem;
}
.language-page select,
.language-page .settings-weather__input,
.language-combobox__search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.language-page .form-hint {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
}
.language-combobox {
  position: relative;
}
.language-combobox__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.language-combobox__trigger .language-combobox__label {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}
.language-combobox__trigger strong {
  font-size: 0.92rem;
}
.language-combobox__trigger small {
  font-size: 0.75rem;
}
.language-combobox.is-open .language-combobox__trigger {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}
.language-combobox__panel {
  position: absolute;
  z-index: var(--z-dropdown, 300);
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  display: grid;
  gap: 8px;
  padding: 10px;
  max-height: min(320px, 55vh);
  max-height: min(320px, 55dvh);
  overflow: hidden;
}
.language-combobox__search-wrap {
  position: sticky;
  top: 0;
}
.language-combobox__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  max-height: min(260px, 45vh);
  display: grid;
  gap: 2px;
}
.language-combobox__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
}
.language-combobox__option:hover,
.language-combobox__option:focus {
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
}
.language-combobox__option.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.language-combobox__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.language-combobox__text strong {
  font-size: 0.9rem;
}
.language-combobox__text small {
  font-size: 0.75rem;
}
.language-page__save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 4px 2px 0;
}
.language-page__save p {
  margin: 0;
  font-size: 0.82rem;
}
.language-card--privacy {
  gap: 10px;
}
.language-privacy-list {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.settings-weather__status-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.settings-weather__stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.settings-weather__stat span {
  font-size: 0.75rem;
}
.settings-weather__stat strong {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.settings-weather__empty-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 4px 2px;
}
.settings-weather__empty-state .is-empty,
.settings-weather__place.is-empty {
  color: var(--muted);
}
.settings-weather__controls {
  display: grid;
  gap: 14px;
}
.language-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .language-page__grid {
    grid-template-columns: 1fr;
  }
  .settings-weather__status-line {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .language-fields__row {
    grid-template-columns: 1fr;
  }
  .language-page__save {
    flex-direction: column;
    align-items: stretch;
  }
  .language-page__save .btn {
    width: 100%;
    justify-content: center;
  }
  .settings-card-wide { max-width: 100%; }
  .settings-weather__actions { flex-direction: column; align-items: stretch; }
  .settings-weather__actions .btn { width: 100%; justify-content: center; }
  .dashboard-layout-actions { grid-column: auto; }
  .dashboard-layout-actions > div { flex-direction: column; align-items: stretch; }
}

/* ---------- Privacy & cookie consent ---------- */
.privacy-page {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 4px 0 48px;
  display: grid;
  gap: 20px;
  box-sizing: border-box;
}
.privacy-breadcrumb { margin: 0; }
.privacy-hero {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.privacy-hero__icon,
.privacy-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}
.privacy-card__icon--sm {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.privacy-card__icon--danger {
  background: color-mix(in srgb, #b42318 8%, var(--surface));
  color: #b42318;
}
.privacy-hero__copy { min-width: 0; flex: 1; }
.privacy-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.2;
}
.privacy-hero p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 68ch;
}
.privacy-hero__note {
  margin-top: 8px !important;
  font-size: 0.82rem !important;
}
.privacy-form { display: grid; gap: 16px; }
.privacy-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.privacy-layout--bottom { margin-top: 0; }
.privacy-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
  min-width: 0;
}
.privacy-card--wide { grid-column: 1 / -1; }
.privacy-card__head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.privacy-card__head h2 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  line-height: 1.3;
}
.privacy-card__head h3 {
  margin: 0 0 2px;
  font-size: 0.92rem;
}
.privacy-card__head p,
.privacy-sub__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.privacy-rows { display: grid; }
.privacy-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(160px, 0.85fr);
  gap: 14px 20px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.privacy-row:last-child { border-bottom: 0; }
.privacy-row--static { grid-template-columns: 1fr; }
.privacy-row__copy { min-width: 0; }
.privacy-row__copy label,
.privacy-row__label {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
  margin: 0 0 3px;
}
.privacy-row__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.privacy-row__control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}
.privacy-row__control select {
  width: 100%;
  max-width: 260px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--surface);
  color: var(--text);
}
.privacy-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.privacy-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.privacy-switch__ui {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 28%, var(--surface-2));
  border: 1px solid var(--border);
  position: relative;
  transition: background 0.15s ease;
}
.privacy-switch__ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, #000 16%, transparent);
  transition: transform 0.15s ease;
}
.privacy-switch input:checked + .privacy-switch__ui,
.privacy-switch__ui.is-on {
  background: color-mix(in srgb, var(--blue) 55%, #1d4ed8);
  border-color: transparent;
}
.privacy-switch input:checked + .privacy-switch__ui::after,
.privacy-switch__ui.is-on::after {
  transform: translateX(18px);
}
.privacy-switch--locked { cursor: default; opacity: 0.9; }
.privacy-sub {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 16px 20px 18px;
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
}
.privacy-sub__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.privacy-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}
.privacy-block-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.privacy-block-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.88rem;
}
.privacy-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 4px 2px 8px;
}
.privacy-form__actions p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.privacy-status {
  margin: 0 20px 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.4;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
  color: var(--text);
}
.privacy-status--ok {
  background: color-mix(in srgb, #157a3c 10%, var(--surface-2));
}
.privacy-status--err,
.privacy-status.is-error {
  background: color-mix(in srgb, #b42318 10%, var(--surface-2));
}
.privacy-cookie-list {
  display: grid;
  gap: 0;
  padding: 0;
}
.privacy-cookie-row {
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.privacy-cookie-row:last-of-type { border-bottom: 0; }
.privacy-cookie-row__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 18px;
  align-items: center;
}
.privacy-cookie-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 4px;
}
.privacy-cookie-row__title h3 {
  margin: 0;
  font-size: 0.9rem;
}
.privacy-cookie-row__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
}
.privacy-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
}
.privacy-pill--required {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.privacy-pill--on {
  color: #157a3c;
  border-color: color-mix(in srgb, #157a3c 28%, var(--border));
  background: color-mix(in srgb, #157a3c 8%, var(--surface));
}
.privacy-pill--off {
  color: var(--muted);
}
.privacy-details-toggle {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.privacy-cookie-details {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.privacy-cookie-details dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.privacy-cookie-details dt {
  margin: 0;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 650;
}
.privacy-cookie-details dd {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.privacy-card__foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}
.privacy-card__foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--muted);
  font-size: 0.8rem;
}
.privacy-card__foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.privacy-card__foot-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: normal;
  max-width: 100%;
}
.privacy-card--danger {
  border-color: color-mix(in srgb, #b42318 22%, var(--border));
  background: color-mix(in srgb, #b42318 3%, var(--surface));
}
.privacy-card--danger .privacy-card__head {
  border-bottom-color: color-mix(in srgb, #b42318 14%, var(--border));
}
.privacy-card--danger h2 { color: #9f1f16; }
.privacy-confirm {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 20px 4px;
  padding: 12px 0 8px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text);
}
.privacy-confirm input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.privacy-page .btn-sm {
  padding: 6px 10px;
  font-size: 0.8rem;
}
.privacy-page .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Notification settings ---------- */
.notif-page {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 4px 0 48px;
  display: grid;
  gap: 18px;
  box-sizing: border-box;
}
.notif-form {
  display: grid;
  gap: 16px;
}
.notif-card {
  box-shadow: 0 8px 24px color-mix(in srgb, #0b1f3a 6%, transparent);
}
.notif-context {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.notif-context__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
}
.notif-context__btn.is-active {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}
.notif-context__hint {
  margin: -6px 0 0;
  font-size: 0.84rem;
}
.notif-rows {
  display: grid;
  gap: 0;
  padding: 4px 8px 10px;
}
.notif-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.notif-row:hover {
  background: color-mix(in srgb, var(--surface-2) 55%, var(--surface));
}
.notif-row--locked {
  cursor: default;
}
.notif-row--locked:hover {
  background: transparent;
}
.notif-row + .notif-row {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.notif-row__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
  flex-shrink: 0;
}
.notif-row__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.notif-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
}
.notif-row__hint {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}
.notif-row__state {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.01em;
}
.notif-row:has(input:not(:checked)) .notif-row__state,
.notif-row--locked .notif-row__state {
  color: var(--muted);
}
.notif-row--locked .notif-row__state {
  color: var(--blue);
}
.notif-row__control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.notif-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}
.notif-push-help {
  margin: 0 20px 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #b42318 22%, var(--border));
  background: color-mix(in srgb, #b42318 6%, var(--surface));
  font-size: 0.86rem;
  line-height: 1.45;
}
.notif-push-help p { margin: 0 0 8px; }
.notif-push-help a { font-weight: 600; }
.notif-schedule {
  display: grid;
  gap: 8px;
  padding: 4px 8px 14px;
}
.notif-freq {
  margin: 0 12px 8px;
  padding: 14px 14px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
  display: grid;
  gap: 8px;
}
.notif-freq legend {
  padding: 0 4px;
  font-weight: 650;
  font-size: 0.88rem;
}
.notif-freq__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  cursor: pointer;
  font-size: 0.92rem;
}
.notif-quiet {
  display: grid;
  gap: 8px;
  margin: 0 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-2) 35%, var(--surface));
}
.notif-quiet__times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.notif-quiet .form-group {
  display: grid;
  gap: 6px;
  margin: 0;
}
.notif-quiet .form-group label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}
.notif-quiet input[type="time"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}
.notif-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 4px 2px 8px;
}
.notif-actions .btn-primary {
  min-width: min(240px, 100%);
}
.notif-page .privacy-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
}
.notif-page .privacy-status--ok {
  background: color-mix(in srgb, #067647 10%, var(--surface));
  color: #067647;
  border: 1px solid color-mix(in srgb, #067647 25%, var(--border));
}
.notif-page .privacy-status--err {
  background: color-mix(in srgb, #b42318 8%, var(--surface));
  color: #9f1f16;
  border: 1px solid color-mix(in srgb, #b42318 25%, var(--border));
}
@media (max-width: 720px) {
  .notif-page { padding-bottom: 36px; gap: 14px; }
  .notif-row {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "control control";
  }
  .notif-row__icon { grid-area: icon; width: 36px; height: 36px; }
  .notif-row__copy { grid-area: copy; }
  .notif-row__control {
    grid-area: control;
    justify-content: flex-start;
    padding-left: 50px;
  }
  .notif-quiet__times { grid-template-columns: 1fr; }
  .notif-actions { flex-direction: column; align-items: stretch; }
  .notif-actions .btn { width: 100%; }
  .notif-context { width: 100%; }
  .notif-context__btn { flex: 1; }
}

/* ---------- Security center ---------- */
.sec-page {
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 4px 0 48px;
  display: grid;
  gap: 16px;
  box-sizing: border-box;
}
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.sec-card {
  box-shadow: 0 8px 24px color-mix(in srgb, #0b1f3a 6%, transparent);
}
.sec-card--critical {
  border-color: color-mix(in srgb, #b42318 28%, var(--border));
}
.sec-card--codes {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  background: color-mix(in srgb, var(--blue) 4%, var(--surface));
}
.sec-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 20px 20px;
}
.sec-stat {
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 40%, var(--surface));
  display: grid;
  gap: 6px;
}
.sec-stat__label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
}
.sec-stat__value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.sec-form {
  display: grid;
  gap: 12px;
  padding: 4px 20px 20px;
}
.sec-form--inline {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}
.sec-form .form-group {
  display: grid;
  gap: 6px;
  margin: 0;
}
.sec-form label {
  font-size: 0.84rem;
  font-weight: 600;
}
.sec-form input[type="password"],
.sec-form input[type="email"],
.sec-form input[type="text"],
.sec-actions-row input[type="text"] {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.sec-pad { padding: 4px 20px 20px; display: grid; gap: 12px; }
.sec-pending {
  margin: 0 20px;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  font-size: 0.88rem;
}
.sec-strength { display: grid; gap: 8px; }
.sec-strength__bar {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.sec-strength__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.15s ease;
}
.sec-strength__bar span[data-score="4"],
.sec-strength__bar span[data-score="5"] { background: #067647; }
.sec-strength__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: 0.8rem;
  color: var(--muted);
}
.sec-strength__checks .is-ok { color: #067647; }
.sec-2fa-setup {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin-top: 8px;
}
.sec-secret code {
  font-size: 0.9rem;
  word-break: break-all;
}
.sec-codes { padding: 4px 20px 20px; display: grid; gap: 12px; }
.sec-codes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sec-codes__list code {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.88rem;
}
.sec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.sec-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.sec-list__item:first-child { border-top: 0; }
.sec-list__item strong {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.sec-list__item .muted {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
}
.sec-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.sec-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.sec-inline-form input[type="text"] {
  min-width: 140px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
}
.sec-pill {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}
.sec-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.sec-actions-row input { flex: 1; min-width: 160px; }
.sec-inline-status { margin: 0; font-size: 0.88rem; color: var(--muted); }
.sec-danger-details summary {
  cursor: pointer;
  color: #9f1f16;
  font-weight: 600;
  font-size: 0.88rem;
}
.sec-danger-details .sec-form {
  padding: 10px 0 0;
  max-width: 280px;
}
.sec-page .privacy-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  word-break: break-word;
}
.sec-page .privacy-status--ok {
  background: color-mix(in srgb, #067647 10%, var(--surface));
  color: #067647;
  border: 1px solid color-mix(in srgb, #067647 25%, var(--border));
}
.sec-page .privacy-status--err {
  background: color-mix(in srgb, #b42318 8%, var(--surface));
  color: #9f1f16;
  border: 1px solid color-mix(in srgb, #b42318 25%, var(--border));
}
@media (max-width: 800px) {
  .sec-grid { grid-template-columns: 1fr; }
  .sec-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-codes__list { grid-template-columns: 1fr; }
  .sec-form--inline { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sec-overview { grid-template-columns: 1fr; }
  .sec-list__item { flex-direction: column; }
}


/* ---------- Member billing ---------- */
.member-billing { display: grid; gap: 16px; }

.billing-v3 {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  gap: 1.25rem;
}

.billing-v3-hero {
  padding: 1.5rem 1.6rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #0f2a4a 0%, #1a4f8c 55%, #2563a8 100%);
  color: #fff;
}

.billing-v3-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  opacity: 0.85;
}

.billing-v3-hero h1 {
  margin: 0.35rem 0 0.4rem;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.2;
}

.billing-v3-lead {
  margin: 0;
  color: #d7e6f8;
  max-width: 42rem;
}

.billing-change-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: flex-end;
}

.billing-change-hero__payments {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}

.billing-change-hero__payments:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.billing-change-status {
  grid-template-columns: 1fr;
}

.billing-switch-hint {
  margin: 0;
  padding: 0.95rem 1.15rem;
  border-radius: 0.85rem;
  background: #f5f9ff;
  border-left: 3px solid #1664ea;
  font-size: 1rem;
  line-height: 1.45;
}

.billing-change-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 1.25rem;
}

.billing-change-card {
  min-height: 280px;
  padding: 1.5rem;
}

.billing-change-card.is-downgrade {
  border-color: #cbd5e1;
}

.billing-change .btn-secondary,
.billing-change-card .btn-secondary {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid #cbd5e1;
}

.billing-downgrade-pending {
  margin: 1rem 0 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.65rem;
  background: #fff7e8;
  color: #9a6700;
}

.billing-downgrade-impact {
  margin: 1.1rem 0;
  padding: 1rem 1.1rem;
  border-radius: 0.85rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
}

.billing-downgrade-impact p {
  margin: 0.35rem 0;
}

.billing-v3-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 1rem;
  background: #fff;
}

.billing-v3-status__title {
  margin: 0.55rem 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.billing-v3-status__price {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blue, #1664ea);
}

.billing-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.65rem;
  border-radius: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  background: #eef3fb;
  color: #1f3b63;
}

.billing-status-badge--active,
.billing-status-badge--coupon { background: #e7f7ee; color: #176b3a; }
.billing-status-badge--trialing { background: #eef2ff; color: #3730a3; }
.billing-status-badge--pending,
.billing-status-badge--ending_soon { background: #fff7e8; color: #9a6700; }
.billing-status-badge--expired,
.billing-status-badge--none { background: #f3f4f6; color: #4b5563; }

.billing-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1rem 0 0.75rem;
}

.billing-mode-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.65rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.billing-mode-switch__btn.is-active {
  border-color: #1664ea;
  background: #eef5ff;
  color: #0f3d8c;
}

.billing-mode-single,
.billing-upgrade-hint,
.billing-trial-hint,
.billing-downgrade-note {
  margin: 0.65rem 0;
}

.billing-upgrade-hint {
  padding: 0.85rem 1rem;
  border-left: 3px solid #1664ea;
  background: #f5f9ff;
}

.billing-v3-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.billing-v3-card {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 1rem;
  background: #fff;
}

.billing-v3-card.is-recommended {
  border-color: #1664ea;
  box-shadow: 0 0 0 1px rgba(22, 100, 234, 0.15);
}

.billing-v3-card.is-current {
  border-color: #176b3a;
}

.billing-v3-card__flag {
  display: inline-flex;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e7f7ee;
  color: #176b3a;
}

.billing-v3-card__flag--rec {
  background: #eef5ff;
  color: #0f3d8c;
}

.billing-v3-card__meta {
  margin: 0;
  color: var(--muted, #66758f);
  font-size: 0.9rem;
}

.billing-v3-card h3 {
  margin: 0.35rem 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

.billing-v3-card__price {
  margin: 0.2rem 0;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 800;
  color: #0f2a4a;
}

.billing-v3-card__advantage {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
}

.billing-v3-card__cta {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
  text-align: center;
}

.billing-v3-invoices,
.billing-v3-plans {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 1rem;
  background: #fff;
}

.billing-empty-state {
  padding: 1.25rem;
  border: 1px dashed var(--border, #d9e3f0);
  border-radius: 0.85rem;
  background: #fafbfd;
}

.billing-confirm-card {
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 1rem;
  background: #fff;
}

.billing-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.billing-confirm-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.25rem;
  margin: 1.25rem 0;
}

.billing-confirm-meta dt {
  font-size: 0.85rem;
  color: var(--muted, #66758f);
}

.billing-confirm-meta dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}

.billing-confirm-form {
  display: grid;
  gap: 1rem;
}

.billing-coupon-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
}

.billing-provider-pick {
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  display: grid;
  gap: 0.45rem;
}

.billing-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.billing-cancel-modes {
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  display: grid;
  gap: 0.75rem;
}

.billing-cancel-modes legend {
  padding: 0 0.35rem;
  font-weight: 700;
}

.billing-cancel-mode {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
}

.billing-cancel-mode span {
  display: grid;
  gap: 0.15rem;
}

.billing-cancel-mode--danger strong {
  color: #b42318;
}

.billing-portal-form {
  margin: 0;
}

.billing-portal-hint {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  max-width: 16rem;
}

.flash-warning {
  background: #fff7e8;
  color: #9a6700;
  border: 1px solid #f5d78e;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  margin-bottom: 1rem;
}

.billing-v3-status__actions .billing-portal-form,
.billing-v3-status__actions > .btn,
.billing-v3-status__actions > a.btn {
  width: 100%;
  text-align: center;
}

.billing-v3-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
  margin: 0.85rem 0;
}

.billing-v3-meta dt {
  font-size: 0.8rem;
  color: var(--muted, #66758f);
}

.billing-v3-meta dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
}

.billing-cancel-notice {
  margin: 0.75rem 0;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid #9a6700;
  background: #fff7e8;
}

.billing-v3-status__actions {
  display: grid;
  gap: 0.55rem;
  justify-items: stretch;
}

.billing-v3-status__actions .btn {
  text-align: center;
}

.btn-danger-outline {
  border: 1px solid #b42318;
  color: #b42318;
  background: #fff;
}

.btn-danger {
  background: #b42318;
  color: #fff;
  border: 0;
}

.billing-v3-methods {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 1rem;
  background: #fff;
}

.billing-method-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.billing-method-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.75rem;
}

.billing-method-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.billing-method-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.billing-pm-security {
  margin-top: 0.75rem;
}

.billing-subhead {
  margin: 1rem 0 0.5rem;
  font-size: 1rem;
}

@media (max-width: 640px) {
  .billing-v3-meta { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .billing-v3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-v3-status { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .billing-v3-grid,
  .billing-confirm-grid,
  .billing-confirm-meta { grid-template-columns: 1fr; }
  .billing-coupon-row { grid-template-columns: 1fr; }
  .billing-confirm-actions { justify-content: stretch; }
  .billing-confirm-actions .btn { width: 100%; }
}

.billing-v2 .billing-offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}

.billing-offer-card {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.85rem;
  background: #fff;
  min-width: 0;
}

.billing-offer-badges {
  font-size: 0.75rem;
  color: var(--muted, #66758f);
}

.billing-offer-price {
  margin: 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--blue, #1664ea);
}

.billing-offer-form {
  display: grid;
  gap: 0.55rem;
}

.billing-coupon-field,
.billing-consent {
  display: grid;
  gap: 0.25rem;
  font-size: 0.82rem;
}

.billing-consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.45rem;
}

.billing-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.billing-interval-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.billing-interval-tabs button,
.account-type-switch button {
  border: 1px solid var(--border, #d9e3f0);
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}

.billing-interval-tabs button.active,
.account-type-switch button.active {
  border-color: var(--blue, #1664ea);
  color: var(--blue, #1664ea);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}

.billing-trial-hint {
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 0.65rem;
  background: var(--surface-2, #f8faff);
  font-size: 0.85rem;
}

.billing-invoice-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.billing-autorenew {
  margin-top: 0.75rem;
}

.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.admin-kpi-grid .card {
  padding: 0.85rem;
  display: grid;
  gap: 0.25rem;
}

.admin-kpi-grid strong {
  font-size: 1.25rem;
}

/* Admin Zahlungen & Abonnements hub */
.abpay-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0.35rem;
  background: #eef2f7;
  border-radius: 0.75rem;
}

.abpay-tabs__btn {
  padding: 0.55rem 0.9rem;
  border-radius: 0.55rem;
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}

.abpay-tabs__btn.is-active {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.abpay-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.abpay-kpi {
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.25rem;
}

.abpay-kpi strong { font-size: 1.35rem; }
.abpay-kpi__label { font-size: 0.8rem; color: #64748b; }
.abpay-kpi--green { border-color: #b7e4c7; background: #f3fbf6; }
.abpay-kpi--blue { border-color: #bfdbfe; background: #f0f7ff; }
.abpay-kpi--yellow { border-color: #f5d78e; background: #fffbeb; }
.abpay-kpi--red { border-color: #f5c2c0; background: #fff5f5; }
.abpay-kpi--purple { border-color: #ddd6fe; background: #f8f5ff; }

.abpay-period { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 0 0 1rem; font-size: 0.9rem; }
.abpay-period a { color: #475569; }
.abpay-period a.is-active { font-weight: 700; color: #0f172a; }

.abpay-card { margin-bottom: 1.25rem; padding: 1.15rem 1.25rem; }
.abpay-card .card-title { margin: 0 0 0.75rem; font-size: 1.1rem; }

.abpay-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.abpay-filters .input { min-width: 8rem; max-width: 14rem; }
.abpay-count { margin: 0 0 0.75rem; }

.abpay-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
}

.abpay-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: lowercase;
}

.abpay-badge--paid { background: #dcfce7; color: #166534; }
.abpay-badge--processing { background: #dbeafe; color: #1d4ed8; }
.abpay-badge--pending { background: #fef3c7; color: #92400e; }
.abpay-badge--failed,
.abpay-badge--cancelled { background: #fee2e2; color: #b91c1c; }
.abpay-badge--refunded { background: #ede9fe; color: #5b21b6; }
.abpay-badge--disputed { background: #e2e8f0; color: #334155; }
.abpay-badge--muted { background: #f1f5f9; color: #64748b; }

.abpay-table td { vertical-align: top; }
.abpay-actions { display: grid; gap: 0.35rem; }
.abpay-actions form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.abpay-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.abpay-dl {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.abpay-dl dt { font-size: 0.8rem; color: #64748b; }
.abpay-dl dd { margin: 0.15rem 0 0; }

.abpay-action-form {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e2e8f0;
}

.abpay-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.abpay-timeline li {
  padding-left: 0.85rem;
  border-left: 3px solid #cbd5e1;
}

.abpay-timeline time {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

.abpay-manual__banner {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #b45309;
  background: #fffbeb;
}

@media (max-width: 720px) {
  .abpay-filters .input { max-width: none; width: 100%; }
  .abpay-table { font-size: 0.88rem; }
}

.member-billing-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(120deg, #071a3e, #14569c);
  color: white;
}
.member-billing-hero p {
  margin: 0;
  color: #69e7f7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}
.member-billing-hero h1 { margin: 6px 0; }
.member-billing-hero span { color: #cedcf0; }

.marketplace-meta {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
}
.marketplace-meta div { display: grid; grid-template-columns: 140px 1fr; gap: 0.5rem; }
.marketplace-meta dt { color: var(--muted); font-weight: 700; }
.marketplace-meta dd { margin: 0; }
.job-filters { padding: 14px; margin-bottom: 18px; }
.job-filter-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px) auto auto; gap: 9px; }
.job-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.job-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; }
.job-filter-main > input,
.job-filters select { min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: inherit; }
.job-filter-main > .active { border-color: var(--blue); color: var(--blue); }
.job-filter-extra {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 10px;
  align-items: end;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
}
.job-filter-extra label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; }
.job-filter-extra .check-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-weight: 650;
}
.filter-result { margin-top: 9px; color: var(--muted); font-size: 11px; }
.listing-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.listing-pills .status-open { background: #eaf9f2; border-color: #a8dfc8; color: #087651; }

@media (max-width: 760px) {
  .news-full-list, .settings-grid { grid-template-columns: 1fr; }
  .world-layout { grid-template-columns: 1fr; }
  .source-panel { position: static; }
  .news-page-tabs { display: grid; }
  .news-page-header { padding: 22px; }
  .settings-head, .member-billing-hero { flex-direction: column; align-items: stretch; }
  .marketplace-meta div { grid-template-columns: 1fr; }
  .job-filter-main,
  .job-filter-extra { grid-template-columns: 1fr; }
}

/* ---------- Profile workspace (Vater) ---------- */
.profile-workspace { max-width: 1120px; margin: auto; }
.profile-workspace.is-owner-preview .profile-actions .btn-primary { display: none; }
.profile-stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 18px; }
.profile-stat-strip > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  border-radius: 14px;
  background: var(--surface);
  color: var(--blue);
  text-decoration: none;
}
.profile-stat-strip span, .profile-stat-strip strong, .profile-stat-strip small { display: block; }
.profile-stat-strip strong { color: var(--text); font-size: 22px; line-height: 1.15; }
.profile-stat-strip small { color: var(--muted); font-size: 11px; margin-top: 3px; font-weight: 650; }
.profile-workspace .profile-hero {
  overflow: hidden;
  margin-bottom: 18px;
  border-radius: 22px 22px 14px 14px;
}
.profile-workspace .cover {
  height: 235px;
  background: linear-gradient(120deg, #071b40, #1765b1 65%, #18c3ea);
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 22px 22px 0 0;
}
.media-control { position: absolute; right: 18px; top: 18px; display: flex; gap: 7px; align-items: center; background: rgba(4, 16, 36, 0.78); color: white; border-radius: 9px; padding: 9px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.media-control input, .portrait-control input { display: none; }
.profile-cover-position { position: absolute; left: 18px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 9px; background: rgba(5, 16, 35, 0.8); color: white; font-size: 11px; font-weight: 700; }
.profile-cover-position input { display: block; width: 150px; accent-color: #27c7ec; }
.profile-save-status { margin: -5px auto 14px; padding: 11px 14px; border-radius: 10px; background: #eaf9f2; color: #087651; border: 1px solid #a8dfc8; font-size: 12px; font-weight: 700; }
.profile-save-status.error { background: #fff0f0; color: #a92f39; border-color: #efb9bd; }
.preview-banner {
  margin: 0 auto 16px;
  padding: 12px 15px;
  border: 1px solid #77b8ef;
  border-radius: 12px;
  background: #eaf6ff;
  color: #075f8c;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 650;
}
.preview-banner a {
  margin-left: auto;
  color: #075f8c;
  font-weight: 750;
  text-decoration: none;
}
.profile-main { position: relative; padding: 0 28px 25px; display: grid; grid-template-columns: 155px minmax(0, 1fr) auto; gap: 20px; align-items: end; }
.portrait {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: -75px;
  border: 6px solid var(--surface);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 24px rgba(7, 27, 64, 0.18);
}
.portrait > span { color: white; font-size: 38px; font-weight: 800; }
.portrait-control { position: absolute; right: 4px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: var(--shadow); cursor: pointer; }
.profile-copy h1 { font-size: 30px; margin: 0 0 5px; }
.profile-copy p { font-size: 16px; margin: 0 0 8px; }
.profile-copy > span.muted { display: flex; align-items: center; gap: 5px; }
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.profile-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
  color: #0b4f7a;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  word-break: break-word;
}
.profile-badge--verified { border-color: #9fd0b8; background: #eef9f3; color: #0a6b4a; }
.profile-badge--available { border-color: #9ec6ef; background: #eef6ff; color: #0b5f96; }
.profile-badge--more { background: var(--surface-2); color: var(--muted); border-color: var(--border); }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.profile-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px; }
.profile-columns main, .profile-columns aside { display: grid; gap: 18px; align-content: start; }
.profile-section { padding: 22px; }
.profile-section h2 { font-size: 20px; margin: 0 0 14px; }
.profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.profile-section-head h2 { margin: 0; }
.profile-about-text {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.65;
  max-width: 68ch;
}
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-tags span {
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--border));
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}
.profile-timeline-stack { display: grid; gap: 16px; }
.profile-timeline { display: grid; grid-template-columns: 44px 1fr; gap: 12px; }
.profile-timeline-icon { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--blue); }
.profile-timeline small { display: block; margin-top: 4px; }
.profile-contact p { margin: 0 0 14px; }
.profile-contact p:last-child { margin-bottom: 0; }
.profile-contact a { color: var(--blue); word-break: break-word; }
.profile-activity-list { display: grid; gap: 12px; }
.profile-activity-list .post-card { margin: 0; }
.profile-editor-grid { display: grid; gap: 14px; }
.profile-editor-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.profile-editor-grid input, .profile-editor-grid textarea, .profile-editor-grid select { padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); font: inherit; }
.profile-editor-heading {
  margin: 8px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-editor-grid.editor > .pill {
  width: max-content;
  margin-top: -4px;
}
.profile-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-weight: 650 !important;
}
.profile-check input { width: auto; }
.profile-repeat-list { display: grid; gap: 12px; }
.profile-repeat-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.profile-post-card { border-top: 1px solid var(--border); padding: 18px 0; }
.profile-post-card:first-child { border-top: 0; }
.profile-post-card header { display: flex; gap: 10px; align-items: center; }
.profile-post-card header > div { flex: 1; }
.profile-post-card header small { display: block; margin-top: 2px; }
.profile-post-card > p { margin: 14px 0; line-height: 1.6; white-space: pre-wrap; }
.profile-post-card footer { display: flex; gap: 18px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
@media (max-width: 960px) {
  .profile-main { grid-template-columns: 140px minmax(0, 1fr); }
  .profile-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .profile-stat-strip { grid-template-columns: 1fr; }
  .profile-main { grid-template-columns: 1fr; padding: 0 20px 20px; }
  .portrait { width: 120px; height: 120px; margin-top: -60px; }
  .profile-columns { grid-template-columns: 1fr; }
  .profile-repeat-row { grid-template-columns: 1fr; }
  .profile-workspace .cover { height: 170px; }
}

/* ---------- Language menu (reference layout + flag images) ---------- */
.lang-menu { position: relative; }
.lang-menu__trigger {
  list-style: none;
  padding: 8px 12px;
  gap: 8px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.lang-menu__trigger::-webkit-details-marker { display: none; }
.lang-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(300px, calc(100vw - 24px));
  padding: 12px 10px 8px;
  z-index: var(--z-dropdown, 300);
  box-shadow: 0 18px 50px rgba(5, 24, 54, 0.2);
  display: flex;
  flex-direction: column;
  max-height: min(72vh, 440px);
  max-height: min(72dvh, 440px);
  border-radius: 14px;
}
.lang-menu__panel.is-fixed-portal {
  position: fixed;
  right: auto;
  top: auto;
  margin: 0;
}
.lang-menu__head { padding: 0 4px 8px; flex: 0 0 auto; }
.lang-menu__head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.lang-menu__head p {
  font-size: 11px;
  margin: 4px 0 10px;
  line-height: 1.35;
}
.lang-menu__search-wrap {
  position: relative;
  display: block;
}
.lang-menu__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.lang-menu__search {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 9px 10px 9px 32px;
  font-size: 12px;
  outline: none;
}
.lang-menu__search:focus {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.lang-menu__list {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  padding: 2px 2px 4px;
  min-height: 0;
}
.lang-menu__item {
  width: 100%;
  display: grid;
  grid-template-columns: 22px 1fr 18px;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 8px 8px;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
.lang-menu__item[hidden] { display: none; }
.lang-menu__item.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.lang-menu__text { min-width: 0; }
.lang-menu__item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}
.lang-menu__item small {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  margin-top: 1px;
}
.lang-flag {
  width: 20px;
  height: 15px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(13, 27, 53, 0.08);
}
.lang-menu__check {
  color: var(--blue);
  justify-self: end;
}
.lang-menu__check-spacer {
  width: 16px;
  height: 16px;
  justify-self: end;
}
.lang-menu__foot {
  flex: 0 0 auto;
  margin-top: 6px;
  padding: 8px 6px 2px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  text-align: left;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
html[dir="rtl"] .lang-menu__panel { right: auto; left: 0; }
html[dir="rtl"] .lang-menu__item { text-align: right; }
html[dir="rtl"] .lang-menu__search { padding: 9px 32px 9px 10px; }
html[dir="rtl"] .lang-menu__search-icon { left: auto; right: 10px; }
html[dir="rtl"] .lang-menu__check,
html[dir="rtl"] .lang-menu__check-spacer { justify-self: start; }

/* Basic RTL shell mirroring for ar / he / fa */
html[dir="rtl"] body {
  text-align: right;
}
html[dir="rtl"] .app-shell,
html[dir="rtl"] .sidebar,
html[dir="rtl"] .topbar,
html[dir="rtl"] .feed-layout,
html[dir="rtl"] .messenger,
html[dir="rtl"] .messages-workspace {
  direction: rtl;
}
html[dir="rtl"] .chat-panel,
html[dir="rtl"] .notification-panel {
  left: 12px;
  right: auto;
}
html[dir="rtl"] .btn,
html[dir="rtl"] .icon-button {
  direction: rtl;
}

/* ---------- Screenshot parity bridges ---------- */
.search-kind a {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.search-kind a.active,
.search-kind button.active {
  background: color-mix(in srgb, var(--blue) 10%, transparent);
  color: var(--blue);
}
.news-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  margin: 14px 0 4px;
  border-radius: 10px;
  background: var(--surface-2);
}
.news-mode-switch button {
  border: 0;
  border-radius: 8px;
  padding: 7px 5px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.news-mode-switch button.active {
  background: var(--surface);
  color: var(--blue);
  box-shadow: 0 1px 4px rgba(7, 20, 36, 0.1);
}
.news-side-card .news-topic {
  width: max-content;
  border-radius: 999px;
  padding: 3px 6px;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}
.contacts-side-card .contact-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.contacts-side-card .contact-row form {
  grid-column: 2;
  margin: 0;
}
.contacts-side-card .contact-row .btn-connect {
  width: max-content;
  border: 1px solid var(--blue);
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
  padding: 5px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.view-contacts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 12px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 750;
}

/* Feed parity: people-card connect forms, modal hidden, counts */
.people-card .contact-row form {
  grid-column: 2;
  margin: 0;
  width: max-content;
}
.modal[hidden] { display: none !important; }
.feed-post .counts {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  padding: 10px 2px;
}
.feed-post .article-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 900;
  margin-bottom: 6px;
}
.partner-modal form {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.partner-modal label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.partner-modal label.selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.partner-modal label strong,
.partner-modal label small {
  display: block;
}
.news-heading-actions a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--blue);
}

/* ---------- Phase D: Messages / Calendar / Company / Directory / Analytics ---------- */
.messages-title {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.messages-title p {
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--blue);
  font-weight: 800;
  margin: 0;
}
.messages-title h1 { margin: 6px 0; }
.messages-title .counter { display: grid; text-align: right; }
.messages-title .counter strong { font-size: 22px; color: var(--blue); }
.messages-title .counter span { font-size: 11px; color: var(--muted); }
.message-mode { display: flex; gap: 8px; margin-bottom: 12px; }
.message-mode a {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 9px 15px;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
}
.message-mode a.active.private { background: #dff4ff; border-color: #68c9ef; color: #075f8c; }
.message-mode a.active.company { background: #173f88; border-color: #173f88; color: white; }
.company-messenger > main > header { background: linear-gradient(120deg, #0b2859, #174b9b); color: white; }
.company-messenger > main > header .thread-action { color: white; }
.company-messenger > main > header .thread-action:hover { background: rgba(255, 255, 255, 0.14); }
.company-messenger .message.mine, .company-messenger .send { background: #174b9b !important; border-color: #174b9b !important; }
.private-messenger .message.mine, .private-messenger .send { background: #159bd3 !important; border-color: #159bd3 !important; }
.company-inbox-empty {
  grid-column: 1 / -1;
  margin: auto;
  max-width: 520px;
  padding: 36px;
  text-align: center;
}
.company-inbox-empty .avatar { margin: 0 auto 12px; }
.company-inbox-empty h2 { margin: 0 0 8px; }
.inbox-tabs { display: flex; border-bottom: 1px solid var(--border); }
.inbox-tabs button { flex: 1; border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 11px; color: var(--muted); font-size: 11px; cursor: pointer; }
.inbox-tabs button.active { color: var(--blue); border-color: var(--blue); }
.thread-actions { display: flex; gap: 4px; }
.thread-action {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.thread-action:hover { background: var(--surface-2); color: var(--text); }
.message-attachment {
  display: block;
  margin-top: 8px;
  padding: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: inherit;
}
.attachment-status {
  padding: 0 16px 10px;
  font-size: 11px;
  color: var(--muted);
}
.attachment-status button {
  border: 0;
  background: transparent;
  color: #c0392b;
  cursor: pointer;
}
.messenger > main > form .attach-trigger {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.messenger > main > form .attach-trigger:hover { background: var(--surface-2); color: var(--text); }
.messenger {
  height: calc(100vh - 190px);
  height: calc(100dvh - 190px);
  min-height: min(500px, 70svh);
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  max-width: 100%;
}
.messenger > aside { border-right: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.messenger-inbox-scroll { flex: 1; overflow: auto; min-height: 0; }
.person-support {
  background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 10%, var(--surface)), var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 25%, var(--border));
}
.person-support .support-avatar,
.messenger .avatar.support-avatar {
  background: #e8f4fc;
  color: #0b5f8a;
  display: grid;
  place-items: center;
}
.person-support-cta { margin: 0; padding: 0; border: 0; }
.person-support-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  text-align: left;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.person-support strong { display: block; }
.person-support small { display: block; color: var(--muted); }
.support-status-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
}
.thread-menu-wrap { position: relative; }
.thread-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 220px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.thread-menu[hidden] { display: none !important; }
.thread-menu [role="menuitem"],
.thread-menu button[role="menuitem"] {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
.thread-menu [role="menuitem"]:hover,
.thread-menu button[role="menuitem"]:hover { background: var(--surface-2); }
.messenger-compose-blocked {
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
}
.messenger .person.is-deleted-peer strong { color: var(--muted); font-style: italic; }
.conversation.is-support {
  background: linear-gradient(120deg, color-mix(in srgb, #159bd3 12%, var(--surface)), var(--surface));
}
.conversation .support-status-pill { margin-top: 2px; }
.chat-support-cta {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.chat-support-cta strong { display: block; font-size: 13px; }
.chat-support-cta small { display: block; color: var(--muted); font-size: 11px; }
.chat-thread-menu-wrap { margin-left: auto; position: relative; }
.active-chat-head { display: flex; align-items: center; gap: 10px; }
.conversation-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: 9px;
}
.conversation-search input {
  border: 0;
  background: transparent;
  outline: 0;
  width: 100%;
  color: inherit;
}
.messenger .person {
  width: 100%;
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  text-align: left;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 13px;
  color: inherit;
}
.messenger .person.active {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}
.messenger .person small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.messenger > main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.messenger > main > header {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.messenger > main > header small { display: block; }
.messenger > main > header i { color: #0a9b65; font-style: normal; }
.message-area {
  flex: 1;
  overflow: auto;
  background: var(--surface-2);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.message-area .message {
  align-self: flex-start;
  max-width: 72%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px 15px 15px 4px;
  padding: 10px 12px;
}
.message-area .message.mine {
  align-self: flex-end;
  background: #159bd3;
  color: white;
  border-color: #159bd3;
  border-radius: 15px 15px 4px 15px;
}
.message-area .message time {
  display: block;
  font-size: 9px;
  opacity: 0.7;
  text-align: right;
  margin-top: 5px;
}
.message-area .empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
}
.message-area .empty strong {
  display: block;
  color: var(--text);
  margin-top: 8px;
}
.messenger > main > form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--border);
}
.messenger > main > form input[type="text"] {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 10px 14px;
  color: inherit;
}
.messenger > main > form .send {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #159bd3;
  color: white;
  display: grid;
  place-items: center;
  cursor: pointer;
}
@media (max-width: 750px) {
  .messenger { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .messenger > aside { max-height: min(300px, 40svh); border-right: 0; border-bottom: 1px solid var(--border); }
  .messenger > main { min-height: min(520px, 60svh); }
}

.calendar-title { margin-bottom: 22px; }
.calendar-title p {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--blue);
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}
.calendar-title h1 { margin: 6px 0; font-size: clamp(1.85rem, 2.6vw, 2.4rem); }
.cal-pro__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.15rem;
  flex-wrap: wrap;
}
.cal-pro__head-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.calendar-layout,
.cal-pro__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
  gap: 1.35rem;
  align-items: start;
}
.cal-pro__main-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.calendar-shell {
  padding: clamp(20px, 2.2vw, 28px);
  padding-bottom: clamp(24px, 2.6vw, 32px);
  overflow: visible;
}
.cal-pro__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  align-self: start;
}
.cal-aside-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.3rem;
  overflow: visible;
  box-sizing: border-box;
}
.cal-aside-card__head {
  margin: 0 0 14px;
  padding: 0;
}
.cal-aside-card__head h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text);
}
.cal-aside-card__body {
  min-width: 0;
}
.cal-aside-card__footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cal-aside-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.45rem;
  padding: 0.35rem 0.15rem 0.15rem;
}
.cal-aside-empty__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
  color: var(--blue);
  margin-bottom: 0.15rem;
}
.cal-aside-empty h3 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}
.cal-aside-empty p {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 16rem;
}
.cal-aside-empty .btn { margin-top: 0.15rem; }

/* Compact privacy notice under calendar (main column) */
.cal-privacy-box {
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--blue) 6%, transparent);
  display: grid;
  gap: 0.65rem;
}
.cal-privacy-box__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
}
.cal-privacy-box__head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text);
}
.cal-privacy-box__icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-2));
  color: var(--blue);
}
.cal-privacy-box__summary {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 52rem;
}
.cal-privacy-box__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cal-privacy-box__actions .btn {
  min-height: 2.2rem;
  font-weight: 650;
}
.cal-privacy-box__more {
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 0.55rem;
}
.cal-privacy-box__more summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--blue);
  list-style: none;
}
.cal-privacy-box__more summary::-webkit-details-marker {
  display: none;
}
.cal-privacy-box__details {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
}

/* Calendar connection settings — stacked in right sidebar */
.cal-settings {
  margin-top: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cal-settings--aside {
  width: 100%;
}
.cal-settings__grid {
  display: contents;
}
.cal-settings-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem 1.3rem;
  overflow: visible;
  height: auto;
}
.cal-settings-card.cal-aside-card {
  padding: 1.25rem 1.3rem;
}
.cal-settings-card__head {
  margin: 0 0 1rem;
  padding: 0 0 0.85rem;
  border-bottom: 1px solid var(--border);
}
.cal-settings-card__head h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text);
}
.cal-settings-card__body {
  min-width: 0;
  display: grid;
  gap: 1rem;
}
.cal-settings-empty {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.cal-provider-list {
  gap: 0.85rem;
}
.cal-provider-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.cal-provider-card__main {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 14rem;
}
.cal-provider-card__copy {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}
.cal-provider-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}
.cal-provider-card__title-row strong {
  font-size: 0.98rem;
  line-height: 1.25;
}
.cal-provider-card__account,
.cal-provider-card__meta {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
  word-break: break-word;
}
.cal-provider-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 100%;
}
.cal-provider-card__actions .btn,
.cal-provider-card__actions a.btn {
  width: auto;
  min-height: 2.35rem;
  padding: 0.55rem 0.95rem;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}
.cal-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
  background: color-mix(in srgb, var(--muted) 14%, var(--surface));
  color: var(--muted);
}
.cal-status-badge.is-connected {
  background: color-mix(in srgb, #0b6e7a 16%, var(--surface));
  color: color-mix(in srgb, #0b6e7a 85%, var(--text));
}
.cal-status-badge.is-error {
  background: color-mix(in srgb, #b42318 14%, var(--surface));
  color: #b42318;
}
.cal-status-badge.is-idle {
  background: color-mix(in srgb, var(--muted) 12%, var(--surface));
  color: var(--muted);
}
.integration-mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 750;
  font-size: 1rem;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}
.integration-mark--apple {
  background: color-mix(in srgb, #111 10%, var(--surface));
  color: #222;
}
.cal-sync-block {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.cal-sync-block + .cal-sync-block {
  margin-top: 0.15rem;
}
.cal-sync-block__title {
  margin: 0;
  font-size: 0.92rem;
}
.cal-sync-form {
  margin: 0;
  gap: 0.75rem;
}
.cal-sync-calendars {
  min-height: 6rem;
  width: 100%;
}
.cal-sync-refresh {
  margin: 0;
  font-size: 0.82rem;
}
.cal-sync-form__actions,
.cal-sync-now-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}
.cal-sync-now-form .btn {
  min-width: 8rem;
}
.cal-conflicts {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.25rem;
}
.cal-conflicts h3 {
  margin: 0;
  font-size: 0.95rem;
}
.cal-conflict-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem;
  background: var(--surface);
}
.cal-conflict-item p {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.85rem;
}
.cal-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cal-io {
  gap: 1rem;
}
.cal-ics-export {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  min-height: 2.5rem;
  font-weight: 650;
}
.cal-ics-import {
  margin: 0;
}
.cal-ics-import .pe-field {
  position: relative;
}
.cal-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cal-file-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.45rem;
}
.cal-file-name {
  font-size: 0.88rem;
  line-height: 1.35;
  word-break: break-word;
}
.cal-integration-list {
  display: grid;
  gap: 12px;
}
.cal-integration-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.cal-integration-row__copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.cal-integration-row__copy strong {
  font-size: 0.92rem;
  line-height: 1.25;
}
.cal-integration-status {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}
.cal-integration-status.is-connected {
  color: color-mix(in srgb, #0b6e7a 80%, var(--text));
  font-weight: 650;
}
.cal-integration-status.is-error {
  color: #b42318;
  font-weight: 650;
}
.cal-integration-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}
.cal-integration-error {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #b42318;
  line-height: 1.35;
}
.cal-integration-row__action {
  width: auto;
  justify-content: center;
  font-size: 0.82rem;
}
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.calendar-toolbar h2 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.calendar-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-today-btn { font-weight: 700; }
.view-switch {
  display: flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  flex-wrap: wrap;
}
.view-switch a {
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}
.view-switch a.active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.cal-legend {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.cal-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
.cal-dot.is-personal,
.cal-chip.is-personal,
.week-event.is-personal { --cal-accent: #0b6e7a; }
.cal-dot.is-network,
.cal-chip.is-network,
.week-event.is-network { --cal-accent: #1f5fbf; }
.cal-dot.is-company,
.cal-chip.is-company,
.week-event.is-company { --cal-accent: #8a5a12; }
.cal-dot { background: var(--cal-accent, var(--blue)); }
.month-grid,
.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  font-size: 0.9rem;
}
.month-weekday {
  text-align: center;
  color: var(--muted);
  padding: 0.45rem 0;
  font-weight: 700;
  font-size: 0.8rem;
}
.month-cell {
  min-height: clamp(92px, 12vw, 118px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
}
.month-cell.is-empty {
  border: 0;
  background: transparent;
  min-height: 0;
}
.month-cell.is-today {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.month-day-num {
  color: inherit;
  text-decoration: none;
  margin-bottom: 0.15rem;
}
.month-cell strong { display: block; font-size: 0.95rem; }
.cal-chip {
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
  color: color-mix(in srgb, var(--cal-accent, var(--blue)) 85%, #000);
  background: color-mix(in srgb, var(--cal-accent, var(--blue)) 14%, var(--surface));
  border-left: 3px solid var(--cal-accent, var(--blue));
  border-radius: 5px;
  padding: 3px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.month-cell .more { font-size: 0.75rem; color: var(--muted); font-weight: 650; }
.week-grid,
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.week-day {
  min-height: 360px;
  border-left: 1px solid var(--border);
  background: var(--surface-2);
}
.week-day:first-child { border-left: 0; }
.week-day.is-today { background: color-mix(in srgb, var(--blue) 5%, var(--surface)); }
.week-day-head {
  display: block;
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.week-day-head small, .week-day-head strong { display: block; }
.week-day-head small { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.week-day-head strong { margin-top: 3px; font-size: 1.25rem; }
.week-event {
  display: block;
  margin: 7px;
  padding: 8px 9px;
  border-left: 4px solid var(--cal-accent, var(--blue));
  border-radius: 7px;
  background: color-mix(in srgb, var(--cal-accent, var(--blue)) 12%, var(--surface));
  font-size: 0.8rem;
  color: inherit;
  text-decoration: none;
}
.week-event time, .week-event strong { display: block; }
.week-event time { color: var(--muted); font-size: 0.72rem; margin-bottom: 2px; }
.day-view, .agenda-list { display: grid; gap: 10px; padding: 4px; }
.day-event, .agenda-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  border-left: 4px solid var(--cal-accent, var(--blue));
}
.day-event h3, .agenda-item h3 { margin: 0 0 4px; font-size: 1rem; }
.day-event p, .agenda-item p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.agenda-item > time span { display: block; margin-top: 3px; color: var(--muted); font-size: 0.85rem; }
.cal-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
}
.cal-empty h3 { margin: 0.6rem 0 0.35rem; color: var(--text); font-size: 1.05rem; }
.cal-empty p { margin: 0; }
.cal-upcoming-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.cal-upcoming-list a {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--cal-accent, var(--blue));
  text-decoration: none;
  color: inherit;
  background: var(--surface-2);
}
.cal-upcoming-list strong { font-size: 0.92rem; }
.cal-upcoming-list span { font-size: 0.8rem; color: var(--muted); }
body.cal-modal-open { overflow: hidden; }
.cal-modal__panel {
  width: min(820px, 100%);
  max-height: min(92vh, 920px);
  max-height: min(92dvh, 920px);
  overflow: auto;
}
.cal-modal__panel--narrow { width: min(480px, 100%); }
.cal-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1rem;
}
.cal-modal__grid .pe-field--full { grid-column: 1 / -1; }
.cal-modal__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.cal-modal__delete { margin-top: 0.75rem; }
.cal-attendees { min-height: 110px; }
.events-workspace {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 32px;
}
.events-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.events-hero h1 { margin: 0.35rem 0; font-size: clamp(1.7rem, 2.5vw, 2.2rem); }
.events-hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.events-empty {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
  display: grid;
  justify-items: center;
  gap: 0.65rem;
}
.events-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
  color: var(--blue);
}
.events-empty h2 { margin: 0.25rem 0 0; font-size: 1.25rem; }
.events-empty p { margin: 0 0 0.5rem; max-width: 36rem; color: var(--muted); }
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.events-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
}
.events-card__link {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.events-card__link time { font-size: 0.82rem; color: var(--blue); font-weight: 700; }
.events-card__link h2 { margin: 0; font-size: 1.05rem; }
.events-card__link p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.events-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.event-editor-form { padding: 1.25rem; }
.event-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}
.event-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.event-detail-card { padding: 1.35rem; }
.event-detail-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.85rem;
  margin: 0 0 1rem;
}
.event-detail-meta dt { font-size: 0.75rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.event-detail-meta dd { margin: 0.2rem 0 0; }
.event-detail-body { line-height: 1.55; }
.event-status-badge {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 0.8rem;
  margin: 0 0 0.85rem;
}
@media (max-width: 1200px) {
  .cal-pro__layout { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); }
}
@media (max-width: 960px) {
  .calendar-layout,
  .cal-pro__layout { grid-template-columns: 1fr; }
  .cal-pro__aside { width: 100%; }
  .calendar-toolbar { align-items: flex-start; flex-direction: column; }
  .view-switch { max-width: 100%; }
  .cal-week-grid,
  .week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .event-editor-grid,
  .cal-modal__grid { grid-template-columns: 1fr; }
  .event-editor-actions {
    flex-direction: column-reverse;
  }
  .event-editor-actions .btn {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .day-event, .agenda-item { grid-template-columns: 1fr; gap: 8px; }
  .cal-modal {
    padding: 0;
    align-items: stretch;
  }
  .cal-modal__panel {
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }
  .month-cell { min-height: 76px; }
  .cal-chip { font-size: 0.72rem; }
}

/* Company profile workspace — parity with Next company-profile-workspace */
.company-workspace {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}
.company-workspace .company-hero {
  overflow: hidden;
  margin-bottom: 18px;
  padding: 0;
}
.company-workspace .company-hero.card {
  padding: 0;
}
.company-workspace .cover-upload,
.company-workspace .cover-remove {
  position: absolute;
  right: 18px;
  top: 18px;
  display: flex;
  gap: 7px;
  align-items: center;
  background: rgba(5, 16, 35, 0.78);
  color: #fff;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.company-workspace .cover-remove {
  top: auto;
  bottom: 16px;
  right: 18px;
  font-weight: 650;
}
.company-workspace .cover-upload input,
.company-workspace .logo-upload input {
  display: none;
}
.company-workspace .cover-position {
  position: absolute;
  left: 18px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(5, 16, 35, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.company-workspace .cover-position input { width: 150px; accent-color: #27c7ec; }
.company-workspace .logo-upload {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  cursor: pointer;
}
.company-workspace .logo-remove {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.company-workspace .availability-badge { color: #087651; }
.company-workspace .business-signal { color: var(--blue); }
.company-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 14px 0 4px;
}
.company-editor {
  padding: 24px;
  margin-top: 18px;
}
.company-editor header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 8px;
}
.company-editor header p {
  font-size: 10px;
  color: var(--blue);
  font-weight: 800;
  letter-spacing: 1.4px;
  margin: 0;
}
.company-editor h2 { margin: 6px 0 20px; font-size: 1.35rem; }
.company-editor header .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
}
.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.company-editor .ce-field,
.company-editor label.ce-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
}
.company-editor .ce-field input,
.company-editor .ce-field textarea,
.company-editor .ce-field select,
.company-editor textarea,
.company-editor select {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
  border-radius: 9px;
  padding: 11px;
  color: inherit;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.company-editor .ce-field.has-error input,
.company-editor .ce-field.has-error textarea {
  border-color: #c0392b;
}
.company-editor .ce-error {
  color: #a92f39;
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}
.profile-signal-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin: 18px 0;
}
.profile-signal-editor small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
}
.business-status-picker {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 14px;
  margin: 0 0 18px;
}
.business-status-picker legend { font-weight: 800; padding: 0 6px; }
.business-status-picker label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 7px 14px 4px 0;
  font-size: 13px;
  font-weight: 650;
}
.business-status-picker input { width: auto; }
.legal-box {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 10px;
  background: color-mix(in srgb, var(--pale) 60%, var(--surface));
}
.legal-box > div:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--blue);
  margin-bottom: 14px;
}
@media (max-width: 650px) {
  .editor-grid,
  .profile-signal-editor { grid-template-columns: 1fr; }
}

/* ---------- Company create (professional onboarding form) ---------- */
.company-create-page {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 16px) 0 clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  box-sizing: border-box;
}
.company-create-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.company-create-hero__copy {
  flex: 1 1 min(100%, 36rem);
  min-width: 0;
}
.company-create-hero .directory-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--blue);
}
.company-create-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.15;
  color: var(--text);
}
.company-create-hero p {
  margin: 0;
  max-width: 40rem;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  line-height: 1.5;
  color: var(--muted);
}
.company-create-form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 18px);
}
.company-create-card {
  padding: clamp(18px, 2.5vw, 28px);
  border-radius: 18px;
}
.company-create-card__head {
  margin-bottom: clamp(14px, 2vw, 20px);
}
.company-create-card__head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.25;
}
.company-create-card__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.company-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.cc-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  min-width: 0;
}
.cc-field--full {
  grid-column: 1 / -1;
}
.cc-field > span {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.cc-field > span i {
  color: #c0392b;
  font-style: normal;
  font-weight: 800;
}
.cc-field input,
.cc-field textarea,
.cc-field select {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 45%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  line-height: 1.35;
}
.cc-field textarea {
  min-height: 120px;
  resize: vertical;
}
.cc-field input:focus,
.cc-field textarea:focus,
.cc-field select:focus,
.cc-tags:focus-within {
  outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent);
  outline-offset: 1px;
  border-color: var(--blue);
}
.cc-field.has-error input,
.cc-field.has-error textarea,
.cc-field.has-error select,
.cc-field.has-error .cc-tags,
.cc-dropzone.has-error,
.cc-check.has-error {
  border-color: #c0392b;
}
.cc-error {
  color: #a92f39;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 650;
}
.cc-hint {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 550;
  line-height: 1.4;
}
.cc-slug {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--pale) 45%, var(--surface));
}
.cc-slug__prefix {
  flex: 0 1 auto;
  max-width: 55%;
  padding: 12px 10px 12px 14px;
  font-size: 0.8rem;
  color: var(--muted);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}
.cc-slug input {
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
  background: transparent !important;
}
.cc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 45%, var(--surface));
}
.cc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 700;
}
.cc-tag button {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.cc-tags__input {
  flex: 1 1 140px;
  min-width: 120px;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px !important;
  outline: none !important;
}
.company-create-media {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
}
.cc-dropzone {
  display: grid;
  gap: 12px;
  justify-items: start;
  min-height: 200px;
  padding: 18px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
  box-sizing: border-box;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cc-dropzone--banner {
  min-height: 220px;
}
.cc-dropzone.is-dragover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.cc-dropzone__empty {
  display: grid;
  gap: 4px;
}
.cc-dropzone__empty strong {
  font-size: 1rem;
}
.cc-dropzone__empty span,
.cc-dropzone__empty small {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}
.cc-dropzone__preview {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--soft);
}
.cc-dropzone__preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  background: var(--soft);
}
.cc-dropzone--banner .cc-dropzone__preview img {
  max-height: 180px;
  object-fit: cover;
  width: 100%;
}
.cc-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--pale) 40%, var(--surface));
  font-size: 0.95rem;
  line-height: 1.45;
  margin-bottom: 16px;
}
.cc-check input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}
.company-create-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.company-create-actions .btn-primary {
  min-width: min(100%, 220px);
  min-height: 48px;
  font-size: 1rem;
  font-weight: 750;
}
.network-main:has(> .company-create-page),
.app-content:has(> .company-create-page) {
  width: min(100% - clamp(16px, 3vw, 40px), 1120px);
  max-width: 1120px;
}
.network-main:has(> .company-create-page) > .network-compliance-footer,
.app-content:has(> .company-create-page) > .network-compliance-footer {
  width: 100%;
  max-width: none;
  margin-top: auto;
  margin-bottom: clamp(16px, 2vw, 28px);
}

@media (max-width: 900px) {
  .company-create-grid,
  .company-create-media {
    grid-template-columns: 1fr;
  }
  .cc-slug__prefix {
    max-width: 42%;
    font-size: 0.72rem;
  }
  .company-create-actions {
    flex-direction: column-reverse;
  }
  .company-create-actions .btn,
  .company-create-actions .btn-primary {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .company-create-hero .btn {
    width: 100%;
    text-align: center;
  }
  .cc-slug {
    flex-direction: column;
  }
  .cc-slug__prefix {
    max-width: none;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.company-workspace .company-cover {
  height: 245px;
  border-radius: 0;
  background: linear-gradient(135deg, #081a3b, var(--blue));
  background-size: cover;
  background-position: center;
  position: relative;
}
.company-workspace .company-main {
  padding: 0 26px 24px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  margin-top: 0;
}
.company-workspace .company-logo {
  width: 145px;
  height: 145px;
  margin-top: -72px;
  border: 6px solid var(--surface);
  border-radius: 22px;
  background: #fff center / contain no-repeat;
  position: relative;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 800;
  overflow: hidden;
  box-shadow: 0 4px 16px color-mix(in srgb, #0b1b33 10%, transparent);
}
.company-workspace .company-logo--fallback {
  background: linear-gradient(145deg, #1770ef, #19c6df);
}
.company-workspace .company-logo--tone-0 { background: linear-gradient(145deg, #0d47a1, #1bb8d4); }
.company-workspace .company-logo--tone-1 { background: linear-gradient(145deg, #1565c0, #26c6da); }
.company-workspace .company-logo--tone-2 { background: linear-gradient(145deg, #1976d2, #00acc1); }
.company-workspace .company-logo--tone-3 { background: linear-gradient(145deg, #1e88e5, #26a69a); }
.company-workspace .company-logo--tone-4 { background: linear-gradient(145deg, #0288d1, #26c6da); }
.company-workspace .company-logo--tone-5 { background: linear-gradient(145deg, #0277bd, #4dd0e1); }
.company-workspace .company-logo--tone-6 { background: linear-gradient(145deg, #01579b, #00bcd4); }
.company-workspace .company-logo--tone-7 { background: linear-gradient(145deg, #0d47a1, #00838f); }
.company-workspace .company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
}
.company-workspace .company-intro {
  min-width: 0;
  padding-top: 18px;
}
.company-workspace .company-intro-title {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.company-workspace .company-intro h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.company-workspace .company-intro .company-claim {
  margin: 5px 0;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.45;
}
.company-workspace .company-intro .company-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.company-workspace .company-actions {
  display: flex;
  gap: 8px;
  grid-column: 2;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}
.company-workspace .company-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.company-workspace .signal-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 7px 0 0;
}
.company-workspace .signal-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1.15;
}
.company-workspace .verification-badge {
  color: #087a70;
  background: #eafbf8;
  border-color: #bce9e1;
}
.company-workspace .company-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 18px;
}
.company-workspace .company-grid > main,
.company-workspace .company-grid > aside {
  display: grid;
  gap: 18px;
  align-content: start;
}
.company-workspace .cp-section {
  padding: 22px;
}
.company-workspace .cp-section h2 {
  font-size: 20px;
  margin: 0 0 15px;
}
.company-workspace .cp-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.company-workspace .cp-fact {
  margin-bottom: 12px;
}
.company-workspace .cp-fact > small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
}
.company-workspace .cp-fact > strong,
.company-workspace .cp-fact > a {
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.company-workspace .cp-fact > a { color: var(--blue); }
.company-workspace .cp-tags {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.company-workspace .cp-tags .pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
  font-size: 12px;
  font-weight: 650;
}
.company-workspace .cp-team {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 10px;
}
.company-workspace .cp-team + .cp-team {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.company-workspace .cp-team small { display: block; color: var(--muted); }
.company-workspace .cp-team .cp-team-public-role {
  margin-top: 2px;
  font-size: 0.82rem;
}
.company-workspace .cp-team .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-weight: 800;
  background-color: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}

.cp-team-manage {
  margin-top: 18px;
}
.cp-team-manage__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem 1rem;
  margin-bottom: 1rem;
}
.cp-team-manage__head h2 {
  margin: 0;
}
.cp-team-manage__lead {
  margin: 0.35rem 0 0;
  max-width: 42rem;
}
.cp-team-empty {
  display: grid;
  gap: 0.85rem;
  justify-items: start;
  padding: 1.25rem;
  border: 1px dashed var(--border, #c9d7e6);
  border-radius: 1rem;
  background: var(--soft, #f5f8fc);
}
.cp-team-empty-inline {
  margin: 0 0 0.85rem;
}
.cp-team-list {
  display: grid;
  gap: 0.85rem;
}
.cp-team-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border, #d5e0ec);
  border-radius: 1rem;
  background: #fff;
}
.cp-team-card.is-owner {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border, #d5e0ec));
}
.cp-team-card.is-pending {
  background: var(--soft, #f7fafc);
}
.cp-team-card__main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-width: 0;
}
.cp-team-card .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  font-weight: 800;
  background-color: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}
.cp-team-card__meta {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}
.cp-team-card__meta strong {
  color: var(--text, #0f2744);
}
.cp-team-card__title {
  color: var(--muted, #5b6f86);
  font-size: 0.92rem;
}
.cp-team-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}
.cp-team-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 650;
  background: #eef3f8;
  color: #334155;
}
.cp-team-badge--role {
  background: color-mix(in srgb, var(--blue) 14%, #fff);
  color: var(--blue);
}
.cp-team-badge--active {
  background: #e7f7ee;
  color: #147a3f;
}
.cp-team-badge--invited {
  background: #fff4df;
  color: #9a6700;
}
.cp-team-badge--suspended {
  background: #fde8e8;
  color: #b42318;
}
.cp-team-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}
.cp-team-edit {
  position: relative;
}
.cp-team-edit > summary {
  list-style: none;
  cursor: pointer;
}
.cp-team-edit > summary::-webkit-details-marker {
  display: none;
}
.cp-team-edit__form {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  width: min(320px, 82vw);
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border: 1px solid var(--border, #d5e0ec);
  border-radius: 0.85rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 35, 60, 0.12);
}
.cp-team-edit__form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}
.cp-team-edit__form input,
.cp-team-edit__form select {
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border, #d5e0ec);
}
.cp-team-dialog {
  width: min(520px, calc(100vw - 1.5rem));
  border: 1px solid var(--border, #d5e0ec);
  border-radius: 1rem;
  padding: 0;
  background: #fff;
}
.cp-team-dialog::backdrop {
  background: rgba(8, 20, 40, 0.45);
}
.cp-team-dialog__form {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.15rem;
}
.cp-team-dialog__form header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.cp-team-dialog__form header h2 {
  margin: 0;
  font-size: 1.15rem;
}
.cp-team-dialog__form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
}
.cp-team-dialog__form input,
.cp-team-dialog__form select {
  min-height: 42px;
  padding: 0.4rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border, #d5e0ec);
}
.cp-team-search-results {
  display: grid;
  gap: 0.35rem;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--border, #d5e0ec);
  border-radius: 0.75rem;
  padding: 0.35rem;
  background: var(--soft, #f7fafc);
}
.cp-team-search-item {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.55rem 0.65rem;
  border: 0;
  border-radius: 0.55rem;
  background: #fff;
  cursor: pointer;
}
.cp-team-search-item span {
  color: var(--muted, #5b6f86);
  font-size: 0.85rem;
}
.cp-team-search-item:hover {
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}
@media (max-width: 720px) {
  .cp-team-card {
    grid-template-columns: 1fr;
  }
  .cp-team-card__actions {
    justify-content: stretch;
  }
  .cp-team-card__actions .btn,
  .cp-team-card__actions form {
    width: 100%;
  }
  .cp-team-card__actions .btn {
    justify-content: center;
  }
  .cp-team-edit__form {
    position: static;
    width: 100%;
    box-shadow: none;
  }
}
.company-workspace .company-newsletters { display: grid; gap: 10px; }
.company-workspace .company-newsletter {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--text);
}
.company-workspace .company-newsletter-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}
.company-workspace .company-newsletter-main > span {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff center / contain no-repeat;
  display: grid;
  place-items: center;
  color: var(--blue);
  font-weight: 800;
}
.company-workspace .company-newsletter-main > div { min-width: 0; display: grid; gap: 4px; }
.company-workspace .company-newsletter small { color: var(--muted); line-height: 1.4; display: block; }
.company-workspace .company-newsletter b { font-size: 11px; color: var(--blue); display: block; }
.company-workspace .company-newsletter-sub { display: flex; justify-content: flex-end; }
.company-workspace .company-newsletter-manage {
  display: inline-flex;
  margin-top: 12px;
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}
.company-workspace .company-marketplace-products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.company-workspace .company-marketplace-products article {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: grid;
}
.company-workspace .company-marketplace-products .mp-thumb {
  width: 100%;
  height: 120px;
  object-fit: cover;
  background: color-mix(in srgb, var(--pale) 70%, var(--surface));
}
.company-workspace .company-marketplace-products .mp-thumb--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.company-workspace .company-marketplace-products article > div {
  display: grid;
  gap: 4px;
  padding: 11px;
}
.company-workspace .company-marketplace-products article > div small {
  color: var(--blue);
  font-weight: 800;
}
.company-workspace .company-marketplace-products article > div span { color: var(--muted); }
.company-workspace .company-marketplace-products article > a.btn {
  margin: 0 11px 11px;
  justify-self: start;
}
.company-workspace .company-marketplace-all {
  display: inline-flex;
  margin-top: 13px;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}
.company-workspace .opportunity-board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.company-workspace .opportunity-board-head h2 { margin: 0 0 5px; font-size: 20px; }
.company-workspace .opportunity-board-head p { margin: 0; font-size: 12px; color: var(--muted); }
.company-workspace .opportunity-tabs {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
}
.company-workspace .opportunity-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}
.company-workspace .opportunity-tabs a.is-active {
  color: var(--blue);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, #0b1b33 8%, transparent);
}
.company-workspace .opportunity-list { display: grid; gap: 10px; margin-top: 4px; }
.company-workspace .opportunity-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.company-workspace .opportunity-list article:last-child { border-bottom: 0; }
.company-workspace .opportunity-list strong,
.company-workspace .opportunity-list small,
.company-workspace .opportunity-list p { display: block; }
.company-workspace .opportunity-list p { font-size: 12px; margin: 4px 0; color: var(--muted); }
.company-workspace .opportunity-list small { color: var(--muted); margin: 4px 0; }
.company-workspace .opportunity-list .pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}
.company-workspace .applicant-count {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
}
.company-workspace .applicant-count b { font-size: 16px; }
.company-workspace .applicant-count small { color: var(--muted); font-size: 10px; }
.company-workspace .empty-opportunities {
  padding: 18px;
  text-align: center;
  background: color-mix(in srgb, var(--pale) 65%, var(--surface));
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}
.company-workspace .reputation-card { padding: 18px; overflow: hidden; }
.company-workspace .reputation-company {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-weight: 800;
}
.company-workspace .rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 13px 0;
}
.company-workspace .rating-summary > b { font-size: 26px; }
.company-workspace .rating-stars {
  display: flex;
  gap: 1px;
  color: #d79d16;
}
.company-workspace .rating-summary small,
.company-workspace .rate-once small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}
.company-workspace .value-rank {
  padding: 10px;
  border-radius: 11px;
  background: color-mix(in srgb, #dba928 10%, var(--pale));
}
.company-workspace .value-rank > span {
  display: block;
  font-size: 11px;
  font-weight: 800;
}
.company-workspace .value-rank small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9.5px;
}
.company-workspace .rate-once {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.company-workspace .rate-once .star-row {
  display: flex;
  gap: 2px;
}
.company-workspace .rate-once button {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #d39b10;
  padding: 2px;
  cursor: pointer;
}
.company-workspace .official-company-contact { display: grid; gap: 3px; }
.company-workspace .official-company-contact .btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.company-workspace .private-notice {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue);
  font-size: 11px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.company-workspace .cp-actions-stack {
  display: grid;
  gap: 8px;
}
.company-workspace .cp-actions-stack .btn {
  width: 100%;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.company-workspace .cp-actions-stack .btn svg {
  flex: 0 0 auto;
}
.company-workspace .cp-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.company-page-head { margin-bottom: 12px; }
@media (max-width: 760px) {
  .company-workspace .company-main { grid-template-columns: 1fr; }
  .company-workspace .company-logo {
    width: 115px;
    height: 115px;
    margin-top: -58px;
  }
  .company-workspace .company-grid { grid-template-columns: 1fr; }
  .company-workspace .company-actions {
    grid-column: 1;
    justify-content: flex-start;
  }
  .company-workspace .cp-facts { grid-template-columns: 1fr; }
  .company-workspace .company-marketplace-products { grid-template-columns: 1fr; }
  .company-workspace .opportunity-list article { grid-template-columns: 1fr; }
  .company-workspace .applicant-count { justify-self: start; }
}

.people-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.person-directory-card { padding: 16px; display: grid; gap: 12px; }
.person-main {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
}
.person-avatar { width: 48px; height: 48px; }
.person-expertise { display: flex; flex-wrap: wrap; gap: 6px; }
.person-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.analytics-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.analytics-overview article {
  padding: 16px;
  display: grid;
  gap: 6px;
}
.analytics-overview strong { font-size: 1.6rem; color: var(--blue); }
.analytics-overview small { color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .analytics-overview { grid-template-columns: 1fr 1fr; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Conference providers + nav-count (Vater) ---------- */
.nav-count {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-style: normal;
}
.top-link { position: relative; }
.conference-provider-center { margin-top: 14px; }
.conference-providers {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.conference-providers button {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 6px;
  cursor: pointer;
  color: inherit;
  display: grid;
  gap: 4px;
  justify-items: center;
}
.conference-providers button span {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
}
.conference-providers button strong { font-size: 10px; text-align: center; }
.conference-providers button.active,
.conference-providers button:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.conference-link-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.selected-provider {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
}
.selected-provider > span {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 11px;
}
.selected-provider small { display: block; color: var(--muted); font-size: 10px; }
.conference-privacy { font-size: 11px; color: var(--muted); margin: 0; line-height: 1.45; }
.conference-feedback {
  padding: 8px 10px;
  border-radius: 8px;
  background: #fff4e5;
  color: #9a5b00;
  font-size: 12px;
}
.conference-feedback.success {
  background: #e7f8ef;
  color: #087a46;
}
.conference-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.conference-actions .btn { flex: 1; min-width: 120px; }
@media (max-width: 700px) {
  .conference-providers { grid-template-columns: 1fr 1fr; }
}

/* ---------- M10: Published network issues ---------- */
.published-network-issue {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.network-issue-cover {
  min-height: 190px;
  background: linear-gradient(135deg, #071a3e, #1765b1);
  background-position: center;
  background-size: cover;
}
.published-network-issue > :not(.network-issue-cover) { margin-left: 22px; margin-right: 22px; }
.network-newsletter-publisher {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 16px;
}
.network-issue-subscribe { margin: 0; }
.network-publisher-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  background-position: center;
  background-size: cover;
  color: #fff;
  font-weight: 900;
}
.network-newsletter-publisher small,
.network-newsletter-publisher strong { display: block; margin: 0; }
.network-newsletter-publisher small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 1px;
}
.network-newsletter-publisher strong { margin-top: 3px; font-size: 13px; }
.published-network-issue .news-topic { margin-bottom: 7px; }
.published-network-issue h2 { margin-top: 0; }
.network-issue-read {
  width: max-content;
  margin-top: auto;
  margin-bottom: 22px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}
.network-news-item { display: flex; flex-direction: column; min-height: 250px; }
.network-news-item > a { width: max-content; margin-top: auto; color: var(--blue); font-weight: 800; }

/* ---------- M11: Member billing and provider admin ---------- */
.member-current-plan,
.customer-checkout,
.own-invoices { padding: 22px; }
.member-current-plan p { margin: 0; }
.member-current-plan .muted { margin-top: 8px; }
.member-provider-status { margin-top: 12px !important; color: var(--muted); font-size: 12px; }
.customer-checkout-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
}
.customer-checkout-head h2,
.customer-checkout-head p { margin-top: 0; }
.customer-checkout-head p { margin-bottom: 0; color: var(--muted); }
.billing-term-toggle {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: var(--soft);
}
.billing-term-toggle button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.billing-term-toggle button.active { background: var(--blue); color: #fff; }
.account-type-switch {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: var(--soft);
}
.account-type-switch button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.account-type-switch button.active { background: var(--blue); color: #fff; }
.customer-provider-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.customer-provider-options button {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
}
.customer-provider-options button.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.customer-provider-options small { color: var(--muted); font-size: 11px; font-weight: 750; }
.customer-provider-options small.ready { color: #168447; }
.customer-provider-options small.pending { color: #a66d0b; }
.customer-plan-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.member-plan-card {
  display: flex;
  flex-direction: column;
  min-height: 210px;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.member-plan-card:hover { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.member-plan-card h3 { margin: 0; }
.member-plan-card > p:not(.member-plan-price) { color: var(--muted); line-height: 1.5; }
.member-plan-price { margin: 14px 0 4px; color: var(--blue); font-size: 24px; font-weight: 800; }
.billing-checkout-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.member-invoice-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid var(--border);
}
.pricing-admin-section { display: grid; gap: 16px; }
.pricing-admin-head {
  padding: 22px;
  border-radius: 16px;
  background: linear-gradient(120deg, #071a3e, #14569c);
  color: #fff;
}
.pricing-admin-head p { margin: 0; color: #69e7f7; font-size: 10px; font-weight: 900; letter-spacing: 1.4px; }
.pricing-admin-head h2 { margin: 6px 0; font-size: 24px; }
.pricing-admin-head span { color: #cedcf0; }
.admin-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-provider-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 11px;
  align-items: start;
  padding: 20px;
}
.admin-provider-card--paypal { grid-row: span 2; }
.admin-provider-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
}
.admin-provider-logo--stripe { background: #635bff; }
.admin-provider-logo--paypal { background: #0877d1; }
.admin-provider-logo--adyen { background: #0abf53; }
.admin-provider-logo--klarna { background: #e8799b; }
.admin-provider-card h3 { margin: 2px 0; }
.admin-provider-card p { margin: 4px 0; color: var(--muted); font-size: 11px; }
.admin-provider-card > small { grid-column: 2; font-weight: 800; color: var(--muted); }
.admin-provider-card > small.ready { color: #168447; }
.admin-provider-card > small.pending { color: #a66d0b; }
.admin-provider-form { grid-column: 1 / -1; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--border); }
.admin-provider-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- M12: Help and legal marketing pages ---------- */
.legal-document { width: min(100% - 32px, 940px); }
.legal-document .legal-updated { color: var(--muted); }
.legal-document > section {
  position: relative;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}
.legal-document > section h2 { margin: 0 0 10px; font-size: 19px; }
.legal-document > section p { margin: 7px 0 0; color: var(--muted); line-height: 1.7; }
.legal-document > section a { color: var(--blue); font-weight: 700; }
.legal-section-number {
  position: absolute;
  top: 20px;
  right: 20px;
  color: color-mix(in srgb, var(--blue) 20%, transparent);
  font-size: 28px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .customer-checkout-head,
  .help-contact { display: grid; }
  .billing-term-toggle,
  .account-type-switch { width: 100%; }
  .billing-term-toggle button,
  .account-type-switch button { flex: 1; padding-inline: 8px; }
  .customer-plan-options,
  .customer-provider-options,
  .admin-provider-grid,
  .help-center-grid { grid-template-columns: 1fr; }
  .member-invoice-row { grid-template-columns: 1fr auto; }
  .member-invoice-row > span { grid-column: 1 / -1; }
  .admin-provider-form-row { grid-template-columns: 1fr; }
}

/* Email Center */
.email-center {
  --email-danger: #c62828;
  --email-danger-soft: color-mix(in srgb, #c62828 10%, var(--surface));
  max-width: 1600px;
  margin: auto;
  padding: 28px;
  min-width: 0;
  position: relative;
}
.email-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
  min-width: 0;
}
.email-heading h1 {
  margin: 6px 0;
  font-size: clamp(1.75rem, 2.5vw, 2.15rem);
}
.email-heading p {
  margin: 0;
  color: var(--muted);
  max-width: 42rem;
  line-height: 1.5;
}
.eyebrow {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
}
.email-heading-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.email-heading-actions form { margin: 0; }
.email-heading-actions .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.email-sidebar-toggle { display: none; }
.email-center .btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.email-center .btn-secondary:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}
.email-center .btn-danger,
.email-center .btn.btn-danger {
  background: var(--email-danger);
  border-color: var(--email-danger);
  color: #fff;
}
.email-center .btn-danger:hover,
.email-center .btn.btn-danger:hover {
  filter: brightness(0.94);
}
.email-center .btn:focus-visible,
.email-center button:focus-visible,
.email-center a:focus-visible,
.email-center input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 70%, #fff);
  outline-offset: 2px;
}
.email-toast-host {
  position: fixed;
  z-index: 120;
  right: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  gap: 0.55rem;
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.email-toast {
  pointer-events: auto;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #0f2744;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 10px 28px rgba(7, 24, 48, 0.22);
  animation: email-toast-in 0.22s ease;
}
.email-toast--error {
  background: #8f1f1f;
}
.email-toast--ok {
  background: #0f6b45;
}
@keyframes email-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.email-empty-state {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.65rem;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  min-height: 420px;
  place-content: center;
}
.email-empty-state__icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface-2));
  color: var(--blue);
  margin-bottom: 0.25rem;
}
.email-empty-state h2 { margin: 0; font-size: 1.35rem; color: var(--text); }
.email-empty-state > p {
  margin: 0;
  max-width: 28rem;
  color: var(--muted);
  line-height: 1.5;
}
.email-empty-state__tips {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  max-width: 28rem;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: left;
}
.email-empty-state__tips li {
  padding-left: 1rem;
  position: relative;
}
.email-empty-state__tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  opacity: 0.55;
}
.email-layout {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 32%) minmax(0, 1fr);
  gap: 14px;
  min-height: min(760px, 80svh);
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
}
.email-layout.reader-expanded {
  grid-template-columns: minmax(0, 200px) minmax(0, 24%) minmax(0, 60%);
}
.email-layout.is-sidebar-collapsed {
  grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
}
.email-layout.is-sidebar-collapsed.reader-expanded {
  grid-template-columns: minmax(0, 28%) minmax(0, 1fr);
}
.email-layout.is-sidebar-collapsed .email-sidebar {
  display: none;
}
.email-layout.email-layout--focus {
  grid-template-columns: minmax(0, 1fr);
}
.email-layout.email-layout--focus .email-sidebar,
.email-layout.email-layout--focus .mailbox {
  display: none;
}
.email-layout.email-layout--focus .mail-reader {
  min-height: min(780px, 85svh);
}
.email-sidebar,
.mailbox,
.mail-reader {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.email-sidebar { padding: 16px; }
.compose-main {
  width: 100%;
  justify-content: center;
}
.email-folder-nav {
  display: grid;
  gap: 3px;
  margin: 16px 0 8px;
}
.email-folder-nav--secondary {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.email-folder-link,
.email-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  color: var(--text);
  font-size: 0.92rem;
  text-decoration: none;
  min-width: 0;
}
.email-folder-link span,
.email-sidebar nav a span { flex: 1; min-width: 0; }
.email-folder-link.active,
.email-sidebar nav a.active {
  background: var(--soft-blue);
  color: var(--blue);
  font-weight: 800;
}
.email-folder-link b,
.email-sidebar nav a b {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
}
.email-folder-link b[hidden] { display: none !important; }
.connected-accounts {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
  overflow: auto;
  min-height: 0;
}
.account-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.connected-account {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  min-width: 0;
}
.provider-dot {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--soft-blue);
  color: var(--blue);
  font-weight: 900;
  flex-shrink: 0;
}
.connected-account span:nth-child(2) { min-width: 0; flex: 1; }
.connected-account b,
.connected-account small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connected-account small {
  color: var(--muted);
  font-size: 0.75rem;
}
.connected-account .account-warn {
  color: #b45309;
  white-space: normal;
}
.connected-account__actions {
  display: grid;
  gap: 4px;
  justify-items: end;
}
.connected-account .btn-link {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.connected-account .btn-link:hover { color: #a32323; }
.mailbox-toolbar {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}
.mail-search {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}
.mail-search input {
  width: 100%;
  min-width: 0;
  border: 0 !important;
  outline: 0;
  background: transparent !important;
  font-size: 0.95rem;
}
.mail-search button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 750;
  cursor: pointer;
  flex-shrink: 0;
}
.mail-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-2);
}
.mail-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
}
.mail-filter-chip:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  color: var(--blue);
}
.mail-filter-chip.is-active {
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  color: var(--blue);
}
.mailbox-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}
.mailbox-title h2 { margin: 0; font-size: 1.15rem; }
.mailbox-title small {
  color: var(--muted);
  font-size: 0.85rem;
}
.email-mobile-nav { display: none; }
.mail-select-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.mail-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  margin: 0;
}
.mail-select-all input,
.mail-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--blue);
  cursor: pointer;
}
.mail-select-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}
.mail-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 28%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  flex-shrink: 0;
}
.mail-bulk-bar[hidden] { display: none !important; }
.mail-bulk-bar__label {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--blue);
  margin-right: auto;
}
.mail-bulk-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mail-bulk-bar .btn {
  cursor: pointer;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 8px;
  min-height: 36px;
}
.mail-bulk-bar .btn-ghost {
  border: 0;
  background: transparent;
  color: var(--text);
}
.mail-bulk-bar .btn-ghost:hover { background: var(--surface); }
.mail-list {
  flex: 1;
  overflow: auto;
  min-height: 280px;
  min-width: 0;
}
.mail-row {
  display: grid;
  grid-template-columns: 28px 10px minmax(0, 1fr);
  gap: 2px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  min-width: 0;
}
.mail-row.is-checked {
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
}
.mail-check {
  display: grid;
  place-items: center;
  padding: 14px 0 14px 10px;
  margin: 0;
  cursor: pointer;
}
.mail-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  align-self: center;
  background: transparent;
  justify-self: center;
}
.mail-unread-dot.is-on,
.mail-row.unread .mail-unread-dot {
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.mail-row__link {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 14px 14px 14px 4px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.mail-row:hover,
.mail-row.selected { background: var(--surface-2); }
.mail-row.unread { background: var(--soft-blue); }
.mail-row.unread.is-checked {
  background: color-mix(in srgb, var(--blue) 12%, var(--soft-blue));
}
.sender-avatar {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  font-weight: 850;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.mail-summary { min-width: 0; }
.mail-summary__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.mail-summary__top b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-flags {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--muted);
}
.mail-flag { display: inline-grid; place-items: center; }
.mail-flag--important { color: #c2410c; font-weight: 900; }
.mail-flag--star { color: #ca8a04; }
.mail-flag--attach { color: var(--muted); }
.mail-summary b,
.mail-summary strong,
.mail-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-summary b { font-size: 0.92rem; }
.mail-summary strong { margin-top: 4px; font-size: 0.88rem; }
.mail-row.unread .mail-summary strong { font-weight: 850; }
.mail-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}
.mail-meta {
  display: grid;
  align-content: start;
  justify-items: end;
  color: var(--muted);
  font-size: 0.75rem;
}
.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 58px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-width: 0;
}
.reader-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.reader-toolbar form { margin: 0; }
.reader-toolbar .btn-ghost {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-weight: 650;
  padding: 8px 10px;
  border-radius: 8px;
}
.reader-toolbar .btn-ghost:hover { background: var(--surface-2); }
.mail-reader .mail-article {
  max-width: min(1080px, 100%);
  width: 100%;
  margin: 0 auto;
  padding: clamp(18px, 3.2vw, 40px);
  overflow: auto;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
.mail-article__subject {
  margin: 0;
  font-size: clamp(1.4rem, 2.5vw, 2.05rem);
  line-height: 1.28;
  overflow-wrap: anywhere;
}
.mail-importance {
  margin: 0;
  color: #c2410c;
  font-size: 0.82rem;
  font-weight: 750;
}
.mail-header-grid {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.mail-header-from {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 280px;
}
.mail-header-line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: baseline;
  margin-top: 0.2rem;
  font-size: 0.95rem;
}
.mail-header-line:first-child { margin-top: 0; }
.mail-header-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mail-header-line span:last-child,
.mail-header-email {
  color: var(--muted);
  font-weight: 500;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.mail-header-date {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.email-image-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border));
  font-size: 0.85rem;
  color: #92400e;
}
.mail-security-note {
  font-size: 0.78rem;
  color: var(--muted);
}
.mail-body-frame {
  display: block;
  width: 100%;
  min-height: 280px;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.mail-body {
  min-height: 220px;
  font-size: 1.08rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.mail-body--plain {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  max-width: 48rem;
  font-size: 1.08rem;
  line-height: 1.8;
}
.mail-plain { white-space: normal; }
.mail-body img[data-xbn-blocked-src] {
  display: inline-block;
  min-width: 120px;
  min-height: 48px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.mail-attachments {
  margin-top: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.mail-attachments h3 {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
}
.mail-attachments ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.mail-attachment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.mail-attachment__meta { min-width: 0; }
.mail-attachment__meta strong {
  display: block;
  overflow-wrap: anywhere;
}
.mail-attachment__meta small { color: var(--muted); }
.mail-attachment__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}
.reader-empty,
.empty-mail {
  display: grid;
  flex: 1;
  place-content: center;
  justify-items: center;
  padding: 30px;
  color: var(--muted);
  text-align: center;
  gap: 0.45rem;
  min-width: 0;
}
.reader-empty h2,
.empty-mail b {
  color: var(--text);
  font-size: 1.1rem;
  margin: 0;
}
.reader-empty p,
.empty-mail p {
  margin: 0;
  max-width: 22rem;
  line-height: 1.45;
}
.email-feedback {
  margin-bottom: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #e7f8ef;
  color: #087a46;
  font-weight: 750;
}
.email-feedback--error {
  background: #fff0f0;
  color: #a32323;
}
.email-modal-backdrop {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 18, 38, .58);
}
.email-modal {
  position: relative;
  width: min(680px, 100%);
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  padding: 28px;
  box-sizing: border-box;
}
.email-modal .modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--text);
  font-size: 28px;
  text-decoration: none;
}
.email-modal label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-weight: 750;
}
.email-modal input,
.email-modal textarea,
.email-modal select {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
}
.email-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.email-modal-divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}
.email-oauth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}
.provider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.provider-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 650;
  background: var(--surface-2);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.compose-dialog { width: min(760px, 100%); }
.compose-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

@media (max-width: 1200px) {
  .email-layout,
  .email-layout.reader-expanded {
    grid-template-columns: minmax(0, 200px) minmax(0, 34%) minmax(0, 1fr);
  }
  .email-layout.reader-expanded {
    grid-template-columns: minmax(0, 180px) minmax(0, 26%) minmax(0, 1fr);
  }
  .email-layout.is-sidebar-collapsed,
  .email-layout.is-sidebar-collapsed.reader-expanded {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  }
}
@media (max-width: 1100px) {
  .email-sidebar-toggle { display: inline-flex; }
  .email-layout,
  .email-layout.reader-expanded {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  }
  .email-layout .mail-reader {
    grid-column: 1 / -1;
    min-height: min(480px, 55svh);
  }
  .email-layout.is-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .email-layout.is-sidebar-collapsed .mail-reader {
    grid-column: auto;
  }
  .email-layout.email-layout--focus {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 800px) {
  .email-center { padding: 14px; }
  .email-heading { display: block; }
  .email-heading-actions { margin-top: 14px; }
  .email-layout,
  .email-layout.reader-expanded,
  .email-layout.is-sidebar-collapsed,
  .email-layout.is-sidebar-collapsed.reader-expanded,
  .email-layout.email-layout--focus {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .email-layout .email-sidebar,
  .email-layout .mailbox,
  .email-layout .mail-reader {
    display: none;
    min-height: 70vh;
    min-height: 70svh;
  }
  .email-layout.is-view-folders .email-sidebar { display: flex; }
  .email-layout.is-view-list .mailbox { display: flex; }
  .email-layout.is-view-reader .mail-reader { display: flex; }
  .email-layout.email-layout--focus.is-view-reader .mail-reader { display: flex; }
  .email-layout.is-sidebar-collapsed .email-sidebar { display: none; }
  .email-layout.is-view-folders.is-sidebar-collapsed .email-sidebar { display: flex; }
  .email-mobile-nav { display: inline-flex; }
  .mail-bulk-bar__actions { width: 100%; }
  .mail-bulk-bar .btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
  .email-modal-grid,
  .provider-grid { grid-template-columns: 1fr; }
  .email-toast-host {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}

/* Newsletter Studio */
.nl-studio, .nl-reader { display: grid; max-width: 1180px; gap: 18px; margin: auto; padding: 28px; }
.nl-studio-head {
  display: flex; align-items: end; justify-content: space-between; gap: 20px;
  padding: 28px; border-radius: 20px;
  background: linear-gradient(125deg, #0a1f3f 0%, #14507a 55%, #1a7a8c 100%);
  color: #fff;
}
.nl-studio-head p { margin: 0; color: #8fd6e8; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; }
.nl-studio-head h1 { margin: 7px 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.nl-studio-head span { color: #d5e6f2; max-width: 52ch; display: block; }
.nl-studio-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nl-hub-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-hub-tab {
  display: inline-flex; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px;
}
.nl-hub-tab.is-active { background: #12365a; border-color: #12365a; color: #fff; }
.nl-hub-section { display: grid; gap: 12px; }
.nl-hub-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-hub-inline-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; border: 0; }
.nl-hub-inline-filters input, .nl-hub-inline-filters select {
  min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.nl-badge-new { background: #e8f1ff; color: #125799; }
.nl-empty-inline { padding: 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.newsletter-feed-label {
  margin: 10px 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.nl-studio-flash { padding: 11px 14px; border-radius: 10px; }
.nl-studio-flash.is-success { background: #e7f8ef; color: #087a46; }
.nl-studio-flash.is-error { background: #fdecec; color: #9b1c1c; }
.nl-filters { display: grid; gap: 14px; padding: 16px; }
.nl-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-chip {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px;
}
.nl-chip.is-active { background: #12365a; border-color: #12365a; color: #fff; }
.nl-filter-fields { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; align-items: end; }
.nl-filter-fields label { display: grid; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.nl-filter-fields input, .nl-filter-fields select {
  min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.nl-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nl-profile-card { overflow: hidden; display: grid; grid-template-rows: 140px 1fr; padding: 0; }
.nl-profile-card-media {
  background: linear-gradient(135deg, #0b4b87, #1a8fb0) center / cover no-repeat; position: relative;
}
.nl-profile-card-media img {
  position: absolute; left: 14px; bottom: -18px; width: 56px; height: 56px; border-radius: 12px;
  border: 2px solid #fff; object-fit: cover; background: #fff;
}
.nl-profile-card-body { display: grid; gap: 8px; padding: 28px 18px 18px; }
.nl-profile-card-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.nl-profile-card-top small { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.nl-profile-card h2 { margin: 0; font-size: 1.25rem; }
.nl-profile-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; min-height: 3em; }
.nl-profile-card-stats { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.nl-badge {
  display: inline-flex; padding: 3px 9px; border-radius: 999px; background: var(--surface-2);
  font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.nl-badge.status-published, .nl-badge.status-active { background: #e7f8ef; color: #087a46; }
.nl-badge.status-draft { background: #eef2f7; color: #3b4a5a; }
.nl-badge.status-paused { background: #fff4e5; color: #9a5b00; }
.nl-badge.status-archived { background: #f1f1f1; color: #666; }
.nl-empty { padding: 40px 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }
.nl-empty-studio ul { text-align: left; color: var(--muted); line-height: 1.7; margin: 0; padding-left: 1.2em; max-width: 42ch; }
.nl-back { width: fit-content; }
.nl-profile-hero {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 20px;
}
.nl-profile-hero-media {
  min-height: 140px; border-radius: 14px;
  background: linear-gradient(135deg, #0b4b87, #1a8fb0) center / cover no-repeat;
  display: grid; place-items: center; position: relative;
}
.nl-profile-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; border: 2px solid #fff; background: #fff; }
.nl-profile-logo.is-fallback { display: grid; place-items: center; color: #0b4b87; font-size: 28px; }
.nl-profile-hero-copy p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.nl-profile-hero-copy h1 { margin: 6px 0; }
.nl-profile-hero-copy > span { color: var(--muted); display: block; }
.nl-profile-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 12px; align-items: center; }
.nl-profile-hero-actions, .nl-profile-toolbar, .nl-issue-card-actions, .nl-issue-editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-profile-toolbar { padding: 12px 16px; }
.nl-inline-form { display: inline; margin: 0; }
.nl-section-head { display: flex; justify-content: space-between; align-items: center; }
.nl-issue-list { display: grid; gap: 12px; }
.nl-issue-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 14px; }
.nl-issue-card-media { min-height: 120px; border-radius: 12px; background: linear-gradient(135deg, #17324f, #2a6f8f) center / cover no-repeat; }
.nl-issue-card-top { display: flex; justify-content: space-between; gap: 8px; }
.nl-issue-card h3 { margin: 6px 0; }
.nl-issue-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.nl-subscribers { padding: 18px; display: grid; gap: 12px; }
.nl-subscribers header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nl-subscriber-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nl-subscriber-list li {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px;
}
.nl-issue-editor { padding: 0; overflow: hidden; }
.nl-issue-editor-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2, #f6f8fb);
}
.nl-issue-editor-bar strong { flex: 1; }
.nl-issue-paper { display: grid; gap: 14px; max-width: 920px; margin: 0 auto; padding: 28px 22px 40px; }
.nl-cover-upload {
  display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center;
  padding: 12px; border: 1px dashed var(--border); border-radius: 14px; cursor: pointer;
}
.nl-cover-preview {
  min-height: 120px; border-radius: 12px;
  background: linear-gradient(135deg, #17324f, #2a6f8f) center / cover no-repeat;
}
.nl-cover-meta { display: grid; gap: 4px; }
.nl-cover-meta small, .nl-editor-note, .nl-issue-status-note { color: var(--muted); font-size: 12px; }
.nl-cover-upload { position: relative; }
.nl-cover-upload input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.nl-issue-title {
  width: 100%; border: 0; outline: 0; background: transparent; color: var(--text);
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800;
}
.nl-issue-body, .nl-field textarea, .nl-field input, .nl-field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; line-height: 1.7;
}
.nl-issue-body { min-height: 360px; border: 0; padding: 0; }
.nl-field { display: grid; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.nl-modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: start center;
  padding: 80px 16px 24px; background: rgba(8, 18, 32, .45); overflow: auto;
}
.nl-modal-panel { width: min(820px, 100%); display: grid; gap: 16px; padding: 0; }
.nl-modal-panel > header, .nl-modal-panel > footer {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px;
}
.nl-modal-panel > header { border-bottom: 1px solid var(--border); }
.nl-modal-panel > footer { border-top: 1px solid var(--border); justify-content: flex-end; }
.nl-modal-panel > header h2 { margin: 0; }
.nl-modal-panel > header a { font-size: 28px; line-height: 1; text-decoration: none; color: var(--muted); }
.nl-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 20px 8px; }
.nl-field-span { grid-column: 1 / -1; }
.nl-media-field { display: grid; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.nl-media-preview {
  min-height: 90px; border-radius: 12px; border: 1px dashed var(--border);
  background: #eef3f8 center / cover no-repeat;
}
.nl-media-preview.is-logo { width: 90px; height: 90px; min-height: 0; background-size: contain; background-repeat: no-repeat; }
.btn-danger { background: #fdecec; color: #9b1c1c; border-color: #f0c2c2; }
.nl-reader-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-reader-article { display: grid; gap: 16px; padding: 0 0 28px; overflow: hidden; }
.nl-reader-cover { min-height: 280px; background: #17324f center / cover no-repeat; }
.nl-reader-meta { display: flex; align-items: center; gap: 12px; padding: 0 28px; }
.nl-reader-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.nl-reader-meta p { margin: 0; font-weight: 800; }
.nl-reader-meta small { color: var(--muted); }
.nl-subscribe-form { margin-left: auto; }
.nl-reader-article h1 { margin: 0; padding: 0 28px; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.nl-reader-excerpt { margin: 0; padding: 0 28px; color: var(--muted); font-size: 1.05rem; }
.nl-reader-body { padding: 0 28px; line-height: 1.8; font-size: 1.05rem; }
.nl-subscribed-btn { background: #e7f8ef; color: #087a46; border-color: #b7e4c7; font-weight: 800; }
.nl-public, .nl-discover { display: grid; max-width: 1180px; gap: 18px; margin: auto; padding: 28px; }
.nl-public-bar, .news-network-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-public-hero { overflow: hidden; padding: 0; display: grid; }
.nl-public-cover {
  min-height: 220px; background: linear-gradient(135deg, #0b4b87, #1a8fb0) center / cover no-repeat;
  position: relative;
}
.nl-public-logo {
  position: absolute; left: 24px; bottom: -28px; width: 72px; height: 72px; border-radius: 16px;
  object-fit: cover; border: 3px solid #fff; background: #fff;
}
.nl-public-logo.is-fallback { display: grid; place-items: center; color: #0b4b87; font-size: 28px; }
.nl-public-hero-body { display: grid; gap: 12px; padding: 40px 24px 24px; }
.nl-public-publisher { display: flex; align-items: center; gap: 10px; }
.nl-public-publisher img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.nl-public-publisher small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.nl-public-publisher a { color: inherit; text-decoration: none; }
.nl-public-hero-body h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.nl-public-lead { margin: 0; color: var(--muted); line-height: 1.55; max-width: 62ch; }
.nl-public-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; color: var(--muted); font-size: 12px; }
.nl-public-meta span { padding: 4px 9px; border-radius: 999px; background: var(--surface-2, #f3f6fa); }
.nl-public-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nl-public-about { padding: 20px 24px; display: grid; gap: 8px; }
.nl-public-about h2, .nl-public-archive h2 { margin: 0; }
.nl-public-about p { margin: 0; line-height: 1.7; color: var(--text); }
.nl-public-archive { display: grid; gap: 12px; }
.nl-public-issue-list { display: grid; gap: 12px; }
.nl-public-issue-card {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 12px;
  color: var(--text); text-decoration: none;
}
.nl-public-issue-media {
  min-height: 110px; border-radius: 12px;
  background: linear-gradient(135deg, #17324f, #2a6f8f) center / cover no-repeat;
}
.nl-public-issue-card h3 { margin: 4px 0; }
.nl-public-issue-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.nl-public-issue-card small, .nl-public-issue-card span { color: var(--blue); font-size: 12px; font-weight: 700; }
.nl-public-pager { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.nl-discover-filters {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 16px;
}
.nl-discover-filters label { display: grid; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.nl-discover-filters input, .nl-discover-filters select {
  min-height: 42px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text);
}
.nl-discover-count { margin: 0; color: var(--muted); font-size: 13px; }
.nl-discover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nl-discover-card { overflow: hidden; display: grid; grid-template-rows: 140px 1fr; padding: 0; }
.nl-discover-card-media {
  display: block; background: linear-gradient(135deg, #0b4b87, #1a8fb0) center / cover no-repeat;
  position: relative; text-decoration: none;
}
.nl-discover-card-media img {
  position: absolute; left: 14px; bottom: -18px; width: 52px; height: 52px; border-radius: 12px;
  border: 2px solid #fff; object-fit: cover; background: #fff;
}
.nl-discover-card-body { display: grid; gap: 8px; padding: 28px 16px 16px; }
.nl-discover-card-pub { display: flex; align-items: center; gap: 8px; }
.nl-discover-card-pub img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; }
.nl-discover-card-pub small { color: var(--muted); font-weight: 700; }
.nl-discover-card h2 { margin: 0; font-size: 1.15rem; }
.nl-discover-card h2 a { color: inherit; text-decoration: none; }
.nl-discover-card p { margin: 0; color: var(--muted); font-size: 13px; min-height: 2.8em; }
.nl-discover-card-meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.nl-discover-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nl-discover-card-actions form { margin: 0; }
.profile-newsletter-list { display: grid; gap: 10px; }
.profile-newsletter-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
}
.profile-newsletter-main {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center;
  color: var(--text); text-decoration: none;
}
.profile-newsletter-art {
  width: 72px; height: 72px; border-radius: 12px; border: 1px solid var(--border);
  background: linear-gradient(135deg, #0b4b87, #1a8fb0) center / cover no-repeat;
}
.profile-newsletter-main small, .profile-newsletter-main b {
  display: block; color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 600;
}
.profile-newsletter-main b { color: var(--blue); }
@media (max-width: 900px) {
  .nl-profile-grid, .nl-filter-fields, .nl-modal-grid, .nl-issue-card, .nl-profile-hero, .nl-cover-upload,
  .nl-discover-filters, .nl-discover-grid, .nl-public-issue-card, .profile-newsletter-card { grid-template-columns: 1fr; }
  .nl-profile-hero-actions { justify-content: stretch; }
  .nl-subscriber-list li { grid-template-columns: 1fr; }
  .nl-public, .nl-discover { padding: 14px; }
}

/* Product Marketplace */
.marketplace-workspace, .marketplace-product-detail { display: grid; max-width: 1240px; gap: 16px; margin: auto; padding: 28px; }
.marketplace-workspace > header { display: flex; justify-content: space-between; align-items: center; padding: 28px; border-radius: 20px; background: linear-gradient(120deg, #071a3e, #125799); color: #fff; }
.marketplace-workspace > header small { color: #67e8f9; font-weight: 900; letter-spacing: 1.3px; }
.marketplace-workspace > header h1 { margin: 6px 0; }
.marketplace-workspace > header p { margin: 0; color: #cedcf0; }
.marketplace-mark { font-size: 44px; }
.marketplace-filters { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto; gap: 9px; padding: 15px; }
.marketplace-filters label { display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.marketplace-filters input, .marketplace-filters select { min-width: 0; padding: 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.marketplace-filters label input { width: 100%; border: 0; outline: 0; }
.marketplace-result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.marketplace-result-head h2, .marketplace-result-head p { margin: 0; }
.marketplace-result-head p { color: var(--muted); font-size: 13px; }
.marketplace-empty { grid-column: 1 / -1; padding: 45px; text-align: center; }

/* Marketplace listing filters + cards */
.mp-filters {
  display: grid;
  grid-template-columns: 1.8fr repeat(5, minmax(0, 1fr)) auto;
  gap: 10px 12px;
  padding: 16px;
  align-items: end;
}
.mp-filters label {
  display: grid;
  gap: 6px;
  margin: 0;
  font-weight: 600;
  font-size: 12px;
}
.mp-filters-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.mp-filters input,
.mp-filters select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.mp-filters-search {
  grid-column: span 1;
}
.mp-filters-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.mp-filters-search-field input {
  border: 0;
  outline: 0;
  min-height: 42px;
  padding: 0;
  background: transparent;
}
.mp-filters-actions {
  display: flex;
  align-items: end;
}
.mp-filters-actions .btn {
  min-height: 44px;
  white-space: nowrap;
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.marketplace-grid:has(.mp-card:only-child) {
  grid-template-columns: minmax(280px, 480px);
  justify-content: start;
}

.mp-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card, var(--surface));
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mp-card:hover {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  box-shadow: 0 10px 28px rgba(7, 26, 62, 0.08);
}
.mp-card:hover .mp-card-cta {
  filter: brightness(1.04);
}

.mp-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #0b2859, #19c6df);
  overflow: hidden;
}
.mp-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mp-card-media-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 1.4rem;
}
.mp-card-media-badges {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}
.mp-card-save {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
  z-index: 2;
}
.mp-card-save-btn {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #0d1b35;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.mp-card-save-btn.is-saved {
  color: var(--blue);
}

.mp-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 12px;
  flex: 1 1 auto;
}
.mp-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--blue);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}
.mp-card-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-card-title a {
  color: inherit;
  text-decoration: none;
}
.mp-card-title a:hover {
  color: var(--blue);
}
.mp-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.9em;
}

.mp-card-price {
  display: grid;
  gap: 2px;
  margin-top: 2px;
}
.mp-card-price-prefix {
  font-size: 12px;
  color: var(--muted);
  font-weight: 650;
}
.mp-card-price-main {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.mp-card-price-currency {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
}
.mp-card-price-interval {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.mp-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pale, var(--surface));
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}
.mp-chip--avail {
  color: #168447;
  border-color: color-mix(in srgb, #168447 28%, var(--border));
  background: color-mix(in srgb, #168447 8%, transparent);
}
.mp-chip--new,
.mp-chip--request {
  background: rgba(255, 255, 255, 0.92);
  color: #0d1b35;
  border: 0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.mp-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.mp-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.mp-card-rating span {
  color: var(--muted);
  font-weight: 600;
}

.mp-card-provider {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.mp-card-provider-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mp-card-provider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mp-card-provider-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 9px;
  overflow: hidden;
}
.mp-card-provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-card-provider-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mp-card-provider-meta a,
.mp-card-provider-meta strong {
  font-size: 13px;
  font-weight: 750;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-card-provider-meta a:hover {
  color: var(--blue);
}
.mp-card-provider-meta .co-verified {
  font-size: 11px;
}

.mp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.mp-card-external {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.mp-card-external:hover {
  text-decoration: underline;
}
.mp-card-cta {
  margin-left: auto;
  min-height: 40px;
}
.marketplace-detail-hero { display: grid; grid-template-columns: minmax(300px, 1fr) 1fr; overflow: hidden; }
.marketplace-detail-image { display: grid; min-height: 420px; place-items: center; background: linear-gradient(135deg, #0b4b87, #19a9cf); background-position: center; background-size: cover; color: #fff; font-size: 44px; font-weight: 900; }
.marketplace-detail-hero > div:last-child { display: grid; align-content: center; justify-items: start; padding: 42px; }
.marketplace-detail-hero h1 { font-size: 36px; }
.marketplace-detail-hero p { color: var(--muted); line-height: 1.7; }
.marketplace-price { margin: 10px 0; font-size: 22px; }
.marketplace-detail-hero small { margin-bottom: 20px; color: #168447; }
.marketplace-detail-list { display: grid; gap: 10px; padding: 0; list-style: none; }

/* Marketplace product detail (B2B presentation) */
.mp-detail-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.mp-detail-nav--editor {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.mp-detail-nav--editor .mp-detail-nav-back {
  justify-self: start;
}
.mp-detail-nav--editor .mp-detail-inquiries {
  justify-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mp-detail-nav--editor .mp-detail-nav-edit {
  justify-self: end;
}
.mp-detail-inquiries.is-unread {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.mp-detail-inquiries-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
@media (max-width: 720px) {
  .mp-detail-nav--editor {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .mp-detail-nav--editor .mp-detail-nav-back,
  .mp-detail-nav--editor .mp-detail-inquiries,
  .mp-detail-nav--editor .mp-detail-nav-edit {
    justify-self: stretch;
    text-align: center;
  }
}
.mp-detail-hero {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, 1fr);
  gap: 0;
  overflow: hidden;
  padding: 0;
}
.mp-detail-media {
  display: grid;
  gap: 10px;
  padding: 14px;
  align-content: start;
  background: color-mix(in srgb, var(--pale) 70%, var(--surface));
}
.mp-detail-media-frame {
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0b1f3a;
}
.mp-detail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mp-detail-image--empty {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 220px;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  background: linear-gradient(135deg, #0b4b87, #19a9cf);
}
.mp-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}
.mp-detail-gallery img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.mp-detail-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
  padding: clamp(22px, 3vw, 40px);
}
.mp-detail-copy h1 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.35rem);
  line-height: 1.15;
}
.mp-detail-cats,
.mp-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-detail-short {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 48ch;
}
.mp-detail-lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
  max-width: 48ch;
}
.mp-detail-price-block {
  display: grid;
  gap: 2px;
}
.mp-detail-price-prefix {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
}
.mp-detail-price-main {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
}
.mp-detail-price-currency {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
}
.mp-detail-price-interval {
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.mp-detail-meta {
  display: grid;
  gap: 8px;
  margin: 0;
}
.mp-detail-meta > div {
  display: grid;
  gap: 4px;
}
.mp-detail-meta dt {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.mp-detail-meta dd {
  margin: 0;
}
.mp-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  width: 100%;
}
.mp-detail-actions .btn {
  min-height: 44px;
  flex: 1 1 160px;
  justify-content: center;
}
.mp-detail-external {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.mp-detail-section {
  padding: clamp(18px, 2.2vw, 24px);
}
.mp-detail-section h2 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}
.mp-detail-description {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
  max-width: 72ch;
}
.mp-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 14px;
  align-items: start;
}
.mp-detail-side-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}
.mp-detail-card {
  padding: clamp(18px, 2.2vw, 24px);
  height: auto;
  align-self: start;
}
.mp-detail-card h2 {
  margin: 0 0 14px;
  font-size: 1.1rem;
}
.mp-detail-features-card {
  min-height: 0;
}
.mp-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-feature {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale, var(--surface)) 72%, transparent);
  list-style: none;
}
.mp-feature::marker,
.mp-feature::before {
  content: none;
  display: none;
}
.mp-feature-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #168447;
  background: color-mix(in srgb, #168447 12%, transparent);
  flex: 0 0 28px;
}
.mp-feature-text {
  min-width: 0;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.mp-detail-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-detail-audience li {
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--pale, var(--surface));
  font-size: 13px;
  font-weight: 650;
  list-style: none;
}
.mp-detail-provider {
  display: grid;
  gap: 14px;
}
.mp-detail-provider h2 {
  margin-bottom: 0;
}
.mp-provider-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.mp-provider-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.mp-provider-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #fff;
}
.mp-provider-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.mp-provider-name {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.25;
  font-weight: 800;
}
.mp-provider-verified {
  justify-self: start;
}
.mp-provider-location {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.mp-provider-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-provider-tags .mp-badge {
  font-weight: 650;
}
.mp-badge--more {
  color: var(--muted);
  background: var(--pale, var(--surface));
}
.mp-provider-blurb {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.mp-provider-cta {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  margin-top: 2px;
}
.marketplace-product-edit {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin: auto;
  padding: 28px;
}
.marketplace-edit-form header h1 {
  margin: 0 0 6px;
}
.mp-edit-preview {
  margin: 8px 0 10px;
  width: min(100%, 360px);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--pale);
  display: grid;
  place-items: center;
}
.mp-edit-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mp-edit-preview.is-empty {
  display: none;
}
.mp-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* Marketplace product management console */
.mp-editor {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px 20px 48px;
  display: grid;
  gap: 16px;
}
.mp-editor-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.mp-editor-crumb a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.mp-editor-crumb a:hover {
  text-decoration: underline;
}
.mp-editor-crumb > span:last-child {
  color: var(--text);
  font-weight: 650;
}
.mp-editor-pagehead {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.mp-editor-pagehead h1 {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.mp-editor-pagehead-meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
.mp-editor-company {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card, var(--pale));
}
.mp-editor-company-avatar {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #123;
  color: #fff;
  font-weight: 700;
}
.mp-editor-company-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-editor-company small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.mp-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.85fr);
  gap: 18px;
  align-items: start;
}
.mp-editor-main,
.mp-editor-side {
  display: grid;
  gap: 14px;
}
.mp-editor-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--card, #fff);
  display: grid;
  gap: 12px;
}
.mp-editor-section h2 {
  margin: 0;
  font-size: 1.05rem;
}
.mp-editor-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.mp-editor-subhead {
  margin: 8px 0 0;
  font-size: 0.95rem;
}
.mp-editor-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mp-editor-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mp-editor-section label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.mp-editor-section input,
.mp-editor-section select,
.mp-editor-section textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  background: var(--input-bg, #fff);
  color: var(--text);
}
.mp-editor-section textarea {
  min-height: 96px;
  resize: vertical;
}
.mp-editor-hint {
  margin: 0;
  font-size: 12px;
}
.mp-editor-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mp-editor-feature {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  align-items: center;
}
.mp-editor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mp-editor-chip {
  border: 1px solid var(--border);
  background: var(--pale);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.mp-editor-chip-add {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mp-editor-chip-add input {
  flex: 1 1 160px;
}
.mp-editor-audience {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.mp-editor-check {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 500 !important;
}
.mp-editor-check input {
  width: auto !important;
  min-height: 0 !important;
}
.mp-editor-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mp-editor-gallery li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
}
.mp-editor-gallery img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
}
.mp-editor-gallery-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.mp-live-card {
  display: grid;
  gap: 8px;
}
.mp-live-media {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  background: var(--pale) center / cover no-repeat;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}
.mp-live-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mp-live-card h3 {
  margin: 0;
  font-size: 1.1rem;
}
.mp-live-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mp-live-price {
  display: grid;
  gap: 2px;
}
.mp-live-price strong {
  font-size: 1.2rem;
}
.mp-live-price-sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.mp-editor-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
}
.mp-editor-stats div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}
.mp-editor-stats dt {
  font-size: 11px;
  color: var(--muted);
}
.mp-editor-stats dd {
  margin: 4px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.mp-editor-actions {
  display: grid;
  gap: 8px;
}
.mp-editor-actions .btn,
.mp-editor-quick-actions .btn {
  width: 100%;
  justify-content: center;
}
.mp-editor-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.mp-editor-link-test {
  display: flex;
  align-items: end;
}
.mp-editor-link-test .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}
.mp-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.mp-detail-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.mp-detail-short {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 1.02rem;
}
.mp-inquiries {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px clamp(14px, 2vw, 24px) 56px;
  display: grid;
  gap: 16px;
}
.mp-inquiries-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.mp-inquiries-crumb a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.mp-inquiries-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.mp-inquiries-pagehead {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
}
.mp-inquiries-pagehead h1 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
  font-weight: 800;
}
.mp-inquiries-lead {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 52ch;
}
.mp-inquiries-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mp-inquiries-stat {
  min-width: 96px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, #fff);
  display: grid;
  gap: 2px;
}
.mp-inquiries-stat strong {
  font-size: 1.25rem;
  font-weight: 800;
}
.mp-inquiries-stat span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.mp-inquiries-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr);
  gap: 10px;
  align-items: end;
}
.mp-inquiries-toolbar input,
.mp-inquiries-toolbar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.mp-inquiries-product-ref {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 14px;
}
.mp-inquiries-product-thumb {
  width: 72px;
  height: 56px;
  border-radius: 10px;
  background: var(--pale) center / cover no-repeat;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--muted);
  font-size: 12px;
}
.mp-inquiries-product-ref small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mp-inquiries-product-ref strong {
  display: block;
  margin: 2px 0 4px;
}
.mp-inquiries-product-ref p {
  margin: 0;
  font-size: 13px;
}
.mp-inquiries-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.mp-inquiries-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
}
.mp-inquiries-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 18px 16px;
  background: var(--card, #fff);
  display: grid;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(7, 20, 36, 0.04);
}
.mp-inquiries-card.is-new {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}
.mp-inquiries-card.is-closed,
.mp-inquiries-card.is-rejected {
  opacity: 0.82;
  background: color-mix(in srgb, var(--muted) 6%, var(--surface));
  border-style: dashed;
}
.mp-inquiries-translated-from {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
}
.mp-inquiries-translate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.mp-inquiries-translate-actions .btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
}
.mp-inquiries-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
}
.mp-inquiries-person {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.mp-inquiries-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--soft-blue, var(--pale));
  color: var(--blue-dark, var(--blue));
  font-weight: 800;
  display: grid;
  place-items: center;
}
.mp-inquiries-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mp-inquiries-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.mp-inquiries-name-row strong {
  font-size: 1.05rem;
}
.mp-inquiries-person p {
  margin: 2px 0 0;
  font-size: 13px;
}
.mp-inquiries-verified {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.mp-inquiries-card-meta {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}
.mp-inquiries-card-meta time {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.mp-inquiries-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: var(--pale);
  color: var(--text);
  border: 1px solid var(--border);
}
.mp-inquiries-badge--new {
  background: color-mix(in srgb, var(--blue) 14%, #fff);
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  color: var(--blue-dark, var(--blue));
}
.mp-inquiries-badge--answered {
  background: color-mix(in srgb, #1f9d55 12%, #fff);
  border-color: color-mix(in srgb, #1f9d55 30%, var(--border));
}
.mp-inquiries-badge--rejected,
.mp-inquiries-badge--closed {
  opacity: 0.9;
}
.mp-inquiries-about {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--pale, var(--surface-2));
}
.mp-inquiries-about small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mp-inquiries-message {
  display: grid;
  gap: 6px;
}
.mp-inquiries-message small {
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
}
.mp-inquiries-message blockquote {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: var(--surface-2, var(--pale));
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.98rem;
  line-height: 1.5;
}
.mp-inquiries-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.mp-inquiries-status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.mp-inquiries-status-label select {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  padding: 6px 10px;
  font: inherit;
}
@media (max-width: 820px) {
  .mp-inquiries-toolbar {
    grid-template-columns: 1fr;
  }
  .mp-inquiries-pagehead {
    align-items: stretch;
  }
  .mp-inquiries-card-meta {
    justify-items: start;
    text-align: left;
    width: 100%;
  }
  .mp-inquiries-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mp-inquiries-status-label {
    margin-left: 0;
    justify-content: space-between;
  }
  .mp-inquiries-actions .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 960px) {
  .mp-editor-layout {
    grid-template-columns: 1fr;
  }
  .mp-editor-row,
  .mp-editor-row--3 {
    grid-template-columns: 1fr;
  }
  .mp-editor-stats {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  .mp-detail-hero,
  .mp-detail-grid {
    grid-template-columns: 1fr;
  }
  .mp-features {
    grid-template-columns: 1fr;
  }
  .mp-provider-head {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .mp-provider-logo {
    width: 64px;
    height: 64px;
  }
  .mp-detail-actions {
    flex-direction: column;
  }
  .mp-detail-actions .btn {
    width: 100%;
    flex: 1 1 auto;
  }
  .marketplace-product-edit,
  .mp-editor {
    padding: 14px;
  }
}
.company-hero { border-top: 3px solid var(--blue); }
.company-newsletter-teaser article { padding-block: 10px; border-bottom: 1px solid var(--border); }
.company-newsletter-teaser article p { margin: 4px 0; color: var(--muted); }
.company-product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.company-product-grid a { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.company-product-grid small { color: var(--blue); }
.company-product-grid span { color: var(--muted); font-size: 12px; }

@media (max-width: 1100px) {
  .marketplace-filters { grid-template-columns: 1fr 1fr; }
  .mp-filters { grid-template-columns: 1fr 1fr; }
  .mp-filters-search { grid-column: 1 / -1; }
  .mp-filters-actions { grid-column: 1 / -1; }
  .mp-filters-actions .btn { width: 100%; }
  .marketplace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .nl-studio, .nl-reader, .marketplace-workspace, .marketplace-product-detail { padding: 14px; }
  .nl-studio-head { display: block; }
  .newsletter-profile-grid, .marketplace-grid, .marketplace-detail-hero, .newsletter-profile-hero { grid-template-columns: 1fr; }
  .marketplace-filters { grid-template-columns: 1fr; }
  .mp-filters { grid-template-columns: 1fr; }
  .marketplace-grid:has(.mp-card:only-child) { grid-template-columns: 1fr; }
  .mp-card-footer { flex-wrap: wrap; }
  .mp-card-cta { width: 100%; justify-content: center; }
  .newsletter-profile-tile { grid-template-columns: 90px 1fr; }
  .newsletter-editor form > header { flex-wrap: wrap; }
}

/* Dashboard sidebar: Meine Newsletter */
.newsletter-manager-card.nl-side-card,
.nl-side-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--border, #d5e0ec);
  background: var(--surface, #fff);
  box-shadow: 0 8px 20px rgba(15, 35, 60, 0.06);
  min-width: 0;
  overflow: hidden;
}

.nl-side-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: flex-start;
}

.nl-side-head__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface, #fff));
  color: var(--blue);
}

.nl-side-head__text {
  min-width: 0;
}

.nl-side-head__text h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--text, #0f2744);
}

.nl-side-head__text p {
  margin: 0.25rem 0 0;
  color: var(--muted, #5b6f86);
  font-size: 0.8rem;
  line-height: 1.45;
}

.nl-side-empty {
  padding: 0.85rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px dashed var(--border, #c9d7e6);
  background: var(--soft, #f5f8fc);
}

.nl-side-empty p {
  margin: 0;
  color: var(--muted, #5b6f86);
  font-size: 0.85rem;
  line-height: 1.45;
}

.nl-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  min-width: 0;
}

.nl-side-list > li + li {
  border-top: 1px solid var(--border, #e4ecf4);
}

.nl-side-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0;
  color: var(--text, #0f2744);
  text-decoration: none;
  min-width: 0;
}

.nl-side-item:hover .nl-side-item__title {
  color: var(--blue);
}

.nl-side-item__logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  flex: 0 0 auto;
  border: 1px solid var(--border, #d5e0ec);
  background: #fff center / cover no-repeat;
}

.nl-side-item__logo--fallback {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 10%, #fff);
  color: var(--blue);
  font-size: 0.95rem;
  font-weight: 800;
}

.nl-side-item__body {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.nl-side-item__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.nl-side-item__meta {
  color: var(--muted, #5b6f86);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nl-side-item__count {
  flex: 0 0 auto;
  min-width: 1.75rem;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted, #5b6f86);
  font-variant-numeric: tabular-nums;
}

.nl-side-actions {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.nl-side-create {
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.55rem;
  border-radius: 0.7rem;
}

.nl-side-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

.nl-side-view-all:hover {
  text-decoration: underline;
}

.left-rail .newsletter-manager-card.nl-side-card,
.left-rail .nl-side-card {
  padding: 1.25rem 1.15rem;
  gap: 0.95rem;
}

.left-rail .nl-side-create {
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  border-radius: 0.7rem;
  justify-content: center;
  gap: 0.4rem;
  color: #fff;
}

@media (max-width: 760px) {
  .nl-side-card {
    padding: 1.15rem 1rem;
  }

  .nl-side-item__meta {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

.feed-column .marketplace-card { margin-top: 0; overflow: hidden; }
.feed-column .marketplace-card > header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--blue) 9%, var(--surface)), var(--surface));
}
.feed-column .marketplace-title { display: flex; gap: 12px; }
.feed-column .marketplace-title > span {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--blue); color: white; flex: 0 0 auto;
}
.feed-column .marketplace-title small { color: var(--blue); font-weight: 900; letter-spacing: 1px; }
.feed-column .marketplace-title h2 { margin: 3px 0; font-size: 20px; }
.feed-column .marketplace-title p { margin: 0; max-width: 510px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.feed-column .marketplace-products {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 20px;
}
.feed-column .marketplace-products article {
  display: grid; grid-template-columns: 42px 1fr; gap: 10px; padding: 14px;
  border: 1px solid var(--border); border-radius: 13px; background: var(--surface);
}
.feed-column .marketplace-product-image {
  grid-column: 1 / -1; width: 100%; height: 124px; object-fit: cover; border-radius: 10px;
}
.feed-column .product-icon {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); color: var(--blue);
}
.feed-column .product-copy { min-width: 0; }
.feed-column .product-copy small { color: var(--blue); font-weight: 800; }
.feed-column .product-copy h3 { margin: 4px 0; font-size: 14px; }
.feed-column .product-copy p { margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.feed-column .product-copy strong { font-size: 12px; }
.feed-column .marketplace-products footer {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px;
  padding-top: 10px; border-top: 1px solid var(--border); font-size: 10px;
}
.feed-column .marketplace-products footer a { display: flex; align-items: center; gap: 4px; color: var(--blue); font-weight: 800; }
.feed-column .marketplace-all {
  display: block; padding: 13px 20px; border-top: 1px solid var(--border);
  color: var(--blue); font-size: 12px; font-weight: 850; text-align: center;
}

/* Marketplace discover widget (right rail) — reference-matched */
.marketplace-rail-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem;
  display: grid;
  gap: 1.1rem;
  overflow: hidden;
  border-radius: 1.125rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d9e3f0);
  box-shadow: var(--shadow, 0 8px 28px rgba(27, 65, 120, 0.07));
}

.marketplace-rail-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1.25rem;
  display: grid;
  gap: 1.1rem;
  overflow: visible;
  border-radius: 1.125rem;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #d9e3f0);
  box-shadow: var(--shadow, 0 8px 28px rgba(27, 65, 120, 0.07));
}

.marketplace-rail-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  max-width: 100%;
}

.marketplace-rail-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-top: 0.05rem;
  background: var(--soft-blue, #e9f2ff);
  color: var(--blue, #1664ea);
}

.marketplace-rail-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.marketplace-rail-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
}

.marketplace-rail-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.55rem;
  min-width: 0;
}

.marketplace-rail-eyebrow {
  display: block;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--blue, #1664ea);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}

.marketplace-rail-heading {
  display: block;
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text, #0d1b35);
}

.marketplace-rail-all {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--blue, #1664ea);
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.3;
}

.marketplace-rail-all span {
  display: inline;
}

.marketplace-rail-all svg {
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
}

.marketplace-rail-all:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.marketplace-rail-list {
  display: grid;
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
}

.marketplace-rail-offer {
  display: grid;
  grid-template-rows: auto minmax(0, auto);
  gap: 0;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--border, #d9e3f0);
  border-radius: 0.95rem;
  overflow: hidden;
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.marketplace-rail-offer:hover {
  border-color: color-mix(in srgb, var(--blue, #1664ea) 35%, var(--border, #d9e3f0));
  box-shadow: 0 6px 18px rgba(22, 100, 234, 0.08);
}

.marketplace-rail-offer:focus-visible {
  outline: 2px solid var(--blue, #1664ea);
  outline-offset: 2px;
}

.marketplace-rail-offer__media {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background: linear-gradient(145deg, #0b1c33 0%, #163a66 55%, #1a4f8a 100%);
  overflow: hidden;
  color: inherit;
}

.marketplace-rail-offer__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
}

.marketplace-rail-offer__media--empty {
  display: grid;
  place-items: center;
}

.marketplace-rail-placeholder {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.marketplace-rail-offer__body {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem 1.05rem;
  min-width: 0;
  max-width: 100%;
  align-content: start;
  box-sizing: border-box;
}

.marketplace-rail-cat {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--blue, #1664ea);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  line-height: 1.3;
  word-break: break-word;
}

.marketplace-rail-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text, #0d1b35);
  text-decoration: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.marketplace-rail-offer:hover .marketplace-rail-title {
  color: var(--blue, #1664ea);
}

.marketplace-rail-company {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted, #66758f);
  word-break: break-word;
}

.marketplace-rail-price {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text, #0d1b35);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.marketplace-rail-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 2.75rem;
  margin-top: 0.55rem;
  padding: 0.7rem 2.4rem;
  box-sizing: border-box;
  border-radius: 0.7rem;
  background: var(--blue, #1664ea);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.marketplace-rail-cta__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-rail-cta__icon {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.marketplace-rail-offer:hover .marketplace-rail-cta {
  background: var(--blue-dark, #0b2b50);
}

.marketplace-rail-empty {
  margin: 0;
  padding: 1.1rem 1rem;
  border-radius: 0.85rem;
  border: 1px dashed color-mix(in srgb, var(--border, #c9d7e6) 80%, var(--blue, #1664ea));
  background: var(--surface-2, #f8faff);
  display: grid;
  gap: 0.75rem;
  justify-items: stretch;
  min-width: 0;
  box-sizing: border-box;
}

.marketplace-rail-empty p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted, #66758f);
}

.marketplace-rail-empty__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.65rem 1rem;
  box-sizing: border-box;
  border-radius: 0.7rem;
  background: var(--blue, #1664ea);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.marketplace-rail-empty__link:hover {
  background: var(--blue-dark, #0b2b50);
}

@media (max-width: 1100px) {
  .marketplace-rail-card {
    padding: 1.15rem;
  }

  .marketplace-rail-offer__body {
    padding: 0.9rem 0.95rem 1rem;
  }
}

@media (max-width: 900px) {
  .marketplace-rail-card {
    padding: 1.2rem;
    gap: 1rem;
  }

  .marketplace-rail-offer__media {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 420px) {
  .marketplace-rail-cta {
    padding-inline: 2.1rem 2.35rem;
    font-size: 0.85rem;
  }
}

.network-compliance-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
  margin-top: 8px;
  padding: clamp(18px, 2.5vw, 28px) clamp(16px, 2.5vw, 32px) clamp(16px, 2vw, 22px);
  border: 1px solid var(--border);
  border-radius: clamp(14px, 1.5vw, 18px);
  background: var(--surface);
  color: var(--muted);
  position: static;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px 48px;
}
.footer-brand {
  flex: 0 0 clamp(280px, 26vw, 340px);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  padding: 4px 14px 4px 28px;
  box-sizing: border-box;
}
.footer-official-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
  text-align: center;
  max-width: 100%;
  transform: translateX(6px);
}
.footer-official-logo img {
  display: block;
  width: auto;
  max-width: min(192px, 100%);
  height: auto;
  max-height: 134px;
  object-fit: contain;
  object-position: center;
  background: transparent;
}
.footer-columns {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  min-width: 0;
  max-width: 860px;
  margin-left: auto;
}
.footer-nav {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}
.footer-nav strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 3px;
}
.footer-nav a,
.footer-consent-button {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.footer-nav a:hover,
.footer-consent-button:hover {
  color: var(--blue);
  text-decoration: underline;
}
.footer-consent-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  width: max-content;
  max-width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
}
.footer-nav--lang .lang-menu {
  width: max-content;
  max-width: 100%;
}
.footer-nav--lang .lang-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  box-shadow: none;
}
.footer-nav--lang .lang-menu__trigger:hover {
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
}
.footer-nav--lang .lang-menu__trigger .desktop-only {
  display: inline !important;
}
.footer-nav--lang .lang-menu__panel {
  left: auto;
  right: 0;
}
.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.footer-meta p,
.footer-meta small {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}
.footer-meta small {
  margin-left: auto;
  text-align: right;
}

.service-rating { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 12px; }
.service-rating select { padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text); }
.service-rating button { border: 0; background: transparent; color: #e9a900; padding: 3px; cursor: pointer; }
.service-rating small, .service-rating > span { color: var(--muted); font-size: 11px; }

@media (max-width: 1100px) {
  .footer-main {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .footer-brand {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    padding: 8px 16px;
  }
  .footer-columns {
    width: 100%;
    max-width: none;
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .feed-column .marketplace-card > header { display: grid; }
  .feed-column .marketplace-products { grid-template-columns: 1fr; }
  .feed-column .marketplace-products footer { display: grid; }
  .network-compliance-footer {
    padding: 22px;
    gap: 18px;
  }
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .footer-brand {
    width: 100%;
    padding: 6px 12px;
  }
  .footer-official-logo img {
    max-width: min(172px, 72vw);
    max-height: 120px;
  }
  .footer-nav a,
  .footer-meta p,
  .footer-consent-button {
    overflow-wrap: anywhere;
  }
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-meta small {
    margin-left: 0;
    text-align: left;
  }
  .footer-nav--lang .lang-menu__panel {
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 48px));
  }
}

/* ---- Help center (1:1 Vater help-center.tsx) ---- */
.help-center {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  color: var(--text);
}
.help-hero {
  background: linear-gradient(120deg, #092c57, #0c5d9e);
  color: white;
  padding: 42px 24px;
}
.help-hero > div { max-width: 1400px; margin: auto; }
.help-hero p {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.7px;
  color: #69e7f7;
}
.help-hero h1 {
  font-size: clamp(30px, 4vw, 46px);
  margin: 12px 0 25px;
}
.help-search-form {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  max-width: 1050px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
}
.help-search-form select,
.help-search-form input,
.help-search-form button {
  border: 0;
  background: white;
  color: #14213a;
  font: inherit;
}
.help-search-form select {
  padding: 0 17px;
  border-right: 1px solid #dce5ef;
  font-weight: 750;
}
.help-search-form label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}
.help-search-form label > svg { display: none; }
.help-search-form input {
  width: 100%;
  padding: 17px 0;
  outline: none;
}
.help-search-form > button {
  border-left: 1px solid #dce5ef;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #14213a;
}
.help-main {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
}
.help-content { padding: 36px 42px 60px; }
.help-content section { margin-bottom: 52px; }
.help-content h2,
.help-aside h2 { font-size: 24px; }
.quick-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}
.quick-links a {
  color: var(--blue);
  font-weight: 800;
  padding: 5px 0;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-heading a,
.section-heading button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.topic-grid a {
  min-height: 142px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 15px;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
.topic-grid a:hover {
  border-color: var(--blue);
  background: var(--soft-blue);
  color: var(--blue);
  transform: translateY(-2px);
}
.topic-grid a svg { color: var(--primary); }
.topic-grid a small { color: var(--muted); }
.help-article-row {
  position: relative;
  display: block;
  padding: 21px 46px 21px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
}
.help-article-row > strong {
  display: block;
  color: var(--blue);
  font-size: 18px;
}
.help-article-row small {
  display: block;
  color: var(--muted);
  margin: 5px 0;
  font-size: inherit;
  font-weight: inherit;
}
.help-article-row p {
  line-height: 1.55;
  margin: 8px 0 0;
}
.help-article-row > svg {
  position: absolute;
  right: 5px;
  top: 38px;
  color: var(--blue);
}
.help-aside {
  border-left: 1px solid var(--border);
  padding: 36px 30px;
  background: var(--surface-2);
}
.help-aside > a {
  display: flex;
  gap: 13px;
  padding: 18px 0;
  color: var(--text);
  text-decoration: none;
}
.help-aside > a > svg {
  color: var(--primary);
  flex: 0 0 auto;
}
.help-aside strong,
.help-aside small { display: block; }
.help-aside small {
  color: var(--muted);
  line-height: 1.45;
  margin-top: 5px;
}
.no-results {
  text-align: center;
  padding: 50px;
  color: var(--muted);
}
.no-results svg {
  margin: 0 auto 12px;
  display: block;
}
.article-main {
  max-width: 1200px;
  margin: 42px auto 80px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 50px;
}
.article-main article { min-width: 0; }
.breadcrumbs {
  display: flex;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.breadcrumbs a { color: var(--blue); }
.article-main article > h1 {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.12;
  margin: 24px 0 12px;
}
.article-summary {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
}
.article-updated {
  padding-bottom: 25px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.article-main article > h2 { margin-top: 34px; }
.article-main ol { padding-left: 24px; }
.article-main li {
  padding: 10px 0 10px 8px;
  line-height: 1.65;
}
.article-note {
  display: flex;
  gap: 13px;
  background: var(--soft-blue);
  border-radius: 12px;
  padding: 18px;
  margin-top: 28px;
}
.article-note svg {
  color: var(--blue);
  flex: 0 0 auto;
}
.article-note p {
  margin: 6px 0 0;
  line-height: 1.5;
}
.article-helpful {
  display: flex;
  gap: 9px;
  align-items: center;
  border-top: 1px solid var(--border);
  margin-top: 34px;
  padding-top: 23px;
}
.article-helpful strong { margin-right: auto; }
.article-helpful button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 9px;
  padding: 9px 13px;
  cursor: pointer;
}
.article-main > aside {
  height: fit-content;
  border-left: 1px solid var(--border);
  padding-left: 28px;
}
.article-main > aside > a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--blue);
  font-weight: 750;
  text-decoration: none;
}
.article-main > aside > a svg {
  width: 16px;
  flex: 0 0 auto;
}
.article-main > aside .back-help {
  justify-content: flex-start;
  margin-top: 18px;
  border: 0;
  gap: 8px;
}
.help-footer {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding: 28px;
  color: var(--muted);
  font-size: 12px;
}
.help-footer a { color: var(--muted); text-decoration: none; }
@media (max-width: 900px) {
  .help-main { grid-template-columns: 1fr; }
  .help-aside { border-left: 0; border-top: 1px solid var(--border); }
  .article-main { grid-template-columns: 1fr; }
  .article-main > aside {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 22px 0;
  }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .policy-shell { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .help-hero { padding: 30px 14px; }
  .help-search-form { grid-template-columns: 1fr 52px; }
  .help-search-form select { display: none; }
  .help-content { padding: 28px 16px; }
  .quick-links,
  .topic-grid { grid-template-columns: 1fr; }
  .article-helpful {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .article-helpful strong { flex: 1 1 100%; }
}

/* ---- Policy pages ---- */
.policy-page { min-height: 60vh; background: var(--pale); }
.policy-hero { padding: 64px max(24px, calc((100vw - 1200px) / 2)); background: linear-gradient(135deg, #061326, #0a315b); color: #fff; }
.policy-hero span { color: #57e4f5; font-size: 12px; font-weight: 900; letter-spacing: 1.8px; }
.policy-hero h1 { font-size: clamp(36px, 5vw, 56px); margin: 18px 0; }
.policy-hero p { max-width: 760px; color: #c7d9e9; font-size: 17px; line-height: 1.65; }
.policy-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.policy-meta b { border: 1px solid rgba(105, 231, 247, .28); border-radius: 999px; padding: 8px 12px; font-size: 11px; }
.policy-shell { max-width: 1200px; margin: auto; padding: 42px 24px 80px; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 25px; }
.policy-shell > aside { align-self: start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 11px; }
.policy-shell > aside > div { padding: 13px 10px; font-weight: 850; border-bottom: 1px solid var(--border); }
.policy-shell > aside a { display: grid; grid-template-columns: 28px 1fr; gap: 5px; padding: 10px; color: var(--text); font-size: 12px; border-radius: 8px; text-decoration: none; }
.policy-shell > aside a span { color: var(--muted); }
.policy-shell article > section { display: grid; grid-template-columns: 48px 1fr; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 27px; margin-bottom: 13px; }
.policy-shell article > section > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); color: var(--blue); font-weight: 900; }
.policy-shell h2 { font-size: 22px; margin: 5px 0 14px; }
.policy-shell section p { color: var(--muted); line-height: 1.72; margin: 9px 0; }
.operator-note { padding: 18px; border-radius: 13px; margin-bottom: 14px; background: var(--soft); border: 1px solid var(--border); }
.access-gate { max-width: 640px; margin: 48px auto; padding: 36px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.access-gate-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: var(--blue); color: #fff; font-weight: 900; }
.access-gate-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ---- Network footer (Vater 5-column) ---- */
.marketing-footer-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

/* ---- About page (Vater about-us) ---- */
.about-page { background: var(--pale); overflow: hidden; }
.about-hero {
  min-height: 470px;
  padding: 78px max(24px, calc((100vw - 1200px) / 2));
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 70px;
  align-items: center;
  background: radial-gradient(circle at 80% 35%, rgba(0, 207, 239, .14), transparent 24%), linear-gradient(135deg, #061326, #0a315b);
  color: white;
}
.about-hero-copy > span,
.about-kicker {
  display: block;
  color: #50dff4;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
}
.about-hero h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -2.4px;
  margin: 20px 0;
}
.about-hero p { max-width: 720px; color: #c7d9e9; font-size: 19px; line-height: 1.65; }
.about-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.about-actions .btn:not(.btn-primary) { background: transparent; border-color: #65809a; color: white; }
.about-hero-mark {
  height: 270px;
  border: 1px solid rgba(105, 231, 247, .25);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 18px;
  background: radial-gradient(circle, rgba(0, 207, 239, .17), rgba(4, 20, 39, .1) 66%);
  box-shadow: 0 0 80px rgba(0, 207, 239, .12);
}
.about-hero-mark svg { color: #50dff4; }
.about-hero-mark strong { line-height: 1.5; letter-spacing: 1.6px; max-width: 200px; }
.about-image-shell { position: relative; max-width: 1380px; margin: -48px auto 0; padding: 0 24px; }
.about-image-shell > img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid rgba(105, 231, 247, .32);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(3, 18, 38, .28);
  background: #061326;
}
.about-image-caption {
  position: absolute;
  left: 48px; right: 48px; bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  padding: 13px;
  border-radius: 11px;
  background: rgba(3, 17, 34, .82);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.about-image-caption i { width: 5px; height: 5px; border-radius: 50%; background: #50dff4; display: inline-block; }
.about-intro, .about-global {
  max-width: 1200px;
  margin: auto;
  padding: 105px 24px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 80px;
}
.about-intro h2, .about-global h2, .about-section-heading h2, .about-focus h2 {
  font-size: clamp(34px, 4.5vw, 54px);
  line-height: 1.12;
  letter-spacing: -1.3px;
  margin: 17px 0;
}
.about-prose p, .about-global p, .about-section-heading > p, .about-focus-card > p {
  font-size: 17px; line-height: 1.78; color: var(--muted);
}
.about-prose p:first-child { font-size: 21px; color: var(--text); }
.about-audience { padding: 94px max(24px, calc((100vw - 1200px) / 2)); background: var(--surface); }
.about-section-heading { max-width: 780px; margin-bottom: 45px; }
.about-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-feature-grid article {
  padding: 27px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-2);
}
.about-feature-grid article > span {
  width: 48px; height: 48px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--soft-blue); color: var(--blue);
}
.about-feature-grid h3 { font-size: 19px; }
.about-feature-grid p { color: var(--muted); line-height: 1.6; }
.about-focus {
  max-width: 1200px; margin: auto; padding: 100px 24px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px;
}
.about-focus-card, .about-belief { border-radius: 22px; padding: 45px; }
.about-focus-card { background: var(--surface); border: 1px solid var(--border); }
.about-focus-card h2 { font-size: 40px; }
.about-focus-icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 15px; background: var(--soft-blue); color: var(--blue); margin-bottom: 25px;
}
.about-belief {
  background: linear-gradient(145deg, #092c57, #0c5d9e);
  color: white; display: grid; align-content: center;
}
.about-belief > svg { color: #50dff4; }
.about-belief blockquote {
  font-size: clamp(23px, 3vw, 33px); line-height: 1.42; margin: 25px 0 0; font-weight: 750;
}
.about-global { padding-top: 70px; }
.about-closing {
  padding: 100px 24px; text-align: center;
  background: linear-gradient(135deg, #061326, #0a315b); color: white;
}
.about-closing-logo {
  width: 72px; height: 72px; margin: 0 auto 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 207, 239, .12);
  border: 1px solid rgba(105, 231, 247, .35); color: #50dff4;
}
.about-closing > span { color: #50dff4; font-size: 11px; font-weight: 900; letter-spacing: 2px; }
.about-closing h2 { font-size: clamp(40px, 6vw, 66px); margin: 13px 0; }
.about-closing p { font-size: 22px; color: #c7d9e9; margin-bottom: 30px; }
@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; }
  .about-hero-mark { display: none; }
  .about-image-caption { font-size: 9px; gap: 8px; left: 35px; right: 35px; }
  .about-intro, .about-global, .about-focus { grid-template-columns: 1fr; gap: 30px; }
  .about-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .about-hero { padding: 55px 18px 85px; min-height: auto; }
  .about-hero h1 { font-size: 43px; }
  .about-image-shell { padding: 0 12px; margin-top: -35px; }
  .about-image-shell > img { border-radius: 14px; }
  .about-image-caption { display: none; }
  .about-intro, .about-global { padding: 72px 18px; }
  .about-audience { padding: 70px 18px; }
  .about-feature-grid { grid-template-columns: 1fr; }
  .about-focus { padding: 70px 18px; }
  .about-focus-card, .about-belief { padding: 27px; }
  .about-focus-card h2 { font-size: 33px; }
  .about-closing { padding: 78px 18px; }
}

/* ---- Contact page (Vater contact-page) ---- */
.contact-page { min-height: 100vh; min-height: 100dvh; background: var(--pale); padding-bottom: 42px; }
.contact-hero {
  padding: 70px max(24px, calc((100vw - 1180px) / 2));
  background: radial-gradient(circle at 85% 25%, rgba(0, 207, 239, .2), transparent 25%), linear-gradient(135deg, #061326, #0a315b);
  color: #fff;
}
.contact-hero span, .contact-form small, .contact-details small, .contact-map small {
  color: #2ccfe6; font-size: 11px; font-weight: 900; letter-spacing: 1.5px;
}
.contact-hero h1 { font-size: clamp(44px, 6vw, 68px); margin: 16px 0; }
.contact-hero p { max-width: 760px; color: #c7d9e9; font-size: 18px; line-height: 1.65; }
.contact-layout {
  max-width: 1180px; margin: 36px auto 22px; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .8fr); gap: 20px;
}
.contact-form, .contact-details, .contact-map { padding: 30px; }
.contact-form h2 { font-size: 28px; margin: 7px 0 24px; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.contact-fields label { display: grid; gap: 7px; color: var(--text); font-size: 13px; font-weight: 800; }
.contact-fields .wide { grid-column: 1 / -1; }
.contact-fields input, .contact-fields textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); padding: 12px 13px; font: inherit; resize: vertical;
}
.contact-fields input:focus, .contact-fields textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.contact-consent {
  display: flex; gap: 10px; align-items: flex-start; margin: 20px 0;
  color: var(--muted); font-size: 12px; line-height: 1.55;
}
.contact-consent input { margin-top: 3px; }
.contact-success { color: #087e42; font-weight: 800; }
.contact-details { display: grid; align-content: start; gap: 20px; }
.contact-details > div, .contact-map > div { display: flex; gap: 13px; align-items: flex-start; }
.contact-details svg, .contact-map svg { color: var(--blue); flex: 0 0 auto; }
.contact-details span { display: grid; gap: 7px; }
.contact-details strong { line-height: 1.5; }
.contact-details p { color: var(--muted); line-height: 1.6; margin: 0; }
.contact-details a { color: var(--blue); overflow-wrap: anywhere; }
.contact-details hr { width: 100%; border: 0; border-top: 1px solid var(--border); }
.contact-map { max-width: 1132px; margin: 0 auto; }
.contact-map h2 { margin: 3px 0; }
.contact-map p { color: var(--muted); margin: 0 0 20px; }
.contact-map iframe {
  width: 100%; height: 390px; border: 0; border-radius: 12px; margin-top: 20px; background: var(--soft-blue);
}
@media (max-width: 850px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-fields { grid-template-columns: 1fr; }
  .contact-fields .wide { grid-column: auto; }
  .contact-map { margin: 0 24px; }
}
@media (max-width: 520px) {
  .contact-layout { padding: 0 12px; }
  .contact-form, .contact-details, .contact-map { padding: 20px; }
  .contact-map { margin: 0 12px; }
  .contact-map iframe { height: 310px; }
}

/* ---- Legal document pages (Vater legal-document) ---- */
.legal-page { background: var(--pale); min-height: 100vh; min-height: 100dvh; }
.legal-hero {
  padding: 72px max(24px, calc((100vw - 1240px) / 2));
  display: grid; grid-template-columns: 1fr 210px; gap: 50px; align-items: center;
  background: radial-gradient(circle at 85% 30%, rgba(0, 207, 239, .18), transparent 25%), linear-gradient(135deg, #061326, #0a315b);
  color: #fff;
}
.legal-hero > div > span {
  display: flex; align-items: center; gap: 8px; color: #57e4f5;
  font-size: 12px; font-weight: 900; letter-spacing: 2px;
}
.legal-hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: -1.8px; margin: 18px 0; }
.legal-hero p { max-width: 760px; color: #c7d9e9; font-size: 18px; line-height: 1.65; }
.legal-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.legal-meta b {
  padding: 8px 12px; border: 1px solid rgba(105, 231, 247, .28);
  border-radius: 999px; font-size: 12px; color: #dce9f4; font-weight: 700;
}
.legal-seal {
  width: 185px; height: 185px; border-radius: 50%;
  display: grid; place-content: center; justify-items: center;
  border: 1px solid rgba(105, 231, 247, .35);
  box-shadow: 0 0 55px rgba(0, 207, 239, .14); color: #59e3f3;
}
.legal-seal strong { font-size: 36px; color: white; }
.legal-seal small { font-size: 9px; letter-spacing: 1.5px; }
.legal-layout {
  max-width: 1240px; margin: 0 auto; padding: 44px 24px 90px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px;
}
.legal-toc {
  position: sticky; top: 96px; align-self: start;
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 12px;
}
.legal-toc-head {
  display: flex; gap: 10px; align-items: center; padding: 14px 12px;
  font-weight: 850; border-bottom: 1px solid var(--border);
}
.legal-toc nav { display: grid; padding-top: 8px; }
.legal-toc a {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; color: var(--text);
  padding: 9px 10px; border-radius: 9px; font-size: 12px; line-height: 1.35; text-decoration: none;
}
.legal-toc a:hover { background: var(--soft-blue); color: var(--blue); }
.legal-toc a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-operator {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 30px; margin-bottom: 20px;
}
.legal-operator span {
  display: block; color: var(--blue); font-size: 11px; font-weight: 900;
  letter-spacing: 1.6px; margin-top: 12px;
}
.legal-operator h2 { font-size: 25px; margin: 8px 0; }
.legal-operator p { line-height: 1.65; color: var(--muted); }
.legal-contact { display: grid; align-content: center; gap: 10px; }
.legal-contact a { color: var(--blue); overflow-wrap: anywhere; }
.legal-intro-card {
  display: flex; gap: 15px; padding: 20px; border-radius: 15px; margin-bottom: 20px;
  background: var(--soft-blue); border: 1px solid var(--border);
}
.legal-intro-card p { margin: 0; line-height: 1.65; }
.legal-section {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 17px;
  padding: 28px; margin-bottom: 14px; scroll-margin-top: 100px;
}
.legal-section > span {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--soft-blue); color: var(--blue); font-weight: 900;
}
.legal-section h2 { font-size: 23px; margin: 4px 0 16px; }
.legal-section p { color: var(--muted); line-height: 1.72; margin: 9px 0; white-space: pre-line; }
.legal-signoff {
  display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 25px;
  border-radius: 17px; background: #071a31; color: white;
}
.legal-signoff p { margin: 5px 0 0; color: #bcd0e1; }
.policy-shell section nav {
  display: flex; gap: 10px 20px; flex-wrap: wrap; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border);
}
.policy-shell section nav a { color: var(--blue); font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
  .legal-hero { grid-template-columns: 1fr; }
  .legal-seal { display: none; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: relative; top: auto; max-height: 310px; }
  .legal-operator { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .legal-hero { padding: 54px 18px; }
  .legal-layout { padding: 25px 12px 70px; }
  .legal-section { grid-template-columns: 1fr; padding: 20px; }
  .legal-operator { padding: 22px; }
}

/* ---- PublicShell (Vater AppShell wrapper for public pages) ---- */
.public-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--user-workspace-background-color, var(--pale));
  background-image: var(--user-workspace-background-image, none);
  background-size: var(--user-workspace-background-size, auto);
}
.public-shell--auth {
  background: linear-gradient(180deg, #f3f7fd 0%, #e8eef8 55%, #f3f7fd 100%);
}
.auth-shell-top {
  width: min(100% - 32px, 1240px);
  margin: 12px auto 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 30;
}
.auth-shell-top .landing-header {
  width: 100%;
}
.public-shell-content--auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 12px;
}
@media (max-width: 700px) {
  .auth-shell-top {
    width: min(100% - 16px, 1240px);
    margin-top: 8px;
  }
  .public-shell--auth .mobile-bottom {
    display: none;
  }
}
.public-shell-content {
  width: 100%;
  max-width: none;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.public-network-footer {
  margin-top: auto;
  padding: 0 clamp(12px, 3vw, 24px) clamp(16px, 3vw, 24px);
  background: var(--pale);
  flex-shrink: 0;
}
.public-network-footer .network-compliance-footer {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin: 8px auto 0;
}
/* ---- Auth workspace (Next auth-workspace.tsx) ---- */
.auth-frame {
  width: min(100% - 32px, 980px);
  max-width: 980px;
  margin: 48px auto 32px;
  padding: 0 0 24px;
  box-sizing: border-box;
}
.auth-frame--form {
  width: min(100% - 32px, 760px);
  max-width: 760px;
}
.auth-frame > h1 {
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.08;
  margin: 0 0 12px;
  text-align: left;
  color: var(--navy, #0d1b35);
}
[data-theme="dark"] .auth-frame > h1 {
  color: var(--text);
}
.auth-brand {
  color: #087e8b;
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  text-align: left;
}
.auth-subtitle {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 4px;
  text-align: left;
  max-width: 42rem;
}
.auth-frame .auth-card {
  width: 100%;
  max-width: none;
  margin: 22px 0 0;
  padding: clamp(24px, 4vw, 32px);
  overflow: visible;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(27, 65, 120, 0.08);
  background: var(--surface);
}
.auth-back-btn {
  margin-bottom: 18px;
  width: max-content;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
}
.auth-back-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 45%, transparent);
  outline-offset: 2px;
}
.auth-stack {
  display: grid;
  gap: 20px;
}
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.auth-section {
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 20px;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}
.auth-section h3 {
  margin: 0 0 14px;
  font-size: 1.05rem;
}
.auth-field {
  display: grid;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  min-width: 0;
}
.auth-field input,
.auth-field select,
.auth-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 13px;
  border: 1px solid var(--border, #dbe4ef);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: var(--text, #0b1933);
  font: inherit;
  font-weight: 500;
  box-sizing: border-box;
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}
.auth-field.has-error input,
.auth-field.has-error select {
  border-color: #c43b45;
}
.field-error {
  color: #c43b45;
  font-size: 12px;
  font-weight: 650;
}
.auth-submit {
  width: 100%;
  justify-content: center;
  min-height: 48px;
  font-size: 15px;
  font-weight: 800;
}
.auth-legal {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.auth-legal a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.account-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  align-items: stretch;
}
.account-types a,
.account-types button,
.account-type-card {
  min-width: 0;
  min-height: 290px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--border));
  background: var(--surface);
  border-radius: 16px;
  padding: 24px;
  text-align: left;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
  align-content: start;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.account-types a:hover,
.account-types button:hover,
.account-type-card:hover,
.account-types a:focus-visible,
.account-types button:focus-visible,
.account-type-card:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(20, 70, 150, 0.1);
  outline: 2px solid color-mix(in srgb, var(--blue) 40%, transparent);
  outline-offset: 2px;
  transform: translateY(-1px);
}
.account-types svg {
  color: var(--blue);
  flex-shrink: 0;
}
.account-types strong {
  font-size: 1.05rem;
  line-height: 1.3;
}
.account-types span {
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}
.account-types small {
  color: #087e5b;
  font-weight: 700;
  margin-top: auto;
}
.auth-link {
  color: var(--primary);
  text-align: center;
  font-weight: 700;
}
.auth-login-links {
  display: flex;
  justify-content: center;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.auth-centered {
  display: block;
  margin-top: 22px;
}
.auth-check {
  display: flex;
  gap: 9px;
  align-items: center;
  font-weight: 700;
  margin-top: 14px;
}
.auth-alert {
  background: #fff0f0;
  border: 1px solid #f1b6b6;
  color: #b42318;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 650;
}
.auth-success {
  background: #e7f8ef;
  border: 1px solid #a7e3c0;
  color: #087a46;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 650;
}
.auth-page {
  max-width: 980px;
  margin: 60px auto;
  padding: 0 24px 48px;
}
.auth-chooser-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 30px;
}
.auth-chooser-card--business {
  border-color: var(--cyan, #00cfef);
}
.auth-chooser-card .btn {
  margin-top: 12px;
}
@media (max-width: 900px) {
  .account-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-types > :last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .account-types,
  .auth-grid {
    grid-template-columns: 1fr;
  }
  .account-types > :last-child {
    grid-column: auto;
  }
  .account-types a,
  .account-types button,
  .account-type-card {
    min-height: 0;
  }
  .auth-frame {
    width: min(100% - 24px, 980px);
    margin-top: 28px;
    margin-bottom: 16px;
  }
  .auth-frame--form {
    width: min(100% - 24px, 760px);
  }
  .auth-frame .auth-card {
    padding: 20px;
  }
  .auth-check {
    margin-top: 12px;
  }
}
@media (max-width: 720px) {
  .auth-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .public-network-footer {
    padding: 0 12px 80px;
  }
  .auth-page {
    margin: 40px auto;
    padding: 0 16px 80px;
  }
}

/* ---- Directory workspace (Vater directory chrome) ---- */
.directory-workspace {
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px 0 40px;
}
.directory-hero {
  margin-bottom: 18px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}
.directory-eyebrow {
  display: block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.directory-tabs {
  border-radius: 14px;
}

/* ---------- Merge workspaces: map / saved / CRM ---------- */
.workspace-page {
  width: min(100%, 1180px);
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  background: var(--user-workspace-background-color);
  background-image: var(--user-workspace-background-image);
  background-size: var(--user-workspace-background-size);
}
.workspace-page.business-map-workspace {
  width: min(100%, 100%);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.workspace-page.business-map-workspace .co-hero {
  margin-bottom: 16px;
  min-width: 0;
}
.workspace-page.business-map-workspace .co-hero-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
}
.workspace-page.business-map-workspace .co-hero-updated {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: right;
}
.workspace-page.business-map-workspace .map-location-pending span {
  color: var(--muted, #6b7280);
  font-size: 0.88rem;
}
.workspace-page.business-map-workspace .co-card--map-pending {
  opacity: 0.96;
}
.workspace-page.business-map-workspace .map-detail-pending {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
}
.company-map-location {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e5e7eb);
}
.company-map-location h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.company-map-location-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0.85rem 0;
}
.company-map-location-meta dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #6b7280);
  margin: 0 0 0.2rem;
}
.company-map-location-meta dd {
  margin: 0;
  font-size: 0.95rem;
  word-break: break-word;
}
.company-map-location-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.company-map-manual {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}
.company-map-manual label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
}
.company-map-manual input {
  min-width: 7rem;
  padding: 0.4rem 0.55rem;
}
.workspace-page.business-map-workspace .co-search-panel {
  margin-bottom: 16px;
  min-width: 0;
}
.workspace-page.business-map-workspace .co-filters-grid input[type="text"],
.workspace-page.business-map-workspace .co-filters-grid input[type="search"] {
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font-size: 0.95rem;
  font: inherit;
}
.workspace-page.business-map-workspace .co-reset-link {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.35rem 0;
  min-height: 44px;
  font: inherit;
  color: var(--blue);
}
.workspace-page.business-map-workspace .co-reset-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.workspace-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}
.workspace-head h1 { margin: 0.15rem 0; font-size: 1.75rem; }
.workspace-head .eyebrow,
.workspace-head .muted { margin: 0; }
.workspace-head-actions { display: flex; gap: 0.5rem; }

.business-map-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, min(22rem, 36%));
  gap: clamp(0.75rem, 1.5vw, 1.15rem);
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  --business-map-h: clamp(420px, 62vh, 760px);
  --business-map-h: clamp(420px, 62dvh, 760px);
}
.business-map-canvas-wrap {
  position: relative;
  z-index: 1;
  isolation: isolate;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: var(--business-map-h);
  height: var(--business-map-h);
  max-height: var(--business-map-h);
}
.business-map-canvas-wrap:has(.business-map-detail:not([hidden])),
.business-map-stage:has(.business-map-detail:not([hidden])) .business-map-canvas-wrap {
  overflow: visible;
}
.business-map-results-wrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  height: var(--business-map-h);
  max-height: var(--business-map-h);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 2;
}
.business-map-canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}
.business-map-detail {
  position: absolute;
  right: 12px;
  top: 12px;
  width: min(360px, calc(100% - 24px));
  max-width: min(360px, calc(100% - 24px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 0;
  z-index: 700;
  max-height: calc(100% - 24px);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.business-map-detail.is-open {
  pointer-events: auto;
  visibility: visible;
}
.business-map-detail[hidden] {
  display: none !important;
  pointer-events: none;
  visibility: hidden;
}
.business-map-detail .map-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  height: 100%;
}
.business-map-detail .map-detail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.business-map-detail .map-detail-actions {
  flex: 0 0 auto;
  padding: 0 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.business-map-detail .map-detail-actions .map-detail-cta {
  width: 100%;
  margin: 12px 0 0;
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.business-map-results-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  min-width: 0;
}
.business-map-results-head strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.business-map-results-head .muted {
  font-size: 0.82rem;
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;
}
.business-map-results-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  padding: 10px 12px 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.business-map-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.business-map-results .co-card--map {
  height: auto;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.business-map-results .co-card--map:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.business-map-results .co-card--map.is-active {
  border-color: color-mix(in srgb, var(--blue, #2563eb) 70%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue, #2563eb) 18%, transparent);
  background: color-mix(in srgb, var(--blue, #2563eb) 7%, var(--surface, #fff));
}
.business-map-notice {
  margin: 0 12px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #334155;
  background: color-mix(in srgb, #f59e0b 12%, var(--surface, #fff));
  border: 1px solid color-mix(in srgb, #f59e0b 28%, var(--border, #e5e7eb));
}
.business-map-notice[hidden] {
  display: none !important;
}
.business-map-results .co-card--map .co-card-body {
  padding: 10px 12px;
  gap: 8px;
  display: grid;
  min-width: 0;
}
.business-map-results .co-card--map .co-card-head {
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.business-map-results .co-card--map .co-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.business-map-results .co-card--map .co-card-title-block {
  min-width: 0;
}
.business-map-results .co-card--map .co-card-name {
  font-size: 0.92rem;
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.business-map-results .co-card--map .co-card-content {
  gap: 4px;
  padding: 0;
  min-width: 0;
}
.business-map-results .co-card--map .co-meta-item {
  font-size: 0.78rem;
  gap: 4px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.business-map-results .co-card--map .co-card-foot {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
  gap: 8px;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
}
.business-map-results .map-result-item {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.business-map-results .map-result-cta {
  min-width: 0;
  position: relative;
  z-index: 2;
}
.business-map-results .co-card--map .co-verified {
  font-size: 0.7rem;
  padding: 2px 7px;
}
.business-map-results .co-card--map .map-card-rating {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.business-map-results .map-card-focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border));
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 3;
}
.business-map-results .map-card-focus:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  border-color: var(--blue);
}
.business-map-results .map-card-focus:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.business-map-results .map-card-unavailable {
  display: block;
  font-size: 0.78rem;
  text-align: center;
  padding: 0.5rem;
}
.business-map-results-scroll .co-state {
  padding: 1.25rem 0.5rem;
  text-align: center;
}
.business-map-results-scroll .co-state h2 {
  font-size: 1.05rem;
}
.business-map-results-scroll .co-state .btn {
  min-height: 44px;
}

@media (max-width: 1200px) {
  .business-map-stage {
    grid-template-columns: minmax(0, 1fr);
    --business-map-h: clamp(380px, 52vh, 560px);
    --business-map-h: clamp(380px, 52dvh, 560px);
  }
  .business-map-canvas-wrap,
  .business-map-results-wrap {
    height: auto;
    max-height: none;
  }
  .business-map-canvas-wrap {
    min-height: var(--business-map-h);
    height: var(--business-map-h);
    max-height: var(--business-map-h);
  }
  .business-map-results-wrap {
    min-height: 0;
    max-height: none;
  }
  .business-map-results-scroll {
    max-height: min(48vh, 420px);
  }
}

@media (max-width: 960px) {
  .business-map-stage {
    grid-template-columns: minmax(0, 1fr);
    --business-map-h: clamp(320px, 48vh, 460px);
    --business-map-h: clamp(320px, 48svh, 460px);
  }
  .crm-grid { grid-template-columns: 1fr; }
  .crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-map-results-scroll {
    max-height: min(50vh, 420px);
  }
  .business-map-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Bottom sheet on small Apple/mobile screens — one panel only */
  .business-map-detail.is-open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(72vh, 560px);
    max-height: min(72dvh, 560px);
    border-radius: 18px 18px 0 0;
    z-index: 1200;
  }
  .business-map-detail-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1150;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(15, 39, 68, 0.38);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  html.xbn-map-detail-open {
    overflow: hidden;
  }
}

.business-map-detail-backdrop {
  display: none;
}

.saved-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.saved-filters a {
  padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); display: inline-flex; gap: 0.35rem; align-items: center;
}
.saved-filters a.active { background: var(--soft-blue); border-color: var(--blue); color: var(--blue); }
.saved-filters a span { font-size: 0.8rem; opacity: 0.8; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.saved-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1rem; }
.empty-state { padding: 2rem; text-align: center; }

.crm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.crm-stats .card { padding: 1rem; display: grid; gap: 0.25rem; }
.crm-stats strong { font-size: 1.5rem; }
.crm-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1rem; }
.crm-lead-list, .crm-activity-list { list-style: none; margin: 0; padding: 0; }
.crm-lead-list li, .crm-activity-list li {
  padding: 0.75rem 0; border-bottom: 1px solid var(--border); display: grid; gap: 0.2rem;
}
.form-stack label { display: grid; gap: 0.35rem; margin-bottom: 0.75rem; }
.form-stack input, .form-stack select, .form-stack textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem;
  background: var(--surface); color: var(--text);
}
.form-actions { display: flex; gap: 0.5rem; }

.account-menu nav button.account-menu-action {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  font: inherit;
}
.account-menu nav button.account-menu-action:hover {
  background: var(--soft-blue);
}


/* ---- XBN Admin chrome (replaces Adminator) ---- */
.btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); }
.xbn-admin-body { margin: 0; background: var(--pale); color: var(--text); }
.xbn-admin-shell { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.xbn-admin-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: auto;
}
.xbn-admin-brand { margin-bottom: 18px; padding: 0 6px; }
.xbn-admin-nav__section { margin-bottom: 16px; }
.xbn-admin-nav__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 8px 6px;
}
.xbn-admin-nav__link {
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 2px;
}
.xbn-admin-nav__link:hover,
.xbn-admin-nav__link.is-active {
  background: var(--soft-blue);
  color: var(--primary);
}
.xbn-admin-sidebar__foot {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.xbn-admin-main { min-width: 0; display: flex; flex-direction: column; }
.xbn-admin-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 5;
}
.xbn-admin-crumbs { flex: 1; font-weight: 650; }
.xbn-admin-topbar__actions { display: flex; align-items: center; gap: 10px; }
.xbn-admin-content { padding: 22px; max-width: 1200px; }
.xbn-admin-content .hero { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.xbn-admin-content .hero-title { margin: 0; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; }
.xbn-admin-content .eyebrow { color: #087e8b; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; }
.xbn-admin-content .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.xbn-admin-content .kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.xbn-admin-content .kpi-value { font-size: 28px; font-weight: 850; margin-top: 8px; }
.xbn-admin-content .table { width: 100%; border-collapse: collapse; }
.xbn-admin-content .table th,
.xbn-admin-content .table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.xbn-admin-content .auth-form .field { display: grid; gap: 6px; margin-bottom: 12px; }
.xbn-admin-content .auth-form .input,
.xbn-admin-content .input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
}
.xbn-admin-backdrop {
  position: fixed; inset: 0; background: rgba(3,12,27,.45); z-index: 40;
}
@media (max-width: 900px) {
  .xbn-admin-shell { grid-template-columns: 1fr; }
  .xbn-admin-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 50;
    transform: translateX(-105%);
    transition: transform .2s ease;
    width: min(280px, 88vw);
  }
  body.xbn-admin-drawer-open .xbn-admin-sidebar { transform: translateX(0); }
}

/* App workspace page rhythm (Next parity) */
.network-main > .workspace-head,
.network-main > .settings-hub > .settings-head,
.network-main > .member-billing > .member-billing-hero {
  margin-bottom: 18px;
}
.settings-head p,
.member-billing-hero p,
.workspace-head .eyebrow {
  color: #087e8b;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.4px;
  margin: 0;
}
.settings-head h1,
.member-billing-hero h1 {
  margin: 8px 0 6px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
}
.flash-error, .flash.flash-error { background: #fff0f0; border: 1px solid #f1b6b6; color: #b42318; border-radius: 10px; padding: 12px 14px; }
.flash-success, .flash.flash-success { background: #e7f8ef; border: 1px solid #a7e3c0; color: #087a46; border-radius: 10px; padding: 12px 14px; }

.app-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 1.2px;
  flex-shrink: 0;
}
.app-nav__brand img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 3px 12px rgba(0, 174, 239, 0.2);
}
.directory-eyebrow,
.settings-head > div > p,
.member-billing-hero > div > p,
.page-header .eyebrow {
  color: #087e8b;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.directory-workspace .directory-hero,
.messages-workspace > header,
.calendar-workspace > header,
.marketplace-workspace > header {
  margin-bottom: 18px;
}
.profile-workspace .profile-hero,
.company-workspace .company-hero {
  border-radius: 18px;
}

/* ---- Parity wave polish (auth/profile/comms/market/settings/admin) ---- */
.btn.requested,
button.requested {
  opacity: 0.85;
  cursor: default;
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.company-page-head {
  max-width: 1120px;
  margin: 0 auto 12px;
  align-items: flex-end;
}
.company-page-head h1 { margin: 6px 0 0; }
.messages-workspace,
.calendar-workspace {
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 36px;
  box-sizing: border-box;
}
.messages-workspace .messenger {
  min-height: 640px;
}
.calendar-workspace .week-grid {
  box-shadow: inset 0 1px 0 rgba(8, 126, 139, 0.08);
}
.calendar-workspace .view-switch a.active {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-color: var(--blue);
  color: var(--blue);
}
.directory-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.directory-card-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #1770ef, #19c6df);
  background-size: cover;
  background-position: center;
}
.directory-card .listing-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.people-directory-grid {
  gap: 14px;
}
.person-directory-card {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.business-map-detail {
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
}
.business-map-detail .map-detail-head {
  padding: clamp(12px, 2vw, 14px) clamp(14px, 2vw, 16px) 10px;
  background: linear-gradient(120deg, #071a3e, #125799);
  color: #fff;
  position: relative;
  flex: 0 0 auto;
}
.business-map-detail .map-detail-logo-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: grid;
  place-items: center;
}
.business-map-detail .map-detail-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  box-sizing: border-box;
}
.business-map-detail .map-detail-logo.is-broken {
  display: none;
}
.business-map-detail .map-detail-logo-wrap .co-logo-fallback {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  margin: 0;
}
.business-map-detail .map-detail-verify {
  margin: 10px 16px 0;
  font-size: clamp(0.72rem, 1.6vw, 0.78rem);
}
.business-map-detail .map-detail-eyebrow {
  display: block;
  font-size: clamp(0.62rem, 1.4vw, 0.68rem);
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #67e8f9;
  text-transform: uppercase;
}
.business-map-detail .map-detail-head h2 {
  margin: 4px 0 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  padding-right: 36px;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.business-map-detail .map-detail-meta {
  color: #c9d9ef !important;
  margin: 6px 0 0;
  font-size: clamp(0.72rem, 1.6vw, 0.78rem);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.business-map-detail .map-detail-body,
.business-map-detail .map-detail-rating {
  margin: 12px 16px;
  font-size: clamp(0.82rem, 1.8vw, 0.92rem);
  overflow-wrap: anywhere;
}
.business-map-detail .map-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  width: 100%;
  box-sizing: border-box;
}
.business-map-detail .map-detail-cta:focus-visible {
  outline: 2px solid #67e8f9;
  outline-offset: 2px;
}
.business-map-detail .map-detail-close {
  position: absolute;
  right: 10px;
  top: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  z-index: 2;
}
.business-map-detail .map-verified { color: #67e8f9; }

/* Custom map pins + popups (list ↔ marker sync) */
.business-map-canvas-wrap .xbn-map-pin-wrap {
  background: transparent !important;
  border: none !important;
}
.business-map-canvas-wrap .xbn-map-pin {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #2563eb;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}
.business-map-canvas-wrap .xbn-map-pin--active {
  width: 26px;
  height: 26px;
  background: #1d4ed8;
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55);
  animation: xbn-map-pin-pulse 1.4s ease-out infinite;
}
@keyframes xbn-map-pin-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.business-map-canvas-wrap .leaflet-popup.xbn-map-popup-wrap,
.business-map-canvas-wrap .xbn-map-popup-wrap .leaflet-popup {
  display: block !important;
}
.business-map-canvas-wrap .leaflet-popup {
  display: block;
}
.business-map-canvas-wrap .xbn-map-popup-wrap .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  padding: 0;
  overflow: hidden;
}
.business-map-canvas-wrap .xbn-map-popup-wrap .leaflet-popup-content {
  margin: 10px 12px;
  min-width: 0;
  max-width: min(280px, 72vw);
}
.business-map-canvas-wrap .xbn-map-popup {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.business-map-canvas-wrap .xbn-map-popup-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.business-map-canvas-wrap .xbn-map-popup-name {
  font-size: 0.92rem;
  line-height: 1.25;
  color: #0f172a;
}
.business-map-canvas-wrap .xbn-map-popup-loc {
  font-size: 0.78rem;
  line-height: 1.3;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.business-map-canvas-wrap .map-leaflet-popup-logo,
.business-map-canvas-wrap .map-leaflet-popup-fallback {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  flex: 0 0 auto;
  background: #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #334155;
}
@media (max-width: 640px) {
  .business-map-canvas-wrap .xbn-map-popup-wrap .leaflet-popup-content {
    max-width: min(240px, 78vw);
  }
}

.email-oauth-note { margin-top: 8px; max-width: 52ch; font-size: 12px; }
.billing-provider-empty {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}
.billing-provider-empty p { margin: 4px 0 0; font-size: 12px; }
.settings-hub .settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.settings-hub .setting-card {
  padding: 21px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.settings-hub .setting-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}
@media (max-width: 700px) {
  .settings-hub .settings-grid { grid-template-columns: 1fr; }
}
.news-workspace .news-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}
.news-workspace .news-page-tabs a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 13px;
}
.news-workspace .news-page-tabs a.active {
  border-color: var(--blue);
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, transparent);
}
.marketplace-workspace .marketplace-grid {
  gap: 18px;
}
.xbn-admin-main .card table,
.xbn-admin-main table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.xbn-admin-main .card table th,
.xbn-admin-main .card table td,
.xbn-admin-main table.data th,
.xbn-admin-main table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.xbn-admin-main .card table th,
.xbn-admin-main table.data th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: color-mix(in srgb, var(--pale) 70%, var(--surface));
}
.xbn-admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

/* ---- Companies directory (professional B2B search) ---- */
.companies-directory {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 4px 0 48px;
  container-type: inline-size;
  container-name: companies-dir;
  overflow-x: clip;
  max-width: 100%;
}
.directory-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.directory-category-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.directory-category-link:hover {
  color: var(--text);
  border-color: var(--border);
  background: color-mix(in srgb, var(--pale) 65%, var(--surface));
}
.directory-category-link.is-active {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 45%, var(--border));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}
.directory-category-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.directory-category-icon { font-size: 1.05rem; line-height: 1; }

.jt-switch {
  width: 100%;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, #0b1b33 5%, transparent);
  box-sizing: border-box;
}
.jt-switch-inner {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.jt-switch-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 46px;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.jt-switch-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--pale) 70%, var(--surface));
  border-color: var(--border);
}
.jt-switch-tab.is-active {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--blue) 35%, var(--border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 12%, transparent);
}
.jt-switch-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.jt-switch-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.9;
}
.jt-switch-tab.is-active .jt-switch-icon { opacity: 1; }
.jt-switch-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  min-width: 0;
  white-space: nowrap;
}
.jt-switch-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.jt-switch-sep {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-weight: 600;
}
.jt-switch-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  opacity: 0.92;
}
@media (max-width: 720px) {
  .jt-switch { padding: 12px; }
  .jt-switch-inner { gap: 6px; }
  .jt-switch-tab {
    flex: 1 1 0;
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

.co-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--blue) 7%, var(--surface)) 0%, var(--surface) 55%),
    var(--surface);
}
.co-hero-copy h1 {
  margin: 6px 0 0;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.co-hero-copy p {
  margin: 8px 0 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.45;
}
.co-hero-aside {
  display: grid;
  gap: 8px;
  justify-items: end;
  text-align: right;
}
.co-hero-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}
.co-hero-cta { flex-shrink: 0; }

.co-search-panel { margin-bottom: 18px; }
.co-search-form { position: relative; }
.co-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, #0b1b33 5%, transparent);
}
.co-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
}
.co-search-field:focus-within {
  border-color: color-mix(in srgb, var(--blue) 50%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}
.co-search-icon { display: grid; color: var(--muted); }
.co-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-size: 1.02rem;
}
.co-search-submit {
  min-height: 52px;
  padding-inline: 22px;
  font-size: 0.98rem;
}
.co-filters-toggle {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.co-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}

.co-filters-panel {
  margin-top: 10px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.co-filters-panel[hidden] { display: none !important; }
.co-filters-panel-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.co-filters-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.co-filters-grid label,
.co-offer-set {
  display: grid;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.co-filters-grid select {
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  font-size: 0.95rem;
}
.co-check {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pale) 40%, var(--surface));
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 650;
}
.co-offer-set {
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
.co-offer-set legend { padding: 0; margin-bottom: 8px; }
.co-offer-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.co-filters-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.co-reset-link {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}
.co-reset-link:hover { color: var(--text); text-decoration: underline; }
.co-filters-apply { display: none; }
.co-filters-backdrop { display: none; }

.co-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.co-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 650;
}
.co-chip:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--border)); color: var(--blue); }

.co-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}
.co-results-count {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: var(--text);
}
.co-sort {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
}
.co-sort select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
}

.co-grid {
  display: grid;
  gap: 22px;
  align-items: stretch;
  justify-items: stretch;
  /* auto-fill keeps incomplete last rows left-aligned (empty tracks remain) */
  grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 66px) / 4)), 1fr));
}
/* Explicit caps by available directory width (not viewport — avoids sidebar squeeze) */
@container companies-dir (max-width: 1439px) {
  .co-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 44px) / 3)), 1fr));
  }
}
@container companies-dir (max-width: 1023px) {
  .co-grid {
    grid-template-columns: repeat(auto-fill, minmax(max(280px, calc((100% - 22px) / 2)), 1fr));
  }
}
@container companies-dir (max-width: 639px) {
  .co-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
/* Viewport fallback when container queries are unavailable */
@supports not (container-type: inline-size) {
  .co-grid {
    grid-template-columns: repeat(4, minmax(280px, 1fr));
  }
  @media (max-width: 1439px) {
    .co-grid { grid-template-columns: repeat(3, minmax(280px, 1fr)); }
  }
  @media (max-width: 1023px) {
    .co-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
  }
  @media (max-width: 639px) {
    .co-grid { grid-template-columns: 1fr; }
  }
}
@media (max-width: 1023px) {
  .co-filters-grid,
  .co-offer-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-search-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .co-filters-toggle { grid-column: 1 / -1; justify-self: start; }
}

.co-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 348px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  container-type: inline-size;
  container-name: company-card;
}
html[data-theme="dark"] .co-card,
body.theme-dark .co-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.co-card:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, #e4eaf1);
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.07);
  transform: translateY(-1px);
}
.co-card:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--blue) 48%, #e4eaf1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.co-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.co-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  min-width: 0;
  padding: 24px;
  pointer-events: none;
  overflow: hidden;
}
.co-card-name a,
.co-card-actions,
.co-card-actions a,
.co-card-actions button,
.co-card-actions form {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* 1) Header: logo + name + verified */
.co-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 0;
  margin-bottom: 12px;
}
.co-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f7f9fc;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 52px;
  position: relative;
}
html[data-theme="dark"] .co-logo,
body.theme-dark .co-logo {
  background: color-mix(in srgb, var(--pale) 50%, var(--surface));
  border-color: var(--border);
}
.co-logo img {
  width: 100%;
  height: 100%;
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  display: block;
  box-sizing: border-box;
}
.mp-provider-logo.co-logo img,
.mp-detail-provider .mp-provider-logo img {
  max-width: 100%;
  max-height: 100%;
  padding: 6px;
  object-fit: contain;
}
.co-logo img.is-broken {
  display: none;
}
.co-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.co-logo-fallback[hidden] {
  display: none !important;
}
.co-logo-fallback--initials {
  background: linear-gradient(145deg, #1770ef, #19c6df);
}
.co-logo-fallback--tone-0 { background: linear-gradient(145deg, #0d47a1, #1bb8d4); }
.co-logo-fallback--tone-1 { background: linear-gradient(145deg, #1565c0, #26c6da); }
.co-logo-fallback--tone-2 { background: linear-gradient(145deg, #1976d2, #00acc1); }
.co-logo-fallback--tone-3 { background: linear-gradient(145deg, #1e88e5, #26a69a); }
.co-logo-fallback--tone-4 { background: linear-gradient(145deg, #0288d1, #26c6da); }
.co-logo-fallback--tone-5 { background: linear-gradient(145deg, #0277bd, #4dd0e1); }
.co-logo-fallback--tone-6 { background: linear-gradient(145deg, #01579b, #00bcd4); }
.co-logo-fallback--tone-7 { background: linear-gradient(145deg, #0d47a1, #00838f); }
.co-logo-fallback-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  pointer-events: none;
}
.co-logo-fallback-text {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 1px rgba(7, 27, 64, 0.2);
}
.co-logo-fallback--placeholder {
  background: linear-gradient(145deg, #0f3d7a, #1770ef 55%, #19c6df);
  color: rgba(255, 255, 255, 0.92);
}
.co-card-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.co-card-name {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 800;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.co-card-name a {
  color: inherit;
  text-decoration: none;
}
.co-card-name a:hover { color: var(--blue); }
.co-card-name a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.co-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #1aa88a 22%, transparent);
  background: color-mix(in srgb, #1aa88a 8%, #fff);
  color: #127a64;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* 2) Content: industry, location, description, tags */
.co-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.co-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  color: #5b6b7c;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
}
html[data-theme="dark"] .co-meta-item,
body.theme-dark .co-meta-item { color: var(--muted); }
.co-meta-item svg {
  flex: 0 0 14px;
  opacity: 0.7;
}
.co-meta-item > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-card-desc {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.co-card-tags {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  height: 28px;
  flex: 0 0 28px;
  min-width: 0;
  overflow: hidden;
}
.co-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  max-width: 46%;
  padding: 0 10px;
  border: 1px solid #e5ebf2;
  border-radius: 999px;
  background: #f7f9fc;
  color: #4a5a6a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="dark"] .co-tag,
body.theme-dark .co-tag {
  background: color-mix(in srgb, var(--pale) 40%, var(--surface));
  border-color: var(--border);
  color: var(--muted);
}
.co-tag-more {
  max-width: none;
  color: #7a8a9a;
  background: transparent;
  border-color: transparent;
  padding-inline: 4px;
  flex: 0 0 auto;
}

/* 3) Footer pinned to bottom */
.co-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 52px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #edf1f6;
  min-width: 0;
}
html[data-theme="dark"] .co-card-foot,
body.theme-dark .co-card-foot { border-top-color: var(--border); }
.co-card-offers {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 170px);
  min-height: 40px;
  color: #6b7c8d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.co-card-offers svg {
  flex: 0 0 14px;
  opacity: 0.72;
}
.co-card-offers > span {
  min-width: 0;
  overflow: visible;
}
.co-card-actions {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 40px;
}
.co-follow-form { display: inline-flex; margin: 0; }
.co-view-btn {
  min-height: 40px;
  height: 40px;
  padding-inline: 14px;
  font-size: 0.875rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.co-follow-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid #d7dee8;
  border-radius: 10px;
  background: #fff;
  color: #4a5a6a;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.co-follow-btn svg {
  flex: 0 0 auto;
  pointer-events: none;
}
.co-follow-btn:hover {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, #d7dee8);
  background: color-mix(in srgb, var(--blue) 5%, #fff);
}
.co-follow-btn.is-following {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 35%, #d0d8e2);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}
.co-follow-btn.is-following:hover {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 28%, #d0d8e2);
  background: color-mix(in srgb, #b42318 5%, #fff);
}
html[data-theme="dark"] .co-follow-btn,
body.theme-dark .co-follow-btn {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .co-follow-btn.is-following,
body.theme-dark .co-follow-btn.is-following {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}
.co-follow-btn:focus-visible,
.co-view-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.co-flash {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, #1aa88a 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, #1aa88a 10%, #fff);
  color: #0f6b57;
  font-size: 0.94rem;
  font-weight: 650;
}
.co-flash--error {
  border-color: color-mix(in srgb, #c0392b 30%, transparent);
  background: color-mix(in srgb, #c0392b 8%, #fff);
  color: #8e2a22;
}
.co-state {
  padding: 48px 28px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--surface);
  text-align: center;
}
.co-state h2 { margin: 0 0 8px; font-size: 1.25rem; }
.co-state p { margin: 0 0 18px; color: var(--muted); font-size: 0.98rem; }
.co-state-error {
  border-color: color-mix(in srgb, #c0392b 35%, var(--border));
  background: color-mix(in srgb, #c0392b 6%, var(--surface));
}
.co-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.co-page-status { color: var(--muted); font-size: 0.95rem; font-weight: 650; }
.co-pagination .btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 768px) {
  .co-card { height: auto; min-height: 300px; }
  .co-search-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .co-filters-toggle { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .co-filters-grid,
  .co-offer-options { grid-template-columns: 1fr; }
  .co-filters-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 80;
    margin: 0;
    max-height: min(86vh, 720px);
    max-height: min(86dvh, 720px);
    overflow: auto;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 40px color-mix(in srgb, #0b1b33 18%, transparent);
    transform: translateY(110%);
    transition: transform 0.22s ease;
  }
  .co-filters-panel.is-open {
    transform: translateY(0);
  }
  .co-filters-panel-head { display: flex; }
  .co-filters-apply { display: inline-flex; width: 100%; justify-content: center; }
  .co-filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: color-mix(in srgb, #0b1b33 42%, transparent);
  }
  .co-filters-backdrop[hidden] { display: none !important; }
  html.co-filters-locked,
  html.co-filters-locked body { overflow: hidden; }
  .co-hero { padding: 16px 16px; }
  .co-hero-aside { justify-items: start; text-align: left; width: 100%; }
  .co-card-foot { flex-wrap: nowrap; }
  .co-card-actions { flex-shrink: 0; }
  .co-view-btn { padding-inline: 12px; }
  .form-modal footer,
  .modal-card footer,
  .interest-modal__actions,
  .composer-modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .form-modal footer .btn,
  .modal-card footer .btn,
  .interest-modal__actions .btn,
  .composer-modal-foot .btn {
    width: 100%;
  }
  .form-modal.mp-create-form > .mp-create-footer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
  }
  .form-modal.mp-create-form > .mp-create-footer .btn {
    width: auto;
    flex: 1 1 auto;
  }
}

/* ——— People directory ——— */
.people-directory {
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 4px 0 48px;
  container-type: inline-size;
  container-name: people-dir companies-dir;
}
.pp-requests {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, var(--surface)) 0%, var(--surface) 60%);
}
.pp-requests[hidden] { display: none !important; }
.pp-requests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.pp-requests-head strong {
  display: block;
  font-size: 0.98rem;
}
.pp-requests-count {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.pp-requests-list {
  display: grid;
  gap: 8px;
}
.pp-request-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.pp-request-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--blue) 14%, var(--pale));
  background-size: cover;
  background-position: center;
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
  flex-shrink: 0;
}
.pp-request-copy {
  min-width: 0;
}
.pp-request-copy p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  line-height: 1.35;
  font-size: 0.92rem;
}
.pp-request-copy time {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}
.pp-request-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.pp-request-actions .btn {
  min-height: 36px;
  padding-inline: 12px;
  font-size: 0.86rem;
}

.pp-requests-modal {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(560px, calc(100vw - 24px));
  background: var(--surface);
  color: inherit;
  box-shadow: 0 24px 60px color-mix(in srgb, #0b1b33 28%, transparent);
}
.pp-requests-modal::backdrop {
  background: color-mix(in srgb, #0b1b33 45%, transparent);
}
.pp-requests-modal-inner {
  padding: 16px;
}
.pp-requests-modal-inner header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pp-requests-modal-inner h2 {
  margin: 0;
  font-size: 1.1rem;
}

.pp-grid.co-grid {
  align-items: stretch;
}
@container people-dir (max-width: 1023px) {
  .pp-grid.co-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container people-dir (max-width: 639px) {
  .pp-grid.co-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1023px) {
    .pp-grid.co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 639px) {
    .pp-grid.co-grid { grid-template-columns: 1fr; }
  }
}

.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 250px;
  max-height: none;
  width: 100%;
  min-width: 0;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.04);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
html[data-theme="dark"] .pp-card,
body.theme-dark .pp-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.pp-card:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, #e4eaf1);
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.07);
  transform: translateY(-1px);
}
.pp-card:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--blue) 48%, #e4eaf1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.pp-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  outline: none;
}
.pp-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 18px 18px 16px;
  gap: 0;
  pointer-events: none;
}
.pp-card-body a,
.pp-card-body button,
.pp-card-body form,
.pp-card-actions {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.pp-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  flex: 0 0 auto;
  min-width: 0;
}
.pp-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid #e2e8f0;
  background: color-mix(in srgb, var(--blue) 10%, #f7f9fc);
  background-size: cover;
  background-position: center;
  color: var(--blue);
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  flex-shrink: 0;
  overflow: hidden;
}
.pp-card-title-block { min-width: 0; }
.pp-card-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-weight: 750;
}
.pp-card-name a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-width: 0;
}
.pp-card-name a:hover { color: var(--blue); }
.pp-card-name a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.pp-verified {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
}
.pp-card-role {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pp-card-location {
  margin: 6px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.35;
  min-width: 0;
}
.pp-card-location svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.75;
}
.pp-card-location span {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pp-card-content {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  flex: 0 1 auto;
  min-height: 0;
}
.pp-badge {
  display: inline-flex;
  align-self: start;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #0ea5a4 22%, var(--border));
  background: color-mix(in srgb, #0ea5a4 8%, var(--surface));
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-card-tags .co-tag {
  font-size: 0.78rem;
  max-width: 100%;
}
.pp-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
  flex: 0 0 auto;
}
html[data-theme="dark"] .pp-card-foot,
body.theme-dark .pp-card-foot {
  border-top-color: var(--border);
}
.pp-card-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pp-action-btn,
.pp-card-actions .btn,
.pp-card-actions .pp-status {
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
}
.pp-action-btn,
.pp-card-actions .btn {
  padding-inline: 12px;
  font-size: 0.875rem;
  white-space: nowrap;
}
.pp-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-status-connected {
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--border));
  background: color-mix(in srgb, #16a34a 9%, var(--surface));
  color: #15803d;
}
.pp-status-pending {
  border: 1px solid color-mix(in srgb, var(--muted) 35%, var(--border));
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
  color: var(--muted);
  font-weight: 650;
}
.pp-message-form {
  margin: 0;
  display: inline-flex;
  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .pp-card { min-height: 0; }
  .pp-card-actions {
    flex-wrap: wrap;
  }
  .pp-request-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .pp-request-actions {
    grid-column: 1 / -1;
  }
}
@container people-dir (max-width: 639px) {
  .pp-card { min-height: 0; }
  .pp-request-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .pp-request-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }
  .pp-request-actions .btn { flex: 1; }
}

.notice-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, var(--pale));
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--blue);
}
.notice-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.notice-actions .btn {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.78rem;
}

/* ——— Projects directory ——— */
.projects-directory {
  container-name: people-dir companies-dir projects-dir;
  overflow-x: clip;
  max-width: 100%;
}
.projects-directory .co-hero {
  align-items: center;
}
.projects-directory .co-hero-copy h1 {
  font-size: clamp(30px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.projects-directory .co-hero-copy p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 62%, #64748b);
}
.projects-directory .co-hero-aside {
  align-self: center;
  justify-items: end;
  gap: 10px;
}
.projects-directory .co-hero-count {
  font-size: 0.95rem;
  font-weight: 650;
  color: color-mix(in srgb, var(--text) 58%, #64748b);
}
.projects-directory .co-search-field {
  min-height: 52px;
}
.projects-directory .co-search-field input {
  font-size: 1rem;
}
.projects-directory .co-search-submit,
.projects-directory .co-filters-toggle {
  min-height: 48px;
  padding-inline: 18px;
  font-size: 0.95rem;
}
.projects-directory .co-results-bar {
  margin: 4px 0 18px;
  gap: 16px;
}
.projects-directory .co-results-count {
  font-size: 0.95rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 72%, #475569);
}
.projects-directory .co-sort {
  font-size: 0.9rem;
  gap: 10px;
}
.projects-directory .co-sort select {
  min-height: 44px;
  font-size: 0.95rem;
}

.pr-grid {
  align-items: stretch;
}
.pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 380px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.04);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
html[data-theme="dark"] .pr-card,
body.theme-dark .pr-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.pr-card:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, #e4eaf1);
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.07);
  transform: translateY(-1px);
}
.pr-card:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--blue) 48%, #e4eaf1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.pr-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  outline: none;
}
.pr-card-cover {
  position: relative;
  z-index: 2;
  height: 88px;
  flex: 0 0 88px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  pointer-events: none;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.pr-card-cover--tone-0 { background: linear-gradient(135deg, #0a2248 0%, #145a9c 58%, #0e7490 100%); }
.pr-card-cover--tone-1 { background: linear-gradient(135deg, #0f2f3d 0%, #0f5f58 58%, #0d9488 100%); }
.pr-card-cover--tone-2 { background: linear-gradient(135deg, #111827 0%, #334155 55%, #475569 100%); }
.pr-card-cover--tone-3 { background: linear-gradient(135deg, #0f1c3d 0%, #1d4ed8 58%, #0284c7 100%); }
.pr-card-cover--tone-4 { background: linear-gradient(135deg, #2e1065 0%, #5b21b6 55%, #7c3aed 100%); }
.pr-card-cover--tone-5 { background: linear-gradient(135deg, #3b1d0a 0%, #9a3412 55%, #c2410c 100%); }
.pr-cover-mark {
  opacity: 0.55;
  color: #fff;
}
.pr-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.pr-status--open {
  background: color-mix(in srgb, #15803d 88%, #0f172a);
  border-color: rgba(255, 255, 255, 0.22);
}
.pr-status--planning {
  background: color-mix(in srgb, #1d4ed8 88%, #0f172a);
  border-color: rgba(255, 255, 255, 0.22);
}
.pr-status--in_progress {
  background: color-mix(in srgb, #b45309 90%, #0f172a);
  border-color: rgba(255, 255, 255, 0.22);
}
.pr-status--closed {
  background: color-mix(in srgb, #475569 90%, #0f172a);
  border-color: rgba(255, 255, 255, 0.22);
}
.pr-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: auto;
  min-width: 0;
  padding: 20px 22px 20px;
  gap: 0;
  pointer-events: none;
}
.pr-card-body a,
.pr-card-body button,
.pr-card-body form,
.pr-card-actions {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.pr-card-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 750;
  min-width: 0;
  color: var(--text);
}
.pr-card-title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pr-card-title a:hover { color: var(--blue); }
.pr-card-title a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}
.pr-company {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  min-width: 0;
}
.pr-company-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9 center/cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f4c81;
  flex: 0 0 30px;
  overflow: hidden;
}
.pr-company-name {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 78%, #334155);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.pr-company-name:hover {
  color: var(--blue);
}
.pr-card-desc {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 68%, #475569);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pr-card-meta {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.pr-card-meta p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: color-mix(in srgb, var(--text) 62%, #475569);
  font-size: 0.875rem;
  line-height: 1.4;
  min-width: 0;
}
.pr-card-meta svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.9;
  color: color-mix(in srgb, var(--text) 55%, #64748b);
}
.pr-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.pr-card-tags .co-tag {
  font-size: 0.8125rem;
  font-weight: 650;
  padding: 5px 10px;
  color: color-mix(in srgb, var(--text) 72%, #334155);
  border-color: #d8e0ea;
  background: #f8fafc;
}
.pr-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e8eef4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  flex: 0 0 auto;
}
html[data-theme="dark"] .pr-card-foot,
body.theme-dark .pr-card-foot { border-top-color: var(--border); }
.pr-card-metric {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 70%, #334155);
  font-size: 0.875rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pr-view-btn {
  min-height: 40px;
  height: 40px;
  padding-inline: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.pr-save-form { margin: 0; }
.pr-save-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fff;
  color: color-mix(in srgb, var(--text) 55%, #64748b);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
html[data-theme="dark"] .pr-save-btn,
body.theme-dark .pr-save-btn {
  background: var(--surface);
  border-color: var(--border);
}
.pr-save-btn:hover,
.pr-save-btn.is-saved {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.pr-save-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .projects-directory .co-hero-copy h1 {
    font-size: clamp(28px, 5vw, 32px);
  }
  .projects-directory .co-hero-copy p {
    font-size: 0.98rem;
  }
}
@media (max-width: 700px) {
  .pr-card {
    height: auto;
    min-height: 340px;
  }
  .pr-card-body {
    padding: 18px 18px 20px;
  }
  .pr-card-title {
    font-size: 1.0625rem;
  }
  .projects-directory .co-hero {
    align-items: flex-start;
  }
  .projects-directory .co-hero-aside {
    justify-items: start;
    text-align: left;
    width: 100%;
  }
}
@container projects-dir (max-width: 639px) {
  .pr-card {
    height: auto;
    min-height: 320px;
  }
}

/* ——— Jobs directory ——— */
.jobs-directory {
  container-name: people-dir companies-dir projects-dir jobs-dir;
  overflow-x: clip;
  max-width: 100%;
}
.jobs-directory .co-hero { align-items: center; }
.jobs-directory .co-hero-copy h1 {
  font-size: clamp(30px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.jobs-directory .co-hero-copy p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 62%, #64748b);
}
.jobs-directory .co-hero-aside {
  align-self: center;
  justify-items: end;
  gap: 10px;
}
.jobs-directory .co-search-field { min-height: 52px; }
.jobs-directory .jb-search-bar {
  grid-template-columns: minmax(0, 1.35fr) minmax(150px, 0.65fr) auto auto;
}
.jobs-directory .jb-location-field {
  min-width: 0;
}
.jobs-directory .jb-location-field input {
  font-size: 0.95rem;
}
.jobs-directory .co-search-submit,
.jobs-directory .co-filters-toggle {
  min-height: 48px;
  padding-inline: 18px;
}
@media (max-width: 1023px) {
  .jobs-directory .jb-search-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .jobs-directory .jb-location-field {
    grid-column: 1 / -1;
  }
  .jobs-directory .co-filters-toggle {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.jb-grid { align-items: stretch; }
.jb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 340px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.04);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
html[data-theme="dark"] .jb-card,
body.theme-dark .jb-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.jb-card:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, #e4eaf1);
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.07);
  transform: translateY(-1px);
}
.jb-card:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--blue) 48%, #e4eaf1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.jb-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  outline: none;
}
.jb-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 22px 20px;
  pointer-events: none;
}
.jb-card-body a,
.jb-card-body button,
.jb-card-body form,
.jb-card-body .jb-verified,
.jb-card-actions {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.jb-card-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 2px;
}
.jb-logo {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f7f9fc;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 800;
  color: #0f4c81;
  flex: 0 0 52px;
  overflow: hidden;
}
html[data-theme="dark"] .jb-logo,
body.theme-dark .jb-logo {
  border-color: var(--border);
  background: color-mix(in srgb, var(--pale) 50%, var(--surface));
  color: var(--blue);
}
.jb-logo img {
  width: 100%;
  height: 100%;
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
  object-position: center;
  padding: 4px;
  display: block;
  box-sizing: border-box;
}
.jb-logo img.is-broken {
  display: none;
}
.jb-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.jb-logo-fallback[hidden] {
  display: none !important;
}
.jb-card-title-block { min-width: 0; }
.jb-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-bottom: 6px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #166534;
  background: color-mix(in srgb, #16a34a 10%, #fff);
  border: 1px solid color-mix(in srgb, #16a34a 22%, #e2e8f0);
}
html[data-theme="dark"] .jb-status,
body.theme-dark .jb-status {
  color: #86efac;
  background: color-mix(in srgb, #16a34a 18%, var(--surface));
  border-color: color-mix(in srgb, #16a34a 30%, var(--border));
}
.jb-card-title {
  margin: 0;
  font-size: 1.125rem; /* 18px */
  line-height: 1.35;
  font-weight: 750;
  color: var(--text);
}
.jb-card-title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.jb-card-title a:hover { color: var(--blue); }
.jb-company {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-width: 0;
}
.jb-company-name {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 78%, #334155);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.jb-company-name:hover { color: var(--blue); }
.jb-verified {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  outline: none;
  cursor: help;
}
.jb-verified:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent);
}
.jb-card-desc {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 68%, #475569);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.jb-card-meta {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.jb-card-meta p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: color-mix(in srgb, var(--text) 62%, #475569);
  font-size: 0.875rem;
  line-height: 1.4;
  min-width: 0;
}
.jb-card-meta svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.9;
}
.jb-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jb-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.jb-card-tags .co-tag {
  font-size: 0.8125rem;
  font-weight: 650;
  padding: 5px 10px;
  color: color-mix(in srgb, var(--text) 72%, #334155);
}
.jb-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e8eef4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  flex: 0 0 auto;
}
html[data-theme="dark"] .jb-card-foot,
body.theme-dark .jb-card-foot { border-top-color: var(--border); }
.jb-card-metric {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 70%, #334155);
  font-size: 0.875rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jb-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.jb-view-btn {
  min-height: 40px;
  height: 40px;
  padding-inline: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.jb-save-form { margin: 0; }
.jb-save-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fff;
  color: color-mix(in srgb, var(--text) 55%, #64748b);
  cursor: pointer;
}
html[data-theme="dark"] .jb-save-btn,
body.theme-dark .jb-save-btn {
  background: var(--surface);
  border-color: var(--border);
}
.jb-save-btn:hover,
.jb-save-btn.is-saved {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.jb-save-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .jb-card { min-height: 300px; }
  .jb-card-body { padding: 18px 18px 20px; }
  .jobs-directory .co-hero { align-items: flex-start; }
  .jobs-directory .co-hero-aside {
    justify-items: start;
    text-align: left;
    width: 100%;
  }
}
@container jobs-dir (max-width: 639px) {
  .jb-card { min-height: 280px; }
}

/* ——— Tenders directory ——— */
.tenders-directory {
  container-name: people-dir companies-dir projects-dir jobs-dir tenders-dir;
  overflow-x: clip;
  max-width: 100%;
}
.tenders-directory .co-hero { align-items: center; }
.tenders-directory .co-hero-copy h1 {
  font-size: clamp(30px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.tenders-directory .co-hero-copy p {
  margin-top: 10px;
  font-size: 1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 62%, #64748b);
}
.tenders-directory .co-hero-aside {
  align-self: center;
  justify-items: end;
  gap: 10px;
}
.tenders-directory .co-search-field { min-height: 52px; }
.tenders-directory .co-search-submit,
.tenders-directory .co-filters-toggle {
  min-height: 48px;
  padding-inline: 18px;
}

.td-grid { align-items: stretch; }
.td-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 380px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  border: 1px solid #e4eaf1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 35, 65, 0.04);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
html[data-theme="dark"] .td-card,
body.theme-dark .td-card {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
}
.td-card:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, #e4eaf1);
  box-shadow: 0 6px 18px rgba(15, 35, 65, 0.07);
  transform: translateY(-1px);
}
.td-card:has(:focus-visible) {
  border-color: color-mix(in srgb, var(--blue) 48%, #e4eaf1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.td-card-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  outline: none;
}
.td-card-cover {
  position: relative;
  z-index: 2;
  height: 88px;
  flex: 0 0 88px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px 16px;
  color: #fff;
  pointer-events: none;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.td-card-cover--tone-0 { background: linear-gradient(135deg, #0a2248 0%, #145a9c 58%, #0e7490 100%); }
.td-card-cover--tone-1 { background: linear-gradient(135deg, #0f2f3d 0%, #0f5f58 58%, #0d9488 100%); }
.td-card-cover--tone-2 { background: linear-gradient(135deg, #111827 0%, #334155 55%, #475569 100%); }
.td-card-cover--tone-3 { background: linear-gradient(135deg, #0f1c3d 0%, #1d4ed8 58%, #0284c7 100%); }
.td-card-cover--tone-4 { background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 55%, #6366f1 100%); }
.td-card-cover--tone-5 { background: linear-gradient(135deg, #3b1d0a 0%, #9a3412 55%, #c2410c 100%); }
.td-cover-mark { opacity: 0.55; color: #fff; }
.td-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(15, 23, 42, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}
.td-status--open {
  background: color-mix(in srgb, #15803d 88%, #0f172a);
}
.td-status--review {
  background: color-mix(in srgb, #1d4ed8 88%, #0f172a);
}
.td-status--awarded {
  background: color-mix(in srgb, #b45309 90%, #0f172a);
}
.td-status--closed {
  background: color-mix(in srgb, #475569 90%, #0f172a);
}
.td-status--expired {
  background: color-mix(in srgb, #7f1d1d 88%, #0f172a);
}
.td-card.is-expired .td-card-metric {
  color: color-mix(in srgb, #b91c1c 70%, var(--text));
}
.td-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  padding: 20px 22px 20px;
  pointer-events: none;
}
.td-card-body a,
.td-card-body button,
.td-card-body form,
.td-card-body .td-verified,
.td-card-actions {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}
.td-card-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 750;
  color: var(--text);
}
.td-card-title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.td-card-title a:hover { color: var(--blue); }
.td-company {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  min-width: 0;
}
.td-company-logo {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f7f9fc;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f4c81;
  flex: 0 0 30px;
  overflow: hidden;
}
html[data-theme="dark"] .td-company-logo,
body.theme-dark .td-company-logo {
  border-color: var(--border);
  background: color-mix(in srgb, var(--pale) 50%, var(--surface));
}
.td-company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 2px;
  display: block;
  box-sizing: border-box;
}
.td-company-logo img.is-broken { display: none; }
.td-company-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.td-company-fallback[hidden] { display: none !important; }
.td-company-name {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 78%, #334155);
  font-size: 0.9375rem;
  font-weight: 650;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.td-company-name:hover { color: var(--blue); }
.td-verified {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
  outline: none;
  cursor: help;
}
.td-verified:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 35%, transparent);
}
.td-card-desc {
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--text) 68%, #475569);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.td-card-meta {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.td-card-meta p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: color-mix(in srgb, var(--text) 62%, #475569);
  font-size: 0.875rem;
  line-height: 1.4;
  min-width: 0;
}
.td-card-meta svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.9;
}
.td-card-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}
.td-card-tags .co-tag {
  font-size: 0.8125rem;
  font-weight: 650;
  padding: 5px 10px;
}
.td-card-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #e8eef4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  flex: 0 0 auto;
}
html[data-theme="dark"] .td-card-foot,
body.theme-dark .td-card-foot { border-top-color: var(--border); }
.td-card-metric {
  min-width: 0;
  color: color-mix(in srgb, var(--text) 70%, #334155);
  font-size: 0.875rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.td-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.td-view-btn {
  min-height: 40px;
  height: 40px;
  padding-inline: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.td-save-form { margin: 0; }
.td-save-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #d5dee8;
  border-radius: 10px;
  background: #fff;
  color: color-mix(in srgb, var(--text) 55%, #64748b);
  cursor: pointer;
}
html[data-theme="dark"] .td-save-btn,
body.theme-dark .td-save-btn {
  background: var(--surface);
  border-color: var(--border);
}
.td-save-btn:hover,
.td-save-btn.is-saved {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--border));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.td-save-btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .td-card { min-height: 320px; }
  .td-card-body { padding: 18px 18px 20px; }
  .tenders-directory .co-hero { align-items: flex-start; }
  .tenders-directory .co-hero-aside {
    justify-items: start;
    text-align: left;
    width: 100%;
  }
}

/* ——— Job detail ——— */
.job-detail {
  display: grid;
  gap: 1.25rem;
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.job-detail .jd-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding: 1.35rem 1.5rem;
  background: #fff;
  border: 1px solid #e6eef5;
  box-shadow: 0 10px 28px rgba(15, 42, 67, 0.05);
}
html[data-theme="dark"] .job-detail .jd-hero,
body.theme-dark .job-detail .jd-hero {
  background: color-mix(in srgb, var(--card) 96%, #0b1724);
  border-color: color-mix(in srgb, var(--border) 80%, #1e3a5f);
  box-shadow: none;
}
.jd-hero-main { min-width: 0; }
.jd-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--text) 58%, #64748b);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.85rem;
}
.jd-back:hover { color: var(--blue); }
.jd-status-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
}
.jd-status {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #e8f7fc;
  color: #0b6f8a;
}
.jd-status.is-closed {
  background: color-mix(in srgb, var(--border) 70%, #f1f5f9);
  color: color-mix(in srgb, var(--text) 55%, #64748b);
}
.jd-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--text);
}
.jd-company-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.jd-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid #e6eef5;
  background: #f5fafc;
  position: relative;
}
.jd-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jd-logo img.is-broken { display: none; }
.jd-logo.company-logo--fallback {
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border: 0;
}
.jd-logo.company-logo--tone-0 { background: linear-gradient(145deg, #0d47a1, #1bb8d4); }
.jd-logo.company-logo--tone-1 { background: linear-gradient(145deg, #1565c0, #26c6da); }
.jd-logo.company-logo--tone-2 { background: linear-gradient(145deg, #1976d2, #00acc1); }
.jd-logo.company-logo--tone-3 { background: linear-gradient(145deg, #1e88e5, #26a69a); }
.jd-logo.company-logo--tone-4 { background: linear-gradient(145deg, #0288d1, #26c6da); }
.jd-logo.company-logo--tone-5 { background: linear-gradient(145deg, #0277bd, #4dd0e1); }
.jd-logo.company-logo--tone-6 { background: linear-gradient(145deg, #01579b, #00bcd4); }
.jd-logo.company-logo--tone-7 { background: linear-gradient(145deg, #0d47a1, #00838f); }
.jd-logo-fallback[hidden] { display: none !important; }
.jd-company-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex-wrap: wrap;
}
.jd-company-name {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
a.jd-company-name:hover { color: var(--blue); }
.jd-verified {
  display: inline-flex;
  color: var(--blue);
}
.jd-verified-inline {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--blue);
}
.jd-hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.15rem;
}
.jd-hero-facts p {
  margin: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 62%, #475569);
}
.jd-hero-facts svg {
  flex: 0 0 auto;
  margin-top: 2px;
  opacity: 0.9;
}
.jd-hero-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.jd-apply-btn {
  min-height: 44px;
  padding-inline: 1.15rem;
  white-space: nowrap;
}
.jd-apply-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}
.jd-save-form { margin: 0; }
.jd-save-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #d9e6f0;
  background: #fff;
  color: color-mix(in srgb, var(--text) 55%, #64748b);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.jd-save-btn:hover,
.jd-save-btn.is-saved {
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 35%, #d9e6f0);
  background: color-mix(in srgb, var(--blue) 8%, #fff);
}
.jd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: 1.15rem;
  align-items: start;
}
.jd-main,
.jd-aside {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.jd-section {
  padding: 1.2rem 1.25rem;
  margin: 0;
}
.jd-section h2 {
  margin: 0 0 0.85rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.015em;
}
.jd-prose {
  font-size: 0.98rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--text) 88%, #334155);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.jd-facts {
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.jd-facts > div {
  display: grid;
  gap: 0.15rem;
}
.jd-facts dt {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jd-facts dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.jd-company-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.95rem;
}
.jd-company-card-head .jd-logo {
  width: 48px;
  height: 48px;
}
.jd-company-card-name {
  display: block;
  font-size: 1rem;
  line-height: 1.3;
}
.jd-company-actions {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}
.jd-company-actions .btn,
.jd-company-actions form { width: 100%; }
.jd-company-actions form .btn { width: 100%; }
.jd-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(560px, calc(100vw - 2rem));
}
.jd-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.jd-dialog-card {
  background: #fff;
  border: 1px solid #e6eef5;
  border-radius: 16px;
  padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: 0 24px 60px rgba(15, 42, 67, 0.18);
}
html[data-theme="dark"] .jd-dialog-card,
body.theme-dark .jd-dialog-card {
  background: var(--card);
  border-color: var(--border);
}
.jd-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.jd-dialog-head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.jd-dialog-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem;
  border-radius: 8px;
}
.jd-dialog-close:hover { color: var(--text); background: color-mix(in srgb, var(--border) 55%, transparent); }
.jd-dialog-lead { margin: 0.35rem 0 0.85rem; }
.jd-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--text) 75%, #475569);
}
.jd-consent input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}
.jd-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.jd-mobile-cta {
  display: none;
}
@media (max-width: 900px) {
  .job-detail .jd-hero {
    grid-template-columns: 1fr;
    padding: 1.15rem 1.1rem;
  }
  .jd-hero-actions {
    justify-content: stretch;
  }
  .jd-hero-actions .jd-apply-btn {
    flex: 1 1 auto;
  }
  .jd-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .jd-mobile-cta {
    display: block;
    position: sticky;
    bottom: 0.75rem;
    z-index: 20;
    padding: 0.35rem 0;
  }
  .jd-mobile-cta .btn {
    width: 100%;
    min-height: 48px;
    box-shadow: 0 10px 28px rgba(15, 42, 67, 0.18);
  }
  .jd-hero-actions .jd-apply-btn {
    display: none;
  }
}

/* ——— Job detail banner + editor ——— */
.job-detail .jd-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.jd-hero-media {
  position: relative;
  width: 100%;
  min-height: 160px;
  max-height: 280px;
  background: linear-gradient(135deg, #0b4f8a 0%, #1387b8 48%, #1bb8d4 100%);
  overflow: hidden;
}
.jd-hero-banner {
  width: 100%;
  height: 100%;
  min-height: 160px;
  max-height: 280px;
  object-fit: cover;
  display: block;
}
.jd-hero-fallback {
  min-height: 160px;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.88);
}
.jd-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem 1.4rem 1.4rem;
  background: #fff;
}
html[data-theme="dark"] .jd-hero-body,
body.theme-dark .jd-hero-body {
  background: color-mix(in srgb, var(--card) 96%, #0b1724);
}
.jd-lead {
  margin: -0.35rem 0 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--text) 68%, #64748b);
}
.jd-similar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.jd-similar li {
  display: grid;
  gap: 0.15rem;
}
.jd-similar a {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.jd-similar a:hover { color: var(--blue); }

.job-editor {
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 1rem;
}
.je-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1.15rem 1.25rem;
}
.je-head-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.je-head h1 {
  margin: 0.35rem 0 0;
  font-size: clamp(1.4rem, 2vw, 1.75rem);
}
.je-head-company { margin: 0.4rem 0 0; }
.je-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
  align-items: start;
}
.je-main {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.je-card {
  padding: 1.15rem 1.25rem;
  margin: 0;
}
.je-card h2 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}
.je-hint { margin: 0 0 0.85rem; font-size: 0.9rem; }
.je-banner-preview {
  border: 1px dashed #c9d8e6;
  border-radius: 14px;
  overflow: hidden;
  background: #f5fafc;
  min-height: 160px;
  margin-bottom: 0.9rem;
}
.je-banner-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}
.je-banner-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  gap: 0.4rem;
  color: var(--muted);
  text-align: center;
  padding: 1rem;
}
.je-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
}
.je-aside { min-width: 0; }
.je-side-card {
  padding: 1.1rem 1.15rem;
  margin: 0;
}
.je-sticky {
  position: sticky;
  top: 1rem;
}
.je-side-actions {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.je-side-actions .btn { width: 100%; }
.je-side-sep {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}
.je-danger {
  color: #b42318;
  border-color: color-mix(in srgb, #b42318 35%, var(--border));
}
.je-published { margin: 0.35rem 0 0; font-size: 0.85rem; }
.je-card-mobile-status { display: none; }
.je-card-mobile-actions { display: none; }
@media (max-width: 980px) {
  .je-layout { grid-template-columns: 1fr; }
  .je-sticky { position: static; }
  .je-card-mobile-actions { display: block; }
  .je-side-actions-desktop { display: none; }
}
@media (max-width: 900px) {
  .jd-hero-body {
    grid-template-columns: 1fr;
    padding: 1.1rem;
  }
}

/* ---------- Project create + detail ---------- */
.project-create-page {
  width: min(100%, 1080px);
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(8px, 1.5vw, 16px) 0 clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  box-sizing: border-box;
}
.project-create-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.project-create-hero__copy { flex: 1 1 min(100%, 36rem); min-width: 0; }
.project-create-hero .directory-eyebrow {
  display: inline-block;
  margin: 10px 0 8px;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--blue);
}
.project-create-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.15;
}
.project-create-hero p {
  margin: 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}
.project-create-form { display: grid; gap: 16px; }
.project-create-card {
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 18px;
}
.project-create-card__head { margin-bottom: 14px; }
.project-create-card__head h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
}
.project-create-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 16px;
}
.pe-field {
  display: grid;
  gap: 7px;
  margin-bottom: 14px;
  min-width: 0;
}
.pe-field--full { grid-column: 1 / -1; }
.pe-field > span {
  font-size: 0.92rem;
  font-weight: 700;
}
.pe-field > span i { color: #c0392b; font-style: normal; }
.pe-field input,
.pe-field textarea,
.pe-field select {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 45%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
}
.pe-field textarea { min-height: 110px; resize: vertical; }
.pe-field.has-error input,
.pe-field.has-error textarea,
.pe-field.has-error select,
.pe-dropzone.has-error,
.pe-attachments.has-error { border-color: #c0392b; }
.pe-error { color: #a92f39; font-size: 0.85rem; font-style: normal; font-weight: 650; }
.pe-hint { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.pe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 45%, var(--surface));
}
.pe-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 700;
}
.pe-tag button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.pe-tags__input {
  flex: 1 1 140px;
  min-width: 120px;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px !important;
  outline: none !important;
}
.pe-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.pe-check input { width: 1.1rem; height: 1.1rem; margin-top: 2px; accent-color: var(--blue); }
.project-create-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
.pe-dropzone {
  display: grid;
  gap: 12px;
  min-height: 200px;
  padding: 18px;
  border: 1.5px dashed var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--pale) 55%, var(--surface));
  box-sizing: border-box;
}
.pe-dropzone.is-dragover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}
.pe-dropzone__preview img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
  border-radius: 12px;
}
.pe-dropzone__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pe-inline-check { display: inline-flex; gap: 6px; align-items: center; font-size: 0.88rem; color: var(--muted); }
.pe-attachments {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--pale) 40%, var(--surface));
}
.pe-attach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pe-attach-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.project-create-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.project-create-actions .btn { min-height: 48px; }
.project-create-actions .btn-primary { min-width: min(100%, 220px); font-weight: 750; }

.network-main:has(> .project-create-page),
.app-content:has(> .project-create-page),
.network-main:has(> .project-detail),
.app-content:has(> .project-detail) {
  width: min(100% - clamp(16px, 3vw, 40px), 1120px);
  max-width: 1120px;
}
.network-main:has(> .project-create-page) > .network-compliance-footer,
.network-main:has(> .project-detail) > .network-compliance-footer {
  width: 100%;
  max-width: none;
  margin-top: auto;
  margin-bottom: clamp(16px, 2vw, 28px);
}

.project-detail {
  width: min(100%, 1120px);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  padding-bottom: 24px;
}
.pd-hero { overflow: hidden; padding: 0; }
.pd-hero-media { min-height: 180px; background: linear-gradient(135deg, #0b2b50, #1664ea 70%, #13bce9); }
.pd-hero-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: cover;
}
.pd-hero-fallback {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.85);
}
.pd-hero-body { padding: clamp(16px, 2.5vw, 28px); display: grid; gap: 12px; }
.pd-status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-status {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  background: var(--soft);
  color: var(--text);
}
.pd-status--open { background: #e7f8ef; color: #0a7a4a; }
.pd-status--draft { background: #eef2f7; color: #52627a; }
.pd-status--paused { background: #fff4e5; color: #9a5b00; }
.pd-status--closed { background: #fdecec; color: #a12622; }
.pd-chip {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.pd-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.pd-lead { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
.pd-company-row { display: flex; gap: 12px; align-items: center; }
.pd-company-row--compact { margin-bottom: 10px; }
.pd-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--soft);
  flex: 0 0 auto;
  font-weight: 800;
  color: #fff;
}
.pd-logo img { width: 100%; height: 100%; object-fit: cover; }
.pd-company-name { font-weight: 800; color: var(--text); text-decoration: none; }
.pd-verified { display: block; font-size: 0.8rem; color: #0a7a4a; font-weight: 700; }
.pd-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.pd-facts p {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}
.pd-facts svg { flex: 0 0 auto; color: var(--blue); }
.pd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pd-save-form { margin: 0; }
.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 18px;
  align-items: start;
}
.pd-main, .pd-aside { display: grid; gap: 16px; min-width: 0; }
.pd-section, .pd-aside-card { padding: clamp(16px, 2vw, 24px); border-radius: 18px; }
.pd-section h2, .pd-aside-card h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}
.pd-section h3 { margin: 14px 0 8px; font-size: 1rem; }
.pd-prose {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: normal;
}
.pd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pd-tags span {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.pd-tags--soft span {
  background: var(--soft);
  color: var(--muted);
}
.pd-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd-files li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.pd-dl { margin: 0; display: grid; gap: 10px; }
.pd-dl > div { display: grid; gap: 2px; }
.pd-dl dt { font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-dl dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.pd-budget { margin: 0; font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; }
.pd-contact { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.9rem; overflow-wrap: anywhere; }
.pd-meta-line { margin: 10px 0 0; font-size: 0.92rem; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .project-create-grid,
  .project-create-media,
  .pd-layout { grid-template-columns: 1fr; }
  .project-create-actions { flex-direction: column-reverse; }
  .project-create-actions .btn { width: 100%; }
  .pd-hero-actions .btn { width: 100%; }
}