/**
 * S360 Modern UI (drop-in) + modulebundels (content, events, marketing-site, …).
 * Laad direct na stakeholder360-theme.css; overschrijft o.a. :root-tokens waar nodig.
 */

/* =========================================================
   S360 Modern UI (drop-in)
   - Design tokens + App shell + Components
   - Framework agnostic (works with Blade/Vue/React/Vanilla)
   ========================================================= */

/* ---------- 0) Design tokens ---------- */
:root {
    /* Typography */
    --s360-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --s360-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --s360-fs-12: .75rem;
    --s360-fs-13: .8125rem;
    --s360-fs-14: .875rem;
    --s360-fs-16: 1rem;
    --s360-fs-18: 1.125rem;
    --s360-fs-20: 1.25rem;
    /* Spacing */
    --s360-2: .125rem;
    --s360-4: .25rem;
    --s360-6: .375rem;
    --s360-8: .5rem;
    --s360-10: .625rem;
    --s360-12: .75rem;
    --s360-14: .875rem;
    --s360-16: 1rem;
    --s360-20: 1.25rem;
    --s360-24: 1.5rem;
    --s360-28: 1.75rem;
    --s360-32: 2rem;
    /* Radius */
    --s360-r-8: .5rem;
    --s360-r-10: .625rem;
    --s360-r-12: .75rem;
    /* Elevation */
    --s360-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --s360-shadow-2: 0 6px 18px rgba(16, 24, 40, .08);
    /* Colors (light) — gekoppeld aan design-tokens.css */
    --s360-bg: var(--s360-bg-2, #f5f5f7);
    --s360-surface: #ffffff;
    --s360-surface-2: var(--s360-bg-3, #fbfbfd);
    --s360-border: var(--s360-line, #d2d2d7);
    --s360-text: var(--s360-ink, #1d1d1f);
    --s360-muted: var(--s360-ink-2, #86868b);
    --s360-subtle: var(--s360-ink-2, #86868b);
    --s360-primary: var(--s360-brand, #0C6E62);
    --s360-primary-700: var(--s360-brand-strong, #08534A);
    --s360-primary-50: var(--s360-brand-soft, #E7F1EF);
    --s360-success: var(--s360-brand, #0C6E62);
    --s360-warning: #f59e0b;
    --s360-danger: #ef4444;
    /* Sidebar */
    --s360-sidebar-bg: #0b1220;
    --s360-sidebar-text: #e2e8f0;
    --s360-sidebar-muted: #94a3b8;
    --s360-sidebar-hover: rgba(255, 255, 255, .06);
    /* Focus ring */
    --s360-ring: 0 0 0 3px var(--s360-brand-ring, rgba(12,110,98,.35));
    --s360-ring-strong: 0 0 0 4px var(--s360-brand-ring, rgba(12,110,98,.45));
    /* Layout */
    --s360-topbar-h: 56px;
    --s360-sidebar-w: 260px;
    --s360-inspector-w: 360px;
    /* Motion */
    --s360-dur: 160ms;
    --s360-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --s360-bg: #0b1220;
        --s360-surface: #0f172a;
        --s360-surface-2: #111c33;
        --s360-border: rgba(148, 163, 184, .18);
        --s360-text: #e5e7eb;
        --s360-muted: #b6c2d1;
        --s360-subtle: rgba(148, 163, 184, .8);
        --s360-sidebar-bg: #070b13;
        --s360-sidebar-text: #e5e7eb;
        --s360-sidebar-muted: rgba(226, 232, 240, .75);
        --s360-sidebar-hover: rgba(255, 255, 255, .06);
        --s360-ring: 0 0 0 3px rgba(96, 165, 250, .25);
        --s360-ring-strong: 0 0 0 4px rgba(96, 165, 250, .35);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* ---------- 1) Base reset (safe) ---------- */
:where(html, body) {
    height: 100%;
}

:where(body) {
    margin: 0;
    font-family: var(--s360-font);
    font-size: var(--s360-fs-14);
    color: var(--s360-text);
    background: var(--s360-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(a) {
    color: inherit;
    text-decoration: none;
}

:where(button, input, select, textarea) {
    font: inherit;
}

:where(*) {
    box-sizing: border-box;
}

:where(:focus) {
    outline: none;
}

:where(:focus-visible) {
    box-shadow: var(--s360-ring);
    border-radius: var(--s360-r-10);
}

.s360-skip {
    position: absolute;
    left: -9999px;
    top: var(--s360-12);
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-r-10);
    padding: var(--s360-10) var(--s360-14);
    box-shadow: var(--s360-shadow-2);
    z-index: 9999;
}

.s360-skip:focus {
    left: var(--s360-12);
}

/* ---------- 2) App shell layout ---------- */
.s360-app {
    height: 100dvh;
    display: grid;
    grid-template-columns: var(--s360-sidebar-w) minmax(0, 1fr) var(--s360-inspector-w);
    grid-template-rows: var(--s360-topbar-h) minmax(0, 1fr);
    gap: 0;
}

.s360-topbar {
    grid-column: 1 / -1;
    grid-row: 1;
    height: var(--s360-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s360-16);
    background: linear-gradient(180deg, rgba(15, 23, 42, .92), rgba(15, 23, 42, .82));
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.s360-title {
    display: flex;
    align-items: center;
    gap: var(--s360-12);
    min-width: 0;
}

.s360-title h1 {
    margin: 0;
    font-size: var(--s360-fs-14);
    font-weight: 650;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s360-status {
    font-size: var(--s360-fs-12);
    color: rgba(255, 255, 255, .72);
}

.s360-sidebar,
.s360-main,
.s360-inspector {
    grid-row: 2;
    min-width: 0;
    min-height: 0;
}

.s360-sidebar {
    grid-column: 1;
    background: var(--s360-sidebar-bg);
    color: var(--s360-sidebar-text);
    border-right: 1px solid rgba(255, 255, 255, .06);
    overflow: auto;
    padding: var(--s360-12);
}

.s360-main {
    grid-column: 2;
    background: var(--s360-bg);
    overflow: hidden;
}

.s360-mainScroll {
    height: 100%;
    overflow: auto;
    padding: var(--s360-20);
}

.s360-inspector {
    grid-column: 3;
    background: var(--s360-surface);
    border-left: 1px solid var(--s360-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.s360-paneHeader {
    position: sticky;
    top: 0;
    z-index: 3;
    background: color-mix(in srgb, var(--s360-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--s360-border);
    padding: var(--s360-12) var(--s360-16);
}

.s360-paneTitle {
    font-weight: 650;
    font-size: var(--s360-fs-13);
    color: var(--s360-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s360-12);
}

.s360-paneActions {
    display: flex;
    gap: var(--s360-8);
    flex-wrap: wrap;
}

/* ---------- 3) Sidebar nav ---------- */
.s360-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s360-6);
}

.s360-navGroupTitle {
    font-size: var(--s360-fs-12);
    color: var(--s360-sidebar-muted);
    padding: var(--s360-10) var(--s360-10) var(--s360-6);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.s360-nav a {
    display: flex;
    align-items: center;
    gap: var(--s360-10);
    padding: var(--s360-10) var(--s360-10);
    border-radius: var(--s360-r-10);
    color: var(--s360-sidebar-text);
}

.s360-nav a:hover {
    background: var(--s360-sidebar-hover);
}

.s360-nav a[aria-current="page"] {
    background: rgba(37, 99, 235, .18);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .35);
}

/* ---------- 4) Cards / Blocks ---------- */
.s360-card {
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-r-12);
    box-shadow: var(--s360-shadow-1);
}

.s360-card + .s360-card {
    margin-top: var(--s360-12);
}

.s360-cardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s360-12);
    padding: var(--s360-12) var(--s360-14);
    border-bottom: 1px solid var(--s360-border);
}

.s360-cardLabel {
    display: flex;
    align-items: center;
    gap: var(--s360-10);
    min-width: 0;
}

.s360-tag {
    font-size: var(--s360-fs-12);
    font-weight: 650;
    color: var(--s360-muted);
    background: var(--s360-surface-2);
    border: 1px solid var(--s360-border);
    padding: var(--s360-4) var(--s360-8);
    border-radius: 999px;
}

.s360-cardActions {
    display: flex;
    gap: var(--s360-8);
}

.s360-cardBody {
    padding: var(--s360-14);
}

.s360-block {
    transition: transform var(--s360-dur) var(--s360-ease), box-shadow var(--s360-dur) var(--s360-ease), border-color var(--s360-dur) var(--s360-ease);
}

.s360-block:hover {
    box-shadow: var(--s360-shadow-2);
}

.s360-block:focus-within {
    border-color: color-mix(in srgb, var(--s360-primary) 55%, var(--s360-border));
    box-shadow: var(--s360-ring-strong), var(--s360-shadow-2);
}

.s360-drag {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    cursor: grab;
    color: var(--s360-subtle);
}

.s360-drag:active {
    cursor: grabbing;
}

/* ---------- 5) Inputs ---------- */
.s360-field {
    display: grid;
    gap: var(--s360-6);
    margin-bottom: var(--s360-12);
}

.s360-label {
    font-size: var(--s360-fs-12);
    color: var(--s360-muted);
    font-weight: 650;
}

.s360-help {
    font-size: var(--s360-fs-12);
    color: var(--s360-subtle);
}

.s360-input,
.s360-textarea,
.s360-select {
    width: 100%;
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-r-10);
    padding: var(--s360-10) var(--s360-12);
    color: var(--s360-text);
    transition: box-shadow var(--s360-dur) var(--s360-ease), border-color var(--s360-dur) var(--s360-ease);
}

.s360-textarea {
    min-height: 120px;
    resize: vertical;
}

.s360-input::placeholder,
.s360-textarea::placeholder {
    color: var(--s360-subtle);
}

.s360-input:focus-visible,
.s360-textarea:focus-visible,
.s360-select:focus-visible {
    border-color: color-mix(in srgb, var(--s360-primary) 55%, var(--s360-border));
    box-shadow: var(--s360-ring);
}

/* ---------- 6) Buttons ---------- */
.s360-btn {
    border: 1px solid transparent;
    background: var(--s360-surface);
    color: var(--s360-text);
    border-radius: var(--s360-r-10);
    padding: var(--s360-10) var(--s360-12);
    font-weight: 650;
    font-size: var(--s360-fs-13);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s360-8);
    transition: transform var(--s360-dur) var(--s360-ease), background var(--s360-dur) var(--s360-ease), border-color var(--s360-dur) var(--s360-ease);
}

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

.s360-btn:active {
    transform: translateY(0);
}

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

.s360-btn--primary:hover {
    background: var(--s360-primary-700);
}

.s360-btn--ghost {
    background: transparent;
    border-color: color-mix(in srgb, var(--s360-border) 70%, transparent);
}

.s360-btn--danger {
    background: color-mix(in srgb, var(--s360-danger) 12%, var(--s360-surface));
    border-color: color-mix(in srgb, var(--s360-danger) 30%, var(--s360-border));
    color: color-mix(in srgb, var(--s360-danger) 90%, var(--s360-text));
}

.s360-btn--sm {
    padding: var(--s360-6) var(--s360-10);
    font-size: var(--s360-fs-12);
}

/* ---------- 7) Tabs ---------- */
.s360-tabs {
    display: inline-flex;
    gap: var(--s360-6);
    padding: var(--s360-6);
    border-radius: var(--s360-r-12);
    background: var(--s360-surface-2);
    border: 1px solid var(--s360-border);
}

.s360-tab {
    border: 1px solid transparent;
    background: transparent;
    padding: var(--s360-8) var(--s360-10);
    border-radius: 10px;
    font-weight: 700;
    font-size: var(--s360-fs-12);
    color: var(--s360-muted);
    cursor: pointer;
}

.s360-tab[aria-selected="true"] {
    background: var(--s360-surface);
    border-color: var(--s360-border);
    color: var(--s360-text);
    box-shadow: var(--s360-shadow-1);
}

.s360-tabPanel {
    display: none;
    padding: var(--s360-12) var(--s360-16) var(--s360-16);
    overflow: auto;
    min-height: 0;
    flex: 1;
}

.s360-tabPanel[data-active="true"] {
    display: block;
}

/* ---------- 8) Tiles ---------- */
.s360-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s360-10);
}

.s360-tile {
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-r-12);
    background: var(--s360-surface);
    padding: var(--s360-12);
    cursor: pointer;
    transition: transform var(--s360-dur) var(--s360-ease), box-shadow var(--s360-dur) var(--s360-ease);
}

.s360-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--s360-shadow-2);
}

.s360-tileTitle {
    font-weight: 750;
    font-size: var(--s360-fs-13);
}

.s360-tileMeta {
    color: var(--s360-subtle);
    font-size: var(--s360-fs-12);
    margin-top: var(--s360-4);
}

/* ---------- 9) Resizers ---------- */
.s360-resizer {
    position: absolute;
    top: var(--s360-topbar-h);
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
}

.s360-resizer::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: color-mix(in srgb, var(--s360-border) 75%, transparent);
    opacity: .55;
}

.s360-resizer:hover::after {
    opacity: 1;
}

/* ---------- 10) Responsive ---------- */
@media (max-width: 1100px) {
    :root {
        --s360-inspector-w: 320px;
    }
}

@media (max-width: 980px) {
    .s360-app {
        grid-template-columns: 1fr;
        grid-template-rows: var(--s360-topbar-h) minmax(0, 1fr);
    }

    .s360-sidebar {
        display: none;
    }

    .s360-inspector {
        position: fixed;
        top: var(--s360-topbar-h);
        right: 0;
        bottom: 0;
        width: min(92vw, 420px);
        transform: translateX(102%);
        transition: transform var(--s360-dur) var(--s360-ease);
        box-shadow: -18px 0 40px rgba(0, 0, 0, .18);
        border-left: 1px solid var(--s360-border);
        z-index: 100;
    }

    .s360-inspector[data-open="true"] {
        transform: translateX(0);
    }
}

/* ---------- 11) Toasts ---------- */
.s360-toasts {
    position: fixed;
    right: var(--s360-16);
    bottom: var(--s360-16);
    display: grid;
    gap: var(--s360-8);
    z-index: 9999;
}

.s360-toast {
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-r-12);
    box-shadow: var(--s360-shadow-2);
    padding: var(--s360-12) var(--s360-14);
    min-width: 260px;
    max-width: 360px;
}

.s360-toastTitle {
    font-weight: 800;
    font-size: var(--s360-fs-13);
}

.s360-toastText {
    margin-top: var(--s360-4);
    color: var(--s360-muted);
    font-size: var(--s360-fs-13);
}

/* Globaal: keyboard-focusring + minimale knophoogte (compacte .btn-xs blijft 30px) */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

button {
    min-height: 40px;
    box-sizing: border-box;
}

/* .btn-xs (hoger in dit bestand) houdt 30px — hogere specificiteit wint op `button` */

/* ---------- Contentstudio (Blade: Studio / Gepland / Verstuurd / Concepten) ---------- */
.cs-sent-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Spotler-achtige subnav: icoon boven label, actieve tab met onderrand */
.contentstudio-nav.s360-content-nav {
    margin-top: 0;
    padding: 0;
    border-top: 1px solid var(--s360-border);
    background: linear-gradient(180deg, var(--s360-slate-50) 0%, #fff 48%);
}

.s360-content-nav__list {
    list-style: none;
    margin: 0;
    padding: 0 6px;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.s360-content-nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 4.25rem;
    padding: 12px 10px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--s360-slate-600);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition:
        color 0.12s ease,
        border-color 0.12s ease,
        background 0.12s ease;
}

.s360-content-nav__link:hover {
    color: var(--s360-slate-800);
    background: rgba(47, 111, 237, 0.05);
}

.s360-content-nav__link:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: -2px;
    border-radius: 8px 8px 0 0;
}

.s360-content-nav__ico {
    display: grid;
    place-items: center;
    line-height: 0;
    color: var(--s360-slate-500);
}

.s360-content-nav__link.is-active .s360-content-nav__ico {
    color: var(--s360-primary-dark);
}

.s360-content-nav__link.is-active {
    color: var(--s360-primary-dark);
    border-bottom-color: var(--s360-primary);
    background: #fff;
}

.s360-content-nav__label {
    letter-spacing: 0.02em;
}

/* Eén kaart voor titel + tabs (Spotler page shell) */
.card--content-module {
    padding: 0;
    overflow: hidden;
}

.card--content-module__intro {
    padding: 18px 20px 8px;
}

.card--content-module__below-nav {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--s360-border);
    background: var(--s360-surface);
}

/* Studio: verticale stappen naast werkveld */
.cs-studio-main--spotler {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

@media (min-width: 880px) {
    .cs-studio-main--spotler {
        grid-template-columns: 11rem minmax(0, 1fr);
    }
}

.cs-studio-main__stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.cs-studio-steps-rail {
    margin: 0;
    padding: 14px 12px 14px 14px;
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-radius-card);
    background: var(--s360-slate-50);
    box-shadow: var(--s360-shadow-card);
}

.cs-studio-steps-rail__title {
    margin: 0 0 12px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s360-muted);
}

.cs-studio-steps-rail ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 2px solid #e2e8f0;
}

.cs-studio-steps-rail li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 14px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--s360-slate-600);
}

.cs-studio-steps-rail li:last-child {
    margin-bottom: 2px;
}

.cs-studio-steps-rail li::before {
    content: "";
    position: absolute;
    left: -19px;
    top: 0.35em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    background: #fff;
}

.cs-studio-steps-rail li.is-active {
    color: var(--s360-primary-dark);
}

.cs-studio-steps-rail li.is-active::before {
    border-color: var(--s360-primary);
    background: var(--s360-primary);
    box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.2);
}

.cs-studio-steps-rail li.is-done {
    color: #166534;
}

.cs-studio-steps-rail li.is-done::before {
    border-color: #22c55e;
    background: #22c55e;
}

.cs-studio-steps-rail__sub {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--s360-muted);
}

.cs-sent-filters-card .cs-sent-filters {
    margin: 0;
}

.cs-sent-filters__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 14px 16px;
    align-items: end;
}

@media (min-width: 720px) {
    .cs-sent-filters__search {
        grid-column: span 2;
    }
}

.cs-sent-filters__actions {
    display: flex;
    align-items: flex-end;
}

.cs-sent-filters__submit {
    min-width: 8.75rem;
    border-color: #93c5fd;
    color: var(--s360-primary, #2563eb);
    font-weight: 700;
}

.cs-sent-filters__submit:hover {
    background: #eff6ff;
    border-color: var(--s360-primary, #2563eb);
}

.cs-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.cs-kpi {
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.cs-kpi--muted {
    opacity: 0.92;
}

.cs-kpi__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.cs-kpi__value {
    display: block;
    margin-top: 8px;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

.cs-kpi--muted .cs-kpi__value {
    color: #94a3b8;
    font-weight: 700;
    font-size: 1.35rem;
}

.cs-sent-heatmap-block {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #eef2f7;
}

.cs-sent-heatmap-head {
    margin-bottom: 14px;
}

.cs-subheading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-slate-900, #0f172a);
}

.cs-heatmap-scroll {
    overflow-x: auto;
    padding: 10px 8px 12px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    -webkit-overflow-scrolling: touch;
}

.cs-heatmap {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 5px;
    font-size: 0.76rem;
}

.cs-heatmap thead th {
    font-weight: 700;
    color: #64748b;
    padding: 4px 2px;
    text-align: center;
}

.cs-heatmap tbody th {
    font-weight: 700;
    color: #334155;
    text-align: right;
    padding: 0 6px 0 0;
    white-space: nowrap;
}

.cs-heatmap td {
    text-align: center;
    vertical-align: middle;
    padding: 0;
}

.cs-heatmap__corner {
    width: 2rem;
}

.cs-heatmap__cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 2px 4px;
    border-radius: 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-sizing: border-box;
}

.cs-heatmap__cell[data-level="0"] {
    background: #f1f5f9;
    box-shadow: inset 0 0 0 1px #e2e8f0;
    color: transparent;
    font-size: 0;
}

.cs-heatmap__cell[data-level="1"] {
    background: #dbeafe;
    color: #1e40af;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.cs-heatmap__cell[data-level="2"] {
    background: #93c5fd;
    color: #1e3a8a;
    box-shadow: inset 0 0 0 1px #60a5fa;
}

.cs-heatmap__cell[data-level="3"] {
    background: #3b82f6;
    color: #fff;
    box-shadow: inset 0 0 0 1px #2563eb;
}

.cs-heatmap__cell[data-level="4"] {
    background: #1d4ed8;
    color: #fff;
    box-shadow: inset 0 0 0 1px #1e40af;
}

.cs-heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.cs-heatmap-legend__swatches {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.cs-heatmap-legend__swatch {
    min-width: 1.1rem;
    min-height: 1.1rem;
    padding: 0;
}

.cs-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.cs-job-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.14s ease, border-color 0.14s ease;
}

.cs-job-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.cs-job-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.cs-job-card__title {
    font-size: 0.94rem;
    line-height: 1.35;
    color: #0f172a;
}

.cs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Mediabibliotheek (Contentstudio) ---------- */
.cs-media-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cs-kpi__value--text {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    word-break: break-word;
}

.cs-media-table-details {
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fafbfc;
    padding: 4px 10px 12px;
}

.cs-media-table-details > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
    padding: 10px 6px;
}

.cs-media-table-details > summary::-webkit-details-marker {
    display: none;
}

.cs-media-table-details > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: #64748b;
    font-size: 0.75rem;
}

.cs-media-table-details[open] > summary::before {
    content: "▾";
}

.cs-media-table-details .table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8edf5;
}

/* ---------- Slimme agent (overzicht) ---------- */
.sa-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sa-insights {
    border-color: color-mix(in srgb, var(--s360-primary, #2563eb) 18%, #e8edf5);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--s360-primary-50, #eff6ff) 55%, #fff) 0%,
        #fff 55%
    );
}

.sa-insights__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sa-insights__li {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--s360-border, #e2e8f0);
    background: #fff;
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--s360-text, #0f172a);
}

.sa-insights__focus {
    font-size: 0.84rem;
    line-height: 1.45;
    max-width: 62ch;
}

.sa-gap-hints {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 28rem;
}

.sa-gap-hints__li {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--s360-muted, #64748b);
}

.sa-score-weights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
}

.sa-weight-card {
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.sa-weight-card__pct {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--s360-primary, #2563eb);
    line-height: 1.1;
    margin-bottom: 6px;
}

.sa-weight-card__title {
    display: block;
    font-size: 0.88rem;
    color: #0f172a;
}

.sa-weight-card__text {
    font-size: 0.8rem;
    line-height: 1.45;
}

.sa-cockpit-filters {
    margin-top: 4px;
    margin-bottom: 0;
}

.sa-cockpit-filters__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.sa-filter-reset {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: 8px 6px;
    margin-bottom: 2px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
}

.sa-filter-reset:hover {
    color: var(--s360-primary, #2563eb);
    background: #f1f5f9;
}

.sa-table-wrap {
    margin-top: 14px;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fafbfc;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

.sa-table-wrap .table {
    margin: 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e8edf5;
}

.cockpit-table td,
.cockpit-table th {
    vertical-align: middle;
}

.sa-completeness-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.sa-completeness-good {
    background: #ecfdf5;
    color: #166534;
    border-color: #bbf7d0;
}

.sa-completeness-mid {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

.sa-completeness-low {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Mediabibliotheek: acties in tabel */
.media-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.media-table-actions__delete {
    margin: 0;
    display: inline-flex;
}

/* ——— Analyse & inzichten (marketing-achtige focusstrip) ——— */
.insights-focus {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(18px, 3vw, 32px);
    align-items: stretch;
    margin-bottom: 16px;
}

.insights-focus__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 8px 4px 8px 0;
}

.insights-focus__eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s360-muted);
}

.insights-focus__title {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 750;
    line-height: 1.2;
    color: #38bdf8;
    letter-spacing: -0.02em;
}

.insights-focus__visual {
    position: relative;
    background: linear-gradient(145deg, #0d9488 0%, #14b8a6 42%, #2dd4bf 100%);
    border-radius: 18px;
    padding: clamp(14px, 2vw, 22px);
    box-shadow: 0 12px 40px rgba(13, 148, 136, 0.22);
    min-height: 280px;
}

.insights-focus__jump {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #bef264;
    color: #14532d;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard);
}

.insights-focus__jump:hover {
    filter: brightness(1.05);
    transform: scale(1.04);
}

.insights-focus__jump:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.insights-focus__card {
    background: #fff;
    border-radius: 14px;
    padding: 16px 16px 14px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    box-sizing: border-box;
}

.insights-donut-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.insights-donut {
    --engaged-pct: 0;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    flex-shrink: 0;
    background: conic-gradient(
        var(--s360-success) 0% calc(var(--engaged-pct) * 1%),
        #d9e6f5 calc(var(--engaged-pct) * 1%) 100%
    );
    display: grid;
    place-items: center;
    position: relative;
}

.insights-donut__hole {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.insights-donut__value {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--s360-slate-900);
    line-height: 1.05;
}

.insights-donut__hint {
    margin: 2px 0 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--s360-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.insights-donut__badge {
    align-self: flex-start;
    margin-top: 8px;
    background: #ecfdf5;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(22, 101, 52, 0.12);
}

.insights-matrix-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.insights-matrix-axis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--s360-slate-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.insights-matrix-axis span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.insights-matrix-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    aspect-ratio: 3 / 2.2;
    max-height: 200px;
}

.insights-matrix-cell {
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1rem;
    color: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.35);
    min-height: 44px;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.insights-matrix-cell.is-empty {
    color: var(--s360-slate-500);
    font-weight: 600;
    opacity: 0.55;
}

.insights-matrix-rows {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.insights-matrix-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--s360-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 0;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    flex-shrink: 0;
    width: 1.1rem;
}

.insights-page-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 45%, #22d3ee 100%);
    color: #fff;
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.insights-page-hero h1 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.insights-page-hero p {
    margin: 6px 0 0;
    opacity: 0.92;
    font-size: 0.92rem;
}

@media (max-width: 980px) {
    .insights-focus {
        grid-template-columns: 1fr;
    }

    .insights-focus__visual {
        min-height: 0;
    }

    .insights-matrix-y {
        writing-mode: horizontal-tb;
        transform: none;
        width: auto;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
    }

    .insights-matrix-rows {
        flex-direction: column;
    }
}

/* Sentiment per bron — gestapelde balken */
.insights-source-panel__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: clamp(16px, 2.5vw, 28px);
    align-items: start;
}

.insights-source-panel__aside {
    background: linear-gradient(160deg, #f0fdfa 0%, #eff6ff 100%);
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    padding: 14px 16px;
}

.insights-source-panel__headline {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--s360-slate-800);
    line-height: 1.25;
}

.insights-source-panel__accent {
    color: #38bdf8;
}

.insights-stack-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--s360-slate-600);
}

.insights-stack-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    margin-right: 5px;
    vertical-align: middle;
}

.insights-stack-dot--kritisch { background: #fb7185; }
.insights-stack-dot--neutraal { background: #94a3b8; }
.insights-stack-dot--positief { background: #34d399; }

.insights-stack-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.insights-stack-row {
    display: grid;
    grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 36px;
    gap: 10px;
    align-items: center;
}

.insights-stack-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--s360-slate-700);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insights-stack-track {
    display: flex;
    width: 100%;
    min-height: 28px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--s360-slate-100);
    border: 1px solid var(--s360-border);
}

.insights-stack-seg {
    display: grid;
    place-items: center;
    min-width: 0;
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.insights-stack-seg--kritisch { background: linear-gradient(180deg, #fb7185, #f43f5e); }
.insights-stack-seg--neutraal { background: linear-gradient(180deg, #94a3b8, #64748b); }
.insights-stack-seg--positief { background: linear-gradient(180deg, #34d399, #059669); }

.insights-stack-total {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--s360-muted);
    text-align: right;
}

@media (max-width: 860px) {
    .insights-source-panel__grid {
        grid-template-columns: 1fr;
    }

    .insights-stack-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .insights-stack-label {
        white-space: normal;
    }

    .insights-stack-total {
        text-align: left;
    }
}

/* Stakeholdermapping (invloed × betrokkenheid) */
.mapping-section-header {
    margin-bottom: 14px;
}

.mapping-page-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
}

.mapping-page-heading .info-icon {
    flex-shrink: 0;
}

.mapping-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mapping-toolbar-search {
    flex: 1;
    min-width: 180px;
    max-width: 320px;
}

.mapping-search-input {
    width: 100%;
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.88rem;
    background: var(--s360-surface);
    color: var(--s360-text);
}

.mapping-toolbar-filter {
    margin: 0;
}

.mapping-theme-select {
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.88rem;
    background: var(--s360-surface);
    color: var(--s360-text);
    min-width: 170px;
}

.mapping-view-toggle {
    display: inline-flex;
    gap: 0;
    margin-bottom: 12px;
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--s360-surface);
}

.mapping-view-btn {
    margin: 0;
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--s360-slate-600);
    cursor: pointer;
}

.mapping-view-btn.is-active {
    background: #eff6ff;
    color: var(--s360-primary-dark);
}

.mapping-view-btn:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: -2px;
}

.mapping-panel--table {
    margin-top: 0;
}

.mapping-plot {
    position: relative;
    min-height: 460px;
    padding: 38px 22px 34px 54px;
    background: #f8fafc;
    border: 1px solid var(--s360-border);
    border-radius: 14px;
    overflow: hidden;
}

.mapping-inner {
    position: absolute;
    z-index: 0;
    left: 54px;
    right: 22px;
    top: 38px;
    bottom: 34px;
    pointer-events: none;
}

.mapping-crosshair {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mapping-crosshair::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    margin-left: -0.5px;
    border-left: 1px dashed #cbd5e1;
}

.mapping-crosshair::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -0.5px;
    border-top: 1px dashed #cbd5e1;
}

.mapping-watermarks {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.mapping-wm {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(0.78rem, 1.4vw, 1rem);
    font-weight: 800;
    color: rgba(15, 23, 42, 0.07);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1.2;
    padding: 10px;
}

.mapping-axis {
    position: absolute;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--s360-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mapping-axis--y {
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
}

.mapping-axis--x {
    right: 22px;
    bottom: 10px;
}

.mapping-node {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 130px;
    text-decoration: none;
    color: inherit;
}

.mapping-node:hover {
    z-index: 4;
}

.mapping-node:hover .mapping-node__avatar {
    filter: brightness(1.06);
}

.mapping-node__avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(145deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.mapping-node--tl .mapping-node__avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #38bdf8, 0 4px 14px rgba(56, 189, 248, 0.35);
}

.mapping-node--tr .mapping-node__avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #34d399, 0 4px 14px rgba(52, 211, 153, 0.35);
}

.mapping-node--bl .mapping-node__avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #94a3b8, 0 4px 14px rgba(148, 163, 184, 0.35);
}

.mapping-node--br .mapping-node__avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #fbbf24, 0 4px 14px rgba(251, 191, 36, 0.35);
}

/* Thema-ring (koppeling stakeholder_theme / themes); overschrijft kwadrantkleur */
.mapping-node__avatar.mapping-avatar-ring--0 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f43f5e, 0 4px 14px rgba(244, 63, 94, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--1 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f59e0b, 0 4px 14px rgba(245, 158, 11, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--2 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #06b6d4, 0 4px 14px rgba(6, 182, 212, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--3 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #8b5cf6, 0 4px 14px rgba(139, 92, 246, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--4 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #84cc16, 0 4px 14px rgba(132, 204, 22, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--5 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ea580c, 0 4px 14px rgba(234, 88, 12, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--6 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #14b8a6, 0 4px 14px rgba(20, 184, 166, 0.35);
}

.mapping-node__avatar.mapping-avatar-ring--7 {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ec4899, 0 4px 14px rgba(236, 72, 153, 0.35);
}

.mapping-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--s360-slate-700);
}

.mapping-legend__title {
    font-weight: 700;
    color: var(--s360-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
}

.mapping-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mapping-legend__swatch {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.mapping-legend__swatch.mapping-avatar-ring--0 { background: #f43f5e; }
.mapping-legend__swatch.mapping-avatar-ring--1 { background: #f59e0b; }
.mapping-legend__swatch.mapping-avatar-ring--2 { background: #06b6d4; }
.mapping-legend__swatch.mapping-avatar-ring--3 { background: #8b5cf6; }
.mapping-legend__swatch.mapping-avatar-ring--4 { background: #84cc16; }
.mapping-legend__swatch.mapping-avatar-ring--5 { background: #ea580c; }
.mapping-legend__swatch.mapping-avatar-ring--6 { background: #14b8a6; }
.mapping-legend__swatch.mapping-avatar-ring--7 { background: #ec4899; }

.mapping-node__name {
    font-size: 0.68rem;
    font-weight: 650;
    text-align: center;
    line-height: 1.25;
    background: #fff;
    padding: 3px 7px;
    border-radius: 7px;
    border: 1px solid var(--s360-border);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapping-empty {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    background: rgba(248, 250, 252, 0.92);
}

.mapping-footnote {
    margin: 10px 0 0;
    font-size: 0.78rem;
}

.mapping-table th,
.mapping-table td {
    font-size: 0.84rem;
}

@media (max-width: 720px) {
    .mapping-node__name {
        display: none;
    }

    .mapping-node {
        max-width: 48px;
    }
}

/* ---------- Content pipeline / Content Studio ---------- */

.cp-studio-pack.surface-panel {
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}

.cp-studio-pack__body {
    padding: 16px var(--s360-panel-padding-x) var(--s360-panel-padding-y);
}

.cp-studio__head {
    padding: var(--s360-panel-padding-y) var(--s360-panel-padding-x) 14px;
    border-bottom: 1px solid var(--s360-border, #e5ebf7);
}

.cp-studio__title {
    margin: 0 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.cp-studio__lead {
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 52rem;
}

.cp-tabs-bar {
    padding: 8px 10px 0;
    background: linear-gradient(
        180deg,
        var(--s360-primary-dark, #1d4ed8) 0%,
        color-mix(in srgb, var(--s360-primary-dark, #1d4ed8) 82%, #0f172a) 100%
    );
}

.cp-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.cp-tab {
    margin: 0;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    padding: 10px 16px;
    font-size: 0.84rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cp-tab:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.cp-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.cp-tab[aria-selected="true"] {
    color: var(--s360-primary-dark, #1d4ed8);
    background: var(--s360-surface, #fff);
    border-color: var(--s360-border, #e5ebf7);
    border-bottom-color: var(--s360-surface, #fff);
    margin-bottom: -1px;
    box-shadow: none;
    font-weight: 700;
}

.cp-panel {
    margin-top: 0;
}

.cp-channel-desk {
    border: 1px solid var(--s360-border, #e5ebf7);
    border-radius: 12px;
    padding: 16px 18px 18px;
    margin-bottom: 16px;
    background: color-mix(in srgb, var(--s360-primary-50, #eff6ff) 55%, var(--s360-surface, #fff));
}

.cp-channel-desk__head {
    margin-bottom: 14px;
}

.cp-channel-desk__title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.cp-variant-grid--desk {
    grid-template-columns: 1fr;
}

@media (min-width: 900px) {
    .cp-variant-grid--desk {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.cp-variant-card--accent {
    border-color: color-mix(in srgb, var(--s360-primary, #2563eb) 35%, var(--s360-border, #e5ebf7));
    box-shadow: 0 1px 0 rgba(37, 99, 235, 0.06);
}

.cp-variant-preview--muted {
    opacity: 0.92;
}

.cp-planning-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

/* ---------- Contentstudio pro cards ---------- */

.cp-pro-workspace {
    margin-top: 0;
}

.cp-pro-card {
    border: 1px solid var(--s360-border, #e5ebf7);
    border-radius: 14px;
    background: var(--s360-surface, #fff);
    box-shadow: var(--s360-shadow-card, 0 1px 2px rgba(16, 24, 40, 0.06));
    overflow: hidden;
}

.cp-pro-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(
        180deg,
        var(--s360-primary-dark, #1d4ed8) 0%,
        color-mix(in srgb, var(--s360-primary-dark, #1d4ed8) 88%, #0f172a) 100%
    );
    color: #fff;
}

.cp-pro-card__header-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.cp-pro-card__header-icon svg {
    opacity: 0.95;
}

.cp-pro-card__header-text {
    min-width: 0;
}

.cp-pro-card__header-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.cp-pro-card__header-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.82) !important;
    line-height: 1.45;
}

.cp-pro-card__body {
    padding: 16px 18px 20px;
}

.cp-pro-card__footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--s360-border, #e5ebf7);
}

.cp-pro-section {
    margin: 0;
}

.cp-pro-placeholder {
    padding: 12px 0 8px;
    max-width: 44rem;
}

/* Contentstudio: input-bron-rail + hoofdkolom (MVP-diagram) */
.cs-page--with-input-bron {
    display: grid;
    gap: 16px;
    align-items: start;
}

@media (min-width: 960px) {
    .cs-page--with-input-bron {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
    }

    .cp-studio-recent-full-span {
        grid-column: 1 / -1;
    }
}

.cp-studio-column {
    min-width: 0;
}

.cp-input-bron-rail {
    margin-bottom: 0;
    padding: 14px 16px 16px;
}

.cp-input-bron-rail__title {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.cp-input-bron-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-input-bron-rail__link {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--s360-primary-dark, #1d4ed8);
    text-decoration: none;
}

.cp-input-bron-rail__link:hover {
    text-decoration: underline;
}

.cp-input-bron-rail__hint {
    display: block;
    font-size: 0.68rem;
    margin-top: 2px;
}

.cp-tabs--three .cp-tab {
    padding-inline: 18px;
}

.cp-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--s360-border, #e5ebf7);
    margin: 0 0 18px;
}

.cp-subtabs--dense {
    margin-top: -4px;
}

.cp-subtab {
    margin: 0;
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: #64748b;
    background: transparent;
    border-radius: 8px 8px 0 0;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.cp-subtab:hover {
    color: #334155;
    background: #f8fafc;
}

.cp-subtab.is-active {
    color: var(--s360-primary-dark, #1d4ed8);
    border-bottom-color: var(--s360-primary, #2563eb);
    background: color-mix(in srgb, var(--s360-primary-50, #eff6ff) 65%, transparent);
}

.cp-subtab:focus-visible {
    outline: 2px solid var(--s360-primary, #2563eb);
    outline-offset: 2px;
}

.cp-subpanel[hidden] {
    display: none !important;
}

.cp-review-split {
    display: grid;
    gap: 20px;
    align-items: start;
}

@media (min-width: 900px) {
    .cp-review-split {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
    }
}

.cp-review-split__aside {
    background: color-mix(in srgb, var(--s360-primary-50, #eff6ff) 70%, #fff);
    border: 1px solid color-mix(in srgb, var(--s360-primary, #2563eb) 22%, var(--s360-border, #e5ebf7));
    border-radius: 12px;
    padding: 14px 16px;
}

.cp-review-channel-preview {
    border: 1px solid var(--s360-border, #e5ebf7);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fafbfc;
}

.cp-review-channel-preview--muted {
    background: #fff;
}

.cp-review-feedback-ta {
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--s360-border, #e5ebf7);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.45;
    resize: vertical;
    min-height: 6rem;
}

.cp-plan-schedule-card {
    border-style: dashed;
}

.cp-plan-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
}

.cp-plan-slot-row__label {
    font-weight: 600;
    color: #334155;
}

.cp-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.cp-variant-card {
    border: 1px solid var(--s360-border, #e5ebf7);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.cp-variant-card--muted {
    background: #fafbfc;
}

.cp-variant-card__title {
    margin: 0 0 8px;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.cp-checklist {
    margin: 0 0 16px;
    padding-left: 1.2rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #334155;
}

.cp-checklist li {
    margin-bottom: 6px;
}

.cp-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cp-entry-banner {
    border-left: 4px solid var(--s360-primary, #2563eb);
    background: linear-gradient(90deg, #eff6ff 0%, #fff 42%);
}

.cp-variant-grid--mock {
    align-items: stretch;
}

.cp-variant-preview {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    background: #fafbfc;
    min-height: 7.5rem;
    margin-bottom: 12px;
}

.cp-variant-preview__title {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
}

.cp-variant-preview__body {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #475569;
}

.cp-variant-card__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.cp-variant-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cp-variant-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--s360-border, #e5ebf7);
}

.cp-connectors-card {
    margin-top: 16px;
}

.cp-connector-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cp-connector-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 12px;
    border: 1px solid var(--s360-border, #e5ebf7);
    border-radius: 10px;
    background: #fff;
}

.cp-connector-list__name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #0f172a;
    min-width: 10rem;
}

.cp-publog-table {
    font-size: 0.86rem;
}

.s360-content-entry-card .section-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

/* --- Startdashboard: vereenvoudigde kaartenlayout --- */
.landing-dashboard-v2 {
    background: #eef2f7;
    margin: -6px -10px 0;
    padding: 14px 12px 24px;
}

@media (min-width: 900px) {
    .landing-dashboard-v2 {
        margin: -8px -18px 0;
        padding: 18px 18px 28px;
    }
}

.landing-hero--simple {
    position: relative;
    overflow: visible;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    padding: 14px 16px 12px;
    margin-bottom: 0;
}

.landing-hero--simple .landing-hero__title {
    margin: 0 0 6px;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.landing-hero--simple .landing-hero__lead {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #64748b;
    max-width: 40rem;
}

.landing-hero--simple .landing-hero__metrics {
    margin-top: 10px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.landing-hero--simple .landing-hero__metric strong {
    color: #0f172a;
    font-weight: 700;
}

.landing-hero--simple .landing-hero__metric-sep {
    margin: 0 0.35rem;
    color: #cbd5e1;
}

.landing-hero--simple .landing-hero__hint {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #64748b;
}

.landing-hero--simple .landing-hero__hint strong {
    color: #334155;
}

.landing-toolbar--simple {
    background: #f8fafc;
}

.landing-dashboard-v2 .landing-widgets {
    margin-top: 14px;
}

.landing-dashboard-v2 .landing-widget.card {
    padding: 0;
    margin-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
    border-color: #e2e8f0;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.07);
}

.landing-widget--simple {
    min-height: 0;
}

.landing-widget--simple .landing-widget__head.landing-widget__head--solid {
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: none;
}

.landing-widget--simple[data-tone="navy"] .landing-widget__head--solid {
    background: #1a3d6b;
}

.landing-widget--simple[data-tone="red"] .landing-widget__head--solid {
    background: #b4232f;
}

.landing-widget--simple[data-tone="green"] .landing-widget__head--solid {
    background: #4a7c44;
}

.landing-widget--simple .landing-widget__title {
    color: #fff;
    font-size: 0.94rem;
    font-weight: 700;
}

.landing-widget--simple .landing-widget__kebab--on-dark > summary {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.landing-widget--simple .landing-widget__kebab--on-dark > summary:hover {
    background: rgba(255, 255, 255, 0.2);
}

.landing-widget--simple .landing-widget__body {
    padding: 12px 16px 8px;
}

.landing-widget--simple .landing-widget__footer--simple {
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 16px 14px;
    border-top: 1px solid #edf2f7;
    gap: 8px;
}

.landing-widget--simple .landing-widget__footer--simple .btn-secondary.btn-xs {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1a3d6b;
    font-weight: 600;
}

.landing-widget--simple .landing-widget__footer--simple .btn-secondary.btn-xs:hover {
    background: #eff6ff;
    border-color: #94a3b8;
    color: #0f2744;
}

.landing-widget--simple .landing-visual-list__item {
    border-radius: 8px;
    box-shadow: none;
    padding: 8px 10px;
}

.landing-widget--simple .landing-widget__section-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

/* --- Post-login landing (widget dashboard) --- */
.landing-hero .landing-hero__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px 18px;
}

.landing-hero--visual {
    position: relative;
    overflow: hidden;
    border: none;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 42%, #1d4ed8 100%);
    color: #f8fafc;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);
}

.landing-hero--visual::after {
    content: "";
    position: absolute;
    inset: -40% 40% auto -20%;
    height: 140%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14), transparent 55%);
    pointer-events: none;
}

.landing-hero--visual .landing-hero__row {
    position: relative;
    z-index: 1;
}

.landing-hero__intro {
    flex: 1 1 280px;
    min-width: 0;
}

.landing-hero__title {
    margin: 0 0 8px;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.landing-hero__lead {
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(248, 250, 252, 0.88);
    max-width: 36rem;
}

.landing-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.landing-stat-pill {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    min-width: 6.5rem;
}

.landing-stat-pill__num {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.landing-stat-pill__lbl {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(248, 250, 252, 0.72);
}

.landing-hero__hint {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    font-size: 0.82rem;
    color: rgba(248, 250, 252, 0.82);
}

.landing-hero__hint strong {
    color: #fff;
}

.landing-hero--visual .landing-toolbar {
    flex: 0 1 auto;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(10px);
}

.landing-hero--visual .landing-toolbar__label {
    color: rgba(248, 250, 252, 0.65);
}

.landing-hero--visual .landing-toolbar .btn-secondary.btn-xs {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.landing-hero--visual .landing-toolbar .btn-secondary.btn-xs:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.landing-hero--visual .landing-toolbar .js-landing-filter.is-active {
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.landing-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 8px 10px;
    border: 1px solid var(--s360-border, #dbe4f0);
    border-radius: 12px;
    background: #fff;
}

.landing-toolbar__label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s360-muted, #64748b);
}

.landing-toolbar__toggles {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.landing-toolbar .btn-xs.is-active {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

.landing-widgets {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.landing-widget {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    min-height: 280px;
}

.landing-widget__head {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8edf7;
}

.landing-widget__accent-bar {
    width: 5px;
    flex-shrink: 0;
    border-radius: 6px;
    background: hsl(var(--accent-h, 218), 68%, 52%);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
    min-height: 2.5rem;
    align-self: stretch;
}

.landing-widget__title-cluster {
    flex: 1;
    min-width: 0;
}

.landing-widget--visual.card {
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07);
    border-color: #e2e8f0;
}

.landing-widget__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.landing-widget__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.landing-widget__body {
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 10px;
}

.landing-widget__footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e8edf7;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.landing-widget__section-title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.landing-widget__table {
    font-size: 0.82rem;
}

.landing-widget__table td,
.landing-widget__table th {
    padding: 6px 8px;
}

.landing-widget__empty {
    font-size: 0.82rem;
    margin: 0;
}

.landing-widget__split {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 14px;
    align-items: start;
}

.landing-widget__stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.landing-widget__kebab {
    position: relative;
}

.landing-widget__kebab > summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    padding: 2px 8px;
    color: #64748b;
    font-weight: 800;
    line-height: 1;
    user-select: none;
}

.landing-widget__kebab > summary::-webkit-details-marker {
    display: none;
}

.landing-widget__kebab-body {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    background: #fff;
    border: 1px solid #dbe4f0;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    padding: 8px;
    z-index: 20;
}

.landing-widget__kebab-body a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #1f2937;
    text-decoration: none;
}

.landing-widget__kebab-body a:hover {
    background: #f8fafc;
}

.field--inline-num {
    max-width: 88px;
}

@media (max-width: 1100px) {
    .landing-widget {
        grid-column: span 6;
    }

    .landing-widget__split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .landing-widget {
        grid-column: span 12;
    }
}

/* Landing dashboard: AJAX widget refresh */
.landing-shell {
    position: relative;
}

.landing-shell.is-loading .landing-widgets-skeleton {
    display: block;
}

.landing-shell.is-loading .landing-widgets {
    opacity: 0.55;
    pointer-events: none;
}

.landing-widgets-skeleton {
    display: none;
    margin-bottom: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px dashed #dbe4f0;
    background: #f8fafc;
}

.landing-skel-line {
    height: 10px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 45%, #e2e8f0 90%);
    background-size: 200% 100%;
    animation: landing-skel-shimmer 1.1s ease-in-out infinite;
    margin-bottom: 10px;
}

.landing-skel-line--short {
    width: 55%;
}

@keyframes landing-skel-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.landing-toolbar .js-landing-filter.is-active {
    border-color: #2563eb;
    color: #1e40af;
    background: #eff6ff;
}

.landing-widget__split--visual {
    gap: 16px;
}

.landing-widget__stack--visual {
    gap: 16px;
}

.landing-visual-panel {
    padding: 2px 0 0;
}

.landing-visual-panel--muted {
    padding: 10px 12px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
}

.landing-visual-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landing-visual-list--compact {
    gap: 8px;
}

.landing-visual-list__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid #e8edf7;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.landing-visual-list__item--horiz {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.landing-visual-list__item--combo {
    align-items: stretch;
}

.landing-visual-list__item--task {
    align-items: flex-start;
    gap: 12px;
}

.landing-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #1e40af;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.landing-visual-list__body {
    flex: 1;
    min-width: 0;
}

.landing-visual-list__row1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing-visual-list__titles {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.landing-visual-list__name {
    font-weight: 600;
    font-size: 0.86rem;
    color: #0f172a;
    text-decoration: none;
}

.landing-visual-list__name:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.landing-theme-tag {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #1e3a8a;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing-theme-tag--grow {
    flex: 1 1 auto;
    min-width: 0;
}

.landing-theme-tag:hover {
    background: #dbeafe;
}

.landing-visual-list__meter-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.landing-visual-list__meter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 42%;
    min-width: 120px;
}

.landing-visual-list__who {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.landing-visual-list__score {
    font-size: 0.8rem;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.landing-visual-list__score--sm {
    font-size: 0.75rem;
}

.landing-visual-list__meta {
    font-size: 0.72rem;
    flex-shrink: 0;
}

.landing-visual-meter {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.landing-visual-meter__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    min-width: 4%;
    transition: width 0.35s ease;
}

.landing-visual-avatar {
    --landing-avatar-hue: 215;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: hsl(var(--landing-avatar-hue), 58%, 48%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.landing-visual-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.landing-visual-timeline__item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 10px 0 10px 4px;
}

.landing-visual-timeline__item:not(:last-child) {
    border-bottom: 1px solid #eef2f7;
}

.landing-visual-timeline__dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #94a3b8;
    box-shadow: 0 0 0 3px #e2e8f0;
}

.landing-visual-timeline__dot--accent {
    background: #2563eb;
    box-shadow: 0 0 0 3px #dbeafe;
}

.landing-visual-timeline__content {
    flex: 1;
    min-width: 0;
}

.landing-visual-timeline__line1 {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
    font-weight: 600;
}

.landing-visual-timeline__line1 a {
    color: #0f172a;
    text-decoration: none;
}

.landing-visual-timeline__line1 a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.landing-visual-timeline__score {
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #1e40af;
}

.landing-visual-timeline__line2 {
    font-size: 0.78rem;
    margin-top: 4px;
}

.landing-visual-timeline__line2 a {
    color: #475569;
    text-decoration: none;
}

.landing-visual-timeline__line2 a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.landing-visual-timeline__date {
    font-size: 0.72rem;
}

.landing-issue-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.landing-issue-card {
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid #e8edf7;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    border-left: 4px solid #1d4ed8;
}

.landing-issue-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.landing-issue-card__title {
    font-weight: 700;
    font-size: 0.88rem;
    color: #0f172a;
    text-decoration: none;
    line-height: 1.35;
}

.landing-issue-card__title:hover {
    color: #1d4ed8;
}

.landing-issue-card__bottom {
    margin-top: 8px;
}

.landing-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.landing-chip--xs {
    font-size: 0.62rem;
    padding: 1px 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.landing-chip--ok {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.landing-chip--info {
    color: #1e40af;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.landing-chip--warn {
    color: #9a3412;
    background: #ffedd5;
    border: 1px solid #fed7aa;
}

.landing-chip--danger {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.landing-chip--neutral {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.landing-chip--muted {
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.landing-severity {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
}

.landing-severity--danger {
    background: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.landing-severity--warn {
    background: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.22);
}

.landing-severity--info {
    background: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
}

.landing-task-reason {
    font-size: 0.82rem;
    color: #334155;
    margin-top: 4px;
}

.landing-intake-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed #c7d2fe;
    background: linear-gradient(135deg, #eff6ff 0%, #fff 55%);
}

.landing-intake-visual__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(145deg, #1d4ed8, #3b82f6);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    position: relative;
}

.landing-intake-visual__icon::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 8px;
    border-top-color: transparent;
    transform: rotate(-8deg);
}

.landing-intake-visual__lead {
    font-size: 0.88rem;
    color: #334155;
    max-width: 32rem;
    line-height: 1.45;
}

.landing-intake-visual__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.landing-priorities-widget {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.landing-module-chart {
    padding: 4px 0 0;
}

.landing-module-chart__caption {
    font-size: 0.8rem;
    line-height: 1.35;
}

.landing-module-chart .priorities-chart-svg--large {
    max-height: 240px;
    width: 100%;
    height: auto;
}

.landing-module-chart .priorities-legend {
    margin-top: 8px;
}

@media (max-width: 1100px) {
    .landing-visual-list__meter-wrap {
        flex-basis: 100%;
        min-width: 0;
    }

    .landing-visual-list__item--horiz {
        flex-wrap: wrap;
    }
}

/* Stakeholder create: CSV/Excel import (header actions) */
.section-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 639px) {
    .section-header__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

.stakeholder-import-upload-form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0;
}

/* <label> i.p.v. <button>: zelfde affordance, geen default form-submit. */
.stakeholder-import-file-label {
    user-select: none;
}

/* Buiten scherm maar niet clip:0 — anders faalt input.click() in sommige browsers. */
.stakeholder-import-file-input--offscreen {
    position: fixed;
    left: -9999px;
    top: 0;
    width: 2px;
    height: 2px;
    opacity: 0.01;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
}

.stakeholder-import-mapping-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s360-form-stack-gap, 14px);
}

@media (max-width: 720px) {
    .stakeholder-import-mapping-grid {
        grid-template-columns: 1fr;
    }
}

.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Content: concepten-overzicht (kaarten i.p.v. tabel) ---------- */
.s360-concepts-page {
    max-width: 960px;
}

.s360-concepts-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 20px;
    margin-bottom: 18px;
}

.s360-concepts-header__title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.s360-concepts-header__title-icon {
    display: grid;
    place-items: center;
    color: var(--s360-primary);
}

.s360-concepts-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.s360-concepts-workflow-hint__summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--s360-slate-700);
    padding: 4px 0;
}

.s360-concepts-workflow-hint__body {
    padding-top: 12px;
}

.s360-concepts-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
}

.s360-concepts-toolbar__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    background: var(--s360-surface);
}

.s360-concepts-toolbar__search-ico {
    flex-shrink: 0;
    color: var(--s360-slate-400);
}

.s360-concepts-toolbar__search-label {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.s360-concepts-toolbar__search {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    padding: 6px 4px;
    min-height: 36px;
    box-sizing: border-box;
}

.s360-concepts-toolbar__search:focus {
    outline: none;
}

.s360-concepts-toolbar__search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--s360-primary) 42%, var(--s360-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--s360-primary) 18%, transparent);
}

.s360-concepts-toolbar__account {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.s360-concepts-toolbar__account-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--s360-muted);
}

.s360-concepts-toolbar__select {
    font: inherit;
    font-size: 0.9rem;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    min-height: 42px;
}

.s360-concepts-toolbar__submit {
    align-self: flex-end;
}

@media (max-width: 560px) {
    .s360-concepts-toolbar__submit {
        width: 100%;
    }
}

.s360-concepts-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.s360-concepts-empty {
    padding: 28px 22px;
    text-align: center;
}

.s360-concept-card {
    border: 1px dashed var(--s360-slate-200);
    border-radius: var(--s360-radius-card);
    background: var(--s360-surface);
    padding: 14px 16px 12px;
    box-shadow: var(--s360-shadow-card);
}

.s360-concept-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
    font-size: 0.82rem;
}

.s360-concept-card__channel-dot {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--s360-im-blue) 0%, var(--s360-primary-dark) 100%);
    color: #fff;
    flex-shrink: 0;
}

.s360-concept-card__datetime {
    font-weight: 600;
    color: var(--s360-slate-600);
}

.s360-concept-card__author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--s360-slate-600);
    font-weight: 600;
}

.s360-concept-card__author-ico {
    color: var(--s360-slate-400);
}

.s360-concept-card__body {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.s360-concept-card__text {
    min-width: 0;
    flex: 1;
}

.s360-concept-card__title {
    margin: 0 0 6px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--s360-text);
}

.s360-concept-card__title a {
    color: inherit;
    text-decoration: none;
}

.s360-concept-card__title a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s360-concept-card__byline {
    margin: 0 0 8px;
    font-size: 0.88rem;
}

.s360-concept-card__byline-inner {
    font-style: italic;
    color: var(--s360-slate-600);
}

.s360-concept-card__byline-inner--meta {
    font-style: italic;
    font-size: 0.82rem;
    color: var(--s360-muted);
}

.s360-concept-card__snippet {
    margin: 0;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--s360-slate-700);
}

.s360-concept-card__thumb {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--s360-border);
    background: var(--s360-slate-50);
}

.s360-concept-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s360-concept-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--s360-slate-100);
}

.s360-concept-card__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0.92;
}

.s360-concept-card__del-form {
    display: inline-flex;
    margin: 0;
}

.s360-btn-icon--ghost {
    pointer-events: none;
    opacity: 0.65;
    cursor: default;
}

.s360-concept-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.s360-concept-badge--neutral {
    background: var(--s360-slate-100);
    color: var(--s360-slate-700);
    border: 1px solid var(--s360-slate-200);
}

.s360-concept-badge--warning {
    background: color-mix(in srgb, var(--s360-warning) 16%, #fff);
    color: color-mix(in srgb, var(--s360-warning) 55%, #422006);
    border: 1px solid color-mix(in srgb, var(--s360-warning) 35%, #fde68a);
}

.s360-concept-badge--danger {
    background: color-mix(in srgb, #f87171 14%, #fff);
    color: #991b1b;
    border: 1px solid color-mix(in srgb, #f87171 35%, #fecaca);
}

.s360-concept-badge svg {
    flex-shrink: 0;
}

/* ---------- Contentcreatie: social composer (publicatiepagina-layout) ---------- */
.s360-social-composer {
    margin-top: 4px;
}

.s360-social-composer__page {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65);
}

.s360-social-composer__shell {
    display: grid;
    gap: 18px;
    align-items: start;
    padding: 0;
}

@media (min-width: 880px) {
    .s360-social-composer__shell {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
    }
}

.s360-social-composer__rail {
    background: #fff;
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-radius-card);
    padding: 16px 14px 14px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
}

.s360-social-composer__rail-title {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--s360-slate-800);
}

.s360-social-composer__rail-hint {
    font-size: 0.78rem;
    line-height: 1.4;
}

.s360-social-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-social-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: 10px;
    border: 1px solid var(--s360-slate-100);
    cursor: pointer;
    transition: background 0.12s ease;
}

.s360-social-profile-row:hover {
    background: var(--s360-slate-50);
}

.s360-social-profile-row input {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
}

.s360-social-profile-row__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--s360-slate-100);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--s360-slate-600);
}

.s360-social-profile-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s360-social-profile-row__main {
    flex: 1;
    min-width: 0;
}

.s360-social-profile-row__name {
    display: block;
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--s360-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s360-social-profile-row__sub {
    font-size: 0.72rem;
}

.s360-social-profile-row__plat {
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.s360-social-composer__main {
    min-width: 0;
}

.s360-social-composer__editor-shell {
    background: #fff;
    border: 1px solid var(--s360-border);
    border-radius: 14px;
    padding: 16px 18px 18px;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.07);
}

.s360-social-composer__card-head {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--s360-slate-100);
}

.s360-social-composer__card-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
}

.s360-social-composer__card-head-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    min-width: 0;
}

.s360-social-composer__card-head-actions {
    display: inline-flex;
    gap: 6px;
    flex-shrink: 0;
}

.s360-social-composer__channel-tag {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.s360-social-mode-toggle {
    display: inline-flex;
    padding: 3px;
    border-radius: 12px;
    background: var(--s360-slate-100);
    border: 1px solid var(--s360-slate-200);
    gap: 2px;
}

.s360-social-mode-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--s360-slate-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    box-sizing: border-box;
}

.s360-social-mode-btn.is-active {
    background: #fff;
    color: var(--s360-slate-900);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.s360-social-mode-spark {
    flex-shrink: 0;
}

.js-social-composer.is-ai-mode .s360-social-composer__reprompt-anchor {
    outline: 2px solid color-mix(in srgb, var(--s360-primary) 28%, transparent);
    outline-offset: 4px;
    border-radius: 10px;
}

.s360-social-composer__reprompt-anchor {
    margin-bottom: 10px;
}

.s360-social-reprompt-details {
    border: 1px solid var(--s360-slate-200);
    border-radius: 10px;
    background: color-mix(in srgb, var(--s360-primary) 6%, var(--s360-surface));
    overflow: hidden;
}

.s360-social-reprompt-details__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--s360-slate-800);
    list-style: none;
}

.s360-social-reprompt-details__summary::-webkit-details-marker {
    display: none;
}

.s360-social-reprompt-details__title {
    display: inline-flex;
    color: var(--s360-primary);
}

.s360-social-reprompt-details__label {
    font-weight: 800;
    letter-spacing: 0.02em;
}

.s360-social-reprompt-details__hint {
    font-size: 0.8rem;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 12ch;
}

.s360-social-reprompt-details__body {
    padding: 0 14px 14px;
    border-top: 1px dashed var(--s360-slate-200);
    padding-top: 12px;
}

.s360-social-composer__form {
    margin: 0;
}

.s360-social-composer__editor-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.s360-social-editor-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--s360-slate-100);
}

.s360-social-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.s360-social-editor-toolbar__btn {
    min-width: 36px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--s360-slate-200);
    background: var(--s360-surface);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--s360-slate-700);
    cursor: pointer;
}

.s360-social-editor-toolbar__btn:hover {
    background: var(--s360-slate-50);
}

.s360-social-editor-toolbar__sep {
    width: 1px;
    height: 22px;
    background: var(--s360-slate-200);
    margin: 0 2px;
    flex-shrink: 0;
}

.s360-social-charcount {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--s360-slate-500);
    flex-shrink: 0;
}

.s360-social-composer__textarea {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    border: 1px solid var(--s360-slate-200);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--s360-text);
    background: #fafafa;
    box-sizing: border-box;
}

.s360-social-composer__textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--s360-primary) 45%, var(--s360-slate-200));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--s360-primary) 18%, transparent);
}

/* HTML-body editor: Voorbeeld / HTML (content workflow; o.a. social composer) */
.s360-cw-html-body-editor-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-cw-html-body-view-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: var(--s360-slate-50);
    border: 1px solid var(--s360-slate-100);
    align-self: flex-start;
}

.s360-cw-html-body-tab {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--s360-slate-600);
    cursor: pointer;
}

.s360-cw-html-body-tab:hover {
    color: var(--s360-slate-900);
}

.s360-cw-html-body-tab.is-active {
    background: #fff;
    color: var(--s360-slate-900);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.s360-cw-html-body-preview-pane {
    display: none;
    min-height: 280px;
    box-sizing: border-box;
    border: 1px solid var(--s360-slate-200);
    border-radius: 10px;
    padding: 14px 16px;
    background: #fafafa;
    overflow: auto;
}

.s360-cw-html-body-editor-wrap[data-body-tab="preview"] .s360-cw-html-body-preview-pane {
    display: block;
}

.s360-cw-html-body-editor-wrap[data-body-tab="preview"] .s360-social-composer__textarea {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    resize: none;
    min-height: 0;
}

.s360-cw-html-body-preview-pane .s360-approval-preview-inner:empty::before {
    content: "Geen inhoud om te tonen.";
    color: var(--s360-slate-500);
    font-size: 0.9rem;
}

.s360-cw-html-body-plain-preview {
    margin: 0;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--s360-slate-800);
    max-height: min(420px, 55vh);
    overflow: auto;
}

.s360-cw-channel-body-textarea {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    border: 1px solid var(--s360-slate-200);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--s360-text);
    background: #fafafa;
    box-sizing: border-box;
}

.s360-cw-channel-body-textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--s360-primary) 45%, var(--s360-slate-200));
    background: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--s360-primary) 18%, transparent);
}

.s360-cw-html-body-editor-wrap[data-body-tab="preview"] .s360-cw-channel-body-textarea {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    resize: none;
    min-height: 0;
}

.s360-nl-json-source {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.45;
}

.s360-social-category-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--s360-slate-200);
}

.s360-social-category-ico {
    color: var(--s360-warning);
    display: grid;
    place-items: center;
}

.s360-social-category-input {
    flex: 1;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    color: var(--s360-muted);
    min-height: 32px;
}

.s360-social-media-block {
    margin-top: 16px;
    padding: 14px 14px 16px;
    border-radius: 12px;
    border: 1px dashed var(--s360-slate-300);
    background: #fafbfc;
}

.s360-social-media-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.s360-social-media-block__title {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-slate-600);
}

.s360-social-media-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 16px;
}

.s360-social-media-drop__text {
    font-size: 0.88rem;
    font-style: italic;
    flex: 1;
    min-width: 160px;
}

.s360-social-media-drop__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-shrink: 0;
}

.s360-social-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--s360-slate-100);
}

.s360-social-footer-bar__left,
.s360-social-footer-bar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.s360-social-footer-bar__mid {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.s360-social-footer-schedule {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid var(--s360-border);
    background: #fff;
    cursor: pointer;
    max-width: 100%;
}

.s360-social-footer-schedule__ico {
    display: grid;
    place-items: center;
    color: var(--s360-slate-600);
    flex-shrink: 0;
}

.s360-social-footer-schedule__input {
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: var(--s360-slate-800);
    min-width: 0;
    max-width: 100%;
    padding: 2px 0;
}

.s360-social-footer-schedule__input::-webkit-calendar-picker-indicator {
    opacity: 0.75;
    cursor: pointer;
}

@media (max-width: 720px) {
    .s360-social-footer-bar__mid {
        order: 3;
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

.s360-social-split {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    /* overflow:hidden sneed het ▾-dropdownmenu af (absolute naar boven); hoeken zitten op kinderen */
    overflow: visible;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    position: relative;
    z-index: 1;
}

.s360-social-split__main {
    border-radius: 10px 0 0 10px;
    margin: 0;
    border: 0;
    padding: 10px 18px;
    font-weight: 700;
}

.s360-social-split__more {
    position: relative;
    border-left: 1px solid color-mix(in srgb, #fff 35%, var(--s360-primary-dark));
}

.s360-social-split__more summary {
    list-style: none;
    cursor: pointer;
    min-height: 100%;
    min-width: 42px;
    display: grid;
    place-items: center;
    background: var(--s360-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    user-select: none;
    border-radius: 0 10px 10px 0;
}

.s360-social-split__more summary::-webkit-details-marker {
    display: none;
}

.s360-social-split__menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    min-width: 220px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--s360-border);
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 1300;
}

.s360-social-split__mi {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--s360-slate-800);
}

.s360-social-split__mi:hover {
    background: var(--s360-slate-50);
}

.s360-social-split__mi--link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.s360-social-split__mi--link:hover {
    background: var(--s360-slate-50);
}

/* Publicatieplan: composer-achtige kaart + footer (inspiratie Spotler) */
.s360-pub-plan-composer-card {
    background: #fff;
    border: 1px solid var(--s360-border);
    border-radius: var(--s360-radius-card);
    padding: 16px 18px 18px;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.07);
}

.s360-pub-plan-composer-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.s360-pub-plan-composer-lede {
    font-size: 0.84rem;
    line-height: 1.45;
    max-width: 52ch;
}

.s360-pub-plan-footer .s360-pub-plan-footer__right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}

.s360-pub-plan-footer__when {
    min-width: 0;
}

.s360-pub-footer-datetime-label {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--s360-slate-600);
    margin-bottom: 4px;
}

.s360-pub-footer-datetime {
    font: inherit;
    font-size: 0.88rem;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--s360-border);
    min-height: 42px;
    min-width: 200px;
    max-width: 100%;
    box-sizing: border-box;
}

/* --- Public marketing site (home + shared header/footer) --- */
.s360-site {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    background: var(--s360-bg);
    color: var(--s360-text);
    -webkit-font-smoothing: antialiased;
}

.s360-site a {
    color: inherit;
    text-decoration: none;
}

.s360-site-skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.s360-site-skip:focus {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 200;
    width: auto;
    height: auto;
    padding: 10px 14px;
    background: var(--s360-surface);
    border: 2px solid var(--s360-primary);
    border-radius: 10px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

.s360-site-main {
    min-width: 0;
    flex: 1 0 auto;
}

.s360-site-wrap {
    width: min(1180px, 94%);
    margin: 0 auto;
    padding: 0 0 48px;
}

.s360-site-page-pad {
    padding-top: 28px;
    padding-bottom: 48px;
}

.s360-site-inline-link {
    color: var(--s360-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.s360-site-inline-link:hover {
    color: var(--s360-primary-dark, #1d4ed8);
}

.s360-site-errors {
    padding-top: 16px;
}

.s360-site-errors__box {
    background: #fff0f0;
    border: 1px solid #ffc9c9;
    border-radius: 12px;
    padding: 12px 16px;
    color: #7a2222;
}

.s360-site-errors__list {
    margin: 0;
    padding-left: 1.2rem;
}

/* Header */
.s360-site-header {
    position: sticky;
    top: 0;
    z-index: 80;
}

.s360-site-header__bar {
    border-bottom: 1px solid color-mix(in srgb, var(--s360-border) 85%, transparent);
    background: color-mix(in srgb, var(--s360-surface) 78%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@supports not (backdrop-filter: blur(1px)) {
    .s360-site-header__bar {
        background: var(--s360-surface);
    }
}

.s360-site-header__inner {
    width: min(1180px, 94%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 8px 0;
}

.s360-site-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    border-radius: 12px;
    padding: 4px 6px 4px 0;
    margin-left: -4px;
}

.s360-site-brand:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-brand__logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 10px 22px rgba(47, 111, 237, 0.22);
    flex-shrink: 0;
}

.s360-site-brand__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s360-site-brand__name {
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.s360-site-brand__tag {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--s360-muted);
    letter-spacing: 0.02em;
}

.s360-site-nav {
    display: none;
    flex: 1;
    justify-content: center;
}

@media (min-width: 960px) {
    .s360-site-nav {
        display: flex;
    }
}

.s360-site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.s360-site-nav__item {
    position: relative;
}

.s360-site-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--s360-text);
    transition: background 0.15s ease, color 0.15s ease;
}

.s360-site-nav__link:hover {
    background: color-mix(in srgb, var(--s360-primary) 8%, transparent);
}

.s360-site-nav__link:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-mega {
    position: relative;
}

.s360-site-mega__trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--s360-text);
    transition: background 0.15s ease;
}

.s360-site-mega__trigger::-webkit-details-marker {
    display: none;
}

.s360-site-mega__trigger::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--s360-muted);
    margin-top: 2px;
    transition: transform 0.2s ease;
}

.s360-site-mega[open] .s360-site-mega__trigger::after {
    transform: rotate(180deg);
}

.s360-site-mega__trigger:hover,
.s360-site-mega[open] .s360-site-mega__trigger {
    background: color-mix(in srgb, var(--s360-primary) 10%, transparent);
}

.s360-site-mega__trigger:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-mega__panel {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% + 10px);
    min-width: min(520px, 92vw);
    padding: 14px;
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
    animation: s360-site-fade-in 0.2s ease;
}

.s360-site-mega__panel--wide {
    min-width: min(900px, 94vw);
}

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

@media (max-width: 1100px) {
    .s360-site-mega__grid {
        grid-template-columns: 1fr;
    }
}

.s360-site-mega__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.s360-site-mega__card:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.s360-site-mega__card:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-mega__kicker {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s360-primary);
}

.s360-site-mega__title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0f172a;
}

.s360-site-mega__desc {
    font-size: 0.82rem;
    color: var(--s360-muted);
    line-height: 1.45;
}

.s360-site-header__cta {
    display: none;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .s360-site-header__cta {
        display: flex;
    }
}

.s360-site-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 11px;
    padding: 10px 16px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    color: var(--s360-text);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}

.s360-site-btn:hover {
    background: var(--s360-surface-soft, #f8fafc);
    border-color: #cbd5e1;
}

.s360-site-btn:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-btn--primary,
.s360-site-btn--primary:visited {
    color: #fff;
    border-color: var(--s360-primary);
    background: linear-gradient(140deg, var(--s360-primary), var(--s360-primary-dark));
}

.s360-site-btn--primary:hover,
.s360-site-btn--primary:focus,
.s360-site-btn--primary:focus-visible {
    filter: brightness(1.05);
    border-color: var(--s360-primary-dark);
    color: #fff;
}

.s360-site-btn--ghost {
    background: transparent;
}

.s360-site-btn--block {
    width: 100%;
}

.s360-site-mnav {
    margin-left: auto;
    position: relative;
}

@media (min-width: 960px) {
    .s360-site-mnav {
        display: none;
    }
}

.s360-site-mnav__btn {
    list-style: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.s360-site-mnav__btn::-webkit-details-marker {
    display: none;
}

.s360-site-mnav__btn:hover {
    background: #f8fafc;
}

.s360-site-mnav__btn:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-site-mnav__bars {
    width: 20px;
    height: 14px;
    display: block;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 6px / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 12px / 100% 2px no-repeat;
    color: var(--s360-text);
}

.s360-site-mnav__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: min(320px, 92vw);
    padding: 14px;
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
    animation: s360-site-fade-in 0.2s ease;
}

.s360-site-mnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s360-site-mnav__list a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.92rem;
}

.s360-site-mnav__list a:hover {
    background: #f1f5f9;
}

.s360-site-mnav__list a:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 0;
}

.s360-site-mnav__cta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--s360-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

@keyframes s360-site-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Hero */
.s360-site-hero {
    position: relative;
    padding: 20px 0 8px;
}

.s360-site-hero__mesh {
    position: absolute;
    inset: -40px -8% 40%;
    background:
        radial-gradient(ellipse 80% 50% at 20% 20%, color-mix(in srgb, var(--s360-primary) 22%, transparent), transparent 55%),
        radial-gradient(ellipse 60% 45% at 85% 10%, color-mix(in srgb, #6366f1 18%, transparent), transparent 50%),
        radial-gradient(ellipse 50% 40% at 70% 80%, color-mix(in srgb, #0ea5e9 12%, transparent), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.s360-site-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    gap: 18px;
    align-items: stretch;
}

@media (max-width: 960px) {
    .s360-site-hero__grid {
        grid-template-columns: 1fr;
    }
}

.s360-site-panel {
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(24, 35, 56, 0.07);
}

.s360-site-eyebrow {
    margin: 0 0 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-primary);
}

.s360-site-hero__main {
    padding: 32px 34px 34px;
}

.s360-site-hero__main h1 {
    margin: 0 0 14px;
    line-height: 1.1;
    font-size: clamp(1.85rem, 4.2vw, 2.7rem);
    letter-spacing: -0.03em;
    font-weight: 800;
}

.s360-site-lead {
    margin: 0;
    color: var(--s360-muted);
    max-width: 56ch;
    line-height: 1.65;
    font-size: 1.02rem;
}

.s360-site-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.s360-site-tag {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
}

.s360-site-hero__actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.s360-site-hero__transparency {
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 56ch;
}
.s360-site-hero__transparency a {
    color: var(--s360-primary-dark);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.s360-site-hero__transparency a:hover,
.s360-site-hero__transparency a:focus-visible {
    color: var(--s360-primary);
}
.s360-site-hero__transparency-muted {
    color: var(--s360-muted);
    font-weight: 500;
}

.s360-site-hero__side {
    padding: 24px 24px 22px;
    background: linear-gradient(168deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s360-site-h2-side {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #1e293b;
}

.s360-site-mini-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s360-site-mini-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.45;
}

.s360-site-mini-list svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--s360-primary);
}

/* Sections */
.s360-site-section {
    scroll-margin-top: 88px;
    padding-top: 8px;
    margin-top: 28px;
}

.s360-site-section__title {
    margin: 0 0 10px;
    font-size: clamp(1.12rem, 2.2vw, 1.28rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.s360-site-section__sub {
    margin: 0 0 18px;
    max-width: 72ch;
}

.s360-site-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

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

.s360-site-pillar {
    padding: 22px 22px 20px;
}

.s360-site-pillar__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    color: #fff;
}

.s360-site-pillar__icon--a {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.s360-site-pillar__icon--b {
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

.s360-site-pillar__icon--c {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

.s360-site-pillar h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 700;
}

.s360-site-pillar p {
    margin: 0;
    color: var(--s360-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.s360-site-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.s360-site-mod {
    grid-column: span 2;
    padding: 18px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 128px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.s360-site-mod:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(24, 35, 56, 0.1);
}

.s360-site-mod--span2 {
    grid-column: span 3;
}

@media (max-width: 960px) {
    .s360-site-mod,
    .s360-site-mod--span2 {
        grid-column: span 3;
    }
}

@media (max-width: 640px) {
    .s360-site-mod,
    .s360-site-mod--span2 {
        grid-column: span 6;
    }
}

.s360-site-mod h4 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s360-site-mod p {
    margin: 0;
    flex: 1;
    color: var(--s360-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.s360-site-mod__pill {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #64748b;
}

.s360-site-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 960px) {
    .s360-site-flow {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .s360-site-flow {
        grid-template-columns: 1fr;
    }
}

.s360-site-flow-step {
    padding: 18px 16px 16px;
    position: relative;
    border-left: 3px solid var(--s360-primary);
}

.s360-site-flow-step__num {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--s360-primary);
    margin-bottom: 6px;
}

.s360-site-flow-step strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 4px;
}

.s360-site-flow-step span {
    font-size: 0.82rem;
    color: var(--s360-muted);
    line-height: 1.45;
}

.s360-site-proof__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 800px) {
    .s360-site-proof__list {
        grid-template-columns: 1fr;
    }
}

.s360-site-proof__item {
    padding: 20px 18px;
    display: grid;
    gap: 6px;
    text-align: left;
}

.s360-site-proof__stat {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s360-primary);
    line-height: 1;
}

.s360-site-proof__label {
    font-weight: 700;
    font-size: 0.92rem;
}

.s360-site-proof__text {
    font-size: 0.86rem;
    color: var(--s360-muted);
    line-height: 1.5;
}

.s360-site-cta {
    margin-top: 36px;
}

.s360-site-cta__inner {
    padding: 28px 28px 26px;
    border: 1px solid #c7d2fe;
    background: linear-gradient(115deg, #eef2ff 0%, #f8fafc 42%, #fff 100%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.s360-site-cta__title {
    margin: 0;
    width: 100%;
    font-size: 1.05rem;
    font-weight: 800;
}

@media (min-width: 720px) {
    .s360-site-cta__title {
        width: auto;
        flex: 0 0 auto;
    }
}

.s360-site-cta__text {
    margin: 0;
    flex: 1;
    min-width: min(100%, 320px);
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.55;
}

.s360-site-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Footer */
.s360-site-footer {
    margin-top: auto;
    border-top: 1px solid var(--s360-border);
    background: color-mix(in srgb, var(--s360-surface) 96%, var(--s360-bg));
}

.s360-site-footer__inner {
    width: min(1180px, 94%);
    margin: 0 auto;
    padding: 36px 0 28px;
    display: grid;
    gap: 28px;
}

.s360-site-footer__brand {
    max-width: 52ch;
}

.s360-site-footer__name {
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.s360-site-footer__lead {
    margin: 8px 0 0;
    color: var(--s360-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.s360-site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

@media (max-width: 720px) {
    .s360-site-footer__cols {
        grid-template-columns: 1fr;
    }
}

.s360-site-footer__h {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.s360-site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
}

.s360-site-footer__links a {
    color: var(--s360-text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--s360-primary) 35%, transparent);
}

.s360-site-footer__links a:hover {
    color: var(--s360-primary);
}

.s360-site-footer__links a:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.s360-site-footer__note {
    margin: 0;
    font-size: 0.88rem;
    color: var(--s360-muted);
    line-height: 1.5;
}

.s360-site-footer__bar {
    border-top: 1px solid var(--s360-border);
    padding: 14px 0 22px;
    font-size: 0.84rem;
    color: var(--s360-muted);
}

.s360-site-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.s360-site-footer__fine {
    max-width: 52ch;
    text-align: right;
}

@media (max-width: 640px) {
    .s360-site-footer__fine {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .s360-site-mega__panel,
    .s360-site-mnav__panel {
        animation: none;
    }

    .s360-site-mod:hover {
        transform: none;
    }

    .s360-site-mega__trigger::after {
        transition: none;
    }
}

/* ---------- Contact page ---------- */
.s360-site-contact-section {
    padding-bottom: 60px;
}

.s360-site-contact-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
}

@media (max-width: 740px) {
    .s360-site-contact-grid {
        grid-template-columns: 1fr;
    }
}

/* Form card */
.s360-site-contact-form-card {
    padding: 32px 34px 36px;
}

.s360-site-contact-title {
    margin: 6px 0 8px;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--s360-text);
    line-height: 1.15;
}

.s360-site-contact-sub {
    margin: 0 0 24px;
    color: var(--s360-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 52ch;
}

/* Success alert */
.s360-site-contact-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 24px;
}

.s360-site-contact-success svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: #16a34a;
}

/* Form fields */
.s360-site-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.s360-site-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 500px) {
    .s360-site-form__row {
        grid-template-columns: 1fr;
    }
}

.s360-site-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.s360-site-form__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--s360-text);
    letter-spacing: 0.01em;
}

.s360-site-form__optional {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--s360-muted);
}

.s360-site-form__input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--s360-border);
    border-radius: 10px;
    background: var(--s360-surface);
    color: var(--s360-text);
    font-size: 0.92rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    appearance: none;
}

.s360-site-form__input::placeholder {
    color: #b0bac8;
}

.s360-site-form__input:focus-visible {
    outline: none;
    border-color: var(--s360-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--s360-primary) 15%, transparent);
}

.s360-site-form__textarea {
    resize: vertical;
    min-height: 110px;
}

.s360-site-form__field.is-error .s360-site-form__input {
    border-color: #f87171;
    background: #fff8f8;
}

.s360-site-form__error {
    font-size: 0.8rem;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Submit button */
.s360-site-contact-submit {
    align-self: flex-start;
    margin-top: 4px;
    padding: 11px 22px;
    font-size: 0.92rem;
}

/* Aside / info card */
.s360-site-contact-aside {
    padding: 24px;
    background: linear-gradient(168deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s360-site-contact-aside__divider {
    height: 1px;
    background: var(--s360-border);
    margin: 4px 0;
}

.s360-site-contact-aside__note {
    margin: 0;
    font-size: 0.85rem;
    color: var(--s360-muted);
    line-height: 1.55;
}

/* ===== Event 3-fase workflow (s360-ev-*) ===== */

.s360-ev-phases {
    display: flex;
    align-items: center;
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 18px;
    gap: 0;
}

.s360-ev-phase {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.s360-ev-phase + .s360-ev-phase {
    padding-left: 12px;
}

.s360-ev-phase + .s360-ev-phase::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--s360-border);
    flex-shrink: 0;
    margin-right: 12px;
    border-radius: 999px;
}

.s360-ev-phase--done + .s360-ev-phase::before {
    background: var(--s360-primary);
}

.s360-ev-phase__num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--s360-border);
    background: var(--s360-surface-soft);
    color: var(--s360-muted);
    font-size: 0.78rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.s360-ev-phase--done .s360-ev-phase__num {
    background: var(--s360-primary);
    border-color: var(--s360-primary);
    color: #fff;
}

.s360-ev-phase--active .s360-ev-phase__num {
    border-color: var(--s360-primary);
    color: var(--s360-primary);
    background: color-mix(in srgb, var(--s360-primary) 10%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--s360-primary) 12%, transparent);
}

.s360-ev-phase__body {
    min-width: 0;
}

.s360-ev-phase__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--s360-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.s360-ev-phase--done .s360-ev-phase__label,
.s360-ev-phase--active .s360-ev-phase__label {
    color: var(--s360-text);
}

.s360-ev-phase__sub {
    font-size: 0.71rem;
    color: var(--s360-muted);
    margin-top: 1px;
    line-height: 1.3;
}

/* Route badge */
.s360-ev-route-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid;
}

.s360-ev-route-badge--compact {
    font-size: 0.68rem;
}

.s360-ev-route-badge--meeting_services { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.s360-ev-route-badge--events_by_you    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.s360-ev-route-badge--co_organized_events { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.s360-ev-route-badge--led_events       { background: #f3e8ff; color: #7e22ce; border-color: #e9d5ff; }

/* Event page header */
.s360-ev-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.s360-ev-title {
    margin: 0 0 6px;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s360-text);
    line-height: 1.2;
}

/* Progress bar */
.s360-ev-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.s360-ev-progress__bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--s360-border);
    overflow: hidden;
}

.s360-ev-progress__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--s360-primary) 0%, #7f5bff 100%);
    transition: width 0.4s ease;
}

.s360-ev-progress__label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s360-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Workflow step cards grid */
.s360-ev-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.s360-ev-step-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1.5px solid var(--s360-border);
    background: var(--s360-surface);
    text-decoration: none;
    color: var(--s360-text);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.s360-ev-step-card:hover {
    border-color: var(--s360-primary);
    box-shadow: 0 4px 14px rgba(47, 111, 237, 0.1);
    transform: translateY(-1px);
    color: var(--s360-text);
}

.s360-ev-step-card--done {
    border-color: #86efac;
    background: #f0fdf4;
}

.s360-ev-step-card--done:hover {
    border-color: #4ade80;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.1);
}

.s360-ev-step-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f1f5f9;
    display: grid;
    place-items: center;
    color: var(--s360-muted);
    flex-shrink: 0;
}

.s360-ev-step-card--done .s360-ev-step-card__icon {
    background: #dcfce7;
    color: #16a34a;
}

.s360-ev-step-card__body {
    flex: 1;
    min-width: 0;
}

.s360-ev-step-card__num {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--s360-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.s360-ev-step-card__title {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--s360-text);
}

.s360-ev-step-card__status {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--s360-muted);
    margin-top: 3px;
}

.s360-ev-step-card--done .s360-ev-step-card__status {
    color: #16a34a;
}

/* Mini step breadcrumb inside step pages */
.s360-ev-mini-steps {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.s360-ev-mini-step {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--s360-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.s360-ev-mini-step:hover {
    background: var(--s360-surface-soft);
    color: var(--s360-text);
}

.s360-ev-mini-step__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--s360-border);
    flex-shrink: 0;
}

.s360-ev-mini-step--done { color: #16a34a; }
.s360-ev-mini-step--done .s360-ev-mini-step__dot { background: #16a34a; }

.s360-ev-mini-step--active {
    color: var(--s360-primary);
    background: color-mix(in srgb, var(--s360-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--s360-primary) 25%, transparent);
}

.s360-ev-mini-step--active .s360-ev-mini-step__dot { background: var(--s360-primary); }

/* KPI grid */
.s360-ev-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.s360-ev-kpi-card {
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
}

.s360-ev-kpi-card__value {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--s360-text);
}

.s360-ev-kpi-card__label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--s360-muted);
    margin-top: 5px;
    line-height: 1.3;
}

.s360-ev-kpi-card--ok   .s360-ev-kpi-card__value { color: #16a34a; }
.s360-ev-kpi-card--warn .s360-ev-kpi-card__value { color: #d97706; }
.s360-ev-kpi-card--bad  .s360-ev-kpi-card__value { color: #dc2626; }

/* Alert rows */
.s360-ev-alerts { display: flex; flex-direction: column; gap: 8px; }

.s360-ev-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    border: 1px solid;
}

.s360-ev-alert--high   { background: #fff1f2; border-color: #fecdd3; color: #9f1239; }
.s360-ev-alert--medium { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.s360-ev-alert--low    { background: #f0f9ff; border-color: #bae6fd; color: #075985; }

.s360-ev-alert__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    margin-top: 6px;
}

/* Milestone rows */
.s360-ev-milestone {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--s360-border);
    font-size: 0.86rem;
}
.s360-ev-milestone:last-child { border-bottom: 0; }

.s360-ev-milestone__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--s360-border);
    background: transparent;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

.s360-ev-milestone--done .s360-ev-milestone__check {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.s360-ev-milestone__title { flex: 1; font-weight: 500; }
.s360-ev-milestone--done .s360-ev-milestone__title { color: var(--s360-muted); text-decoration: line-through; }
.s360-ev-milestone__due { font-size: 0.75rem; color: var(--s360-muted); white-space: nowrap; }

/* Intake card-step styling */
.s360-ev-intake-section {
    background: var(--s360-surface);
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 10px;
}

.s360-ev-intake-section__eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-primary);
    margin-bottom: 12px;
}

.s360-ev-intake-card-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .s360-ev-intake-card-row { grid-template-columns: 1fr; }
    .s360-ev-steps-grid { grid-template-columns: 1fr 1fr; }
    .s360-ev-phases { flex-wrap: wrap; gap: 10px; }
    .s360-ev-phase + .s360-ev-phase::before { display: none; }
}

/* ===== Eventhub (s360-hub-*) ===== */

.s360-hub-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s360-primary);
    margin: 0 0 10px;
}

.s360-hub-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--s360-border);
    background: linear-gradient(135deg, #f8faff 0%, #eef2ff 45%, #f5f3ff 100%);
    margin-bottom: 22px;
    padding: 32px 32px 28px;
}

/* Stakeholder hub: rustig vlak oppervlak, minder visuele ruis */
.s360-hub-hero.s360-hub-hero--minimal {
    background: var(--s360-surface);
    padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px);
    box-shadow: var(--s360-shadow-card);
}

.s360-hub-hero.s360-hub-hero--minimal .s360-hub-hero__mesh {
    display: none;
}

.s360-hub-hero.s360-hub-hero--minimal .s360-hub-hero__title {
    font-weight: 700;
    font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.s360-hub-hero__mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(47,111,237,.08) 0%, transparent 55%),
        radial-gradient(circle at 20% 80%, rgba(127,91,255,.06) 0%, transparent 50%);
    pointer-events: none;
}

.s360-hub-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
}

@media (max-width: 760px) { .s360-hub-hero__inner { grid-template-columns: 1fr; } }

.s360-hub-hero__title {
    margin: 0 0 10px;
    font-size: clamp(1.35rem, 2.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #0f172a;
    line-height: 1.15;
}

.s360-hub-hero__sub {
    margin: 0 0 20px;
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.65;
    max-width: 48ch;
}

.s360-hub-hero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.s360-hub-cta-btn,
.s360-hub-cta-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--s360-primary), var(--s360-primary-dark));
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    border: 1px solid var(--s360-primary-dark);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(47,111,237,.3);
    transition: filter .15s, box-shadow .15s;
}

.s360-hub-cta-btn:hover,
.s360-hub-cta-btn:focus,
.s360-hub-cta-btn:focus-visible {
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(47,111,237,.38);
    color: #fff;
}

.s360-hub-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    color: var(--s360-text);
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--s360-border);
    text-decoration: none;
    transition: background .15s, border-color .15s;
}

.s360-hub-ghost-btn:hover { background: #fff; border-color: #c7d2fe; }

.s360-hub-steps-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 14px;
    padding: 16px 20px;
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}

.s360-hub-step-preview { text-align: center; }
.s360-hub-step-preview__num { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; color: var(--s360-primary); margin-bottom: 4px; }
.s360-hub-step-preview__label { font-size: 0.78rem; font-weight: 700; color: #1e293b; white-space: nowrap; }
.s360-hub-step-preview__sub { font-size: 0.68rem; color: #64748b; margin-top: 2px; white-space: nowrap; }
.s360-hub-step-preview__arrow { color: #cbd5e1; flex-shrink: 0; }

.s360-hub-section { margin-bottom: 26px; }

.s360-hub-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.s360-hub-section__title { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--s360-text); }
.s360-hub-section__desc { margin: 4px 0 0; font-size: 0.83rem; color: var(--s360-muted); }
.s360-hub-section__more { font-size: 0.8rem; font-weight: 600; color: var(--s360-primary); text-decoration: none; white-space: nowrap; }
.s360-hub-section__more:hover { text-decoration: underline; }

.s360-hub-recent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.s360-hub-recent-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--s360-border);
    background: var(--s360-surface);
    text-decoration: none;
    color: var(--s360-text);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Kaarten gelijk hoog: voortgangsbalk trekt naar beneden; zonder balk de meta */
.s360-hub-recent-card > .s360-hub-recent-bar {
    margin-top: auto;
}

.s360-hub-recent-card:not(:has(.s360-hub-recent-bar)) > .s360-hub-recent-card__meta {
    margin-top: auto;
}

.s360-hub-recent-card:hover { border-color: var(--s360-primary); box-shadow: 0 2px 10px rgba(47,111,237,.08); }
.s360-hub-recent-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s360-hub-recent-card__pct { font-size: 0.75rem; font-weight: 700; color: var(--s360-muted); }
.s360-hub-recent-card__pct--done { color: #16a34a; }
.s360-hub-recent-card__title { margin: 0; font-size: 0.87rem; font-weight: 600; line-height: 1.3; color: var(--s360-text); }
.s360-hub-recent-bar { height: 4px; border-radius: 999px; background: var(--s360-border); overflow: hidden; }
.s360-hub-recent-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--s360-primary), #7f5bff); }
.s360-hub-recent-card__meta { margin: 0; font-size: 0.72rem; color: var(--s360-muted); }

.s360-hub-new-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 16px;
    border-radius: 12px;
    border: 2px dashed #c7d2fe;
    background: #f8faff;
    text-decoration: none;
    color: var(--s360-primary);
    transition: border-color .15s, background .15s;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.s360-hub-new-card:hover { border-color: var(--s360-primary); background: #eef2ff; }
.s360-hub-new-card__icon { width: 36px; height: 36px; border-radius: 10px; background: #e0e7ff; display: grid; place-items: center; }
.s360-hub-new-card__label { font-size: 0.82rem; font-weight: 700; }

.s360-hub-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.s360-hub-route-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    transition: box-shadow .15s, border-color .15s;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.s360-hub-route-card:hover { box-shadow: 0 4px 16px rgba(24,35,56,.07); border-color: #c7d2fe; }
.s360-hub-route-card__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; }
.s360-hub-route-card__body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}

.s360-hub-route-card__title { margin: 0 0 2px; font-size: 0.88rem; font-weight: 700; color: var(--s360-text); flex-shrink: 0; }
.s360-hub-route-card__sub { margin: 0 0 6px; font-size: 0.78rem; font-weight: 500; color: var(--s360-muted); line-height: 1.45; }
.s360-hub-route-card__desc { margin: 0 0 8px; font-size: 0.8rem; color: #475569; line-height: 1.5; }
.s360-hub-route-card__steps { margin: 0; padding-left: 14px; font-size: 0.76rem; color: #64748b; line-height: 1.7; }

/* Subtitel + i-knop (en optioneel CTA) onderaan uitlijnen over alle routekaarten */
.s360-hub-route-card__body > .s360-head-with-info {
    margin-top: auto;
    width: 100%;
    align-items: flex-end;
}

.s360-hub-route-card__body > .s360-hub-cta-btn,
.s360-hub-route-card__body > a.s360-hub-cta-btn {
    margin-top: 10px;
    align-self: flex-start;
    flex-shrink: 0;
    font-size: 0.82rem;
    padding: 8px 14px;
}

.s360-hub-how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
    align-items: stretch;
}

.s360-hub-how-card {
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

.s360-hub-how-card__num { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; color: var(--s360-primary); margin-bottom: 10px; flex-shrink: 0; }
.s360-hub-how-card__icon { width: 38px; height: 38px; border-radius: 10px; background: #eef2ff; color: var(--s360-primary); display: grid; place-items: center; margin-bottom: 12px; flex-shrink: 0; }
.s360-hub-how-card h3 { margin: 0 0 6px; font-size: 0.87rem; font-weight: 700; color: var(--s360-text); flex-shrink: 0; }
.s360-hub-how-card p { margin: 0; font-size: 0.8rem; color: #475569; line-height: 1.55; }

.s360-hub-how-card > .s360-head-with-info {
    margin-top: auto;
    padding-top: 10px;
    width: 100%;
    align-items: flex-end;
}

/* Hub-kaarten: i-knop onderaan i.l. subtitel (wint van .s360-head-with-info .s360-mail-info) */
.s360-hub-route-card__body > .s360-head-with-info .s360-mail-info,
.s360-hub-how-card > .s360-head-with-info .s360-mail-info {
    align-self: flex-end;
}

.s360-hub-bottom-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border: 1px solid #c7d2fe;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.s360-hub-bottom-cta__text { margin: 0; font-size: 0.95rem; font-weight: 700; color: #1e1b4b; flex: 1; }

/* Hub: compacte bestemmingslijst (één kolom, primaire kleur) */
.surface-panel.s360-hub-destinations {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.s360-hub-dest {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--s360-text);
    border-bottom: 1px solid var(--s360-border);
    transition: background-color 0.12s ease;
}

.s360-hub-dest:last-child {
    border-bottom: none;
}

.s360-hub-dest:hover,
.s360-hub-dest:focus-visible {
    background: rgba(47, 111, 237, 0.045);
    outline: none;
}

.s360-hub-dest:focus-visible {
    box-shadow: inset 0 0 0 2px var(--s360-primary);
}

.s360-hub-dest__main {
    flex: 1;
    min-width: 0;
}

.s360-hub-dest__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--s360-text);
}

.s360-hub-dest__sub {
    display: block;
    margin-top: 3px;
    font-size: 0.82rem;
    color: var(--s360-muted);
    line-height: 1.45;
}

.s360-hub-dest__arrow {
    flex-shrink: 0;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--s360-primary);
}

.s360-hub-dest.s360-hub-dest--informative {
    cursor: default;
}

.s360-hub-dest.s360-hub-dest--informative:hover {
    background: transparent;
}

@media (max-width: 600px) {
    .s360-hub-steps-preview { display: none; }
    .s360-hub-routes-grid { grid-template-columns: 1fr; }
    .s360-hub-how-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mijn events page header ─────────────────────────────── */
.s360-hub-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.s360-hub-page-header__title {
    margin: 0 0 4px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--s360-text);
}
.s360-hub-page-header__sub {
    margin: 0;
    font-size: 0.88rem;
    color: var(--s360-muted);
    line-height: 1.5;
}
.s360-hub-page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
}

/* ── Flash notice ─────────────────────────────────────────── */
.s360-hub-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.87rem;
    font-weight: 500;
    margin-bottom: 14px;
}
.s360-hub-flash--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.s360-hub-flash--warn { background: #fefce8; border: 1px solid #fde047; color: #713f12; }

/* ── Empty state ──────────────────────────────────────────── */
.s360-hub-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    max-width: 420px;
    margin: 0 auto;
}
.s360-hub-empty__icon {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, #e0f2fe, #ddd6fe);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}
.s360-hub-empty__title {
    margin: 0 0 8px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--s360-text);
}
.s360-hub-empty__desc {
    margin: 0 0 22px;
    font-size: 0.88rem;
    color: var(--s360-muted);
    line-height: 1.6;
    max-width: 34ch;
}

/* ── Content: dossieroverzicht (/content) ─────────────────── */
.s360-content-overview {
    max-width: 960px;
    margin: 0 auto;
}

.s360-content-overview__meta {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: var(--s360-muted);
    line-height: 1.45;
}

.s360-content-overview__filters-heading {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--s360-text);
}

/* surface-panel form defaults to flex-direction: column (theme) — breaks toolbar + flex-basis on main axis */
.surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form.s360-concepts-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
    margin-top: 0;
}

.surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-concepts-toolbar__search-wrap {
    flex: 1 1 260px;
    min-width: min(100%, 200px);
    max-width: 100%;
}

.surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-concepts-toolbar__account {
    flex: 0 1 220px;
    min-width: min(100%, 180px);
}

.surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-content-overview__filter-submit {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form.s360-concepts-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-concepts-toolbar__search-wrap {
        flex: 0 0 auto;
        width: 100%;
    }

    .surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-concepts-toolbar__account {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }

    .surface-panel.s360-content-overview__filters form.s360-content-overview__filter-form .s360-content-overview__filter-submit {
        width: 100%;
    }
}

.s360-content-overview__list-empty {
    margin-top: 8px;
}

.s360-content-overview__empty-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.s360-content-overview__pagination {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.s360-content-overview .form-actions-bar.s360-content-overview__footer {
    margin-top: 2.25rem;
}

.s360-content-overview__footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 0.88rem;
}

.s360-content-overview__footer-inner a {
    color: var(--s360-primary);
    font-weight: 600;
    text-decoration: none;
}

.s360-content-overview__footer-inner a:hover {
    text-decoration: underline;
}

.s360-content-overview__footer-sep {
    color: var(--s360-muted);
    user-select: none;
}

/* ── Content Studio hero (hub-style) ─────────────────────── */
.s360-cs-hero { margin-bottom: 0; border-radius: 0 0 20px 20px; }

/* ── Content workflow stepper inside surface-panel ───────── */
.cw-workflow-shell { padding: 0; overflow: hidden; }
.cw-workflow-ev-phases {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--s360-border);
    border-radius: 0;
    background: #f8fafc;
    padding: 14px 20px;
}
.cw-workflow-ev-phases a.s360-ev-phase {
    text-decoration: none;
}
.cw-workflow-ev-phases a.s360-ev-phase:hover .s360-ev-phase__label {
    color: var(--s360-primary);
}
.cw-workflow-ev-phases__dossier-title {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Hub step-preview inside card panels ─────────────────── */
.s360-cs-steps-preview {
    margin: 0;
    background: transparent;
    border: none;
    padding: 0;
    justify-content: flex-start;
}
.s360-hub-step-preview--active .s360-hub-step-preview__num {
    background: var(--s360-primary);
    color: #fff;
}

/* ── cw-now-banner as standalone element (outside workflow-shell) ─ */
.cw-now-banner--standalone,
.s360-ev-header + .cw-now-banner {
    margin: 0 0 14px;
    border-top: none;
    border-radius: 10px;
    border: 1px solid #e8edf7;
}

/* ── Stakeholder hub — avatar initials chip ─────────────────── */
.s360-sh-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--s360-primary), #5b8ff8);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

/* ── Stakeholder ev-header actions layout ───────────────────── */
.s360-ev-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.s360-ev-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ===== Dashboard hub (eventhub-aligned) ===== */
.s360-dh-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.s360-toc-impact-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 10px 14px;
    border: 1px solid rgba(47, 111, 237, 0.18);
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(248, 250, 252, 0.95));
}

.s360-toc-impact-hint--tight {
    margin-bottom: 12px;
    padding: 8px 12px;
}

.s360-toc-impact-hint__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #dbeafe;
    color: #1d4ed8;
}

.s360-toc-impact-hint__body {
    flex: 1 1 12rem;
    min-width: 0;
}

.s360-toc-impact-hint__title {
    display: block;
    font-size: 0.875rem;
    color: var(--s360-text, #182338);
}

.s360-toc-impact-hint__lead {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--s360-muted, #6b7894);
}

.s360-toc-impact-hint__action {
    flex: 0 0 auto;
}

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

.s360-cockpit-card {
    overflow: hidden;
    border: 1px solid #dbe4f0;
    border-radius: 12px;
    background: #fff;
}

.s360-cockpit-card__head {
    padding: 9px 12px;
    color: #fff;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.s360-cockpit-card__head--blue { background: #1d4ed8; }
.s360-cockpit-card__head--red { background: #dc2626; }
.s360-cockpit-card__head--green { background: #2f855a; }

.s360-cockpit-card__body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s360-cockpit-gauges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.s360-cockpit-gauge__label {
    margin: 0 0 5px;
    font-size: 0.72rem;
    color: #334155;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.s360-cockpit-gauge__meter {
    width: 100%;
    max-width: 128px;
    height: 66px;
    border-radius: 66px 66px 0 0;
    background:
        conic-gradient(from 180deg,
            #ef4444 0 35deg,
            #f59e0b 35deg 75deg,
            #eab308 75deg 110deg,
            #22c55e 110deg 180deg);
    position: relative;
    overflow: hidden;
}

.s360-cockpit-gauge__meter::after {
    content: "";
    position: absolute;
    inset: 16px 16px 0 16px;
    border-radius: 60px 60px 0 0;
    background: #fff;
}

.s360-cockpit-gauge__meter strong {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-size: 1.56rem;
    color: #0f172a;
}

.s360-cockpit-list {
    margin: 0;
    padding-left: 18px;
    color: #334155;
    font-size: 0.8rem;
    display: grid;
    gap: 5px;
}

.s360-cockpit-runbuildgrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.s360-cockpit-rbg {
    border-radius: 8px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: .04em;
    padding: 11px 8px;
}

.s360-cockpit-rbg--run { background: #be123c; }
.s360-cockpit-rbg--build { background: #d97706; }
.s360-cockpit-rbg--grow { background: #65a30d; }

.s360-cockpit-note {
    margin: 0;
    color: #475569;
    font-size: 0.8rem;
}

.s360-cockpit-pillars {
    display: grid;
    gap: 8px;
}

.s360-cockpit-pillars p {
    margin: 0;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid #d6e1ef;
    background: #f8fafc;
}

.s360-cockpit-pillars strong {
    display: block;
    color: #0f172a;
    font-size: 0.8rem;
}

.s360-cockpit-pillars span {
    color: #475569;
    font-size: 0.73rem;
}

.s360-dh-hero {
    margin-bottom: 0;
}

.s360-dh-period-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    padding: 14px;
    min-width: 220px;
}

.s360-dh-period-seg {
    display: flex;
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.s360-dh-period-seg a {
    flex: 1;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--s360-muted);
    padding: 7px 8px;
    text-decoration: none;
    border-right: 1px solid var(--s360-border);
}

.s360-dh-period-seg a:last-child {
    border-right: none;
}

.s360-dh-period-seg a.is-active {
    background: #eef2ff;
    color: var(--s360-primary-dark);
}

.s360-dh-period-range {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--s360-muted);
}

.s360-dh-kpi-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.s360-dh-kpi-card {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.s360-dh-kpi-card__label {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #334155;
    font-weight: 700;
}

.s360-dh-kpi-card__value {
    margin: 6px 0 0;
    font-size: 1.48rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s360-text);
}

.s360-dh-kpi-card__hint {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #475569;
}

.s360-dh-hero-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.s360-dh-panel {
    padding: 16px 18px;
}

.s360-dh-panel__sub {
    margin: -2px 0 10px;
    font-size: 0.8rem;
    color: var(--s360-muted);
}

.s360-dh-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-dh-list__item {
    border: 1px solid #e8edf7;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.s360-dh-list__item--issue {
    border-left: 3px solid #f59e0b;
}

.s360-dh-list__item--issue-hoog {
    border-left-color: #dc2626;
}

.s360-dh-list__item--issue-laag {
    border-left-color: #0ea5e9;
}

.s360-dh-list__title {
    margin: 0;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--s360-text);
    line-height: 1.35;
}

.s360-dh-list__meta {
    margin: 3px 0 0;
    font-size: 0.74rem;
    color: #475569;
}

.s360-dh-health-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 10px;
}

.s360-dh-health-score strong {
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.s360-dh-health-score span {
    color: var(--s360-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.s360-dh-health-bar {
    display: flex;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--s360-border);
}

.s360-dh-health-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin-top: 12px;
}

.s360-dh-health-legend p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    color: var(--s360-muted);
}

.s360-dh-health-legend strong {
    color: var(--s360-text);
}

.s360-dh-module-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.s360-dh-module-card {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #ffffff;
    padding: 14px 15px;
    text-decoration: none;
    color: inherit;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.s360-dh-module-card:hover {
    transform: translateY(-1px);
    border-color: #c7d2fe;
    box-shadow: 0 4px 16px rgba(24, 35, 56, .07);
}

.s360-dh-module-card.is-off {
    opacity: .82;
    border-style: dashed;
    pointer-events: none;
    background: #f8fafc;
}

.s360-dh-module-card__name {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s360-dh-module-card__icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    background: #e2e8f0;
    color: #0f172a;
    flex-shrink: 0;
}

.s360-dh-module-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.s360-dh-module-card__state {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 2px 7px;
}

.s360-dh-module-card__state.is-on {
    color: #166534;
    background: #dcfce7;
}

.s360-dh-module-card__state.is-off {
    color: #64748b;
    background: #e2e8f0;
}

.s360-dh-module-card__desc {
    margin: 8px 0 10px;
    font-size: 0.78rem;
    color: #475569;
    line-height: 1.45;
}

.s360-dh-module-card__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    border-top: 1px solid #e8edf7;
    padding-top: 8px;
}

.s360-dh-module-card__stats span {
    font-size: 0.7rem;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: block;
}

.s360-dh-module-card__stats strong {
    display: block;
    font-size: 0.98rem;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 2px;
}

.s360-dh-module-card--blue { border-top: 4px solid #2563eb; }
.s360-dh-module-card--rose { border-top: 4px solid #e11d48; }
.s360-dh-module-card--green { border-top: 4px solid #16a34a; }
.s360-dh-module-card--amber { border-top: 4px solid #d97706; }
.s360-dh-module-card--violet { border-top: 4px solid #7c3aed; }
.s360-dh-module-card--sky { border-top: 4px solid #0284c7; }
.s360-dh-module-card--teal { border-top: 4px solid #0f766e; }
.s360-dh-module-card--indigo { border-top: 4px solid #4338ca; }
.s360-dh-module-card--red { border-top: 4px solid #dc2626; }
.s360-dh-module-card--slate { border-top: 4px solid #475569; }

.s360-dh-rails {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s360-dh-severity {
    flex-shrink: 0;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 7px;
}

.s360-dh-severity--hoog {
    color: #991b1b;
    background: #fee2e2;
}

.s360-dh-severity--middel {
    color: #92400e;
    background: #fef3c7;
}

.s360-dh-severity--laag {
    color: #155e75;
    background: #e0f2fe;
}

.s360-dh-stage-chip {
    flex-shrink: 0;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 7px;
}

.s360-dh-stage-chip--intake {
    color: #0c4a6e;
    background: #e0f2fe;
}

.s360-dh-stage-chip--plan {
    color: #581c87;
    background: #f3e8ff;
}

.s360-dh-stage-chip--live {
    color: #166534;
    background: #dcfce7;
}

.s360-dh-stage-chip--review {
    color: #92400e;
    background: #fef3c7;
}

.s360-dh-activity-time {
    flex-shrink: 0;
    font-size: 0.66rem;
    color: var(--s360-muted);
    font-weight: 600;
}

.s360-dh-people-row {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.s360-dh-list__item--stakeholder {
    align-items: center;
}

.s360-dh-influence {
    min-width: 116px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s360-dh-influence__bar {
    width: 88px;
    height: 7px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.s360-dh-influence__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--s360-primary);
}

.s360-dh-influence strong {
    font-size: 0.76rem;
    color: var(--s360-text);
}

.s360-dh-segment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s360-dh-segment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
    gap: 8px;
    align-items: center;
}

.s360-dh-segment-row__label {
    font-size: 0.78rem;
    color: var(--s360-slate-700);
}

.s360-dh-segment-row__bar {
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.s360-dh-segment-row__bar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--s360-primary) 0%, #8b5cf6 100%);
}

.s360-dh-segment-row__value {
    font-size: 0.78rem;
    color: var(--s360-text);
}

/* Content workflow cockpit (show page) */
.s360-cw-cockpit__head {
    margin-bottom: 12px;
}

.s360-cw-cockpit__kpis {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 12px;
}

.s360-cw-kpi-card {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: var(--s360-surface);
    padding: 12px 14px;
}

.s360-cw-kpi-card__label {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-muted);
    font-weight: 700;
}

.s360-cw-kpi-card__value {
    margin: 5px 0 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--s360-text);
}

.s360-cw-kpi-card__hint {
    margin: 4px 0 0;
    font-size: 0.74rem;
    color: var(--s360-muted);
}

.s360-cw-cockpit__rails {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s360-cw-rail {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px;
}

.s360-cw-rail__title {
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--s360-text);
}

.s360-cw-rail__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-cw-rail__item {
    border: 1px solid #e8edf7;
    border-radius: 10px;
    background: #fff;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.s360-cw-rail__item-title {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--s360-text);
}

.s360-cw-rail__item-meta {
    margin: 2px 0 0;
    font-size: 0.72rem;
    color: var(--s360-muted);
}

.s360-cw-rail__item--channels {
    align-items: flex-start;
    flex-wrap: wrap;
}

.s360-cw-rail__item-main {
    flex: 1 1 140px;
    min-width: 0;
}

.s360-cw-rail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.s360-cw-rail__open {
    align-self: flex-start;
}

.s360-cw-status-chip {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 7px;
    color: #475569;
    background: #e2e8f0;
}

.s360-cw-status-chip.is-empty {
    color: #7c2d12;
    background: #ffedd5;
}

.s360-cw-status-chip.is-pending {
    color: #1d4ed8;
    background: #dbeafe;
}

.s360-cw-status-chip.is-saved {
    color: #166534;
    background: #dcfce7;
}

.s360-cw-status-chip.is-ready {
    color: #0f766e;
    background: #ccfbf1;
}

.s360-cw-pub-readiness {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.s360-cw-pub-readiness__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.s360-cw-pub-readiness__card {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}

.s360-cw-pub-readiness__card--ok {
    border-color: color-mix(in srgb, #16a34a 28%, var(--s360-border));
    background: color-mix(in srgb, #dcfce7 35%, #fff);
}

.s360-cw-pub-readiness__card--wait {
    border-color: color-mix(in srgb, #2563eb 22%, var(--s360-border));
    background: #f8fafc;
}

.s360-cw-pub-readiness__title {
    margin: 0 0 6px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--s360-text);
}

.s360-cw-pub-readiness__lede {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-bottom: 10px !important;
}

.s360-cw-pub-readiness__subhead {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--s360-muted);
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

.s360-cw-pub-readiness__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--s360-text);
}

.s360-cw-pub-readiness__list li + li {
    margin-top: 4px;
}

.s360-cw-pub-readiness__link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.78rem;
    font-weight: 600;
}

.s360-cw-workflow-overview {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #fff;
    padding: 12px 14px;
}

.s360-cw-workflow-overview__kicker {
    margin: 0 0 10px;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--s360-muted);
}

.s360-cw-workflow-overview__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.s360-cw-workflow-overview__steps > li {
    margin: 0;
}

.s360-cw-workflow-overview__step {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--s360-border-soft, #e8edf7);
    border-radius: 10px;
    padding: 10px 10px 11px;
    background: #f8fafc;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.s360-cw-workflow-overview__step:hover {
    border-color: color-mix(in srgb, var(--s360-primary) 35%, var(--s360-border));
    background: #fff;
}

.s360-cw-workflow-overview__step.is-current {
    border-color: var(--s360-primary);
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.14);
    background: #fff;
}

.s360-cw-workflow-overview__step.is-past:not(.is-current) {
    opacity: 0.88;
}

.s360-cw-workflow-overview__num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    background: #fff;
    border: 1px solid var(--s360-border);
    color: var(--s360-primary-dark);
}

.s360-cw-workflow-overview__step.is-current .s360-cw-workflow-overview__num {
    background: var(--s360-primary);
    border-color: var(--s360-primary);
    color: #fff;
}

.s360-cw-workflow-overview__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s360-cw-workflow-overview__name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--s360-text);
}

.s360-cw-workflow-overview__desc {
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--s360-muted);
}

.s360-cw-workflow-overview__stat {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--s360-primary-dark);
    margin-top: 2px;
}

.s360-cw-image-preview {
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    padding: 8px;
    background: #fff;
}

.s360-cw-image-preview__thumb-wrap {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.s360-cw-image-preview__thumb {
    display: block;
    width: 100%;
    max-height: min(42vh, 360px);
    object-fit: contain;
    background: #f8fafc;
}

.s360-cw-image-preview__actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.s360-cw-studio-head__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

.s360-cw-studio-head__title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.s360-cw-studio-head__sub {
    margin: 4px 0 0;
    color: var(--s360-muted);
    font-size: 0.82rem;
}

.s360-cw-studio-head__actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.s360-cw-primary-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 12px 16px;
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 55%);
}

.s360-cw-primary-strip__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s360-cw-primary-strip__label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-muted);
}

.s360-cw-primary-strip__hint {
    font-size: 0.82rem;
    line-height: 1.35;
}

.s360-cw-primary-strip__cta {
    flex-shrink: 0;
}

/* Dossier content show — titel + acties; geen dubbele flash (alleen app-main-flash) */
.app-main-flash {
    width: 100%;
    box-sizing: border-box;
}

.s360-cw-dossier-header {
    margin-bottom: 14px;
    align-items: flex-start;
}

.s360-cw-dossier-header__main {
    min-width: 0;
    flex: 1 1 220px;
}

.s360-cw-dossier-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 4px;
}

.s360-cw-dossier-phase-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.s360-cw-dossier-header__status {
    font-size: 0.82rem;
}

.s360-cw-dossier-header__peek {
    font-size: 0.78rem;
}

.s360-cw-dossier-header__actions {
    flex: 0 0 auto;
}

.s360-cw-dossier-header__delete-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.s360-cw-dossier-header__actions .s360-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    box-sizing: border-box;
}

@media (min-width: 720px) {
    .s360-cw-dossier-header {
        align-items: center;
    }

    .s360-cw-dossier-header__actions {
        flex-wrap: nowrap;
    }
}

.s360-cw-advance-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: min(100%, 42ch);
}

@media (min-width: 640px) {
    .s360-cw-advance-meta {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        max-width: none;
    }
}

/* Content workflow: Snel (compact) vs Volledig — zie content-workflow-view.js + localStorage s360_content_workflow_view */
.s360-cw-workflow-root {
    display: block;
}

.s360-cw-density-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

@media (min-width: 720px) {
    .s360-cw-density-toggle {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
}

.s360-cw-density-toggle__lab {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--s360-muted);
    white-space: nowrap;
}

.s360-cw-density-toggle__seg {
    display: inline-flex;
    border: 1px solid var(--s360-border);
    border-radius: 9px;
    overflow: hidden;
    background: #f1f5f9;
}

.s360-cw-density-btn {
    margin: 0;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 0;
    background: transparent;
    color: #475569;
    cursor: pointer;
    line-height: 1.2;
}

.s360-cw-density-btn:hover {
    background: rgba(255, 255, 255, 0.65);
    color: #0f172a;
}

.s360-cw-density-btn:focus-visible {
    outline: 2px solid var(--s360-primary, #2563eb);
    outline-offset: 2px;
    z-index: 1;
}

.s360-cw-density-btn.is-on {
    background: #fff;
    color: var(--s360-primary, #2563eb);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.s360-cw-density-btn + .s360-cw-density-btn {
    border-left: 1px solid var(--s360-border);
}

.s360-cw-workflow-root.is-cw-compact .s360-cw-workflow-overview,
.s360-cw-workflow-root.is-cw-compact .cw-now-banner,
.s360-cw-workflow-root.is-cw-compact .s360-cw-cockpit,
.s360-cw-workflow-root.is-cw-compact .s360-express-li,
.s360-cw-workflow-root.is-cw-compact .s360-cw-brief-canvas__hero,
.s360-cw-workflow-root.is-cw-compact .s360-cw-compose-shell__side,
.s360-cw-workflow-root.is-cw-compact .s360-cw-ship2 {
    display: none !important;
}

.s360-cw-workflow-root.is-cw-compact .s360-lead.s360-workflow-disclosure__intro {
    display: none;
}

.s360-cw-workflow-root.is-cw-compact .s360-cw-studio-head__sub {
    display: none;
}

.s360-cw-workflow-root.is-cw-compact .s360-cw-compose-shell {
    grid-template-columns: 1fr;
}

.s360-cw-pipeline {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
}

.s360-cw-pipeline__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.s360-cw-pipeline__title {
    margin: 0;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--s360-muted);
    font-weight: 700;
}

.s360-cw-pipeline__title span {
    margin-left: 6px;
    border: 1px solid var(--s360-border);
    border-radius: 999px;
    padding: 1px 6px;
    font-size: 0.68rem;
    text-transform: none;
}

.s360-cw-pipeline__cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.s360-cw-pipe-col {
    border: 1px solid var(--s360-border-soft, #e8edf7);
    border-radius: 10px;
    background: #f8fafc;
    padding: 8px;
}

.s360-cw-pipe-col h3 {
    margin: 0 0 7px;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s360-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.s360-cw-pipe-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #94a3b8;
}

.s360-cw-pipe-dot.is-info { background: #0ea5e9; }
.s360-cw-pipe-dot.is-violet { background: #8b5cf6; }
.s360-cw-pipe-dot.is-warn { background: #f59e0b; }
.s360-cw-pipe-dot.is-accent { background: #2f6fed; }
.s360-cw-pipe-dot.is-ok { background: #16a34a; }

.s360-cw-pipe-col__n {
    margin-left: auto;
    font-size: 0.63rem;
    border: 1px solid var(--s360-border);
    border-radius: 999px;
    padding: 1px 5px;
    background: #fff;
}

.s360-cw-pipe-card {
    border: 1px solid var(--s360-border);
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.s360-cw-pipe-card.is-active {
    border-color: var(--s360-primary);
    box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.16);
}

.s360-cw-pipe-card__title {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
}

.s360-cw-pipe-card__meta {
    margin: 3px 0 0;
    font-size: 0.68rem;
    color: var(--s360-muted);
}

.s360-cw-pipe-card__chans {
    display: flex;
    gap: 4px;
    margin-top: 7px;
}

.s360-cw-pipe-card__chans span {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #eef2ff;
    color: var(--s360-primary-dark);
    font-size: 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.s360-cw-phase-tabs {
    margin-top: 10px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--s360-border);
    padding-bottom: 2px;
}

.s360-cw-phase-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 10px 10px 0 0;
    text-decoration: none;
    color: var(--s360-muted);
    font-size: 0.8rem;
    padding: 7px 12px 8px;
    border-bottom: 2px solid transparent;
}

.s360-cw-phase-tab .num {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--s360-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    background: #fff;
}

.s360-cw-phase-tab.is-on {
    color: var(--s360-primary-dark);
    border-bottom-color: var(--s360-primary);
    background: #eef2ff;
}

.s360-cw-phase-tab.is-on .num {
    border-color: var(--s360-primary);
    color: var(--s360-primary-dark);
}

.s360-cw-brief-canvas {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
}

.s360-cw-brief-canvas__hero {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 10px;
}

.s360-cw-brief-canvas__eyebrow {
    margin: 0 0 6px;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--s360-muted);
    font-weight: 700;
}

.s360-cw-brief-canvas__title {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.s360-cw-brief-canvas__sub {
    margin: 6px 0 0;
    color: var(--s360-muted);
    font-size: 0.82rem;
}

.s360-cw-brief-canvas__prompt {
    border: 2px solid var(--s360-border);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.s360-cw-brief-canvas__prompt-label {
    display: block;
    margin: 0 0 4px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s360-muted);
    font-weight: 700;
}

.s360-cw-brief-canvas__prompt-body {
    margin: 0;
    white-space: pre-wrap;
    color: var(--s360-text);
    font-size: 0.84rem;
    line-height: 1.5;
}

.s360-cw-channel-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.s360-cw-channel-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--s360-border);
    border-radius: 999px;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 0.74rem;
    color: var(--s360-slate-700);
    background: #f8fafc;
}

.s360-cw-channel-tab:hover {
    border-color: #c7d2fe;
    color: var(--s360-primary-dark);
    background: #eef2ff;
}

.s360-cw-channel-tab__abbr {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #e2e8f0;
    color: var(--s360-slate-700);
    font-size: 0.62rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Contentworkflow: brief/dossier inklepbaar + visueel kanaal als canvas */
.s360-cw-brief-drawer {
    overflow: hidden;
}

.s360-cw-brief-drawer__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
}

.s360-cw-brief-drawer__summary::-webkit-details-marker {
    display: none;
}

.s360-cw-brief-drawer__chev {
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--s360-muted);
    border-bottom: 2px solid var(--s360-muted);
    transform: rotate(45deg);
    margin-top: 6px;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.s360-cw-brief-drawer[open] .s360-cw-brief-drawer__chev {
    transform: rotate(-135deg);
    margin-top: 10px;
}

.s360-cw-brief-drawer__summary:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
    border-radius: 8px;
}

.s360-cw-brief-drawer__summary-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.s360-cw-brief-drawer__title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.s360-cw-brief-drawer__meta {
    font-size: 0.78rem;
    line-height: 1.35;
}

.s360-cw-brief-drawer__panel {
    padding: 0 16px 16px;
    border-top: 1px solid var(--s360-border);
}

.s360-cw-brief-canvas--nested {
    border: none;
    padding: 12px 0 0;
    background: transparent;
}

.s360-cw-channel-jump__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
}

.s360-cw-visual-stage {
    border-radius: 16px;
    border: 1px solid var(--s360-border);
    background: linear-gradient(165deg, #fafbff 0%, #fff 42%);
    padding: 16px;
    box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
}

.s360-cw-visual-stage__figure {
    margin: 0;
}

.s360-cw-visual-stage__frame {
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    box-sizing: border-box;
    /* Innerlijke padding: randen van de bitmap blijven zichtbaar i.p.v. “tegen” overflow/hoeken */
    padding: clamp(10px, 2.8vmin, 16px);
    /* AI-workflow levert 1024×1024; vierkant kader voorkomt “zwevende” bands in een 16:10-vlak */
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: min(100%, 560px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.s360-cw-visual-stage__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
    flex: 0 1 auto;
}

.s360-cw-visual-stage__caption {
    margin-top: 10px;
    font-size: 0.78rem;
}

.s360-cw-visual-stage__caption-row {
    margin-top: 10px;
    font-size: 0.78rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.s360-cw-visual-stage__caption-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.s360-cw-visual-stage__caption-actions {
    flex: 0 0 auto;
}

.s360-cw-visual-stage__placeholder {
    border-radius: 12px;
    border: 2px dashed var(--s360-border);
    padding: 28px 20px;
    text-align: center;
    background: #f8fafc;
}

.s360-cw-visual-stage__placeholder-title {
    font-weight: 700;
    font-size: 0.95rem;
}

.s360-cw-visual-stage__ideas {
    margin-top: 14px;
    border-radius: 10px;
    border: 1px solid var(--s360-border);
    padding: 10px 12px;
    background: #fff;
}

.s360-cw-visual-stage__ideas summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.84rem;
}

.s360-cw-visual-stage__ideas-body {
    margin-top: 10px;
    font-size: 0.88rem;
}

.s360-cw-ideas-snippet ul {
    margin: 0;
    padding-left: 1.1rem;
}

.s360-cw-ideas-snippet li + li {
    margin-top: 4px;
}

.s360-cw-compose-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
}

.s360-cw-compose-shell__main {
    min-width: 0;
}

.s360-cw-compose-shell__side {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s360-cw-side-card {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
}

.s360-cw-side-card__title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
}

.s360-cw-side-card__meta {
    margin: 4px 0 0;
    font-size: 0.72rem;
    color: var(--s360-muted);
}

.s360-cw-side-card__stats {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.s360-cw-side-card__stats span {
    font-size: 0.7rem;
    color: var(--s360-muted);
}

.s360-cw-side-card__stats strong {
    display: block;
    font-size: 0.95rem;
    color: var(--s360-text);
}

.s360-cw-side-card__avatars {
    margin-top: 8px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.s360-cw-side-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #1e293b;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.s360-cw-side-card__list {
    margin: 8px 0 0;
    padding-left: 1rem;
    font-size: 0.74rem;
    color: var(--s360-muted);
}

.s360-anchor-highlight {
    animation: s360-anchor-pulse 1.6s ease-out;
}

@keyframes s360-anchor-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.42);
        background-color: color-mix(in srgb, #dbeafe 40%, transparent);
    }
    100% {
        box-shadow: 0 0 0 16px rgba(47, 111, 237, 0);
        background-color: transparent;
    }
}

.s360-dh-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--s360-border);
    padding-top: 12px;
    font-size: 0.7rem;
    color: var(--s360-muted);
}

@media (max-width: 1080px) {
    .s360-cockpit-grid {
        grid-template-columns: 1fr;
    }
    .s360-dh-hero-row {
        grid-template-columns: 1fr;
    }
    .s360-dh-rails {
        grid-template-columns: 1fr 1fr;
    }
    .s360-dh-people-row {
        grid-template-columns: 1fr;
    }
    .s360-cw-cockpit__rails {
        grid-template-columns: 1fr;
    }
    .s360-cw-workflow-overview__steps {
        grid-template-columns: 1fr;
    }
    .s360-cw-pub-readiness {
        grid-template-columns: 1fr;
    }
    .s360-cw-studio-head__top {
        flex-direction: column;
        align-items: flex-start;
    }
    .s360-cw-compose-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .s360-cockpit-gauges,
    .s360-cockpit-runbuildgrow {
        grid-template-columns: 1fr;
    }
    .s360-dh-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .s360-dh-module-grid {
        grid-template-columns: 1fr;
    }
    .s360-dh-rails {
        grid-template-columns: 1fr;
    }
    .s360-dh-kpi-card__value {
        font-size: 1.28rem;
    }
}

/* Content workflow — Plannen V2 (planning cockpit; class prefix ship2 is legacy) */
.s360-cw-ship2 {
    border: 1px solid var(--s360-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.s360-cw-ship2__tabs {
    display: flex;
    border-bottom: 1px solid var(--s360-border);
    background: #f8fafc;
}

.s360-cw-ship2__tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--s360-muted);
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.s360-cw-ship2__tab .n {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid var(--s360-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--s360-slate-700);
    background: #fff;
}

.s360-cw-ship2__tab .badge {
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: var(--s360-slate-700);
    font-size: 0.64rem;
    font-weight: 700;
}

.s360-cw-ship2__tab .badge.ok {
    background: #dcfce7;
    color: #166534;
}

.s360-cw-ship2__tab .badge.warn {
    background: #fef3c7;
    color: #92400e;
}

.s360-cw-ship2__tab.is-on {
    color: var(--s360-primary-dark);
    background: #fff;
    border-bottom-color: var(--s360-primary);
}

.s360-cw-ship2__tab.is-on .n {
    background: var(--s360-primary);
    border-color: var(--s360-primary);
    color: #fff;
}

.s360-cw-ship2__panel {
    display: none;
    padding: 12px;
}

.s360-cw-ship2__panel.is-on {
    display: block;
}

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

.s360-cw-ship2__col {
    border: 1px solid var(--s360-border);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    min-width: 0;
}

.s360-cw-ship2__label {
    margin: 0 0 8px;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s360-muted);
    font-weight: 700;
}

.s360-cw-ship2__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.s360-cw-ship2__row {
    border: 1px solid var(--s360-border);
    border-radius: 8px;
    padding: 9px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
}

.s360-cw-ship2__row.is-on {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.s360-cw-ship2__row-title {
    font-size: 0.82rem;
    font-weight: 700;
}

.s360-cw-ship2__row strong {
    font-size: 0.94rem;
}

.s360-cw-ship2__summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-cw-ship2__big {
    border-radius: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.s360-cw-ship2__big strong {
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--s360-primary-dark);
}

.s360-cw-ship2__big span {
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--s360-muted);
}

.s360-cw-ship2__stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.s360-cw-ship2__stats span {
    border: 1px solid var(--s360-border);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 0.75rem;
    color: var(--s360-muted);
    background: #f8fafc;
}

.s360-cw-ship2__stats strong {
    color: var(--s360-text);
}

.s360-cw-ship2__stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s360-cw-ship2__schedule-dossier {
    font-size: 0.88rem;
    line-height: 1.35;
}

.s360-cw-ship2__schedule-dossier-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--s360-muted);
    margin-right: 6px;
}

.s360-cw-ship2__schedule-dossier-title {
    color: var(--s360-text);
    word-break: break-word;
}

@media (max-width: 1080px) {
    .s360-cw-ship2__grid {
        grid-template-columns: 1fr;
    }
    .s360-cw-ship2__tabs {
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .s360-cw-phase-tabs {
        gap: 4px;
    }
    .s360-cw-phase-tab {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        text-align: center;
        padding: 8px 10px;
    }
    .s360-cw-phase-tab .num {
        width: 16px;
        height: 16px;
        font-size: 0.62rem;
    }
    .s360-cw-brief-canvas__hero {
        text-align: left;
    }
    .s360-cw-brief-canvas__title {
        font-size: 1.05rem;
    }
    .s360-cw-brief-canvas__sub {
        font-size: 0.78rem;
    }
    .s360-content-step__head {
        padding: 11px 12px 10px;
        gap: 10px;
    }
    .s360-content-step__num {
        width: 1.7rem;
        height: 1.7rem;
        border-radius: 8px;
        font-size: 0.8rem;
    }
    .s360-content-step__title {
        font-size: 0.9rem;
    }
    .s360-content-step__hint {
        font-size: 0.78rem;
        line-height: 1.35;
    }
    .s360-content-step__body {
        padding: 11px 12px 12px;
    }
    .s360-cw-side-card__stats {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .s360-cw-ship2__tabs {
        display: grid;
        grid-template-columns: 1fr;
    }
    .s360-cw-ship2__tab {
        justify-content: flex-start;
        border-bottom-width: 1px;
        border-bottom-color: var(--s360-border);
        padding: 10px 11px;
    }
    .s360-cw-ship2__tab.is-on {
        border-bottom-color: var(--s360-primary);
    }
    .s360-cw-ship2__panel {
        padding: 10px;
    }
    .s360-cw-ship2__row {
        align-items: flex-start;
    }
    .s360-cw-ship2__row strong {
        font-size: 0.86rem;
    }
    .s360-cw-ship2__big strong {
        font-size: 1.35rem;
    }
}

/* ── Paginatie (LengthAware / simple) — S360, geen Tailwind-dependency ───── */
.s360-pagination-wrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--s360-border);
}
.s360-pagination {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.s360-pagination__meta {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}
.s360-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.s360-pagination__list > li {
    margin: 0;
    padding: 0;
}
.s360-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--s360-primary);
    background: #fff;
    border: 1px solid #c7d2fe;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.s360-pagination__link:hover {
    background: #eef2ff;
    border-color: var(--s360-primary);
    color: #1e3a8a;
}
.s360-pagination__link--current {
    background: var(--s360-primary);
    border-color: var(--s360-primary);
    color: #fff;
    cursor: default;
}
.s360-pagination__link--disabled {
    color: #94a3b8;
    border-color: var(--s360-border);
    background: #f8fafc;
    cursor: not-allowed;
    pointer-events: none;
}
.s360-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--s360-muted);
}
.s360-pagination--simple .s360-pagination__list {
    gap: 8px;
}

/* ── AI-outputtoelichting (merk-teal, geen blauwe gradient) ─ */
.s360-ai-output-notice {
    border: 1px solid var(--s360-line);
    background: var(--s360-brand-soft);
    border-radius: var(--s360-radius-md, 18px);
    padding: 14px 16px;
    color: var(--s360-ink);
    font-size: 0.84rem;
    line-height: 1.5;
    box-shadow: var(--s360-shadow-sm);
}
.s360-ai-output-notice__inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.s360-ai-output-notice__badge {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--s360-brand);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: var(--s360-shadow-sm);
}
.s360-ai-output-notice__title {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s360-text);
    margin-bottom: 6px;
}
.s360-ai-output-notice__body {
    margin: 0;
    color: var(--s360-muted);
    max-width: 72ch;
}
.s360-ai-output-notice__link {
    font-weight: 600;
    color: var(--s360-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.s360-ai-output-notice__link:hover {
    color: var(--s360-brand-strong);
}
.s360-ai-output-notice--compact .s360-ai-output-notice__title {
    display: inline;
    margin-bottom: 0;
    font-size: 0.78rem;
}
.s360-ai-output-notice--compact .s360-ai-output-notice__inner {
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 6px;
}
.s360-ai-output-notice--compact .s360-ai-output-notice__badge {
    min-width: 28px;
    height: 28px;
    font-size: 0.62rem;
}
.s360-ai-output-notice--compact .s360-ai-output-notice__one-line {
    font-size: 0.8rem;
    color: var(--s360-muted);
    flex: 1 1 220px;
    min-width: 0;
}
.s360-ai-output-notice__dot {
    color: #94a3b8;
}

/* Publieke trust-pagina’s (layouts.site — gelijk aan s360-site-panel / hero-side) */
.s360-trust-page {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 8px;
}
.s360-trust-subnav-wrap {
    padding: 12px 14px;
}
.s360-trust-subnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.s360-trust-subnav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--s360-border);
    background: var(--s360-surface);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--s360-text);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.s360-trust-subnav__link:hover {
    background: #f8fafc;
    border-color: #c7d2fe;
}
.s360-trust-subnav__link[aria-current='page'] {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-color: #a5b4fc;
    color: #1e3a8a;
    box-shadow: 0 2px 12px rgba(47, 111, 237, 0.18);
}
.s360-trust-subnav__link:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-trust-page__intro.s360-site-panel {
    padding: 26px 28px 24px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(168deg, #ffffff 0%, #f8fafc 52%, #eef2ff 100%);
    border-left: 4px solid var(--s360-primary);
}
.s360-trust-page__kicker {
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 62ch;
}
.s360-trust-page__title {
    margin: 0 0 12px;
    font-size: clamp(1.38rem, 2.6vw, 1.82rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--s360-text);
    line-height: 1.15;
}
.s360-trust-page__lead {
    margin-bottom: 0;
}
.s360-trust-page__section.s360-site-panel {
    padding: 20px 22px 22px;
}
.s360-trust-page__h2 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--s360-border);
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s360-text);
}
.s360-trust-page__p {
    margin: 0 0 12px;
    line-height: 1.65;
    color: var(--s360-muted);
    max-width: 72ch;
}
.s360-trust-page__p:last-child {
    margin-bottom: 0;
}
.s360-trust-page__list {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--s360-muted);
    line-height: 1.65;
    max-width: 72ch;
}
.s360-trust-page__list li + li {
    margin-top: 8px;
}
.s360-trust-page__list ::marker {
    color: var(--s360-primary);
}
.s360-trust-page__code {
    font-size: 0.82em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #f1f5f9;
    border: 1px solid var(--s360-border);
    padding: 2px 8px;
    border-radius: 8px;
    color: #334155;
}
.s360-trust-page__fine {
    font-size: 0.8rem;
    line-height: 1.55;
    margin-top: 8px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px dashed var(--s360-border);
    color: var(--s360-muted);
    max-width: 72ch;
}

.s360-trust-page a:not(.s360-trust-subnav__link) {
    color: var(--s360-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.s360-trust-page a:not(.s360-trust-subnav__link):hover {
    color: var(--s360-primary-dark, #1d4ed8);
}

.s360-trust-page a:focus-visible,
.s360-ai-output-notice__link:focus-visible {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Beeldbank (media library) ───────────────────────────────────────── */
.s360-media-bank {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.s360-media-bank__hero {
    border: 1px solid rgba(99, 102, 241, 0.22);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(99, 102, 241, 0.18), transparent 55%),
        radial-gradient(80% 70% at 100% 20%, rgba(14, 165, 233, 0.14), transparent 50%),
        linear-gradient(165deg, #f8fafc 0%, #fff 45%, #f1f5ff 100%);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
}

.s360-media-bank__hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.s360-media-bank__eyebrow {
    margin: 0 0 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-media-bank__title {
    margin: 0 0 8px;
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.s360-media-bank__lead {
    max-width: 56ch;
    color: #475569;
}

.s360-media-bank__hero-stats {
    display: flex;
    gap: 12px;
}

.s360-media-bank__stat {
    min-width: 100px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.35);
    text-align: center;
}

.s360-media-bank__stat-n {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: #312e81;
    line-height: 1.1;
}

.s360-media-bank__stat-l {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s360-muted);
}

.s360-media-bank__flash {
    margin: 0;
}

.s360-media-bank__upload {
    border: 1px solid var(--s360-border);
}

.s360-media-bank__form-grid {
    display: grid;
    gap: var(--s360-form-stack-gap, 14px);
    grid-template-columns: 1fr 1fr;
}

.s360-media-bank__form-grid--wide {
    grid-column: 1 / -1;
}

@media (max-width: 720px) {
    .s360-media-bank__form-grid {
        grid-template-columns: 1fr;
    }
}

.s360-media-bank__errors {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    font-size: 0.88rem;
}

.s360-media-bank__empty {
    padding: 28px 20px;
    text-align: center;
    border-style: dashed;
}

.s360-media-bank__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.s360-media-bank__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--s360-border);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.s360-media-bank__card:hover {
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.s360-media-bank__thumb {
    aspect-ratio: 16 / 10;
    background: linear-gradient(145deg, #e0e7ff, #f1f5f9);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.s360-media-bank__thumb--pdf {
    background: linear-gradient(145deg, #fee2e2, #fef2f2);
    color: #b91c1c;
}

.s360-media-bank__thumb--video {
    background: linear-gradient(145deg, #dbeafe, #eff6ff);
    color: #1d4ed8;
}

.s360-media-bank__thumb--audio {
    background: linear-gradient(145deg, #d1fae5, #ecfdf5);
    color: #047857;
}

.s360-media-bank__thumb--file {
    background: linear-gradient(145deg, #e2e8f0, #f8fafc);
    color: #475569;
}

.s360-media-bank__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s360-media-bank__thumb-icon {
    opacity: 0.9;
}

.s360-media-bank__card-body {
    padding: 12px 14px 10px;
    flex: 1 1 auto;
}

.s360-media-bank__card-title {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--s360-text);
}

.s360-media-bank__card-meta {
    font-size: 0.76rem;
}

.s360-media-bank__card-desc {
    font-size: 0.8rem;
}

.s360-media-bank__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    padding-top: 10px;
}

.s360-media-bank__pager nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
}

/* Beeldbank-kiezer in contentworkflow */
.s360-ml-channel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.s360-content-step--media-lib .s360-content-step__num {
    opacity: 0.35;
}

.s360-ml-picker-dialog {
    border: none;
    border-radius: 12px;
    padding: 0;
    max-width: min(920px, 96vw);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.s360-ml-picker-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.s360-ml-picker-dialog__inner {
    padding: 16px 18px 18px;
}

.s360-ml-picker-dialog__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.s360-ml-picker-dialog__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
}

.s360-ml-picker-dialog__body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
    max-height: min(58vh, 520px);
    overflow: auto;
}

.s360-ml-picker-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    font-size: 0.72rem;
    color: var(--s360-text-muted, #64748b);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.s360-ml-picker-tile:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.s360-ml-picker-tile__thumb-wrap {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background: #f1f5f9;
}

.s360-ml-picker-tile__thumb {
    display: block;
    width: 100%;
    height: 86px;
    object-fit: cover;
}

.s360-ml-picker-tile__cap {
    display: block;
    line-height: 1.25;
    max-height: 2.6em;
    overflow: hidden;
}

/* Nieuwsbrief-composer (contentmodule) */
.s360-nl-composer-entry__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.s360-nl-composer-entry__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    min-width: min(100%, 220px);
}

.s360-nl-app {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.s360-nl-app__topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 16px;
    border-radius: 12px;
}

.s360-nl-app__topbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.s360-nl-app__eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.s360-nl-app__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
}

.s360-nl-app__topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.s360-nl-app__flash {
    margin: 0 0 16px;
}

.s360-nl-composer.s360-social-composer {
    margin-top: 10px;
}

.s360-nl-app--editor .s360-social-composer__page {
    position: relative;
    background: #fff;
    border: 1px solid var(--s360-slate-200);
    border-left: 4px solid var(--s360-primary);
    box-shadow: 0 14px 44px rgba(15, 23, 42, 0.1);
}

.s360-nl-composer-stage-head {
    margin: 0 0 16px;
    padding: 14px 16px 16px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--s360-primary) 9%, var(--s360-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--s360-primary) 24%, var(--s360-slate-200));
}

.s360-nl-composer-stage-head__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--s360-slate-900);
    letter-spacing: -0.02em;
}

.s360-nl-composer-stage-head__lead {
    font-size: 0.9rem;
    line-height: 1.5;
    max-width: 72ch;
}

.s360-nl-rail-section__title {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--s360-slate-800);
    letter-spacing: 0.02em;
}

.s360-nl-rail-checks.check-grid {
    gap: 8px;
}

.s360-nl-panel--in-composer {
    box-shadow: none;
}

.s360-nl-composer .s360-nl-preview-mount {
    border: 0;
    padding: 0;
    background: transparent;
}

.s360-nl-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1024px) {
    .s360-nl-shell {
        grid-template-columns: 1fr;
    }
}

.s360-nl-panel {
    border-radius: 12px;
}

.s360-nl-field-grid {
    display: grid;
    gap: 14px;
}

@media (min-width: 640px) {
    .s360-nl-field-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.s360-nl-panel__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.s360-nl-blocks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s360-nl-block {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    background: #fafbfc;
}

.s360-nl-block__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.s360-nl-block__handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 0.9rem;
    user-select: none;
}

.s360-nl-block__badge {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
}

.s360-nl-block__del {
    margin-left: auto;
}

.s360-nl-textarea {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
}

.s360-nl-add-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.s360-nl-inspector {
    position: sticky;
    top: 92px;
    border-radius: 12px;
    max-height: calc(100vh - 120px);
    overflow: auto;
}

.s360-nl-preview-mount {
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    background: #fff;
}

.s360-nl-doc-preview__subject {
    font-size: 1.25rem;
    margin: 0 0 8px;
}

.s360-nl-doc-preview__pre {
    margin: 0 0 12px;
    font-size: 0.9rem;
}

.s360-nl-doc-preview__intro {
    margin-bottom: 16px;
}

.s360-nl-doc-preview__kicker {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 6px;
    color: #64748b;
}

.s360-nl-doc-preview__hl {
    font-size: 1.35rem;
    margin: 0 0 8px;
}

.s360-nl-doc-preview__sub {
    margin: 0;
    color: #475569;
}

.s360-nl-doc-preview__rich {
    margin-bottom: 14px;
    font-size: 0.95rem;
    line-height: 1.55;
}

.s360-nl-doc-preview__fig {
    margin: 0 0 14px;
}

.s360-nl-doc-preview__fig-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.s360-nl-doc-preview__btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 8px;
    background: #0f172a;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
}

.s360-nl-doc-preview__divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 16px 0;
}

/* Cookie-toestemmingsbalk: zie stakeholder360-theme.css (.s360-cookie-consent) */

/* —— Nieuwsbrieflijsten (bedrijfsinstellingen) —— */
.s360-nl-lists-page {
    padding-bottom: 24px;
}

.s360-nl-lists-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px 12px;
}

.s360-nl-lists-panel__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text);
}

.s360-nl-lists-table-wrap {
    overflow-x: auto;
    margin: 0 -4px;
    padding: 0 4px;
}

.s360-nl-lists-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted);
}

.s360-nl-lists-table__name {
    font-weight: 600;
    color: var(--s360-text);
}

.s360-nl-lists-table__col-num,
.s360-nl-lists-table__num {
    text-align: right;
    white-space: nowrap;
}

.s360-nl-lists-empty {
    padding: clamp(28px, 5vw, 48px) 24px;
}

.s360-nl-lists-empty__inner {
    max-width: 38rem;
    margin: 0 auto;
    text-align: center;
}

.s360-nl-lists-empty__eyebrow {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.s360-nl-lists-empty__title {
    font-size: clamp(1.15rem, 2.5vw, 1.35rem);
    font-weight: 800;
    color: var(--s360-text);
    letter-spacing: -0.02em;
}

.s360-nl-lists-empty__lead {
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

.s360-nl-lists-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.s360-nl-lists-multiselect {
    width: 100%;
    max-width: 100%;
    min-height: 280px;
    padding: 8px 10px;
    border-radius: var(--s360-radius-card, 12px);
    border: 1px solid var(--s360-border);
    background: var(--s360-surface, #fff);
    font-size: 0.88rem;
    line-height: 1.45;
}

.s360-nl-lists-multiselect:focus {
    outline: 2px solid var(--s360-primary);
    outline-offset: 2px;
}

.s360-nl-lists-danger {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fffefe 0%, #fef2f2 100%);
}

/* ── Nieuwsbrief canvas-editor (Mailpoet-stijl) ── */

.s360-nl-blocks {
    gap: 0;
}

.s360-nl-canvas-block {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.13s;
}

.s360-nl-canvas-block:hover {
    border-color: var(--s360-primary, #3b82f6);
}

.s360-nl-canvas-block.is-dragging {
    opacity: 0.4;
}

.s360-nl-canvas-block__body {
    padding: 14px 16px;
    pointer-events: none;
    min-height: 32px;
}

.s360-nl-canvas-block__overlay {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 3px 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
    z-index: 2;
}

.s360-nl-canvas-block:hover .s360-nl-canvas-block__overlay {
    opacity: 1;
    pointer-events: auto;
}

.s360-nl-canvas-block__handle {
    cursor: grab;
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1;
    user-select: none;
    padding: 0 2px;
}

.s360-nl-canvas-block__handle:active {
    cursor: grabbing;
}

.s360-nl-canvas-block__lbl {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 0 2px;
}

.s360-nl-canvas-block__edit-btn,
.s360-nl-canvas-block__del-btn,
.s360-nl-canvas-block__dup-btn,
.s360-nl-canvas-block__move-btn {
    background: none;
    border: none;
    padding: 3px 5px;
    cursor: pointer;
    color: #64748b;
    border-radius: 4px;
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.1s, background 0.1s;
}

.s360-nl-canvas-block__edit-btn:hover {
    color: var(--s360-primary, #3b82f6);
    background: #eff6ff;
}

.s360-nl-canvas-block__dup-btn:hover {
    color: #0f766e;
    background: #f0fdfa;
}

.s360-nl-canvas-block__move-btn:hover:not(:disabled) {
    color: var(--s360-primary, #3b82f6);
    background: #eff6ff;
}

.s360-nl-canvas-block__move-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

.s360-nl-canvas-block__move-btn {
    font-size: 10px;
    padding: 2px 4px;
}

.s360-nl-canvas-block__del-btn:hover:not(:disabled) {
    color: #b91c1c;
    background: #fef2f2;
}

.s360-nl-canvas-block__del-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.s360-nl-img-upload-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Drop zones */
.s360-nl-drop-zone {
    list-style: none;
    height: 10px;
    display: flex;
    align-items: center;
    position: relative;
    transition: height 0.12s;
}

.s360-nl-drop-zone__line {
    display: none;
    height: 2px;
    background: var(--s360-primary, #3b82f6);
    border-radius: 2px;
    flex: 1;
}

.s360-nl-drop-zone__label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: var(--s360-primary, #3b82f6);
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
}

.s360-nl-drop-zone.is-over {
    height: 36px;
}

.s360-nl-drop-zone.is-over .s360-nl-drop-zone__line {
    display: block;
}

.s360-nl-drop-zone.is-over .s360-nl-drop-zone__label {
    opacity: 1;
}

/* Canvas block content previews */
.s360-nl-canvas-placeholder {
    margin: 0;
    color: #94a3b8;
    font-size: 0.84rem;
    font-style: italic;
    text-align: center;
    padding: 14px 0;
}

.s360-nl-canvas-intro .s360-nl-canvas-kicker {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    margin: 0 0 5px;
    font-weight: 600;
}

.s360-nl-canvas-intro .s360-nl-canvas-headline {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 5px;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.s360-nl-canvas-intro .s360-nl-canvas-subline {
    margin: 0;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.5;
}

.s360-nl-canvas-rich {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #334155;
}

.s360-nl-canvas-rich p { margin: 0 0 8px; }
.s360-nl-canvas-rich p:last-child { margin-bottom: 0; }
.s360-nl-canvas-rich h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.s360-nl-canvas-rich h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }

.s360-nl-canvas-fig { margin: 0; }

.s360-nl-canvas-divider {
    height: 1px;
    background: #e2e8f0;
    border-radius: 2px;
    margin: 4px 0;
}

.s360-nl-canvas-spacer {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, #f1f5f9 4px, #f1f5f9 8px);
    border-radius: 4px;
}

.s360-nl-canvas-spacer span {
    font-size: 0.68rem;
    color: #94a3b8;
    background: rgba(248, 250, 252, 0.9);
    padding: 1px 8px;
    border-radius: 10px;
}

/* Block palette */
.s360-nl-palette__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.s360-nl-palette__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    cursor: grab;
    user-select: none;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.s360-nl-palette__item:hover,
.s360-nl-palette__item:focus-visible {
    border-color: var(--s360-primary, #3b82f6);
    border-style: solid;
    background: #eff6ff;
    color: var(--s360-primary, #3b82f6);
    outline: none;
}

.s360-nl-palette__item:active {
    cursor: grabbing;
}

/* Block edit dialog */
.s360-nl-edit-dlg {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.2);
    padding: 0;
    width: min(560px, 96vw);
    max-height: 88vh;
    overflow: auto;
    background: #fff;
}

.s360-nl-edit-dlg::backdrop {
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
}

.s360-nl-edit-dlg__inner {
    display: flex;
    flex-direction: column;
}

.s360-nl-edit-dlg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.s360-nl-edit-dlg__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
}

.s360-nl-edit-dlg__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.s360-nl-edit-ta {
    width: 100%;
    min-height: 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
}

/* Rich tekst werkbalk in edit dialog */
.s360-nl-rich-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.s360-nl-rich-toolbar + .s360-nl-edit-ta {
    border-radius: 0 0 6px 6px;
}

.s360-nl-rich-toolbar__btn {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: #475569;
    line-height: 1.4;
    transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.s360-nl-rich-toolbar__btn:hover {
    border-color: var(--s360-primary, #3b82f6);
    background: #eff6ff;
    color: var(--s360-primary, #3b82f6);
}

.s360-nl-rich-toolbar__sep {
    width: 1px;
    background: #e2e8f0;
    margin: 2px 2px;
    align-self: stretch;
}

/* E-mailpreview dialog */
.s360-nl-email-preview-dlg {
    border: none;
    border-radius: 14px;
    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.22);
    padding: 0;
    width: min(680px, 97vw);
    max-height: 92vh;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.s360-nl-email-preview-dlg::backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
}

.s360-nl-email-preview-dlg__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.s360-nl-email-preview-dlg__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.s360-nl-email-preview-dlg__head h2 {
    flex: 1;
    min-width: 0;
}

.s360-nl-email-preview-dlg__body {
    flex: 1;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    flex-direction: column;
}

.s360-nl-email-preview-dlg__frame {
    flex: 1;
    width: 100%;
    border: none;
    min-height: 500px;
}


.s360-nl-canvas-empty {
    list-style: none;
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 0.88rem;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
}

.s360-nl-canvas-empty p {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   REGRESSIEANALYSE MODULE
═══════════════════════════════════════════════════════════════ */

.s360-reg-app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.s360-reg-header {
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
}

.s360-reg-header__inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.s360-reg-section {
    border-radius: 10px;
    padding: 1.5rem;
}

.s360-reg-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--s360-primary, #3b82f6);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

/* Upload zone */
.s360-reg-upload-zone {
    border: 2px dashed var(--s360-border, #e2e8f0);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--s360-surface-muted, #f8fafc);
}

.s360-reg-upload-zone:hover,
.s360-reg-upload-zone.is-over {
    border-color: var(--s360-primary, #3b82f6);
    background: #eff6ff;
}

.s360-reg-upload-zone:focus-visible {
    outline: 3px solid var(--s360-primary, #3b82f6);
    outline-offset: 2px;
}

.s360-reg-or-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
    color: #94a3b8;
    font-size: 0.82rem;
}

.s360-reg-or-divider::before,
.s360-reg-or-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--s360-border, #e2e8f0);
}

/* Data preview */
.s360-reg-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 8px;
}

.s360-reg-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.s360-reg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.s360-reg-table th {
    background: var(--s360-surface-muted, #f8fafc);
    padding: 7px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--s360-border, #e2e8f0);
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.s360-reg-table td {
    padding: 6px 12px;
    border-bottom: 1px solid var(--s360-border, #e2e8f0);
}

.s360-reg-table--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.s360-reg-table--coef tr.s360-reg-sig td {
    background: #f0fdf4;
}

.s360-reg-stars {
    font-weight: 700;
    color: #16a34a;
    letter-spacing: 0.05em;
}

/* Variabelen selecteren */
.s360-reg-var-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .s360-reg-var-grid { grid-template-columns: 1fr; }
}

.s360-reg-x-checks {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 8px;
    border: 1px solid var(--s360-border, #e2e8f0);
    border-radius: 6px;
    background: var(--s360-surface-muted, #f8fafc);
}

/* Resultaten */
.s360-reg-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    flex-wrap: wrap;
}

.s360-reg-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .s360-reg-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .s360-reg-kpi-row { grid-template-columns: 1fr; }
}

.s360-reg-kpi {
    padding: 1rem 1.25rem;
    border-radius: 10px;
}

.s360-reg-kpi__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.s360-reg-kpi__value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--s360-primary, #3b82f6);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.s360-reg-kpi__hint {
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Diagnostiek */
.s360-reg-diag-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .s360-reg-diag-row { grid-template-columns: repeat(2, 1fr); }
}

.s360-reg-diag-item {
    padding: 0.75rem 1rem;
    background: var(--s360-surface-muted, #f8fafc);
    border-radius: 8px;
    border: 1px solid var(--s360-border, #e2e8f0);
}

/* Grafieken */
.s360-reg-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 800px) {
    .s360-reg-charts-grid { grid-template-columns: 1fr; }
}

.s360-reg-chart-card {
    padding: 1.25rem;
    border-radius: 10px;
}

.s360-reg-canvas {
    display: block;
    width: 100%;
    border-radius: 6px;
    background: var(--s360-surface-muted, #f8fafc);
}

/* Foutmelding */
.s360-reg-error {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 0.88rem;
}

.s360-reg-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ── Dataset browser ──────────────────────────────────────────── */

.s360-reg-browser-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.s360-reg-datasets-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.s360-reg-ds-group__head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 0 0 8px;
}

.s360-reg-ds-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.s360-reg-ds-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: var(--s360-surface-muted, #f8fafc);
    border: 1.5px solid var(--s360-border, #e2e8f0);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.s360-reg-ds-card:hover {
    border-color: var(--s360-primary, #3b82f6);
    background: #eff6ff;
    box-shadow: 0 2px 8px rgba(59,130,246,.1);
}

.s360-reg-ds-card--merge {
    border-color: #d1fae5;
    background: #f0fdf4;
}

.s360-reg-ds-card--merge:hover {
    border-color: #059669;
    background: #ecfdf5;
}

.s360-reg-ds-card__title {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
    line-height: 1.3;
}

.s360-reg-ds-card__meta {
    font-size: 0.75rem;
    color: var(--s360-primary, #3b82f6);
    font-weight: 600;
}

.s360-reg-ds-card--merge .s360-reg-ds-card__meta {
    color: #059669;
}

.s360-reg-ds-card__desc {
    font-size: 0.78rem;
    line-height: 1.4;
    margin-top: 2px;
}

.s360-reg-ds-card__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.s360-reg-col-chip {
    display: inline-block;
    padding: 1px 7px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.s360-reg-ds-card--merge .s360-reg-col-chip {
    background: #d1fae5;
    color: #065f46;
}

.s360-reg-ds-card__action {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--s360-primary, #3b82f6);
    margin-top: 6px;
}

.s360-reg-ds-card--merge .s360-reg-ds-card__action {
    color: #059669;
}

/* Actieve bron indicator */
.s360-reg-active-source {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #166534;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

/* Merge workspace */
.s360-reg-merge-workspace {
    border: 1.5px solid #d1fae5;
    border-radius: 10px;
    padding: 1rem 1.25rem 1.25rem;
    background: #f0fdf4;
}

.s360-reg-merge-workspace__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

/* ── Causaliteitsanalyse ───────────────────────────────────────── */

.s360-reg-causal-net-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 800px) {
    .s360-reg-causal-net-wrap { grid-template-columns: 1fr; }
}

.s360-reg-canvas--net {
    width: 100%;
    border-radius: 10px;
    background: var(--s360-surface-muted, #f8fafc);
}

.s360-reg-causal-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

/* Mediatie diagram */
.s360-reg-mediation-diagram {
    background: var(--s360-surface-muted, #f8fafc);
    border: 1px solid var(--s360-border, #e2e8f0);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.s360-reg-med-path {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.s360-reg-med-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1.5px solid #818cf8;
}

.s360-reg-med-arrow {
    font-size: 0.78rem;
    color: #475569;
    padding: 2px 6px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

.s360-reg-med-arrow::before { content: '→ '; }
.s360-reg-med-arrow::after  { content: ' →'; }

.s360-reg-med-direct {
    font-size: 0.8rem;
    border-top: 1px solid var(--s360-border, #e2e8f0);
    padding-top: 8px;
    margin-top: 10px !important;
}

/* ── Proactieve agent alerts (smart-agent index) ──────────────────── */
.sa-proactive-alerts { border-left: 4px solid #f59e0b; }

.sa-alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 8px;
    vertical-align: middle;
}

.sa-alert-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.sa-alert-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    position: relative;
}
.sa-alert-item--critical { background: #fff3f3; border-left: 4px solid #c62828; }
.sa-alert-item--warning  { background: #fff8ee; border-left: 4px solid #e65100; }
.sa-alert-item--info     { background: #f0f4ff; border-left: 4px solid #3949ab; }

.sa-alert-item__icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }

.sa-alert-item__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sa-alert-item__title { font-weight: 700; color: #111; }
.sa-alert-item__text  { color: #4b5563; font-size: 13px; }

.sa-alert-item__dismiss {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #9ca3af;
    padding: 0 2px;
    margin-left: 4px;
    flex-shrink: 0;
    transition: color .15s;
}
.sa-alert-item__dismiss:hover { color: #374151; }

/* ── Bedrijf: Themawegingen (theme weight profiles) ───────────────── */
.s360-theme-weights-page__h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.02em;
}

.s360-theme-weights-page__h3 {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--s360-text, #0f172a);
}

.s360-theme-weights-page__h3--spaced {
    margin-top: 1.35rem;
}

.surface-panel form.s360-theme-weights-page__theme-bar {
    flex-direction: row;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.s360-theme-weights-page__theme-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.5rem;
}

.s360-theme-weights-page__theme-intro {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: 42ch;
}

.s360-theme-weights-page__theme-hint {
    max-width: 38ch;
    font-size: 0.9rem;
    line-height: 1.45;
}

.s360-theme-weights-page__theme-field {
    flex: 0 1 16rem;
    min-width: 12rem;
    max-width: 20rem;
    margin: 0;
}

@media (max-width: 520px) {
    .s360-theme-weights-page__theme-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-theme-weights-page__theme-intro {
        max-width: none;
    }

    .s360-theme-weights-page__theme-field {
        flex: 1 1 auto;
        max-width: none;
        width: 100%;
    }
}

.s360-theme-weights-page__select {
    width: 100%;
}

.s360-theme-weights-page__theme-actions {
    flex: 0 0 auto;
}

.s360-theme-weights-page__summary {
    margin: 0.75rem 0 1.25rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: var(--s360-surface-muted, #f8fafc);
    border: 1px solid var(--s360-border, #e2e8f0);
}

.s360-theme-weights-page__summary-bar {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.85rem;
    box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.06);
}

.s360-theme-weights-page__summary-seg {
    flex-shrink: 0;
    min-width: 2px;
}

.s360-theme-weights-page__summary-seg--importance {
    background: linear-gradient(180deg, #6366f1, #4f46e5);
}

.s360-theme-weights-page__summary-seg--influence {
    background: linear-gradient(180deg, #14b8a6, #0d9488);
}

.s360-theme-weights-page__summary-seg--urgency {
    background: linear-gradient(180deg, #fb923c, #ea580c);
}

.s360-theme-weights-page__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s360-theme-weights-page__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--s360-border, #e2e8f0);
    background: #fff;
}

.s360-theme-weights-page__chip-label {
    font-weight: 600;
    color: var(--s360-muted, #64748b);
}

.s360-theme-weights-page__chip-value {
    font-variant-numeric: tabular-nums;
    color: var(--s360-text, #0f172a);
}

.s360-theme-weights-page__chip--importance {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.s360-theme-weights-page__chip--influence {
    border-color: #99f6e4;
    background: #ecfdf5;
}

.s360-theme-weights-page__chip--urgency {
    border-color: #fed7aa;
    background: #fff7ed;
}

.s360-theme-weights-page__presets {
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--s360-border, #e2e8f0);
}

.s360-theme-weights-page__presets-label {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--s360-muted, #64748b);
}

.s360-theme-weights-page__preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.5rem;
    align-items: center;
}

.s360-theme-weights-page__preset {
    border-radius: 999px;
    max-width: 100%;
    text-align: center;
}

.s360-theme-weights-page__presets-hint {
    margin-top: 0.65rem !important;
    max-width: 62ch;
    font-size: 0.86rem;
}

.s360-theme-weights-page__viz-grid {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: end;
}

@media (max-width: 520px) {
    .s360-theme-weights-page__viz-grid {
        grid-template-columns: 1fr;
    }
}

.s360-theme-weights-page__input-initials {
    max-width: 9rem;
    font-variant-numeric: tabular-nums;
}

.s360-theme-weights-page__color-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.s360-theme-weights-page__color-input {
    width: 3rem;
    height: 2.5rem;
    padding: 2px;
    border: 1px solid var(--s360-border, #e2e8f0);
    border-radius: 10px;
    background: var(--s360-surface, #fff);
    cursor: pointer;
}

.s360-theme-weights-page__color-input:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.s360-theme-weights-page__color-input::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.s360-theme-weights-page__color-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.s360-theme-weights-page__color-input::-moz-color-swatch {
    border: none;
    border-radius: 6px;
}

.s360-theme-weights-page__weights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    max-width: 36rem;
}

@media (max-width: 640px) {
    .s360-theme-weights-page__weights {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

.s360-theme-weights-page__input-weight {
    width: 100%;
    max-width: 11rem;
    font-variant-numeric: tabular-nums;
}

.s360-theme-weights-page__critical {
    margin-top: 1rem;
    max-width: 62ch;
}

.s360-theme-weights-page__critical .inline-check {
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.45;
}

.s360-theme-weights-page__edit-form .form-actions-bar {
    margin-top: 1.25rem;
}

.s360-theme-weights-page__form-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s360-theme-weights-page .s360-theme-weights-accordion {
    margin: 0;
}

.s360-theme-weights-page .s360-theme-weights-accordion > summary {
    margin-bottom: 0;
    padding-bottom: 12px;
}

.s360-theme-weights-page .s360-theme-weights-accordion[open] > summary {
    margin-bottom: 0;
    border-bottom: 1px solid var(--s360-border, #e2e8f0);
}

.s360-theme-weights-accordion__body {
    padding-top: 4px;
}

.s360-theme-weights-page .check-grid.s360-theme-weights-page__weights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 36rem;
}

@media (max-width: 640px) {
    .s360-theme-weights-page .check-grid.s360-theme-weights-page__weights {
        grid-template-columns: 1fr;
    }
}

/* Themawegingen — vereenvoudigde UI (schuifbalken + profielkaarten) */
.tw-active-theme {
    font-size: 0.95rem;
}

.tw-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tw-preset-grid > li {
    margin: 0;
}

.tw-preset-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    min-height: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--s360-border, #e2e8f0);
    background: var(--s360-surface-soft, #f8fafc);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tw-preset-card:hover,
.tw-preset-card:focus-visible {
    border-color: #a5b4fc;
    background: #eef2ff;
}

.tw-preset-card.is-selected {
    border-color: var(--s360-primary, #4f46e5);
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgb(79 70 229 / 0.15);
}

.tw-preset-card__title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--s360-text, #0f172a);
}

.tw-preset-card__hint {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--s360-muted, #64748b);
}

.tw-total-line {
    font-size: 0.92rem;
    font-weight: 700;
}

.tw-total-line--ok {
    color: #166534;
}

.tw-total-line--warn {
    color: #b45309;
}

.tw-sliders {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 1rem;
}

.tw-slider-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.tw-slider-row__head label {
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0;
}

.tw-slider-row__pct {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s360-primary, #4f46e5);
}

.tw-slider-row__help {
    font-size: 0.84rem;
    line-height: 1.45;
    margin-bottom: 10px !important;
}

.tw-slider {
    width: 100%;
    height: 8px;
    margin: 0;
    accent-color: var(--s360-primary, #4f46e5);
    cursor: pointer;
}

.tw-slider:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 4px;
}

.tw-slider-row--importance .tw-slider {
    accent-color: #4f46e5;
}

.tw-slider-row--influence .tw-slider {
    accent-color: #0d9488;
}

.tw-slider-row--urgency .tw-slider {
    accent-color: #ea580c;
}

.s360-theme-weights-page__summary-bar {
    height: 14px;
}

/* ── Bedrijf: Beeldbank (media library) ───────────────────────────── */
.s360-media-bank {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.s360-media-bank__hero.surface-panel {
    margin-bottom: 0;
}

.s360-media-bank__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-media-bank__hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.s360-media-bank__hero-main {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 62ch;
}

.s360-media-bank__stat {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--s360-border, #e2e8f0);
    background: var(--s360-surface-soft, #f8fafc);
}

.s360-media-bank__stat-n {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.02em;
}

.s360-media-bank__stat-l {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted, #64748b);
    margin-top: 0.15rem;
}

.s360-media-bank__h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.02em;
}

.s360-media-bank__section-lead {
    max-width: 52ch;
    font-size: 0.9rem;
    line-height: 1.45;
}

.s360-media-bank__library-meta {
    font-size: 0.85rem;
}

.s360-media-bank__form {
    gap: 1rem;
}

.s360-media-bank__form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s360-form-stack-gap, 18px);
    align-items: start;
}

.s360-media-bank__form-grid--wide {
    grid-column: 1 / -1;
}

.s360-media-bank__form-grid .field {
    margin: 0;
}

.s360-media-bank__file-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.88rem;
}

.s360-media-bank__errors {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    font-size: 0.88rem;
}

.s360-media-bank__form-actions {
    justify-content: space-between;
}

.s360-media-bank__form-hint {
    font-size: 0.85rem;
    flex: 1 1 auto;
    min-width: 12rem;
}

.s360-media-bank__library {
    margin-top: 0;
}

.s360-media-bank__library-head {
    margin-bottom: 0;
}

.s360-media-bank__empty {
    text-align: center;
    padding: 2rem 1.25rem;
    border-radius: 12px;
    border: 1px dashed var(--s360-border, #cbd5e1);
    background: var(--s360-surface-soft, #f8fafc);
}

.s360-media-bank__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.s360-media-bank__card {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
}

.s360-media-bank__thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--s360-surface-soft, #f1f5f9);
    border-bottom: 1px solid var(--s360-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.s360-media-bank__thumb--pdf {
    background: linear-gradient(180deg, #fef2f2 0%, #f8fafc 100%);
}

.s360-media-bank__thumb--video {
    background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
}

.s360-media-bank__thumb--audio {
    background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 100%);
}

.s360-media-bank__thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s360-media-bank__thumb-icon {
    color: var(--s360-slate-500, #64748b);
    opacity: 0.85;
}

.s360-media-bank__card-body {
    flex: 1 1 auto;
    padding: 0.85rem 1rem 0.5rem;
    min-width: 0;
}

.s360-media-bank__card-title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--s360-text, #0f172a);
    overflow-wrap: anywhere;
}

.s360-media-bank__card-meta,
.s360-media-bank__card-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.s360-media-bank__card-by {
    font-size: 0.78rem;
    line-height: 1.35;
}

.s360-media-bank__card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    align-items: center;
    padding: 0.65rem 1rem 1rem;
    border-top: 1px solid var(--s360-border, #e2e8f0);
    margin-top: auto;
}

.s360-media-bank__card-actions form {
    display: inline;
    margin: 0;
}

.s360-media-bank__pager {
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    .s360-media-bank__form-grid {
        grid-template-columns: 1fr;
    }

    .s360-media-bank__form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-media-bank__form-actions .btn-primary {
        width: 100%;
    }

    .s360-media-bank__hero-row {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-media-bank__stat {
        flex-direction: row;
        gap: 0.5rem 0.75rem;
        justify-content: flex-start;
        align-items: baseline;
    }

    .s360-media-bank__stat-l {
        margin-top: 0;
    }
}

/* ── Projecten (portfolio index) ─────────────────────────────────── */
.s360-projects-page__hero.surface-panel {
    margin-bottom: 0;
}

.s360-projects-page__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-projects-page__hero .section-header {
    align-items: flex-start;
}

@media (min-width: 640px) {
    .s360-projects-page__hero .section-header {
        align-items: center;
    }
}

.s360-projects-page__hero .section-header__main {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 62ch;
}

.s360-projects-page__kpis.surface-panel {
    padding-block: clamp(16px, 2.2vw, 24px);
}

.s360-projects-page__kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s360-form-stack-gap, 18px);
    margin: 0;
}

.s360-projects-page__kpi {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 5.5rem;
    padding: 1.15rem 1.35rem;
    border-radius: 12px;
    border: 1px solid var(--s360-border, #e2e8f0);
    background: var(--s360-surface-soft, #f8fafc);
    box-sizing: border-box;
}

.s360-projects-page__kpi--warn .s360-projects-page__kpi-value {
    color: #b42318;
}

.s360-projects-page__kpi-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.s360-projects-page__kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.02em;
}

.s360-projects-page__tabs.step-pills {
    margin: 0 0 1.25rem;
    padding: 0 0 1rem;
    gap: 10px 12px;
    border-bottom: 1px solid var(--s360-border, #e2e8f0);
}

.s360-projects-page__tabs a.step-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.25;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.s360-projects-page__tabs a.step-pill:hover {
    border-color: #818cf8;
    color: #312e81;
    background: #f5f7ff;
}

.s360-projects-page__tabs a.step-pill.is-current {
    border-color: #4f46e5;
    color: #312e81;
    background: #eef2ff;
}

.s360-projects-page__content .s360-projects-page__h2 {
    margin-top: 0;
}

.s360-projects-page__content.surface-panel {
    margin-bottom: 0;
}

.s360-projects-page__h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.02em;
}

.s360-projects-page__table-wrap {
    margin-inline: 0;
}

.s360-projects-page__content .s360-projects-page__table {
    margin-bottom: 0;
}

.s360-projects-page__content .s360-projects-page__table th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted, #64748b);
    white-space: nowrap;
}

.s360-projects-page__content .s360-projects-page__table th:first-child,
.s360-projects-page__content .s360-projects-page__table td:first-child {
    padding-left: 0;
}

.s360-projects-page__content .s360-projects-page__table th.s360-col-table-actions,
.s360-projects-page__content .s360-projects-page__table td.s360-col-table-actions {
    padding-right: 0;
}

.s360-projects-page__content:not(:has(.s360-projects-page__h2)) .s360-projects-page__table-wrap {
    margin-top: 0;
}

@media (max-width: 640px) {
    .s360-projects-page__kpi-grid {
        grid-template-columns: 1fr;
    }

    .s360-projects-page__hero .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-projects-page__hero .row-actions {
        width: 100%;
    }

    .s360-projects-page__hero .row-actions .btn-primary,
    .s360-projects-page__hero .row-actions .btn-secondary {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ── Project detail (show) ─────────────────────────────────── */
.s360-projects-show.s360-stakeholders-layout {
    display: flex;
    flex-direction: column;
    gap: var(--s360-section-gap, 1.25rem);
}

.s360-projects-show .surface-panel {
    margin-bottom: 0;
}

.s360-projects-show__back {
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.s360-projects-show__back:hover {
    text-decoration: underline;
}

.s360-projects-show__inline-form {
    display: inline;
    margin: 0;
}

.s360-projects-show__meta-grid.pp-meta-grid {
    margin: 0;
}

.s360-projects-show__view-tabs.step-pills {
    flex-shrink: 0;
    margin: 0;
}

.s360-projects-show__tasks .section-header {
    align-items: flex-start;
    gap: 1rem;
}

@media (min-width: 640px) {
    .s360-projects-show__tasks .section-header {
        align-items: center;
    }
}

.s360-projects-show__table-wrap {
    margin-inline: 0;
    overflow-x: auto;
}

.s360-projects-show__tasks-table {
    margin-bottom: 0;
    width: 100%;
}

.s360-projects-show__tasks-table th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted, #64748b);
    white-space: nowrap;
    vertical-align: middle;
}

.s360-projects-show__tasks-table td {
    vertical-align: middle;
}

.s360-projects-show__tasks-table th:first-child,
.s360-projects-show__tasks-table td:first-child {
    padding-left: 0;
}

.s360-projects-show__tasks-table th.s360-col-table-actions,
.s360-projects-show__tasks-table td.s360-col-table-actions {
    padding-right: 0;
}

.s360-projects-show__col-drag {
    width: 2rem;
}

.s360-projects-show__col-task {
    width: 28%;
    min-width: 9rem;
}

.s360-projects-show__col-type {
    width: 12%;
    min-width: 6.5rem;
}

.s360-projects-show__col-deadline {
    width: 11%;
    min-width: 6.5rem;
    white-space: nowrap;
}

.s360-projects-show__col-assignee {
    width: 18%;
    min-width: 7rem;
}

.s360-projects-show__col-status {
    width: 8%;
    min-width: 4.5rem;
    white-space: nowrap;
}

.s360-projects-show__col-actions {
    width: 1%;
}

.s360-projects-show__tasks-table .s360-table-icon-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
}

.s360-projects-show__tasks-table .s360-table-icon-actions form {
    display: inline-flex;
    margin: 0;
    flex-shrink: 0;
}

.s360-projects-show__tasks-table .s360-table-icon-actions .btn-xs.is-current {
    border-color: var(--s360-primary, #2f6fed);
    background: #eef2ff;
    color: var(--s360-primary, #2f6fed);
}

.s360-projects-show__task-link {
    font-weight: 600;
    color: var(--s360-primary, #2f6fed);
    text-decoration: none;
}

.s360-projects-show__task-link:hover {
    text-decoration: underline;
}

.s360-projects-show__task-row--editing {
    background: #f8fafc;
}

.s360-projects-show__task-row--editing .s360-projects-show__task-link {
    color: var(--s360-text, #0f172a);
    text-decoration: none;
}

.s360-projects-show__task-edit-panel {
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--s360-border, #e2e8f0);
    border-left: 3px solid var(--s360-primary, #2f6fed);
    border-radius: 12px;
    background: #f8fafc;
}

.s360-projects-show__task-edit-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
}

.s360-projects-show__task-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s360-form-stack-gap, 1rem);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.s360-projects-show__tasks .s360-projects-show__task-edit-panel .s360-projects-show__task-form {
    margin-top: 1rem;
}

.s360-projects-show__task-form .field input,
.s360-projects-show__task-form .field select,
.s360-projects-show__task-form .field textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.s360-projects-show__task-grid {
    gap: var(--s360-form-stack-gap, 1rem);
    width: 100%;
}

.s360-projects-show__task-edit-actions.form-actions-bar,
.s360-projects-show__task-create-actions.form-actions-bar {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--s360-border, #e2e8f0);
    justify-content: flex-start;
    gap: 8px;
}

.s360-projects-show__task-create-form {
    margin-top: 0.5rem;
}

.s360-projects-show__new-task .s360-details-summary {
    cursor: pointer;
    font-weight: 600;
}

.s360-projects-show__doc-form {
    max-width: 28rem;
}

.s360-projects-show__doc-form .form-actions-bar.s360-projects-show__doc-actions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    justify-content: flex-start;
}

.s360-projects-show__doc-form .form-actions-bar .btn-primary {
    width: auto;
}

.s360-projects-show__empty {
    padding: 1.25rem 0;
}

@media (max-width: 900px) {
    .s360-projects-show__tasks-table .s360-table-icon-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .s360-projects-show__col-task,
    .s360-projects-show__col-type,
    .s360-projects-show__col-deadline,
    .s360-projects-show__col-assignee,
    .s360-projects-show__col-status {
        width: auto;
    }
}

@media (max-width: 639px) {
    .s360-projects-show__tasks-table th.s360-col-table-actions,
    .s360-projects-show__tasks-table td.s360-col-table-actions {
        text-align: left;
    }

    .s360-projects-show__tasks-table .s360-table-icon-actions {
        justify-content: flex-start;
    }

    .s360-projects-show__task-edit-panel {
        padding: 1rem;
    }

    .s360-projects-show__task-grid.grid-two {
        grid-template-columns: 1fr;
    }
}

/* ── Stakeholders hub (page-narrow + surface-panel) ───────── */
.s360-stakeholders-hub__hero.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholders-hub__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-stakeholders-hub__hero .section-header {
    align-items: flex-start;
}

@media (min-width: 640px) {
    .s360-stakeholders-hub__hero .section-header {
        align-items: center;
    }
}

.s360-stakeholders-hub__hero .section-header__main {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 62ch;
}

.s360-stakeholders-hub__h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.015em;
}

.s360-stakeholders-hub__more {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--s360-primary);
    text-decoration: none;
    white-space: nowrap;
}

.s360-stakeholders-hub__more:hover {
    text-decoration: underline;
}

.s360-stakeholders-hub .s360-hub-recent-grid {
    gap: var(--s360-form-stack-gap, 18px);
}

.s360-stakeholders-hub .s360-sh-card__avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--s360-primary);
    font-size: 0.75rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.s360-stakeholders-hub__empty {
    padding: 1.5rem 1rem;
    border-radius: 12px;
    border: 1px dashed var(--s360-border);
    text-align: center;
    background: #f8faff;
}

.s360-stakeholders-hub__destinations.surface-panel {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.s360-stakeholders-hub__destinations-title {
    margin: 0;
    padding: var(--s360-panel-padding-y) var(--s360-panel-padding-x) 1rem;
}

.s360-stakeholders-hub__dest-list .s360-hub-dest:first-child {
    border-top: 1px solid var(--s360-border);
}

@media (max-width: 639px) {
    .s360-stakeholders-hub__hero .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-stakeholders-hub__hero .row-actions {
        width: 100%;
    }

    .s360-stakeholders-hub__hero .row-actions .btn-primary,
    .s360-stakeholders-hub__hero .row-actions .btn-secondary {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ── Stakeholder detail (show) ─────────────────────────────── */
.s360-stakeholder-show__steps.step-pills {
    margin: 0;
    padding: 0;
    gap: 10px 12px;
}

.s360-stakeholder-show__hero.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-show__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-stakeholder-show__hero .section-header {
    align-items: flex-start;
}

@media (min-width: 640px) {
    .s360-stakeholder-show__hero .section-header {
        align-items: center;
    }
}

.s360-stakeholder-show__hero .section-header__main {
    flex: 1 1 16rem;
    min-width: 0;
}

.s360-stakeholder-show__identity {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.s360-stakeholder-show__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background: #eef2ff;
    color: var(--s360-primary);
    font-size: 0.85rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.s360-stakeholder-show__identity-text {
    min-width: 0;
    flex: 1 1 auto;
}

.s360-stakeholder-show__meta a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.s360-stakeholder-show__delete-form {
    display: inline;
    margin: 0;
}

.s360-stakeholder-show__h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.015em;
}

.s360-stakeholder-show__scores.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-show__table-wrap {
    margin-inline: 0;
    overflow-x: auto;
}

.s360-stakeholder-show__table {
    margin-bottom: 0;
}

.s360-stakeholder-show__table th {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted);
}

.s360-stakeholder-show__table th:first-child,
.s360-stakeholder-show__table td:first-child {
    padding-left: 0;
}

.s360-stakeholder-show__table th.s360-col-table-actions,
.s360-stakeholder-show__table td.s360-col-table-actions {
    padding-right: 0;
    text-align: right;
}

.s360-stakeholder-show__table td.s360-col-table-actions .row-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.s360-stakeholder-show__weight-row {
    justify-content: flex-start;
    gap: 6px;
    flex-wrap: wrap;
}

.s360-stakeholder-show__weight-hint {
    font-size: 0.78rem;
}

.s360-stakeholder-show__empty {
    padding: 1.25rem 0;
    text-align: center;
}

@media (max-width: 639px) {
    .s360-stakeholder-show__hero .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-stakeholder-show__hero .row-actions {
        width: 100%;
    }

    .s360-stakeholder-show__hero .row-actions .btn-primary,
    .s360-stakeholder-show__hero .row-actions .btn-secondary,
    .s360-stakeholder-show__hero .row-actions .btn-danger {
        flex: 1 1 auto;
        justify-content: center;
    }

    .s360-stakeholder-show__table th.s360-col-table-actions,
    .s360-stakeholder-show__table td.s360-col-table-actions {
        text-align: left;
    }

    .s360-stakeholder-show__table td.s360-col-table-actions .row-actions {
        justify-content: flex-start;
    }
}

/* ── Stakeholder form (create / edit) ──────────────────────── */
.s360-stakeholder-form__steps.step-pills {
    margin: 0;
    padding: 0;
    gap: 10px 12px;
}

.s360-stakeholder-form__hero.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-form__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.s360-stakeholder-form__hero .section-header {
    align-items: flex-start;
}

@media (min-width: 640px) {
    .s360-stakeholder-form__hero .section-header {
        align-items: center;
    }
}

.s360-stakeholder-form__hero .section-header__main {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 62ch;
}

.s360-stakeholder-form__lead-row {
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.s360-stakeholder-form__import-form {
    display: inline;
    margin: 0;
}

.s360-stakeholder-form__h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s360-text, #0f172a);
    letter-spacing: -0.015em;
}

.s360-stakeholder-form__grid {
    gap: var(--s360-form-stack-gap, 18px);
}

.s360-stakeholder-form__field-hint {
    font-size: 0.82rem;
    line-height: 1.45;
}

.s360-stakeholder-form__toc-field {
    max-width: 32rem;
}

.s360-stakeholder-form__scores-panel.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-form__table-wrap {
    margin-inline: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.s360-stakeholder-form__scores-table {
    margin-bottom: 0;
    min-width: 44rem;
}

.s360-stakeholder-form__scores-table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--s360-muted);
    white-space: nowrap;
}

.s360-stakeholder-form__scores-table th:first-child,
.s360-stakeholder-form__scores-table td:first-child,
.s360-stakeholder-form__scores-table th[scope="row"] {
    padding-left: 0;
}

.s360-stakeholder-form__scores-table th:last-child,
.s360-stakeholder-form__scores-table td:last-child {
    padding-right: 0;
}

.s360-stakeholder-form__scores-table th[scope="row"] {
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--s360-text);
    white-space: normal;
    min-width: 8rem;
}

.s360-stakeholder-form__score-input {
    width: 3.25rem;
    min-width: 3.25rem;
    padding: 6px 8px;
    text-align: center;
}

.s360-stakeholder-form__score-select {
    min-width: 4rem;
    padding: 6px 8px;
}

.s360-stakeholder-form__col-date {
    width: 1%;
    white-space: nowrap;
}

.s360-stakeholder-form__scores-table th.s360-stakeholder-form__col-date {
    text-align: left;
}

.s360-stakeholder-form__score-date {
    width: 100%;
    max-width: 10.5rem;
    min-width: 9.5rem;
    padding: 6px 8px;
    font-size: 0.88rem;
}

.s360-stakeholder-form__actions.form-actions-bar {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* ── Stakeholders module: gedeelde layout (hub, show, form) ── */
.s360-stakeholders-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
}

.s360-stakeholders-layout > .surface-panel,
.s360-stakeholders-layout > header.surface-panel,
.s360-stakeholders-layout > section.surface-panel,
.s360-stakeholders-layout > nav.step-pills {
    margin-bottom: 0;
}

.s360-stakeholders-layout > nav.step-pills {
    padding: 0 0 1rem;
    gap: 10px 12px;
    border-bottom: 1px solid var(--s360-border);
}

.s360-stakeholders-layout .section-header > .row-actions {
    margin-top: 0;
}

.s360-stakeholders-layout__section-head {
    margin-bottom: 1rem;
    width: 100%;
    align-items: center;
}

.s360-stakeholders-layout__section-head > h2 {
    margin: 0;
}

.s360-stakeholders-layout .s360-stakeholders-hub__destinations .s360-hub-dest {
    padding: 1rem var(--s360-panel-padding-x);
}

.s360-stakeholders-layout .s360-stakeholder-show__table-wrap,
.s360-stakeholders-layout .s360-stakeholder-form__table-wrap {
    width: 100%;
    max-width: 100%;
}

.s360-stakeholders-layout .s360-stakeholder-form__form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
}

.s360-stakeholders-layout .s360-stakeholder-form__form > .surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-form__actions-panel.surface-panel {
    margin-bottom: 0;
}

.s360-stakeholder-form__actions-panel .form-actions-bar {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

@media (max-width: 639px) {
    .s360-stakeholder-form__hero .section-header,
    .s360-stakeholder-show__hero .section-header,
    .s360-stakeholders-hub__hero .section-header {
        flex-direction: column;
        align-items: stretch;
    }

    .s360-stakeholder-form__hero .row-actions,
    .s360-stakeholder-show__hero .row-actions,
    .s360-stakeholders-hub__hero .row-actions {
        width: 100%;
    }

    .s360-stakeholder-form__hero .row-actions .btn-secondary,
    .s360-stakeholder-show__hero .row-actions .btn-primary,
    .s360-stakeholder-show__hero .row-actions .btn-secondary,
    .s360-stakeholder-show__hero .row-actions .btn-danger,
    .s360-stakeholders-hub__hero .row-actions .btn-primary,
    .s360-stakeholders-hub__hero .row-actions .btn-secondary {
        flex: 1 1 auto;
        justify-content: center;
    }

    .s360-stakeholders-layout__section-head {
        align-items: flex-start;
    }
}