:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    --application-background-color: #0c1118;
    --panel-background-color: #121b26;
    --raised-panel-background-color: #182535;
    --form-control-background-color: #0d1620;
    --interface-border-color: #36506b;
    --primary-accent-color: #4dc3ff;
    --checkbox-checked-background-color: var(--tactical-feature-color);
    --danger-status-color: #ff5e6c;
    --out-of-action-paint-color: #c1121f;
    --warning-status-color: #d88a2e;
    --success-status-color: #5fd49a;
    --primary-text-color: #e8f0f7;
    --secondary-text-color: #8fa3b7;
    --shadow-base-color: #000;
    --contrast-text-color: #fff;
    --organization-color: #6094bd;
    --ship-color: #9e6570;
    --crew-color: #6c8e68;
    --tactical-feature-color: #8070b5;
    --crew-marker-one-color: #d9a62e;
    --crew-marker-two-color: #54b9df;
    --crew-marker-text-color: #0c1118;
    --tactical-symbol-surface-color: #0c1118;
    --tactical-symbol-accent-color: #4dc3ff;
    --star-symbol-color: #e8b93f;
    --planet-symbol-color: #2d75b8;
    --moon-symbol-color: #aab5c0;
    --station-symbol-color: #437a6b;
    --asteroid-symbol-color: #a99579;
    --city-symbol-color: #6c8fa7;
    --outpost-symbol-color: #8b6d45;
    --ground-location-symbol-color: #4f8d56;
    --holographic-grid-color: #17465a;
    --holographic-line-color: #39c8e8;
    --holographic-area-color: #1b8baa;
    --holographic-window-color: #081821;
    --component-panel-width: 330px;
    --standard-ship-card-width: 210px;
}

:root[data-color-scheme="quantum-blue"] {
    --application-background-color: #050b16;
    --panel-background-color: #0b182a;
    --raised-panel-background-color: #122842;
    --form-control-background-color: #071220;
    --interface-border-color: #4277a2;
    --primary-accent-color: #4eb4f8;
    --checkbox-checked-background-color: #a795ff;
    --organization-color: #4f8fc1;
    --ship-color: #8476a1;
    --tactical-feature-color: #5d74c2;
}

:root[data-color-scheme="crimson-nebula"] {
    --application-background-color: #14060b;
    --panel-background-color: #260b16;
    --raised-panel-background-color: #381027;
    --form-control-background-color: #1c0710;
    --interface-border-color: #ac4a74;
    --primary-accent-color: #ff4fa3;
    --checkbox-checked-background-color: #ff79bd;
    --organization-color: #c65378;
    --ship-color: #9d477b;
    --tactical-feature-color: #a55ac7;
}

* { box-sizing: border-box; }
html, body, #APP { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: var(--application-background-color); color: var(--primary-text-color); }
button, input, select, textarea { font: inherit; }
button, input, select, textarea {
    color: var(--primary-text-color); background: var(--form-control-background-color); border: 1px solid var(--interface-border-color); border-radius: 4px;
}
button { cursor: pointer; padding: .42rem .7rem; }
button:hover, button:focus-visible { border-color: var(--primary-accent-color); }
input, select, textarea { width: 100%; padding: .45rem; }
input[type="checkbox"] {
    appearance: none;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 1.15rem;
    display: grid;
    place-content: center;
    padding: 0;
    border: 2px solid var(--interface-border-color);
    border-radius: 4px;
    background: var(--form-control-background-color);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
input[type="checkbox"]::before {
    content: "";
    width: .62rem;
    height: .36rem;
    transform: translateY(-.05rem) rotate(-45deg) scale(0);
    border: solid var(--application-background-color);
    border-width: 0 0 2px 2px;
    transition: transform .1s ease-in-out;
}
input[type="checkbox"]:checked {
    border-color: var(--primary-text-color);
    background: var(--checkbox-checked-background-color);
    box-shadow: 0 0 0 1px rgb(from var(--checkbox-checked-background-color) r g b / .28);
}
input[type="checkbox"]:checked::before { transform: translateY(-.05rem) rotate(-45deg) scale(1); }
input[type="checkbox"]:not(:checked):hover { border-color: var(--primary-accent-color); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary-accent-color); outline-offset: 2px; }
input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
textarea { resize: vertical; min-height: 5rem; }
.app-shell { display: flex; flex-direction: column; }
.topbar { height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 1rem; border-bottom: 1px solid var(--interface-border-color); background: var(--form-control-background-color); }
.brand { font-weight: 800; letter-spacing: .08em; }
.tabs { display: flex; gap: .4rem; }
.tab.active { color: var(--application-background-color); background: var(--primary-accent-color); border-color: var(--primary-accent-color); }
.session-actions { justify-self: end; display: flex; align-items: center; gap: .4rem; }
.session-button { white-space: nowrap; }
.danger-button { border-color: rgb(from var(--danger-status-color) r g b / .55); color: var(--danger-status-color); }
.danger-button:hover, .danger-button:focus-visible { border-color: var(--danger-status-color); }
.session-file-input { display: none; }
.notice {
    position: fixed;
    z-index: 100;
    top: 64px;
    left: 50%;
    max-width: min(42rem, calc(100vw - 2rem));
    padding: .65rem 1rem;
    transform: translateX(-50%);
    border: 1px solid var(--warning-status-color);
    border-radius: 5px;
    background: rgb(from var(--warning-status-color) r g b / .3);
    box-shadow: 0 .45rem 1.2rem rgb(from var(--shadow-base-color) r g b / .6);
    text-align: center;
    pointer-events: none;
}
.main-layout { position: relative; flex: 1; display: flex; min-height: 0; }
.workspace { position: relative; flex: 1; min-width: 0; overflow: hidden; background-color: var(--application-background-color); background-image: radial-gradient(rgb(from var(--interface-border-color) r g b / .55) 1px, rgb(from var(--shadow-base-color) r g b / 0) 1px); background-size: 22px 22px; }
.component-panel { width: var(--component-panel-width); flex: 0 0 var(--component-panel-width); border-left: 1px solid var(--interface-border-color); background: var(--panel-background-color); display: flex; flex-direction: column; min-height: 0; }
.component-panel.compact { position: absolute; z-index: 40; top: 0; right: 0; width: var(--component-panel-width); height: 45px; min-height: 45px; flex: none; border-bottom: 1px solid var(--interface-border-color); }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: .55rem .7rem; border-bottom: 1px solid var(--interface-border-color); }
.component-panel.compact .panel-content { display: none; }
.panel-content { padding: .65rem; overflow-y: auto; }
.component-group { padding: .4rem 0 .8rem; }
.component-group + .component-group { padding-top: 1.6rem; }
.component-group-title { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .65rem; margin: 0 0 .8rem; color: var(--secondary-text-color); font-size: 1.56rem; line-height: 1; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.component-group-title::before, .component-group-title::after { content: ""; width: 100%; border-top: 1px solid var(--interface-border-color); }
.component-group-title::before { justify-self: end; }
.component-group-title::after { justify-self: start; }
.component-group .creator { padding: 0; margin-bottom: .8rem; border: 0; border-radius: 0; background: rgb(from var(--shadow-base-color) r g b / 0); }
.component-group .tray { min-height: 0; padding-top: 0; margin-top: 0; border-top: 0; }
.component-group .tray > h3 { margin: 0 0 .55rem; font-size: .9rem; }
.creator { padding: .65rem; margin-bottom: .65rem; border: 1px solid var(--interface-border-color); border-radius: 6px; background: var(--panel-background-color); }
.creator h3 { margin: 0 0 .55rem; font-size: .9rem; }
.creator-row { display: flex; gap: .4rem; margin-top: .45rem; }
.creator-row > :first-child { flex: 1; }
.component-group .creator button, .component-group .creator .import-names-button { width: calc(50% - .2rem); flex: 0 0 calc(50% - .2rem); justify-content: center; }
.component-group .creator .compact-action-row button { width: calc(33.333% - .14rem); flex-basis: calc(33.333% - .14rem); }
.component-group .creator .ship-action-row button { width: calc(40% - .16rem); flex-basis: calc(40% - .16rem); white-space: nowrap; }
.component-group .creator .org-action-row button { width: calc(40% - .16rem); flex-basis: calc(40% - .16rem); white-space: nowrap; }
.component-group .creator .feature-action-row button { width: calc(40% - .16rem); flex-basis: calc(40% - .16rem); white-space: nowrap; }
.import-names-button { display: inline-flex; align-items: center; padding: .42rem .7rem; color: var(--primary-text-color); background: var(--form-control-background-color); border: 1px solid var(--interface-border-color); border-radius: 4px; cursor: pointer; white-space: nowrap; }
.import-names-button:hover, .import-names-button:focus-visible { border-color: var(--primary-accent-color); }
.tray { border-top: 1px solid var(--interface-border-color); padding-top: .65rem; margin-top: .65rem; min-height: 90px; }
.tray-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.tray-header h3 { margin: 0; font-size: .9rem; }
.delete-all-button { flex: none; padding: .2rem .4rem; color: var(--danger-status-color); border-color: rgb(from var(--danger-status-color) r g b / .5); font-size: .72rem; }
.delete-all-button:disabled { cursor: not-allowed; opacity: .45; }
.tray-list { display: flex; flex-wrap: wrap; gap: .4rem; min-height: 46px; padding: .35rem; border: 1px dashed rgb(from var(--interface-border-color) r g b / .8); border-radius: 5px; }
.mini-card { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem; background: var(--raised-panel-background-color); border: 1px solid rgb(from var(--interface-border-color) r g b / .8); border-radius: 4px; cursor: grab; max-width: 100%; }
.mini-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-card.ship { border-color: var(--ship-color); }
.mini-card.crew { border-color: var(--crew-color); }
.crew-marker-toggle { cursor: pointer; border-radius: 2px; }
.crew-marker-toggle:focus-visible { outline: 2px solid var(--primary-accent-color); outline-offset: 2px; }
.mini-card.crew-marker-1, .crew-row.crew-marker-1 { color: var(--crew-marker-text-color); background: var(--crew-marker-one-color); border-color: var(--crew-marker-one-color); }
.mini-card.crew-marker-2, .crew-row.crew-marker-2 { color: var(--crew-marker-text-color); background: var(--crew-marker-two-color); border-color: var(--crew-marker-two-color); }
.mini-card.feature { border-color: var(--tactical-feature-color); }
.empty-hint { color: var(--secondary-text-color); font-size: .78rem; align-self: center; }
.drop-valid { outline: 2px solid var(--success-status-color) !important; outline-offset: -2px; }
.drop-invalid { outline: 2px solid var(--danger-status-color) !important; outline-offset: -2px; }
.community-emblem { position: absolute; z-index: 15; left: 12px; bottom: 12px; width: 150px; height: 150px; padding: 0; border: 0; border-radius: 6px; background: rgb(from var(--shadow-base-color) r g b / 0); }
.community-emblem img { display: block; width: 150px; height: 150px; object-fit: contain; }
.community-emblem:hover, .community-emblem:focus-visible { border-color: rgb(from var(--shadow-base-color) r g b / 0); outline: 2px solid var(--primary-accent-color); outline-offset: 3px; }
.trademark-notice { position: absolute; z-index: 15; left: calc(50% + 49px); bottom: 12px; transform: translateX(-50%); color: var(--secondary-text-color); font-size: .72rem; line-height: 1.35; text-align: center; white-space: nowrap; pointer-events: none; }
.trademark-notice span { display: block; }
.delete-bin { position: absolute; z-index: 50; right: 12px; bottom: 12px; width: 104px; height: 104px; display: grid; place-items: center; background: rgb(from var(--danger-status-color) r g b / .18); border: 2px dashed var(--danger-status-color); border-radius: 8px; color: var(--danger-status-color); font-size: 3.3rem; cursor: default; }
.delete-bin::after { content: attr(data-tooltip); position: absolute; right: 0; bottom: calc(100% + 9px); width: max-content; max-width: 190px; padding: .4rem .55rem; border: 1px solid var(--interface-border-color); border-radius: 4px; color: var(--primary-text-color); background: var(--form-control-background-color); box-shadow: 0 4px 14px rgb(from var(--shadow-base-color) r g b / .6); font-size: .78rem; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.delete-bin:hover::after, .delete-bin:focus-visible::after { opacity: 1; transform: translateY(0); }
.confirm-dialog { position: fixed; inset: 0; width: min(430px, calc(100vw - 2rem)); margin: auto; padding: 1.1rem; border: 1px solid var(--interface-border-color); border-radius: 8px; color: var(--primary-text-color); background: var(--panel-background-color); box-shadow: 0 18px 60px rgb(from var(--shadow-base-color) r g b / .8); }
.confirm-dialog::backdrop { background: rgb(from var(--shadow-base-color) r g b / .78); }
.confirm-dialog h2 { margin: 0 0 .65rem; font-size: 1.05rem; }
.confirm-dialog p { margin: 0; color: var(--secondary-text-color); line-height: 1.45; }
.confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.confirm-delete { color: var(--contrast-text-color); background: rgb(from var(--danger-status-color) r g b / .55); border-color: var(--danger-status-color); }
.crew-list-dialog { position: fixed; inset: 0; width: min(400px, calc(100vw - 2rem)); max-height: min(70vh, 680px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--interface-border-color); border-radius: 8px; color: var(--primary-text-color); background: var(--panel-background-color); box-shadow: 0 18px 60px rgb(from var(--shadow-base-color) r g b / .8); }
.crew-list-dialog.advanced-crew-dialog { width: min(710px, calc(100vw - 2rem)); }
.crew-list-dialog::backdrop { background: rgb(from var(--shadow-base-color) r g b / .78); }
.crew-list-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--interface-border-color); }
.crew-list-dialog-header h2 { margin: 0; font-size: 1.05rem; }
.crew-list-dialog-content { display: flex; flex-direction: column; max-height: calc(min(70vh, 680px) - 55px); padding: .65rem; overflow: hidden; }
.crew-list-dialog-search { flex: none; margin-bottom: .55rem; }
.crew-list-dialog-results { min-height: 0; overflow-y: auto; }
.crew-list-dialog-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-height: 42px; padding: .4rem .5rem; border-bottom: 1px solid rgb(from var(--interface-border-color) r g b / .5); }
.advanced-crew-list .crew-list-dialog-row { grid-template-columns: minmax(0, 1fr) 150px 150px 116px; }
.crew-list-dialog-row:last-child { border-bottom: 0; }
.crew-list-dialog-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-list-dialog-actions { display: flex; gap: .4rem; }
.crew-list-column-headings { display: grid; grid-template-columns: minmax(0, 1fr) 150px 150px 116px; gap: .75rem; padding: .3rem .5rem; color: var(--secondary-text-color); border-bottom: 1px solid var(--interface-border-color); font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.crew-list-dialog-locations { display: contents; }
.crew-location-select { width: 150px; margin: 0; padding: .28rem .35rem; font-size: .72rem; }
.crew-list-bulk-row { background: rgb(from var(--primary-accent-color) r g b / .08); }
.crew-list-dialog-row .inline-name-editor { width: 100%; }
.advanced-crew-toggle { display: flex; align-items: center; justify-content: space-between; gap: .55rem; margin-top: .65rem; padding: .45rem .5rem; color: var(--primary-text-color); font-size: .82rem; font-weight: 700; }
.advanced-crew-toggle input { width: auto; margin: 0; }
.workspace-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--secondary-text-color); pointer-events: none; font-size: 1.1rem; }
.org-card { position: absolute; width: fit-content; min-width: 270px; max-width: 660px; padding: .55rem; border: 1px solid var(--organization-color); border-radius: 6px; background: rgb(from var(--panel-background-color) r g b / .96); box-shadow: 0 7px 25px rgb(from var(--shadow-base-color) r g b / .53); }
.org-card.nested { position: static; margin-top: .5rem; max-width: none; min-width: 250px; box-shadow: none; }
.org-resize-handle { position: absolute; z-index: 7; right: -5px; bottom: -5px; width: 17px; height: 17px; border-right: 3px solid var(--organization-color); border-bottom: 3px solid var(--organization-color); border-radius: 0 0 4px; cursor: nwse-resize; touch-action: none; }
.org-resize-handle::before { content: ""; position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px; border-right: 2px solid rgb(from var(--organization-color) r g b / .72); border-bottom: 2px solid rgb(from var(--organization-color) r g b / .72); }
.org-card.resizing-org, .org-card.resizing-org .org-resize-handle { cursor: nwse-resize; user-select: none; }
.setup-resize-preview { position: fixed; z-index: 20; box-sizing: border-box; margin: 0; opacity: .62; pointer-events: none; }
.resize-preview-card { border-style: dashed; }
.setup-resize-preview .org-resize-handle { display: none; }
/* #region Setup card sizing */
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-card { min-width: min-content; }
.setup-workspace .org-card { max-width: var(--setup-card-max-width, 660px); }
.drag-ghost .org-card { max-width: none; }
.setup-resize-preview .org-card { max-width: none; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-card.nested { min-width: min-content; }
.drag-ghost .org-contents { width: 100%; padding: 0; border: 0; }
.setup-resize-preview .org-contents { width: 100%; padding: 0; border: 0; }
/* #endregion */
.card-header { display: flex; align-items: center; gap: .4rem; min-height: 28px; }
.card-title { font-weight: 700; flex: 1; overflow-wrap: anywhere; }
.setup-location-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.setup-location-header > .card-title { grid-column: 1; grid-row: 1; }
.setup-location-header > .icon-button { grid-column: 2; grid-row: 1; }
.setup-location-header > .root-location { grid-column: 1 / -1; grid-row: 2; min-width: 0; justify-content: flex-start; margin-top: .15rem; white-space: nowrap; }
.setup-location-header .location-label, .setup-location-header .location-ancestors, .setup-location-header .feature-symbol, .setup-location-header .location-icon { flex: 0 0 auto; }
.setup-location-header .location-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inline-name-editor { flex: 1; min-width: 0; padding: .25rem .35rem; font-weight: 700; border-color: var(--primary-accent-color); }
.icon-button { padding: .2rem .35rem; font-size: .75rem; }
.org-contents { position: relative; width: auto; margin-top: .45rem; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.org-children { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.org-ships { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-contents { flex-flow: row wrap; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) :is(.org-children, .org-ships) { display: contents; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-children > .org-card.nested { flex: 0 0 auto; margin-top: 0; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-ships > .ship-card { flex: 0 0 var(--standard-ship-card-width); }
.ship-card { position: relative; width: var(--standard-ship-card-width); border: 1px solid var(--ship-color); border-radius: 5px; overflow: hidden; background: rgb(from var(--ship-color) r g b / .15); cursor: grab; }
.ship-card > .card-header { padding: .35rem .45rem; }
.ship-card-body { position: relative; }
.ship-card.non-operational > .card-header, .ship-card.non-operational > .ship-card-body > .ship-image, .ship-card.non-operational > .ship-card-body > .ship-placeholder, .ship-card.non-operational > .ship-card-body > .status-row { filter: grayscale(1); opacity: .58; }
.out-of-action-mark { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; overflow: hidden; color: rgb(from var(--out-of-action-paint-color) r g b / .84); font-family: "Protest Revolution", Impact, sans-serif; font-size: 15.6rem; line-height: .72; text-shadow: 0 0 1px var(--out-of-action-paint-color); user-select: none; pointer-events: none; }
.out-of-action-mark-glyph { position: absolute; left: 50%; bottom: 0; display: block; line-height: .72; transform: translateX(-50%) rotate(-8deg) scale(1.08, 1.32); transform-origin: center bottom; }
.out-of-action-mark.scaled-x .out-of-action-mark-glyph { line-height: 1; transform: translateX(-50%) rotate(-8deg); }
.ship-image { width: 100%; height: 95px; object-fit: cover; display: block; background: linear-gradient(135deg, rgb(from var(--interface-border-color) r g b / .6), var(--application-background-color)); }
.ship-placeholder { height: 95px; display: grid; place-items: center; color: var(--secondary-text-color); background: linear-gradient(135deg, rgb(from var(--interface-border-color) r g b / .6), var(--application-background-color)); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .35rem calc(.63rem + 1px) .35rem .45rem; border-top: 1px solid rgb(from var(--ship-color) r g b / .55); font-size: .82rem; }
.status-row input { width: auto; }
.crew-list { padding: .35rem; border-top: 1px dashed var(--ship-color); min-height: 32px; }
.ship-card-body > .crew-list { border-top: 0; }
.org-crew-list { width: 100%; border: 0; }
:is(.setup-workspace, .setup-drag-ghost, .setup-resize-preview) .org-card:not(.crew-without-ships) > .org-contents > .org-crew-list { flex: 0 0 var(--standard-ship-card-width); width: var(--standard-ship-card-width); }
.crew-row { position: relative; display: flex; align-items: center; gap: .35rem; padding: .28rem; overflow: hidden; border: 1px solid rgb(from var(--crew-color) r g b / .7); margin-bottom: .25rem; background: rgb(from var(--crew-color) r g b / .14); cursor: grab; font-size: .78rem; }
.crew-row.non-operational { color: var(--primary-text-color); background: color-mix(in srgb, var(--out-of-action-paint-color) 28%, var(--form-control-background-color)); border-color: var(--out-of-action-paint-color); box-shadow: inset 0 0 0 1px var(--out-of-action-paint-color), 0 0 5px rgb(from var(--out-of-action-paint-color) r g b / .38); }
.crew-row.non-operational::after { content: ""; position: absolute; z-index: 1; inset: 0; background: repeating-linear-gradient(135deg, rgb(from var(--out-of-action-paint-color) r g b / 0) 0 8px, rgb(from var(--out-of-action-paint-color) r g b / .48) 8px 12px); pointer-events: none; }
.crew-row.non-operational > * { position: relative; z-index: 2; }
.crew-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-row.non-operational > span { text-decoration: line-through; text-decoration-thickness: 1px; }
.crew-row input { width: auto; }
.crew-status { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: .3rem; white-space: nowrap; }
.crew-row.non-operational > .crew-status { font-weight: 700; }
.ship-card.non-operational .crew-row { color: var(--secondary-text-color); }
.ship-card.non-operational :is(.crew-row.crew-marker-1, .crew-row.crew-marker-2) { color: color-mix(in srgb, var(--crew-marker-text-color) 82%, var(--secondary-text-color)); }
.ship-card.non-operational .crew-row:not(.crew-marker-1):not(.crew-marker-2):not(.non-operational) { background: color-mix(in srgb, var(--secondary-text-color) 14%, var(--form-control-background-color)); border-color: rgb(from var(--secondary-text-color) r g b / .55); }
.free-layer { position: absolute; inset: 0; pointer-events: none; }
.free-layer > * { pointer-events: auto; }
.free-mini { position: absolute; }
.settings { position: absolute; z-index: 320; top: 12px; left: 12px; width: 185px; display: flex; flex-direction: column; gap: .5rem; padding: .65rem; background: rgb(from var(--panel-background-color) r g b / .94); border: 1px solid var(--interface-border-color); border-radius: 6px; }
.settings h3 { margin: 0; font-size: .85rem; }
.settings label { display: flex; gap: .4rem; align-items: center; font-size: .8rem; margin: 0; }
.settings input { width: auto; }
.settings input[type="checkbox"] { margin: 0; }
.settings button { width: 100%; margin: 0; }
.settings .entity-search { width: 100%; margin: 0; }
.settings .entity-search::placeholder { text-align: center; }
.entity-search-mask { position: absolute; z-index: 300; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.entity-search-dimmer { fill: rgb(from var(--shadow-base-color) r g b / .60); }
.entity-search-outline { fill: none; stroke: var(--primary-accent-color); stroke-width: 3px; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--primary-accent-color)); }
.component-panel .entity-search-match { position: relative; z-index: 1; outline: 2px solid var(--primary-accent-color); outline-offset: 4px; box-shadow: 0 0 7px rgb(from var(--primary-accent-color) r g b / .75); }
.color-scheme-picker { min-width: 0; padding: 0; margin: 0; border: 0; }
.color-scheme-options { display: flex; justify-content: space-between; gap: 1rem; padding: 0 .2rem; }
.settings .color-scheme-option { position: relative; flex: none; display: block; margin: 0; cursor: pointer; }
.color-scheme-swatch { display: block; width: 38px; height: 38px; border: 1px solid var(--interface-border-color); border-radius: 6px; background: linear-gradient(120deg, var(--scheme-primary) 0 59%, color-mix(in srgb, var(--scheme-primary), var(--scheme-secondary)) 60%, var(--scheme-secondary) 61% 89%, color-mix(in srgb, var(--scheme-secondary), var(--scheme-accent)) 90%, var(--scheme-accent) 91% 100%); box-shadow: inset 0 0 0 1px rgb(from var(--primary-text-color) r g b / .08); }
.color-scheme-swatch::after { content: attr(data-scheme-name); position: absolute; left: 50%; bottom: calc(100% + 7px); z-index: 5; width: max-content; padding: .28rem .42rem; transform: translate(-50%, 3px); border: 1px solid var(--interface-border-color); border-radius: 4px; color: var(--primary-text-color); background: var(--form-control-background-color); box-shadow: 0 4px 12px rgb(from var(--shadow-base-color) r g b / .55); font-size: .68rem; line-height: 1; opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
.color-scheme-option:hover .color-scheme-swatch::after, .color-scheme-option:focus-within .color-scheme-swatch::after { opacity: 1; transform: translate(-50%, 0); }
.scheme-default { --scheme-primary: #121b26; --scheme-secondary: #36506b; --scheme-accent: #4dc3ff; }
.scheme-quantum-blue { --scheme-primary: #0b182a; --scheme-secondary: #4f8fc1; --scheme-accent: #4eb4f8; }
.scheme-crimson-nebula { --scheme-primary: #260b16; --scheme-secondary: #c65378; --scheme-accent: #ff4fa3; }
.color-scheme-option input:checked + .color-scheme-swatch { border-color: var(--primary-accent-color); box-shadow: 0 0 0 2px var(--primary-accent-color), inset 0 0 0 1px rgb(from var(--primary-text-color) r g b / .18); }
.color-scheme-option input:focus-visible + .color-scheme-swatch { outline: 2px solid var(--primary-text-color); outline-offset: 3px; }
.settings .crew-color-ledger { display: flex; flex-direction: column; gap: .5rem; }
.settings .crew-color-ledger-row { gap: .4rem; }
.crew-color-ledger-swatch { flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; border: 2px solid; border-radius: 4px; }
.crew-color-ledger-swatch.crew-marker-1 { background: var(--crew-marker-one-color); border-color: var(--crew-marker-one-color); }
.crew-color-ledger-swatch.crew-marker-2 { background: var(--crew-marker-two-color); border-color: var(--crew-marker-two-color); }
.settings .crew-color-ledger-input { min-width: 0; width: 100%; padding: .3rem .4rem; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; }
.map-viewport.panning { cursor: grabbing; }
.map-world { position: absolute; left: 0; top: 0; width: 4000px; height: 3000px; transform-origin: 0 0; }
.alignment-guide { position: fixed; z-index: 1000; background: rgb(from var(--primary-accent-color) r g b / .72); box-shadow: 0 0 6px rgb(from var(--primary-accent-color) r g b / .72); pointer-events: none; }
.alignment-guide.horizontal { left: 0; right: 0; height: 1px; }
.alignment-guide.horizontal.spacing { height: 2px; background: repeating-linear-gradient(to right, rgb(from var(--success-status-color) r g b / .9) 0 8px, rgb(from var(--shadow-base-color) r g b / 0) 8px 14px); box-shadow: 0 0 6px rgb(from var(--success-status-color) r g b / .65); }
.alignment-guide.vertical { top: 0; bottom: 0; width: 1px; }
.alignment-guide.vertical.spacing { width: 2px; background: repeating-linear-gradient(to bottom, rgb(from var(--success-status-color) r g b / .9) 0 8px, rgb(from var(--shadow-base-color) r g b / 0) 8px 14px); box-shadow: 0 0 6px rgb(from var(--success-status-color) r g b / .65); }
.alignment-guide.centered { filter: brightness(1.35); }
/* #region Tactical features */
.feature-card { position: absolute; min-width: 250px; max-width: 540px; padding: .6rem; border: 2px dashed var(--primary-accent-color); border-radius: 12px; background: rgb(from var(--panel-background-color) r g b / .9); }
.feature-card.nested { position: static; width: 100%; min-width: 230px; max-width: none; border-color: rgb(from var(--tactical-feature-color) r g b / .75); background: rgb(from var(--raised-panel-background-color) r g b / .96); }
.feature-header { position: relative; display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; cursor: grab; }
.feature-header::after { content: attr(data-feature-type); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; width: max-content; max-width: 220px; padding: .35rem .5rem; border: 1px solid var(--interface-border-color); border-radius: 4px; color: var(--primary-text-color); background: var(--form-control-background-color); box-shadow: 0 4px 14px rgb(from var(--shadow-base-color) r g b / .6); font-size: .78rem; line-height: 1.25; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.feature-header:hover::after, .feature-header:focus-within::after { opacity: 1; transform: translateY(0); }
.feature-symbol { flex: none; width: 30px; height: 30px; border: 2px solid var(--primary-text-color); background: var(--ground-location-symbol-color); }
.feature-symbol.star, .feature-symbol.planet, .feature-symbol.moon { border-radius: 50%; }
.feature-symbol.system { border-radius: 50%; background: radial-gradient(circle, rgb(from var(--tactical-symbol-accent-color) r g b / .55) 0 18%, rgb(from var(--shadow-base-color) r g b / 0) 20% 48%, rgb(from var(--tactical-symbol-accent-color) r g b / .25) 50% 56%, rgb(from var(--shadow-base-color) r g b / 0) 58%); border-color: var(--tactical-symbol-accent-color); box-shadow: 0 0 12px rgb(from var(--tactical-symbol-accent-color) r g b / .75); }
.feature-symbol.star { background: var(--star-symbol-color); box-shadow: 0 0 14px var(--star-symbol-color); }
.feature-symbol.planet { background: var(--planet-symbol-color); }
.feature-symbol.moon { width: 23px; height: 23px; margin: 3.5px; background: var(--moon-symbol-color); box-shadow: inset -6px -3px 0 rgb(from var(--shadow-base-color) r g b / .4); }
.feature-symbol.station { width: 24px; height: 24px; transform: rotate(45deg); background: var(--station-symbol-color); margin: 3px; }
.feature-symbol.area { border-radius: 8px; background: rgb(from var(--shadow-base-color) r g b / 0); border-style: dashed; }
.feature-symbol.asteroid-belt { height: 18px; margin: 6px 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 12% 60%, var(--asteroid-symbol-color) 0 2px, rgb(from var(--shadow-base-color) r g b / 0) 3px), radial-gradient(circle at 31% 25%, rgb(from var(--asteroid-symbol-color) r g b / .72) 0 3px, rgb(from var(--shadow-base-color) r g b / 0) 4px), radial-gradient(circle at 52% 68%, rgb(from var(--asteroid-symbol-color) r g b / .86) 0 2px, rgb(from var(--shadow-base-color) r g b / 0) 3px), radial-gradient(circle at 73% 30%, rgb(from var(--asteroid-symbol-color) r g b / .78) 0 3px, rgb(from var(--shadow-base-color) r g b / 0) 4px), radial-gradient(circle at 91% 62%, rgb(from var(--asteroid-symbol-color) r g b / .92) 0 2px, rgb(from var(--shadow-base-color) r g b / 0) 3px); box-shadow: 0 0 0 1px rgb(from var(--asteroid-symbol-color) r g b / .65); }
.feature-symbol.jump-point { border-radius: 50%; background: var(--tactical-symbol-surface-color); border-color: var(--tactical-symbol-accent-color); box-shadow: inset 0 0 0 5px rgb(from var(--tactical-symbol-accent-color) r g b / .45), 0 0 10px var(--tactical-symbol-accent-color); }
.feature-symbol.city { border: 0; background: repeating-linear-gradient(90deg, var(--city-symbol-color) 0 5px, rgb(from var(--shadow-base-color) r g b / 0) 5px 8px), linear-gradient(to top, rgb(from var(--city-symbol-color) r g b / .65) 0 65%, rgb(from var(--shadow-base-color) r g b / 0) 65%); box-shadow: inset 0 -2px var(--primary-text-color); }
.feature-symbol.outpost { width: 26px; height: 22px; margin: 4px 2px; background: var(--outpost-symbol-color); border-color: var(--primary-text-color); clip-path: polygon(50% 0, 100% 35%, 88% 100%, 12% 100%, 0 35%); }
.feature-symbol.ground-location { border-radius: 50% 50% 50% 0; background: var(--ground-location-symbol-color); border-color: var(--primary-text-color); transform: rotate(-45deg) scale(.8); }
.feature-symbol.orbital-marker { border-radius: 50%; background: radial-gradient(circle, var(--contrast-text-color) 0 3px, rgb(from var(--shadow-base-color) r g b / 0) 4px), var(--tactical-symbol-surface-color); border-color: var(--tactical-symbol-accent-color); box-shadow: 0 0 0 4px var(--tactical-symbol-surface-color), 0 0 0 6px rgb(from var(--tactical-symbol-accent-color) r g b / .6); transform: scale(.68); }
.root-location { display: inline-flex; flex: none; align-items: center; gap: .28rem; color: var(--secondary-text-color); font-size: .72rem; font-weight: 500; white-space: nowrap; }
.root-location .feature-symbol { width: 14px; height: 14px; margin: 0; border-width: 1px; box-shadow: none; }
.root-location .location-icon { width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--secondary-text-color); font-size: .8rem; line-height: 1; }
.root-location .location-icon.unassigned { color: rgb(from var(--secondary-text-color) r g b / .7); }
.root-location .location-ancestors { min-width: 0; white-space: nowrap; }
.root-location .location-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-path-abbreviated, .location-path-minimal { display: none; }
.root-location.location-measuring .location-name { flex: none; overflow: visible; text-overflow: clip; }
.feature-assignees { min-height: 50px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .45rem; }
.feature-assignees .org-card { position: static; min-width: 250px; max-width: calc(422px + 1.6rem); box-shadow: none; }
.org-card.crew-without-ships { width: var(--standard-ship-card-width); min-width: var(--standard-ship-card-width); max-width: var(--standard-ship-card-width); }
.setup-workspace .org-card.nested.empty-org { width: var(--standard-ship-card-width); min-width: var(--standard-ship-card-width); max-width: var(--standard-ship-card-width); }
.org-card.crew-only-non-operational { overflow: hidden; }
.org-card.nested.crew-only-non-operational { position: relative; }
.org-card.crew-only-non-operational > .out-of-action-mark { top: calc(.55rem + 28px); right: .55rem; bottom: .55rem; left: .55rem; }
/* #endregion */
.tactical-unit { cursor: grab; }
.tactical-workspace { background-image: radial-gradient(rgb(from var(--holographic-grid-color) r g b / .72) 1px, rgb(from var(--shadow-base-color) r g b / 0) 1px), linear-gradient(rgb(from var(--holographic-grid-color) r g b / .15) 1px, rgb(from var(--shadow-base-color) r g b / 0) 1px), linear-gradient(90deg, rgb(from var(--holographic-grid-color) r g b / .15) 1px, rgb(from var(--shadow-base-color) r g b / 0) 1px); background-size: 22px 22px, 110px 110px, 110px 110px; }
.tactical-map-viewport { isolation: isolate; background: radial-gradient(circle at 50% 50%, rgb(from var(--holographic-grid-color) r g b / .13), rgb(from var(--shadow-base-color) r g b / 0) 52%); }
.tactical-map-viewport { cursor: none; }
.tactical-map-viewport.panning { cursor: grabbing; }
.tactical-crosshair { --tactical-crosshair-radius: 15px; --tactical-crosshair-gap: 3px; position: absolute; z-index: 300; top: 0; left: 0; width: 0; height: 0; color: var(--primary-accent-color); opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(-100px, -100px, 0); will-change: transform; contain: layout style; }
.tactical-crosshair.visible { opacity: 1; visibility: visible; }
.tactical-crosshair-ray { position: absolute; box-shadow: 0 0 1px var(--shadow-base-color), 0 0 3px currentColor; }
.tactical-crosshair-ray.left, .tactical-crosshair-ray.right { top: 0; width: 100vw; height: 1px; }
.tactical-crosshair-ray.left { right: calc(var(--tactical-crosshair-radius) + var(--tactical-crosshair-gap)); }
.tactical-crosshair-ray.left { background: linear-gradient(to left, currentColor 0, rgb(from var(--primary-accent-color) r g b / .88) 80px, rgb(from var(--primary-accent-color) r g b / .72) 180px, rgb(from var(--primary-accent-color) r g b / .55) 320px, rgb(from var(--primary-accent-color) r g b / .4) 500px, rgb(from var(--primary-accent-color) r g b / .28) 720px, rgb(from var(--primary-accent-color) r g b / .2) 1000px); }
.tactical-crosshair-ray.right { left: calc(var(--tactical-crosshair-radius) + var(--tactical-crosshair-gap)); background: linear-gradient(to right, currentColor 0, rgb(from var(--primary-accent-color) r g b / .88) 80px, rgb(from var(--primary-accent-color) r g b / .72) 180px, rgb(from var(--primary-accent-color) r g b / .55) 320px, rgb(from var(--primary-accent-color) r g b / .4) 500px, rgb(from var(--primary-accent-color) r g b / .28) 720px, rgb(from var(--primary-accent-color) r g b / .2) 1000px); }
.tactical-crosshair-ray.top, .tactical-crosshair-ray.bottom { left: 0; width: 1px; height: 100vh; }
.tactical-crosshair-ray.top { bottom: calc(var(--tactical-crosshair-radius) + var(--tactical-crosshair-gap)); }
.tactical-crosshair-ray.top { background: linear-gradient(to top, currentColor 0, rgb(from var(--primary-accent-color) r g b / .88) 80px, rgb(from var(--primary-accent-color) r g b / .72) 180px, rgb(from var(--primary-accent-color) r g b / .55) 320px, rgb(from var(--primary-accent-color) r g b / .4) 500px, rgb(from var(--primary-accent-color) r g b / .28) 720px, rgb(from var(--primary-accent-color) r g b / .2) 1000px); }
.tactical-crosshair-ray.bottom { top: calc(var(--tactical-crosshair-radius) + var(--tactical-crosshair-gap)); background: linear-gradient(to bottom, currentColor 0, rgb(from var(--primary-accent-color) r g b / .88) 80px, rgb(from var(--primary-accent-color) r g b / .72) 180px, rgb(from var(--primary-accent-color) r g b / .55) 320px, rgb(from var(--primary-accent-color) r g b / .4) 500px, rgb(from var(--primary-accent-color) r g b / .28) 720px, rgb(from var(--primary-accent-color) r g b / .2) 1000px); }
.tactical-crosshair-ring { position: absolute; left: 0; top: 0; width: calc(var(--tactical-crosshair-radius) * 2); height: calc(var(--tactical-crosshair-radius) * 2); border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 1px rgb(from var(--shadow-base-color) r g b / .9), inset 0 0 0 1px rgb(from var(--primary-text-color) r g b / .45), 0 0 8px rgb(from var(--primary-accent-color) r g b / .72); transform: translate(-50%, -50%); }
.tactical-crosshair-ring::after { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 1px rgb(from var(--shadow-base-color) r g b / .9); content: ""; transform: translate(-50%, -50%); }
.tactical-map-world { width: 4000px; height: 3000px; background: none; }
.tactical-backdrop-layer { position: absolute; inset: 0; z-index: 0; overflow: visible; pointer-events: none; }
.tactical-backdrop-frame { position: absolute; display: flex; flex-direction: column; border: 1px solid rgb(from var(--holographic-line-color) r g b / .85); background: rgb(from var(--shadow-base-color) r g b / .2); box-shadow: 0 0 12px rgb(from var(--holographic-line-color) r g b / .28); pointer-events: auto; }
.tactical-backdrop-frame[draggable="true"] { cursor: grab; }
.tactical-backdrop-frame.opacity-open { cursor: default; }
.tactical-backdrop-frame.locked { border-style: dashed; border-color: rgb(from var(--secondary-text-color) r g b / .8); box-shadow: none; pointer-events: none; }
.tactical-backdrop-header { height: 24px; display: flex; align-items: center; justify-content: space-between; padding: 3px 3px 3px .5rem; box-sizing: border-box; color: var(--primary-text-color); background: rgb(from var(--panel-background-color) r g b / .94); font-size: .68rem; font-weight: 700; letter-spacing: .04em; cursor: grab; user-select: none; }
.tactical-backdrop-frame.locked .tactical-backdrop-header { cursor: default; }
.tactical-backdrop-frame .inspector-pin-button { flex: none; }
.tactical-backdrop-frame.locked .inspector-pin-button { pointer-events: auto; }
.tactical-backdrop-actions { position: relative; display: flex; align-items: center; gap: 2px; }
.tactical-backdrop-actions :is(.tactical-backdrop-invert-button, .tactical-backdrop-opacity-button, .inspector-pin-button) { width: 18px; min-width: 18px; height: 18px; padding: 0; box-sizing: border-box; }
.tactical-backdrop-actions .inspector-pin-button { --pin-icon-scale: .75; --pin-head-top: 2px; --pin-stem-top: 7px; overflow: hidden; }
.tactical-backdrop-invert-button, .tactical-backdrop-opacity-button { position: relative; color: var(--secondary-text-color); background: transparent; line-height: 1; }
.tactical-backdrop-invert-button:hover, .tactical-backdrop-invert-button:focus-visible, .tactical-backdrop-opacity-button:hover, .tactical-backdrop-opacity-button:focus-visible { color: var(--holographic-line-color); border-color: var(--holographic-line-color); outline: none; }
.tactical-backdrop-invert-button[aria-pressed="true"] { color: var(--primary-accent-color); border-color: var(--primary-accent-color); background: rgb(from var(--primary-accent-color) r g b / .18); box-shadow: inset 0 0 6px rgb(from var(--primary-accent-color) r g b / .22); }
.tactical-backdrop-opacity-button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 1px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; }
.tactical-backdrop-opacity-button::after { content: ""; position: absolute; left: 6px; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 4px 4px 0 currentColor, -2px 8px 0 currentColor; }
.tactical-backdrop-opacity-slider { position: absolute; right: calc(100% + .3rem); width: 0; height: 1.55rem; padding: 0; opacity: 0; pointer-events: none; transition: width .16s ease, opacity .16s ease; }
.tactical-backdrop-opacity-slider.open { width: 112px; opacity: 1; pointer-events: auto; }
.tactical-backdrop-image { display: block; max-width: none; object-fit: fill; user-select: none; pointer-events: none; }
.tactical-backdrop-image.inverted { filter: invert(1); }
.tactical-backdrop-resize { position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border: 2px solid var(--holographic-line-color); border-radius: 2px; background: var(--tactical-symbol-surface-color); cursor: nwse-resize; }
.tactical-backdrop-move-preview { position: absolute; z-index: 2; border: 2px dashed var(--primary-accent-color); background: rgb(from var(--primary-accent-color) r g b / .12); box-shadow: 0 0 14px rgb(from var(--primary-accent-color) r g b / .42); pointer-events: none; }
.tactical-world-svg, .tactical-token-layer { z-index: 1; }
.tactical-map-viewport.projection-25d { background: var(--application-background-color); }
.projection-25d .tactical-map-world { background: none; }
.tactical-world-svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.surface-scope-boundary { fill: rgb(from var(--holographic-area-color) r g b / .05); stroke: rgb(from var(--holographic-line-color) r g b / .44); stroke-width: 3px; stroke-dasharray: 18 12; }
.orbit-guide { fill: none; stroke: rgb(from var(--holographic-line-color) r g b / .22); stroke-width: 1.5px; stroke-dasharray: 5 9; vector-effect: non-scaling-stroke; }
.projection-25d .orbit-guide { stroke: rgb(from var(--holographic-line-color) r g b / .28); stroke-width: 1.5px; stroke-dasharray: 4 9; }
.orbit-motion-trail { filter: drop-shadow(0 0 5px rgb(from var(--holographic-line-color) r g b / .76)); pointer-events: none; }
.orbit-motion-trail-segment { fill: none; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.tactical-map-viewport.panning .orbit-motion-trail { filter: none; }
.orbit-drop-zone { fill: none; stroke: rgb(from var(--shadow-base-color) r g b / 0); stroke-width: 28px; cursor: ew-resize; pointer-events: stroke; }
.resizing-orbit, .resizing-orbit .orbit-drop-zone { cursor: ew-resize; }
.orbit-drop-zone.drop-valid { stroke: rgb(from var(--success-status-color) r g b / .24); }
.orbit-drop-zone.drop-invalid { stroke: rgb(from var(--danger-status-color) r g b / .22); }
.relationship-line, .assignment-line { fill: none; vector-effect: non-scaling-stroke; }
.relationship-line { stroke: rgb(from var(--holographic-line-color) r g b / .82); stroke-width: 1.75px; stroke-dasharray: 7 6; filter: drop-shadow(0 0 1px rgb(from var(--shadow-base-color) r g b / .98)) drop-shadow(0 0 4px rgb(from var(--holographic-line-color) r g b / .82)); }
.assignment-line { stroke: rgb(from var(--primary-accent-color) r g b / .88); stroke-width: 1.75px; stroke-dasharray: 4 5; filter: drop-shadow(0 0 1px rgb(from var(--shadow-base-color) r g b / .98)) drop-shadow(0 0 4px rgb(from var(--primary-accent-color) r g b / .86)); }
.tactical-token-layer { position: absolute; inset: 0; pointer-events: none; }
.tactical-token { position: absolute; z-index: var(--tactical-depth, 4); display: flex; align-items: center; gap: .45rem; min-width: 112px; max-width: 250px; min-height: 46px; padding: .4rem .5rem; color: var(--primary-text-color); background: rgb(from var(--tactical-symbol-surface-color) r g b / .88); border: 1px solid rgb(from var(--holographic-line-color) r g b / .72); border-radius: 6px; box-shadow: 0 0 12px rgb(from var(--holographic-line-color) r g b / .16), inset 0 0 14px rgb(from var(--holographic-line-color) r g b / .06); cursor: pointer; pointer-events: auto; }
.projection-25d .tactical-token { box-shadow: 0 6px 18px rgb(from var(--shadow-base-color) r g b / .46), 0 0 14px rgb(from var(--holographic-line-color) r g b / .24), inset 0 0 14px rgb(from var(--holographic-line-color) r g b / .08); }
.projection-25d .tactical-feature-token.star::before { content: ""; position: absolute; z-index: -1; left: 25px; top: 50%; width: 640px; height: 360px; border-radius: 50%; background: radial-gradient(ellipse, rgb(from var(--star-symbol-color) r g b / .32) 0, rgb(from var(--star-symbol-color) r g b / .14) 22%, rgb(from var(--holographic-line-color) r g b / .07) 42%, rgb(from var(--shadow-base-color) r g b / 0) 70%); transform: translate(-50%, -50%); pointer-events: none; }
.projection-25d .tactical-feature-token.jump-point::before { content: ""; position: absolute; z-index: -1; left: 25px; top: 50%; width: 380px; height: 220px; border-radius: 50%; background: radial-gradient(ellipse, rgb(from var(--tactical-symbol-accent-color) r g b / .14) 0, rgb(from var(--tactical-symbol-accent-color) r g b / .07) 24%, rgb(from var(--holographic-line-color) r g b / .035) 45%, rgb(from var(--shadow-base-color) r g b / 0) 70%); transform: translate(-50%, -50%); pointer-events: none; }
.projection-25d .tactical-feature-token.asteroid-belt::before { content: ""; position: absolute; z-index: -1; left: 25px; top: 50%; width: 180px; height: 95px; background: radial-gradient(ellipse 8px 5px at 6% 58%, rgb(from var(--asteroid-symbol-color) r g b / .8) 0 72%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 4px 7px at 14% 29%, rgb(from var(--asteroid-symbol-color) r g b / .58) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 6px 4px at 22% 76%, rgb(from var(--asteroid-symbol-color) r g b / .72) 0 68%, rgb(from var(--shadow-base-color) r g b / 0) 77%), radial-gradient(ellipse 3px 5px at 29% 45%, rgb(from var(--asteroid-symbol-color) r g b / .52) 0 68%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 7px 5px at 38% 17%, rgb(from var(--asteroid-symbol-color) r g b / .68) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 4px 3px at 44% 83%, rgb(from var(--asteroid-symbol-color) r g b / .5) 0 68%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 5px 8px at 55% 36%, rgb(from var(--asteroid-symbol-color) r g b / .76) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 3px 4px at 61% 69%, rgb(from var(--asteroid-symbol-color) r g b / .54) 0 68%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 8px 4px at 70% 13%, rgb(from var(--asteroid-symbol-color) r g b / .72) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 5px 3px at 76% 52%, rgb(from var(--asteroid-symbol-color) r g b / .6) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%), radial-gradient(ellipse 4px 7px at 84% 80%, rgb(from var(--asteroid-symbol-color) r g b / .7) 0 68%, rgb(from var(--shadow-base-color) r g b / 0) 77%), radial-gradient(ellipse 7px 5px at 93% 35%, rgb(from var(--asteroid-symbol-color) r g b / .62) 0 70%, rgb(from var(--shadow-base-color) r g b / 0) 78%); filter: drop-shadow(2px 3px 2px rgb(from var(--shadow-base-color) r g b / .7)); transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none; }
.tactical-feature-token:not(.tactical-area) { transform: translate(-25px, -50%); }
.tactical-asset-token { transform: translate(-25px, -50%); }
.tactical-token:hover, .tactical-token:focus-visible { z-index: 1200; border-color: var(--holographic-line-color); box-shadow: 0 0 14px rgb(from var(--holographic-line-color) r g b / .42); outline: none; }
.tactical-feature-token[draggable="true"], .tactical-asset-token[draggable="true"] { cursor: grab; }
.tactical-token .feature-symbol { width: 28px; height: 28px; flex: 0 0 28px; }
.tactical-primary-anchor { display: contents; }
.tactical-token-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.tactical-token-label { overflow: hidden; color: var(--primary-text-color); font-size: .8rem; letter-spacing: .035em; text-overflow: ellipsis; white-space: nowrap; }
.tactical-token-detail { overflow: hidden; margin-top: .15rem; color: var(--secondary-text-color); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.tactical-scope-button { flex: none; width: auto; padding: .15rem .28rem; font-size: .58rem; }
.tactical-feature-token.orbital-marker { width: 38px; min-width: 38px; max-width: 38px; min-height: 0; flex-direction: column; align-items: center; gap: .18rem; padding: .25rem; }
.tactical-feature-token.orbital-marker { transform: translate(-50%, -21px); }
.tactical-feature-token.orbital-marker .feature-symbol { width: 28px; height: 28px; flex-basis: 28px; }
.tactical-feature-token.orbital-marker .tactical-token-copy { width: 100%; text-align: center; }
.tactical-feature-token.orbital-marker .tactical-token-label { display: block; font-size: .58rem; letter-spacing: 0; }
.zoom-far .tactical-token { min-width: 68px; max-width: 116px; min-height: 34px; padding: .25rem .35rem; }
.zoom-far .tactical-token .feature-symbol { width: 22px; height: 22px; flex-basis: 22px; }
.zoom-far .tactical-token-detail, .zoom-far .tactical-scope-button { display: none; }
.zoom-far .tactical-token-label { max-width: 70px; font-size: .66rem; }
.zoom-far .tactical-feature-token.orbital-marker { width: 38px; min-width: 38px; max-width: 38px; gap: .12rem; padding: .2rem; }
.zoom-far .tactical-feature-token:not(.tactical-area) { transform: translate(-19.6px, -50%); }
.zoom-far .tactical-asset-token { transform: translate(-22.6px, -50%); }
.zoom-far .tactical-feature-token.orbital-marker { transform: translate(-50%, -18px); }
.zoom-far .tactical-feature-token.orbital-marker .feature-symbol { width: 22px; height: 22px; flex-basis: 22px; }
.zoom-far .tactical-feature-token.orbital-marker .tactical-token-label { max-width: 100%; font-size: .52rem; }
.hide-tactical-labels .tactical-primary-anchor, .tactical-feature-token.orbital-marker .tactical-primary-anchor { position: relative; display: grid; flex: none; place-items: center; }
.hide-tactical-labels .tactical-token-copy, .tactical-feature-token.orbital-marker .tactical-token-copy { position: absolute; left: 50%; bottom: calc(100% + .28rem); display: block; width: max-content; max-width: 150px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.tactical-feature-token.orbital-marker.caption-below .tactical-token-copy { top: calc(100% + .28rem); bottom: auto; }
.hide-tactical-labels .tactical-token-label, .tactical-feature-token.orbital-marker .tactical-token-label { display: block; max-width: 150px; overflow: hidden; font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.hide-tactical-labels .tactical-token-detail, .tactical-feature-token.orbital-marker .tactical-token-detail { display: none; }
.hide-tactical-labels .tactical-token, .tactical-feature-token.orbital-marker { min-width: 38px; width: 38px; padding: .25rem; }
.hide-tactical-labels .tactical-feature-token:not(.tactical-area), .hide-tactical-labels .tactical-asset-token { transform: translate(-21px, -50%); }
.hide-tactical-labels .tactical-feature-token:not(.tactical-area), .tactical-feature-token.orbital-marker { border-color: transparent; background: transparent; box-shadow: none; }
.hide-tactical-labels .tactical-feature-token:not(.tactical-area):hover, .hide-tactical-labels .tactical-feature-token:not(.tactical-area):focus-visible, .tactical-feature-token.orbital-marker:hover, .tactical-feature-token.orbital-marker:focus-visible { border-color: transparent; box-shadow: none; }
.hide-tactical-labels .tactical-feature-token.orbital-marker { transform: translate(-50%, -21px); }
.hide-tactical-labels .zoom-far .tactical-feature-token.orbital-marker { transform: translate(-50%, -18px); }
.hide-tactical-labels .tactical-asset-token .detachment-ship-summary { top: calc(50% + 20px); left: 22px; width: max-content; max-width: 148px; transform: translateX(-50%); }
.hide-tactical-labels .zoom-far .tactical-asset-token .detachment-ship-summary { display: flex; }
.hide-tactical-labels .tactical-feature-token .local-map-asset-indicators { left: 25px; width: max-content; max-width: 127px; transform: translateX(-50%); }
.hide-tactical-labels .zoom-far .tactical-feature-token .local-map-asset-indicators { left: 19.6px; max-width: 94px; }
.tactical-area { align-items: flex-start; min-width: 160px; min-height: 100px; border: 2px dashed rgb(from var(--holographic-area-color) r g b / .78); background: rgb(from var(--holographic-area-color) r g b / .09); border-radius: 12px; box-shadow: inset 0 0 30px rgb(from var(--holographic-area-color) r g b / .09); }
.projection-25d .tactical-area { min-height: 48px; background: rgb(from var(--holographic-area-color) r g b / .07); box-shadow: 0 6px 18px rgb(from var(--shadow-base-color) r g b / .28), inset 0 0 24px rgb(from var(--holographic-area-color) r g b / .08); }
.hide-tactical-areas .tactical-area { display: none; }
.tactical-area .feature-symbol { width: 22px; height: 22px; flex-basis: 22px; }
.area-resize-handle { position: absolute; right: -5px; bottom: -5px; width: 16px; height: 16px; border: 2px solid var(--holographic-line-color); border-radius: 3px; background: var(--tactical-symbol-surface-color); cursor: nwse-resize; }
.asset-token-symbol { flex: none; width: 30px; height: 26px; display: grid; place-items: center; color: var(--ship-color); border: 1px solid currentColor; border-radius: 5px 9px 5px 9px; background: rgb(from var(--tactical-symbol-surface-color) r g b / .72); box-shadow: inset 0 0 7px rgb(from currentColor r g b / .16), 0 0 6px rgb(from currentColor r g b / .22); }
.asset-token-symbol.org { color: var(--organization-color); border-color: var(--organization-color); }
.asset-token-symbol .tactical-mini-icon { width: 23px; height: 16px; }
.tactical-asset-token.ship { border-color: rgb(from var(--ship-color) r g b / .9); }
.tactical-asset-token.org { border-color: rgb(from var(--organization-color) r g b / .9); }
.hide-tactical-labels .tactical-asset-token, .hide-tactical-labels .tactical-asset-token:hover, .hide-tactical-labels .tactical-asset-token:focus-visible { border-color: transparent; background: transparent; box-shadow: none; }
.hide-tactical-labels .tactical-asset-token.ship { width: max-content; min-width: 0; min-height: 0; padding: 0; transform: translate(-50%, -50%); }
.hide-tactical-labels .tactical-asset-token.ship > .tactical-primary-anchor { display: contents; }
.hide-tactical-labels .tactical-asset-token.ship > .tactical-primary-anchor > .asset-token-symbol { display: none; }
.hide-tactical-labels .tactical-asset-token.ship > .tactical-primary-anchor > .tactical-token-copy { left: 50%; transform: translateX(-50%); }
.hide-tactical-labels .tactical-asset-token.ship > .detachment-ship-summary { position: relative; top: auto; left: auto; width: max-content; max-width: none; transform: none; }
.tactical-asset-token.non-operational { filter: grayscale(.7); opacity: .7; }
.local-map-asset-indicators { position: absolute; top: calc(100% + .36rem); left: .35rem; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: .22rem; max-width: 148px; padding: .2rem; border: 1px solid rgb(from var(--holographic-line-color) r g b / .4); border-radius: 4px; background: rgb(from var(--tactical-symbol-surface-color) r g b / .9); box-shadow: 0 0 8px rgb(from var(--holographic-line-color) r g b / .18); }
.local-map-asset-indicator { width: 25px; min-width: 25px; height: 22px; min-height: 22px; display: grid; padding: 0; place-items: center; color: var(--ship-color); border: 1px solid currentColor; border-radius: 4px 7px 4px 7px; background: rgb(from var(--panel-background-color) r g b / .82); line-height: 1; }
.local-map-asset-indicator.org { color: var(--organization-color); }
.local-map-asset-indicator .tactical-mini-icon { width: 19px; height: 13px; }
.local-map-asset-indicator:hover, .local-map-asset-indicator:focus-visible { color: var(--primary-text-color); border-color: var(--primary-text-color); outline: none; }
.zoom-far .local-map-asset-indicators { top: calc(100% + .24rem); gap: .14rem; padding: .14rem; max-width: 92px; }
.zoom-far .local-map-asset-indicator { width: 18px; min-width: 18px; height: 16px; min-height: 16px; }
.zoom-far .local-map-asset-indicator .tactical-mini-icon { width: 14px; height: 10px; }
.detachment-ship-summary { position: absolute; top: calc(100% + .48rem); left: .35rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .42rem; width: max-content; max-width: calc(100% - .7rem); padding: .2rem .3rem; box-sizing: border-box; border: 1px solid rgb(from var(--holographic-line-color) r g b / .36); border-radius: 4px; background: rgb(from var(--tactical-symbol-surface-color) r g b / .82); box-shadow: 0 0 8px rgb(from var(--holographic-line-color) r g b / .16); pointer-events: none; }
.zoom-far .detachment-ship-summary { display: none; }
.detachment-ship-detail { display: flex; flex-direction: column; align-items: center; gap: .18rem; min-width: 16px; }
.detachment-squad-detail { display: flex; flex-direction: column; align-items: center; gap: .18rem; min-width: 20px; }
.detachment-squad-icon { width: 21px; height: 14px; color: var(--organization-color); filter: drop-shadow(0 0 3px rgb(from var(--organization-color) r g b / .68)); }
.detachment-squad-detail.non-operational .detachment-squad-icon { color: var(--out-of-action-paint-color); filter: drop-shadow(0 0 3px rgb(from var(--out-of-action-paint-color) r g b / .72)); }
.detachment-personnel-detail { display: flex; flex-direction: column; align-items: center; gap: .18rem; min-width: 16px; }
.detachment-personnel-icon { width: 19px; height: 13px; color: var(--crew-color); filter: drop-shadow(0 0 3px rgb(from var(--crew-color) r g b / .68)); }
.detachment-personnel-detail.non-operational .detachment-personnel-icon { color: var(--out-of-action-paint-color); filter: drop-shadow(0 0 3px rgb(from var(--out-of-action-paint-color) r g b / .72)); }
.detachment-ship-icon { width: 22px; height: 13px; color: var(--ship-color); filter: drop-shadow(0 0 3px rgb(from var(--ship-color) r g b / .68)); }
.detachment-ship-detail.non-operational .detachment-ship-icon { color: var(--out-of-action-paint-color); filter: drop-shadow(0 0 3px rgb(from var(--out-of-action-paint-color) r g b / .72)); }
.tactical-mini-icon { display: block; overflow: visible; color: inherit; }
.tactical-mini-icon .icon-surface { fill: currentColor; }
.tactical-mini-icon .icon-cut { fill: var(--tactical-symbol-surface-color); }
.tactical-mini-icon .icon-detail { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.detachment-crew-ticks { display: flex; align-items: flex-start; justify-content: center; gap: 2px; min-height: 13px; }
.detachment-crew-tick { position: relative; width: 6px; height: 12px; color: var(--success-status-color); background: currentColor; clip-path: polygon(50% 0, 100% 24%, 82% 82%, 50% 100%, 18% 82%, 0 24%); filter: drop-shadow(0 0 2px rgb(from currentColor r g b / .72)); }
.detachment-crew-tick::after { position: absolute; inset: 3px 2px; content: ""; background: var(--tactical-symbol-surface-color); clip-path: polygon(50% 0, 100% 38%, 72% 100%, 28% 100%, 0 38%); }
.detachment-crew-tick.non-operational { color: var(--out-of-action-paint-color); }
.detachment-crew-tick.non-operational::after { inset: 2px; background: linear-gradient(45deg, transparent 40%, currentColor 41% 59%, transparent 60%), linear-gradient(-45deg, transparent 40%, currentColor 41% 59%, transparent 60%); clip-path: none; }
.tactical-settings { width: 200px; max-height: none; overflow: visible; }
.tactical-settings > *, .tactical-settings select, .tactical-settings input, .tactical-settings button { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tactical-settings .map-layers { width: 100%; }
.tactical-settings > label, .tactical-settings .map-layers label { justify-content: space-between; }
.projection-setting { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.projection-setting-label { color: var(--primary-text-color); }
.projection-mode-control { flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 2px; border: 1px solid rgb(from var(--interface-border-color) r g b / .72); border-radius: 5px; background: rgb(from var(--shadow-base-color) r g b / .22); }
.settings .projection-mode-control { width: 92px; }
.projection-mode-button { min-width: 0; padding: .24rem .36rem; border-color: transparent; background: transparent; color: var(--secondary-text-color); font-size: .68rem; line-height: 1; }
.projection-mode-button[aria-pressed="true"] { border-color: rgb(from var(--primary-accent-color) r g b / .78); color: var(--contrast-text-color); background: rgb(from var(--primary-accent-color) r g b / .42); box-shadow: 0 0 7px rgb(from var(--primary-accent-color) r g b / .28); }
.projection-mode-button:focus-visible { outline: 2px solid var(--primary-text-color); outline-offset: 1px; }
.projection-mode-control.compact { width: auto; padding: 1px; }
.projection-mode-control.compact .projection-mode-button { width: auto; padding: .15rem .24rem; font-size: .58rem; }
.map-layers { padding: .38rem 0; border-top: 1px solid rgb(from var(--interface-border-color) r g b / .62); border-bottom: 1px solid rgb(from var(--interface-border-color) r g b / .62); }
.map-layers summary { margin-bottom: .35rem; cursor: pointer; font-size: .78rem; font-weight: 700; }
.map-layers label + label { margin-top: .32rem; }
.connector-gradient-layer { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.callout-connector-layer { position: absolute; z-index: 42; inset: 0; overflow: visible; pointer-events: none; }
.connector-gradient-fill { pointer-events: none; }
.tactical-callout.pan-following { will-change: transform; }
.connector-pan-following { transform-origin: 0 0; transform-box: view-box; will-change: transform; }
.tactical-workspace.pan-optimizing .callout-zoom-line, .tactical-workspace.pan-optimizing .inspector-zoom-line { filter: none; }
.callout-zoom-line { stroke: rgb(from var(--holographic-line-color) r g b / .68); stroke-width: 1.5px; stroke-dasharray: 5 4; filter: drop-shadow(0 0 3px rgb(from var(--holographic-line-color) r g b / .58)); }
.inspector-zoom-line { stroke: rgb(from var(--primary-accent-color) r g b / .78); stroke-width: 1.5px; stroke-dasharray: 6 4; filter: drop-shadow(0 0 3px rgb(from var(--primary-accent-color) r g b / .62)); }
.tactical-callout-layer { position: absolute; z-index: 45; inset: 0; pointer-events: none; }
.tactical-callout { position: absolute; min-width: 320px; min-height: 220px; max-width: 70%; max-height: 70%; overflow: hidden; pointer-events: auto; border: 1px solid var(--holographic-line-color); border-radius: 6px; background: rgb(from var(--holographic-window-color) r g b / .96); box-shadow: 0 0 22px rgb(from var(--holographic-line-color) r g b / .24), 0 14px 40px rgb(from var(--shadow-base-color) r g b / .7); }
.tactical-callout.collapsed { min-height: 38px; overflow: visible; }
.tactical-callout.collapsed::after { position: absolute; z-index: 10; inset: 0; content: ""; pointer-events: none; border: 1px solid var(--holographic-line-color); border-radius: inherit; }
.tactical-callout.collapsed .collapsed-callout-asset-indicators { top: calc(100% + .36rem); left: 50%; width: max-content; max-width: calc(100vw - 24px); flex-wrap: nowrap; overflow-x: auto; transform: translateX(-50%); }
.tactical-callout.collapsed[data-dock-edge="bottom"] .collapsed-callout-asset-indicators { top: auto; bottom: calc(100% + .36rem); }
.tactical-callout-header { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .4rem .3rem .65rem; border-bottom: 1px solid rgb(from var(--holographic-line-color) r g b / .55); background: rgb(from var(--panel-background-color) r g b / .94); cursor: move; user-select: none; }
.tactical-callout.collapsed .tactical-callout-header { border-bottom: 0; }
.tactical-callout-title { min-width: 0; overflow: hidden; color: var(--holographic-line-color); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.callout-drag-key { flex: none; width: 30px; height: 28px; display: grid; place-items: center; border: 1px solid rgb(from var(--holographic-line-color) r g b / .55); border-radius: 4px; color: var(--holographic-line-color); font-size: 1rem; font-weight: 800; letter-spacing: -2px; line-height: 1; }
.tactical-callout-actions { flex: none; display: flex; align-items: center; gap: .25rem; }
.callout-layout-select { width: 5.5rem; min-width: 0; padding: .18rem 1.25rem .18rem .32rem; font-size: .65rem; }
.tactical-callout-actions .icon-button { padding: .16rem .3rem; font-size: .62rem; }
.tactical-callout-actions .callout-collapse-button { width: 3.7rem; }
.callout-resize-handle { position: absolute; z-index: 8; width: 28px; height: 28px; }
.callout-resize-handle::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--holographic-line-color); }
.callout-resize-handle.nw { top: 34px; left: 0; cursor: nwse-resize; }
.callout-resize-handle.ne { top: 34px; right: 0; cursor: nesw-resize; }
.callout-resize-handle.sw { bottom: 0; left: 0; cursor: nesw-resize; }
.callout-resize-handle.se { right: 0; bottom: 0; cursor: nwse-resize; }
.callout-resize-handle.nw::after { top: 3px; left: 3px; border-top: 3px solid; border-left: 3px solid; }
.callout-resize-handle.ne::after { top: 3px; right: 3px; border-top: 3px solid; border-right: 3px solid; }
.callout-resize-handle.sw::after { bottom: 3px; left: 3px; border-bottom: 3px solid; border-left: 3px solid; }
.callout-resize-handle.se::after { right: 3px; bottom: 3px; border-right: 3px solid; border-bottom: 3px solid; }
.callout-map-viewport { top: 38px; background-image: radial-gradient(rgb(from var(--holographic-grid-color) r g b / .75) 1px, rgb(from var(--shadow-base-color) r g b / 0) 1px); background-size: 18px 18px; }
.tactical-inspector { position: absolute; z-index: 180; width: 290px; max-height: calc(100% - 24px); display: flex; flex-direction: column; gap: .5rem; padding: .65rem; overflow-y: auto; border: 1px solid var(--holographic-line-color); border-radius: 7px; background: rgb(from var(--panel-background-color) r g b / .98); box-shadow: 0 12px 36px rgb(from var(--shadow-base-color) r g b / .75), 0 0 16px rgb(from var(--holographic-line-color) r g b / .18); }
.tactical-inspector[data-inspect-type="org"] { width: min(var(--tactical-inspector-width, 290px), calc(100% - 24px)); }
.inspector-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .4rem; border-bottom: 1px solid rgb(from var(--interface-border-color) r g b / .7); }
.inspector-drag-handle, .tactical-inspector > .inspector-row, .tactical-inspector > .inspector-field { cursor: move; user-select: none; }
.tactical-inspector > .inspector-field :is(input, select, textarea), .tactical-inspector > .inspector-row button, .inspector-pin-button { cursor: pointer; user-select: auto; }
.inspector-pin-button { position: relative; width: 2rem; min-width: 2rem; height: 1.75rem; padding: 0; overflow: hidden; color: var(--secondary-text-color); line-height: 1; }
.inspector-pin-button::before, .inspector-pin-button::after { position: absolute; left: 50%; content: ""; pointer-events: none; transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.inspector-pin-button::before { top: var(--pin-head-top, 5px); width: 9px; height: 8px; border: 1px solid currentColor; border-radius: 2px 2px 4px 4px; background: rgb(from var(--panel-background-color) r g b / .9); transform: translateX(-50%) scale(var(--pin-icon-scale, 1)) rotate(-35deg); }
.inspector-pin-button::after { top: var(--pin-stem-top, 13px); width: 1px; height: 8px; background: currentColor; box-shadow: 0 6px 0 -0.25px currentColor; transform: translateX(-50%) scale(var(--pin-icon-scale, 1)) rotate(-35deg); transform-origin: top center; }
.inspector-pin-button:hover, .inspector-pin-button:focus-visible { color: var(--holographic-line-color); border-color: var(--holographic-line-color); outline: none; }
.inspector-pin-button[aria-pressed="true"] { border-color: var(--primary-accent-color); color: var(--primary-accent-color); background: rgb(from var(--primary-accent-color) r g b / .18); box-shadow: inset 0 0 8px rgb(from var(--primary-accent-color) r g b / .2), 0 0 8px rgb(from var(--primary-accent-color) r g b / .3); }
.inspector-pin-button[aria-pressed="true"]::before { background: rgb(from var(--primary-accent-color) r g b / .2); box-shadow: 0 0 6px rgb(from var(--primary-accent-color) r g b / .55); transform: translateX(-50%) scale(var(--pin-icon-scale, 1)); }
.inspector-pin-button[aria-pressed="true"]::after { box-shadow: 0 6px 0 -0.25px currentColor, 0 0 5px rgb(from var(--primary-accent-color) r g b / .72); transform: translateX(-50%) scale(var(--pin-icon-scale, 1)); }
.inspector-name-button { min-width: 0; padding: 0; overflow: hidden; color: inherit; border: 0; background: transparent; font: inherit; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
.inspector-name-button:hover, .inspector-name-button:focus-visible { color: var(--primary-accent-color); outline: none; }
.inspector-name-input { min-width: 0; width: 100%; }
.inspector-field { display: flex; flex-direction: column; gap: .25rem; color: var(--secondary-text-color); font-size: .72rem; }
.inspector-inline-field { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: .45rem; }
.inspector-inline-label { grid-column: 1; color: var(--secondary-text-color); }
.inspector-inline-field > :is(select, .orbit-count-control) { min-width: 0; grid-column: 2; }
.inspector-assignment-control { display: flex; gap: .35rem; }
.inspector-assignment-control select { min-width: 0; flex: 1; }
.inspector-assignment-control button { flex: none; }
.orbit-count-control { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; gap: .45rem; }
.orbit-count-control input[type="range"] { width: 100%; }
.orbit-count-value { color: var(--primary-text-color); font-size: .78rem; font-weight: 700; text-align: center; }
.inspector-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: .45rem; font-size: .74rem; }
.inspector-label { color: var(--secondary-text-color); }
.inspector-value { min-width: 0; overflow-wrap: anywhere; }
.crew-location-inspector { display: flex; flex-direction: column; gap: .5rem; }
.inspector-check { display: grid; grid-template-columns: 8.75rem 1.15rem; align-items: center; justify-content: start; column-gap: .5rem; font-size: .76rem; }
.inspector-check input[type="checkbox"] { margin: 0; }
.inspector-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .25rem; }
.inspector-actions:has(button:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inspector-actions button { min-width: 0; padding-inline: .35rem; }
.inspector-actions button:only-child { grid-column: 1 / -1; }
.inspector-delete { margin-top: .25rem; color: var(--danger-status-color); }
.inspector-ship-list { display: grid; grid-template-columns: repeat(var(--inspector-ship-columns, 2), minmax(0, 1fr)); align-items: start; gap: .45rem; }
.inspector-ship-detail, .inspector-squad-detail { padding: .42rem; border: 1px solid rgb(from var(--interface-border-color) r g b / .7); border-radius: 4px; background: rgb(from var(--workspace-background-color) r g b / .45); }
.inspector-ship-detail { position: relative; overflow: hidden; isolation: isolate; }
.inspector-ship-detail.inactive { border-color: rgb(from var(--danger-status-color) r g b / .75); }
.inspector-squad-detail.inactive { position: relative; overflow: hidden; isolation: isolate; border-color: rgb(from var(--danger-status-color) r g b / .75); }
.inspector-squad-detail.inactive > .out-of-action-mark { z-index: 0; }
.inspector-squad-detail.inactive > :not(.out-of-action-mark) { position: relative; z-index: 1; }
.inspector-status-toggle { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.inspector-status-toggle:focus-visible { outline: 2px solid var(--holographic-line-color); outline-offset: 2px; }
.inspector-ship-identity { position: relative; min-height: 3.25rem; overflow: hidden; border-radius: 2px; isolation: isolate; }
.inspector-ship-thumbnail { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .28; filter: saturate(.82) contrast(1.08); pointer-events: none; }
.inspector-ship-identity::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgb(from var(--workspace-background-color) r g b / .32), rgb(from var(--workspace-background-color) r g b / .74)); pointer-events: none; }
.inspector-ship-copy { position: relative; z-index: 1; display: block; padding: .25rem .3rem; text-shadow: 0 1px 2px var(--shadow-base-color); }
.inspector-ship-header, .inspector-squad-header, .inspector-crew-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.inspector-ship-header strong, .inspector-squad-header strong, .inspector-crew-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-ship-type, .inspector-squad-type, .inspector-section-label { display: block; margin-top: .12rem; color: var(--secondary-text-color); }
.inspector-squad-icon { flex: none; width: 21px; height: 14px; color: var(--organization-color); filter: drop-shadow(0 0 3px rgb(from var(--organization-color) r g b / .68)); }
.inspector-squad-detail.inactive .inspector-squad-icon { color: var(--out-of-action-paint-color); filter: drop-shadow(0 0 3px rgb(from var(--out-of-action-paint-color) r g b / .72)); }
.inspector-status { flex: none; color: var(--success-status-color); font-size: .67rem; font-weight: 700; text-transform: uppercase; }
.inspector-status.inactive { color: var(--danger-status-color); }
.inspector-crew-list { display: flex; flex-direction: column; gap: .2rem; margin-top: .35rem; padding-top: .3rem; border-top: 1px solid rgb(from var(--interface-border-color) r g b / .45); }
.inspector-crew-row { min-height: 1.35rem; font-size: .7rem; }
.inspector-crew-name.entity-search-match { font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.inspector-crew-name.inactive { text-decoration-line: line-through; text-decoration-thickness: 1px; }
.inspector-crew-name.inactive.entity-search-match { text-decoration-line: line-through underline; }
.inspector-crew-row.crew-marker-1, .inspector-crew-row.crew-marker-2 { padding: .18rem .25rem; border: 1px solid currentColor; border-radius: 3px; }
.inspector-crew-row.crew-marker-1 { color: var(--crew-marker-text-color); background: var(--crew-marker-one-color); border-color: var(--crew-marker-one-color); }
.inspector-crew-row.crew-marker-2 { color: var(--crew-marker-text-color); background: var(--crew-marker-two-color); border-color: var(--crew-marker-two-color); }
.inspector-crew-row.crew-marker-1 .inspector-status, .inspector-crew-row.crew-marker-2 .inspector-status { color: var(--crew-marker-text-color); }
.inspector-crew-row:not(.crew-marker-1):not(.crew-marker-2):hover, .inspector-ship-identity:hover { background: rgb(from var(--holographic-line-color) r g b / .1); }
.tactical-drop-preview { position: absolute; z-index: 260; max-width: 280px; padding: .38rem .55rem; border: 1px solid var(--success-status-color); border-radius: 4px; color: var(--primary-text-color); background: rgb(from var(--panel-background-color) r g b / .96); box-shadow: 0 5px 18px rgb(from var(--shadow-base-color) r g b / .65); font-size: .72rem; pointer-events: none; }
.tactical-drop-preview.invalid { border-color: var(--danger-status-color); color: var(--danger-status-color); }
.muted { color: var(--secondary-text-color); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 850px) { :root { --component-panel-width: 285px; } .brand { display: none; } }