@layer reset, tokens, base, components, shell, pages, utilities, responsive, overrides;

/* ──────────────────────────────────────────────────────────────────────────
   WebTrabzon CMS design system
   One semantic token set, one component language, one breakpoint matrix.
   ────────────────────────────────────────────────────────────────────────── */

@layer tokens {
  :root {
    color-scheme: light;

    --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
    --font-display: "Instrument Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;

    /* Semantic colour system: component styles consume these tokens, never raw palette values. */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-soft: #eaf1ff;
    --color-secondary: #7c3aed;
    --color-secondary-soft: #f1eaff;
    --color-accent: #0891b2;
    --color-accent-soft: #e3f7fb;
    --color-canvas: #f4f7fb;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-muted: #edf2f8;
    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-border: #d5dee9;
    --color-border-strong: #b8c5d6;
    --color-success: #059669;
    --color-success-soft: #e6f7f0;
    --color-warning: #d97706;
    --color-warning-soft: #fff3dd;
    --color-danger: #dc2626;
    --color-danger-soft: #feebeb;
    --color-info: #0284c7;
    --color-info-soft: #e6f5fc;
    --color-focus-ring: rgba(37, 99, 235, 0.28);

    /* Compatibility aliases used by the existing component library. */
    --accent: var(--color-secondary);
    --accent2: var(--color-accent);
    --action: var(--color-primary);
    --action-hover: var(--color-primary-hover);
    --on-action: #ffffff;
    --brand-primary: var(--action);
    --brand-primary-hover: var(--action-hover);
    --brand-primary-soft: var(--color-primary-soft);
    --brand-on-primary: #ffffff;
    --brand-focus: var(--color-primary);
    --brand-secondary: var(--color-accent);
    --brand-accent: var(--color-secondary);
    --brand-dark: var(--ink-1);
    --brand-soft: var(--info-soft);
    --brand-soft-source: var(--info-soft);

    --canvas: var(--color-canvas);
    --canvas-deep: var(--color-surface-muted);
    --surface-1: var(--color-surface);
    --surface-2: color-mix(in srgb, var(--color-surface-muted) 52%, var(--color-surface));
    --surface-3: var(--color-surface-muted);
    --surface-glass: rgba(255, 255, 255, 0.78);
    --ink-1: var(--color-text-primary);
    --ink-2: var(--color-text-secondary);
    --ink-3: var(--color-text-muted);
    --line-1: var(--color-border);
    --line-2: var(--color-border-strong);
    --positive: var(--color-success);
    --positive-soft: var(--color-success-soft);
    --warning: var(--color-warning);
    --warning-soft: var(--color-warning-soft);
    --critical: var(--color-danger);
    --critical-soft: var(--color-danger-soft);
    --info: var(--color-info);
    --info-soft: var(--color-info-soft);

    --bg: var(--canvas);
    --bg-elev: var(--surface-1);
    --surface: var(--surface-2);
    --surface-muted: var(--surface-2);
    --text-primary: var(--ink-1);
    --text-secondary: var(--ink-2);
    --border-color: var(--line-1);
    --surface-2-old: var(--surface-3);
    --border: var(--line-1);
    --text: var(--ink-1);
    --muted: var(--ink-2);
    --muted2: var(--ink-3);
    --danger: var(--critical);
    --success: var(--positive);
    --ring: var(--color-focus-ring);

    --shadow-1: 0 1px 2px rgba(31, 41, 55, 0.035), 0 8px 24px rgba(31, 41, 55, 0.055);
    --shadow-2: 0 2px 4px rgba(31, 41, 55, 0.045), 0 18px 48px rgba(31, 41, 55, 0.09);
    --shadow-3: 0 8px 16px rgba(31, 41, 55, 0.06), 0 30px 80px rgba(31, 41, 55, 0.14);
    --shadow-action: 0 10px 24px rgba(37, 99, 235, 0.22);

    --radius-1: 8px;
    --radius-2: 12px;
    --radius-3: 16px;
    --radius-4: 20px;
    --radius-5: 28px;
    --radius-full: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 40px;
    --space-10: 48px;

    --control-sm: 34px;
    --control-md: 42px;
    --control-lg: 50px;
    --sidebar-width: 268px;
    --sidebar-collapsed: 82px;
    --topbar-height: 68px;
    --content-max: 1520px;
    --rail-width: 344px;

    --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-base: 180ms;
    --dur-slow: 280ms;

    --z-sidebar: 40;
    --z-topbar: 30;
    --z-popover: 60;
    --z-modal: 100;
    --z-toast: 120;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: #60a5fa;
    --color-primary-hover: #7bb6fb;
    --color-primary-soft: rgba(96, 165, 250, 0.14);
    --color-secondary: #a78bfa;
    --color-secondary-soft: rgba(167, 139, 250, 0.14);
    --color-accent: #22d3ee;
    --color-accent-soft: rgba(34, 211, 238, 0.13);
    --color-canvas: #080d17;
    --color-surface: #111a2a;
    --color-surface-raised: #172235;
    --color-surface-muted: #0d1422;
    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-border: #263449;
    --color-border-strong: #354760;
    --color-success: #34d399;
    --color-success-soft: rgba(52, 211, 153, 0.13);
    --color-warning: #fbbf24;
    --color-warning-soft: rgba(251, 191, 36, 0.14);
    --color-danger: #fb7185;
    --color-danger-soft: rgba(251, 113, 133, 0.14);
    --color-info: #38bdf8;
    --color-info-soft: rgba(56, 189, 248, 0.14);
    --color-focus-ring: rgba(96, 165, 250, 0.34);
    --surface-glass: rgba(17, 26, 42, 0.82);
    --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.025), 0 10px 30px rgba(0, 0, 0, 0.18);
    --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.26);
    --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 100px rgba(0, 0, 0, 0.42);
    --shadow-action: 0 12px 28px rgba(0, 100, 220, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
      color-scheme: dark;
      --color-primary: #60a5fa;
      --color-primary-hover: #7bb6fb;
      --color-primary-soft: rgba(96, 165, 250, 0.14);
      --color-secondary: #a78bfa;
      --color-secondary-soft: rgba(167, 139, 250, 0.14);
      --color-accent: #22d3ee;
      --color-accent-soft: rgba(34, 211, 238, 0.13);
      --color-canvas: #080d17;
      --color-surface: #111a2a;
      --color-surface-raised: #172235;
      --color-surface-muted: #0d1422;
      --color-text-primary: #f8fafc;
      --color-text-secondary: #cbd5e1;
      --color-text-muted: #94a3b8;
      --color-border: #263449;
      --color-border-strong: #354760;
      --color-success: #34d399;
      --color-success-soft: rgba(52, 211, 153, 0.13);
      --color-warning: #fbbf24;
      --color-warning-soft: rgba(251, 191, 36, 0.14);
      --color-danger: #fb7185;
      --color-danger-soft: rgba(251, 113, 133, 0.14);
      --color-info: #38bdf8;
      --color-info-soft: rgba(56, 189, 248, 0.14);
      --color-focus-ring: rgba(96, 165, 250, 0.34);
      --surface-glass: rgba(17, 26, 42, 0.82);
      --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.025), 0 10px 30px rgba(0, 0, 0, 0.18);
      --shadow-2: 0 1px 0 rgba(255, 255, 255, 0.03), 0 24px 60px rgba(0, 0, 0, 0.26);
      --shadow-3: 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 100px rgba(0, 0, 0, 0.42);
      --shadow-action: 0 12px 28px rgba(0, 100, 220, 0.3);
    }
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   Premium semantic colour direction
   Restrained page accents, accessible states and true light/dark surfaces.
   ────────────────────────────────────────────────────────────────────────── */
@layer pages {
  .routePage {
    --page-accent: var(--color-primary);
    --page-accent-soft: var(--color-primary-soft);
    --page-accent-companion: var(--color-accent);
  }

  #page-dashboard {
    --page-accent: var(--color-primary);
    --page-accent-companion: var(--color-accent);
  }

  #page-contentCalendar {
    --page-accent: var(--color-accent);
    --page-accent-soft: var(--color-accent-soft);
    --page-accent-companion: var(--color-primary);
  }

  #page-blogNew,
  #page-blogEdit,
  #page-aiUsage {
    --page-accent: var(--color-secondary);
    --page-accent-soft: var(--color-secondary-soft);
    --page-accent-companion: var(--color-primary);
  }

  #page-users,
  #page-userManage {
    --page-accent: color-mix(in srgb, var(--color-secondary) 68%, var(--color-primary));
    --page-accent-soft: var(--color-secondary-soft);
    --page-accent-companion: var(--color-primary);
  }

  #page-companies,
  #page-companyManage,
  #page-companySettings {
    --page-accent: var(--color-accent);
    --page-accent-soft: var(--color-accent-soft);
    --page-accent-companion: var(--color-primary);
  }

  #page-settings {
    --page-accent: var(--color-text-secondary);
    --page-accent-soft: var(--color-surface-muted);
    --page-accent-companion: var(--color-primary);
  }

  .routePage .pageHead {
    border-color: var(--color-border);
    background:
      radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--page-accent-companion) 8%, transparent), transparent 31%),
      linear-gradient(118deg, color-mix(in srgb, var(--page-accent-soft) 48%, var(--color-surface)), var(--color-surface) 55%);
  }

  .routePage .pageHead::after {
    border-color: color-mix(in srgb, var(--page-accent) 13%, transparent);
  }

  .routePage .pageEyebrow,
  .routePage .pageHead__eyebrow,
  .routePage .cardEyebrow {
    color: var(--page-accent);
  }

  .routePage .pageEyebrow::before,
  .routePage .pageHead__eyebrow::before {
    background: var(--page-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 12%, transparent);
  }

  .routePage .infoCard::before,
  .routePage .composeTip::before {
    border-color: color-mix(in srgb, var(--page-accent) 18%, var(--color-border));
    background: color-mix(in srgb, var(--page-accent-soft) 72%, var(--color-surface));
    color: var(--page-accent);
  }

  #page-dashboard .dashboardWelcome {
    border-color: var(--color-border);
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 31%),
      radial-gradient(circle at 0 100%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 39%),
      var(--color-surface);
  }

  #page-dashboard .dashboardKpis .kpiCard {
    background: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-muted));
  }

  #page-dashboard .dashboardKpis .kpiCard--featured {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: linear-gradient(145deg, var(--color-primary-soft), color-mix(in srgb, var(--color-accent-soft) 38%, var(--color-surface)));
  }

  #page-dashboard .kpiCard__icon,
  #page-dashboard .kpiCard__value {
    color: var(--color-primary);
  }

  #page-dashboard .kpiCard:nth-child(3) .kpiCard__icon,
  #page-dashboard .kpiCard:nth-child(3) .kpiCard__value {
    color: var(--color-accent);
  }

  .aiComposerHero,
  #page-blogNew .aiWriter {
    border-color: color-mix(in srgb, var(--color-secondary) 24%, var(--color-border));
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 33%),
      radial-gradient(circle at 4% 108%, color-mix(in srgb, var(--color-secondary) 13%, transparent), transparent 38%),
      linear-gradient(128deg, color-mix(in srgb, var(--color-secondary-soft) 60%, var(--color-surface)), var(--color-surface) 58%);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--color-secondary) 9%, transparent), var(--shadow-1);
  }

  .aiComposerHero__mark,
  .aiPageLoading__orb b {
    border-color: color-mix(in srgb, var(--color-secondary) 30%, var(--color-border));
    background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
  }

  #page-blogNew .aiWriter__action {
    background: color-mix(in srgb, var(--color-secondary-soft) 38%, var(--color-surface));
  }

  .aiQuotaBar > span {
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  }

  #page-blogNew .aiLoadingSteps > span {
    color: var(--color-text-muted);
  }

  #page-blogNew .aiLoadingSteps i {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
    box-shadow: none;
  }

  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="3"] {
    color: var(--color-primary);
  }

  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="3"] i {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }

  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="4"] {
    color: var(--color-secondary);
  }

  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="4"] i {
    border-color: var(--color-secondary);
    background: var(--color-secondary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  }

  .campaignHero {
    border-color: color-mix(in srgb, var(--color-secondary) 22%, var(--color-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary-soft) 58%, var(--color-surface)), var(--color-surface));
  }

  .campaignHero__icon,
  .campaignChannel--idea {
    color: var(--color-secondary);
  }
}

@layer utilities {
  html[data-theme="dark"] {
    --brand-on-primary: #08111f;
    --on-action: #08111f;
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
      --brand-on-primary: #08111f;
      --on-action: #08111f;
    }
  }

  .card,
  .sectionCard,
  .listSurface,
  .previewCard,
  .composerSection,
  .aiQuotaCard {
    border-color: var(--color-border);
    background-color: var(--color-surface);
  }

  .listSurface,
  .composerSection,
  .aiQuotaCard {
    border-top-width: 1px;
    border-top-color: var(--color-border);
  }

  @media (hover: hover) {
    .card:not(.aiComposerHero):hover,
    .sectionCard:hover,
    .listSurface:hover {
      border-color: var(--color-border-strong);
    }
  }

  .btn--primary {
    border-color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text-primary));
    background-color: var(--color-primary);
    color: var(--brand-on-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 23%, transparent);
  }

  .btn--primary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-primary-hover) 82%, var(--color-text-primary));
    background-color: var(--color-primary-hover);
    color: var(--brand-on-primary);
  }

  .btn--secondary {
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
    background-color: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  }

  .btn--secondary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
    background-color: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-surface-muted));
    color: var(--color-primary-hover);
  }

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

  .btn--ghost:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
  }

  .btn--danger {
    border-color: color-mix(in srgb, var(--color-danger) 82%, var(--color-text-primary));
    background-color: var(--color-danger);
    color: #ffffff;
    box-shadow: 0 7px 18px color-mix(in srgb, var(--color-danger) 20%, transparent);
  }

  .table .btn--danger {
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    background: var(--color-danger-soft);
    color: var(--color-danger);
    box-shadow: none;
  }

  .table .btn--danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-danger) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-soft) 78%, var(--color-surface));
    color: var(--color-danger);
  }

  .btn:disabled,
  .iconBtn:disabled {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    opacity: .76;
  }

  .btn:focus-visible,
  .iconBtn:focus-visible,
  .chip:focus-visible,
  .segmented__btn:focus-visible,
  .tabBtn:focus-visible {
    outline-color: var(--color-primary);
    box-shadow: 0 0 0 5px var(--color-focus-ring);
  }

  .nav__item.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 74%, var(--color-surface));
    color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-primary), 0 8px 20px color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  .nav__activeDot {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  .tabBtn.is-active,
  .chip.is-active,
  .segmented__btn.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .input,
  .select,
  .textarea,
  .search {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface-muted) 58%, var(--color-surface));
    color: var(--color-text-primary);
  }

  .input::placeholder,
  .textarea::placeholder,
  .search__input::placeholder {
    color: var(--color-text-muted);
    opacity: .9;
  }

  .input:hover:not(:disabled):not(:read-only),
  .select:hover:not(:disabled),
  .textarea:hover:not(:disabled):not(:read-only) {
    border-color: var(--color-border-strong);
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  .editor:focus,
  .search:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
  }

  .input[aria-invalid="true"],
  .select[aria-invalid="true"],
  .textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger-soft) 48%, var(--color-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent);
  }

  .formState {
    border-color: color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .formState[data-state="error"]::before {
    background: var(--color-danger);
  }

  .badge::before {
    --badge-tone: var(--color-text-muted);
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    background: var(--badge-tone);
    color: var(--color-surface);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
  }

  .badge--success::before { --badge-tone: var(--color-success); content: "✓"; }
  .badge--warning::before { --badge-tone: var(--color-warning); content: "!"; }
  .badge--danger::before,
  .badge--error::before { --badge-tone: var(--color-danger); content: "×"; }
  .badge--info::before { --badge-tone: var(--color-info); content: "i"; }

  .badge--success {
    border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .badge--warning {
    border-color: color-mix(in srgb, var(--color-warning) 25%, transparent);
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  .badge--danger,
  .badge--error {
    border-color: color-mix(in srgb, var(--color-danger) 25%, transparent);
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .badge--info {
    border-color: color-mix(in srgb, var(--color-info) 25%, transparent);
    background: var(--color-info-soft);
    color: var(--color-info);
  }

  .tableWrap {
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  .table thead th {
    border-bottom-color: var(--color-border-strong);
    background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface-muted));
    color: var(--color-text-secondary);
  }

  .table tbody td {
    border-bottom-color: color-mix(in srgb, var(--color-border) 78%, transparent);
  }

  .table tbody tr:hover {
    background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-surface));
  }

  .table th.th-actions,
  .table td.th-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--color-surface);
    box-shadow: -12px 0 18px -18px color-mix(in srgb, var(--color-text-primary) 45%, transparent);
  }

  .table thead th.th-actions {
    z-index: 3;
    background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface-muted));
  }

  .table tbody tr:hover td.th-actions {
    background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-surface));
  }

  .systemPill {
    border-color: color-mix(in srgb, var(--color-success) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-success-soft) 56%, var(--color-surface));
    color: var(--color-text-secondary);
  }

  .systemPill__dot {
    background: var(--color-success);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-success) 12%, transparent);
  }

  .quickAction:first-child {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 54%, var(--color-surface));
  }

  .quickAction__icon {
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .quickAction__icon--library {
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }

  .quickAction__icon--preferences {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
  }

  .dashboardEmpty {
    background: var(--color-surface-muted);
  }

  .dashboardEmpty__icon {
    border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border));
    background: var(--color-accent-soft);
    color: var(--color-accent);
  }
}

/* New blog — focused writing workspace */
@layer pages {
  #page-blogNew {
    --writer-line: color-mix(in srgb, var(--ink-1) 16%, var(--line-1));
    --writer-line-strong: color-mix(in srgb, var(--ink-1) 24%, var(--line-1));
    gap: 20px;
  }

  #page-blogNew .blogComposerHead {
    min-height: 104px;
    border: 1px solid var(--writer-line);
    border-radius: 22px;
    background: var(--surface-1);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--ink-1) 6%, transparent);
  }

  #page-blogNew .pageHead__copy .subtle {
    margin-top: 5px;
    color: var(--ink-2);
  }

  #page-blogNew .aiWriter {
    gap: 18px;
    padding: 24px;
    border: 1px solid var(--writer-line-strong);
    border-radius: 22px;
    background: var(--surface-1);
    box-shadow: 0 14px 38px color-mix(in srgb, var(--ink-1) 7%, transparent);
  }

  #page-blogNew .aiWriter::after {
    display: none;
  }

  #page-blogNew .aiComposerHero__head {
    max-width: none;
    align-items: center;
    gap: 13px;
  }

  #page-blogNew .aiComposerHero__mark {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--action) 24%, transparent);
  }

  #page-blogNew .aiWriter__intro {
    min-width: 0;
    flex: 1 1 auto;
  }

  #page-blogNew .aiWriter__intro .cardEyebrow {
    color: var(--action);
    letter-spacing: .085em;
  }

  #page-blogNew .aiWriter__intro .h3 {
    margin-top: 4px;
    font-size: clamp(1.3rem, 1.8vw, 1.62rem);
  }

  #page-blogNew .aiWriter__intro p {
    max-width: 780px;
    margin-top: 6px;
    color: var(--ink-2);
    font-size: .82rem;
  }

  #page-blogNew .aiWriter__scope {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border: 1px solid var(--writer-line);
    border-radius: 12px;
    background: var(--surface-2);
  }

  #page-blogNew .aiWriter__scope > i {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 8px;
    background: var(--positive-soft);
    color: var(--positive);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
  }

  #page-blogNew .aiWriter__scope > span {
    display: grid;
    gap: 1px;
  }

  #page-blogNew .aiWriter__scope strong {
    color: var(--ink-1);
    font-size: .7rem;
  }

  #page-blogNew .aiWriter__scope small {
    color: var(--ink-3);
    font-size: .59rem;
  }

  #page-blogNew .aiComposerHero__workspace {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #page-blogNew .aiComposerPrompt {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--writer-line-strong);
    border-radius: 16px;
    background: var(--surface-1);
  }

  #page-blogNew .aiComposerPrompt .field__label {
    color: var(--ink-1);
    font-size: .76rem;
    font-weight: 720;
  }

  #page-blogNew .aiComposerPrompt .field__hint {
    color: var(--ink-3);
    font-size: .67rem;
  }

  #page-blogNew .aiComposerPrompt .textarea {
    min-height: 136px;
    margin-top: 5px;
    padding: 14px 15px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink-1);
    font-size: .84rem;
  }

  #page-blogNew .aiComposerPrompt .textarea:focus {
    border-color: var(--brand-focus);
    background: var(--surface-1);
    box-shadow: 0 0 0 4px var(--ring);
  }

  #page-blogNew .aiWriter__action {
    display: grid;
    align-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--writer-line-strong);
    border-radius: 16px;
    background: var(--surface-2);
  }

  #page-blogNew .aiWriter__outputs > span {
    color: var(--ink-3);
    font-size: .62rem;
    font-weight: 740;
    letter-spacing: .065em;
    text-transform: uppercase;
  }

  #page-blogNew .aiWriter__outputs ul {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
  }

  #page-blogNew .aiWriter__outputs li {
    position: relative;
    padding-left: 18px;
    color: var(--ink-2);
    font-size: .7rem;
    line-height: 1.35;
  }

  #page-blogNew .aiWriter__outputs li::before {
    position: absolute;
    top: .32em;
    left: 0;
    display: grid;
    width: 12px;
    height: 12px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--action) 13%, var(--surface-1));
    color: var(--action);
    content: "✓";
    font-size: .48rem;
    font-weight: 800;
  }

  #page-blogNew .aiComposerGenerate {
    width: 100%;
    min-height: 58px;
    padding: 12px 13px;
    border: 1px solid color-mix(in srgb, var(--action) 72%, #000);
    border-radius: 12px;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--action) 22%, transparent);
  }

  #page-blogNew .aiComposerGenerate strong {
    font-size: .82rem;
  }

  #page-blogNew .aiWriter__footer {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-1);
  }

  #page-blogNew .aiPromptTemplates > span {
    color: var(--ink-2);
    font-weight: 700;
  }

  #page-blogNew .aiPromptTemplates button {
    min-height: 32px;
    padding-inline: 11px;
    border-color: var(--line-2);
    background: var(--surface-1);
  }

  #page-blogNew .aiWriter__assurance {
    display: inline-flex;
    max-width: 430px;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    color: var(--ink-3);
    font-size: .64rem;
    line-height: 1.4;
    text-align: right;
  }

  #page-blogNew .aiWriter__assurance i {
    color: var(--positive);
    font-style: normal;
    font-weight: 800;
  }

  #page-blogNew .editorWorkspace {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 20px;
  }

  #page-blogNew .composerSection {
    border: 1px solid var(--writer-line);
    border-top-width: 1px;
    border-radius: 18px;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--ink-1) 5%, transparent);
  }

  #page-blogNew .composerSection--editor {
    border-color: var(--writer-line-strong);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--ink-1) 7%, transparent);
  }

  #page-blogNew .composerSection__head,
  #page-blogNew .composerSection--editor .composerSection__head {
    border-bottom: 1px solid var(--writer-line);
    background: var(--surface-2);
  }

  #page-blogNew .sectionIndex {
    border-color: var(--line-2);
    box-shadow: none;
  }

  #page-blogNew .input,
  #page-blogNew .select,
  #page-blogNew .textarea,
  #page-blogNew .inputAffix,
  #page-blogNew .dropzone,
  #page-blogNew .urlPreview {
    border-color: var(--line-2);
  }

  #page-blogNew .editorToolbar,
  #page-blogNew .editorStatusBar {
    border-color: var(--writer-line);
  }

  #page-blogNew .editorCanvas {
    padding: clamp(16px, 2.2vw, 28px);
    background: var(--surface-3);
  }

  #page-blogNew .composerSection--editor .editor,
  #page-blogNew #blogFormContent {
    min-height: clamp(430px, 55vh, 660px);
    border: 1px solid var(--line-2);
    border-radius: 8px;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ink-1) 7%, transparent);
  }

  #page-blogNew .aiPageLoading {
    background: color-mix(in srgb, var(--canvas) 88%, transparent);
    backdrop-filter: blur(12px) saturate(105%);
  }

  #page-blogNew .aiPageLoading__card {
    width: min(520px, 100%);
    gap: 12px;
    padding: 34px;
    border: 1px solid var(--writer-line-strong);
    border-radius: 22px;
    background: var(--surface-1);
    box-shadow: 0 30px 90px color-mix(in srgb, var(--ink-1) 18%, transparent);
  }

  #page-blogNew .aiPageLoading__card > strong {
    font-size: 1.32rem;
  }

  #page-blogNew .aiLoadingSteps {
    display: grid;
    width: min(390px, 100%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  #page-blogNew .aiLoadingSteps > span {
    display: grid;
    min-width: 0;
    justify-items: center;
    gap: 6px;
    color: var(--ink-3);
    font-size: .58rem;
    text-align: center;
  }

  #page-blogNew .aiLoadingSteps i {
    width: 9px;
    height: 9px;
    border: 2px solid var(--line-2);
    border-radius: 50%;
    background: var(--surface-1);
  }

  #page-blogNew .aiLoadingSteps b {
    font-weight: 620;
  }

  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] .aiLoadingSteps > span {
    color: var(--action);
  }

  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] .aiLoadingSteps i {
    border-color: var(--action);
    background: var(--action);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 12%, transparent);
  }

  #page-blogNew .aiPageLoading__note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--positive-soft);
  }

  #page-blogNew .blogCompletion {
    display: flex;
    min-height: 104px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border: 1px solid var(--writer-line-strong);
    border-radius: 18px;
    background: var(--surface-1);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--ink-1) 7%, transparent);
  }

  #page-blogNew .blogCompletion__copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
  }

  #page-blogNew .blogCompletion__copy > span:last-child {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  #page-blogNew .blogCompletion__copy strong {
    color: var(--ink-1);
    font-size: .9rem;
  }

  #page-blogNew .blogCompletion__copy small {
    color: var(--ink-3);
    font-size: .7rem;
    line-height: 1.45;
  }

  #page-blogNew .blogCompletion__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 12px;
    background: var(--positive-soft);
    color: var(--positive);
    font-size: .8rem;
    font-weight: 800;
  }

  #page-blogNew .blogCompletion__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
  }

  #page-blogNew .blogCompletion__actions .btn {
    min-width: 132px;
    min-height: 46px;
  }
}

@layer responsive {
  @media (max-width: 980px) {
    #page-blogNew .editorWorkspace { grid-template-columns: minmax(0, 1fr); }
    #page-blogNew .aiComposerHero__workspace { grid-template-columns: minmax(0, 1fr) 250px; }
    #page-blogNew .aiWriter__footer { align-items: flex-start; flex-direction: column; }
    #page-blogNew .aiWriter__assurance { justify-content: flex-start; text-align: left; }
  }

  @media (max-width: 700px) {
    #page-blogNew .aiWriter { padding: 17px; border-radius: 18px; }
    #page-blogNew .aiComposerHero__head { align-items: flex-start; }
    #page-blogNew .aiWriter__scope { display: none; }
    #page-blogNew .aiComposerHero__workspace { grid-template-columns: 1fr; }
    #page-blogNew .aiComposerPrompt { padding: 13px; }
    #page-blogNew .aiComposerPrompt .textarea { min-height: 140px; }
    #page-blogNew .aiWriter__action { gap: 12px; }
    #page-blogNew .aiWriter__outputs ul { grid-template-columns: 1fr; }
    #page-blogNew .aiLoadingSteps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
    #page-blogNew .blogCompletion { align-items: stretch; flex-direction: column; padding: 17px; }
    #page-blogNew .blogCompletion__actions { width: 100%; }
    #page-blogNew .blogCompletion__actions .btn { min-width: 0; flex: 1 1 50%; }
  }
}

@layer overrides {
  /* Dashboard alignment repair: every visual has an explicit sizing and centring context. */
  #page-dashboard .infoCard {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
  }

  #page-dashboard .infoCard::before {
    display: none;
  }

  #page-dashboard .infoCard > .infoCard__icon {
    display: grid;
    width: 44px;
    height: 44px;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    place-items: center;
    overflow: visible;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--page-accent) 22%, var(--color-border));
    border-radius: 14px;
    background: color-mix(in srgb, var(--page-accent-soft) 76%, var(--color-surface));
    color: var(--page-accent);
    line-height: 1;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--page-accent) 9%, transparent);
  }

  #page-dashboard .infoCard > .infoCard__icon svg {
    display: block;
    width: 21px;
    height: 21px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #page-dashboard .infoCard > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    line-height: 1.3;
  }

  #page-dashboard .infoCard > span:not(.infoCard__icon) {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
  }

  #page-dashboard .dashboardActivity {
    display: grid;
    min-height: 390px;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #page-dashboard .dashboardActivity__list {
    display: grid;
    min-width: 0;
    min-height: 280px;
    height: 100%;
    align-content: start;
  }

  #page-dashboard .dashboardActivity__list:has(> .dashboardEmpty) {
    padding: 14px;
  }

  #page-dashboard .dashboardActivity__list > .dashboardEmpty {
    width: 100%;
    min-height: 100%;
    height: 100%;
    align-content: center;
    justify-items: center;
    gap: 13px;
    margin: 0;
  }

  #page-dashboard .dashboardEmpty__icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin: 0;
    line-height: 1;
  }

  #page-dashboard .dashboardEmpty__icon svg {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0;
  }

  #page-dashboard .listItem__left {
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-dashboard .listItem > .btn {
    flex: 0 0 auto;
  }

  #page-dashboard .quickAction {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 12px;
  }

  #page-dashboard .quickAction > .quickAction__icon {
    display: inline-grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    align-self: center;
    place-items: center;
    overflow: visible;
    margin: 0;
    line-height: 1;
  }

  #page-dashboard .quickAction > .quickAction__icon svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0;
    transform: none;
  }

  #page-dashboard .quickAction > .quickAction__copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    align-self: center;
    gap: 4px;
    margin: 0;
    color: inherit;
    line-height: 1.25;
  }

  #page-dashboard .quickAction__copy > strong,
  #page-dashboard .quickAction__copy > small {
    display: block;
    margin: 0;
    line-height: 1.3;
  }

  #page-dashboard .quickAction > .quickAction__arrow {
    display: inline-grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    align-self: center;
    place-items: center;
    margin: 0;
    line-height: 1;
  }

  #page-dashboard .quickAction__arrow svg {
    display: block;
    margin: 0;
  }

  .sidebar__footer {
    min-height: 42px;
    align-items: center;
  }

  .sidebar__version {
    align-self: center;
  }

  .sidebar__logout {
    display: inline-flex;
    width: auto;
    min-width: 82px;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    line-height: 1;
  }

  .sidebar__logout svg {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    margin: 0;
  }

  .sidebar__logout span {
    display: block;
    margin: 0;
    line-height: 1;
  }

  @media (max-width: 1180px) {
    #page-dashboard .infoCard {
      grid-template-columns: 40px minmax(0, 1fr);
      column-gap: 12px;
    }

    #page-dashboard .infoCard > .infoCard__icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
    }
  }

  @media (min-width: 1101px) {
    body.sidebar-collapsed .sidebar__logout {
      display: inline-grid;
      width: 40px;
      min-width: 40px;
      padding: 0;
      place-items: center;
    }
  }

  @media (max-width: 640px) {
    #page-dashboard .dashboardActivity {
      min-height: 330px;
    }

    #page-dashboard .dashboardActivity__list {
      min-height: 220px;
    }
  }
}

@layer overrides {
  /* Social media package: teach the workflow before asking for input. */
  .campaignHero {
    flex-wrap: wrap;
  }

  .campaignHero__copy {
    flex: 1 1 640px;
  }

  .campaignGuide {
    display: grid;
    flex: 1 0 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 0 0;
    margin: 2px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--color-secondary) 16%, var(--color-border));
    list-style: none;
  }

  .campaignGuide li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-secondary-soft) 34%, var(--color-surface));
  }

  .campaignGuide i {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 9px;
    background: var(--color-secondary);
    color: var(--color-surface);
    font-size: .68rem;
    font-style: normal;
    font-weight: 780;
    line-height: 1;
  }

  .campaignGuide span {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  .campaignGuide strong {
    color: var(--color-text-primary);
    font-size: .72rem;
    line-height: 1.3;
  }

  .campaignGuide small {
    color: var(--color-text-muted);
    font-size: .62rem;
    line-height: 1.35;
  }

  .campaignBrief__grid .field__hint {
    color: var(--color-text-muted);
    font-size: .68rem;
    line-height: 1.45;
  }

  .campaignActions {
    border-top: 1px solid var(--color-border);
  }

  .campaignUseNotice {
    display: flex;
    min-width: 0;
    max-width: 680px;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--color-info) 22%, var(--color-border));
    border-radius: 12px;
    background: var(--color-info-soft);
  }

  .campaignUseNotice > i {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    place-items: center;
    border-radius: 7px;
    background: var(--color-info);
    color: var(--color-surface);
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
  }

  .campaignUseNotice > span {
    display: grid;
    gap: 2px;
  }

  .campaignUseNotice strong {
    color: var(--color-text-primary);
    font-size: .72rem;
  }

  .campaignUseNotice small {
    color: var(--color-text-secondary);
    font-size: .66rem;
    line-height: 1.45;
  }

  .campaignActions > div {
    align-items: center;
  }

  .campaignOutputs__head {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 12px;
    padding: 3px 2px 2px;
  }

  .campaignOutputs__head > div {
    min-width: 0;
  }

  .campaignOutputs__head .h3 {
    margin: 0;
  }

  .campaignOutputs__head p {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    font-size: .72rem;
    line-height: 1.45;
  }

  @media (max-width: 900px) {
    .campaignGuide {
      grid-template-columns: 1fr;
    }

    .campaignActions {
      align-items: stretch;
      flex-direction: column;
    }

    .campaignUseNotice {
      max-width: none;
    }
  }

  @media (max-width: 740px) {
    .campaignState {
      margin-left: 0;
    }

    .campaignActions > div {
      width: 100%;
    }
  }
}

@layer overrides {
  /* Final colour-only cascade: layout remains owned by the responsive layer. */
  .routePage .pageHead {
    border-color: var(--color-border);
    background:
      radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--page-accent-companion) 8%, transparent), transparent 31%),
      linear-gradient(118deg, color-mix(in srgb, var(--page-accent-soft) 48%, var(--color-surface)), var(--color-surface) 55%);
  }

  .routePage .pageHead::after { border-color: color-mix(in srgb, var(--page-accent) 13%, transparent); }
  .routePage .pageEyebrow,
  .routePage .pageHead__eyebrow,
  .routePage .cardEyebrow { color: var(--page-accent); }

  .routePage .pageEyebrow::before,
  .routePage .pageHead__eyebrow::before {
    background: var(--page-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--page-accent) 12%, transparent);
  }

  .routePage .infoCard::before,
  .routePage .composeTip::before {
    border-color: color-mix(in srgb, var(--page-accent) 18%, var(--color-border));
    background: color-mix(in srgb, var(--page-accent-soft) 72%, var(--color-surface));
    color: var(--page-accent);
  }

  .card,
  .sectionCard,
  .listSurface,
  .previewCard,
  .composerSection,
  .aiQuotaCard {
    border-color: var(--color-border);
    background-color: var(--color-surface);
  }

  .listSurface,
  .composerSection,
  .aiQuotaCard {
    border-top-width: 1px;
    border-top-color: var(--color-border);
  }

  .btn--primary {
    border-color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text-primary));
    background: var(--color-primary);
    color: var(--brand-on-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 23%, transparent);
  }

  .btn--primary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-primary-hover) 82%, var(--color-text-primary));
    background: var(--color-primary-hover);
    color: var(--brand-on-primary);
  }

  .btn--secondary {
    border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  }

  .btn--secondary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 70%, var(--color-surface-muted));
    color: var(--color-primary-hover);
  }

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

  .btn--ghost:hover:not(:disabled) {
    border-color: var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text-primary);
  }

  .btn--danger {
    border-color: color-mix(in srgb, var(--color-danger) 82%, var(--color-text-primary));
    background: var(--color-danger);
    color: #ffffff;
  }

  .table .btn--danger {
    border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
    background: var(--color-danger-soft);
    color: var(--color-danger);
    box-shadow: none;
  }

  .table .btn--danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--color-danger) 48%, var(--color-border));
    background: color-mix(in srgb, var(--color-danger-soft) 78%, var(--color-surface));
    color: var(--color-danger);
  }

  .btn:disabled,
  .iconBtn:disabled {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    opacity: .76;
  }

  .btn:focus-visible,
  .iconBtn:focus-visible,
  .chip:focus-visible,
  .segmented__btn:focus-visible,
  .tabBtn:focus-visible {
    outline-color: var(--color-primary);
    box-shadow: 0 0 0 5px var(--color-focus-ring);
  }

  .nav__item.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 74%, var(--color-surface));
    color: var(--color-primary);
    box-shadow: inset 3px 0 0 var(--color-primary), 0 8px 20px color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  .nav__activeDot {
    background: var(--color-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  .tabBtn.is-active,
  .chip.is-active,
  .segmented__btn.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 34%, var(--color-border));
    background: var(--color-primary-soft);
    color: var(--color-primary);
  }

  .input,
  .select,
  .textarea,
  .search {
    border-color: var(--color-border);
    background: color-mix(in srgb, var(--color-surface-muted) 58%, var(--color-surface));
    color: var(--color-text-primary);
  }

  .input::placeholder,
  .textarea::placeholder,
  .search__input::placeholder {
    color: var(--color-text-muted);
    opacity: .9;
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  .editor:focus,
  .search:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--color-focus-ring);
  }

  .input[aria-invalid="true"],
  .select[aria-invalid="true"],
  .textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger-soft) 48%, var(--color-surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 14%, transparent);
  }

  .formState {
    border-color: color-mix(in srgb, var(--color-danger) 34%, var(--color-border));
    background: var(--color-danger-soft);
    color: var(--color-danger);
  }

  .badge::before {
    --badge-tone: var(--color-text-muted);
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    background: var(--badge-tone);
    color: var(--color-surface);
    font-size: 9px;
    font-weight: 850;
    line-height: 1;
  }

  .badge--success::before { --badge-tone: var(--color-success); content: "✓"; }
  .badge--warning::before { --badge-tone: var(--color-warning); content: "!"; }
  .badge--danger::before,
  .badge--error::before { --badge-tone: var(--color-danger); content: "×"; }
  .badge--info::before { --badge-tone: var(--color-info); content: "i"; }
  .badge--success { border-color: color-mix(in srgb, var(--color-success) 25%, transparent); background: var(--color-success-soft); color: var(--color-success); }
  .badge--warning { border-color: color-mix(in srgb, var(--color-warning) 25%, transparent); background: var(--color-warning-soft); color: var(--color-warning); }
  .badge--danger,
  .badge--error { border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); background: var(--color-danger-soft); color: var(--color-danger); }
  .badge--info { border-color: color-mix(in srgb, var(--color-info) 25%, transparent); background: var(--color-info-soft); color: var(--color-info); }

  .tableWrap { border-color: var(--color-border); background: var(--color-surface); }
  .table thead th {
    border-bottom-color: var(--color-border-strong);
    background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface-muted));
    color: var(--color-text-secondary);
  }
  .table tbody td { border-bottom-color: color-mix(in srgb, var(--color-border) 78%, transparent); }
  .table tbody tr:hover { background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-surface)); }
  .table th.th-actions,
  .table td.th-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--color-surface);
    box-shadow: -12px 0 18px -18px color-mix(in srgb, var(--color-text-primary) 45%, transparent);
  }
  .table thead th.th-actions { z-index: 3; background: color-mix(in srgb, var(--color-primary-soft) 34%, var(--color-surface-muted)); }
  .table tbody tr:hover td.th-actions { background: color-mix(in srgb, var(--color-primary-soft) 48%, var(--color-surface)); }

  #page-dashboard .dashboardWelcome {
    border-color: var(--color-border);
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 31%),
      radial-gradient(circle at 0 100%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 39%),
      var(--color-surface);
  }
  #page-dashboard .dashboardKpis .kpiCard { background: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-muted)); }
  #page-dashboard .dashboardKpis .kpiCard--featured {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: linear-gradient(145deg, var(--color-primary-soft), color-mix(in srgb, var(--color-accent-soft) 38%, var(--color-surface)));
  }
  #page-dashboard .kpiCard__icon,
  #page-dashboard .kpiCard__value { color: var(--color-primary); }
  #page-dashboard .kpiCard:nth-child(3) .kpiCard__icon,
  #page-dashboard .kpiCard:nth-child(3) .kpiCard__value { color: var(--color-accent); }

  .quickAction:first-child {
    border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary-soft) 54%, var(--color-surface));
  }
  .quickAction__icon { background: var(--color-primary-soft); color: var(--color-primary); }
  .quickAction__icon--library { background: var(--color-accent-soft); color: var(--color-accent); }
  .quickAction__icon--preferences { background: var(--color-secondary-soft); color: var(--color-secondary); }

  .aiComposerHero,
  #page-blogNew .aiWriter {
    border-color: color-mix(in srgb, var(--color-secondary) 24%, var(--color-border));
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 33%),
      radial-gradient(circle at 4% 108%, color-mix(in srgb, var(--color-secondary) 13%, transparent), transparent 38%),
      linear-gradient(128deg, color-mix(in srgb, var(--color-secondary-soft) 60%, var(--color-surface)), var(--color-surface) 58%);
  }
  .aiComposerHero__mark,
  .aiPageLoading__orb b { background: linear-gradient(145deg, var(--color-primary), var(--color-secondary)); }
  #page-blogNew .aiWriter__action { background: color-mix(in srgb, var(--color-secondary-soft) 38%, var(--color-surface)); }
  .aiQuotaBar > span { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }

  #page-blogNew .aiLoadingSteps > span { color: var(--color-text-muted); }
  #page-blogNew .aiLoadingSteps i { border-color: var(--color-border-strong); background: var(--color-surface-raised); box-shadow: none; }
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="3"] { color: var(--color-primary); }
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="3"] i {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
  }
  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"],
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"],
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"],
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="4"] { color: var(--color-secondary); }
  #page-blogNew .aiPageLoading[data-ai-phase="1"] [data-ai-loader-step="1"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="2"] [data-ai-loader-step="2"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="3"] [data-ai-loader-step="3"] i,
  #page-blogNew .aiPageLoading[data-ai-phase="4"] [data-ai-loader-step="4"] i {
    border-color: var(--color-secondary);
    background: var(--color-secondary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-secondary) 14%, transparent);
  }

  .campaignHero {
    border-color: color-mix(in srgb, var(--color-secondary) 22%, var(--color-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary-soft) 58%, var(--color-surface)), var(--color-surface));
  }
  .campaignHero__icon,
  .campaignChannel--idea { color: var(--color-secondary); }
}

@layer pages {
  .companyAiSettingsPage {
    display: grid;
    gap: 18px;
  }

  .companySettingsTabs {
    width: fit-content;
    max-width: 100%;
  }

  .companyAiToolbar {
    display: grid;
    grid-template-columns: minmax(210px, 0.65fr) minmax(280px, 1fr) auto;
    gap: 22px;
    align-items: end;
    position: sticky;
    z-index: 12;
    top: calc(var(--topbar-height) + 10px);
    padding: 20px;
    margin-bottom: 18px;
  }

  .companyAiCompanyField[hidden] {
    display: none;
  }

  .companyAiCompletion {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .companyAiCompletion small {
    overflow: hidden;
    color: var(--ink-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .companyAiProgress {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: var(--surface-3);
  }

  .companyAiProgress span {
    display: block;
    width: var(--profile-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--action), var(--accent2));
    transition: width var(--dur-base) var(--ease-out);
  }

  .companyAiSaveState {
    display: grid;
    gap: 8px;
    justify-items: end;
  }

  .companyAiSaveState > span {
    color: var(--ink-3);
    font-size: 0.76rem;
  }

  .companyAiSettingsPage.is-dirty .companyAiSaveState > span {
    color: var(--warning);
  }

  .companyAiForm {
    display: grid;
    gap: 18px;
  }

  .companyAiSection {
    overflow: hidden;
  }

  .companyAiSection__head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  }

  .companyAiSection__head .subtle {
    margin: 4px 0 0;
  }

  .companyAiSection__body {
    padding: 22px;
  }

  .companyAiAssistant {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-soft-source) 38%, var(--surface-1)), var(--surface-1));
  }

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

  .companyAiAssistant__intro p,
  .companyAiAssistantPreview p {
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 0.78rem;
  }

  .companyAiAssistant__icon {
    display: grid;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, var(--line-1));
    border-radius: 12px;
    background: var(--surface-1);
    color: var(--brand-primary);
    box-shadow: var(--shadow-1);
  }

  .companyAiAssistant__actions,
  .companyAiAssistantPreview__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .companyAiAssistant__actions > span {
    color: var(--ink-3);
    font-size: 0.76rem;
  }

  .companyAiAssistantPreview {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--line-1));
    border-radius: var(--radius-2);
    background: var(--surface-1);
  }

  .companyAiAssistantPreview[hidden] {
    display: none;
  }

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

  .companyAiAssistantPreview__list article {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--surface-2);
  }

  .companyAiAssistantPreview__list article strong {
    color: var(--ink-1);
    font-size: 0.74rem;
  }

  .companyAiAssistantPreview__list article span {
    overflow: hidden;
    color: var(--ink-3);
    font-size: 0.72rem;
    text-overflow: ellipsis;
  }

  .companyAiAssistantPreview__warnings {
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line-1));
    border-radius: 10px;
    background: var(--warning-soft);
    color: var(--ink-2);
    font-size: 0.74rem;
  }

  .companyAiAssistantPreview__warnings ul {
    padding-left: 18px;
    margin: 7px 0 0;
  }

  .companyAiSection textarea {
    resize: vertical;
  }

  .companyAiHistory {
    margin-top: 18px;
    padding: 20px;
  }

  .companyAiHistoryList {
    display: grid;
    gap: 10px;
    margin-top: 14px;
  }

  .companyAiHistoryItem {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
  }

  .companyAiHistoryItem > span:last-child {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .companyAiHistoryItem small {
    color: var(--ink-3);
  }

  #companyAiProfileForm[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.55;
  }
}

@layer responsive {
  @media (max-width: 980px) {
    .companyAiToolbar {
      grid-template-columns: 1fr 1fr;
      position: static;
    }

    .companyAiCompletion {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }

  @media (max-width: 640px) {
    .companyAiToolbar {
      grid-template-columns: 1fr;
      align-items: stretch;
      gap: 16px;
    }

    .companyAiCompletion {
      grid-column: auto;
      grid-row: auto;
    }

    .companyAiSaveState {
      justify-items: stretch;
    }

    .companyAiSaveState .btn {
      width: 100%;
    }

    .companyAiSection__head,
    .companyAiSection__body,
    .companyAiAssistant {
      padding: 17px;
    }

    .companyAiAssistant__actions,
    .companyAiAssistantPreview__actions {
      align-items: stretch;
      flex-direction: column;
    }

    .companyAiAssistant__actions .btn,
    .companyAiAssistantPreview__actions .btn {
      width: 100%;
    }

    .companyAiAssistantPreview__list {
      grid-template-columns: 1fr;
    }

    .companyAiCompletion small {
      white-space: normal;
    }
  }
}

@layer utilities {
  .btn--primary {
    border-color: color-mix(in srgb, var(--brand-primary) 78%, #0f172a);
    background-color: var(--brand-primary);
    background-image: none;
    color: var(--brand-on-primary);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-primary) 22%, transparent);
  }

  .btn--primary:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--brand-primary-hover) 82%, #0f172a);
    background-color: var(--brand-primary-hover);
    background-image: none;
    color: var(--brand-on-primary);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary-hover) 26%, transparent);
  }

  .btn--secondary {
    border-color: #cbd5e1;
    background-color: #f8fafc;
    background-image: none;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  }

  .btn--secondary:hover:not(:disabled) {
    border-color: #94a3b8;
    background-color: #e2e8f0;
    background-image: none;
    color: #0f172a;
  }

  .btn--ghost {
    border-color: var(--border-color);
    background: var(--surface-1);
    color: var(--text-primary);
  }

  .btn--ghost:hover:not(:disabled) {
    border-color: var(--line-2);
    background: var(--surface-muted);
    color: var(--text-primary);
  }

  .btn--danger {
    border-color: #b91c1c;
    background-color: #dc2626;
    background-image: none;
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(220, 38, 38, 0.18);
  }

  .btn--danger:hover:not(:disabled) {
    border-color: #991b1b;
    background-color: #b91c1c;
    background-image: none;
    color: #ffffff;
  }

  .btn:disabled,
  .iconBtn:disabled {
    border-color: var(--border-color);
    background: var(--surface-muted);
    color: var(--ink-3);
    box-shadow: none;
    opacity: 0.72;
  }

  .btn[aria-busy="true"]::after {
    border-color: #64748b;
    border-top-color: transparent;
  }

  .btn--primary[aria-busy="true"]::after,
  .btn--danger[aria-busy="true"]::after {
    border-color: #ffffff;
    border-top-color: transparent;
  }

  .btn:focus-visible,
  .iconBtn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-focus) 72%, #ffffff);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-focus) 22%, transparent);
  }

  .iconBtn {
    border-color: var(--border-color);
    background: var(--surface-1);
    color: var(--text-secondary);
  }

  .iconBtn:hover:not(:disabled) {
    border-color: var(--line-2);
    background: var(--surface-muted);
    color: var(--text-primary);
  }

  .nav__item.is-active {
    border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--line-1));
    background: linear-gradient(110deg, color-mix(in srgb, var(--brand-soft-source) 28%, var(--surface-1)), var(--surface-1));
    color: color-mix(in srgb, var(--brand-dark) 35%, var(--ink-1));
    box-shadow: inset 3px 0 0 var(--brand-accent), 0 8px 20px color-mix(in srgb, var(--brand-primary) 8%, transparent);
  }

  .nav__activeDot,
  .uploadProgress__bar::after,
  #coverUploadProgress::-webkit-progress-value,
  #mediaUploadProgress::-webkit-progress-value {
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  }

  .tabBtn.is-active,
  .chip.is-active,
  .segmented__btn.is-active {
    border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line-1));
    background: color-mix(in srgb, var(--brand-soft-source) 24%, var(--surface-1));
    color: color-mix(in srgb, var(--brand-dark) 35%, var(--ink-1));
  }

  .input:focus,
  .select:focus,
  .textarea:focus,
  .editor:focus,
  .search:focus-within {
    border-color: var(--brand-focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-focus) 22%, transparent);
  }

  .listSurface,
  .composerSection,
  .aiQuotaCard {
    border-top: 2px solid color-mix(in srgb, var(--brand-accent) 72%, var(--line-1));
  }

  .badge:not(.badge--danger):not(.badge--error):not(.badge--warning):not(.badge--success):not(.badge--info) {
    border-color: color-mix(in srgb, var(--brand-primary) 24%, transparent);
    background: color-mix(in srgb, var(--brand-soft-source) 24%, var(--surface-1));
    color: color-mix(in srgb, var(--brand-dark) 35%, var(--ink-1));
  }

  .listFooterCta { display: flex; justify-content: center; padding: 18px; }
  .aiQuotaCard { display: grid; gap: 10px; padding: 16px; }
  .aiQuotaBar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
  .aiQuotaBar > span { display: block; width: var(--quota-used, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); }
  .aiCompareList { display: grid; gap: 12px; margin-top: 12px; }
  .aiCompareItem { padding: 14px; border: 1px solid var(--line-1); border-radius: var(--radius-2); background: var(--surface-2); }
  .aiCompareItem__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block: 10px; }
  .aiCompareItem__value { max-height: 190px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; border: 1px solid var(--line-1); border-radius: 10px; background: var(--surface-1); }
  .aiCompareItem__actions { display: flex; justify-content: flex-end; gap: 8px; }
  .aiUsageActions { display: flex; flex-wrap: wrap; gap: 6px; }
  .autosaveStatus { font-size: .76rem; color: var(--ink-2); }
  .brand-logo,
  .companyIdentity__logo img,
  .companyLogoUpload img,
  .loginCardLogo img,
  .loginLogoWatermark img { object-fit: contain; }

  .companiesTableWrap { overflow: hidden; }
  .companiesTable { width: 100%; min-width: 0; table-layout: fixed; }
  .companiesTable th:nth-child(1) { width: 34%; }
  .companiesTable th:nth-child(2),
  .companiesTable th:nth-child(3) { width: 10%; }
  .companiesTable th:nth-child(4) { width: 13%; }
  .companiesTable th:nth-child(5) { width: 18%; }
  .companiesTable th:nth-child(6) { width: 15%; }
  .companiesTable td { overflow-wrap: anywhere; }
  .companyIdentity { display: flex; min-width: 0; align-items: center; gap: 12px; }
  .companyIdentity__logo { display: grid; flex: 0 0 auto; width: 42px; height: 42px; place-items: center; overflow: hidden; padding: 5px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--surface-muted); color: var(--text-secondary); font-weight: 750; }
  .companyIdentity__logo img { display: block; width: 100%; height: 100%; }
  .companyIdentity__copy { display: grid; min-width: 0; gap: 3px; }
  .companyIdentity__copy strong,
  .companyIdentity__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .companyIdentity__copy strong { color: var(--text-primary); font-size: .86rem; }
  .companyIdentity__copy small { color: var(--ink-3); font-size: .7rem; }
  .companiesCards { display: none; }
  .companyListCard { display: grid; gap: 16px; padding: 16px; }
  .companyListCard__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
  .companyListCard__head .companyIdentity { flex: 1 1 auto; }
  .companyListCard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .companyListCard__stats > div { min-width: 0; padding: 10px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-muted); }
  .companyListCard__stats dt { color: var(--ink-3); font-size: .67rem; }
  .companyListCard__stats dd { overflow: hidden; margin: 4px 0 0; color: var(--text-primary); font-size: .8rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }

  .login__right { isolation: isolate; overflow: hidden; }
  .loginLogoWatermark { --logo-x: 50%; --logo-y: 42%; position: absolute; z-index: 0; width: min(82%, 760px); aspect-ratio: 1; pointer-events: none; background: radial-gradient(circle at var(--logo-x) var(--logo-y), color-mix(in srgb, var(--accent) 14%, transparent), transparent 32%); transition: background-position 240ms var(--ease-standard); }
  .loginLogoWatermark img { position: absolute; inset: 10%; width: 80%; height: 80%; opacity: .065; filter: grayscale(1) blur(1px); }
  .loginCard { position: relative; z-index: 1; }
  .loginCardLogo { display: grid; width: 76px; height: 76px; place-items: center; margin-bottom: 5px; padding: 10px; border: 1px solid var(--border-color); border-radius: 22px; background: var(--surface-1); box-shadow: var(--shadow-2); transition: filter 240ms var(--ease-standard), transform 240ms var(--ease-emphasized), box-shadow 240ms var(--ease-standard); }
  .loginCardLogo img { width: 100%; height: 100%; }
  .loginCardLogo:hover { filter: brightness(1.06); transform: scale(1.02); box-shadow: var(--shadow-2), 0 0 28px color-mix(in srgb, var(--accent) 12%, transparent); }
  .login__brandMark { width: 64px; height: 64px; border-radius: 19px; }
  .login__brandMark .brand-logo { width: 48px; height: 48px; }
  .formState { display: none; width: 100%; max-width: 100%; min-width: 0; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid #fca5a5; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: .8rem; line-height: 1.42; overflow-wrap: anywhere; }
  .formState[data-state="error"]:not([hidden]) { display: flex; }
  .formState[data-state="error"]::before { flex: 0 0 auto; content: "!"; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 800; }

  .blogComposerPage .composerSection--editor { border-color: color-mix(in srgb, var(--brand-focus) 28%, var(--border-color)); box-shadow: 0 18px 44px color-mix(in srgb, var(--brand-focus) 10%, transparent), var(--shadow-1); }
  .blogComposerPage .composerSection--editor .composerSection__head { background: linear-gradient(110deg, color-mix(in srgb, var(--brand-primary-soft) 68%, var(--surface-1)), var(--surface-1)); }
  .blogComposerPage #blogFormContent { min-height: clamp(560px, 64vh, 820px); font-size: 1.03rem; }
  .visualNotice { margin: 10px 18px 0; padding: 9px 11px; border: 1px solid color-mix(in srgb, #d97706 28%, var(--border-color)); border-radius: 10px; background: color-mix(in srgb, #fff7ed 78%, var(--surface-1)); color: color-mix(in srgb, #9a3412 80%, var(--text-primary)); font-size: .76rem; line-height: 1.4; }
  .visualNotice[hidden] { display: none; }
  .modal__foot--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-ai-editable][contenteditable="true"] { border-color: var(--brand-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-focus) 18%, transparent); outline: none; }

  @media (min-width: 801px) {
    .authView { height: 100dvh; min-height: 0; overflow: hidden; }
    .authView .login { height: 100dvh; min-height: 0; overflow: hidden; }
    .authView .login__left,
    .authView .login__right { height: 100%; min-height: 0; }
    .authView .login__left { padding: clamp(24px, 3.4vh, 52px) clamp(30px, 4vw, 64px); }
    .authView .login__right { padding: clamp(20px, 3.6vh, 52px); }
    .authView .loginHero__content { gap: clamp(16px, 2.6vh, 30px); margin-block: clamp(18px, 3vh, 38px); }
  }
  @media (min-width: 801px) and (max-height: 860px) {
    .authView .loginHero__copy h2 { font-size: clamp(2.5rem, 4.2vw, 4.3rem); }
    .authView .loginHero__proof li { min-height: 66px; padding: 10px; }
    .authView .loginProductPreview__shell { min-height: 190px; }
    .authView .loginCard__head { gap: 7px; padding-top: 20px; }
    .authView .loginCard .form { padding-top: 18px; padding-bottom: 22px; }
    .authView .loginCardLogo { width: 62px; height: 62px; border-radius: 18px; }
  }
  @media (min-width: 801px) and (max-height: 720px) {
    .authView .loginHero__proof,
    .authView .loginProductPreview,
    .authView .login__foot { display: none; }
    .authView .loginCard__assurance { display: none; }
    .authView .loginHero__content { margin-block: auto; }
  }

  html[data-theme="dark"] .btn--secondary { border-color: #475569; background: #1e293b; color: #f8fafc; }
  html[data-theme="dark"] .btn--secondary:hover:not(:disabled) { border-color: #64748b; background: #334155; color: #ffffff; }
  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] .btn--secondary { border-color: #475569; background: #1e293b; color: #f8fafc; }
    html[data-theme="system"] .btn--secondary:hover:not(:disabled) { border-color: #64748b; background: #334155; color: #ffffff; }
  }
  @media (max-width: 760px) {
    .companiesTableWrap { display: none; }
    .companiesCards { display: grid; gap: 12px; padding: 12px; }
    .loginLogoWatermark { width: 118vw; opacity: .45; }
    .loginCardLogo { width: 66px; height: 66px; border-radius: 19px; }
  }
  @media (max-width: 800px) {
    .authView { height: auto; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
    .authView .login { height: auto; min-height: 100dvh; overflow: visible; }
    .authView .login__right { overflow: visible; }
    .blogComposerPage #blogFormContent { min-height: 430px; }
    .modal__foot--three { grid-template-columns: 1fr; }
  }
  @media (max-width: 420px) {
    .companyListCard__head { align-items: flex-start; }
    .companyListCard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .companyListCard__stats > div:last-child { grid-column: 1 / -1; }
  }
  @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .loginLogoWatermark { --logo-x: 50%; --logo-y: 42%; }
    .loginCardLogo { transition: none; }
    .loginCardLogo:hover { filter: none; transform: none; box-shadow: var(--shadow-2); }
  }
  @media (max-width: 720px) { .aiCompareItem__columns { grid-template-columns: 1fr; } }
}

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

  html {
    min-width: 320px;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  body {
    min-height: 100%;
    margin: 0;
  }

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

  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  button {
    border: 0;
  }

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

  img,
  svg {
    display: block;
  }

  img {
    max-width: 100%;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  [hidden] {
    display: none !important;
  }
}

@layer base {
  html {
    background: var(--canvas);
  }

  body {
    overflow-x: hidden;
    background: var(--canvas);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.006em;
    transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
  }

  ::selection {
    background: color-mix(in srgb, var(--action) 22%, transparent);
  }

  :focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }

  .app,
  .viewHost,
  .routeContainer {
    min-width: 0;
  }

  .app {
    min-height: 100dvh;
    position: relative;
  }

  .h1,
  .h2,
  .h3 {
    margin: 0;
    color: var(--ink-1);
    font-family: var(--font-display);
    text-wrap: balance;
  }

  .h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 680;
    line-height: 1.04;
    letter-spacing: -0.048em;
  }

  .h2 {
    font-size: clamp(1.65rem, 2.3vw, 2.15rem);
    font-weight: 680;
    line-height: 1.12;
    letter-spacing: -0.04em;
  }

  .h3 {
    font-size: 1rem;
    font-weight: 660;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  .subtle,
  .muted {
    color: var(--ink-2);
  }

  .subtle {
    margin: 0;
    line-height: 1.55;
  }

  .hint,
  .field__hint {
    color: var(--ink-3);
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .eyebrow,
  .pageHead__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: color-mix(in srgb, var(--action) 82%, var(--ink-1));
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .eyebrow::before,
  .pageHead__eyebrow::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
    content: "";
  }

  .link {
    color: var(--action);
    font-size: 0.875rem;
    font-weight: 620;
    transition: color var(--dur-fast), opacity var(--dur-fast);
  }

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

  .divider {
    height: 1px;
    margin: var(--space-6) 0;
    background: var(--line-1);
  }
}

@layer components {
  /* Ambient canvas */
  .bg-ambient {
    position: fixed;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .ambient-orb {
    position: absolute;
    width: min(44vw, 720px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(2px);
    transform: translate3d(0, 0, 0);
  }

  .ambient-orb--one {
    top: -30%;
    left: -12%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent), transparent 68%);
  }

  .ambient-orb--two {
    top: -26%;
    right: -14%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 42%, transparent), transparent 68%);
  }

  .ambient-grid {
    position: absolute;
    inset: 0;
    opacity: 0.36;
    background-image: linear-gradient(color-mix(in srgb, var(--line-1) 42%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line-1) 42%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent 42%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.38), transparent 42%);
  }

  /* Layout helpers */
  .row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .row--between {
    justify-content: space-between;
  }

  .row--tight {
    gap: var(--space-2);
  }

  .grid {
    display: grid;
    gap: var(--space-5);
  }

  .grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--kpi {
    grid-template-columns: repeat(5, minmax(150px, 1fr));
  }

  .formGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .field--full {
    grid-column: 1 / -1;
  }

  /* Surfaces */
  .card,
  .sectionCard,
  .listSurface,
  .previewCard {
    min-width: 0;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-4);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .card {
    overflow: hidden;
  }

  .card:not(:has(> .cardHead)):not(.kpiCard):not(.blogCard):not(.emptyState),
  .sectionCard__body {
    padding: clamp(20px, 2vw, 28px);
  }

  .cardHead,
  .surfaceHeader,
  .sectionCard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: var(--space-4);
    padding: 18px 22px;
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 72%, transparent), transparent);
  }

  .cardHead--inner {
    padding: 13px 16px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3) var(--radius-3) 0 0;
  }

  .surfaceHeader__title,
  .sectionCard__head > div {
    min-width: 0;
  }

  .surfaceHeader__title strong,
  .formSection__head strong {
    display: block;
    color: var(--ink-1);
    font-size: 0.96rem;
    font-weight: 670;
    letter-spacing: -0.02em;
  }

  .surfaceHeader__title span,
  .surfaceHeader__meta,
  .formSection__head span {
    color: var(--ink-3);
    font-size: 0.8rem;
  }

  .formSection {
    display: grid;
    gap: var(--space-5);
  }

  .formSection + .formSection {
    margin-top: var(--space-7);
    padding-top: var(--space-7);
    border-top: 1px solid var(--line-1);
  }

  .formSection__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }

  /* Buttons */
  .btn,
  .iconBtn,
  .chip,
  .pill,
  .segmented__btn,
  .tabBtn,
  .menu__item,
  .profileBtn {
    cursor: pointer;
    user-select: none;
    transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-base), opacity var(--dur-fast);
  }

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-md);
    gap: 9px;
    overflow: hidden;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
  }

  .btn svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
  }

  .btn:focus-visible,
  .iconBtn:focus-visible,
  .chip:focus-visible,
  .pill:focus-visible,
  .segmented__btn:focus-visible,
  .tabBtn:focus-visible,
  .profileBtn:focus-visible,
  .menu__item:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }

  .btn:disabled,
  .iconBtn:disabled,
  .chip:disabled {
    cursor: not-allowed;
    opacity: 0.48;
    transform: none;
  }

  .btn[aria-busy="true"] {
    cursor: wait;
    color: transparent !important;
  }

  .btn[aria-busy="true"]::after {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--on-action);
    content: "";
    animation: spin 0.75s linear infinite;
  }

  .btn--primary {
    border-color: color-mix(in srgb, var(--action) 78%, #000);
    background: linear-gradient(180deg, color-mix(in srgb, var(--action) 88%, #fff), var(--action));
    color: var(--on-action);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--shadow-action);
  }

  .btn--primary:hover:not(:disabled) {
    border-color: var(--action-hover);
    background: linear-gradient(180deg, color-mix(in srgb, var(--action-hover) 86%, #fff), var(--action-hover));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 30px rgba(8, 119, 230, 0.28);
  }

  .btn--ghost {
    border-color: var(--line-1);
    background: var(--surface-1);
    color: var(--ink-2);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.035);
  }

  .btn--ghost:hover:not(:disabled) {
    border-color: var(--line-2);
    background: var(--surface-2);
    color: var(--ink-1);
  }

  .btn--danger {
    border-color: color-mix(in srgb, var(--critical) 20%, transparent);
    background: var(--critical-soft);
    color: var(--critical);
  }

  .btn--danger:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--critical) 34%, transparent);
    background: color-mix(in srgb, var(--critical) 15%, var(--surface-1));
  }

  .btn--full {
    width: 100%;
  }

  .btn--sm {
    min-height: 38px;
    padding-inline: 14px;
    font-size: 0.8125rem;
  }

  .btn--xs {
    min-height: 32px;
    padding-inline: 11px;
    border-radius: 10px;
    font-size: 0.75rem;
  }

  .btn--file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .btn__shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.18) 46%, transparent 62%);
    transform: translateX(-130%);
    transition: transform 650ms var(--ease-emphasized);
  }

  .btn:hover .btn__shine {
    transform: translateX(130%);
  }

  .iconBtn {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    width: var(--control-md);
    height: var(--control-md);
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-2);
    background: transparent;
    color: var(--ink-2);
  }

  .iconBtn:hover:not(:disabled) {
    border-color: var(--line-1);
    background: var(--surface-2);
    color: var(--ink-1);
  }

  .iconBtn:active:not(:disabled) {
    transform: scale(0.94);
  }

  .iconBtn--soft {
    border-color: var(--line-1);
    background: color-mix(in srgb, var(--surface-1) 84%, transparent);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.035);
  }

  .iconBtn svg,
  .iconBtn .icon {
    width: 19px;
    height: 19px;
  }

  .iconBtn svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  /* Form controls */
  .form,
  .field {
    display: grid;
  }

  .form {
    gap: var(--space-5);
  }

  .field {
    min-width: 0;
    align-content: start;
    gap: 8px;
  }

  .field__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-2);
    font-size: 0.8125rem;
    font-weight: 630;
    line-height: 1.35;
  }

  .input,
  .select,
  .textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
    color: var(--ink-1);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
    outline: none;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-base);
  }

  html[data-theme="dark"] .input,
  html[data-theme="dark"] .select,
  html[data-theme="dark"] .textarea {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  }

  @media (prefers-color-scheme: dark) {
    html[data-theme="system"] .input,
    html[data-theme="system"] .select,
    html[data-theme="system"] .textarea {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    }
  }

  .input,
  .select {
    min-height: var(--control-lg);
    padding: 0 14px;
  }

  .select {
    cursor: pointer;
  }

  .textarea {
    min-height: 104px;
    padding: 13px 14px;
    line-height: 1.55;
    resize: vertical;
  }

  .input::placeholder,
  .textarea::placeholder,
  .search__input::placeholder {
    color: color-mix(in srgb, var(--ink-3) 78%, transparent);
  }

  .input:hover:not(:disabled):not(:read-only),
  .select:hover:not(:disabled),
  .textarea:hover:not(:disabled):not(:read-only) {
    border-color: var(--line-2);
  }

  .input:focus,
  .select:focus,
  .textarea:focus {
    border-color: var(--action);
    background: var(--surface-1);
    box-shadow: 0 0 0 4px var(--ring), 0 8px 22px color-mix(in srgb, var(--action) 8%, transparent);
  }

  .input:read-only,
  .input--readonly,
  .select:disabled,
  .textarea:read-only {
    cursor: default;
    border-color: color-mix(in srgb, var(--line-1) 76%, transparent);
    background: color-mix(in srgb, var(--surface-3) 74%, transparent);
    color: var(--ink-3);
    box-shadow: none;
  }

  .input:disabled,
  .select:disabled,
  .textarea:disabled {
    cursor: not-allowed;
    opacity: 0.62;
  }

  .input[aria-invalid="true"],
  .textarea[aria-invalid="true"],
  .select[aria-invalid="true"] {
    border-color: var(--critical);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--critical) 13%, transparent);
  }

  .inputGroup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .inputGroup > .input {
    flex: 1 1 auto;
  }

  .inputGroup > .iconBtn {
    width: var(--control-lg);
    height: var(--control-lg);
  }

  .passwordInputGroup {
    width: 100%;
  }

  .passwordVisibility svg,
  #togglePassword svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .passwordVisibility [data-password-eye="closed"],
  #togglePassword [data-password-eye="closed"] {
    display: none;
  }

  .passwordVisibility[aria-pressed="true"] [data-password-eye="open"],
  #togglePassword[aria-pressed="true"] [data-password-eye="open"] {
    display: none;
  }

  .passwordVisibility[aria-pressed="true"] [data-password-eye="closed"],
  #togglePassword[aria-pressed="true"] [data-password-eye="closed"] {
    display: block;
  }

  /* Toggle, segmented, pills, tabs */
  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }

  .toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .toggle__ui {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-full);
    background: var(--surface-3);
    transition: background-color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base);
  }

  .toggle__ui::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(31, 41, 55, 0.2);
    content: "";
    transition: transform var(--dur-base) var(--ease-emphasized);
  }

  .toggle input:checked + .toggle__ui {
    border-color: var(--action);
    background: var(--action);
  }

  .toggle input:checked + .toggle__ui::after {
    transform: translateX(18px);
  }

  .toggle input:focus-visible + .toggle__ui {
    box-shadow: 0 0 0 4px var(--ring);
  }

  .toggle__text {
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 560;
  }

  .toggle--inline {
    min-height: var(--control-lg);
    padding: 0 14px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
  }

  .segmented,
  .pill-group,
  .filters,
  .tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
  }

  .segmented__btn,
  .pill,
  .chip,
  .tabBtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-3);
    font-size: 0.76rem;
    font-weight: 640;
    line-height: 1;
    white-space: nowrap;
  }

  .segmented__btn,
  .pill {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 9px;
  }

  .segmented__btn:hover,
  .pill:hover,
  .chip:hover,
  .tabBtn:hover {
    color: var(--ink-1);
  }

  .segmented__btn.is-active,
  .pill.is-active,
  .chip.is-active,
  .tabBtn.is-active {
    border-color: var(--line-1);
    background: var(--surface-1);
    color: var(--ink-1);
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08);
  }

  .segmented__btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .themeSwitch .segmented__btn {
    gap: 6px;
  }

  .pill-group {
    flex-wrap: wrap;
    border: 0;
    background: transparent;
  }

  .pill-sep {
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--line-1);
  }

  .chip {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 10px;
  }

  .chip--ghost {
    min-width: 34px;
    padding-inline: 9px;
    border-color: var(--line-1);
    background: var(--surface-1);
  }

  .tabs {
    width: fit-content;
    border-radius: var(--radius-3);
  }

  .tabBtn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-2);
    font-size: 0.84rem;
  }

  /* Badges */
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
  }

  .badge::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
  }

  .badge--success {
    border-color: color-mix(in srgb, var(--positive) 18%, transparent);
    background: var(--positive-soft);
    color: var(--positive);
  }

  .badge--warning {
    border-color: color-mix(in srgb, var(--warning) 18%, transparent);
    background: var(--warning-soft);
    color: var(--warning);
  }

  .badge--danger,
  .badge--error {
    border-color: color-mix(in srgb, var(--critical) 18%, transparent);
    background: var(--critical-soft);
    color: var(--critical);
  }

  .badge--info {
    border-color: color-mix(in srgb, var(--info) 18%, transparent);
    background: var(--info-soft);
    color: var(--info);
  }

  /* Search */
  .search {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--control-md);
    gap: 10px;
    padding: 0 10px 0 13px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
    transition: width var(--dur-slow) var(--ease-emphasized), border-color var(--dur-fast), box-shadow var(--dur-base), background-color var(--dur-base);
  }

  .search:focus-within {
    border-color: var(--action);
    background: var(--surface-1);
    box-shadow: 0 0 0 4px var(--ring), var(--shadow-1);
  }

  .search__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ink-3);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .search__input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink-1);
    font-size: 0.875rem;
    outline: none;
  }

  .search__shortcut {
    flex: 0 0 auto;
    padding: 3px 6px;
    border: 1px solid var(--line-1);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--ink-3);
    font-family: inherit;
    font-size: 0.68rem;
    line-height: 1;
    box-shadow: 0 1px 1px rgba(31, 41, 55, 0.04);
  }

  .search--global {
    width: clamp(230px, 27vw, 430px);
  }

  .search--compact {
    width: min(100%, 290px);
  }

  /* Tables */
  .tableWrap {
    position: relative;
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-4);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }

  .card > .tableWrap {
    border: 0;
    border-radius: inherit;
    box-shadow: none;
  }

  .table {
    width: 100%;
    min-width: 760px;
    color: var(--ink-2);
    font-size: 0.845rem;
    text-align: left;
  }

  .table--blogs {
    min-width: 1060px;
  }

  .table--dense {
    min-width: 1160px;
    font-size: 0.79rem;
  }

  .table thead th {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-1);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.68rem;
    font-weight: 690;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .table tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid color-mix(in srgb, var(--line-1) 78%, transparent);
    vertical-align: middle;
  }

  .table tbody tr:last-child td {
    border-bottom: 0;
  }

  .table tbody tr {
    transition: background-color var(--dur-fast);
  }

  .table tbody tr:hover {
    background: color-mix(in srgb, var(--action) 3.5%, var(--surface-1));
  }

  .th-actions {
    text-align: right;
  }

  .table--blogs .th-actions {
    width: 350px;
    min-width: 350px;
  }

  .cell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
  }

  .table--blogs .cell-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }

  .table--blogs .cell-actions .btn {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    white-space: nowrap;
  }

  .table--blogs .cell-actions--published [data-blog-action="edit"],
  .table--blogs .cell-actions--published [data-blog-action="campaign"],
  .table--blogs .cell-actions--published [data-blog-action="view"],
  .table--blogs .cell-actions--deleted .btn {
    grid-column: span 2;
  }

  .table--blogs .cell-actions--published [data-blog-action="draft"],
  .table--blogs .cell-actions--published [data-blog-action="delete"],
  .table--blogs .cell-actions--draft .btn {
    grid-column: span 3;
  }

  .thumb {
    display: block;
    max-width: 100%;
    width: 52px;
    height: 40px;
    border: 1px solid var(--line-1);
    border-radius: 9px;
    object-fit: cover;
    background: var(--surface-3);
  }

  .blogCell {
    display: grid;
    min-width: 210px;
    gap: 3px;
  }

  .blogTitle {
    overflow: hidden;
    color: var(--ink-1);
    font-weight: 640;
    letter-spacing: -0.014em;
    text-overflow: ellipsis;
  }

  .blogSlug {
    overflow: hidden;
    color: var(--ink-3);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Empty and loading states */
  .emptyState,
  .mediaEmpty {
    display: grid;
    min-height: 156px;
    place-items: center;
    padding: var(--space-7);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-3);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 4%, var(--surface-2)), var(--surface-2));
    color: var(--ink-3);
    font-size: 0.86rem;
    line-height: 1.55;
    text-align: center;
  }

  .emptyState::before,
  .mediaEmpty::before {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    margin-bottom: 8px;
    border: 1px solid var(--line-1);
    border-radius: 13px;
    background: var(--surface-1);
    color: var(--ink-3);
    content: "◇";
    box-shadow: var(--shadow-1);
  }

  .table td[colspan] .emptyState {
    min-height: 180px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .skeletonWrap {
    display: grid;
    gap: 10px;
  }

  .skeletonRow {
    height: 68px;
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-2);
  }

  .skeletonRow::after {
    display: block;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-1) 80%, transparent), transparent);
    content: "";
    animation: shimmer 1.25s infinite;
  }

  /* Dropdown */
  .dropdown {
    position: relative;
  }

  .profileBtn {
    display: flex;
    align-items: center;
    min-height: 48px;
    gap: 10px;
    padding: 4px 8px 4px 5px;
    border: 1px solid var(--line-1);
    border-radius: 14px;
    background: var(--surface-1);
    text-align: left;
  }

  .profileBtn:hover {
    border-color: var(--line-2);
    box-shadow: var(--shadow-1);
  }

  .avatar {
    display: grid;
    flex: 0 0 auto;
    width: 37px;
    height: 37px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line-1));
    border-radius: 12px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 15%, var(--surface-1)), color-mix(in srgb, var(--accent2) 12%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 80%, var(--ink-1));
    font-size: 0.86rem;
    font-weight: 720;
  }

  .profileBtn__meta {
    display: grid;
    min-width: 0;
    line-height: 1.2;
  }

  .profileBtn__name {
    max-width: 128px;
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.82rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .profileBtn__role {
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  .profileBtn__chev {
    width: 16px;
    height: 16px;
    color: var(--ink-3);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform var(--dur-base);
  }

  .dropdown.is-open .profileBtn__chev {
    transform: rotate(180deg);
  }

  .menu {
    position: absolute;
    z-index: var(--z-popover);
    top: calc(100% + 10px);
    right: 0;
    width: 230px;
    padding: 7px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-glass);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px) scale(0.98);
    transform-origin: top right;
    backdrop-filter: blur(20px) saturate(1.2);
    transition: opacity var(--dur-base), visibility var(--dur-base), transform var(--dur-base) var(--ease-emphasized);
  }

  .dropdown.is-open .menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .menu__head {
    display: grid;
    gap: 2px;
    padding: 8px 10px 10px;
  }

  .menu__eyebrow {
    color: var(--ink-1);
    font-size: 0.77rem;
    font-weight: 660;
  }

  .menu__caption {
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .menu__item {
    display: flex;
    width: 100%;
    min-height: 39px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-2);
    font-size: 0.82rem;
    font-weight: 570;
    text-align: left;
  }

  .menu__item svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .menu__item:hover,
  .menu__item:focus-visible {
    background: var(--surface-3);
    color: var(--ink-1);
  }

  .menu__item--danger {
    color: var(--critical);
  }

  .menu__sep {
    height: 1px;
    margin: 5px 3px;
    background: var(--line-1);
  }

  /* Modal */
  .modal {
    position: fixed;
    z-index: var(--z-modal);
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
  }

  .modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 15, 0.58);
    backdrop-filter: blur(10px);
    animation: fadeIn var(--dur-base) both;
  }

  .modal__panel {
    position: relative;
    width: min(100%, 460px);
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-5);
    background: var(--surface-1);
    box-shadow: var(--shadow-3);
    animation: modalIn var(--dur-slow) var(--ease-emphasized) both;
  }

  .modal__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 24px 24px 0;
    border: 1px solid color-mix(in srgb, var(--critical) 18%, transparent);
    border-radius: 15px;
    background: var(--critical-soft);
    color: var(--critical);
  }

  .modal__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 18px 24px 8px;
  }

  .modal__head .h3 {
    font-size: 1.2rem;
  }

  .modal__body {
    padding: 0 24px 22px;
  }

  .modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--line-1);
    background: var(--surface-2);
  }

  /* Toasts */
  .toasts {
    position: fixed;
    z-index: var(--z-toast);
    top: 18px;
    right: 18px;
    display: grid;
    width: min(calc(100vw - 36px), 390px);
    gap: 10px;
    pointer-events: none;
  }

  .toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
    gap: 14px;
    overflow: hidden;
    padding: 15px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-glass);
    box-shadow: var(--shadow-3);
    pointer-events: auto;
    backdrop-filter: blur(20px) saturate(1.2);
    animation: toastIn var(--dur-slow) var(--ease-emphasized) both;
  }

  .toast::before {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--info);
    box-shadow: 0 0 0 5px var(--info-soft);
    content: "";
  }

  .toast--success::before {
    background: var(--positive);
    box-shadow: 0 0 0 5px var(--positive-soft);
  }

  .toast--error::before,
  .toast--danger::before {
    background: var(--critical);
    box-shadow: 0 0 0 5px var(--critical-soft);
  }

  .toast--warning::before {
    background: var(--warning);
    box-shadow: 0 0 0 5px var(--warning-soft);
  }

  .toast__left {
    flex: 1 1 auto;
    min-width: 0;
  }

  .toast__title {
    color: var(--ink-1);
    font-size: 0.87rem;
    font-weight: 670;
  }

  .toast__desc {
    margin-top: 3px;
    color: var(--ink-2);
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .toast .iconBtn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
}

@layer shell {
  .shell {
    min-height: 100dvh;
  }

  .sidebar {
    position: fixed;
    z-index: var(--z-sidebar);
    top: 12px;
    bottom: 12px;
    left: 12px;
    display: flex;
    width: var(--sidebar-width);
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: 22px;
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(22px) saturate(1.12);
    transition: width var(--dur-slow) var(--ease-emphasized), transform var(--dur-slow) var(--ease-emphasized);
  }

  .sidebar__top {
    flex: 0 0 auto;
    padding: 12px;
  }

  .sidebar__brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    padding: 7px;
    border-radius: 15px;
  }

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

  .brandMark {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line-1));
    border-radius: 13px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface-1)), color-mix(in srgb, var(--accent2) 7%, var(--surface-2)));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .brand-logo {
    width: 54px;
    height: 54px;
    object-fit: contain;
  }

  .brand-logo--sm {
    width: 30px;
    height: 30px;
  }

  .sidebar__brandText {
    display: grid;
    min-width: 0;
    line-height: 1.18;
  }

  .sidebar__brandName {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.86rem;
    font-weight: 690;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar__brandTag {
    overflow: hidden;
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    padding: 8px 12px 18px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav__group {
    display: grid;
    gap: 4px;
  }

  .nav__section {
    display: block;
    padding: 0 10px 7px;
    color: var(--ink-3);
    font-size: 0.62rem;
    font-weight: 680;
    letter-spacing: 0.105em;
    text-transform: uppercase;
  }

  .nav__item {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 11px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: var(--ink-2);
    font-size: 0.84rem;
    font-weight: 590;
    transition: color var(--dur-fast), background-color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-base);
  }

  .nav__item:hover {
    background: var(--surface-2);
    color: var(--ink-1);
    transform: translateX(2px);
  }

  .nav__item.is-active {
    border-color: color-mix(in srgb, var(--accent) 13%, var(--line-1));
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 11%, var(--surface-1)), color-mix(in srgb, var(--accent2) 5%, var(--surface-1)));
    color: color-mix(in srgb, var(--accent) 75%, var(--ink-1));
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent), 0 8px 20px color-mix(in srgb, var(--accent) 8%, transparent);
  }

  .nav__icon {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
  }

  .nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__activeDot {
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 11%, transparent);
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-emphasized);
  }

  .nav__item.is-active .nav__activeDot {
    opacity: 1;
    transform: scale(1);
  }

  .sidebar__bottom {
    flex: 0 0 auto;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid var(--line-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 20%, transparent), var(--surface-2));
  }

  .workspaceCard {
    padding: 12px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-1);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.04);
  }

  .workspaceCard__top {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
  }

  .workspaceCard__icon {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 13%, var(--surface-2)), color-mix(in srgb, var(--accent2) 8%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 75%, var(--ink-1));
  }

  .workspaceCard__icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  .workspaceCard__copy {
    display: grid;
    min-width: 0;
    flex: 1;
    line-height: 1.2;
  }

  .workspaceCard__eyebrow,
  .workspaceCard__copy small {
    color: var(--ink-3);
    font-size: 0.62rem;
  }

  .workspaceCard__copy strong {
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-1);
    font-size: 0.76rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspaceCard__top .badge {
    min-height: 22px;
    padding-inline: 7px;
    font-size: 0.62rem;
  }

  .workspaceCard__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-top: 10px;
  }

  .workspaceCard__stats > span {
    display: grid;
    gap: 2px;
    padding: 8px;
    border-radius: 10px;
    background: var(--surface-2);
  }

  .workspaceCard__stats small {
    overflow: hidden;
    color: var(--ink-3);
    font-size: 0.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspaceCard__stats strong {
    color: var(--ink-1);
    font-size: 0.75rem;
    font-weight: 670;
  }

  .sidebar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sidebar__version {
    display: grid;
    min-width: 0;
    line-height: 1.2;
  }

  .sidebar__version strong {
    color: var(--ink-2);
    font-size: 0.68rem;
    font-weight: 630;
  }

  .sidebar__version small {
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.6rem;
  }

  .sidebar__logout {
    width: auto;
    min-width: 38px;
    height: 38px;
    gap: 7px;
    padding: 0 10px;
    color: var(--critical);
    font-size: 0.72rem;
    font-weight: 620;
  }

  .sidebar__logout svg {
    width: 16px;
    height: 16px;
  }

  .main {
    min-width: 0;
    min-height: 100dvh;
    margin-left: calc(var(--sidebar-width) + 24px);
    transition: margin-left var(--dur-slow) var(--ease-emphasized);
  }

  .topbar {
    position: sticky;
    z-index: var(--z-topbar);
    top: 12px;
    display: flex;
    width: calc(100% - 24px);
    height: var(--topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 12px;
    padding: 9px 10px;
    border: 1px solid var(--line-1);
    border-radius: 18px;
    background: var(--surface-glass);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(22px) saturate(1.18);
  }

  .topbar__left,
  .topbar__right {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
  }

  .topbar__left {
    flex: 1 1 auto;
  }

  .topbar__right {
    flex: 0 0 auto;
  }

  .topbar__mobileBrand {
    display: none;
    align-items: center;
    gap: 8px;
    color: var(--ink-1);
    font-size: 0.85rem;
    font-weight: 670;
  }

  .topbar__mobileBrand img {
    width: 28px;
    height: 28px;
    object-fit: contain;
  }

  .systemPill {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.69rem;
    font-weight: 620;
  }

  .systemPill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 4px var(--positive-soft);
  }

  .notifyBtn .dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 6px;
    height: 6px;
    border: 2px solid var(--surface-1);
    border-radius: 50%;
    background: var(--critical);
    box-sizing: content-box;
  }

  .content {
    width: min(100%, var(--content-max));
    margin: 0 auto;
    padding: 18px clamp(18px, 2.2vw, 34px) 44px;
  }

  .routeContainer {
    transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-emphasized), filter var(--dur-base);
  }

  .routeContainer.is-loading {
    opacity: 0.5;
    filter: blur(2px);
    transform: translateY(5px);
  }

  .routeContainer.is-ready {
    opacity: 1;
    filter: none;
    transform: none;
  }

  .sidebarScrim {
    display: none;
  }

  @media (min-width: 1101px) {
    body.sidebar-collapsed .sidebar {
      width: var(--sidebar-collapsed);
    }

    body.sidebar-collapsed .main {
      margin-left: calc(var(--sidebar-collapsed) + 24px);
    }

    body.sidebar-collapsed .sidebar__brand {
      justify-content: center;
      padding-inline: 0;
    }

    body.sidebar-collapsed .sidebar__brandText,
    body.sidebar-collapsed .nav__section,
    body.sidebar-collapsed .nav__label,
    body.sidebar-collapsed .nav__activeDot,
    body.sidebar-collapsed .workspaceCard,
    body.sidebar-collapsed .sidebar__version,
    body.sidebar-collapsed .sidebar__logout span {
      display: none;
    }

    body.sidebar-collapsed .nav__item {
      justify-content: center;
      padding-inline: 0;
    }

    body.sidebar-collapsed .nav__item:hover {
      transform: none;
    }

    body.sidebar-collapsed .sidebar__footer {
      justify-content: center;
    }

    body.sidebar-collapsed .sidebar__logout {
      width: 38px;
      padding: 0;
    }
  }
}

@layer pages {
  /* Shared page composition */
  .page {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
  }

  .routePage.is-active,
  .page.is-active {
    animation: pageIn var(--dur-slow) var(--ease-emphasized) both;
  }

  .pageHead {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    overflow: hidden;
    padding: clamp(22px, 2.3vw, 32px);
    border: 1px solid color-mix(in srgb, var(--accent) 11%, var(--line-1));
    border-radius: var(--radius-5);
    background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%), radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 30%), var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .pageHead::after {
    position: absolute;
    top: -70px;
    right: clamp(70px, 14vw, 220px);
    width: 170px;
    height: 170px;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
    border-radius: 50%;
    content: "";
    opacity: 0.65;
  }

  .pageHead > * {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .pageHead .subtle {
    max-width: 720px;
    margin-top: 7px;
    font-size: 0.9rem;
  }

  .pageHead__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
  }

  .infoStrip,
  .composeTipGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .infoCard,
  .composeTip,
  .settingsHintCard {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 40px minmax(0, 1fr);
    align-content: center;
    gap: 3px 13px;
    min-height: 92px;
    padding: 17px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--surface-1) 82%, transparent);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.025);
  }

  .infoCard::before,
  .composeTip::before {
    display: grid;
    width: 40px;
    height: 40px;
    grid-row: 1 / span 2;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line-1));
    border-radius: 13px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), color-mix(in srgb, var(--accent2) 7%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 70%, var(--ink-1));
    content: attr(data-icon);
    font-size: 0.75rem;
    font-weight: 720;
  }

  .infoCard strong,
  .composeTip strong,
  .settingsHintCard strong {
    align-self: end;
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.82rem;
    font-weight: 660;
    letter-spacing: -0.014em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .infoCard span,
  .composeTip span,
  .settingsHintCard span {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ink-3);
    font-size: 0.73rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Dashboard */
  .kpiCard {
    position: relative;
    display: grid;
    min-height: 146px;
    align-content: space-between;
    gap: 8px;
    overflow: hidden;
    padding: 20px;
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }

  @media (hover: hover) {
    .kpiCard:hover,
    .mediaCard:hover,
    .blogCard:hover {
      border-color: color-mix(in srgb, var(--accent) 18%, var(--line-1));
      box-shadow: var(--shadow-2);
      transform: translateY(-2px);
    }
  }

  .kpiCard::after {
    position: absolute;
    right: -25px;
    bottom: -34px;
    width: 108px;
    height: 108px;
    border: 18px solid color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 50%;
    content: "";
  }

  .kpiCard__label {
    position: relative;
    z-index: 1;
    color: var(--ink-3);
    font-size: 0.69rem;
    font-weight: 680;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }

  .kpiCard__value {
    position: relative;
    z-index: 1;
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 3vw, 2.45rem);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.05em;
  }

  .kpiCard__meta {
    position: relative;
    z-index: 1;
    color: var(--ink-3);
    font-size: 0.72rem;
  }

  .dashboardOverview,
  .dashboardContentGrid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.8fr);
    gap: var(--space-5);
    align-items: stretch;
  }

  .dashboardMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .dashboardInsights,
  .insightCard,
  .healthCard,
  .quickActions {
    min-width: 0;
  }

  .distributionCard {
    display: grid;
    align-content: space-between;
    min-height: 100%;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line-1));
    border-radius: var(--radius-4);
    background: radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 42%), var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .distributionVisual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding-block: 22px;
  }

  .distributionDonut,
  #contentDistributionDonut {
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--action) 0 var(--published-angle, 70%), color-mix(in srgb, var(--accent2) 68%, var(--action)) var(--published-angle, 70%) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-1) 65%, transparent), 0 18px 40px color-mix(in srgb, var(--accent) 11%, transparent);
  }

  .distributionDonut::after,
  #contentDistributionDonut::after {
    width: 82px;
    height: 82px;
    border: 1px solid var(--line-1);
    border-radius: 50%;
    background: var(--surface-1);
    content: "";
  }

  .distributionLegend {
    display: grid;
    gap: 10px;
  }

  .distributionLegend span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 0.78rem;
  }

  .distributionLegend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--action);
  }

  .distributionLegend span:nth-child(2) i {
    background: color-mix(in srgb, var(--accent2) 68%, var(--action));
  }

  .quickActionGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
  }

  .quickAction {
    display: flex;
    min-height: 70px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-2);
    color: var(--ink-2);
    transition: border-color var(--dur-fast), background-color var(--dur-fast), transform var(--dur-base);
  }

  .quickAction:hover {
    border-color: color-mix(in srgb, var(--action) 24%, var(--line-1));
    background: var(--surface-1);
    color: var(--ink-1);
    transform: translateY(-1px);
  }

  .quickAction strong,
  .quickAction span {
    display: block;
  }

  .quickAction strong {
    font-size: 0.82rem;
  }

  .quickAction span {
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .list {
    display: grid;
  }

  .listItem {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-1);
    transition: background-color var(--dur-fast);
  }

  .listItem:last-child {
    border-bottom: 0;
  }

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

  .listItem__left {
    min-width: 0;
  }

  .listItem__title {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.86rem;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .listItem__meta {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 0.72rem;
  }

  /* Management toolbars */
  .toolbar,
  .managementToolbar {
    display: flex;
    min-width: 0;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 16px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-4);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .toolbar__left,
  .toolbar__right,
  .managementToolbar__primary,
  .managementToolbar__secondary {
    display: flex;
    min-width: 0;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px;
  }

  .managementToolbar__primary,
  .toolbar__left {
    flex: 1 1 auto;
  }

  .managementToolbar__secondary,
  .toolbar__right {
    flex: 0 0 auto;
  }

  .toolbar__right,
  .managementToolbar__secondary {
    justify-content: flex-end;
  }

  .filters {
    flex-wrap: wrap;
  }

  /* Blog list mobile cards */
  .cardsList {
    display: none;
    gap: var(--space-4);
  }

  .blogCard {
    min-width: 0;
    overflow: hidden;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }

  .blogCard__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .blogCard__main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
  }

  .blogCard__thumb {
    flex: 0 0 auto;
    width: 74px;
    height: 56px;
    border: 1px solid var(--line-1);
    border-radius: 11px;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
  }

  .blogCard__meta {
    min-width: 0;
  }

  .blogCard__actions {
    padding-top: var(--space-3);
    border-top: 1px solid var(--line-1);
  }

  .blogCard__actions .cell-actions {
    justify-content: flex-start;
  }

  /* Blog editor */
  .blogComposeIntro {
    display: grid;
    gap: var(--space-4);
  }

  .blogComposeIntro__head {
    padding: 17px 20px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 5%, var(--surface-1)), color-mix(in srgb, var(--accent2) 4%, var(--surface-1)));
  }

  .blogComposeIntro__head strong {
    display: block;
    color: var(--ink-1);
    font-size: 0.88rem;
    font-weight: 660;
  }

  .blogComposeIntro__head .subtle {
    display: block;
    margin-top: 4px;
    font-size: 0.79rem;
  }

  .tabPanels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--space-5);
    align-items: start;
  }

  .tabPanel {
    min-width: 0;
  }

  .tabPanel[data-tab-panel$=":blog"] {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .tabPanel[data-tab-panel$=":seo"] {
    grid-column: 2;
    grid-row: 1;
  }

  .tabPanel[data-tab-panel$=":publish"] {
    position: sticky;
    top: calc(var(--topbar-height) + 30px);
    grid-column: 2;
    grid-row: 2;
  }

  .tabPanel > .card {
    overflow: visible;
  }

  .tabPanel > .card > .formGrid {
    padding: clamp(20px, 2vw, 28px);
  }

  .editorWorkspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--space-5);
    align-items: start;
  }

  .editorMain,
  .editorRail {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
  }

  .editorRail,
  .stickyRail,
  .settingsRail {
    position: sticky;
    top: calc(var(--topbar-height) + 30px);
  }

  .blogEditorField {
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-1);
  }

  .editorBar {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .editor {
    min-height: clamp(410px, 50vh, 650px);
    padding: clamp(20px, 2.4vw, 34px);
    border: 1px solid var(--line-1);
    border-top: 0;
    border-radius: 0 0 var(--radius-3) var(--radius-3);
    background: var(--surface-1);
    color: var(--ink-1);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.76;
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-base), background-color var(--dur-base);
  }

  .editor:focus {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 1.5%, var(--surface-1));
    box-shadow: 0 0 0 4px var(--ring);
  }

  .editor:empty::before {
    color: var(--ink-3);
    content: attr(data-placeholder);
    pointer-events: none;
  }

  .editor h2 {
    margin: 1.4em 0 0.55em;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.035em;
  }

  .editor p {
    margin: 0 0 1em;
  }

  .editor img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 720px;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-3);
  }

  .editorFooter,
  .editorMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 14px;
    border: 1px solid var(--line-1);
    border-top: 0;
    border-radius: 0 0 var(--radius-3) var(--radius-3);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.72rem;
  }

  .editor + .editorFooter {
    margin-top: calc(var(--radius-3) * -1);
    position: relative;
  }

  .dropzone {
    position: relative;
    display: grid;
    min-height: 180px;
    place-items: center;
    overflow: hidden;
    padding: var(--space-5);
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-3);
    background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%), var(--surface-2);
    text-align: center;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-base);
  }

  .dropzone:hover,
  .dropzone:focus-visible,
  .dropzone.is-dragging {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 5%, var(--surface-2));
    box-shadow: 0 0 0 4px var(--ring);
  }

  .dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .dropzone__inner {
    pointer-events: none;
  }

  .dropzone__title {
    color: var(--ink-1);
    font-size: 0.86rem;
    font-weight: 650;
  }

  .dropzone__title::before {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    margin: 0 auto 10px;
    border: 1px solid color-mix(in srgb, var(--action) 16%, var(--line-1));
    border-radius: 14px;
    background: var(--surface-1);
    color: var(--action);
    content: "↥";
    font-size: 1.2rem;
    box-shadow: var(--shadow-1);
  }

  .dropzone__desc {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 0.74rem;
  }

  .dropzone__preview {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
  }

  .dropzone__preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dropzone__preview .iconBtn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: color-mix(in srgb, var(--surface-1) 88%, transparent);
    backdrop-filter: blur(12px);
  }

  .urlPreview {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 13px 14px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
    font-size: 0.76rem;
  }

  .urlPreview__value {
    overflow: hidden;
    color: var(--action);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .seoCounter,
  .fieldCounter {
    color: var(--ink-3);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
  }

  /* Media */
  .mediaUploadSurface {
    position: relative;
    display: flex;
    min-height: 210px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    overflow: hidden;
    padding: clamp(24px, 3vw, 40px);
    border: 1px dashed color-mix(in srgb, var(--action) 30%, var(--line-2));
    border-radius: var(--radius-5);
    background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent) 11%, transparent), transparent 36%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 32%), var(--surface-1);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }

  .mediaUploadSurface.is-dragging,
  .mediaUploadSurface[data-drag-active="true"] {
    border-color: var(--action);
    box-shadow: 0 0 0 5px var(--ring), var(--shadow-2);
    transform: translateY(-2px);
  }

  .mediaUploadSurface::after {
    position: absolute;
    right: -60px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border: 34px solid color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  .mediaUploadSurface__content {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 690px;
    align-items: center;
    gap: var(--space-5);
  }

  .mediaUploadSurface__icon {
    display: grid;
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--action) 18%, var(--line-1));
    border-radius: 20px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--action) 9%, var(--surface-1)), var(--surface-2));
    color: var(--action);
    box-shadow: var(--shadow-1);
  }

  .mediaUploadSurface__icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  .mediaUploadSurface__copy h3 {
    margin: 0;
    color: var(--ink-1);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 670;
    letter-spacing: -0.035em;
  }

  .mediaUploadSurface__copy p {
    max-width: 590px;
    margin: 6px 0 0;
    color: var(--ink-2);
    font-size: 0.84rem;
  }

  .mediaUploadSurface__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
  }

  .mediaUploadSurface__meta span {
    padding: 4px 8px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.67rem;
  }

  .mediaUploadSurface__actions {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
  }

  .uploadProgress,
  .mediaUploadProgress {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    gap: 7px;
  }

  .uploadProgress__bar {
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-3);
  }

  .uploadProgress__bar::after {
    display: block;
    width: var(--upload-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--action), var(--accent2));
    content: "";
    transition: width var(--dur-slow);
  }

  .mediaGrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .mediaCard {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
    transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  }

  .mediaCard img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--surface-3);
  }

  .mediaCard__foot {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding: 12px;
    border-top: 1px solid var(--line-1);
  }

  .mediaCard__foot > div:first-child {
    min-width: 0;
  }

  .mediaCard__name {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.79rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mediaCard .cell-actions {
    flex-wrap: nowrap;
  }

  /* Manage and settings screens */
  .manageLayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, var(--rail-width));
    gap: var(--space-5);
    align-items: start;
  }

  .manageMain {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
  }

  .companyManageGrid {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.78fr);
    align-items: start;
  }

  .companyManageSide {
    position: sticky;
    top: calc(var(--topbar-height) + 30px);
  }

  .companyManageIntro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 96px;
    overflow: hidden;
    padding: 20px 22px !important;
    background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 7%, var(--surface-1)), color-mix(in srgb, var(--accent2) 4%, var(--surface-1)));
  }

  .companyManageIntro::after {
    position: absolute;
    right: -20px;
    width: 130px;
    height: 130px;
    border: 22px solid color-mix(in srgb, var(--accent) 5%, transparent);
    border-radius: 50%;
    content: "";
  }

  .companyManageIntro__text {
    position: relative;
    z-index: 1;
  }

  .companyManageIntro__title {
    color: var(--ink-1);
    font-size: 0.94rem;
    font-weight: 670;
  }

  .companyManageIntro .subtle {
    max-width: 740px;
    margin-top: 4px;
    font-size: 0.79rem;
  }

  .companyManagePage .card > .h3,
  .userManagePage .card > .h3,
  #page-settings .card > .h3 {
    padding: 20px 24px 0;
  }

  .companyManagePage .card > .h3 + .formGrid,
  .userManagePage .card > .h3 + .formGrid,
  #page-settings .card > .h3 + .formGrid {
    padding: 20px 24px 24px;
  }

  .brandPreview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 15px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-2);
  }

  .brandPreview__swatches {
    display: flex;
    gap: 7px;
  }

  .swatch {
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid var(--surface-1);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--line-1), var(--shadow-1);
    vertical-align: middle;
  }

  .brandPreview__text {
    min-width: 0;
  }

  .brandPreview__title {
    overflow: hidden;
    margin-top: 2px;
    color: var(--ink-1);
    font-size: 0.88rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .companyLogoUpload {
    display: flex;
    min-height: 90px;
    align-items: center;
    gap: var(--space-4);
    padding: 13px;
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-3);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-base);
  }

  .companyLogoUpload:hover,
  .companyLogoUpload:focus-within {
    border-color: var(--action);
    background: color-mix(in srgb, var(--action) 4%, var(--surface-2));
    box-shadow: 0 0 0 4px var(--ring);
  }

  .companyLogoUpload > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .companyLogoUpload__preview {
    display: grid;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: 17px;
    background: var(--surface-1);
  }

  .companyLogoUpload__preview img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .companyLogoUpload__copy {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .companyLogoUpload__copy strong {
    color: var(--ink-1);
    font-size: 0.82rem;
    font-weight: 650;
  }

  .companyLogoUpload__copy small {
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .companyPreview {
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-4);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .companyPreview__head {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2)), color-mix(in srgb, var(--accent2) 5%, var(--surface-2)));
  }

  .companyPreview__logo {
    display: grid;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 14px;
    color: #fff;
    font-size: 1rem;
    font-weight: 720;
    box-shadow: var(--shadow-1);
  }

  .companyPreview__logo img {
    width: 100%;
    height: 100%;
    padding: 6px;
    object-fit: contain;
    background: var(--surface-1);
  }

  .companyPreview__meta {
    min-width: 0;
    flex: 1;
  }

  .companyPreview__title {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.86rem;
    font-weight: 660;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .companyPreview__sub {
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .companyPreview__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-1);
  }

  .companyPreview__stat {
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 13px 15px;
    background: var(--surface-1);
  }

  .companyPreview__stat:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .companyPreview__stat strong {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.75rem;
    font-weight: 630;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .statusSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .summaryMetric {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
  }

  .summaryMetric span {
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  .summaryMetric strong {
    color: var(--ink-1);
    font-size: 0.88rem;
    font-weight: 660;
  }

  /* Login */
  .view,
  .view--active {
    min-height: 100dvh;
  }

  .login {
    position: relative;
    display: grid;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
    overflow: hidden;
    background: var(--canvas);
  }

  .login::before,
  .login::after {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    content: "";
    filter: blur(1px);
    animation: floatOrb 13s var(--ease-standard) infinite alternate;
  }

  .login::before {
    top: -20vw;
    left: -17vw;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 67%);
  }

  .login::after {
    right: -16vw;
    bottom: -24vw;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 67%);
    animation-delay: -5s;
  }

  .login__left,
  .login__right {
    position: relative;
    z-index: 1;
    min-width: 0;
  }

  .login__left {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(30px, 4.4vw, 72px);
    border-right: 1px solid color-mix(in srgb, var(--line-1) 72%, transparent);
    background: radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 36%), linear-gradient(145deg, color-mix(in srgb, var(--surface-1) 68%, transparent), color-mix(in srgb, var(--canvas) 70%, transparent));
  }

  .login__left::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: linear-gradient(color-mix(in srgb, var(--line-1) 38%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line-1) 38%, transparent) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    -webkit-mask-image: linear-gradient(135deg, #000, transparent 65%);
    mask-image: linear-gradient(135deg, #000, transparent 65%);
  }

  .login__right {
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: clamp(24px, 5vw, 80px);
  }

  .login__brand {
    display: flex;
    align-items: center;
    gap: 13px;
  }

  .login__brand .brand-logo {
    width: 42px;
    height: 42px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line-1));
    border-radius: 14px;
    background: var(--surface-glass);
    box-shadow: var(--shadow-1);
    object-fit: contain;
    backdrop-filter: blur(14px);
  }

  .brand-meta {
    display: grid;
    line-height: 1.2;
  }

  .brand-title {
    color: var(--ink-1);
    font-size: 0.94rem;
    font-weight: 690;
    letter-spacing: -0.025em;
  }

  .brand-subtitle {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .login__leftCard {
    max-width: 760px;
    margin-block: clamp(30px, 7vh, 84px);
  }

  .loginSystemCard {
    position: relative;
  }

  .loginSystemCard__eyebrow,
  .loginCard__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in srgb, var(--accent) 68%, var(--ink-1));
    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .loginSystemCard__eyebrow::before,
  .loginCard__eyebrow::before {
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    content: "";
  }

  .loginSystemCard h2 {
    max-width: 720px;
    margin: 18px 0 0;
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5.1vw, 5.4rem);
    font-weight: 670;
    line-height: 0.98;
    letter-spacing: -0.065em;
    text-wrap: balance;
  }

  .loginSystemCard > p {
    max-width: 620px;
    margin: 22px 0 0;
    color: var(--ink-2);
    font-size: clamp(0.95rem, 1.3vw, 1.08rem);
    line-height: 1.55;
  }

  .loginSystemCard__features {
    display: grid;
    max-width: 680px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 27px;
  }

  .loginSystemCard__features span {
    display: flex;
    min-height: 46px;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: color-mix(in srgb, var(--surface-1) 70%, transparent);
    color: var(--ink-2);
    font-size: 0.76rem;
    font-weight: 560;
    backdrop-filter: blur(12px);
  }

  .loginSystemCard__features span::before {
    display: grid;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    background: var(--positive-soft);
    color: var(--positive);
    content: "✓";
    font-size: 0.65rem;
    font-weight: 800;
  }

  .login__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-3);
    font-size: 0.72rem;
  }

  .loginCard {
    width: min(100%, 500px);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 9%, var(--line-1));
    border-radius: var(--radius-5);
    background: var(--surface-glass);
    box-shadow: var(--shadow-3);
    backdrop-filter: blur(26px) saturate(1.16);
    animation: loginCardIn 700ms var(--ease-emphasized) both;
  }

  .loginCard__top {
    display: flex;
    min-width: 0;
    justify-content: flex-end;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  }

  .loginCard__head {
    display: grid;
    gap: 10px;
    padding: 30px 32px 0;
  }

  .loginCard__head .h1 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
  }

  .loginCard__head .subtle {
    font-size: 0.84rem;
  }

  .loginCard .form {
    padding: 25px 32px 32px;
  }

  .loginCard .btn--primary {
    min-height: var(--control-lg);
    margin-top: 3px;
  }

  .loginFeedback,
  #loginFeedback {
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-2);
    color: var(--critical);
    font-size: 0.78rem;
  }

  .loginFeedback:not(:empty),
  #loginFeedback:not(:empty) {
    min-height: 42px;
    padding: 11px 13px;
    border: 1px solid color-mix(in srgb, var(--critical) 20%, transparent);
    background: var(--critical-soft);
  }

  .loginPreview,
  .productPreview {
    position: relative;
    width: min(90%, 650px);
    margin-top: 30px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-1) 78%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-1) 74%, transparent);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(16px);
  }

  .loginPreview__bar,
  .productPreview__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border-bottom: 1px solid var(--line-1);
  }

  .loginPreview__bar i,
  .productPreview__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-2);
  }

  /* Legacy aliases retained for dynamic templates */
  .siteCard,
  .licenseCard {
    padding: 13px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-1);
  }

  .siteCard__title,
  .licenseCard__title {
    color: var(--ink-1);
    font-size: 0.76rem;
    font-weight: 650;
  }

  .siteCard__row,
  .licenseCard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    font-size: 0.7rem;
  }

  .siteCard__value,
  .licenseCard__meta {
    color: var(--ink-1);
    font-weight: 620;
  }
}

@layer utilities {
  .visuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    border: 0 !important;
    margin: -1px !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

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

  @keyframes shimmer {
    from { transform: translateX(-120%); }
    to { transform: translateX(190%); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes modalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes toastIn {
    from { opacity: 0; transform: translateX(24px) scale(0.97); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }

  @keyframes pageIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes loginCardIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes floatOrb {
    from { transform: translate3d(-2%, -1%, 0) scale(0.96); }
    to { transform: translate3d(4%, 3%, 0) scale(1.05); }
  }

  @keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.8); }
  }
}

@layer responsive {
  @media (max-width: 1320px) {
    .grid--kpi {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mediaGrid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .themeSwitch .segmented__btn span {
      display: none;
    }

    .themeSwitch .segmented__btn {
      width: 32px;
      padding: 0;
    }

    .systemPill {
      display: none;
    }
  }

  @media (max-width: 1180px) {
    .dashboardOverview,
    .dashboardContentGrid {
      grid-template-columns: 1fr;
    }

    .companyManageGrid,
    .manageLayout,
    .editorWorkspace {
      grid-template-columns: minmax(0, 1fr) 310px;
    }

    .infoStrip,
    .composeTipGrid {
      gap: 10px;
    }

    .infoCard,
    .composeTip {
      grid-template-columns: 34px minmax(0, 1fr);
      padding: 13px;
    }

    .infoCard::before,
    .composeTip::before {
      width: 34px;
      height: 34px;
      border-radius: 11px;
    }
  }

  @media (max-width: 1100px) {
    .sidebar {
      top: 10px;
      bottom: 10px;
      left: 10px;
      transform: translateX(calc(-100% - 24px));
    }

    body.sidebar-open {
      overflow: hidden;
    }

    body.sidebar-open .sidebar {
      transform: translateX(0);
    }

    .sidebarScrim {
      position: fixed;
      z-index: calc(var(--z-sidebar) - 1);
      inset: 0;
      display: block;
      background: rgba(6, 10, 16, 0.48);
      opacity: 0;
      visibility: hidden;
      backdrop-filter: blur(5px);
      transition: opacity var(--dur-base), visibility var(--dur-base);
    }

    body.sidebar-open .sidebarScrim {
      opacity: 1;
      visibility: visible;
    }

    .main {
      margin-left: 0;
    }

    .topbar__mobileBrand {
      display: flex;
    }

    .search--global {
      margin-left: 5px;
    }

    .content {
      padding-inline: clamp(16px, 3vw, 28px);
    }
  }

  @media (max-width: 980px) {
    .grid--two,
    .companyManageGrid,
    .manageLayout,
    .editorWorkspace,
    .tabPanels {
      grid-template-columns: minmax(0, 1fr);
    }

    .companyManageSide,
    .editorRail,
    .stickyRail,
    .settingsRail,
    .tabPanel[data-tab-panel$=":publish"] {
      position: static;
    }

    .tabPanel[data-tab-panel$=":blog"],
    .tabPanel[data-tab-panel$=":seo"],
    .tabPanel[data-tab-panel$=":publish"] {
      grid-column: 1;
      grid-row: auto;
    }

    .tabPanel {
      display: none;
    }

    .tabPanel.is-active {
      display: block;
      animation: pageIn var(--dur-base) var(--ease-emphasized) both;
    }

    .tabs {
      position: sticky;
      z-index: 8;
      top: calc(var(--topbar-height) + 22px);
      width: 100%;
      padding: 5px;
      background: var(--surface-glass);
      box-shadow: var(--shadow-1);
      backdrop-filter: blur(18px);
    }

    .tabBtn {
      flex: 1 1 0;
    }

    .infoStrip,
    .composeTipGrid {
      grid-template-columns: 1fr;
    }

    .infoCard,
    .composeTip {
      min-height: 74px;
    }

    .toolbar,
    .managementToolbar {
      align-items: stretch;
      flex-direction: column;
    }

    .toolbar__left,
    .toolbar__right,
    .managementToolbar__primary,
    .managementToolbar__secondary {
      width: 100%;
      align-items: end;
      justify-content: flex-start;
    }

    .search--compact {
      flex: 1 1 240px;
      width: auto;
    }

    #blogsTableWrap {
      display: none;
    }

    #blogsCards {
      display: grid;
    }

    .login {
      grid-template-columns: minmax(0, 1fr) minmax(400px, 0.88fr);
    }

    .loginSystemCard h2 {
      font-size: clamp(2.4rem, 6vw, 4rem);
    }

    .loginSystemCard__features {
      grid-template-columns: 1fr;
    }

    .loginSystemCard__features span:nth-child(n+3) {
      display: none;
    }
  }

  @media (max-width: 800px) {
    .topbar {
      gap: 7px;
    }

    .search--global {
      width: min(34vw, 260px);
    }

    .search__shortcut,
    .languageSwitch,
    .profileBtn__meta {
      display: none;
    }

    .profileBtn {
      width: 48px;
      padding: 4px;
    }

    .profileBtn__chev {
      display: none;
    }

    .profileBtn .avatar {
      width: 38px;
      height: 38px;
    }

    .grid--kpi {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mediaGrid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pageHead {
      align-items: flex-start;
      flex-direction: column;
    }

    .pageHead__actions {
      width: 100%;
      justify-content: flex-start;
    }

    .mediaUploadSurface {
      align-items: flex-start;
      flex-direction: column;
    }

    .mediaUploadSurface__actions {
      width: 100%;
    }

    .mediaUploadSurface__actions .btn {
      width: 100%;
    }

    .statusSummary {
      grid-template-columns: 1fr;
    }

    .login {
      display: flex;
      min-height: 100dvh;
      flex-direction: column;
    }

    .login__left {
      min-height: auto;
      order: 1;
      padding: 22px 22px 0;
      border-right: 0;
      background: transparent;
    }

    .login__leftCard,
    .login__foot {
      display: none;
    }

    .login__right {
      display: block;
      width: 100%;
      min-height: 0;
      flex: 1;
      order: 2;
      padding: 22px;
    }

    .loginCard {
      width: 100%;
      min-width: 0;
      max-width: 540px;
      margin-inline: auto;
    }
  }

  @media (max-width: 640px) {
    :root {
      --topbar-height: 62px;
      --control-md: 44px;
      --control-lg: 50px;
    }

    .topbar {
      top: 8px;
      width: calc(100% - 16px);
      height: var(--topbar-height);
      margin: 8px;
      padding: 7px;
      border-radius: 16px;
    }

    .topbar__left {
      gap: 7px;
    }

    .topbar__mobileBrand span,
    .search--global,
    .themeSwitch,
    .systemPill {
      display: none;
    }

    .topbar__mobileBrand {
      margin-right: auto;
    }

    .topbar__right {
      gap: 7px;
    }

    .content {
      padding: 14px 12px 34px;
    }

    .page {
      gap: var(--space-4);
    }

    .pageHead {
      gap: var(--space-5);
      padding: 21px;
      border-radius: 22px;
    }

    .pageHead::after {
      right: -70px;
    }

    .pageHead .h2 {
      font-size: 1.7rem;
    }

    .pageHead .subtle {
      font-size: 0.82rem;
    }

    .pageHead__actions > .btn,
    .pageHead__actions > a.btn {
      flex: 1 1 auto;
    }

    .grid--kpi,
    .dashboardMetrics,
    .quickActionGrid,
    .formGrid {
      grid-template-columns: minmax(0, 1fr);
    }

    .field--full {
      grid-column: auto;
    }

    .kpiCard {
      min-height: 124px;
    }

    .infoCard,
    .composeTip {
      min-height: 70px;
    }

    .toolbar,
    .managementToolbar {
      padding: 13px;
      border-radius: var(--radius-3);
    }

    .toolbar__left,
    .toolbar__right,
    .managementToolbar__primary,
    .managementToolbar__secondary {
      align-items: stretch;
      flex-direction: column;
    }

    .toolbar .field,
    .managementToolbar .field,
    .search--compact,
    .filters {
      width: 100%;
      flex: 1 1 auto;
    }

    .filters .chip {
      flex: 1 1 calc(50% - 4px);
    }

    .tabs {
      top: calc(var(--topbar-height) + 18px);
      overflow-x: auto;
      scrollbar-width: none;
    }

    .tabBtn {
      min-width: 92px;
      padding-inline: 12px;
    }

    .cardHead,
    .surfaceHeader,
    .sectionCard__head {
      align-items: flex-start;
      flex-direction: column;
      padding: 16px;
    }

    .card:not(:has(> .cardHead)):not(.kpiCard):not(.blogCard):not(.emptyState),
    .sectionCard__body,
    .tabPanel > .card > .formGrid {
      padding: 18px;
    }

    .table {
      min-width: 720px;
    }

    .tableWrap {
      border-radius: var(--radius-3);
    }

    .cell-actions {
      justify-content: flex-start;
    }

    .blogCard {
      padding: 16px;
    }

    .blogCard__actions .btn {
      flex: 1 1 auto;
    }

    .editor {
      min-height: 360px;
      padding: 18px;
    }

    .urlPreview {
      align-items: flex-start;
      flex-direction: column;
    }

    .urlPreview__value {
      width: 100%;
    }

    .mediaUploadSurface {
      min-height: 0;
      padding: 22px;
      border-radius: 22px;
    }

    .mediaUploadSurface__content {
      align-items: flex-start;
      flex-direction: column;
    }

    .mediaUploadSurface__icon {
      width: 54px;
      height: 54px;
      border-radius: 17px;
    }

    .mediaGrid {
      grid-template-columns: minmax(0, 1fr);
    }

    .companyPreview__stats {
      grid-template-columns: 1fr;
    }

    .companyPreview__stat:last-child:nth-child(odd) {
      grid-column: auto;
    }

    .companyManageIntro {
      padding: 18px !important;
    }

    .modal {
      align-items: end;
      padding: 10px;
    }

    .modal__panel {
      width: 100%;
      border-radius: 24px;
    }

    .modal__foot {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .toasts {
      top: auto;
      right: 10px;
      bottom: 10px;
      width: calc(100vw - 20px);
    }

    .login__left {
      padding: 17px 17px 0;
    }

    .login__right {
      padding: 17px;
    }

    .loginCard {
      border-radius: 24px;
    }

    .loginCard__top {
      justify-content: center;
      overflow-x: auto;
    }

    .loginCard__head {
      padding: 24px 22px 0;
    }

    .loginCard .form {
      padding: 22px;
    }

    .loginCard .row--between {
      align-items: flex-start;
      flex-direction: column;
    }

    .loginCard .link {
      align-self: flex-end;
      margin-top: -29px;
    }

    .loginCard .divider {
      margin-block: 5px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      scroll-behavior: auto !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* View compositions added by the premium information architecture. */
@layer pages {
  body.modal-open {
    overflow: hidden;
  }

  .toast.is-leaving {
    opacity: 0;
    transform: translateX(22px) scale(0.96);
    transition: opacity var(--dur-base), transform var(--dur-base);
  }

  .loginSubmit[aria-busy="true"] {
    color: var(--on-action) !important;
  }

  .loginSubmit[aria-busy="true"]::after {
    display: none;
  }

  .field__meta .is-over-limit,
  .is-over-limit {
    color: var(--critical);
  }

  .dropzone.is-dragover,
  .is-dragover .mediaUploadSurface,
  .mediaUploadSurface.is-loading {
    border-color: var(--action);
    background-color: color-mix(in srgb, var(--action) 5%, var(--surface-2));
    box-shadow: 0 0 0 5px var(--ring), var(--shadow-2);
  }

  .dropzone.is-uploading .dropzone__inner {
    opacity: 0.48;
  }

  .uploadProgress.is-complete {
    color: var(--positive);
  }

  .uploadProgress.is-error {
    color: var(--critical);
  }

  .routePage.is-saving .pageHead__actions .btn:not([aria-busy="true"]) {
    opacity: 0.5;
  }

  .srOnly {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
  }

  .pageEyebrow,
  .cardEyebrow,
  .sectionCard__eyebrow,
  .previewCard__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: color-mix(in srgb, var(--action) 76%, var(--ink-2));
    font-size: 0.64rem;
    font-weight: 720;
    letter-spacing: 0.105em;
    text-transform: uppercase;
  }

  .pageHead__content,
  .pageHead__copy,
  .dashboardPage,
  .dashboardPageHead,
  .dashboardActivity,
  .dashboardUsers,
  .dashboardSignals,
  .blogComposerPage,
  .companySettingsPage,
  .companySettingsLayout,
  .settingsPage,
  .settingsLayout,
  .userManageLayout,
  .editorWorkspace__panel,
  .editorWorkspace__panel--rail,
  .settingsRail__card {
    min-width: 0;
  }

  .authView,
  .dashboardActivity__list {
    min-width: 0;
  }

  .btn__icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    line-height: 1;
  }

  .pageEyebrow {
    margin-bottom: 8px;
  }

  .pageEyebrow::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
    content: "";
  }

  .sectionCard__description {
    max-width: 650px;
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 0.76rem;
    line-height: 1.45;
  }

  .sectionCard__index,
  .sectionCard__icon {
    display: grid;
    flex: 0 0 auto;
    min-width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line-1);
    border-radius: 11px;
    background: var(--surface-1);
    color: var(--ink-3);
    font-size: 0.67rem;
    font-weight: 700;
    box-shadow: var(--shadow-1);
  }

  .surfaceHeader__title.h3 {
    color: var(--ink-1);
    font-size: 0.98rem;
    font-weight: 670;
  }

  .surfaceHeader__meta {
    max-width: 740px;
    margin: 4px 0 0;
    line-height: 1.45;
  }

  .surfaceHeader__badge {
    flex: 0 0 auto;
  }

  .listSurface > .tableWrap {
    border: 0;
    border-radius: 0 0 var(--radius-4) var(--radius-4);
    box-shadow: none;
  }

  .listSurface > .cardsList {
    padding: var(--space-4);
  }

  .resultCount,
  .toolbarHint {
    color: var(--ink-3);
    font-size: 0.74rem;
    font-weight: 560;
  }

  .resultCount {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    white-space: nowrap;
  }

  .toolbarField {
    width: 168px;
  }

  .toolbarField .select {
    min-height: var(--control-md);
  }

  .settingsOverview,
  .mediaSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .summaryMetric {
    display: flex;
    min-width: 0;
    min-height: 86px;
    align-items: center;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: var(--surface-1);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.025);
  }

  .summaryMetric__icon {
    display: grid;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line-1));
    border-radius: 13px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), color-mix(in srgb, var(--accent2) 7%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 72%, var(--ink-1));
    font-size: 0.74rem;
    font-weight: 720;
  }

  .summaryMetric > span:last-child {
    min-width: 0;
  }

  .summaryMetric strong,
  .summaryMetric small {
    display: block;
  }

  .summaryMetric strong {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.82rem;
    font-weight: 660;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .summaryMetric small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 0.7rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .previewCard {
    overflow: hidden;
    padding: 20px;
  }

  .previewCard__head {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .previewCard__head > div {
    min-width: 0;
  }

  .previewCard__head .subtle {
    margin-top: 4px;
    font-size: 0.73rem;
  }

  .previewCard__mark,
  .previewCard__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line-1));
    border-radius: 14px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, var(--surface-1)), color-mix(in srgb, var(--accent2) 10%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 76%, var(--ink-1));
    font-size: 0.76rem;
    font-weight: 740;
    box-shadow: var(--shadow-1);
  }

  .settingsRail {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
  }

  .previewCard__label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .previewCard__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 5px var(--positive-soft);
    animation: statusPulse 2.4s var(--ease-standard) infinite;
  }

  .settingsRail .statusSummary {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 18px;
  }

  .statusSummary__item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid var(--line-1);
    border-radius: 11px;
    background: var(--surface-2);
  }

  .statusSummary__item span {
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .statusSummary__item strong {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.72rem;
    font-weight: 650;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .manageIntro {
    justify-content: flex-start;
    gap: 14px;
  }

  .manageIntro__icon {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line-1));
    border-radius: 13px;
    background: var(--surface-1);
    color: var(--action);
    font-weight: 720;
    box-shadow: var(--shadow-1);
  }

  .manageIntro__content {
    flex: 1 1 auto;
  }

  .manageIntro__badge {
    position: relative;
    z-index: 1;
    margin-left: auto;
  }

  .companyPreview__stat--wide {
    grid-column: 1 / -1;
  }

  .preferenceToggle {
    margin-top: 3px;
  }

  /* Login-specific product storytelling */
  .loginAmbient {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .loginAmbient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.36;
    animation: floatOrb 16s var(--ease-standard) infinite alternate;
  }

  .loginAmbient__orb--primary {
    top: -24%;
    left: 22%;
    width: 54vw;
    height: 54vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 68%);
  }

  .loginAmbient__orb--secondary {
    right: -20%;
    bottom: -32%;
    width: 58vw;
    height: 58vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 19%, transparent), transparent 68%);
    animation-delay: -7s;
  }

  .loginAmbient__grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient(color-mix(in srgb, var(--line-1) 46%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--line-1) 46%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 30% 20%, #000, transparent 64%);
    mask-image: radial-gradient(circle at 30% 20%, #000, transparent 64%);
  }

  .login__brandMark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line-1));
    border-radius: 15px;
    background: var(--surface-glass);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(14px);
  }

  .login__brandMark .brand-logo {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .loginHero__content {
    display: grid;
    max-width: 780px;
    gap: clamp(24px, 4vh, 42px);
    margin-block: clamp(30px, 5vh, 58px);
  }

  .loginHero__copy h2 {
    max-width: 760px;
    margin: 17px 0 0;
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: clamp(2.55rem, 4.7vw, 5rem);
    font-weight: 670;
    line-height: 0.99;
    letter-spacing: -0.064em;
    text-wrap: balance;
  }

  .loginHero__copy p {
    max-width: 650px;
    margin: 20px 0 0;
    color: var(--ink-2);
    font-size: clamp(0.92rem, 1.2vw, 1.05rem);
    line-height: 1.55;
  }

  .loginHero__proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .loginHero__proof li {
    display: flex;
    min-width: 0;
    min-height: 76px;
    align-items: flex-start;
    gap: 10px;
    padding: 13px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--surface-1) 70%, transparent);
    backdrop-filter: blur(12px);
  }

  .loginHero__proofIcon {
    display: grid;
    flex: 0 0 auto;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, var(--surface-2)), color-mix(in srgb, var(--accent2) 8%, var(--surface-2)));
    color: color-mix(in srgb, var(--accent) 74%, var(--ink-1));
    font-size: 0.68rem;
    font-weight: 720;
  }

  .loginHero__proof li > span:last-child {
    min-width: 0;
  }

  .loginHero__proof strong,
  .loginHero__proof small {
    display: block;
  }

  .loginHero__proof strong {
    color: var(--ink-1);
    font-size: 0.76rem;
    font-weight: 650;
  }

  .loginHero__proof small {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 0.66rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .loginProductPreview {
    width: min(100%, 680px);
    margin: 0;
  }

  .loginProductPreview__window {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line-1));
    border-radius: 20px;
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    box-shadow: var(--shadow-2);
    backdrop-filter: blur(18px);
  }

  .loginProductPreview__chrome {
    display: flex;
    height: 31px;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-bottom: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  }

  .loginProductPreview__chrome > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-2);
  }

  .loginProductPreview__address {
    min-width: 150px;
    margin-left: 8px;
    padding: 3px 9px;
    border: 1px solid var(--line-1);
    border-radius: 6px;
    color: var(--ink-3);
    font-size: 0.55rem;
    text-align: center;
  }

  .loginProductPreview__shell {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 238px;
  }

  .loginProductPreview__rail {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 10px;
    padding-top: 15px;
    border-right: 1px solid var(--line-1);
    background: var(--surface-2);
  }

  .loginProductPreview__rail span {
    width: 21px;
    height: 21px;
    border-radius: 7px;
    background: var(--surface-3);
  }

  .loginProductPreview__rail span.is-active {
    background: color-mix(in srgb, var(--action) 16%, var(--surface-1));
    box-shadow: inset 2px 0 0 var(--action);
  }

  .loginProductPreview__canvas {
    padding: 17px;
  }

  .loginProductPreview__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .loginProductPreview__head > div span,
  .loginProductPreview__head > div strong {
    display: block;
  }

  .loginProductPreview__head > div span {
    color: var(--ink-3);
    font-size: 0.55rem;
    text-transform: uppercase;
  }

  .loginProductPreview__head > div strong {
    margin-top: 2px;
    color: var(--ink-1);
    font-size: 0.78rem;
  }

  .loginProductPreview__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--positive);
    font-size: 0.56rem;
    font-weight: 630;
  }

  .loginProductPreview__status i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px var(--positive-soft);
  }

  .loginProductPreview__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .loginProductPreview__metrics > div {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--surface-2);
  }

  .loginProductPreview__metrics span,
  .loginProductPreview__metrics small {
    color: var(--ink-3);
    font-size: 0.51rem;
  }

  .loginProductPreview__metrics strong {
    color: var(--ink-1);
    font-size: 0.93rem;
    letter-spacing: -0.035em;
  }

  .loginProductPreview__activity {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(110px, 0.7fr);
    gap: 8px;
    margin-top: 8px;
  }

  .loginProductPreview__chart,
  .loginProductPreview__feed {
    min-height: 70px;
    padding: 10px;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--surface-2);
  }

  .loginProductPreview__chart {
    display: flex;
    align-items: end;
    gap: 5px;
  }

  .loginProductPreview__chart span {
    flex: 1;
    height: 30%;
    border-radius: 3px 3px 1px 1px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--action) 74%, var(--accent2)), color-mix(in srgb, var(--action) 22%, transparent));
  }

  .loginProductPreview__chart span:nth-child(2) { height: 48%; }
  .loginProductPreview__chart span:nth-child(3) { height: 39%; }
  .loginProductPreview__chart span:nth-child(4) { height: 68%; }
  .loginProductPreview__chart span:nth-child(5) { height: 54%; }
  .loginProductPreview__chart span:nth-child(6) { height: 82%; }
  .loginProductPreview__chart span:nth-child(7) { height: 72%; }

  .loginProductPreview__feed {
    display: grid;
    align-content: center;
    gap: 8px;
  }

  .loginProductPreview__feed span {
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
  }

  .loginProductPreview__feed span:nth-child(2) { width: 72%; }
  .loginProductPreview__feed span:nth-child(3) { width: 88%; }

  .loginProductPreview figcaption {
    margin-top: 9px;
    color: var(--ink-3);
    font-size: 0.62rem;
    text-align: center;
  }

  .login__security {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .login__security i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 0 4px var(--positive-soft);
  }

  .loginCard__top {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .loginCard__context {
    color: var(--ink-3);
    font-size: 0.68rem;
    font-weight: 580;
  }

  .inputShell {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: center;
  }

  .inputShell__icon {
    position: absolute;
    z-index: 1;
    left: 14px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 680;
    pointer-events: none;
  }

  .inputShell > .input,
  .inputShell.inputGroup > .input {
    padding-left: 42px;
  }

  .inputShell.inputGroup > .iconBtn {
    position: absolute;
    right: 4px;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
  }

  .inputShell.inputGroup > .input {
    padding-right: 50px;
  }

  .formState {
    display: none;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--critical) 20%, transparent);
    border-radius: 10px;
    background: var(--critical-soft);
    color: var(--critical);
    font-size: 0.76rem;
  }

  .formState:not(:empty) {
    display: block;
  }

  .loginSubmit__spinner {
    display: none;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
  }

  .loginSubmit[aria-busy="true"] .loginSubmit__spinner {
    display: block;
  }

  .loginSubmit[aria-busy="true"] .loginSubmit__arrow {
    display: none;
  }

  .loginCard__assurance {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-2);
    background: var(--surface-2);
  }

  .loginCard__assuranceIcon {
    display: grid;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: var(--positive-soft);
    color: var(--positive);
    font-size: 0.73rem;
    font-weight: 720;
  }

  .loginCard__assurance strong,
  .loginCard__assurance small {
    display: block;
  }

  .loginForm,
  .loginField,
  .loginForm__options,
  .loginSubmit__label,
  .loginHero,
  .login--premium {
    min-width: 0;
  }

  .loginCard__assurance strong {
    color: var(--ink-1);
    font-size: 0.74rem;
    font-weight: 640;
  }

  .loginCard__assurance small {
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.66rem;
  }

  /* Dashboard detail system */
  .dashboardWelcome {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 2.3vw, 30px) !important;
    background: radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent2) 9%, transparent), transparent 30%), radial-gradient(circle at 0 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 38%), var(--surface-1);
  }

  .dashboardWelcome::after {
    position: absolute;
    top: -90px;
    right: -65px;
    width: 230px;
    height: 230px;
    border: 30px solid color-mix(in srgb, var(--accent) 4%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  .dashboardWelcome__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .statusPill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.66rem;
    font-weight: 620;
  }

  .statusPill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }

  .statusPill--success {
    border-color: color-mix(in srgb, var(--positive) 17%, transparent);
    background: var(--positive-soft);
    color: var(--positive);
  }

  .dashboardWelcome__date {
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .dashboardWelcome__copy {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-top: clamp(24px, 3vw, 38px);
  }

  .dashboardWelcome__greeting {
    color: color-mix(in srgb, var(--action) 78%, var(--ink-1));
    font-size: 0.73rem;
    font-weight: 680;
  }

  .dashboardWelcome__copy h3 {
    max-width: 700px;
    margin: 7px 0 0;
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2.8vw, 2.65rem);
    font-weight: 670;
    line-height: 1.08;
    letter-spacing: -0.048em;
    text-wrap: balance;
  }

  .dashboardWelcome__copy p {
    max-width: 660px;
    margin: 11px 0 0;
    color: var(--ink-2);
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .dashboardKpis {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(24px, 3vw, 36px);
  }

  .dashboardKpis .kpiCard {
    min-height: 156px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--surface-1) 78%, transparent);
    box-shadow: 0 1px 2px rgba(31, 41, 55, 0.025);
    backdrop-filter: blur(12px);
  }

  .dashboardKpis .kpiCard--featured {
    border-color: color-mix(in srgb, var(--accent) 15%, var(--line-1));
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface-1)), color-mix(in srgb, var(--accent2) 4%, var(--surface-1)));
  }

  .kpiCard__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .kpiCard__icon {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid var(--line-1);
    border-radius: 10px;
    background: var(--surface-1);
    color: color-mix(in srgb, var(--accent) 74%, var(--ink-1));
    font-size: 0.73rem;
    box-shadow: var(--shadow-1);
  }

  .kpiCard__trend {
    color: var(--ink-3);
    font-size: 0.62rem;
    font-weight: 610;
  }

  .kpiCard__trend--positive {
    color: var(--positive);
  }

  .kpiCard__value--date {
    font-size: clamp(1.25rem, 2vw, 1.72rem);
    letter-spacing: -0.035em;
  }

  .contentDistribution {
    display: flex;
    min-height: 100%;
    flex-direction: column;
  }

  .contentDistribution > .cardHead {
    border-radius: var(--radius-4) var(--radius-4) 0 0;
  }

  .contentDistribution__period {
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  .contentDistribution__visual {
    display: grid;
    flex: 1 1 auto;
    min-height: 180px;
    place-items: center;
    padding: 22px;
  }

  .distributionChart {
    --published-share: 68%;
    position: relative;
    display: grid;
    width: 142px;
    height: 142px;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--action) 0 var(--published-share), color-mix(in srgb, var(--accent2) 72%, var(--action)) var(--published-share) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-1) 55%, transparent), 0 20px 45px color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .distributionChart::before {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid var(--line-1);
    border-radius: 50%;
    background: var(--surface-1);
    content: "";
    box-shadow: inset 0 1px 2px rgba(31, 41, 55, 0.035);
  }

  .distributionChart__center {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    line-height: 1.1;
  }

  .distributionChart__center strong {
    color: var(--ink-1);
    font-size: 1.45rem;
    font-weight: 680;
    letter-spacing: -0.045em;
  }

  .distributionChart__center span {
    margin-top: 3px;
    color: var(--ink-3);
    font-size: 0.62rem;
  }

  .contentDistribution__legend {
    display: grid;
    margin: 0 20px;
    border-top: 1px solid var(--line-1);
  }

  .distributionRow {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line-1);
  }

  .distributionRow__marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .distributionRow__marker--published {
    background: var(--action);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--action) 10%, transparent);
  }

  .distributionRow__marker--draft {
    background: color-mix(in srgb, var(--accent2) 72%, var(--action));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 10%, transparent);
  }

  .distributionRow__label strong,
  .distributionRow__label small {
    display: block;
  }

  .distributionRow__label strong {
    color: var(--ink-1);
    font-size: 0.76rem;
    font-weight: 640;
  }

  .distributionRow__label small {
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.65rem;
  }

  .distributionRow__value {
    color: var(--ink-1);
    font-size: 0.92rem;
    font-weight: 680;
  }

  .contentDistribution > .btn {
    margin: 18px 20px 20px;
    width: calc(100% - 40px);
  }

  .dashboardWorkspace {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.72fr);
    gap: var(--space-5);
    align-items: stretch;
  }

  .dashboardWorkspace__main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .dashboardActivity,
  .quickActions {
    min-height: 100%;
  }

  .quickActions__list {
    display: grid;
    gap: 8px;
    padding: 14px;
  }

  .quickAction {
    width: 100%;
    text-align: left;
    isolation: isolate;
    overflow: hidden;
  }

  .quickAction__icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line-1);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, var(--action) 5%, var(--surface-2)));
    color: color-mix(in srgb, var(--action) 78%, var(--ink-1));
    font-weight: 700;
    box-shadow: var(--shadow-1);
    margin: 0;
    line-height: 1;
    transition: transform var(--dur-base), border-color var(--dur-fast), box-shadow var(--dur-base);
  }

  .quickAction__icon--library {
    color: color-mix(in srgb, var(--accent2) 76%, var(--ink-1));
    background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, var(--accent2) 7%, var(--surface-2)));
  }

  .quickAction__icon--preferences {
    color: color-mix(in srgb, #7c5ce5 78%, var(--ink-1));
    background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, #7c5ce5 7%, var(--surface-2)));
  }

  .quickAction__copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  .quickAction__icon svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .quickAction__copy strong,
  .quickAction__copy small {
    display: block;
  }

  .quickAction__copy strong {
    overflow: hidden;
    color: var(--ink-1);
    font-size: 0.78rem;
    font-weight: 640;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quickAction__copy small {
    overflow: hidden;
    margin-top: 2px;
    color: var(--ink-3);
    font-size: 0.65rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quickAction__arrow {
    display: grid;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--ink-3);
    margin: 0;
    line-height: 1;
    transition: transform var(--dur-base), color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
  }

  .quickAction__arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .quickAction:hover .quickAction__icon {
    border-color: color-mix(in srgb, currentColor 24%, var(--line-1));
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 9px 20px color-mix(in srgb, currentColor 13%, transparent);
  }

  .quickAction:hover .quickAction__arrow {
    border-color: var(--line-1);
    background: var(--surface-1);
    color: var(--action);
    transform: translateX(3px);
  }

  .quickAction:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
  }

  .dashboardEmpty {
    align-content: center;
    gap: 13px;
  }

  .dashboardEmpty::before {
    display: none;
  }

  .dashboardEmpty__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 0 auto;
    border: 1px solid color-mix(in srgb, var(--action) 14%, var(--line-1));
    border-radius: 15px;
    background: linear-gradient(145deg, var(--surface-1), color-mix(in srgb, var(--action) 5%, var(--surface-2)));
    color: color-mix(in srgb, var(--action) 65%, var(--ink-3));
    box-shadow: var(--shadow-1);
  }

  .dashboardEmpty__icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .composerSection--editor {
    position: relative;
  }

  .aiEditorLoading {
    position: absolute;
    z-index: 12;
    inset: 92px 16px 58px;
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid color-mix(in srgb, var(--action) 25%, var(--line-1));
    border-radius: var(--radius-3);
    background: color-mix(in srgb, var(--surface-1) 90%, transparent);
    color: var(--ink-1);
    text-align: center;
    backdrop-filter: blur(7px);
    box-shadow: var(--shadow-2);
  }

  .aiEditorLoading[hidden] {
    display: none;
  }

  .aiEditorLoading small {
    color: var(--ink-3);
  }

  .aiEditorLoading__spinner {
    width: 38px;
    height: 38px;
    border: 3px solid color-mix(in srgb, var(--action) 18%, var(--line-1));
    border-top-color: var(--action);
    border-radius: 50%;
    animation: aiEditorSpin 0.8s linear infinite;
  }

  .aiStageProgress {
    width: min(280px, 82%);
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-3);
  }

  .aiStageProgress i {
    display: block;
    width: var(--ai-stage-progress, 25%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--action), var(--accent2));
    transition: width 600ms ease;
  }

  @media (max-width: 720px) {
    .dropzone__preview img { object-fit: contain; }
    .blogCard__main { align-items: flex-start; }
    .blogCard__thumb { width: 88px; height: 66px; }
    .editor { max-width: 100%; padding: 16px; overflow-x: hidden; }
    .aiEditorLoading { inset: 82px 8px 54px; }
    .quickActions__list { padding: 10px; }
    .quickAction { min-height: 76px; gap: 10px; padding: 11px; }
    .quickAction__icon { width: 40px; height: 40px; }
    .quickAction__copy strong,
    .quickAction__copy small { overflow: visible; text-overflow: clip; white-space: normal; }
  }

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

  .quickAction--primary {
    border-color: color-mix(in srgb, var(--action) 18%, var(--line-1));
    background: linear-gradient(110deg, color-mix(in srgb, var(--action) 7%, var(--surface-2)), color-mix(in srgb, var(--accent2) 4%, var(--surface-2)));
  }

  /* Composer workspace */
  .blogComposerHead {
    min-height: 150px;
  }

  .saveState {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.69rem;
    font-weight: 610;
    white-space: nowrap;
  }

  .saveState i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--warning);
    box-shadow: 0 0 0 4px var(--warning-soft);
  }

  .blogComposeIntro__head {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .composeTipGrid {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .composeIntro__icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-right: 0;
    border: 1px solid var(--line-1);
    border-radius: 11px;
    background: var(--surface-1);
    color: var(--action);
  }

  .composerTabs {
    position: sticky;
    z-index: 8;
    top: calc(var(--topbar-height) + 22px);
    display: none;
    width: fit-content;
    background: var(--surface-glass);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(18px);
  }

  .editorWorkspace {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
  }

  .editorWorkspace__main,
  .editorWorkspace__rail {
    display: grid;
    min-width: 0;
    gap: var(--space-5);
  }

  .editorWorkspace__rail {
    position: sticky;
    top: calc(var(--topbar-height) + 30px);
  }

  .editorWorkspace .tabPanel {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }

  .composerSection {
    overflow: hidden;
  }

  .composerSection--cover {
    align-self: start;
  }

  .composerSection__head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 13px;
    padding: 19px 21px;
    border-bottom: 1px solid var(--line-1);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 74%, transparent), transparent);
  }

  .composerSection__head--editor {
    align-items: center;
  }

  .composerSection__head--compact {
    align-items: center;
    justify-content: space-between;
    padding: 16px 17px;
  }

  .sectionIndex {
    display: grid;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line-1));
    border-radius: 11px;
    background: var(--surface-1);
    color: color-mix(in srgb, var(--accent) 75%, var(--ink-1));
    font-size: 0.67rem;
    font-weight: 720;
    box-shadow: var(--shadow-1);
  }

  .composerSection__heading {
    min-width: 0;
    flex: 1 1 auto;
  }

  .composerSection__heading p {
    max-width: 680px;
    margin: 4px 0 0;
    color: var(--ink-3);
    font-size: 0.73rem;
    line-height: 1.45;
  }

  .composerSection__body {
    padding: 21px;
  }

  .composerSection__body--compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 17px;
  }

  .input--title {
    min-height: 56px;
    font-size: 1.04rem;
    font-weight: 610;
    letter-spacing: -0.018em;
  }

  .editorStats {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin-left: auto;
  }

  .editorStats > span {
    padding: 5px 8px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--ink-3);
    font-size: 0.65rem;
  }

  .editorStats strong {
    color: var(--ink-1);
    font-weight: 660;
  }

  .editorToolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-1);
    background: color-mix(in srgb, var(--surface-2) 86%, var(--surface-1));
  }

  .editorBar {
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
  }

  .editorToolGroup {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 2px;
    padding-right: 7px;
    border-right: 1px solid var(--line-1);
  }

  .editorToolGroup:last-child {
    padding-right: 0;
    border-right: 0;
  }

  .editorTool,
  .editorBlockSelect {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 0.73rem;
    font-weight: 650;
    cursor: pointer;
    transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
  }

  .editorTool {
    display: inline-grid;
    width: 32px;
    place-items: center;
    padding: 0;
    line-height: 1;
    user-select: none;
  }

  .editorTool--wide {
    width: auto;
    min-width: 45px;
    padding: 0 7px;
    font-size: 0.66rem;
  }

  .editorTool:hover,
  .editorBlockSelect:hover {
    border-color: var(--line-1);
    background: var(--surface-1);
    color: var(--ink-1);
  }

  .editorTool.is-active,
  .editorTool[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--action) 28%, var(--line-1));
    background: color-mix(in srgb, var(--action) 10%, var(--surface-1));
    color: var(--action);
  }

  .editorTool:focus-visible,
  .editorBlockSelect:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 1px;
  }

  .editorBlockSelect {
    width: 118px;
    padding: 0 28px 0 9px;
    border-color: var(--line-1);
    background: var(--surface-1);
  }

  .editorTool--file {
    position: relative;
    overflow: hidden;
  }

  .editorTool--file input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .editorTool--file:focus-within {
    outline: 3px solid var(--ring);
  }

  .editorTool.is-loading {
    opacity: 0.55;
    pointer-events: none;
  }

  .editorCanvas {
    padding: clamp(18px, 3vw, 34px);
    background: color-mix(in srgb, var(--surface-3) 54%, var(--surface-2));
  }

  .composerSection--editor .editor {
    width: min(100%, 820px);
    min-height: clamp(520px, 62vh, 790px);
    margin: 0 auto;
    padding: clamp(30px, 5vw, 58px);
    border: 0;
    border-radius: 5px;
    background: var(--surface-1);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--ink-1) 6%, transparent), 0 16px 42px color-mix(in srgb, var(--ink-1) 7%, transparent);
  }

  .composerSection--editor .editor:focus {
    background: var(--surface-1);
    box-shadow: 0 0 0 2px var(--action), 0 0 0 6px var(--ring), 0 18px 46px color-mix(in srgb, var(--ink-1) 8%, transparent);
  }

  .composerSection--editor .editor h2 {
    margin-top: 1.7em;
    font-size: clamp(1.55rem, 2.2vw, 2rem);
  }

  .composerSection--editor .editor h3 {
    margin: 1.45em 0 0.5em;
    font-size: clamp(1.22rem, 1.7vw, 1.48rem);
    line-height: 1.3;
    letter-spacing: -0.025em;
  }

  .composerSection--editor .editor blockquote {
    margin: 1.5em 0;
    padding: 5px 0 5px 20px;
    border-left: 3px solid var(--action);
    color: var(--ink-2);
    font-size: 1.08em;
    font-style: italic;
  }

  .composerSection--editor .editor ul,
  .composerSection--editor .editor ol {
    margin: 0 0 1.2em;
    padding-left: 1.5em;
  }

  .composerSection--editor .editor li {
    margin: 0.35em 0;
    padding-left: 0.2em;
  }

  .composerSection--editor .editor a {
    color: var(--action);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .composerSection--editor .editor hr {
    height: 1px;
    margin: 2.2em 0;
    border: 0;
    background: var(--line-1);
  }

  .composerSection--editor .editor img {
    margin: 1.6em auto;
    box-shadow: var(--shadow-1);
  }

  .editorStatusBar {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 14px;
    border-top: 1px solid var(--line-1);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: 0.65rem;
  }

  .editorStatusBar kbd {
    padding: 2px 5px;
    border: 1px solid var(--line-1);
    border-bottom-color: var(--line-2);
    border-radius: 5px;
    background: var(--surface-1);
    color: var(--ink-2);
    font-family: inherit;
    font-size: 0.61rem;
    box-shadow: 0 1px 0 var(--line-1);
  }

  .editorStatusBar__mode {
    color: var(--ink-2);
    font-weight: 650;
  }

  .inputAffix {
    position: relative;
    display: flex;
    align-items: center;
  }

  .inputAffix > span {
    position: absolute;
    z-index: 1;
    left: 13px;
    color: var(--ink-3);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.7rem;
    pointer-events: none;
  }

  .inputAffix > .input {
    padding-left: 54px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.75rem;
  }

  .field__meta,
  .uploadProgress__copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  .field__meta small {
    font-size: inherit;
  }

  .field__meta strong {
    color: var(--ink-2);
    font-weight: 630;
    font-variant-numeric: tabular-nums;
  }

  .qualityBadge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 8px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: var(--surface-1);
    color: var(--ink-3);
    font-size: 0.62rem;
    font-weight: 610;
  }

  .contentQualityCard {
    display: grid;
    gap: 12px;
    padding: 17px;
    border-top: 2px solid var(--warning);
  }

  .contentQualityCard[data-level="good"],
  .contentQualityCard[data-level="strong"] {
    border-top-color: var(--positive);
  }

  .contentQualityCard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .contentQualityCard__head .h3 {
    margin-top: 3px;
  }

  .contentQualityCard__head > strong {
    color: var(--warning);
    font-size: 1.12rem;
    font-variant-numeric: tabular-nums;
  }

  .contentQualityCard[data-level="good"] .contentQualityCard__head > strong,
  .contentQualityCard[data-level="strong"] .contentQualityCard__head > strong {
    color: var(--positive);
  }

  .contentQualityProgress {
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--surface-3);
  }

  .contentQualityProgress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--warning), var(--brand-primary));
    transition: width var(--dur-base) var(--ease-out);
  }

  .contentQualityCard[data-level="good"] .contentQualityProgress span,
  .contentQualityCard[data-level="strong"] .contentQualityProgress span {
    background: linear-gradient(90deg, var(--positive), var(--brand-primary));
  }

  .contentQualityCard > p {
    margin: 0;
    color: var(--ink-3);
    font-size: 0.73rem;
  }

  .contentQualityChecklist {
    display: grid;
    gap: 7px;
  }

  .contentQualityChecklist button,
  .contentQualityReady {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line-1);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.7rem;
    text-align: left;
  }

  .contentQualityChecklist button {
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  }

  .contentQualityChecklist button:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--line-1));
    background: color-mix(in srgb, var(--brand-soft-source) 24%, var(--surface-2));
    color: var(--ink-1);
  }

  .contentQualityChecklist button > span:first-child {
    color: var(--warning);
    font-size: 0.9rem;
  }

  .contentQualityChecklist button > span:last-child {
    color: var(--ink-3);
    font-size: 1rem;
  }

  .contentQualityReady {
    grid-template-columns: auto 1fr;
    border-color: color-mix(in srgb, var(--positive) 30%, var(--line-1));
    background: var(--positive-soft);
    color: var(--positive);
  }

  .blogEditorField {
    border: 0;
    border-radius: 0;
  }

  .dropzone--cover {
    min-height: 174px;
    border: 0;
    border-radius: 0;
  }

  .dropzone--cover .dropzone__title::before {
    display: none;
  }

  .dropzone__icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 auto 10px;
    border: 1px solid color-mix(in srgb, var(--action) 16%, var(--line-1));
    border-radius: 14px;
    background: var(--surface-1);
    color: var(--action);
    font-size: 1.15rem;
    box-shadow: var(--shadow-1);
  }

  .dropzone__meta {
    display: block;
    margin-top: 8px;
    color: var(--ink-3);
    font-size: 0.65rem;
  }

  div.uploadProgress {
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--line-1);
    background: var(--surface-2);
  }

  #coverUploadProgress,
  progress.uploadProgress,
  #mediaUploadProgress {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    appearance: none;
  }

  #coverUploadProgress::-webkit-progress-bar,
  progress.uploadProgress::-webkit-progress-bar,
  #mediaUploadProgress::-webkit-progress-bar {
    border-radius: inherit;
    background: var(--surface-3);
  }

  #coverUploadProgress::-webkit-progress-value,
  progress.uploadProgress::-webkit-progress-value,
  #mediaUploadProgress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--action), var(--accent2));
  }

  /* Media library */
  .mediaUploadSurface {
    cursor: pointer;
  }

  .mediaUploadSurface__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .mediaUploadSurface__visual {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    place-items: center;
  }

  .mediaUploadSurface__glow {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--action) 18%, transparent), transparent 67%);
    animation: floatOrb 5s var(--ease-standard) infinite alternate;
  }

  .mediaUploadSurface__visual .mediaUploadSurface__icon {
    position: relative;
    z-index: 1;
  }

  .mediaUploadSurface > .mediaUploadSurface__content {
    display: grid;
    max-width: none;
    flex: 1 1 auto;
    align-items: start;
    gap: 6px;
  }

  .mediaUploadSurface__title {
    color: var(--ink-1);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
    font-weight: 670;
    letter-spacing: -0.038em;
  }

  .mediaUploadSurface__copy {
    max-width: 720px;
    color: var(--ink-2);
    font-size: 0.84rem;
    line-height: 1.55;
  }

  .mediaUploadSurface__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
  }

  .mediaUploadSurface__actions .mediaUploadSurface__meta {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    font-size: 0.68rem;
  }

  .mediaUploadSurface__feedback {
    display: grid;
    max-width: 620px;
    gap: 6px;
    margin-top: 5px;
  }

  .uploadStatus {
    min-height: 0;
    color: var(--ink-3);
    font-size: 0.7rem;
  }

  .mediaLibrary {
    overflow: hidden;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-4);
    background: var(--surface-1);
    box-shadow: var(--shadow-1);
  }

  .mediaLibrary .mediaGrid {
    padding: var(--space-4);
  }

  /* AI-first blog composer */
  .blogComposerPage {
    gap: 18px;
  }

  .blogComposerPage .blogComposerHead {
    min-height: 112px;
    padding: 22px 26px;
  }

  .blogComposerPage .editorWorkspace {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
  }

  .blogComposerPage .editorWorkspace__main,
  .blogComposerPage .editorWorkspace__rail {
    gap: 16px;
  }

  .aiComposerHero {
    position: relative;
    display: grid;
    gap: 16px;
    overflow: hidden;
    padding: clamp(20px, 2.5vw, 30px);
    border: 1px solid color-mix(in srgb, var(--action) 28%, var(--line-1));
    border-radius: var(--radius-5);
    background:
      radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--accent2) 20%, transparent), transparent 32%),
      radial-gradient(circle at 6% 110%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 36%),
      linear-gradient(128deg, color-mix(in srgb, var(--action) 8%, var(--surface-1)), var(--surface-1) 55%);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--action) 11%, transparent), var(--shadow-1);
  }

  .aiComposerHero::after {
    position: absolute;
    top: -70px;
    right: -45px;
    width: 180px;
    height: 180px;
    border: 1px solid color-mix(in srgb, var(--accent2) 22%, transparent);
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  .aiComposerHero__head {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 860px;
    align-items: flex-start;
    gap: 14px;
  }

  .aiComposerHero__head .h3 {
    margin-top: 2px;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    letter-spacing: -.035em;
  }

  .aiComposerHero__head p {
    margin: 5px 0 0;
    color: var(--ink-2);
    font-size: .82rem;
    line-height: 1.5;
  }

  .aiComposerHero__mark {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--action) 26%, var(--line-1));
    border-radius: 14px;
    background: linear-gradient(145deg, var(--action), color-mix(in srgb, var(--accent) 70%, var(--action)));
    color: var(--on-action);
    font-size: 1.05rem;
    box-shadow: var(--shadow-action);
  }

  .aiComposerHero__workspace {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: stretch;
    gap: 10px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--action) 20%, var(--line-1));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-1) 91%, transparent);
    box-shadow: 0 12px 34px rgba(31, 41, 55, .08);
  }

  .aiComposerPrompt {
    min-width: 0;
  }

  .aiComposerPrompt .textarea {
    min-height: 112px;
    padding: 15px 17px;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: .88rem;
    line-height: 1.55;
    resize: vertical;
  }

  .aiComposerPrompt .textarea:focus {
    outline: 0;
    box-shadow: none;
  }

  .aiComposerGenerate {
    display: grid;
    min-height: 112px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 13px;
    text-align: left;
  }

  .aiComposerGenerate > span:nth-child(2) {
    display: grid;
    gap: 3px;
  }

  .aiComposerGenerate strong {
    color: inherit;
    font-size: .86rem;
  }

  .aiComposerGenerate small {
    color: color-mix(in srgb, var(--on-action) 76%, transparent);
    font-size: .62rem;
    font-weight: 560;
  }

  .aiComposerGenerate__icon {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
  }

  .aiPromptTemplates {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
  }

  .aiPromptTemplates > span {
    margin-right: 2px;
    color: var(--ink-3);
    font-size: .66rem;
    font-weight: 650;
  }

  .aiPromptTemplates button {
    min-height: 29px;
    padding: 0 10px;
    border: 1px solid var(--line-1);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--surface-1) 85%, transparent);
    color: var(--ink-2);
    font-size: .64rem;
    font-weight: 620;
    cursor: pointer;
    transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
  }

  .aiPromptTemplates button:hover {
    border-color: color-mix(in srgb, var(--action) 34%, var(--line-1));
    background: var(--brand-primary-soft);
    color: var(--action);
    transform: translateY(-1px);
  }

  .aiGeneratedState {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--positive) 25%, var(--line-1));
    border-radius: 12px;
    background: var(--positive-soft);
    color: var(--positive);
    font-size: .68rem;
  }

  .aiGeneratedState[hidden] { display: none; }
  .aiGeneratedState > span { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
  .aiGeneratedState i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 7px; background: var(--positive); color: #fff; font-style: normal; font-weight: 800; }
  .aiGeneratedState strong { color: inherit; }

  .aiComposerSteps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .aiComposerSteps li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  }

  .aiComposerSteps i {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    background: var(--surface-1);
    color: var(--action);
    font-size: .62rem;
    font-style: normal;
    font-weight: 760;
    box-shadow: var(--shadow-1);
  }

  .aiComposerSteps span {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .aiComposerSteps strong { color: var(--ink-1); font-size: .68rem; }
  .aiComposerSteps small { overflow: hidden; color: var(--ink-3); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }

  .aiPageLoading {
    position: fixed;
    z-index: calc(var(--z-modal) + 10);
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--canvas) 82%, transparent);
    backdrop-filter: blur(14px) saturate(115%);
  }

  .aiPageLoading[hidden] { display: none; }

  .aiPageLoading__card {
    position: relative;
    display: grid;
    width: min(480px, 100%);
    place-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 36px;
    border: 1px solid color-mix(in srgb, var(--action) 26%, var(--line-1));
    border-radius: 26px;
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--action) 12%, transparent), transparent 42%), var(--surface-1);
    box-shadow: var(--shadow-3);
    text-align: center;
  }

  .aiPageLoading__card > strong {
    margin-top: 2px;
    color: var(--ink-1);
    font-size: 1.25rem;
    letter-spacing: -.025em;
  }

  .aiPageLoading__card > small {
    max-width: 360px;
    color: var(--ink-3);
    font-size: .76rem;
    line-height: 1.55;
  }

  .aiPageLoading__orb {
    position: relative;
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    margin-bottom: 5px;
  }

  .aiPageLoading__orb i {
    position: absolute;
    inset: 0;
    border: 2px solid color-mix(in srgb, var(--action) 20%, transparent);
    border-top-color: var(--action);
    border-radius: 50%;
    animation: aiEditorSpin 1.1s linear infinite;
  }

  .aiPageLoading__orb b {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(145deg, var(--action), var(--accent));
    color: var(--on-action);
    box-shadow: var(--shadow-action);
  }

  .aiPageLoading .aiStageProgress {
    width: min(320px, 92%);
    margin-top: 8px;
  }

  .aiPageLoading__note {
    margin-top: 4px;
    color: var(--positive);
    font-size: .63rem;
    font-weight: 650;
  }

  body.ai-generation-active { overflow: hidden; }

  .blogComposerPage .composerMetaField .field__hint {
    display: none;
  }

  .blogComposerPage .composerSection__body {
    gap: 15px;
  }

  #page-blogNew .composerSection:not(.composerSection--editor) .composerSection__heading p {
    max-width: 560px;
  }

  #page-blogNew .editorToolGroup--optional,
  #page-blogNew .editorTool--optional {
    display: none;
  }

  /* Content calendar */
  .contentCalendarPage {
    display: grid;
    gap: var(--space-5);
  }

  .calendarToolbar {
    display: grid;
    grid-template-columns: minmax(310px, 1fr) minmax(210px, 280px) auto;
    align-items: end;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .calendarMonthControls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
  }

  .calendarMonthControls .h3 {
    margin-left: 8px;
    font-size: 1.18rem;
    white-space: nowrap;
  }

  .calendarCompanyField {
    gap: 5px;
  }

  .calendarFilters {
    justify-self: end;
  }

  .calendarSummary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .calendarSummaryCard {
    display: flex;
    min-height: 94px;
    align-items: center;
    gap: 14px;
    padding: 17px;
    color: var(--ink-1);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
  }

  .calendarSummaryCard:hover {
    border-color: color-mix(in srgb, var(--action) 30%, var(--line-1));
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }

  .calendarSummaryCard__icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    font-size: 1.1rem;
    font-weight: 750;
  }

  .calendarSummaryCard__icon--created { background: var(--info-soft); color: var(--info); }
  .calendarSummaryCard__icon--published { background: var(--positive-soft); color: var(--positive); }
  .calendarSummaryCard__icon--draft { background: var(--warning-soft); color: var(--warning); }
  .calendarSummaryCard small { display: block; color: var(--ink-3); font-size: .72rem; }
  .calendarSummaryCard strong { display: block; margin-top: 2px; font-size: 1.65rem; letter-spacing: -.04em; }

  .calendarSurface {
    position: relative;
    overflow: hidden;
    padding: 0;
  }

  .calendarSurface[aria-busy="true"]::after {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--surface-1) 76%, transparent);
    color: var(--action);
    content: "Takvim yükleniyor…";
    font-size: .78rem;
    font-weight: 700;
    backdrop-filter: blur(2px);
  }

  .calendarWeekdays,
  .calendarGrid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .calendarWeekdays {
    border-bottom: 1px solid var(--line-1);
    background: var(--surface-2);
  }

  .calendarWeekdays span {
    padding: 12px 14px;
    color: var(--ink-3);
    font-size: .68rem;
    font-weight: 720;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .calendarDay {
    min-width: 0;
    min-height: 132px;
    padding: 10px;
    border-right: 1px solid var(--line-1);
    border-bottom: 1px solid var(--line-1);
    background: var(--surface-1);
  }

  .calendarDay:nth-child(7n) { border-right: 0; }
  .calendarDay:nth-last-child(-n + 7) { border-bottom: 0; }
  .calendarDay.is-outside { background: color-mix(in srgb, var(--surface-2) 66%, var(--surface-1)); }
  .calendarDay.is-outside .calendarDay__number,
  .calendarDay.is-outside .calendarEvent { opacity: .48; }

  .calendarDay__number {
    display: flex;
    min-height: 25px;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-2);
    font-size: .75rem;
    font-weight: 720;
  }

  .calendarDay.is-today .calendarDay__number > span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    background: var(--action);
    color: var(--on-action);
  }

  .calendarDay__number small { color: var(--action); font-size: .59rem; }
  .calendarDay__events { display: grid; gap: 5px; margin-top: 6px; }

  .calendarEvent {
    display: grid;
    min-width: 0;
    gap: 1px;
    padding: 6px 7px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 8px;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
  }

  .calendarEvent span { overflow: hidden; font-size: .68rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
  .calendarEvent small { color: inherit; font-size: .56rem; opacity: .76; }
  .calendarEvent--created { border-color: color-mix(in srgb, var(--info) 22%, transparent); border-left-color: var(--info); background: var(--info-soft); }
  .calendarEvent--published { border-color: color-mix(in srgb, var(--positive) 22%, transparent); border-left-color: var(--positive); background: var(--positive-soft); }
  .calendarEvent--both { border-color: color-mix(in srgb, var(--accent) 22%, transparent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-1)); }
  .calendarEvent:hover { filter: brightness(.98); transform: translateX(1px); }
  .calendarMore { padding-left: 7px; color: var(--ink-3); font-size: .6rem; }
  .calendarAgenda { display: none; }

  .calendarLegend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 12px 16px;
    border-top: 1px solid var(--line-1);
    background: var(--surface-2);
    color: var(--ink-3);
    font-size: .66rem;
  }

  .calendarLegend span { display: inline-flex; align-items: center; gap: 6px; }
  .calendarDot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
  .calendarDot--created { background: var(--info); }
  .calendarDot--published { background: var(--positive); }
  .calendarDot--both { background: var(--accent); }

  /* Blog campaign studio */
  .campaignStudio {
    display: grid;
    gap: var(--space-5);
  }

  .campaignHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line-1));
    background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, var(--surface-1)), color-mix(in srgb, var(--accent2) 6%, var(--surface-1)));
  }

  .campaignHero__copy { display: flex; min-width: 0; align-items: flex-start; gap: 14px; }
  .campaignHero__copy p { max-width: 760px; margin: 5px 0 0; color: var(--ink-2); font-size: .8rem; line-height: 1.55; }
  .campaignHero__icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--surface-1); color: var(--accent); box-shadow: var(--shadow-1); }
  .campaignState { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line-1); border-radius: var(--radius-full); background: var(--surface-1); color: var(--ink-3); font-size: .66rem; font-weight: 680; }
  .campaignState.is-dirty { border-color: color-mix(in srgb, var(--warning) 35%, var(--line-1)); background: var(--warning-soft); color: var(--warning); }

  .campaignBrief__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campaignActions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 0; }
  .campaignActions > div { display: flex; flex: 0 0 auto; gap: 8px; }
  .campaignPrivacy { max-width: 620px; margin: 0; }

  .campaignOutputs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .campaignOutput { min-width: 0; overflow: hidden; padding: 0; }
  .campaignOutput--wide { grid-column: 1 / -1; }
  .campaignOutput > header { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--line-1); background: var(--surface-2); }
  .campaignOutput > header > div { display: grid; min-width: 0; flex: 1; }
  .campaignOutput > header small { color: var(--ink-3); font-size: .57rem; font-weight: 760; letter-spacing: .07em; }
  .campaignOutput > header strong { color: var(--ink-1); font-size: .78rem; }
  .campaignOutput .textarea { width: calc(100% - 28px); margin: 14px; resize: vertical; }

  .campaignChannel { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 10px; font-size: .67rem; font-weight: 800; }
  .campaignChannel--idea { background: color-mix(in srgb, var(--accent) 12%, var(--surface-1)); color: var(--accent); }
  .campaignChannel--instagram { background: #fff0f6; color: #c13584; }
  .campaignChannel--linkedin { background: #eaf5ff; color: #0a66c2; }
  .campaignChannel--whatsapp { background: #eafaf0; color: #168a43; }
  .campaignChannel--ads { background: var(--warning-soft); color: var(--warning); }
  .campaignChannel--tag { background: var(--surface-3); color: var(--ink-2); }

  html[data-theme="dark"] .campaignChannel--instagram,
  html[data-theme="dark"] .campaignChannel--linkedin,
  html[data-theme="dark"] .campaignChannel--whatsapp { background: var(--surface-3); }
}

@layer responsive {
  @media (max-width: 980px) {
    .blogComposerPage .editorWorkspace { grid-template-columns: minmax(0, 1fr); }
    .aiComposerHero__workspace { grid-template-columns: minmax(0, 1fr) 210px; }
  }

  @media (max-width: 700px) {
    .blogComposerPage .blogComposerHead { min-height: auto; padding: 18px; }
    .blogComposerPage .saveState { display: none; }
    .aiComposerHero { gap: 13px; padding: 17px; border-radius: 20px; }
    .aiComposerHero__head { gap: 10px; }
    .aiComposerHero__mark { width: 38px; height: 38px; border-radius: 12px; }
    .aiComposerHero__head .h3 { font-size: 1.18rem; }
    .aiComposerHero__workspace { grid-template-columns: 1fr; padding: 6px; }
    .aiComposerPrompt .textarea { min-height: 126px; }
    .aiComposerGenerate { min-height: 62px; grid-template-columns: auto 1fr auto; }
    .aiPromptTemplates { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
    .aiPromptTemplates > span,
    .aiPromptTemplates button { flex: 0 0 auto; }
    .aiComposerSteps { display: flex; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
    .aiComposerSteps li { min-width: 205px; flex: 0 0 auto; }
    .aiPageLoading__card { padding: 28px 20px; border-radius: 22px; }
    .blogComposerPage .composerMetaField { grid-column: 1 / -1; }
  }

  @media (max-width: 1100px) {
    .calendarToolbar { grid-template-columns: 1fr auto; }
    .calendarCompanyField { grid-column: 1 / -1; grid-row: 2; }
  }

  @media (max-width: 740px) {
    .calendarToolbar { grid-template-columns: 1fr; align-items: stretch; }
    .calendarCompanyField { grid-column: auto; grid-row: auto; }
    .calendarFilters { justify-self: stretch; overflow-x: auto; }
    .calendarMonthControls { flex-wrap: wrap; }
    .calendarMonthControls .h3 { width: 100%; margin: 7px 0 0; }
    .calendarSummary { grid-template-columns: 1fr; gap: 10px; }
    .calendarSummaryCard { min-height: 72px; padding: 12px; }
    .calendarSummaryCard__icon { width: 40px; height: 40px; }
    .calendarSummaryCard strong { font-size: 1.28rem; }
    .calendarWeekdays,
    .calendarGrid { display: none; }
    .calendarAgenda { display: grid; gap: 0; }
    .calendarAgendaDay { border-bottom: 1px solid var(--line-1); }
    .calendarAgendaDay:last-child { border-bottom: 0; }
    .calendarAgendaDay > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 8px; }
    .calendarAgendaDay > header strong { font-size: .78rem; }
    .calendarAgendaDay > header span { color: var(--ink-3); font-size: .64rem; }
    .calendarAgendaEvent { display: grid; width: 100%; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 14px; border-top: 1px solid color-mix(in srgb, var(--line-1) 65%, transparent); background: transparent; color: var(--ink-1); text-align: left; }
    .calendarAgendaEvent > span:nth-child(2) { display: grid; gap: 2px; }
    .calendarAgendaEvent strong { font-size: .73rem; }
    .calendarAgendaEvent small { color: var(--ink-3); font-size: .62rem; }
    .calendarLegend { gap: 10px; }

    .campaignHero { align-items: flex-start; flex-direction: column; }
    .campaignState { margin-left: 56px; }
    .campaignBrief__grid,
    .campaignOutputs { grid-template-columns: 1fr; }
    .campaignOutput--wide { grid-column: auto; }
    .campaignActions { align-items: stretch; flex-direction: column; }
    .campaignActions > div { flex-direction: column-reverse; }
    .campaignActions .btn { width: 100%; }
  }

  @media (max-width: 1260px) {
    .dashboardWorkspace {
      grid-template-columns: 1fr;
    }

    .quickActions__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .loginHero__proof {
      grid-template-columns: 1fr;
    }

    .loginHero__proof li:nth-child(3) {
      display: none;
    }
  }

  @media (max-width: 1100px) {
    .settingsOverview,
    .mediaSummary {
      grid-template-columns: 1fr;
    }

    .summaryMetric {
      min-height: 72px;
    }

    .loginProductPreview {
      display: none;
    }
  }

  @media (max-width: 980px) {
    .editorWorkspace {
      grid-template-columns: minmax(0, 1fr);
    }

    .composerTabs {
      display: flex;
    }

    .editorWorkspace__rail {
      position: static;
    }

    .editorWorkspace .tabPanel {
      display: none;
    }

    .editorWorkspace .tabPanel.is-active {
      display: block;
    }

    .dashboardWorkspace__main {
      grid-template-columns: 1fr;
    }

    .dashboardKpis {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (max-width: 800px) {
    .loginHero__content {
      display: none;
    }

    .login__brandMark {
      width: 42px;
      height: 42px;
      border-radius: 13px;
    }

    .dashboardKpis {
      grid-template-columns: 1fr;
    }

    .dashboardKpis .kpiCard {
      min-height: 132px;
    }

    .quickActions__list {
      grid-template-columns: 1fr;
    }

    .editorStats {
      margin-left: 0;
    }

    .composerSection__head--editor {
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .editorCanvas {
      padding: 12px;
    }

    .composerSection--editor .editor {
      min-height: 430px;
      padding: 28px 24px;
    }

    .mediaUploadSurface__visual {
      width: 64px;
      height: 64px;
    }
  }

  @media (max-width: 640px) {
    .settingsOverview,
    .mediaSummary {
      gap: 9px;
    }

    .summaryMetric {
      min-height: 68px;
      padding: 12px;
    }

    .summaryMetric__icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
    }

    .manageIntro__badge {
      display: none;
    }

    .pageEyebrow,
    .pageHead__eyebrow {
      font-size: 0.61rem;
    }

    .loginCard__context {
      display: none;
    }

    .loginCard__top {
      justify-content: center;
    }

    .loginCard__top .pill-group {
      width: 100%;
      min-width: 0;
      justify-content: center;
      flex-wrap: nowrap;
      overflow-x: auto;
    }

    .dashboardWelcome {
      padding: 20px !important;
    }

    .dashboardWelcome__top {
      align-items: flex-start;
      flex-direction: column;
    }

    .dashboardWelcome__copy h3 {
      font-size: 1.65rem;
    }

    .contentDistribution__visual {
      min-height: 160px;
    }

    .composerTabs {
      width: 100%;
    }

    .composerSection__head,
    .composerSection__body {
      padding: 16px;
    }

    .editorToolbar {
      align-items: flex-start;
      flex-direction: column;
      padding: 8px;
    }

    .editorBar {
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-bottom: 3px;
      scrollbar-width: thin;
    }

    .editorToolGroup {
      flex: 0 0 auto;
    }

    .editorStatusBar > span:first-child {
      display: none;
    }

    .editorStats {
      width: 100%;
      flex-wrap: wrap;
    }

    .mediaUploadSurface {
      gap: 12px;
    }

    .mediaUploadSurface__visual {
      width: 54px;
      height: 54px;
    }

    .mediaUploadSurface__actions {
      align-items: flex-start;
      flex-direction: column;
    }

    .toolbarHint {
      display: none;
    }
  }
}