/* ==========================================================================
   calm.css  (8 september 2026)
   Het rustige ontwerpsysteem voor het SEO AutoPilot-dashboard. Laadt als
   laatste stylesheet op elke dashboard- en accountpagina en overschrijft de
   tokens van dashboard-colors.css, dashboard-theme.css, admin-light-override.css
   en sidebar.css. Eén canvas (licht), Plus Jakarta Sans, één accent, zwarte
   primaire knop, status als stip. Geen gloed, geen aurora, geen kapitalen.
   calm-shell.js bouwt de zijbalk met zes items en de sectietabs.
   ========================================================================== */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- Tokens: één set, ongeacht data-theme ------------------------------ */
:root, html[data-theme="light"], html[data-theme="dark"], html.calm {
  --calm-canvas: #f6f6f3; --calm-card: #ffffff; --calm-line: #e7e7e2; --calm-line-2: #f0f0ec;
  --calm-ink: #111311; --calm-ink-2: #3d3f3c; --calm-mute: #6f716d; --calm-dim: #a3a5a0;
  --calm-accent: #2563eb; --calm-accent-soft: #eef3ff; --calm-black: #141414;
  --calm-ok: #1a9e5c; --calm-warn: #d98a12; --calm-err: #d0433b;
  --calm-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --c-primary: var(--calm-accent); --c-primary-hover: #1d4ed8; --c-secondary: var(--calm-ink-2);
  --c-bg: var(--calm-canvas); --c-bg-card: var(--calm-card); --c-bg-input: var(--calm-card); --c-bg-hover: #f1f1ee;
  --c-border: var(--calm-line); --c-border-light: #dcdcd6;
  --c-text: var(--calm-ink-2); --c-text-bright: var(--calm-ink); --c-text-muted: var(--calm-mute); --c-text-dim: var(--calm-dim);
  --c-success: var(--calm-ok); --c-warning: var(--calm-warn); --c-error: var(--calm-err); --c-info: var(--calm-accent);
  --c-btn-primary-bg: var(--calm-black); --c-btn-primary-text: #ffffff; --c-btn-primary-hover: #000000;
  --c-btn-ghost-border: var(--calm-line); --c-btn-ghost-text: var(--calm-ink-2);
  --dash-bg: var(--calm-canvas); --dash-panel-bg: var(--calm-card); --dash-panel-border: var(--calm-line); --dash-panel-hover: #f1f1ee;
  --dash-border-light: var(--calm-line); --dash-border-subtle: var(--calm-line-2); --dash-input-bg: var(--calm-card); --dash-input-border: var(--calm-line);
  --dash-stat-bg: var(--calm-card); --dash-stat-border: var(--calm-line);
  --dash-text-primary: var(--calm-ink); --dash-text-bright: var(--calm-ink); --dash-text-secondary: var(--calm-ink-2); --dash-text-muted: var(--calm-mute); --dash-text-dim: var(--calm-dim);
  --dash-purple: var(--calm-ink-2); --dash-purple-dim: #f1f1ee; --dash-purple-border: var(--calm-line); --dash-cyan: var(--calm-accent); --dash-green: var(--calm-ok); --dash-amber: var(--calm-warn); --dash-red: var(--calm-err);
  --text-muted: var(--calm-mute); --text-secondary: var(--calm-ink-2);
  --a30-surface: var(--calm-card); --a30-surface-2: var(--calm-canvas); --a30-border: var(--calm-line); --a30-line: transparent; --a30-aurora-opacity: 0; --a30-radius: 12px;
  color-scheme: light;
}

/* ---- Basis ------------------------------------------------------------ */
html.calm, html.calm body { background: var(--calm-canvas) !important; color: var(--calm-ink-2); }
html.calm body, html.calm button, html.calm input, html.calm select, html.calm textarea { font-family: var(--calm-font) !important; }
html.calm body { font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html.calm h1, html.calm h2, html.calm h3, html.calm h4 { letter-spacing: -0.015em; font-weight: 600; }
html.calm .main-content { background: var(--calm-canvas) !important; }
html.calm .content-wrapper { padding: 26px 34px 48px; }
html.calm .content-wrapper::before { display: none !important; }
html.calm #sapUsageBar, html.calm #prefetchBar, html.calm .logo-beta, html.calm .nav-section-label, html.calm .nav-divider,
html.calm .sf-theme, html.calm .sidebar-nav { display: none !important; }

/* ---- Zijbalk ---------------------------------------------------------- */
html.calm .sidebar { background: var(--calm-card) !important; border-right: 1px solid var(--calm-line) !important; width: 236px !important; box-shadow: none !important; }
html.calm .main-content { margin-left: 236px !important; }
html.calm .sidebar.collapsed { width: 64px !important; }
html.calm .sidebar.collapsed ~ .main-content { margin-left: 64px !important; }
html.calm .sidebar-header { background: var(--calm-card) !important; border-bottom: none !important; height: 62px !important; padding: 0 16px !important; }
html.calm .sidebar-logo { color: var(--calm-ink) !important; font-weight: 700 !important; font-size: 0.98rem !important; letter-spacing: -0.01em; gap: 9px !important; }
html.calm .logo-bolt { width: 26px; height: 26px; border-radius: 8px; background: var(--calm-accent); display: inline-flex !important; align-items: center; justify-content: center; }
html.calm .logo-bolt svg path { fill: #fff !important; }
html.calm .sidebar-toggle { color: var(--calm-dim) !important; background: none !important; border: none !important; }
html.calm .calm-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; overflow-y: auto; }
html.calm .calm-group { display: flex; flex-direction: column; }
html.calm .calm-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 10px; border-radius: 9px; color: var(--calm-ink-2); font-size: 0.92rem; font-weight: 500; text-decoration: none !important; transition: background 0.12s, color 0.12s; }
html.calm .calm-item svg { width: 18px; height: 18px; stroke: var(--calm-mute); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
html.calm .calm-item:hover { background: var(--calm-canvas); color: var(--calm-ink); }
html.calm .calm-item.on { background: var(--calm-canvas); color: var(--calm-ink); font-weight: 600; }
html.calm .calm-item.on svg { stroke: var(--calm-ink); }
html.calm .calm-item span { flex: 1; min-width: 0; }
html.calm .calm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent; color: var(--calm-mute); cursor: pointer; padding: 0; flex-shrink: 0; }
html.calm .calm-toggle:hover { background: #ebebe7; color: var(--calm-ink); }
html.calm .calm-toggle .chev { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.15s; }
html.calm .calm-group.open .calm-toggle .chev { transform: rotate(90deg); }
html.calm .calm-sub { display: none; flex-direction: column; gap: 1px; padding: 2px 0 6px 0; }
html.calm .calm-group.open .calm-sub { display: flex; }
html.calm .calm-sub a { display: block; padding: 6px 10px 6px 38px; border-radius: 8px; font-size: 0.86rem; color: var(--calm-mute); text-decoration: none !important; position: relative; }
html.calm .calm-sub a::before { content: ""; position: absolute; left: 19px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--calm-line); transform: translateY(-50%); }
html.calm .calm-sub a:hover { color: var(--calm-ink); background: var(--calm-canvas); }
html.calm .calm-sub a.on { color: var(--calm-ink); font-weight: 600; }
html.calm .calm-sub a.on::before { background: var(--calm-ink); }
html.calm .sidebar.collapsed .calm-item span, html.calm .sidebar.collapsed .calm-toggle, html.calm .sidebar.collapsed .calm-sub { display: none !important; }
html.calm .sidebar.collapsed .calm-item { justify-content: center; padding: 10px 0; }
html.calm .sidebar-footer { background: var(--calm-card) !important; border-top: 1px solid var(--calm-line) !important; padding: 10px 12px 12px !important; }
html.calm .sf-widget { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
html.calm .sf-upgrade { display: flex !important; align-items: center; gap: 10px; margin: 0 0 6px; padding: 10px 12px !important; border-radius: 10px !important; background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; text-decoration: none !important; box-shadow: none !important; }
html.calm .sf-upgrade:hover { border-color: #cfcfc8 !important; }
html.calm .sf-upgrade .ic { display: none !important; }
html.calm .sf-upgrade .tx b { display: block; font-size: 0.84rem; font-weight: 600; color: var(--calm-ink) !important; }
html.calm .sf-upgrade .tx small { display: block; font-size: 0.76rem; color: var(--calm-mute) !important; }
html.calm .sf-link { display: flex !important; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 9px; color: var(--calm-ink-2) !important; font-size: 0.86rem !important; text-decoration: none !important; background: none !important; border: none !important; }
html.calm .sf-link svg { width: 16px; height: 16px; stroke: var(--calm-mute); }
html.calm .sf-link:hover { background: var(--calm-canvas); color: var(--calm-ink) !important; }
html.calm .user-info { display: flex; align-items: center; gap: 10px; padding: 8px 8px !important; border-radius: 10px; background: none !important; border: none !important; }
html.calm .user-info:hover { background: var(--calm-canvas) !important; }
html.calm .user-avatar { width: 32px !important; height: 32px !important; border-radius: 9px !important; background: var(--calm-ink) !important; color: #fff !important; font-size: 0.72rem !important; font-weight: 700 !important; }
html.calm .user-name { color: var(--calm-ink) !important; font-size: 0.86rem !important; font-weight: 600 !important; }
html.calm .user-email { color: var(--calm-mute) !important; font-size: 0.74rem !important; }
html.calm .user-dropdown { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.25) !important; }
html.calm .user-dropdown-item { color: var(--calm-ink-2) !important; font-size: 0.86rem; }
html.calm .user-dropdown-item:hover { background: var(--calm-canvas) !important; }

/* ---- Kopbalk ----------------------------------------------------------- */
html.calm .top-bar { background: var(--calm-card) !important; border-bottom: 1px solid var(--calm-line) !important; padding: 0 34px !important; box-shadow: none !important; }
html.calm .top-bar h1 { color: var(--calm-ink) !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -0.01em; margin: 0 !important; }
html.calm .top-bar .sub:not(.acct-item) { display: none !important; }
html.calm #acctMenu #acctBtn { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-ink) !important; font-family: var(--calm-font) !important; font-weight: 600 !important; font-size: 0.86rem !important; padding: 6px 10px 6px 6px !important; box-shadow: none !important; }
html.calm #acctMenu #acctAv { background: var(--calm-ink) !important; color: #fff !important; border-radius: 999px !important; font-size: 0.7rem !important; }
html.calm #acctPop { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 14px !important; box-shadow: 0 18px 44px -20px rgba(0,0,0,0.25) !important; }
html.calm #acctPop .acct-item { color: var(--calm-ink-2) !important; text-decoration: none !important; border-radius: 8px; }
html.calm #acctPop .acct-item:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm .calm-tabs { display: flex; gap: 22px; padding: 0 34px; border-bottom: 1px solid var(--calm-line); background: var(--calm-card); }
html.calm .calm-tabs a { padding: 12px 2px 13px; font-size: 0.9rem; font-weight: 500; color: var(--calm-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none !important; white-space: nowrap; }
html.calm .calm-tabs a:hover { color: var(--calm-ink); }
html.calm .calm-tabs a.on { color: var(--calm-ink); font-weight: 600; border-bottom-color: var(--calm-ink); }

/* ---- Kaarten, knoppen, velden ----------------------------------------- */
html.calm .panel, html.calm .integration-card, html.calm .stat-box, html.calm .account-hero, html.calm .ov-tile, html.calm .acc-pagehead, html.calm .usage-section, html.calm .plan-card, html.calm .card, html.calm .widget, html.calm .g-card {
  background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.calm .g-card::before, html.calm .g-card::after { display: none !important; }
html.calm .panel-header, html.calm .integration-header { border-bottom: none !important; padding: 16px 20px 0 !important; background: none !important; }
html.calm .panel-title, html.calm .integration-name { color: var(--calm-ink) !important; font-size: 1rem !important; font-weight: 600 !important; letter-spacing: -0.01em; }
html.calm .panel-body, html.calm .integration-body { padding: 14px 20px 18px !important; }
html.calm .stat-box { padding: 16px 18px !important; }
html.calm .stat-label { color: var(--calm-mute) !important; font-size: 0.8rem !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
html.calm .stat-num { color: var(--calm-ink) !important; font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1.1 !important; font-variant-numeric: tabular-nums; }
html.calm .stat-delta { font-size: 0.76rem !important; font-weight: 600 !important; }
html.calm .stat-sub { color: var(--calm-mute) !important; font-size: 0.76rem !important; }
html.calm .stats-strip { gap: 12px !important; margin-bottom: 14px !important; }
html.calm .widget-grid { gap: 12px !important; margin-bottom: 12px !important; }

html.calm .btn-sm, html.calm .btn-primary-sm, html.calm .btn-primary, html.calm .btn-secondary, html.calm .btn-ghost-sm, html.calm .btn {
  border-radius: 999px !important; font-weight: 600 !important; font-family: var(--calm-font) !important; box-shadow: none !important; transition: background 0.12s, border-color 0.12s, color 0.12s; transform: none !important; }
html.calm .btn-sm-primary, html.calm .btn-primary-sm, html.calm .btn-primary { background: var(--calm-black) !important; color: #fff !important; border: 1px solid var(--calm-black) !important; background-image: none !important; }
html.calm .btn-sm-primary:hover, html.calm .btn-primary-sm:hover, html.calm .btn-primary:hover { background: #000 !important; opacity: 1 !important; }
html.calm .btn-sm-secondary, html.calm .btn-sm-outline, html.calm .btn-secondary, html.calm .btn-ghost-sm { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; }
html.calm .btn-sm-secondary:hover, html.calm .btn-sm-outline:hover, html.calm .btn-secondary:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; }
html.calm .btn-sm-danger { background: var(--calm-card) !important; color: var(--calm-err) !important; border: 1px solid var(--calm-line) !important; }
html.calm .form-input, html.calm input.form-input, html.calm textarea.form-input, html.calm select.form-input { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; color: var(--calm-ink) !important; font-size: 0.92rem !important; padding: 10px 12px !important; }
html.calm .form-input:focus { border-color: var(--calm-ink) !important; box-shadow: none !important; outline: none; }
html.calm .form-group label { color: var(--calm-ink-2) !important; font-size: 0.82rem !important; font-weight: 500 !important; }
html.calm .form-hint { color: var(--calm-mute) !important; font-size: 0.78rem !important; }
html.calm .status-box { border-radius: 12px !important; font-size: 0.86rem !important; }
html.calm .status-box.info { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; color: var(--calm-ink-2) !important; }
html.calm .conn-status, html.calm .badge-package, html.calm .badge-status, html.calm .chip { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; font-size: 0.74rem !important; padding: 3px 10px !important; }
html.calm .conn-dot { width: 6px !important; height: 6px !important; }
html.calm .conn-status.connected .conn-dot { background: var(--calm-ok) !important; } html.calm .conn-status.disconnected .conn-dot { background: var(--calm-err) !important; } html.calm .conn-status.pending .conn-dot { background: var(--calm-warn) !important; }
html.calm .acc-section-label, html.calm .hero-stat-label, html.calm .ov-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; }
html.calm table th { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; }

/* ---- Account-laag van 8 september terugbrengen naar rustig -------------- */
html.calm .account-tabs { background: transparent !important; border: none !important; border-bottom: 1px solid var(--calm-line) !important; border-radius: 0 !important; padding: 0 !important; gap: 18px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
html.calm .account-tab, html.calm .account-tabs a.account-tab { padding: 10px 2px 12px !important; font-size: 0.9rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; background: none !important; border-radius: 0 !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; }
html.calm .account-tabs .account-tab.active, html.calm .account-tabs a.account-tab.active { background: none !important; color: var(--calm-ink) !important; font-weight: 600 !important; border-bottom-color: var(--calm-ink) !important; box-shadow: none !important; }
html.calm .tab-divider { display: none !important; }
html.calm .acc-pagehead { display: none !important; }
html.calm .hero-avatar, html.calm .ov-ic, html.calm .ph-icon { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; box-shadow: none !important; }
html.calm .hero-avatar { background: var(--calm-ink) !important; color: #fff !important; }
html.calm .hero-avatar::after { display: none !important; }
html.calm .hero-stat-value, html.calm .ov-primary { color: var(--calm-ink) !important; }
html.calm .usage-fill, html.calm .usage-fill-lg, html.calm .bar i { background: var(--calm-ink) !important; box-shadow: none !important; }
html.calm .ov-ring .rfg { filter: none !important; stroke: var(--calm-ink) !important; }
html.calm .ov-next, html.calm .ws-nav, html.calm .ws-savebar, html.calm .acc-savebar, html.calm .ig-tile, html.calm .ig-link { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-radius: 12px !important; }
html.calm .ov-next-title .pulse { animation: none !important; box-shadow: none !important; }
html.calm .ov-next-chip { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; }
html.calm .ws-chip.active { background: var(--calm-canvas) !important; }
html.calm .province-check:has(input:checked) { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .province-check:has(input:checked)::before { background: #fff !important; box-shadow: none !important; }
html.calm .ig-tile.connected .ig-tile-dot, html.calm .ov-dot.ok, html.calm .ws-chip.done .dot { background: var(--calm-ok) !important; box-shadow: none !important; }
html.calm .ig-tile-dot, html.calm .ws-chip .dot { box-shadow: none !important; }

/* ---- Links, tabs, restjes ---------------------------------------------- */
html.calm .main-content a { text-decoration: none !important; }
html.calm .calm-tabs a, html.calm .account-tabs a.account-tab { color: var(--calm-mute) !important; }
html.calm .calm-tabs a.on, html.calm .account-tabs a.account-tab.active { color: var(--calm-ink) !important; }
html.calm .ov-next-chip, html.calm .ig-link, html.calm .ig-tile, html.calm .ov-tile, html.calm .ov-tile * { color: var(--calm-ink-2) !important; }
html.calm .ov-primary, html.calm .ov-tile .ov-row .v, html.calm .ig-tile-name { color: var(--calm-ink) !important; }
html.calm .ov-label, html.calm .ov-tile .ov-row .k, html.calm .ig-tile-state { color: var(--calm-mute) !important; }
html.calm .sf-link.sf-theme { display: none !important; }
html.calm .top-bar button:not([class]), html.calm .top-bar a:not([class]):not([id]) { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; padding: 7px 14px !important; font-weight: 600 !important; font-size: 0.84rem !important; font-family: var(--calm-font) !important; }
html.calm .calm-skel { color: transparent !important; position: relative; border-radius: 6px; overflow: hidden; min-width: 60px; display: inline-block; }
html.calm .calm-skel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ececE8, #f6f6f3, #ececE8); background-size: 200% 100%; animation: calm-shimmer 1.4s linear infinite; }
@keyframes calm-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
html.calm .calm-empty { color: var(--calm-mute); font-size: 0.9rem; padding: 4px 0 6px; }
@media (prefers-reduced-motion: reduce) { html.calm .calm-skel::before { animation: none; } }

html.calm .main-content .account-tabs { padding: 0 34px !important; margin-bottom: 0 !important; overflow-x: auto; }
/* :not(#x) tilt de specificiteit boven de globale licht-thema linkregels uit */
html.calm .main-content .account-tabs a.account-tab:not(#calmA):not(#calmB) { color: var(--calm-mute) !important; }
html.calm .main-content .account-tabs a.account-tab.active:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; }
html.calm .main-content .calm-tabs a:not(#calmA):not(#calmB) { color: var(--calm-mute) !important; }
html.calm .main-content .calm-tabs a.on:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; }
html.calm .main-content .ig-link:not(#calmA):not(#calmB), html.calm .main-content .ov-next-chip:not(#calmA):not(#calmB), html.calm .main-content .ov-tile:not(#calmA):not(#calmB), html.calm .main-content .ig-tile:not(#calmA):not(#calmB) { color: var(--calm-ink-2) !important; }
html.calm .main-content .account-tabs + .content-wrapper { padding-top: 26px; }
html.calm .calm-col [style*="uppercase"], html.calm .panel [style*="uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8rem !important; font-weight: 500 !important; }
html.calm .dash-package-strip:empty { display: none !important; }
html.calm #pendingList > div, html.calm #newsList > div { padding-left: 0 !important; padding-right: 0 !important; }

/* ---- Dashboard Overzicht ----------------------------------------------- */
html.calm .calm-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
html.calm .calm-hero h1 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; margin: 0; color: var(--calm-ink); }
html.calm .calm-hero .calm-sub { margin: 3px 0 0; color: var(--calm-mute); font-size: 0.92rem; }
html.calm .calm-acts { display: flex; gap: 8px; flex-shrink: 0; }
html.calm .calm-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; border: 1px solid transparent; cursor: pointer; font-family: var(--calm-font); white-space: nowrap; text-decoration: none !important; }
html.calm .calm-btn.black { background: var(--calm-black); color: #fff; }
html.calm .calm-btn.black:hover { background: #000; }
html.calm .calm-btn.ghost { background: var(--calm-card); color: var(--calm-ink); border-color: var(--calm-line); }
html.calm .calm-btn.ghost:hover { border-color: #cfcfc8; }
html.calm .calm-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; align-items: start; }
html.calm .calm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html.calm .calm-col .widget-grid { grid-template-columns: 1fr !important; margin-bottom: 0 !important; }
html.calm .calm-col > div { margin-bottom: 0 !important; }
html.calm #gscConnectBanner { text-align: left !important; padding: 18px 20px !important; display: none; }
html.calm #gscConnectBanner[style*="display: block"] { display: flex !important; align-items: center; gap: 16px; }
html.calm #gscConnectBanner > div:first-child { display: none; }
html.calm #gscBannerTitle { font-size: 0.95rem !important; margin: 0 !important; }
html.calm #gscBannerDesc { margin: 2px 0 0 !important; }
html.calm #gscConnectBanner > div:nth-child(4) { display: none; }
html.calm #gscBannerBtn { margin-left: auto; border-radius: 999px !important; background: var(--calm-black) !important; padding: 9px 16px !important; white-space: nowrap; }
html.calm #trialBanner, html.calm #setupChecklist, html.calm #firstArticleHero { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; color: var(--calm-ink-2) !important; }
html.calm .dash-package-strip { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm #newsList > div, html.calm #topKeywordsList > div, html.calm #pendingList > div { border-color: var(--calm-line-2) !important; }
html.calm canvas#trafficChart { max-height: 180px; }

@media (max-width: 1100px) { html.calm .calm-cols { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
  html.calm .content-wrapper { padding: 18px 16px 40px; }
  html.calm .top-bar { padding: 0 16px !important; }
  html.calm .calm-tabs { padding: 0 16px; overflow-x: auto; gap: 16px; }
  html.calm .calm-hero { flex-direction: column; }
  html.calm .main-content { margin-left: 0 !important; }
}

/* ---- Artikelen (my-articles) ------------------------------------------- */
html.calm .stats-strip .stat-box { cursor: pointer; transition: border-color 0.12s; }
html.calm .stats-strip .stat-box:hover { border-color: #cfcfc8 !important; transform: none !important; }
html.calm .stats-strip .stat-box.active { border-color: var(--calm-ink) !important; background: var(--calm-card) !important; }
html.calm .panel-count { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line); border-radius: 999px !important; font-size: 0.72rem !important; font-weight: 600 !important; padding: 2px 9px !important; margin-left: 8px; }
html.calm .toolbar { padding: 12px 20px 8px !important; gap: 8px !important; border-bottom: none !important; }
html.calm .toolbar select, html.calm .toolbar input[type="text"] { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-ink) !important; font-size: 0.82rem !important; padding: 7px 12px !important; font-family: var(--calm-font) !important; }
html.calm .toolbar select { appearance: none; -webkit-appearance: none; padding-right: 30px !important; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f716d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; }
html.calm .toolbar select:focus, html.calm .toolbar input:focus { border-color: var(--calm-ink) !important; background-color: var(--calm-card) !important; box-shadow: none !important; }
html.calm .toolbar label { color: var(--calm-ink-2) !important; font-size: 0.82rem !important; }
html.calm .btn-success-sm, html.calm .btn-danger-sm { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; box-shadow: none !important; transform: none !important; }
html.calm .btn-danger-sm:not(:disabled) { color: var(--calm-err) !important; }
html.calm .btn-success-sm:not(:disabled) { background: var(--calm-black) !important; color: #fff !important; border-color: var(--calm-black) !important; }
html.calm .data-table { font-size: 0.88rem !important; }
html.calm .data-table th { background: transparent !important; color: var(--calm-mute) !important; font-size: 0.78rem !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 10px 14px !important; border-bottom: 1px solid var(--calm-line) !important; }
html.calm .data-table td { padding: 12px 14px !important; border-bottom: 1px solid var(--calm-line-2) !important; color: var(--calm-ink-2) !important; vertical-align: middle; }
html.calm .data-table tr:hover td { background: #fafaf8 !important; }
html.calm .data-table tr.selected td { background: var(--calm-accent-soft) !important; }
html.calm .data-table .title-text { color: var(--calm-ink) !important; font-weight: 600 !important; font-size: 0.9rem !important; }
html.calm .data-table .title-text:hover { text-decoration: underline !important; text-underline-offset: 3px; }
html.calm .data-table .title-sub { color: var(--calm-mute) !important; font-size: 0.76rem !important; display: block; margin-top: 2px; }
html.calm .source-badge, html.calm .status-badge, html.calm .cat-badge { display: inline-flex !important; align-items: center; gap: 6px; height: 24px; padding: 0 9px !important; border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink-2) !important; font-size: 0.74rem !important; font-weight: 500 !important; animation: none !important; box-shadow: none !important; }
html.calm .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); flex-shrink: 0; }
html.calm .status-badge.status-publish::before { background: var(--calm-ok); }
html.calm .status-badge.status-scheduled::before { background: var(--calm-warn); }
html.calm .status-badge.status-rewritten::before { background: var(--calm-accent); }
html.calm .cat-badge:hover { border-color: #cfcfc8 !important; background: var(--calm-canvas) !important; }
html.calm .act-btn { display: inline-flex !important; align-items: center; height: 30px; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink) !important; font-size: 0.8rem !important; font-weight: 600 !important; text-decoration: none !important; }
html.calm .act-btn:hover { border-color: #cfcfc8 !important; background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm .act-btn.act-view { color: var(--calm-mute) !important; }
html.calm .rewrite-banner { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; border-radius: 12px !important; }
html.calm .rewrite-banner-title { color: var(--calm-ink) !important; font-weight: 600 !important; font-size: 0.9rem !important; }
html.calm .rewrite-banner-sub { color: var(--calm-ink-2) !important; font-size: 0.8rem !important; }
html.calm .rewrite-banner-btn { background: var(--calm-black) !important; color: #fff !important; border-radius: 999px !important; transform: none !important; }
html.calm .pagination { padding: 12px 20px !important; }
html.calm .pg-btn { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 8px !important; }
html.calm .pg-btn.active { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .empty-state { color: var(--calm-mute) !important; font-size: 0.9rem !important; padding: 40px 20px !important; }
html.calm .static-actions { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .static-actions .btn-ghost-sm { border-radius: 999px !important; }
html.calm .mini-gauge text { font-family: var(--calm-font); font-weight: 700; }
html.calm .cat-picker { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; box-shadow: 0 16px 40px -20px rgba(0,0,0,0.25) !important; }
html.calm .cat-picker-item:hover { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; }
html.calm .cat-picker-item.active { color: var(--calm-ink) !important; }
/* restjes artikelenpagina: specificiteit boven de globale thema-regels */
html.calm .main-content .data-table a.title-text:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; }
html.calm .main-content .status-badge.status-publish:not(#calmA):not(#calmB), html.calm .main-content .status-badge.status-draft:not(#calmA):not(#calmB), html.calm .main-content .status-badge.status-scheduled:not(#calmA):not(#calmB), html.calm .main-content .status-badge.status-rewritten:not(#calmA):not(#calmB) { background: var(--calm-card) !important; color: var(--calm-ink-2) !important; border: 1px solid var(--calm-line) !important; }
html.calm .main-content .source-badge:not(#calmA):not(#calmB), html.calm .main-content .cat-badge:not(#calmA):not(#calmB) { background: var(--calm-card) !important; color: var(--calm-ink-2) !important; }
html.calm .data-table td > div[style*="flex-wrap"] { flex-wrap: nowrap !important; gap: 6px !important; }
html.calm .data-table td { white-space: nowrap; }
html.calm .data-table td.title-cell { white-space: normal; min-width: 260px; }
html.calm .data-table .act-btn { height: 28px; padding: 0 11px !important; font-size: 0.78rem !important; }

/* ---- Artikel-editor -------------------------------------------------- */
html.calm .breadcrumb a { color: var(--calm-mute) !important; font-weight: 500; }
html.calm .breadcrumb .current { color: var(--calm-ink) !important; font-weight: 600; }
html.calm .breadcrumb .sep { color: var(--calm-dim) !important; }
html.calm .top-bar .status-badge { display: inline-flex !important; align-items: center; gap: 6px; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.76rem !important; font-weight: 500 !important; padding: 3px 10px !important; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; }
html.calm .top-bar .status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .top-bar .status-badge.status-published::before { background: var(--calm-ok); }
html.calm .top-bar .status-badge.status-scheduled::before { background: var(--calm-warn); }
html.calm .editor-pane { background: var(--calm-canvas) !important; }
html.calm .editor-meta { background: var(--calm-canvas) !important; border-bottom: none !important; }
html.calm .editor-title-input { font-family: var(--calm-font) !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: -0.025em; color: var(--calm-ink) !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .editor-title-input::placeholder, html.calm .editor-meta-input::placeholder, html.calm .editor-keyword-input::placeholder, html.calm .tag-type-input::placeholder { color: var(--calm-dim) !important; font-weight: 500; }
html.calm .editor-meta-input, html.calm .editor-keyword-input, html.calm .tag-input-wrap { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; color: var(--calm-ink) !important; font-family: var(--calm-font) !important; }
html.calm .editor-meta-input:focus, html.calm .editor-keyword-input:focus, html.calm .editor-title-input:focus, html.calm .tag-input-wrap:focus-within { border-color: var(--calm-ink) !important; box-shadow: none !important; outline: none; }
html.calm .editor-field-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; }
html.calm .meta-char-count { color: var(--calm-mute) !important; font-size: 0.74rem !important; }
html.calm .ai-field-btn { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 9px !important; box-shadow: none !important; }
html.calm .ai-field-btn:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; }
html.calm .tag-chip { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 999px !important; }
html.calm .editor-tinymce-wrap { background: var(--calm-canvas) !important; }
html.calm .tox-tinymce { border: 1px solid var(--calm-line) !important; border-radius: 12px !important; background: var(--calm-card) !important; }
html.calm .tox .tox-toolbar, html.calm .tox .tox-toolbar__primary, html.calm .tox .tox-menubar, html.calm .tox .tox-statusbar, html.calm .tox .tox-edit-area__iframe { background: var(--calm-card) !important; }
html.calm .tox .tox-tbtn { color: var(--calm-ink-2) !important; }
html.calm .seo-sidebar { background: var(--calm-card) !important; border-left: 1px solid var(--calm-line) !important; }
html.calm .seo-section { border-bottom: 1px solid var(--calm-line-2) !important; padding: 18px 18px !important; }
html.calm .seo-section-title { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.9rem !important; font-weight: 600 !important; color: var(--calm-ink) !important; margin-bottom: 12px !important; }
html.calm .seo-section-regen { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 999px !important; width: 26px !important; height: 26px !important; }
html.calm .action-btn { border-radius: 999px !important; font-size: 0.82rem !important; font-weight: 600 !important; color: var(--calm-ink) !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; box-shadow: none !important; padding: 9px 12px !important; }
html.calm .action-btn:hover { border-color: #cfcfc8 !important; color: var(--calm-ink) !important; background: var(--calm-canvas) !important; }
html.calm .action-btn.success { background: var(--calm-black) !important; color: #fff !important; border-color: var(--calm-black) !important; }
html.calm .action-btn.success:hover { background: #000 !important; }
html.calm .action-btn.primary { background: var(--calm-card) !important; color: var(--calm-ink) !important; border-color: var(--calm-ink) !important; }
html.calm .action-btn.danger { color: var(--calm-err) !important; }
html.calm .action-btn.danger:hover { background: #fdf3f2 !important; }
html.calm .featured-img-wrap { background: var(--calm-canvas) !important; border: 1px dashed var(--calm-line) !important; border-radius: 12px !important; }
html.calm .featured-img-placeholder { color: var(--calm-mute) !important; background: none !important; }
html.calm .score-gauge-label { color: var(--calm-mute) !important; font-size: 0.8rem !important; }
html.calm .score-number { fill: var(--calm-ink) !important; font-family: var(--calm-font); font-weight: 700 !important; }
html.calm #scoreNeedle { fill: var(--calm-ink) !important; stroke: #fff !important; filter: none !important; }
html.calm .word-bar-track, html.calm .kw-density-meter { background: var(--calm-line-2) !important; border-radius: 3px !important; }
html.calm .word-bar-fill { border-radius: 3px !important; }
html.calm .word-bar-current, html.calm .kw-density-label { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .word-bar-target, html.calm .kw-density-zones, html.calm .kw-density-value { color: var(--calm-mute) !important; }
html.calm .structure-item { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; }
html.calm .structure-icon { background: var(--calm-canvas) !important; color: var(--calm-ink-2) !important; border-radius: 6px !important; font-size: 0.62rem !important; font-weight: 700 !important; }
html.calm .structure-label { color: var(--calm-ink-2) !important; }
html.calm .structure-value { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .structure-check { font-size: 0 !important; width: 8px; height: 8px; border-radius: 50%; background: var(--calm-dim); display: inline-block; flex-shrink: 0; }
html.calm .structure-check.check-ok { background: var(--calm-ok); }
html.calm .structure-check.check-bad { background: var(--calm-err); }
html.calm .structure-check.check-warn { background: var(--calm-warn); }
html.calm .checklist-item { display: flex !important; align-items: flex-start; gap: 10px; padding: 7px 0 !important; font-size: 0.84rem !important; line-height: 1.45; }
html.calm .checklist-item > span[style] { color: var(--calm-ink-2) !important; flex: 1; }
html.calm .checklist-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; background: var(--calm-dim); }
html.calm .checklist-dot.ok { background: var(--calm-ok); }
html.calm .checklist-dot.bad { background: var(--calm-err); }
html.calm .checklist-item button, html.calm .checklist-item .gen-btn { border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink) !important; font-size: 0.74rem !important; font-weight: 600 !important; padding: 3px 10px !important; margin-left: auto; box-shadow: none !important; }
html.calm .readability-label { color: var(--calm-mute) !important; }
html.calm .readability-value { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .modal-box, html.calm .ai-overlay-box { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 16px !important; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35) !important; }
html.calm .modal-title { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .modal-btn { border-radius: 999px !important; font-weight: 600 !important; }
html.calm .modal-btn-primary { background: var(--calm-black) !important; color: #fff !important; border-color: var(--calm-black) !important; }
html.calm .modal-btn-cancel { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; }
html.calm .toast { border-radius: 12px !important; background: var(--calm-ink) !important; color: #fff !important; border: none !important; }
html.calm .ai-suggestions-box, html.calm .ai-sug-item { background: var(--calm-card) !important; border-color: var(--calm-line) !important; color: var(--calm-ink-2) !important; }
html.calm .ai-sug-item:hover { background: var(--calm-canvas) !important; }
html.calm .main-content .breadcrumb a:not(#calmA):not(#calmB) { color: var(--calm-mute) !important; }
html.calm .main-content .breadcrumb a:hover:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; }

/* ---- Resultaten: Analytics en Voortgang -------------------------------- */
html.calm .calm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--calm-dim); flex-shrink: 0; }
html.calm .calm-dot.ok { background: var(--calm-ok); } html.calm .calm-dot.warn { background: var(--calm-warn); } html.calm .calm-dot.bad { background: var(--calm-err); }
html.calm .atab-bar { border-bottom: 1px solid var(--calm-line) !important; gap: 22px !important; margin-bottom: 18px !important; background: none !important; }
html.calm .atab-btn { background: none !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--calm-mute) !important; font-size: 0.9rem !important; font-weight: 500 !important; padding: 10px 2px 12px !important; margin-bottom: -1px; font-family: var(--calm-font) !important; }
html.calm .atab-btn.active { color: var(--calm-ink) !important; font-weight: 600 !important; border-bottom-color: var(--calm-ink) !important; }
html.calm #quotaBar { border-radius: 12px !important; border: 1px solid var(--calm-line) !important; }
html.calm .stat-delta { font-size: 0.74rem !important; font-weight: 600 !important; }
html.calm .roi-kpi, html.calm .opp-card, html.calm .alert-card, html.calm .cannibal-conflict, html.calm .geo-cat, html.calm .opp-summary-box, html.calm .gsc-prompt, html.calm .chart-container { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; box-shadow: none !important; }
html.calm .roi-kpi-value { color: var(--calm-ink) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
html.calm .roi-kpi-label, html.calm .opp-summary-label, html.calm .opp-reason, html.calm .alert-message { color: var(--calm-mute) !important; }
html.calm .roi-savings-banner { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; border-radius: 12px !important; color: var(--calm-ink) !important; }
html.calm .roi-no-data, html.calm .empty-state { color: var(--calm-mute) !important; }
html.calm .roi-no-data strong, html.calm .roi-no-data b { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .score-badge, html.calm .tag, html.calm .opp-type, html.calm .cannibal-type, html.calm .geo-status, html.calm .gsc-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-size: 0.74rem !important; font-weight: 500 !important; padding: 2px 9px !important; }
html.calm .score-badge.score-good::before, html.calm .score-badge.score-mid::before, html.calm .score-badge.score-bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
html.calm .score-badge.score-good::before { background: var(--calm-ok); } html.calm .score-badge.score-mid::before { background: var(--calm-warn); } html.calm .score-badge.score-bad::before { background: var(--calm-err); }
html.calm .opp-btn, html.calm .alert-action, html.calm .btn-scan, html.calm .gsc-prompt-btn { border-radius: 999px !important; background: var(--calm-black) !important; color: #fff !important; border: 1px solid var(--calm-black) !important; font-weight: 600 !important; box-shadow: none !important; }
html.calm .kw-item { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; }
html.calm .kw-uncovered { color: var(--calm-err) !important; }
html.calm .geo-score-fill, html.calm .geo-cat-fill, html.calm #quotaProgressBar { background: var(--calm-ink) !important; }
html.calm .geo-score-big { color: var(--calm-ink) !important; }
html.calm .panel-sub { color: var(--calm-mute) !important; font-size: 0.8rem !important; }
html.calm .motivation-banner { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; color: var(--calm-ink) !important; }
html.calm .milestone-dot { box-shadow: none !important; }
html.calm .milestone-label { color: var(--calm-ink) !important; }
html.calm .milestone-date { color: var(--calm-mute) !important; }
html.calm #verdictHero { border-radius: 12px !important; }

/* ---- Planning: kalender, ideeën, stappenplan --------------------------- */
html.calm .cmd-center { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .cmd-step-num, html.calm .cmd-step-num.review, html.calm .cmd-step-num.scheduled, html.calm .cmd-step-num.publish { color: var(--calm-ink) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
html.calm .cmd-step-num.draft { color: var(--calm-mute) !important; }
html.calm .cmd-pipeline-arrow { color: var(--calm-dim) !important; }
html.calm .cmd-select { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-ink) !important; font-family: var(--calm-font) !important; padding: 6px 30px 6px 12px !important; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f716d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; }
html.calm .cmd-next-btn, html.calm .cal-filter-pill, html.calm .cal-nav-btn, html.calm .cal-today-btn, html.calm .cal-export-btn, html.calm .cal-view-btn, html.calm .loc-action, html.calm .cal-sidebar-toggle { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 999px !important; font-weight: 600 !important; font-family: var(--calm-font) !important; box-shadow: none !important; }
html.calm .cal-nav-btn { width: 32px !important; height: 32px !important; }
html.calm .cal-filter-pill.active, html.calm .cal-view-btn.active { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .cal-filter-pill.active .filter-count { background: rgba(255,255,255,0.2) !important; color: #fff !important; }
html.calm .cal-view-toggle { background: transparent !important; border: none !important; gap: 6px; }
html.calm .cal-header-cell { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; color: var(--calm-mute) !important; background: var(--calm-canvas) !important; }
html.calm .cal-grid { border-color: var(--calm-line) !important; border-radius: 12px; overflow: hidden; }
html.calm .cal-cell { border-color: var(--calm-line-2) !important; background: var(--calm-card) !important; }
html.calm .cal-cell.other-month, html.calm .cal-cell.outside { background: var(--calm-canvas) !important; }
html.calm .cal-cell.today { outline: 1px solid var(--calm-ink) !important; outline-offset: -1px; }
html.calm .cal-day-num { color: var(--calm-ink-2) !important; }
html.calm .cal-item { border-radius: 8px !important; }
html.calm .cal-item:hover { filter: none !important; transform: none !important; }
html.calm .cal-item .status-pill { text-transform: none !important; letter-spacing: 0 !important; border-radius: 999px !important; }
html.calm .cal-month-label { color: var(--calm-ink) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
html.calm .draft-item { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .draft-title { color: var(--calm-ink) !important; }
html.calm .draft-kw, html.calm .draft-loc { color: var(--calm-mute) !important; background: none !important; }
html.calm .draft-schedule-btn { background: var(--calm-black) !important; color: #fff !important; border-radius: 999px !important; border: none !important; }
html.calm .drafts-search { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-ink) !important; }
html.calm .bulk-bar { background: var(--calm-ink) !important; color: #fff !important; border-radius: 10px !important; }
html.calm .bulk-bar-text { color: #fff !important; }
html.calm .bulk-bar-btn { background: #fff !important; color: var(--calm-ink) !important; border-radius: 999px !important; border: none !important; }
html.calm .loc-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .loc-badge.missing::before, html.calm .loc-badge.partial::before, html.calm .loc-badge.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-err); }
html.calm .loc-badge.partial::before { background: var(--calm-warn); } html.calm .loc-badge.ok::before { background: var(--calm-ok); }
html.calm .loc-bar-fill { background: var(--calm-ink) !important; }
html.calm .article-popover { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 14px !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.3) !important; }
html.calm .ctx-row-icon { display: none !important; }
html.calm .gen-box { border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .gen-box h2 { color: var(--calm-ink) !important; font-size: 1.15rem !important; letter-spacing: -0.01em; }
html.calm .btn-generate, html.calm .btn-create, html.calm #btnScan { background: var(--calm-black) !important; color: #fff !important; border-radius: 999px !important; border: 1px solid var(--calm-black) !important; transform: none !important; opacity: 1 !important; box-shadow: none !important; }
html.calm .btn-generate:disabled, html.calm .btn-create:disabled { opacity: 0.45 !important; }
html.calm .btn-save, html.calm #btnTogglePages, html.calm #btnToggleArticles, html.calm .btn-view { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; font-weight: 600 !important; }
html.calm .idea-card { border-radius: 12px !important; }
html.calm .idea-title { color: var(--calm-ink) !important; }
html.calm .idea-keyword, html.calm .ci-badge { display: inline-flex !important; align-items: center; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .ci-tabbar { border-bottom: 1px solid var(--calm-line) !important; gap: 22px; }
html.calm .ci-tab { padding: 10px 2px 12px !important; font-size: 0.9rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; font-family: var(--calm-font) !important; }
html.calm .ci-tab.active { color: var(--calm-ink) !important; font-weight: 600 !important; border-bottom-color: var(--calm-ink) !important; }
html.calm .roadmap-hero { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .hero-title { color: var(--calm-ink) !important; font-weight: 700 !important; letter-spacing: -0.02em; }
html.calm .hero-quota { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; }
html.calm .hero-quota-count { color: var(--calm-ink) !important; }
html.calm .hero-progress-pct { color: var(--calm-ink) !important; }
html.calm .hero-bar-fill, html.calm .phase-progress-fill { background: var(--calm-ink) !important; }
html.calm .phase-pill { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-ink-2) !important; }
html.calm .phase-pill.active { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .phase-pill.active .pill-count { color: #fff !important; background: rgba(255,255,255,0.2) !important; }
html.calm .phase-pill .pill-count { background: var(--calm-canvas) !important; color: var(--calm-mute) !important; border-radius: 999px !important; }
html.calm .phase-explain { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; color: var(--calm-ink-2) !important; }
html.calm .article-impact-badge { text-transform: capitalize !important; letter-spacing: 0 !important; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .article-card { border-radius: 12px !important; transform: none !important; }
html.calm .article-score-fill { background: var(--calm-ink) !important; }
html.calm .btn-refresh { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink) !important; border-radius: 999px !important; font-weight: 600 !important; }
html.calm .setup-needed { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .btn-setup { background: var(--calm-black) !important; color: #fff !important; border-radius: 999px !important; }

html.calm .article-impact-badge { display: inline-block !important; text-transform: lowercase !important; }
html.calm .article-impact-badge::first-letter { text-transform: uppercase; }
html.calm .phase-progress-bar, html.calm .hero-bar, html.calm .article-score-bar { background: var(--calm-line-2) !important; border-radius: 3px !important; }
html.calm .cal-sidebar [style*="139,92,246"] { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; color: var(--calm-ink-2) !important; border-radius: 10px !important; }
html.calm .loc-item { flex-wrap: wrap; gap: 6px 10px; }
html.calm .loc-action { font-size: 0.74rem !important; padding: 3px 10px !important; }

html.calm .phase-impact { display: inline-block !important; text-transform: lowercase !important; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; letter-spacing: 0 !important; }
html.calm .phase-impact::first-letter { text-transform: uppercase; }

html.calm .cal-sidebar div[data-original-style] { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; color: var(--calm-ink-2) !important; border-radius: 10px !important; }

/* ---- AutoPilot, AI-zichtbaarheid, Content gezondheid ------------------- */
html.calm .ap2-hero, html.calm .ap-hero { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; background-image: none !important; }
html.calm .ap2-eyebrow, html.calm .ap2-kicker, html.calm .ap2-plab { text-transform: none !important; letter-spacing: 0 !important; color: var(--calm-mute) !important; font-size: 0.8rem !important; font-weight: 500 !important; font-family: var(--calm-font) !important; }
html.calm .ap2-h1, html.calm .ap-hero-title { color: var(--calm-ink) !important; font-weight: 700 !important; letter-spacing: -0.025em; }
html.calm .ap2-thesis, html.calm .ap2-sec-lead, html.calm .ap-hero-sub { color: var(--calm-ink-2) !important; }
html.calm .ap2-thesis strong { color: var(--calm-ink) !important; }
html.calm .ap2-stat { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .ap2-stat b, html.calm .ap2-stat strong, html.calm .ap2-stat .n, html.calm .ap2-stat > div:first-child { color: var(--calm-ink) !important; }
html.calm .ap2-sec { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .ap2-sec-title { color: var(--calm-ink) !important; }
html.calm .ap2-i { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-mute) !important; font-style: normal !important; }
html.calm .ap2-tier, html.calm .ap2-cluster, html.calm .ap2-flipcard, html.calm .ap2-score, html.calm .ap2-w, html.calm .ap2-spoke { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .ap2-pill, html.calm .ap2-chip, html.calm .ap-mode-badge, html.calm .source-tag { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; font-family: var(--calm-font) !important; }
html.calm .ap2-st { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-family: var(--calm-font) !important; text-transform: none !important; letter-spacing: 0 !important; }
html.calm .ap2-st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); display: inline-block; margin-right: 6px; }
html.calm .ap2-st.ok::before, html.calm .ap2-st.gedekt::before { background: var(--calm-ok); }
html.calm .ap2-st.gap::before, html.calm .ap2-st.gat::before { background: var(--calm-warn); }
html.calm .ap2-st.plan::before, html.calm .ap2-st.gepland::before { background: var(--calm-accent); }
html.calm .ap2-scroll table th { font-family: var(--calm-font) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--calm-mute) !important; font-weight: 500 !important; background: var(--calm-canvas) !important; }
html.calm .ap2-scroll table td { font-family: var(--calm-font) !important; border-color: var(--calm-line-2) !important; }
html.calm .ap2-bar > div, html.calm .score-fill { background: var(--calm-ink) !important; }
html.calm .toggle-slider { background: var(--calm-line) !important; }
html.calm .toggle-switch input:checked + .toggle-slider { background: var(--calm-ink) !important; }
html.calm .source-card, html.calm .step-card { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .step-num { background: var(--calm-ink) !important; color: #fff !important; }
html.calm .ap-wizard { background: var(--calm-card) !important; border-radius: 16px !important; }
html.calm .ap-wiz-btn-primary { background: var(--calm-black) !important; color: #fff !important; border-radius: 999px !important; }
html.calm .ap-wiz-btn-secondary { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; }
html.calm .ap-wiz-chip { border-radius: 999px !important; }
html.calm .ap-wiz-mode-card { border-radius: 12px !important; }
html.calm .notice-card, html.calm .state-card, html.calm .engine-card { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .engine-fraction { color: var(--calm-ink) !important; }
html.calm .level-badge, html.calm .cited-badge, html.calm .change-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .cited-badge.cited-yes::before, html.calm .cited-badge.cited-no::before, html.calm .change-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .cited-badge.cited-yes::before, html.calm .change-badge.change-nieuw::before { background: var(--calm-ok); }
html.calm .cited-badge.cited-no::before, html.calm .change-badge.change-verloren::before { background: var(--calm-err); }
html.calm .alert-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.74rem !important; padding: 2px 9px !important; }
html.calm .alert-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-warn); }
html.calm .alert-badge.badge-danger::before { background: var(--calm-err); }
html.calm .alert-action, html.calm .btn-action, html.calm .filter-btn { display: inline-flex !important; align-items: center; height: 30px; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink) !important; font-size: 0.8rem !important; font-weight: 600 !important; font-family: var(--calm-font) !important; box-shadow: none !important; text-decoration: none !important; }
html.calm .filter-btn.active { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .btn-action.btn-rewrite, html.calm .btn-action.danger { color: var(--calm-err) !important; }
html.calm .status-badge.status-uptodate::before { background: var(--calm-ok); } html.calm .status-badge.status-attention::before { background: var(--calm-warn); } html.calm .status-badge.status-outdated::before { background: var(--calm-err); }
html.calm .main-content .data-table a:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; font-weight: 600; }
html.calm .legend-box { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .factor-icon { display: none !important; }
html.calm .factor-name { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .toolbar-search { border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; }
html.calm .health-score { font-weight: 700 !important; font-variant-numeric: tabular-nums; }

html.calm .ap2-hero { background: var(--calm-card) !important; }
html.calm .ap2-hero::before, html.calm .ap2-hero::after { display: none !important; }
html.calm .ap2-save { background: var(--calm-black) !important; color: #fff !important; border: 1px solid var(--calm-black) !important; border-radius: 999px !important; font-weight: 600 !important; font-family: var(--calm-font) !important; box-shadow: none !important; }
html.calm .ap2-flipcard .t, html.calm .ap2-legend, html.calm .ap2-scroll .tag, html.calm .ap2 [class*="mono"], html.calm .ap2 small.lab { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--calm-font) !important; font-weight: 600 !important; color: var(--calm-ink) !important; font-size: 0.82rem !important; }
html.calm .main-content .alert-action:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; }
html.calm .main-content .ws-chip:not(#calmA):not(#calmB) { color: var(--calm-ink-2) !important; }
html.calm .main-content .ws-chip.active:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; background: var(--calm-canvas) !important; }

/* ---- Website: interne links, onderwerpclusters, linkbuilding, autoriteit -- */
html.calm .toolbar { background: transparent !important; border-top: 1px solid var(--calm-line-2) !important; }
html.calm .anchor-text { font-family: var(--calm-font) !important; background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; border-radius: 999px !important; font-size: 0.78rem !important; padding: 2px 9px !important; }
html.calm .relevance-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 600 !important; font-variant-numeric: tabular-nums; }
html.calm .relevance-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .relevance-badge.relevance-high::before { background: var(--calm-ok); } html.calm .relevance-badge.relevance-mid::before { background: var(--calm-warn); } html.calm .relevance-badge.relevance-low::before { background: var(--calm-dim); }
html.calm .status-badge.status-toegevoegd::before { background: var(--calm-ok); } html.calm .status-badge.status-genegeerd::before { background: var(--calm-dim); } html.calm .status-badge.status-nieuw::before { background: var(--calm-accent); }
html.calm .action-btn.btn-add { background: var(--calm-black) !important; color: #fff !important; border-color: var(--calm-black) !important; }
html.calm .action-btn.btn-remove { color: var(--calm-err) !important; }
html.calm .link-arrow { color: var(--calm-dim) !important; }
html.calm .article-source, html.calm .article-target { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .orphan-card { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .orphan-icon { display: none !important; }
html.calm .orphan-suggestion { background: var(--calm-canvas) !important; border-radius: 10px !important; color: var(--calm-ink-2) !important; }
html.calm .info-banner { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; border-radius: 12px !important; }
html.calm .info-banner-title { color: var(--calm-ink) !important; } html.calm .info-banner-sub { color: var(--calm-ink-2) !important; }
html.calm .cluster-card { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .cluster-name { color: var(--calm-ink) !important; }
html.calm .cluster-count, html.calm .article-pill, html.calm .gap-badge, html.calm .opp-badge, html.calm .gap-priority { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; }
html.calm .gap-priority::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .gap-priority.gap-priority-high::before { background: var(--calm-err); } html.calm .gap-priority.gap-priority-mid::before { background: var(--calm-warn); }
html.calm .pillar-row { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .pillar-icon { background: var(--calm-ink) !important; color: #fff !important; border-radius: 8px !important; }
html.calm .pillar-label, html.calm .section-title { text-transform: none !important; letter-spacing: 0 !important; color: var(--calm-mute) !important; font-size: 0.78rem !important; font-weight: 500 !important; }
html.calm .main-content .pillar-title a:not(#calmA):not(#calmB), html.calm .main-content .pillar-title:not(#calmA):not(#calmB) { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .gap-item { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .gap-title { color: var(--calm-ink) !important; } html.calm .gap-sub { color: var(--calm-mute) !important; }
html.calm .coverage-bar { background: var(--calm-line-2) !important; border-radius: 3px !important; }
html.calm .coverage-label, html.calm .coverage-pct { color: var(--calm-mute) !important; }
html.calm .pillar-warning { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; color: var(--calm-ink-2) !important; }
html.calm .btn-warning-sm, html.calm .btn-cyan-sm, html.calm .btn-orange-sm, html.calm .btn-success-sm { background: var(--calm-card) !important; color: var(--calm-ink) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; font-weight: 600 !important; box-shadow: none !important; }
html.calm .reminder-banner { background: var(--calm-accent-soft) !important; border: 1px solid #d9e3fb !important; border-radius: 12px !important; }
html.calm .reminder-icon { display: none !important; }
html.calm .nap-card { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 12px !important; }
html.calm .nap-label { text-transform: none !important; letter-spacing: 0 !important; color: var(--calm-mute) !important; font-size: 0.78rem !important; font-weight: 500 !important; }
html.calm .nap-value { color: var(--calm-ink) !important; font-weight: 500 !important; }
html.calm .copy-btn { background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; border-radius: 999px !important; color: var(--calm-mute) !important; font-size: 0.7rem !important; padding: 1px 8px !important; }
html.calm .copy-btn:empty::after { content: "Kopieer"; }
html.calm .progress-bar { background: var(--calm-line-2) !important; border-radius: 3px !important; }
html.calm .progress-fill { background: var(--calm-ink) !important; border-radius: 3px !important; }
html.calm .filter-chip { border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .filter-chip.active { background: var(--calm-ink) !important; color: #fff !important; border-color: var(--calm-ink) !important; }
html.calm .priority-item, html.calm .dir-item { border-color: var(--calm-line-2) !important; }
html.calm .priority-num { background: var(--calm-ink) !important; color: #fff !important; border-radius: 8px !important; }
html.calm .priority-name, html.calm .dir-name { color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm .dir-icon { display: none !important; }
html.calm .dir-badge { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; text-transform: none !important; }
html.calm .dir-badge.badge-found::before, html.calm .dir-badge.badge-not-found::before, html.calm .dir-badge.badge-prio-hoog::before, html.calm .dir-badge.badge-prio-middel::before, html.calm .dir-badge.badge-prio-laag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .dir-badge.badge-found::before { background: var(--calm-ok); } html.calm .dir-badge.badge-not-found::before { background: var(--calm-err); } html.calm .dir-badge.badge-prio-hoog::before { background: var(--calm-err); } html.calm .dir-badge.badge-prio-middel::before { background: var(--calm-warn); }
html.calm .dir-status-select { border-radius: 999px !important; border: 1px solid var(--calm-line) !important; background: var(--calm-card) !important; color: var(--calm-ink) !important; font-family: var(--calm-font) !important; padding: 5px 28px 5px 10px !important; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f716d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important; background-repeat: no-repeat !important; background-position: right 9px center !important; }
html.calm .stat-dot { box-shadow: none !important; }
html.calm .modal { background: var(--calm-card) !important; border-radius: 16px !important; }
html.calm .listing-text { background: var(--calm-canvas) !important; border: 1px solid var(--calm-line) !important; border-radius: 10px !important; }

html.calm .priority-panel .panel-title, html.calm .panel-title.green, html.calm .panel-title[style*="color"] { color: var(--calm-ink) !important; }
html.calm .badge-detected { display: inline-flex !important; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--calm-card) !important; border: 1px solid var(--calm-line) !important; color: var(--calm-ink-2) !important; font-weight: 500 !important; }
html.calm .badge-detected::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--calm-dim); }
html.calm .badge-detected.badge-found::before { background: var(--calm-ok); } html.calm .badge-detected.badge-not-found::before { background: var(--calm-err); } html.calm .badge-detected.badge-checking::before { background: var(--calm-warn); }

/* ---- Account, stap 2: vijf tabs, samengevoegde pagina's, rijen ---------- */
html.calm .acc-sec { margin-bottom: 28px; }
html.calm .acc-sec-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; color: var(--calm-ink); margin: 0 0 12px; }
html.calm .acc-sec + .acc-sec { padding-top: 8px; }
html.calm .acc-savebar-static { position: static !important; margin-top: 12px; }
html.calm .ovc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.calm .ovc .panel-header { display: flex; align-items: center; justify-content: space-between; }
html.calm .ovc-all { font-size: 0.82rem; color: var(--calm-mute) !important; font-weight: 500; text-decoration: none !important; }
html.calm .ovc-all:hover { color: var(--calm-ink) !important; }
html.calm .ovc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--calm-line-2); font-size: 0.9rem; }
html.calm .ovc-row:first-child { border-top: none; padding-top: 2px; }
html.calm .ovc-k { color: var(--calm-mute); flex-shrink: 0; }
html.calm .ovc-v { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--calm-ink); min-width: 0; text-align: right; flex-wrap: wrap; justify-content: flex-end; }
html.calm .ovc-sub { color: var(--calm-mute); font-weight: 400; }
html.calm .ovc-v a { color: var(--calm-accent) !important; font-size: 0.84rem; font-weight: 600; text-decoration: none !important; }
html.calm .ovc-v .ov-dot { width: 7px; height: 7px; }
html.calm .acc-loading .ovc-v .skel { min-width: 60px; }
@media (max-width: 900px) { html.calm .ovc-grid { grid-template-columns: 1fr; } }

html.calm .main-content .account-tabs { gap: 26px !important; }
html.calm .usage-count { color: var(--calm-ink) !important; }
html.calm .plan-hero .usage-section .ig-row-ctl { font-weight: 600 !important; }

/* ---- Account rechtsboven (9 sep 2026) ----------------------------------- */
html.calm .main-content .account-tabs { display: none !important; }
html.calm #acctPop { min-width: 240px !important; padding: 8px !important; }
html.calm #acctPop .acct-head { padding: 10px 12px 12px !important; border-bottom: 1px solid var(--calm-line); margin-bottom: 6px !important; }
html.calm #acctPop .acct-head .n { color: var(--calm-ink) !important; font-weight: 600 !important; font-family: var(--calm-font) !important; }
html.calm #acctPop .acct-head .e { color: var(--calm-mute) !important; }
html.calm #acctPop .acct-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.74rem !important; font-weight: 500 !important; color: var(--calm-mute) !important; padding: 8px 12px 4px !important; }
html.calm #acctPop .acct-item { font-family: var(--calm-font) !important; font-size: 0.88rem !important; padding: 9px 12px !important; }
html.calm #acctPop .acct-item.sub { padding-left: 12px !important; }
html.calm #acctPop .acct-item.on { background: var(--calm-canvas) !important; color: var(--calm-ink) !important; font-weight: 600 !important; }
html.calm #acctPop .acct-item.logout { color: var(--calm-err) !important; }
html.calm #acctMenu #acctBtn:hover { border-color: #cfcfc8 !important; }

/* ---- 9 sep 2026: accountkop en laadtoestand pakketonderdelen ------------ */
html.calm .plan-features li.skel-line { height: 12px; border-radius: 6px; margin: 8px 0; padding: 0; background: linear-gradient(90deg, #ececE8 25%, #f4f4f1 50%, #ececE8 75%); background-size: 200% 100%; animation: calmShimmer 1.4s linear infinite; }
html.calm .plan-features li.skel-line::before { display: none !important; content: none !important; }
@keyframes calmShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.calm #acctMenu #acctBtn.on { border-color: var(--calm-ink) !important; }
html.calm .top-bar h1 .calm-crumb { color: var(--calm-mute); font-weight: 500; }
html.calm .top-bar h1 .calm-crumb svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; margin: 0 4px 0 6px; }
html.calm .top-bar h1 { display: inline-flex !important; flex-direction: row !important; align-items: center !important; white-space: nowrap; gap: 0 !important; }
html.calm .top-bar h1 .calm-crumb { display: inline-flex; align-items: center; }