/* Private Civitas gift. Keep the native layout and live topology renderer. */
:root[data-skin="civitas"] {
    --green: #65d9df;
    --green-bright: #b0edf0;
    --green-muted: #6d9ea5;
    --amber: #e187a5;
    --line: #1e4d55;
    --line-strong: #347880;
    --panel: #061419;
    --panel-soft: #0b232a;
}
:root[data-skin="civitas"] body {
    background: #030a0e url('/assets/skins/civitas/city.png') center bottom / cover fixed no-repeat;
}
:root[data-skin="civitas"] .terminal-panel {
    background: transparent;
}
:root[data-skin="civitas"] :is(.app-topbar, .view-rail, .operations-sidebar) {
    background: rgba(3, 14, 19, .92);
    border-color: var(--line-strong);
    border-radius: 0;
    box-shadow: none;
}
:root[data-skin="civitas"] .primary-column {
    background: rgba(2, 11, 16, .86);
    border-color: var(--line-strong);
}
:root[data-skin="civitas"] :is(.terminal-output, .network-view) {
    background: transparent;
}
:root[data-skin="civitas"] .brand-lockup > strong {
    font-size: .66rem;
    letter-spacing: .13em;
}
:root[data-skin="civitas"] .skin-badge {
    display: block;
    margin-bottom: 5px;
    color: #071317;
    -webkit-text-stroke: 1px #63d9e3;
    font: 900 28px/1 monospace;
    letter-spacing: .22em;
    text-shadow: 3px 3px #17434b;
}
:root[data-skin="civitas"] .skin-badge::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0 23px 10px 0;
    background: #51c5d6;
    box-shadow: 8px 0 #a47aab, 16px 0 #a24d7f, 0 8px #73a7a0, 8px 8px #d2c080, 16px 8px #d87797, 0 16px #9ead57, 8px 16px #ddd474, 16px 16px #95dce0;
}
:root[data-skin="civitas"] .skin-motto {
    display: block;
    margin: auto 0 8px;
    color: #75aeb5;
    font: 9px/1.8 monospace;
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-align: center;
}
:root[data-skin="civitas"] .skin-note {
    display: block;
    padding: 18px 14px;
    color: #ce829b;
    font: 11px/1.8 monospace;
    white-space: pre-line;
}
:root[data-skin="civitas"] .skin-network-art {
    height: 150px;
    margin: 0 12px 12px;
    background: url('/assets/skins/civitas/city.png') center bottom / cover;
    image-rendering: pixelated;
    border-bottom: 2px solid #35747e;
    pointer-events: none;
}
:root[data-skin="civitas"] .view-button {
    border: 1px solid #17353e;
    border-radius: 0;
    color: #80bac1;
    background: #071820;
}
:root[data-skin="civitas"] .view-button.active {
    color: #a2f0f2;
    border-color: #6cd7df;
    background: #11323a;
    box-shadow: inset 3px 0 #e187a5;
}
:root[data-skin="civitas"] .view-button > span:not(.skin-icon) { display: none; }
:root[data-skin="civitas"] .view-button .skin-icon { display: inline-flex; width: 20px; height: 20px; }
:root[data-skin="civitas"] .skin-icon svg { width: 100%; height: 100%; stroke-linecap: square; stroke-linejoin: miter; }
:root[data-skin="civitas"] .topology-layer {
    border-radius: 0;
    border-color: #28525c;
    background: #091d25;
}
:root[data-skin="civitas"] .topology-layer.current {
    border-color: #e187a5;
    background: #271e2a;
    box-shadow: inset 3px 0 #e187a5;
}
:root[data-skin="civitas"] .topology-node { color: #a5d6dc; background: #102932; }
:root[data-skin="civitas"] :is(button, input, select, textarea) { border-radius: 0; }
:root[data-skin="civitas"] :is(button, input, select, textarea):focus-visible { outline: 2px solid #e2ca79; outline-offset: 2px; }
@media (max-height: 800px) {
    :root[data-skin="civitas"] .skin-network-art { height: 90px; }
    :root[data-skin="civitas"] .skin-motto { display: none; }
}
:root[data-skin="civitas"] .resource-strip .skin-icon { display: none; }
:root[data-skin="civitas"] .primary-column { border-width: 1px; border-radius: 0; box-shadow: none; }
:root[data-skin="civitas"] .primary-column::after { box-shadow: none; }
:root[data-skin="civitas"] .skin-motto { font-size: 8px; letter-spacing: -.5px; }
:root[data-skin="civitas"] .resource-strip button {
    padding: 4px 6px;
    border: 1px solid var(--line-strong);
    color: var(--green-bright);
    background: #102932;
    font: inherit;
    font-size: 10px;
}