@font-face { font-family: "Mark"; src: url("markpro-light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-book.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-heavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-lightitalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Mark"; src: url("markpro-bookitalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
    --ink: #16160f;
    --muted: #6e6c61;
    --line: #e8e6de;
    --paper: #f4f3ee;
    --white: #ffffff;
    --green: #3bb4ff;
    --green-dark: #16160f;
    --coral: #f36f45;
    --violet: #3bb4ff;
    --mint: #4cb16e;
    --blue: #3bb4ff;
    --shadow: 0 10px 28px rgba(22, 22, 15, .055);
    --font-ui: "Mark", "Segoe UI", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea, select { font: inherit; }
button { cursor: pointer; }

.app-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    min-height: 58px;
    padding: 9px max(20px, calc((100vw - 1500px) / 2));
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(14px);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--ink);
    color: var(--green);
    font-size: 20px;
    font-weight: 900;
}

.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: 0; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 12px; }

.project-switcher { position: relative; }
.project-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 260px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
}
.project-button:hover { border-color: #c7d0c9; }
.project-button-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-button svg { flex: 0 0 auto; color: var(--muted); }

.actions-menu { position: relative; display: inline-flex; }

.header-popover {
    position: absolute;
    top: calc(100% + 8px);
    z-index: 40;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.header-popover[hidden] { display: none; }
.project-popover { left: 0; }
.menu-popover { right: 0; min-width: 210px; }

.popover-field { display: block; margin-bottom: 8px; padding: 0 4px; }
.popover-field span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.popover-field input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
}
.popover-field input:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.popover-label { margin: 6px 4px 4px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

.project-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow: auto; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
}
.menu-item:hover { background: var(--paper); }
.menu-item svg { flex: 0 0 auto; color: var(--muted); }
.menu-item-accent { margin-top: 4px; color: var(--green-dark); font-weight: 700; }

.project-list-item { display: flex; align-items: center; border-radius: 9px; }
.project-list-item:hover { background: var(--paper); }
.project-list-item.is-current { background: var(--blue-soft); }
.project-list-pick {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 11px;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.project-list-item.is-current .project-list-pick { color: var(--green-dark); font-weight: 700; }
.project-list-delete {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 4px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    opacity: 0;
}
.project-list-item:hover .project-list-delete, .project-list-delete:focus-visible { opacity: 1; }
.project-list-delete:hover { background: #fdeeea; color: #b4402a; }
.icon-button.compact { width: 34px; height: 34px; align-self: center; font-size: 20px; }

.header-actions, .toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.header-actions { flex-wrap: wrap; margin-left: auto; }
#pdfButton svg { display: block; }
.header-save-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.header-save-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #53b98e;
}
.header-save-status[data-status="saving"] > span { background: #e0a83e; }
.header-save-status[data-status="error"] { color: #b4402a; }
.header-save-status[data-status="error"] > span { background: #d2492f; }
.header-save-status .save-label { font-size: inherit; }

main {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 28px 0 60px;
}

.intro-card {
    display: block;
    margin-bottom: 22px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    color: var(--ink);
}

.eyebrow, .panel-kicker {
    color: #66806f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.intro-card .eyebrow { color: var(--green); }
.intro-copy h1 { max-width: 620px; margin: 10px 0 12px; font-size: 42px; line-height: 1.08; letter-spacing: 0; }
.intro-copy p { max-width: 590px; margin: 0; color: #c8d5cd; font-size: 15px; line-height: 1.6; }

.crawl-form { position: relative; }

.crawl-form label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.url-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 5px 5px 5px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.url-icon { display: inline-flex; color: var(--muted); }
.url-icon svg { display: block; }
.url-row input { min-width: 0; padding: 11px; border: 0; outline: 0; background: transparent; }
.form-meta { display: flex; justify-content: space-between; gap: 20px; margin-top: 10px; color: var(--muted); font-size: 12px; }

.crawl-notice { margin-top: 14px; padding: 12px 14px; border: 1px solid #f0d9a8; border-radius: 12px; background: #fdf6e7; color: #6b531a; font-size: 13px; }
.crawl-notice-head { display: flex; flex-direction: column; gap: 2px; }
.crawl-notice-head strong { color: #5a4413; font-size: 13px; }
.crawl-notice-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; max-height: 200px; overflow: auto; }
.crawl-notice-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.crawl-notice-list code { color: #5a4413; font-size: 12px; word-break: break-all; }
.crawl-notice-reason { flex: 0 0 auto; color: #9a7a22; font-weight: 700; white-space: nowrap; }
.crawl-notice-more { color: #9a7a22; }

.crawl-stop { margin-top: 10px; }
.crawl-stop[hidden] { display: none; }

.crawl-rate-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.crawl-rate-row label { color: var(--muted); font-size: 12px; font-weight: 700; }
.crawl-rate-row select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; }
.crawl-rate-hint { color: var(--muted); font-size: 12px; font-weight: 400; }

.crawl-sitemap-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.crawl-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.crawl-check input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.crawl-check code { padding: 1px 5px; border-radius: 5px; background: rgba(25, 33, 29, .07); font-size: 12px; }
.sitemap-input { flex: 1 1 220px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); color: var(--ink); font-size: 13px; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: transform .15s ease, background .15s ease, border .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button.primary { background: var(--green-dark); color: var(--white); }
.button.secondary { border-color: #d4e99f; background: #eff9d5; color: #30471b; }
.button.ghost { border-color: var(--line); background: var(--white); color: var(--ink); }
.button.dark { background: var(--ink); color: var(--white); }
.button.danger { border-color: #ffd3cc; background: #fff2f0; color: #a73b29; }
.button:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.link-button { padding: 0; border: 0; background: none; color: var(--green-dark); font-size: inherit; font-weight: 700; text-decoration: underline; }

.spinner { display: none; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
.loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 18px 0 32px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { font-size: 20px; letter-spacing: 0; }
.stat-card div span { margin-top: 2px; color: var(--muted); font-size: 12px; }
.stat-card .stat-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: #26332c; font-weight: 900; line-height: 0; }
.stat-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.stat-icon.violet svg { fill: currentColor; stroke: none; }
.stat-icon.coral { background: #ffe1da; }
.stat-icon.violet { background: #e9e1ff; }
.stat-icon.mint { background: #d8f5ea; }
.stat-icon.blue { background: #deedff; }
.stat-card > div { flex: 1 1 auto; min-width: 0; }
.stat-progress { margin-top: 8px; height: 5px; border-radius: 999px; background: #e7ece8; overflow: hidden; }
.stat-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #4fb088); transition: width .45s ease; }

.workspace-toolbar, .content-plan-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}
h2 { margin: 6px 0 0; font-size: 24px; letter-spacing: 0; }

.diagram-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.diagram-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.old-panel { border-top: 4px solid var(--coral); }
.new-panel { border-top: 4px solid var(--violet); }

.panel-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px 16px;
}
.panel-header h3 { margin: 6px 0 4px; font-size: 21px; letter-spacing: 0; }
.panel-header p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.count-badge { align-self: start; white-space: nowrap; padding: 6px 9px; border-radius: 99px; background: var(--paper); color: var(--muted); font-size: 12px; font-weight: 700; }

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 0 24px 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}
.legend > span { display: inline-flex; align-items: center; gap: 5px; }
.legend .status-icon { width: 21px; height: 21px; }
.content-plan-legend { padding: 16px 0 0; border-top: 1px solid var(--line); }

.tree-canvas {
    min-height: 480px;
    max-height: 680px;
    overflow: auto;
    padding: 14px 24px 28px;
    background-image: radial-gradient(#e4e9e5 1px, transparent 1px);
    background-size: 18px 18px;
    border-top: 1px solid #edf0ed;
}
.panel-footer-actions { display: flex; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--line); background: #fafbfa; }

.tree-list, .tree-list ul { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tree-list ul { margin: 8px 0 0 17px; padding-left: 18px; border-left: 1px solid #cad3cc; }
.tree-list ul > li:not(.drop-slot)::before { position: absolute; width: 18px; height: 1px; margin-top: 24px; margin-left: -18px; background: #cad3cc; content: ""; }

.page-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 7px 8px;
    border: 1px solid #dbe2dc;
    border-left: 4px solid #cbd2cd;
    border-radius: 11px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 4px 12px rgba(25,33,29,.05);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.old-panel .page-card { grid-template-columns: auto minmax(0, 1fr) repeat(4, auto); }
.page-card:hover { border-color: #aebdb2; background: #fff; box-shadow: 0 6px 16px rgba(25,33,29,.09); }
.page-card.selected { outline: 2px solid var(--green-dark); outline-offset: 2px; }
.page-card.related { background: var(--blue-soft); border-color: var(--blue-line); }
.page-card.drag-over-child { border-color: #8062db; background: #f2eeff; box-shadow: 0 0 2px 2px rgba(128,98,219,.16); }
.page-card.status-keep { border-left-color: #53b98e; }
.page-card.status-rewrite { border-left-color: #e0a53c; }
.page-card.status-drop { border-left-color: #de6a57; opacity: .72; }
.page-card.new-card { border-left-color: var(--violet); }
.page-card.content-kind-custom_post_type {
    background: linear-gradient(90deg, rgba(102, 88, 194, .075), rgba(255,255,255,.97) 34%);
    box-shadow: inset 0 0 0 1px rgba(102, 88, 194, .08), 0 4px 12px rgba(25,33,29,.05);
}
.page-card.content-kind-custom_post_type:hover {
    border-color: #a99cdf;
    background: linear-gradient(90deg, rgba(102, 88, 194, .11), #fff 38%);
    box-shadow: inset 0 0 0 1px rgba(102, 88, 194, .12), 0 6px 16px rgba(25,33,29,.09);
}
.page-card.dragging { opacity: .35; }

.card-button {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}
.card-button strong, .card-button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-button strong { font-size: 13px; line-height: 1.25; }
.card-button small { min-width: 0; color: var(--muted); font-size: 11px; line-height: 1.25; }
.card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}
.content-kind-label {
    flex: 0 0 auto;
    padding: 2px 5px;
    border-radius: 5px;
    background: #edf1ed;
    color: #5f6d64;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.content-kind-custom_post_type .content-kind-label {
    background: #e7e1ff;
    color: #59469f;
}
.template-chip {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: 5px;
    background: #e3f5ec;
    color: #1f7a57;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.content-kind-custom_post_type .page-symbol {
    background: #eeeaff;
    color: #6754af;
}
.page-symbol { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #f0f3f0; color: #68756d; line-height: 1; }
.page-symbol svg {
    display: block;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}
.page-symbol.spark svg { fill: currentColor; stroke: none; }
.drag-handle {
    display: grid;
    grid-column: -2 / -1;
    width: 24px;
    height: 28px;
    cursor: grab;
    place-items: center;
    border-radius: 7px;
}
.drag-handle::before {
    width: 10px;
    height: 16px;
    background-image: radial-gradient(circle, #9da8a1 1.2px, transparent 1.4px);
    background-position: 0 0;
    background-size: 5px 5px;
    content: "";
}
.drag-handle:active { cursor: grabbing; }
.dummy-label, .mapping-count { padding: 4px 6px; border-radius: 6px; background: #f1f3f1; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.status-icon {
    display: inline-grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid;
    border-radius: 8px;
    place-items: center;
}
.status-icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.status-icon-undecided { border-color: #d5dbd7; background: #edf0ee; color: #657269; }
.status-icon-keep { border-color: #b7e2cf; background: #e5f7ef; color: #27835e; }
.status-icon-rewrite { border-color: #f0d293; background: #fff4dc; color: #a5680b; }
.status-icon-drop { border-color: #efc2ba; background: #fff0ed; color: #b84c3b; }
.status-icon-overview { width: 31px; height: 31px; border-radius: 9px; }
button.status-icon { padding: 0; font: inherit; cursor: pointer; appearance: none; transition: filter .15s ease, box-shadow .15s ease; }
button.status-icon:hover { filter: brightness(.96); }
button.status-icon:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.status-popover { position: fixed; z-index: 65; display: grid; gap: 2px; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 16px 40px rgba(25,33,29,.18); }
.status-option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.status-option:hover { background: var(--paper); }
.status-option.is-current { background: var(--blue-soft); }
.status-option .status-icon { width: 26px; height: 26px; }
.open-original-button {
    display: grid;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #dbe2dc;
    border-radius: 7px;
    background: #fff;
    color: #607168;
    place-items: center;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.open-original-button:hover { border-color: #92a69a; background: #f1f5f2; color: var(--green-dark); }
.open-original-button svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.collapse-toggle {
    position: relative;
    display: grid;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: #f1f3f1;
    color: var(--muted);
    place-items: center;
}
.collapse-toggle .chevron {
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.7px solid currentColor;
    border-bottom: 1.7px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transform-origin: 50% 50%;
    transition: transform .16s ease;
}
.is-collapsed > ul { display: none; }
.is-collapsed > .page-card .collapse-toggle .chevron { transform: translateX(-1px) rotate(-45deg); }

.drop-slot {
    position: relative;
    display: block;
    height: 6px;
    margin: -3px 0;
    list-style: none;
    transition: height .18s cubic-bezier(.22, .8, .35, 1), margin .18s cubic-bezier(.22, .8, .35, 1);
}
.drop-slot::after {
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 2px;
    border-radius: 99px;
    background: #8062db;
    content: "";
    opacity: 0;
    transform: translateY(-50%) scaleX(.92);
    transition: opacity .14s ease, transform .14s ease;
}
.tree-canvas.is-dragging .drop-slot { height: 14px; margin: -4px 0; }
.tree-canvas.is-settling { pointer-events: none; }
.drop-slot.drag-over::after { opacity: 1; transform: translateY(-50%) scaleX(1); }
.drop-slot.drag-over { height: 22px; }

.empty-state { display: grid; min-height: 380px; place-content: center; padding: 30px; color: var(--muted); text-align: center; }
.empty-state span { color: #91a097; font-size: 40px; }
.empty-state .page-symbol { width: 42px; height: 42px; margin: 0 auto; }
.empty-state .page-symbol svg { width: 20px; height: 20px; }
.empty-state h4 { margin: 10px 0 4px; color: var(--ink); font-size: 16px; }
.empty-state p { max-width: 280px; margin: 0; font-size: 12px; line-height: 1.55; }

.content-plan {
    margin-top: 30px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--white);
}
.plan-filter { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--paper); }
.plan-filter button { padding: 6px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-filter button.active { background: var(--white); color: var(--ink); box-shadow: 0 2px 7px rgba(25,33,29,.08); }
.mapping-list { display: grid; gap: 7px; margin-top: 18px; }
.mapping-row {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto minmax(180px, 1.3fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e7ebe8;
    border-left: 4px solid #cbd2cd;
    border-radius: 11px;
    background: #fbfcfb;
}
.mapping-row.status-keep { border-left-color: #53b98e; }
.mapping-row.status-rewrite { border-left-color: #e0a53c; }
.mapping-row.status-drop { border-left-color: #de6a57; }
.mapping-source strong, .mapping-source small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapping-source strong { font-size: 13px; }
.mapping-source small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.mapping-arrow { color: #a2ada5; font-weight: 900; }
.mapping-targets { display: flex; flex-wrap: wrap; gap: 5px; }
.target-pill { padding: 5px 7px; border-radius: 7px; background: #eee9ff; color: #553c91; font-size: 11px; font-weight: 700; }
.target-pill.empty { background: #f1f3f1; color: var(--muted); font-weight: 600; }
.target-pill small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: #6f5aa8; }
.mini-edit { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); font-size: 11px; font-weight: 700; }

.inspector { position: fixed; z-index: 40; inset: 0; pointer-events: none; visibility: hidden; }
.inspector.open { pointer-events: auto; visibility: visible; }
.inspector-backdrop { position: absolute; z-index: 0; inset: 0; background: rgba(15,24,19,.35); opacity: 0; transition: opacity .2s ease; }
.inspector.open .inspector-backdrop { opacity: 1; }
.inspector-sheet { position: absolute; z-index: 3; top: 0; right: 0; width: min(440px, 100%); height: 100%; overflow: auto; padding: 24px; background: var(--white); box-shadow: -18px 0 50px rgba(25,33,29,.16); transform: translateX(100%); transition: transform .22s ease; }
.inspector.open .inspector-sheet { transform: translateX(0); }
.inspector-sheet header { display: flex; align-items: start; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.inspector-sheet h2 { font-size: 21px; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); font-size: 21px; }
.icon-button:disabled { opacity: .4; cursor: not-allowed; }
#undoButton svg, #redoButton svg { display: block; }
#undoButton:not(:disabled):hover, #redoButton:not(:disabled):hover { color: var(--ink); border-color: var(--muted); }
.field { display: grid; gap: 6px; margin-top: 17px; }
.field > span, .field legend { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.field input, .field textarea, .field select { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: white; color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.field textarea { min-height: 90px; resize: vertical; }
.template-add { display: flex; gap: 6px; align-items: stretch; }
.template-add[hidden] { display: none; }
.template-add input { width: auto; flex: 1 1 auto; min-width: 0; }
.template-add .button { flex: 0 0 auto; min-height: 0; }
.toggle-field { display: flex; align-items: flex-start; gap: 11px; margin-top: 17px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); cursor: pointer; }
.toggle-field input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; cursor: pointer; }
.toggle-field span { display: grid; gap: 2px; }
.toggle-field strong { font-size: 13px; font-weight: 700; }
.toggle-field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.cpt-name-field { display: none; }
.cpt-name-field.visible { display: grid; }
.field-help { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.inspector-actions { display: flex; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.inspector-actions .button { flex: 1; }
.autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    padding: 8px 10px;
    border-radius: 9px;
    background: #f5f7f5;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}
.autosave-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ba8a0;
}
.autosave-status.saving .autosave-dot { background: #d99b26; }
.autosave-status.saved .autosave-dot { background: #53b98e; }
.target-search-wrap {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.target-search-wrap:focus-within { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.target-search-wrap .target-search {
    min-width: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
.target-search-wrap .target-search:focus { border: 0; box-shadow: none; }
.target-search-icon {
    width: 13px;
    height: 13px;
    border: 1.7px solid #849188;
    border-radius: 50%;
}
.target-search-icon::after {
    display: block;
    width: 5px;
    height: 1.7px;
    margin: 9px 0 0 9px;
    border-radius: 99px;
    background: #849188;
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
}
.target-search-count {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.target-options { display: grid; gap: 6px; max-height: 270px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.target-option { display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; padding: 8px; border-radius: 7px; background: #f7f8f7; font-size: 12px; font-weight: 600; }
.target-option[hidden] { display: none; }
.target-option.selected-during-search { outline: 1px solid #b7a9e8; background: #f4f1ff; }
.target-option input { width: auto; }
.target-option small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }
.target-search-empty { display: none; margin: 8px; color: var(--muted); font-size: 12px; text-align: center; }
.target-search-empty.visible { display: block; }
.decision-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.decision-option input { position: absolute; width: auto; opacity: 0; }
.decision-option span { display: block; padding: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.decision-option input:checked + span { border-color: var(--blue-line); background: var(--blue-soft); color: #166da3; }

.toast { position: fixed; z-index: 60; bottom: 20px; left: 50%; padding: 10px 15px; border-radius: 9px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; opacity: 0; transform: translate(-50%, 16px); transition: .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.confirm-overlay { position: fixed; z-index: 70; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15,24,19,.42); }
.confirm-dialog { width: min(420px, 100%); padding: 22px; border-radius: 16px; background: var(--white); box-shadow: var(--shadow); }
.confirm-message { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

.view-switch { display: inline-flex; gap: 4px; margin: 0 0 22px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.view-tab { padding: 8px 18px; border: 0; border-radius: 9px; background: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.view-tab.active { background: var(--green-dark); color: var(--white); }

.menu-builder, .redirects-view, .info-view, .meeting-notes-view { display: none; }
body.view-menus .intro-card,
body.view-menus .workspace-toolbar,
body.view-menus .diagram-grid,
body.view-menus .content-plan,
body.view-redirects .intro-card,
body.view-redirects .workspace-toolbar,
body.view-redirects .diagram-grid,
body.view-redirects .content-plan,
body.view-info .intro-card,
body.view-info .workspace-toolbar,
body.view-info .diagram-grid,
body.view-info .content-plan,
body.view-meetings .intro-card,
body.view-meetings .workspace-toolbar,
body.view-meetings .diagram-grid,
body.view-meetings .content-plan { display: none; }
body.view-menus .menu-builder { display: block; }
body.view-redirects .redirects-view { display: block; }
body.view-info .info-view { display: block; }
body.view-meetings .meeting-notes-view { display: block; }

.menu-intro { max-width: 720px; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.menu-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 16px; }
.menu-tab { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
.menu-tab.active { border-color: var(--green-dark); background: var(--green-dark); color: var(--white); }
.menu-tab-add { padding: 8px 12px; border: 1px dashed #c2ccc4; border-radius: 10px; background: none; color: var(--muted); font-size: 13px; font-weight: 700; cursor: pointer; }
.menu-tab-add:hover { color: var(--ink); border-color: var(--muted); }

.menu-workspace { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.menu-add { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.menu-add h3 { margin: 0; font-size: 14px; }
.menu-page-search { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.menu-page-search:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.menu-page-list { display: grid; gap: 2px; max-height: 320px; overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 10px; }
.menu-page-option { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.menu-page-option[hidden] { display: none; }
.menu-page-option:hover { background: var(--paper); }
.menu-page-option input { margin-top: 2px; width: 15px; height: 15px; flex: 0 0 auto; }
.menu-page-option span { min-width: 0; font-size: 13px; font-weight: 600; }
.menu-page-option small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-structure-panel { border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; }
.menu-structure-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.menu-name-input { flex: 1; min-width: 160px; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 15px; font-weight: 800; }
.menu-name-input:focus { outline: none; border-color: var(--line); background: var(--white); }
.menu-item-count { color: var(--muted); font-size: 12px; font-weight: 700; }
.menu-structure { padding: 14px 16px 18px; min-height: 200px; }
.menu-structure.is-dragging .drop-slot { height: 14px; margin: -4px 0; }
.menu-structure.is-settling { pointer-events: none; }

.menu-item { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px; border: 1px solid #dbe2dc; border-left: 4px solid var(--violet); border-radius: 11px; background: rgba(255,255,255,.97); box-shadow: 0 4px 12px rgba(25,33,29,.05); }
.menu-item.is-custom { border-left-color: var(--blue); }
.menu-item.dragging { opacity: .5; }
.menu-item.drag-over-child { border-color: #8062db; background: #f2eeff; box-shadow: 0 0 2px 2px rgba(128,98,219,.16); }
.menu-item-main { flex: 1; min-width: 0; padding: 2px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.menu-item-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-item-type { flex: 0 0 auto; padding: 3px 7px; border-radius: 6px; background: #efe9ff; color: #6a52b8; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.menu-item.is-custom .menu-item-type { background: #e4eefb; color: #36639e; }
.menu-item-remove { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; color: #9b5549; font-size: 17px; line-height: 1; cursor: pointer; }
.menu-item-remove:hover { background: #fff0ed; border-color: #efc2ba; }
.menu-empty { padding: 26px; border: 1px dashed #cfd6d0; border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.5; }

.redirects-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.redirects-table { margin-top: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); overflow: hidden; }
.redirect-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid #eef1ed; }
.redirect-row:first-child { border-top: 0; }
.redirect-head { padding: 12px 16px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; background: #fbfcfa; }
.redirect-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: white; color: var(--ink); font-size: 13px; }
.redirect-input:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.redirect-arrow { color: #a2ada5; font-weight: 900; }

@media (max-width: 1000px) {
    .menu-workspace { grid-template-columns: 1fr; }
}

.tree-canvas.is-selecting { user-select: none; }
.tree-canvas.is-selecting .page-card { cursor: pointer; }
.tree-canvas.is-selecting .page-card:hover { border-color: var(--violet); box-shadow: 0 0 2px 2px rgba(182,156,255,.18); }
.page-card.bulk-selected { outline: 2px solid var(--violet); outline-offset: 2px; background: #f4f0ff; }

.bulk-bar { position: fixed; z-index: 50; bottom: 22px; left: 50%; display: flex; align-items: center; gap: 18px; padding: 9px 10px 9px 18px; border-radius: 14px; background: var(--ink); color: white; box-shadow: 0 18px 50px rgba(25,33,29,.32); opacity: 0; transform: translate(-50%, 24px); transition: .2s ease; pointer-events: none; }
.bulk-bar.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.bulk-count { font-size: 13px; font-weight: 700; white-space: nowrap; }
.bulk-bar-actions { display: flex; gap: 8px; }
.bulk-bar .button { min-height: 34px; padding: 7px 13px; }
.bulk-bar .button.ghost { border-color: transparent; background: rgba(255,255,255,.14); color: white; }
.bulk-bar .button.ghost:hover { background: rgba(255,255,255,.24); }
.bulk-bar .button.primary { background: var(--green); color: var(--green-dark); }
.bulk-bar .button:disabled { opacity: .45; }

.bulk-intro { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.bulk-field { padding: 13px 0; border-bottom: 1px solid var(--line); }
.bulk-field:last-of-type { border-bottom: 0; }
.bulk-toggle { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; cursor: pointer; }
.bulk-toggle input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
.bulk-control { display: grid; gap: 8px; margin-top: 10px; padding-left: 25px; }
.bulk-control[hidden] { display: none; }
.bulk-control > select, .bulk-control > textarea, .bulk-cpt input { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: white; color: var(--ink); }
.bulk-control > select:focus, .bulk-control > textarea:focus, .bulk-cpt input:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.bulk-control > textarea { min-height: 80px; resize: vertical; }
.bulk-cpt[hidden] { display: none; }
.bulk-targets { display: grid; gap: 3px; max-height: 210px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 9px; }
.bulk-target { display: flex; align-items: flex-start; gap: 9px; padding: 6px 7px; border-radius: 7px; cursor: pointer; }
.bulk-target:hover { background: var(--paper); }
.bulk-target input { width: 15px; height: 15px; margin-top: 2px; flex: 0 0 auto; }
.bulk-target small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }

@media (max-width: 1000px) {
    .app-header { padding: 9px 16px; }
    .diagram-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    main { width: min(100% - 24px, 1500px); padding-top: 12px; }
    .app-header { padding: 8px 12px; gap: 8px; }
    .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }
    .header-actions .user-chip { display: none; }
    .header-actions { gap: 6px; }
    .header-save-status { padding: 6px 4px; }
    .header-save-status .save-label { display: none; }
    .url-row { grid-template-columns: auto 1fr; }
    .url-row .button { grid-column: 1 / -1; margin-top: 6px; }
    .form-meta, .workspace-toolbar, .content-plan-header { align-items: stretch; flex-direction: column; }
    .stats-grid { gap: 7px; }
    .stat-card { padding: 11px; }
    .stat-icon { display: none; }
    .toolbar-actions { flex-wrap: wrap; justify-content: start; }
    .toolbar-actions .button { flex: 1; }
    .mapping-row { grid-template-columns: 1fr auto; }
    .mapping-arrow { display: none; }
    .mapping-targets { grid-column: 1 / -1; }
}

/* Ingelogde gebruiker in de header */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 200px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
}
.user-avatar {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
}
.user-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Loginscherm */
.login-body {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}
.login-card {
    width: min(440px, 100%);
    padding: 38px 36px 32px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.login-card .brand { margin-bottom: 26px; }
.login-card h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: 0; }
.login-lead { margin: 0 0 22px; color: var(--muted); }
.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
}
.login-hint { margin: 14px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.login-hint strong { color: var(--ink); }
.login-alert {
    margin: 0 0 20px;
    padding: 12px 14px;
    border: 1px solid #f3c4bb;
    border-radius: 12px;
    background: #fdeeea;
    color: #8a3a28;
    font-size: 14px;
}
.login-setup {
    margin-top: 6px;
    padding: 18px 20px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--paper);
}
.login-setup h2 { margin: 0 0 8px; font-size: 16px; }
.login-setup p { margin: 0 0 12px; color: var(--muted); font-size: 14px; }
.login-setup ol { margin: 0; padding-left: 20px; color: var(--ink); font-size: 14px; }
.login-setup li { margin-bottom: 7px; }
.login-setup code {
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(25, 33, 29, .07);
    font-size: 12.5px;
    word-break: break-all;
}

/* --- UI-verfijningen --- */

/* Zoeken + legenda boven de sitemap-bomen */
.panel-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 12px 24px;
    border-top: 1px solid #edf0ed;
}
.panel-search { position: relative; display: flex; align-items: center; flex: 1 1 220px; min-width: 0; }
.panel-search svg {
    position: absolute;
    left: 11px;
    width: 15px;
    height: 15px;
    color: var(--muted);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.tree-search {
    width: 100%;
    padding: 8px 12px 8px 33px;
    border: 1px solid var(--line);
    border-radius: 9px;
    outline: 0;
    background: var(--white);
    color: var(--ink);
    font-size: 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tree-search:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.tree-search::-webkit-search-cancel-button { cursor: pointer; }
.panel-export-button { flex: 0 0 auto; min-height: 35px; padding: 7px 11px; white-space: nowrap; }
.panel-export-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.legend.panel-legend { flex: 0 1 auto; padding: 0; border: 0; }

/* Zoekfilter-states in de boom */
.tree-canvas.is-searching .drop-slot { display: none; }
.tree-canvas.is-searching .is-collapsed > ul { display: block; }
li.search-hidden { display: none; }
.search-ancestor > .page-card { opacity: .5; }
.search-match > .page-card {
    border-color: var(--blue-line);
    box-shadow: 0 0 0 2px rgba(59, 180, 255, .36), 0 4px 12px rgba(25,33,29,.06);
}
.tree-no-results { margin: 22px 4px; color: var(--muted); font-size: 13px; text-align: center; }

/* Gegroepeerde werkbalkknoppen */
.toolbar-group { display: inline-flex; align-items: center; gap: 8px; }
.toolbar-divider { flex: 0 0 auto; width: 1px; height: 24px; background: var(--line); }

/* Inklapbare crawl-opties */
.crawl-advanced { margin-top: 12px; border-top: 1px solid var(--line); }
.crawl-advanced > summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.crawl-advanced > summary::-webkit-details-marker { display: none; }
.crawl-advanced > summary::before {
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .16s ease;
    content: "";
}
.crawl-advanced[open] > summary::before { transform: rotate(45deg); }
.crawl-advanced .crawl-rate-row { margin-top: 12px; }

@media (max-width: 680px) {
    .toolbar-group { flex: 1 1 auto; }
    .toolbar-group .button { flex: 1; }
    .toolbar-divider { display: none; }
    .panel-tools { padding: 12px 16px; }
}

/* Intake: algemene websitegegevens */
.info-head { margin-bottom: 18px; }
.info-head .menu-intro { max-width: 760px; }
.info-meta { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.info-progress { flex: 0 1 320px; height: 6px; border-radius: 999px; background: #e7ece8; overflow: hidden; }
.info-progress > i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), #4fb088); transition: width .45s ease; }
.info-progress-label { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

.info-groups { display: grid; gap: 14px; }
.info-group { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: var(--shadow); }
.info-group > header { border-bottom: 1px solid var(--line); background: #fafbfa; }
.info-group.is-collapsed > header { border-bottom: 0; }
.info-group-toggle { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 22px; border: 0; background: transparent; color: inherit; text-align: left; }
.info-group-toggle:hover { background: rgba(25, 33, 29, .025); }
.info-group-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.info-group-title { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.info-group-chevron { display: grid; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; color: var(--muted); place-items: center; transition: background .15s ease, color .15s ease; }
.info-group-chevron::before { display: block; width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: translateY(-1px) rotate(45deg); transform-origin: 50% 50%; transition: transform .16s ease; content: ""; }
.info-group.is-collapsed .info-group-chevron::before { transform: translateX(-1px) rotate(-45deg); }
.info-group-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #eef3ec; color: var(--green-dark); }
.info-group-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.info-group-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 20px 22px; }
.info-group-fields[hidden] { display: none; }
.info-packages-fields { grid-template-columns: 1fr; }
.package-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.package-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.package-toggle:hover { border-color: #c8c5ba; background: #fbfaf6; }
.package-toggle.is-active { border-color: var(--ink); background: #fbfaf6; }
.package-toggle input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; cursor: pointer; accent-color: var(--ink); }
.package-toggle-main { display: grid; gap: 2px; min-width: 0; }
.package-toggle-main strong { overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.package-toggle-state { color: var(--muted); font-size: 12px; font-weight: 600; }
.package-detail-list { display: grid; gap: 20px; }
.package-detail { display: grid; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.package-detail h4 { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.package-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.package-empty { margin: 0; padding-top: 4px; color: var(--muted); font-size: 13px; }
.info-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.info-field.span-2 { grid-column: 1 / -1; }
.info-field > label { color: var(--ink); font-size: 12.5px; font-weight: 700; }
.info-field input, .info-field select, .info-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: 0;
    background: var(--white);
    color: var(--ink);
    font-size: 13.5px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.info-field textarea { min-height: 80px; line-height: 1.55; resize: vertical; }
.info-field input:focus, .info-field select:focus, .info-field textarea:focus { border-color: var(--field-line); box-shadow: 0 0 2px 2px var(--focus-ring); }
.info-field-hint { color: var(--muted); font-size: 11.5px; }

/* Meetingnotities */
.meeting-notes-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.meeting-notes-title-row > div { min-width: 0; }
.meeting-notes-title-row .button { flex: 0 0 auto; }
.meeting-notes-count { margin-top: 20px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .03em; }
.meeting-list { display: grid; gap: 20px; }
.meeting-card { overflow: hidden; border: 1px solid #eae8e0; border-radius: 18px; background: var(--white); }
.meeting-card-header { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-bottom: 1px solid var(--line-soft); }
.meeting-card.is-collapsed .meeting-card-header { border-bottom: 0; }
.meeting-card-toggle { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 18px 12px 18px 28px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.meeting-card-toggle:hover { background: #fbfaf6; }
.meeting-card-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.meeting-card-toggle > span:first-child { min-width: 0; }
.meeting-card-title { display: block; overflow: hidden; margin-top: 5px; color: var(--ink); font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.meeting-card-chevron { display: block; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 1.7px solid var(--muted); border-bottom: 1.7px solid var(--muted); transform: translateY(-2px) rotate(45deg); transition: transform .16s ease; }
.meeting-card.is-collapsed .meeting-card-chevron { transform: rotate(-45deg); }
.meeting-number { color: #9a9788; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.meeting-remove { display: grid; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--field-line); border-radius: 9px; background: var(--white); color: #9b5549; font-size: 20px; line-height: 1; cursor: pointer; place-items: center; }
.meeting-remove:hover { border-color: #efc2ba; background: #fff0ed; }
.meeting-card-fields { display: grid; grid-template-columns: minmax(180px, .55fr) minmax(0, 1.45fr); gap: 22px; padding: 28px; }
.meeting-card-fields[hidden] { display: none; }
.meeting-notes-field textarea { min-height: 190px; }
.meeting-actions-field { padding: 18px; border: 1px solid #f0dfa0; border-radius: 13px; background: #fffdf3; }
.meeting-actions-field textarea { min-height: 120px; background: #fff; }
.meeting-empty { display: grid; justify-items: center; padding: 56px 24px; border: 1px dashed #cfccc0; border-radius: 18px; color: var(--muted); text-align: center; }
.meeting-empty-icon { display: grid; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 13px; background: var(--blue-soft); color: #1a8fe0; place-items: center; }
.meeting-empty-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.meeting-empty h3 { margin: 0 0 7px; color: var(--ink); font-size: 18px; font-weight: 500; }
.meeting-empty p { max-width: 460px; margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; }

@media (max-width: 680px) {
    .info-group-fields { grid-template-columns: 1fr; }
    .package-picker,
    .package-detail-fields { grid-template-columns: 1fr; }
    .info-progress { flex: 1 1 auto; }
    .meeting-notes-title-row { align-items: stretch; flex-direction: column; }
    .meeting-notes-title-row .button { align-self: flex-start; }
    .meeting-card-header { padding-right: 10px; }
    .meeting-card-toggle { padding-left: 18px; }
    .meeting-card-fields { padding-right: 18px; padding-left: 18px; }
    .meeting-card-fields { grid-template-columns: 1fr; }
}

/* Siteplan visual language */
:root {
    --yellow: #3bb4ff;
    --ink-soft: #3a3930;
    --muted-soft: #8a887e;
    --muted-light: #a8a69a;
    --line-soft: #eeede6;
    --field-line: #e2e0d8;
    --focus-ring: rgba(59, 180, 255, .32);
    --blue-soft: #e6f4ff;
    --blue-line: #cfe9fb;
    --green-soft: #e4f3ea;
    --green-line: #cde9d6;
    --yellow-soft: #e6f4ff;
    --yellow-line: #cfe9fb;
    --orange-soft: #ffe9e0;
    --orange-line: #fbd4c5;
}

html {
    background: var(--paper);
}

body {
    background: var(--paper);
    color: var(--ink);
    font-weight: 400;
    letter-spacing: 0;
}

input,
textarea,
select,
button {
    font-family: var(--font-ui);
    letter-spacing: 0;
}

::placeholder {
    color: var(--muted-light);
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2316160f' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font-weight: 500;
}

option {
    font-weight: 500;
}

.app-header {
    min-height: 62px;
    padding: 0 max(28px, calc((100vw - 1500px) / 2));
    border-bottom: 1px solid var(--line);
    background: #fff;
    backdrop-filter: none;
}

.brand {
    gap: 11px;
}

.brand-mark {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 9px;
    background: transparent;
    color: transparent;
    font-size: 0;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
}

.brand strong {
    color: var(--ink);
    font-size: 16px;
    font-weight: 500;
}

.brand small {
    color: var(--muted);
    font-size: 12px;
}

.project-switcher {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.project-switcher::before {
    width: 1px;
    height: 22px;
    background: var(--line);
    content: "";
}

.project-button {
    gap: 9px;
    padding: 7px 13px;
    border-color: #e4e2da;
    border-radius: 9px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.project-button::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--yellow);
    content: "";
}

.project-button:hover,
.project-button[aria-expanded="true"] {
    border-color: var(--ink);
}

.header-actions {
    gap: 8px;
}

.icon-button {
    width: 34px;
    height: 34px;
    border-color: transparent;
    border-radius: 9px;
    background: transparent;
    color: #b7b5a9;
}

.icon-button:not(:disabled):hover,
#undoButton:not(:disabled):hover,
#redoButton:not(:disabled):hover {
    border-color: var(--line);
    color: var(--ink);
    background: #fff;
}

.header-save-status {
    gap: 8px;
    padding: 0 2px;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
}

.header-save-status > span {
    background: var(--mint);
}

.user-chip {
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

.user-avatar {
    width: 30px;
    height: 30px;
    background: var(--yellow);
    color: var(--ink);
}

.user-name {
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}

main {
    padding: 30px 0 60px;
}

body.view-info main {
    width: min(1500px, calc(100% - 64px));
}

body:not(.view-info) main {
    width: min(1500px, calc(100% - 64px));
}

body:not(.view-info) main.login-card {
    width: min(calc(100% - 64px), 550px);
}

.header-popover,
.status-popover,
.confirm-dialog {
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
}

.menu-popover {
    display: grid;
    gap: 4px;
}

.header-popover .menu-item,
.menu-popover .menu-item {
    border: 0;
    border-left: 0;
    box-shadow: none;
    min-height: 0;
    background: transparent;
    font-weight: 500;
}

.header-popover .menu-item:hover,
.menu-popover .menu-item:hover {
    background: var(--paper);
}

.popover-field span,
.popover-label,
.eyebrow,
.panel-kicker {
    color: #9a9788;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .12em;
}

.stats-grid {
    gap: 18px;
    margin: 0 0 30px;
}

body:not(.view-sitemap) .stats-grid {
    display: none;
}

.stat-card {
    gap: 16px;
    padding: 20px 22px;
    border-color: #eae8e0;
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
}

.stats-grid .stat-card:nth-child(2) {
    border-color: #fbefa3;
}

.stat-card strong {
    color: var(--ink);
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
}

.stat-card div span {
    margin-top: 7px;
    color: var(--muted-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.stat-card .stat-icon {
    width: 40px;
    height: 40px;
    border: 1px solid;
    border-radius: 11px;
    color: var(--ink);
}

.stat-icon.coral {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: #1a8fe0;
}

.stat-icon.violet {
    border-color: #fbefa3;
    background: #fff7cc;
    color: var(--ink);
}

.stat-icon.mint {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: #3c9a5e;
}

.stat-icon.blue {
    border-color: var(--orange-line);
    background: var(--orange-soft);
    color: #e64a00;
}

.stat-progress {
    height: 5px;
    background: #eeede6;
}

.stat-progress > i,
.info-progress > i {
    background: var(--ink);
}

.view-switch {
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.view-tab,
.menu-tab {
    padding: 9px 18px;
    border: 1px solid #e4e2da;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 500;
}

.view-tab:hover,
.menu-tab:hover {
    border-color: var(--ink);
}

.view-tab.active,
.menu-tab.active {
    border-color: var(--ink);
    background: var(--ink);
    color: #fff;
}

.info-head {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.info-head::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(#ebe9e1 1px, transparent 1px), linear-gradient(90deg, #ebe9e1 1px, transparent 1px);
    background-size: 64px 64px;
    content: "";
    mask-image: linear-gradient(90deg, transparent 55%, #000 100%);
    pointer-events: none;
}

.info-head > * {
    position: relative;
}

.info-head h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-size: 42px;
    font-weight: 300;
    line-height: 1.05;
}

.info-head .eyebrow {
    display: block;
    margin-bottom: 12px;
}

.menu-intro,
.info-head .menu-intro {
    max-width: 620px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
}

.info-meta {
    max-width: 560px;
    gap: 16px;
    margin-top: 24px;
}

.info-progress {
    flex: 1 1 auto;
    height: 6px;
    background: #e7e5dd;
}

.info-progress-label {
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .03em;
}

.info-groups {
    gap: 20px;
}

.info-group,
.diagram-panel,
.content-plan,
.menu-add,
.menu-structure-panel,
.redirects-table,
.intro-card {
    border-color: #eae8e0;
    background: #fff;
    box-shadow: none;
}

.info-group {
    border-radius: 18px;
}

.info-group > header {
    border-bottom: 1px solid var(--line-soft);
    background: #fff;
}

.info-group-toggle {
    gap: 14px;
    padding: 20px 28px;
}

.info-group-toggle:hover {
    background: #fbfaf6;
}

.info-group-index {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--ink);
    border-radius: 7px;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.info-group-title {
    color: var(--ink);
    font-size: 17px;
    font-weight: 500;
}

.info-group-fields {
    gap: 22px;
    padding: 28px;
}

.package-picker {
    gap: 12px;
}

.package-toggle {
    border-color: var(--field-line);
    border-radius: 11px;
}

.package-toggle-main strong,
.package-detail h4 {
    font-weight: 500;
}

.package-detail {
    border-top-color: var(--line-soft);
}

.info-field {
    gap: 9px;
}

.info-field > label,
.field > span,
.field legend,
.crawl-form label {
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
}

.info-field input,
.info-field select,
.info-field textarea,
.field input,
.field textarea,
.field select,
.tree-search,
.redirect-input,
.menu-page-search,
.sitemap-input,
.popover-field input,
.url-row {
    border-color: var(--field-line);
    border-radius: 11px;
    background-color: #fff;
    color: var(--ink);
}

.info-field input,
.info-field select,
.info-field textarea {
    padding: 13px 15px;
    font-size: 14px;
}

.info-field textarea {
    min-height: 94px;
}

.info-field input:focus,
.info-field select:focus,
.info-field textarea:focus,
.field input:focus,
.field textarea:focus,
.field select:focus,
.tree-search:focus,
.redirect-input:focus,
.menu-page-search:focus,
.sitemap-input:focus,
.popover-field input:focus {
    border-color: var(--field-line);
    box-shadow: 0 0 2px 2px var(--focus-ring);
}

.target-search-wrap:focus-within,
.bulk-control > select:focus,
.bulk-control > textarea:focus,
.bulk-cpt input:focus,
.menu-name-input:focus {
    border-color: var(--field-line);
    box-shadow: 0 0 2px 2px var(--focus-ring);
}

.button {
    min-height: 40px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 500;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.button.primary,
.button.dark {
    background: var(--ink);
    color: #fff;
}

.button.primary:hover,
.button.dark:hover {
    background: #000;
}

.button.secondary {
    border-color: var(--yellow-line);
    background: var(--yellow-soft);
    color: var(--ink);
}

.button.ghost {
    border-color: var(--field-line);
    background: #fff;
    color: var(--ink);
}

.button.ghost:hover {
    border-color: var(--ink);
}

.link-button {
    color: var(--ink);
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.intro-card {
    padding: 16px;
    border-radius: 16px;
}

.workspace-toolbar,
.content-plan-header {
    margin-bottom: 18px;
}

.workspace-toolbar h2,
.content-plan-header h2,
.inspector-sheet h2 {
    color: var(--ink);
    font-weight: 400;
}

.diagram-panel {
    border-radius: 18px;
}

.old-panel,
.new-panel {
    border-top-width: 1px;
}

.old-panel {
    border-top-color: var(--blue-line);
}

.new-panel {
    border-top-color: var(--yellow-line);
}

.panel-header {
    padding: 22px 24px 16px;
}

.panel-header h3 {
    color: var(--ink);
    font-weight: 500;
}

.panel-header p {
    color: var(--muted);
}

.count-badge,
.dummy-label,
.mapping-count {
    background: #f7f6f1;
    color: var(--muted);
}

.panel-tools,
.panel-footer-actions,
.redirect-head,
.menu-structure-head {
    border-color: var(--line-soft);
    background: #fff;
}

.tree-canvas {
    border-top-color: var(--line-soft);
    background-color: #fbfaf6;
    background-image: radial-gradient(#e8e6de 1px, transparent 1px);
}

.page-card,
.menu-structure .menu-item,
.mapping-row {
    border-color: #e2e0d8;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 4px 12px rgba(22, 22, 15, .045);
}

.page-card:hover,
.menu-structure .menu-item:hover,
.mapping-row:hover {
    border-color: #c8c5ba;
    box-shadow: 0 6px 16px rgba(22, 22, 15, .075);
}

.page-card.selected,
.page-card.bulk-selected {
    outline-color: var(--ink);
}

.page-card.related,
.search-match > .page-card {
    background: var(--blue-soft);
    border-color: var(--blue-line);
}

.page-card.drag-over-child,
.menu-structure .menu-item.drag-over-child,
.drop-slot::after {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.drop-slot::after {
    background: var(--blue);
}

.page-symbol,
.collapse-toggle {
    background: #f4f3ee;
    color: var(--muted);
}

.status-icon-undecided {
    border-color: #dad7cc;
    background: #f4f3ee;
    color: var(--muted);
}

.status-icon-keep {
    border-color: var(--green-line);
    background: var(--green-soft);
    color: #27835e;
}

.status-icon-rewrite {
    border-color: var(--yellow-line);
    background: var(--yellow-soft);
    color: var(--ink);
}

.status-icon-drop {
    border-color: var(--orange-line);
    background: var(--orange-soft);
    color: #b84c3b;
}

.plan-filter {
    background: #eeede6;
}

.plan-filter button.active {
    background: var(--ink);
    color: #fff;
    box-shadow: none;
}

.target-pill,
.menu-item-type,
.content-kind-custom_post_type .content-kind-label {
    background: var(--blue-soft);
    color: #166da3;
}

.template-chip {
    background: var(--green-soft);
    color: #27835e;
}

.menu-tabs {
    margin: 20px 0 16px;
}

.menu-add,
.menu-structure-panel,
.redirects-table {
    border-radius: 16px;
}

.menu-name-input {
    background: #f7f6f1;
    color: var(--ink);
    font-weight: 500;
}

.menu-tab-add {
    border-color: #d6d3c7;
    border-radius: 999px;
}

.redirect-row {
    border-top-color: var(--line-soft);
}

.redirect-arrow,
.mapping-arrow {
    color: var(--muted-light);
}

.inspector-backdrop {
    background: rgba(22, 22, 15, .38);
}

.inspector-sheet {
    background: #fff;
    box-shadow: -18px 0 50px rgba(22, 22, 15, .16);
}

.toggle-field,
.autosave-status,
.target-option,
.menu-empty,
.login-setup {
    background: #f7f6f1;
}

.bulk-bar,
.toast {
    background: var(--ink);
}

.bulk-bar .button.primary {
    background: var(--yellow);
    color: var(--ink);
}

.login-body {
    background: var(--paper);
}

.login-card {
    border-color: #eae8e0;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.login-card h1 {
    color: var(--ink);
    font-weight: 400;
}

.login-lead {
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .app-header {
        padding: 10px 16px;
    }

    body.view-info main,
    body:not(.view-info) main {
        width: min(100% - 32px, 1500px);
    }

    body:not(.view-info) main.login-card {
        width: min(100%, 550px);
    }
}

@media (max-width: 680px) {
    .app-header {
        align-items: flex-start;
        padding: 10px 12px;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
    }

    .project-switcher {
        order: 3;
        width: 100%;
    }

    .project-switcher::before {
        display: none;
    }

    .project-button {
        max-width: none;
        width: 100%;
        justify-content: flex-start;
    }

    .view-switch {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .view-tab {
        flex: 0 0 auto;
    }

    .info-head h2 {
        font-size: 34px;
    }

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

    .info-progress {
        width: 100%;
        flex: 0 0 auto;
    }

    .info-group-toggle,
    .info-group-fields {
        padding-right: 18px;
        padding-left: 18px;
    }

    .stat-card strong {
        font-size: 26px;
    }
}

/* ---------------------------------------------------------------------------
   Projecten delen
   --------------------------------------------------------------------------- */

/* Projectrijen in de switcher: naam + eventueel eigenaar/rechten-badge. */
.project-list-pick { display: flex; flex-direction: column; gap: 2px; }
.project-list-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-meta { display: inline-flex; align-items: center; gap: 6px; }
.project-owner { font-size: 11px; font-weight: 600; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.project-badge {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.project-badge.can-view { background: var(--blue-soft); color: #2b6ca3; }
.project-badge.can-edit { background: var(--green-soft); color: #2f7a4a; }

.project-list-action {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
}
.project-list-item:hover .project-list-action, .project-list-action:focus-visible { opacity: 1; }
.project-list-action:hover { background: var(--blue-soft); color: var(--green-dark); }
.project-list-item.is-shared .project-list-pick { padding-right: 11px; }
.popover-label-shared { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }

/* Alleen-lezen banner + het blokkeren van bewerkende bedieningselementen. */
.readonly-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--blue-line);
    border-radius: 11px;
    background: var(--blue-soft);
    color: #2b6ca3;
    font-size: 13px;
    font-weight: 700;
}
.readonly-banner[hidden] { display: none; }
.readonly-banner svg { flex: 0 0 auto; }

body.readonly-project .intro-card,
body.readonly-project .workspace-toolbar .toolbar-actions,
body.readonly-project .panel-footer-actions,
body.readonly-project .redirects-actions,
body.readonly-project #shareProjectButton { display: none !important; }

/* Statusiconen op kaarten en in het contentplan zijn in kijkmodus niet klikbaar. */
body.readonly-project [data-status-trigger] { pointer-events: none; }

/* Door JS uitgeschakelde bewerk-controls duidelijk gedempt weergeven, zodat ze
   er ook niet meer bewerkbaar uitzien. */
body.readonly-project main :disabled,
body.readonly-project .inspector :disabled { opacity: .5; cursor: not-allowed; }
body.readonly-project main label:has(input:disabled),
body.readonly-project .inspector label:has(input:disabled) { cursor: not-allowed; }

/* Sleep-affordances verbergen: er valt niets te verslepen. */
body.readonly-project .drag-handle { display: none; }
body.readonly-project .page-card, body.readonly-project .menu-item { -webkit-user-drag: none; }

/* Deel-dialoog. */
.share-dialog {
    width: min(460px, 100%);
    max-height: min(84vh, 720px);
    display: flex;
    flex-direction: column;
    padding: 20px 22px 22px;
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow);
}
.share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.share-head h2 { margin: 2px 0 0; font-size: 19px; }
.share-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.share-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.share-empty { margin: 4px 4px 10px; font-size: 12.5px; color: var(--muted); }

.share-row, .share-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    text-align: left;
}
.share-user { cursor: pointer; }
.share-user:hover, .share-row:hover { background: var(--paper); }

.share-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}
.share-identity { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.share-identity strong { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.share-identity small { font-size: 11.5px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.share-perm, .share-default-perm {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-size: 12px;
    font-weight: 600;
}
.share-remove { flex: 0 0 auto; width: 30px; height: 30px; font-size: 18px; color: var(--muted); }
.share-remove:hover { background: #fdeeea; color: #b4402a; }
.share-add-icon { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--paper); color: var(--green-dark); font-size: 18px; font-weight: 700; }

.share-add-row { display: flex; gap: 8px; margin-bottom: 8px; }
.share-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--field-line);
    border-radius: 9px;
    background: var(--white);
    font-size: 13px;
}
.share-users { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }

/* Versiegeschiedenis. */
.history-intro { margin: 2px 4px 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.history-list { display: flex; flex-direction: column; gap: 2px; }
.history-item { border-radius: 10px; }
.history-item:hover, .history-item.open { background: var(--paper); }
.history-row { display: flex; align-items: center; gap: 4px; padding-right: 8px; }
.history-row-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}
.history-chevron { flex: 0 0 auto; display: grid; place-items: center; color: var(--muted); transition: transform .15s ease; }
.history-item.open .history-chevron { transform: rotate(90deg); }
.history-restore { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; }
.history-diff-wrap { padding: 0 12px 12px 38px; }
.history-diff-note { margin: 0 0 6px; font-size: 12px; color: var(--muted); }
.history-diff-section h4 {
    margin: 10px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}
.history-diff-section:first-of-type h4 { margin-top: 0; }
.history-diff-section ul {
    margin: 0;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink);
}