html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--bs-link-color, #2dd4bf);
}

.btn-primary {
    color: #06251f;
    background-color: #19c3b1;
    border-color: #19c3b1;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Rendered assistant markdown (Assistant.razor) */
.assistant-md > :first-child { margin-top: 0; }
.assistant-md > :last-child { margin-bottom: 0; }

.assistant-md h1, .assistant-md h2, .assistant-md h3,
.assistant-md h4, .assistant-md h5, .assistant-md h6 {
    margin: 0.8rem 0 0.4rem;
    font-weight: 600;
    line-height: 1.25;
}
.assistant-md h1 { font-size: 1.5rem; }
.assistant-md h2 { font-size: 1.3rem; }
.assistant-md h3 { font-size: 1.15rem; }

.assistant-md p { margin: 0 0 0.6rem; }
.assistant-md ul, .assistant-md ol { margin: 0 0 0.6rem 1.4rem; }
.assistant-md li { margin: 0.15rem 0; }

.assistant-md pre {
    background: #11151d;
    border: 1px solid #2a3242;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    overflow-x: auto;
    margin: 0 0 0.6rem;
}
.assistant-md pre code {
    color: #cdd3df;          /* reset inline-code colour inside fenced blocks */
    background: none;
    padding: 0;
    white-space: pre;
}
.assistant-md :not(pre) > code {
    background: #232b3a;
    color: #e1b3d0;
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.assistant-md blockquote {
    margin: 0 0 0.6rem;
    padding: 0.1rem 0 0.1rem 0.9rem;
    border-left: 3px solid #39435a;
    color: #8b93a7;
}

.assistant-md table {
    border-collapse: collapse;
    margin: 0 0 0.6rem;
}
.assistant-md th, .assistant-md td {
    border: 1px solid #2c3546;
    padding: 0.3rem 0.6rem;
}
.assistant-md th { background: #1b212e; }

.assistant-md a { color: #2dd4bf; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* ---- Floor-plan editor ---- */
.editor-canvas {
    width: 100%;
    height: 100%;
    background: #e9ecef;
    background-image: radial-gradient(#dee2e6 1px, transparent 1px);
    background-size: 24px 24px;
}

.floor-background {
    pointer-events: none;
    display: block;
    user-select: none;
}

.component-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 110px;
    padding: 8px 12px;
    background: #fff;
    border: 2px solid var(--node-color, #0d6efd);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    font-size: 14px;
    user-select: none;
    cursor: move;
}
.component-node.selected {
    box-shadow: 0 0 0 2px #6e9fd4, 0 1px 6px rgba(0, 0, 0, .25);
}
.component-node-icon { font-size: 18px; line-height: 1; }
.component-node-label { white-space: nowrap; color: #212529; }
.component-node-code {
    font-size: 10px; font-weight: 600; color: #495057;
    background: #e9ecef; border-radius: 4px; padding: 1px 5px; margin-left: 2px;
}

/* Ports (replicated from the library's default-node styling, scoped to our node) */
.component-node .diagram-port {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px;
    background: var(--node-color, #0d6efd);
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity .15s ease;
    cursor: crosshair;
}
.component-node:hover .diagram-port,
.component-node .diagram-port.has-links { opacity: 1; }
.component-node .diagram-port.top { top: 0; left: 50%; }
.component-node .diagram-port.bottom { bottom: 0; left: 50%; }
.component-node .diagram-port.left { left: 0; top: 50%; }
.component-node .diagram-port.right { right: 0; top: 50%; }

/* Drag-to-pan over the floor plan: the background is a locked node whose wrapper would
   otherwise swallow the pointer, so make it pointer-transparent. Panning then works
   anywhere on the canvas (empty space or over the plan). */
.diagram-node:has(> .floor-background) {
    pointer-events: none;
}

/* ---- Tree view (dark) ---- */
.tv {
    color: #c7ccd6;
    font-size: 13px;
    padding: 6px 4px 12px;
}
.tv-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 8px 4px 10px;
}
.tv-title {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8b93a7;
    font-weight: 600;
}
.tv-actions { display: inline-flex; gap: 2px; }
.tv-act-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7488;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.tv-act-btn:hover:not(:disabled) { color: #19c3b1; background: rgba(255,255,255,.06); }
.tv-act-btn:disabled { opacity: .35; cursor: default; }
.tv-search {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 8px 8px;
    padding: 6px 9px;
    background: #11151d;
    border: 1px solid #2a3242;
    border-radius: 8px;
}
.tv-search-icon { color: #6b7488; flex: 0 0 auto; }
.tv-search-input {
    border: 0; outline: 0; background: transparent; color: #cdd3df;
    width: 100%; font-size: 13px;
}
.tv-search-input::placeholder { color: #5b6477; }

.tv-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 6px;
    padding: 7px 9px;
    color: #c7ccd6;
    background: linear-gradient(180deg, #283143 0%, #222a39 100%);
    border: 1px solid #2c3546;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.35);
    cursor: pointer;
    user-select: none;
}
.tv-row:hover { filter: brightness(1.12); }
.tv-row.selected { border-color: #19c3b1; box-shadow: 0 0 0 1px #19c3b1, 0 1px 2px rgba(0,0,0,.35); }
/* Unplaced item: keep it readable, but mark it with a diagonal hatch overlay. */
.tv-row.muted { font-style: italic; color: #aeb6c5; }
.tv-row.muted::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 7px;
    pointer-events: none;
    background: repeating-linear-gradient(
        45deg,
        transparent 0, transparent 7px,
        rgba(139, 147, 167, .22) 7px, rgba(139, 147, 167, .22) 9px);
}

.tv-accent { width: 3px; height: 16px; border-radius: 2px; flex: 0 0 auto; }

.tv-eye {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; border: 0; background: transparent; cursor: pointer;
    color: #7f8aa3; border-radius: 50%;
}
.tv-eye.on { color: #cdd3df; }
.tv-eye.off { color: #4b5468; }
.tv-eye:hover { color: #19c3b1; }

.tv-caret {
    flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border: 0; background: transparent;
    color: #8b93a7; font-size: 9px; line-height: 14px; cursor: pointer;
    transition: transform .12s ease;
}
.tv-caret.open { transform: rotate(90deg); }
.tv-caret-spacer { flex: 0 0 auto; width: 14px; }

.tv-icon { flex: 0 0 auto; font-size: 14px; line-height: 1; }
.tv-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tv-children {
    margin-left: 16px;
    border-left: 1px solid rgba(255,255,255,.08);
    padding-left: 4px;
}

/* ---- Editor shell (side panels + canvas) ---- */
.editor-shell {
    display: flex;
    /* Fill the viewport below the top bar (3.5rem) + content padding (1.1rem), leaving a small gap. */
    height: calc(100vh - 6rem);
    border: 1px solid #ced4da;
    border-radius: 6px;
    overflow: hidden;
}
.editor-side {
    flex: 0 0 290px;
    width: 290px;
    background: #1b212e;
    overflow-y: auto;
    border-right: 1px solid #0d1117;
    display: flex;
    flex-direction: column;
}
.editor-side .project-pick {
    margin: 8px;
}
.editor-canvas-wrap { flex: 1; position: relative; min-width: 0; }

/* Empty state when a project has no floor yet. */
.editor-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 4;
}
.editor-empty-card {
    background: #1b212e; border: 1px solid #2c3546; border-radius: 10px;
    padding: 20px 26px; text-align: center; color: #c7ccd6; box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

/* ===================== Projects page ===================== */
.project-grid {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.project-card {
    background: #1b212e; border: 1px solid #2c3546; border-radius: 10px;
    padding: 14px 16px; cursor: pointer; transition: border-color .15s ease, transform .05s ease;
    display: flex; flex-direction: column; gap: 6px;
}
.project-card:hover { border-color: #19c3b1; }
.project-card:active { transform: translateY(1px); }
.project-card-top { display: flex; align-items: center; gap: 8px; }
.project-name { font-weight: 600; color: #e6e9ef; font-size: 1.02rem; }
.project-meta { color: #8b93a7; font-size: .82rem; }
.project-notes {
    color: #aeb4c2; font-size: .8rem; margin-top: 2px;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.project-card-actions { display: flex; gap: 6px; margin-top: 10px; align-items: center; }

.status-badge {
    margin-left: auto; font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    white-space: nowrap;
}
.status-active { background: #0f766e; color: #eafffb; }
.status-hold   { background: #7c5e10; color: #fff5da; }
.status-done   { background: #334155; color: #cbd5e1; }

.projects-empty {
    background: #1b212e; border: 1px dashed #39435a; border-radius: 10px;
    padding: 28px; text-align: center; color: #c7ccd6; max-width: 420px;
}

/* Project create/edit form (in the styled modal) */
.modal-card.modal-card-wide { width: min(460px, 92vw); }
.proj-form { display: flex; flex-direction: column; gap: 2px; }
.proj-form label { font-size: .78rem; color: #8b93a7; margin: 8px 0 2px; }
.proj-form label:first-child { margin-top: 0; }

/* Tape-ruler / calibrate overlay: sits above the canvas and captures the drag. */
.measure-overlay { position: absolute; inset: 0; z-index: 5; cursor: crosshair; }
.measure-overlay.calibrate { cursor: cell; }
.measure-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.measure-line { stroke: #19c3b1; stroke-width: 2; stroke-dasharray: 6 4; }
.measure-dot { fill: #19c3b1; stroke: #06231f; stroke-width: 1; }
.measure-label {
    position: absolute; transform: translate(-50%, -150%);
    background: #19c3b1; color: #06231f; font-weight: 600; font-size: .78rem;
    padding: 2px 7px; border-radius: 5px; white-space: nowrap; pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.measure-hint {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    background: rgba(20,26,36,.92); color: #c7ccd6; font-size: .76rem;
    padding: 4px 10px; border-radius: 6px; pointer-events: none; border: 1px solid #2c3546;
}
.measure-seg {
    transform: translate(-50%, -50%);
    background: #11332f; color: #7fe9dc; font-weight: 500; font-size: .72rem;
}
.measure-total {
    transform: translate(10px, -50%);
    background: #0f766e; color: #eafffb;
}
.measure-hint kbd {
    background: #2a3242; color: #e6e9ef; border-radius: 4px; padding: 0 5px;
    font-size: .7rem; border: 1px solid #39435a;
}

/* Bottom-right floating controls: zoom + live scale. Collapses to its content width. */
.canvas-controls {
    position: absolute; right: 10px; bottom: 10px; z-index: 6;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(20,26,36,.92); border: 1px solid #2c3546;
    border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.canvas-controls .canvas-scale { font-size: .76rem; color: #c7ccd6; white-space: nowrap; }

/* Multi-select: Ctrl-held overlay + drag-box. */
.marquee-overlay { position: absolute; inset: 0; z-index: 5; cursor: crosshair; }
.marquee-box {
    position: absolute; border: 1.5px dashed #19c3b1;
    background: rgba(25,195,177,.14); pointer-events: none;
}

/* Layer switch (E/W) + notes toggle, bottom-left — same pill style as the zoom controls. */
.canvas-layers {
    position: absolute; left: 10px; bottom: 10px; z-index: 6;
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(20,26,36,.92); border: 1px solid #2c3546;
    border-radius: 8px; padding: 4px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Discipline badges on tree rows (E/W). */
.tv-badges { display: inline-flex; gap: 3px; margin-left: auto; padding-left: 6px; }
.tv-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700; color: #06231f; line-height: 1;
    pointer-events: none;   /* informational by default */
}
/* Clickable badges (floor rows) act as shortcuts to that floor + layer. */
.tv-badge-btn { pointer-events: auto; border: 1px solid transparent; cursor: pointer; opacity: .75; }
.tv-badge-btn:hover { opacity: 1; }
.tv-badge-btn.active { opacity: 1; border-color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.4); }

/* Tools dropdown (Ruler / Calibrate). */
.tool-dd { position: relative; display: inline-block; }
.tool-dd-backdrop { position: fixed; inset: 0; z-index: 1040; }
.tool-dd-menu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050; min-width: 170px;
    background: #1b212e; border: 1px solid #2c3546; border-radius: 8px; padding: 4px;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.tool-dd-item {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    color: #c7ccd6; font-size: .85rem; padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.tool-dd-item:hover { background: #2a3242; color: #e6e9ef; }
.tool-dd-item.active { background: #19c3b1; color: #06231f; font-weight: 600; }
.tool-dd-sep { height: 1px; background: #2c3546; margin: 4px 2px; }
.tool-dd-hint { color: #8b93a7; font-size: .72rem; padding: 6px 10px 2px; border-top: 1px solid #2c3546; margin-top: 4px; }
.tool-dd-hint kbd {
    background: #2a3242; color: #e6e9ef; border-radius: 4px; padding: 0 5px;
    font-size: .7rem; border: 1px solid #39435a;
}

/* ===================== App theme (dark + teal, matches the tree styling) ===================== */
[data-bs-theme="dark"] {
    --bs-body-bg: #141a24;
    --bs-body-color: #c7ccd6;
    --bs-emphasis-color: #e6e9ef;
    --bs-heading-color: #e6e9ef;
    --bs-border-color: #2c3546;
    --bs-secondary-bg: #1b212e;
    --bs-tertiary-bg: #232b3a;
    --bs-link-color: #2dd4bf;
    --bs-link-hover-color: #5eead4;
    --bs-primary: #19c3b1;
    --bs-primary-rgb: 25, 195, 177;
}

body { background-color: #141a24; }
h1, h2, h3, h4, h5, h6 { color: var(--bs-emphasis-color); }

/* Teal primary buttons with dark text */
.btn-primary {
    --bs-btn-bg: #19c3b1; --bs-btn-border-color: #19c3b1;
    --bs-btn-hover-bg: #16b3a3; --bs-btn-hover-border-color: #16b3a3;
    --bs-btn-active-bg: #129b8d; --bs-btn-active-border-color: #129b8d;
    --bs-btn-color: #06251f; --bs-btn-hover-color: #06251f; --bs-btn-active-color: #06251f;
    --bs-btn-disabled-bg: #19c3b1; --bs-btn-disabled-border-color: #19c3b1; --bs-btn-disabled-color: #06251f;
}

/* Cards / surfaces: the subtle elevated slate look from the tree rows */
[data-bs-theme="dark"] .card {
    --bs-card-bg: #1b212e;
    --bs-card-border-color: #2c3546;
    --bs-card-cap-bg: #1b212e;
    background-image: linear-gradient(180deg, #222a39 0%, #1c2330 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 1px 3px rgba(0,0,0,.35);
}

/* Inputs / selects */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: #11151d;
    border-color: #2a3242;
    color: #cdd3df;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #5b6477; }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #19c3b1;
    box-shadow: 0 0 0 .2rem rgba(25,195,177,.25);
}

/* Outline-secondary buttons read better on slate */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: #aab2c2; --bs-btn-border-color: #39435a;
    --bs-btn-hover-bg: #232b3a; --bs-btn-hover-color: #e6e9ef; --bs-btn-hover-border-color: #4a5670;
}

/* ---- Modal dialog ---- */
.modal-dim {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(8, 11, 17, .6);
}
.modal-card {
    position: fixed; z-index: 1090;
    top: 28%; left: 50%; transform: translateX(-50%);
    width: 340px; max-width: calc(100vw - 32px);
    padding: 18px;
    background: linear-gradient(180deg, #222a39 0%, #1b212e 100%);
    border: 1px solid #2c3546;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    color: #c7ccd6;
}
.modal-card-title { font-size: 15px; font-weight: 600; color: #e6e9ef; margin-bottom: 10px; }
.modal-card-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Modal "choose type" list */
.modal-choose-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.modal-choose-item {
    display: flex; align-items: center; text-align: left;
    padding: 8px 10px; border: 1px solid #2c3546; border-radius: 7px;
    background: #1b212e; color: #c7ccd6; cursor: pointer; font-size: 14px;
}
.modal-choose-item:hover { border-color: #19c3b1; background: #222a39; }