/* Tether — follows the eve-webtools cosmetic (same tokens and chrome as Atlas). */

:root {
    --textColor: #999999;
    --textColor2: #474747;
    --themeColor: #d2d2d2;
    --backgroundColor: #00000042;
    --borderColor31: #313131;
    --panelBg: #0d0d0deb;
    --popBg: #0d0d0df7;
    --ghost: #d2d2d242;
    --ghostHover: #d2d2d263;
    --ghostActive: #d2d2d2a0;

    --secHigh: #2fefef;
    --secMid: #efef00;
    --secLow: #f04800;
    --wormhole: #21d4c8;
    --jumpbridge: #ffe600;
    --gate: #494949;
    --eol: #f04800;
    --friendly: #48f0c0;
    --occupied: #ff5c5c;
    --occupiedText: #ff9a9a;
    --home: #d2d2d2;
    /* system status → node border */
    --stHome: #48f0c0;
    --stFriendly: #4f8ef5;
    --stWarning: #ff9a3c;
    --thera: #a77bff;      /* Thera hub (EvE-Scout) — the same violet as Atlas's Thera line */
    --turnur: #ff4fc8;     /* Turnur hub */
    --stOccupied: #ff5c5c;
    --stOnline: #48f056;     /* pilot online dots (top bar, Pilots panel) */
    --warn: #ffb648;

    --grid: 20px;
}

@font-face { font-family: 'Shentox Bold';     src: url(../font/Shentox\ W04\ Bold.ttf); }
@font-face { font-family: 'Shentox SemiBold'; src: url(../font/Shentox\ W04\ SemiBold.ttf); }
@font-face { font-family: 'Shentox Medium';   src: url(../font/Shentox\ W04\ Medium.ttf); }
@font-face { font-family: 'Shentox Regular';  src: url(../font/Shentox\ W04\ Regular.ttf); }
@font-face { font-family: 'Shentox Light';    src: url(../font/Shentox\ W04\ Light.ttf); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    padding: 0; margin: 0;
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif;
    font-size: 1em;
    color: var(--textColor);
    cursor: default;
    height: 100%; width: 100%;
    overflow: hidden;
}
a { color: var(--textColor); text-decoration: none; }
a:hover { color: var(--themeColor); }
button { font-family: inherit; }
input { font-family: inherit; }
input[type=search]::-webkit-search-cancel-button { display: none; }

#mainWrapperWrapper {
    display: flex; justify-content: center;
    background: radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(21,21,21,1) 100%);
    height: 100%; width: 100%;
}
#mainWrapper { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; }

/* ---------------- top bar (identical to the other modules) ---------------- */

#mainTop {
    display: flex; flex-direction: row; align-items: center; flex-shrink: 0;
    background-color: var(--backgroundColor);
    border-bottom: 1px solid var(--borderColor31);
    height: 64px; width: 100%; z-index: 40; position: relative;
}
#mainTop-Logo { display: flex; justify-content: center; align-items: center; height: 64px; width: 64px; flex-shrink: 0; }
.svg_ewtLogo { fill: var(--ghost); height: 48px; width: 48px; }
#mainTop-Logo:hover .svg_ewtLogo { fill: var(--ghostHover); }
.topSeparator { width: 1px; height: 36px; background-color: var(--borderColor31); flex-shrink: 0; }

#appSwitcher { display: flex; flex-direction: row; align-items: center; }
.appIcon { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; cursor: pointer; }
.appIcon svg { fill: #d2d2d221; width: 24px; height: 24px; transition: all 0.25s linear; }
.appIcon:hover svg, .appIcon-current svg { fill: var(--ghostHover); width: 32px; height: 32px; }

#mainTop-Right { display: flex; flex-direction: row; align-items: center; margin-left: auto; gap: 6px; }
#pageMenu { display: flex; flex-direction: row; }
.menuIcon {
    display: flex; justify-content: center; align-items: center;
    width: 42px; height: 64px; cursor: pointer; background: none; border: 0; padding: 0;
}
.menuIcon svg { stroke: var(--ghost); fill: none; stroke-width: 1.6; width: 21px; height: 21px; }
.menuIcon:hover svg, .menuIcon-active svg, .menuIcon[aria-expanded="true"] svg { stroke: var(--ghostActive); }

#panelsMenuWrap { position: relative; }
.popMenu {
    position: absolute; top: calc(100% - 8px); right: 0; min-width: 190px;
    background-color: var(--popBg); border: 1px solid var(--borderColor31);
    padding: 4px 0; z-index: 50; font-size: 0.9286em;
}
.popMenu .pmItem { display: flex; align-items: center; gap: 10px; padding: 6px 12px; color: var(--textColor); cursor: pointer; background: none; border: 0; width: 100%; text-align: left; font-size: inherit; }
.popMenu .pmItem:hover { background-color: #d2d2d20f; color: var(--themeColor); }
.popMenu .pmItem .pmCheck { width: 14px; color: var(--themeColor); }
.popMenu .pmSep { height: 1px; background: #232323; margin: 4px 0; }

#liveCluster { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
.toggleBtn {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    background: none; border: 1px solid var(--borderColor31); color: #6a6a6a;
    font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
}
.toggleBtn svg { width: 1.3636em; height: 1.3636em; fill: none; stroke: currentColor; stroke-width: 1.8; }
.toggleBtn:hover { color: var(--textColor); }
.toggleBtn[aria-pressed="true"] { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }

#whoAmI { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-size: 0.9286em; position: relative; }
#whoAmI .dot { width: 0.6154em; height: 0.6154em; border-radius: 50%; background: var(--textColor2); }
#whoAmI .dot-on { background: var(--stOnline); box-shadow: 0 0 6px var(--stOnline); }
#eveTime { font-variant-numeric: tabular-nums; }
#portrait { width: 2.4615em; height: 2.4615em; background: #2a2a2a; border: 1px solid var(--borderColor31); display: block; }
#charName { color: var(--themeColor); white-space: nowrap; max-width: 14em; overflow: hidden; text-overflow: ellipsis; }

/* ---- the character picker: portrait + name open it (v2.7) ---- */
#whoBtn { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
#whoBtn .caret { width: 0; height: 0; border-left: 0.3846em solid transparent; border-right: 0.3846em solid transparent; border-top: 0.4615em solid var(--textColor2); }
#whoBtn:hover .caret, #whoBtn[aria-expanded="true"] .caret { border-top-color: var(--themeColor); }
#charCount { font-size: 0.7692em; color: #151515; background: var(--themeColor); padding: 0 0.4em; line-height: 1.4; font-variant-numeric: tabular-nums; }
#charPicker { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 33em; max-width: calc(100vw - 20px); background: #0d0d0df2; border: 1px solid var(--borderColor31); box-shadow: 0 8px 24px #000a; }
.cpRow { display: grid; grid-template-columns: 2.6154em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; }
.cpRow + .cpRow { border-top: 1px solid #1f1f1f; }
.cpRow img { width: 2.6154em; height: 2.6154em; background: #2a2a2a; display: block; }
.cpFollow { box-shadow: inset 3px 0 0 #d2d2d2; }
.cpWho { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cpName { color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpTag { font-size: 0.7692em; letter-spacing: 1px; text-transform: uppercase; color: #151515; background: var(--themeColor); padding: 0 0.4em; margin-left: 6px; }
.cpWhere { font-size: 0.8462em; color: var(--textColor2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpWarn { color: var(--stWarning); }
.cpToggles { display: flex; gap: 4px; }
.cpToggles .miniBtn { font-size: 0.8462em; }
.iconMini svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -0.25em; }
.cpAlerts { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--borderColor31); }
.cpAlL { font-size: 0.8462em; color: var(--textColor2); margin-right: auto; }
.cpAlerts .miniBtn { font-size: 0.8462em; }
.cpFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 10px; border-top: 1px solid var(--borderColor31); }
.cpOpt { font-size: 0.8462em; color: var(--textColor2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.linkBtn { background: none; border: 0; padding: 0; color: var(--themeColor); font: inherit; font-size: 0.9231em; cursor: pointer; letter-spacing: .5px; }
.linkBtn:hover { text-decoration: underline; }
.chDot { width: 0.5385em; height: 0.5385em; border-radius: 50%; background: #474747; display: inline-block; flex-shrink: 0; }
.chDot.on { background: var(--stOnline); box-shadow: 0 0 5px var(--stOnline); }
.iconLink { display: flex; align-items: center; justify-content: center; width: 2.1538em; height: 2.1538em; }
.iconLink svg { width: 1.3077em; height: 1.3077em; fill: none; stroke: var(--ghost); stroke-width: 1.8; }
.iconLink:hover svg { stroke: var(--ghostActive); }

#pageName {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.8em;
    color: var(--ghostHover); letter-spacing: 1px; margin: 0 20px 0 8px; user-select: none;
}

/* ---------------- map toolbar ---------------- */

#mapBar {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 6px 14px; padding: 8px 14px;
    background-color: var(--backgroundColor); border-bottom: 1px solid var(--borderColor31);
    flex-shrink: 0; position: relative; z-index: 30;
}
/* the map name is the picker, framed like Atlas's region button (same height as its bar) */
#mapName { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 220px; background: none; border: 1px solid var(--borderColor31); padding: 6px 14px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.3571em; color: var(--themeColor); letter-spacing: 1px; white-space: nowrap; cursor: pointer; }
#mapName:hover { border-color: var(--themeColor); }
#mapName .caret { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--textColor2); flex-shrink: 0; }
#mapName:hover .caret { border-top-color: var(--themeColor); }
#mapMeta { font-size: 0.9286em; color: var(--textColor); display: flex; gap: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#mapMeta > span { flex-shrink: 0; }
#mapMeta > span:last-child { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#mapMeta .sep { color: var(--textColor2); }
#mapMeta .dim { color: #6a6a6a; }

.barGroup { display: flex; gap: 3px; margin-left: 8px; flex-shrink: 0; align-items: center; }
#editGroup { margin-left: auto; }
#searchGroup { margin-left: 8px; }
.barLabel { font-size: 0.7143em; letter-spacing: 1.5px; color: var(--textColor2); align-self: center; padding-right: 7px; }
.barBtn {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 1px solid var(--borderColor31);
    padding: 5px 8px; font-size: 0.8929em; color: var(--textColor2); cursor: pointer;
}
.barBtn svg { width: 1.19em; height: 1.19em; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.barBtn .bl { font-size: 0.7857em; letter-spacing: 0.4px; white-space: nowrap; }
.barBtn:hover { color: var(--textColor); }
.barBtn:disabled { opacity: .45; cursor: not-allowed; }
.barBtn:disabled:hover { color: var(--textColor2); }
.barBtn-active { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }
#mapBar.compact .barBtn .bl { display: none; }
#mapBar.narrow #mapMeta .saved, #mapBar.narrow #mapMeta .sep:has(+ .saved) { display: none; }   /* first thing to go when the bar gets tight */

#mapSearch { position: relative; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 12px; border: 1px solid var(--borderColor31); background-color: #00000060; width: 230px; }
#mapSearch:focus-within { border-color: var(--themeColor); }
#mapSearch .tsIco { width: 0.9375em; height: 0.9375em; fill: none; stroke: var(--textColor2); stroke-width: 2; flex-shrink: 0; }
#mapSearchInput { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 0.9286em; color: var(--themeColor); }
#mapSearchInput::placeholder { color: #666666; }
#mapSearchInput::-webkit-search-cancel-button { display: none; }
#mapSearch .tsKey { font-size: 0.7857em; color: var(--textColor2); border: 1px solid var(--borderColor31); padding: 0 6px; flex-shrink: 0; }
#mapSearch:focus-within .tsKey { display: none; }

/* ---------------- map ---------------- */

#mapArea {
    position: relative; flex: 1 1 auto; min-height: 0;
    /* dots at #cccccc14 on top of grid lines at #cccccc08 */
    background-image:
        radial-gradient(#cccccc14 1px, transparent 1px),
        linear-gradient(#cccccc08 1px, transparent 1px),
        linear-gradient(90deg, #cccccc08 1px, transparent 1px);
    background-size: var(--grid) var(--grid);
}
#map { position: absolute; inset: 0; outline: none; cursor: grab; overflow: hidden; }
#map.panning { cursor: grabbing; }
#map svg { width: 100%; height: 100%; display: block; }
#map svg text { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; user-select: none; pointer-events: none; }

.edge { fill: none; stroke-width: 1.2; stroke: var(--gate); }
.edge-W, .edge-S, .edge-M, .edge-L, .edge-XL { stroke: var(--wormhole); stroke-width: 1.4; stroke-dasharray: 6 3; }
.edge-S { stroke-width: 1; }        /* frigate hole */
.edge-M { stroke-width: 1.6; }      /* cruisers */
.edge-L { stroke-width: 2.4; }      /* battleships */
.edge-XL { stroke-width: 3.4; }     /* capitals */
.edge-J { stroke: var(--jumpbridge); stroke-dasharray: 10 4; }
.edge-mass-reduced { stroke-dasharray: 4 4; }                 /* shrinking hole: shorter dashes */
.edge-mass-critical { stroke-dasharray: 1.5 4; }              /* critical: dots */
.edge-eol { stroke: var(--eol) !important; }                  /* end of life: red, pattern still tells the mass */
.edge-dead { opacity: .3; }
.routeGlow { fill: none; stroke: var(--themeColor); stroke-width: 7; stroke-opacity: .22; stroke-linecap: round; pointer-events: none; }   /* the way to the selected system */                                   /* EOL + 4 h, or older than a day: probably gone */
.edgeHit { stroke: transparent; stroke-width: 12; fill: none; cursor: pointer; }
.edge.hl { stroke-width: 2.2; }

.sys { cursor: pointer; }
.sys rect.box { fill: #151515; stroke: #d2d2d2; stroke-width: 1; }     /* the border says status, the top-right text says class */
.sys.status-home rect.box { stroke: var(--stHome); }
.sys.status-friendly rect.box { stroke: var(--stFriendly); }
.sys.status-warning rect.box { stroke: var(--stWarning); }
.sys.status-occupied rect.box { stroke: var(--stOccupied); }
.sys:hover rect.box { stroke-width: 1.6; }
.sys text.nm { fill: #d2d2d2; font-size: 12px; }
.sys text.sc { font-size: 10px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.sys text.sub { fill: #6a6a6a; font-size: 9px; }
.sys text.sub2 { fill: #6a6a6a; font-size: 9px; text-anchor: end; }
/* Home is the house glyph (bottom left), Locked the padlock (top right); neither dims the box */
.sys rect.fx { pointer-events: none; }
.sys text.sub2 tspan.to-HS { fill: var(--secHigh); }
.sys text.sub2 tspan.to-LS { fill: var(--secMid); }
.sys text.sub2 tspan.to-NS { fill: var(--secLow); }
.sys text.sub2 tspan.to-C { fill: var(--wormhole); opacity: .8; }
.sys.sel text.nm { fill: #ffffff; }
.no-aliases .sys text.alias { display: none; }

.reticle { fill: none; stroke: #ffffff; stroke-width: 1.5; pointer-events: none; }
.reticle-multi { stroke: var(--wormhole); }
.pilotCount rect { fill: #d2d2d2; }
.pilotCount text { fill: #151515; font-size: 10px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; text-anchor: middle; }
.herePin circle.disc { fill: #151515; stroke: #ffffff59; stroke-width: 1; }
.herePin path { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.herePin circle.glow { fill: none; stroke: #ffffff30; stroke-width: 6; }

#mapTooltip {
    position: absolute; z-index: 20; pointer-events: none;
    background-color: #0d0d0df2; border: 1px solid #3a3a3a;
    padding: 7px 11px; font-size: 0.9286em; color: var(--textColor); max-width: 340px;
}
#mapTooltip b { color: var(--themeColor); font-size: 0.9231em; }
#mapTooltip .tt { color: var(--textColor2); }
#mapTooltip .eolTxt { color: var(--eol); }
#mapTooltip .deadTxt { color: var(--stWarning); }
#mapTooltip .sigTxt { color: var(--wormhole); font-family: 'Shentox SemiBold', monospace; font-size: 0.9231em; }

#mapNotice {
    position: absolute; inset: 0; display: flex; justify-content: center; align-items: center;
    color: var(--textColor2); font-size: 1em; text-align: center; padding: 0 30px; pointer-events: none;
}

/* minimap: bottom right above the zoom box, only while some system is off screen */
#miniMap { position: absolute; right: 20px; bottom: 122px; z-index: 15; width: 200px; height: 120px; background: var(--panelBg); border: 1px solid var(--borderColor31); cursor: crosshair; user-select: none; touch-action: none; }
#miniMap.dragging { cursor: grabbing; }
#miniMap svg { width: 100%; height: 100%; display: block; }
#miniMap .mnEdge { stroke: #555; stroke-width: 1; }
#miniMap .mnEdge.wh { stroke: var(--wormhole); stroke-opacity: .6; }
#miniMap .mnNode { fill: #2c2c2c; stroke: #7a7a7a; stroke-width: 1; }
#miniMap .mnNode.st-home { stroke: var(--stHome); } #miniMap .mnNode.st-friendly { stroke: var(--stFriendly); } #miniMap .mnNode.st-warning { stroke: var(--stWarning); } #miniMap .mnNode.st-occupied { stroke: var(--stOccupied); }
#miniMap .mnNode.sel { fill: #d2d2d2; stroke: #ffffff; }
#miniMap .mnNode.here { fill: var(--stOnline); }
#miniMap .mnView { fill: #d2d2d20d; stroke: var(--themeColor); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
#zoomBox { position: absolute; right: 20px; bottom: 20px; display: flex; flex-direction: column; border: 1px solid var(--borderColor31); background: var(--panelBg); z-index: 15; }
#zoomBox button { width: 1.3636em; height: 1.3636em; background: none; border: 0; border-bottom: 1px solid var(--borderColor31); color: var(--textColor); font-size: 1.375em; line-height: 1; padding: 0; cursor: pointer; }   /* 30px box, 22px glyph */
#zoomBox button:last-child { border-bottom: 0; }
#zoomBox button:hover { color: var(--themeColor); }

/* ---------------- panels ---------------- */

.panel {
    position: absolute; z-index: 16;
    display: flex; flex-direction: column;
    background-color: var(--panelBg); border: 1px solid var(--borderColor31);
    min-width: 240px; max-height: calc(100% - 40px);
    font-size: 1em; color: var(--textColor);
}
.panel.dragging { z-index: 18; opacity: .92; }
.panel.focus { z-index: 17; }
.panelHead {
    display: flex; align-items: center; gap: 8px; height: 32px; flex-shrink: 0;
    padding: 0 6px 0 10px; border-bottom: 1px solid var(--borderColor31);
    cursor: grab; user-select: none;
}
.panel.dragging .panelHead { cursor: grabbing; }
.panel-collapsed .panelHead { border-bottom: 0; }
.panelHead .grip { width: 0.75em; height: 0.75em; fill: var(--textColor2); flex-shrink: 0; }
.panelTitle { font-size: 0.8571em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-collapsed .panelTitle { color: var(--textColor); }
.panelMeta { color: var(--textColor2); }
.panelBtn { width: 1.3em; height: 1.3em; background: none; border: 0; color: var(--textColor2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25em; line-height: 1; padding: 0; }
.panelBtn:hover { color: var(--themeColor); }
.panelBtn svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s; }
.panel-collapsed .panelCollapse svg { transform: rotate(180deg); }
.panel-collapsed > :not(.panelHead) { display: none; }
.panelBody { overflow-y: auto; min-height: 0; padding: 4px 0; }
.panelFoot { padding: 6px 10px 8px; border-top: 1px solid #d2d2d20a; font-size: 0.8571em; color: var(--textColor2); flex-shrink: 0; }
.panelEmpty { padding: 10px 10px 12px; color: var(--textColor2); font-size: 0.9286em; }
.panelResize { position: absolute; right: 0; bottom: 0; width: 0.75em; height: 0.75em; cursor: nwse-resize; border-right: 2px solid var(--borderColor31); border-bottom: 2px solid var(--borderColor31); }

.panelBody::-webkit-scrollbar { width: 8px; }
.panelBody::-webkit-scrollbar-thumb { background: #2a2a2a; }
.panelBody::-webkit-scrollbar-track { background: transparent; }

/* rows (pilots) */
.row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; min-height: 27px; font-size: 1em; }
.row.click { cursor: pointer; }
.row.click:hover { background-color: #d2d2d214; color: #ffffff; }
.row .dot { width: 0.5714em; height: 0.5714em; border-radius: 50%; background: var(--stOnline); flex-shrink: 0; }
.row .dot-off { background: var(--textColor2); }
.row .nm { color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nm-off { color: #6a6a6a; }
.row .val { margin-left: auto; color: var(--textColor); font-size: 0.8571em; flex-shrink: 0; }
.row .val-off { color: var(--textColor2); }

/* system panel */
.sysHead { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px 4px; }
.sysHead .sysName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.2857em; color: var(--themeColor); letter-spacing: 1px; }
.sysHead .alias { font-size: 0.9286em; color: var(--textColor); }
.sysHead .links { margin-left: auto; display: inline-flex; gap: 4px; }
.sysHead .links a { width: 1.625em; height: 1.625em; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--borderColor31); }
.sysHead .links a:hover { border-color: var(--themeColor); }
.sysHead .links svg { width: 0.9375em; height: 0.9375em; fill: none; stroke: var(--textColor); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sysHead .links a:hover svg { stroke: var(--themeColor); }
.sysSub { padding: 0 12px; font-size: 0.9286em; color: var(--textColor); }
.sysSub .dim { color: var(--textColor2); }
.sysStatics { padding-top: 2px; color: var(--themeColor); }
.sysStatics .sep { color: var(--textColor2); }
/* stat tiles: routes + last-hour activity */
.sysStats { display: flex; gap: 4px; padding: 10px 12px 4px; }
.stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 4px 5px; border: 1px solid var(--borderColor31); background: #00000040; }
.stat .statV { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.2857em; color: var(--themeColor); line-height: 1.1; white-space: nowrap; }
.stat .statL { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: var(--textColor); margin-top: 3px; white-space: nowrap; }
.stat .statS { font-size: 0.7143em; color: var(--textColor2); white-space: nowrap; }
.stat.st-zero .statV { color: var(--textColor2); }
.stat.st-hot .statV { color: var(--occupiedText); }
.sysRow { display: flex; align-items: center; gap: 10px; padding: 3px 12px; font-size: 0.9286em; min-height: 26px; }
.sysRow .k { width: 4.3077em; flex-shrink: 0; color: var(--textColor2); }
.sysRow .v { color: var(--themeColor); }
.sysRow .v.dim { color: var(--textColor2); }
.sysRow:first-of-type { margin-top: 4px; }
.secBadge { display: inline-block; width: 2.8636em; text-align: center; font-size: 0.7857em; color: #151515; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; padding: 1px 0; vertical-align: 1px; }
.statusRow { display: inline-flex; gap: 3px; }
.tab, .miniBtn {
    padding: 5px 11px; background: none; border: 1px solid var(--borderColor31);
    font-size: 0.8571em; color: var(--textColor2); cursor: pointer;
}
.miniBtn { padding: 2px 8px; font-size: 0.7857em; }
.sysRow .miniBtn, .intelRow .miniBtn { font-size: 0.8462em; }   /* inside 0.9286em rows: back to 0.7857em */
.tab:hover, .miniBtn:hover { color: var(--textColor); }
.tab-active, .miniBtn-active { background-color: #d2d2d208; color: var(--themeColor); box-shadow: inset 3px 0 0 #d2d2d2; }
.tabRow { display: flex; gap: 3px; padding: 8px 10px 0; flex-shrink: 0; align-items: center; }
.tabAction { margin-left: auto; }

/* signatures table */
.sigTable { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 4px; font-size: 0.8571em; }
.sigRow { display: grid; grid-template-columns: 1.3333em 4.8333em minmax(0, 1fr) minmax(0, 1fr) 3em 4.8333em 4.8333em 2.1667em; gap: 8px; align-items: center; padding: 3px 6px; min-height: 28px; }
.sigRow:nth-child(odd) { background: #96969612; }
.sigRow.hd { font-size: 0.8333em; letter-spacing: .6px; text-transform: uppercase; color: var(--textColor2); background: none; }
.sigRow.hd span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sigRow.hd .upd { text-align: right; }
.sigRow .id { color: var(--themeColor); font-family: 'Shentox SemiBold', monospace; }
.sigRow .ico { width: 1.1667em; height: 1.1667em; display: block; image-rendering: pixelated; opacity: .85; }
.sigRow:hover .ico { opacity: 1; }
.sigRow .id-dim { color: #6a6a6a; }
.sigRow .blk { width: 1.1667em; height: 1.1667em; }
.sigRow .blk-unknown { border: 1px solid var(--textColor2); }
.sigRow .ty, .sigRow .ds { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sigRow .ds { color: var(--textColor); }
.sigRow .dim { color: #6a6a6a; }
.sigRow .to { color: var(--wormhole); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sigRow .toHint { color: var(--textColor2); opacity: .7; font-style: italic; }
.sigRow .toHint.static { opacity: .9; }
.sigRow .toHint.accept { cursor: pointer; }
.sigRow .toHint.accept:hover { color: var(--wormhole); opacity: 1; }
.sigRow .upd { text-align: right; color: #6a6a6a; }
.sigRow .del, .intelRow .del { width: 1.4444em; height: 1.4444em; background: none; border: 1px solid transparent; color: var(--textColor2); cursor: pointer; font-size: 1.5em; line-height: 1; padding: 0; }
.sigRow .del:hover, .intelRow .del:hover { border-color: var(--borderColor31); }
.sigRow .del:hover, .intelRow .del:hover { color: var(--occupiedText); }
.sigRow .eol { color: var(--eol); }

/* legend: static strip, bottom-left */
#legendBar {
    position: absolute; left: 20px; bottom: 20px; z-index: 15;
    display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 6px 10px; max-width: 560px;
    background: var(--panelBg); border: 1px solid var(--borderColor31);
    font-size: 0.7857em; color: var(--textColor); white-space: nowrap;
}
#legendBar { flex-direction: column; align-items: stretch; gap: 3px; max-width: none; padding: 5px 10px; }
.lgRow { display: flex; align-items: center; gap: 12px; }
.lgLabel { width: 6.2em; flex-shrink: 0; font-size: 0.9091em; letter-spacing: 1px; text-transform: uppercase; color: var(--textColor2); }
#legendBar .lgRow > span { display: inline-flex; align-items: center; gap: 6px; }
.lgLine { width: 2em; height: 0; border-top: 1.4px solid; }
.lgDash { border-top-style: dashed; }
.lgDot { border-top-style: dotted; border-top-width: 2px; }
.lgBox { width: 1.2727em; height: 0.8182em; border: 1px solid; background: #151515; }
.lgGlyph { width: 1.0909em; height: 1.0909em; fill: none; stroke: #d2d2d2; stroke-width: 1.6; stroke-linejoin: round; }
.lgFx { width: 0.7273em; height: 0.7273em; }

/* ---------------- notices ---------------- */

#noticeHost {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2000; pointer-events: none;
}
.notice {
    pointer-events: auto; max-width: 520px; padding: 10px 16px;
    background-color: var(--popBg); color: var(--themeColor);
    border: 1px solid var(--borderColor31); border-left: 3px solid var(--themeColor);
    box-shadow: 0 4px 16px rgba(0,0,0,.45); font-size: 0.9286em; cursor: pointer;
    animation: noticeIn 160ms ease-out;
}
.notice-error { border-left-color: var(--occupied); }
.notice-warn { border-left-color: var(--warn); }
@keyframes noticeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------- footer ---------------- */

#LegalNotice { font-size: 0.7143em; color: #353535; text-align: center; padding: 3px 16px 5px; flex-shrink: 0; }

/* ---------------- responsive ---------------- */

@media (max-width: 1100px) {
    #appSwitcher .appIcon { width: 46px; }
    #pageName { font-size: 1.4em; margin-right: 12px; }
    #mapMeta { display: none; }
}
@media (max-width: 760px) {
    #liveCluster span, #charName, #eveTime { display: none; }
    #mapSearch { width: 140px; }
    #appSwitcher { display: none; }
    #legnot { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------------- overlays (Maps, Access lists) ---------------- */

.ovBackdrop { position: absolute; inset: 0; z-index: 25; background: #00000080; display: flex; justify-content: center; padding: 40px 40px 60px; }
.ovSheet {
    width: 100%; max-height: 100%; display: flex; flex-direction: column;
    background-color: var(--popBg); border: 1px solid var(--borderColor31); outline: none;
}
.ovHead { display: flex; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--borderColor31); flex-shrink: 0; }
.ovTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.3571em; color: var(--themeColor); letter-spacing: 1px; white-space: nowrap; }
.ovSub { font-size: 0.9286em; color: var(--textColor); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovSub .dim { color: var(--textColor2); }
.ovActions { display: flex; gap: 3px; align-items: center; }
.ovKey { font-size: 0.7857em; color: var(--textColor2); border: 1px solid var(--borderColor31); padding: 1px 6px; }
.ovClose { background: none; border: 0; color: var(--textColor2); font-size: 1.5em; cursor: pointer; line-height: 1; padding: 0 2px; }
.ovClose:hover { color: var(--themeColor); }
.ovBody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    background: none; border: 1px solid var(--borderColor31);
    font-size: 0.8571em; letter-spacing: .5px; color: var(--textColor); cursor: pointer;
}
.btn svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; }
.btn:hover { color: var(--themeColor); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background-color: #d2d2d208; border-color: var(--themeColor); color: var(--themeColor); }
.btn-danger { color: var(--occupiedText); }
.btn-danger:hover { border-color: var(--occupied); color: var(--occupiedText); }
.btn-sm { padding: 4px 10px; font-size: 0.7857em; }
.panelFoot .btn-sm { font-size: 0.9167em; }                      /* inside the 0.8571em footer: back to 0.7857em */
.iconBtn { width: 2.3333em; height: 2.3333em; padding: 0; justify-content: center; }
.iconBtn svg { width: 1.1667em; height: 1.1667em; stroke-width: 1.8; }

/* tiles (Maps overlay) */
.tileGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-content: start; }
.tile { background-color: var(--backgroundColor); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 196px; position: relative; }
.tile-open { box-shadow: inset 3px 0 0 #d2d2d2; }
.tileHead { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tileName { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.2857em; color: var(--themeColor); letter-spacing: 2px; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tileName:hover { color: #ffffff; }
.tileWho { margin-left: auto; font-size: 0.7857em; color: var(--textColor2); white-space: nowrap; }
.tileDesc { font-size: 0.9286em; color: var(--textColor); min-height: 1.2em; }
.tileDesc.empty { color: #6a6a6a; font-style: italic; }
.statGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin-top: 2px; }
.stat { display: flex; flex-direction: column; align-items: center; }
.statV { font-size: 1.3571em; color: var(--themeColor); font-variant-numeric: tabular-nums; }
.statV.on { color: var(--friendly); }
.statV.zero { color: var(--textColor2); }
.statL { font-size: 0.7857em; letter-spacing: 1px; color: var(--textColor2); }
.tileFoot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; align-items: center; }
.chip { font-size: 0.7857em; padding: 2px 8px; border: 1px solid var(--borderColor31); color: var(--textColor); }
.tileBtns { margin-left: auto; display: inline-flex; gap: 2px; }
.tileStamp { font-size: 0.7857em; color: var(--textColor2); }
.tile-new { background: none; border: 1px dashed var(--borderColor31); align-items: center; justify-content: center; color: var(--textColor2); cursor: pointer; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; gap: 10px; }
.tile-new:hover { color: var(--textColor); border-color: var(--textColor2); }
.tile-new svg { width: 2.3333em; height: 2.3333em; fill: none; stroke: currentColor; stroke-width: 1.6; }

.badge { font-size: 0.7143em; letter-spacing: 1px; color: #151515; padding: 1px 6px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; white-space: nowrap; }
.badge-manager { background: var(--themeColor); }
.badge-member { background: var(--warn); }
.badge-viewer { background: var(--ghostHover); }
.badge-blocked { background: var(--occupied); color: #ffffff; }
.badge-default { background: var(--ghostHover); }

/* list / detail (Access lists overlay) */
.split { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; min-height: 0; height: 100%; }
.pane { background-color: var(--backgroundColor); display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.paneTitle { padding: 14px 18px 8px; font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.2857em; color: var(--ghostHover); letter-spacing: 2px; text-transform: uppercase; }
.listItem { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; cursor: pointer; background: none; border: 0; text-align: left; color: inherit; width: 100%; }
.listItem:hover { background-color: #d2d2d20a; }
.listItem.sel { background-color: #d2d2d208; box-shadow: inset 3px 0 0 #d2d2d2; }
.listItem .li1 { display: flex; align-items: center; gap: 8px; }
.listItem .liName { color: var(--themeColor); font-size: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listItem .liWho { margin-left: auto; font-size: 0.7857em; color: var(--textColor2); white-space: nowrap; }
.listItem .li2 { font-size: 0.8571em; color: var(--textColor); }
.paneFoot { margin-top: auto; padding: 8px 16px 12px; border-top: 1px solid #d2d2d20a; font-size: 0.7857em; color: var(--textColor2); }
.paneSearch { margin: 14px 16px 8px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--borderColor31); background: #00000060; }
.paneSearch:focus-within { border-color: var(--themeColor); }
.paneSearch svg { width: 0.9375em; height: 0.9375em; fill: none; stroke: var(--textColor2); stroke-width: 2; flex-shrink: 0; }
.paneSearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 0.9286em; color: var(--themeColor); }

.detHead { display: flex; align-items: baseline; gap: 14px; padding: 14px 20px 4px; flex-wrap: wrap; }
.detName { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.3571em; color: var(--themeColor); letter-spacing: 2px; text-transform: uppercase; }
.detDesc { font-size: 0.9286em; color: var(--textColor); }
.detBtns { margin-left: auto; display: inline-flex; gap: 2px; }
.detMeta { padding: 0 20px 10px; font-size: 0.7857em; color: var(--textColor2); }
.secHead { display: flex; align-items: center; gap: 10px; padding: 12px 20px 6px; }
.secHead .secLabel { font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--textColor2); white-space: nowrap; }
.secHead .secLine { flex: 1; height: 1px; background: #d2d2d20a; }
.entryRows { display: flex; flex-direction: column; padding: 0 20px; font-size: 0.9286em; }
.entryRow { display: grid; grid-template-columns: 2.4615em minmax(0, 1fr) 8.4615em 7.3846em 2.4615em; gap: 10px; align-items: center; padding: 6px 8px; }
.entryRow:nth-child(even) { background: #96969612; }
.entryRow.hd { font-size: 0.7692em; letter-spacing: 1px; text-transform: uppercase; color: var(--textColor2); background: none; padding-top: 4px; padding-bottom: 4px; }
.entryRow img { width: 2.1538em; height: 2.1538em; background: #2a2a2a; border: 1px solid var(--borderColor31); display: block; }
.entryRow .eName { color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entryRow .eType { color: var(--textColor); }
.entryRow .eDel { width: 1.4444em; height: 1.4444em; background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); cursor: pointer; font-size: 1.3846em; line-height: 1; padding: 0; }
.entryRow .eDel:hover { color: var(--occupiedText); border-color: var(--occupied); }
.chipRow { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 20px; }
.mapChip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--borderColor31); font-size: 0.9286em; color: var(--themeColor); }
.mapChip button { width: 1.4em; height: 1.4em; background: none; border: 0; color: var(--textColor2); cursor: pointer; font-size: 1.1em; line-height: 1; padding: 0; }
.mapChip button:hover { color: var(--occupiedText); }
.detNote { padding: 8px 28px 0; font-size: 0.7857em; color: var(--textColor2); }
.detEmpty { padding: 40px 20px; color: var(--textColor2); text-align: center; font-size: 1em; }

/* entity search results (add entry dialog) */
.srList { display: flex; flex-direction: column; border: 1px solid var(--borderColor31); max-height: 220px; overflow: auto; margin-top: 6px; }
.srItem { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; background: none; border: 0; color: var(--textColor); text-align: left; font-size: 0.9286em; }
.srItem:hover, .srItem.sel { background-color: #d2d2d20f; color: var(--themeColor); }
.srItem img { width: 1.8462em; height: 1.8462em; background: #2a2a2a; }
.srEmpty { padding: 8px 10px; font-size: 0.8571em; color: var(--textColor2); }

/* ---------------- dialogs ---------------- */

.dlgBackdrop { position: fixed; inset: 0; z-index: 3000; background: #00000099; display: flex; align-items: center; justify-content: center; }
.dlg { background-color: var(--popBg); border: 1px solid var(--borderColor31); display: flex; flex-direction: column; max-width: calc(100vw - 40px); max-height: calc(100vh - 40px); }
.dlgHead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borderColor31); }
.dlgTitle { font-size: 0.8571em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); flex: 1; }
.dlgBody { padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.dlgField { display: flex; flex-direction: column; gap: 4px; }
.dlgLabel { font-size: 0.7857em; color: #6a6a6a; }
.dlgOpt { color: var(--textColor2); }
.dlgInput { height: 34px; padding: 0 12px; background: #00000060; border: 1px solid var(--borderColor31); outline: none; font-family: inherit; font-size: 1em; color: var(--themeColor); }
textarea.dlgInput { height: auto; padding: 8px 12px; resize: vertical; }
.dlgInput:focus { border-color: var(--themeColor); }
.dlgFile { font-size: 1em; color: var(--textColor); }
.dlgFile::file-selector-button { height: 28px; margin-right: 10px; padding: 0 12px; background: none; border: 1px solid var(--borderColor31); color: var(--textColor); font-family: inherit; font-size: inherit; cursor: pointer; }
.dlgFile::file-selector-button:hover { border-color: var(--themeColor); color: var(--themeColor); }
.dlgChoice { display: flex; gap: 3px; flex-wrap: wrap; }
.dlgHint { font-size: 0.7857em; color: var(--textColor2); }
.dlgNote { font-size: 0.8571em; color: var(--textColor); padding: 8px 10px; border: 1px solid var(--borderColor31); background: #00000040; }
.dlgStatic .dlgText { font-size: 0.9286em; color: var(--textColor); }
.dlgChecklist { display: flex; flex-direction: column; border: 1px solid var(--borderColor31); max-height: 200px; overflow: auto; }
.dlgCheck { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 0.9286em; cursor: pointer; }
.dlgCheck:hover { background-color: #d2d2d20a; }
.dlgCheck input { accent-color: #d2d2d2; }
.dlgCheckName { color: var(--themeColor); }
.dlgCheckSub { margin-left: auto; font-size: 0.8462em; color: var(--textColor2); }
.dlgError { font-size: 0.8571em; color: var(--occupiedText); }
.dlgFoot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--borderColor31); }

/* ============ editing (step 3) ============ */
#map.editable .sys { cursor: grab; }
#map.editable .sys.locked { cursor: default; }
#map .sys.dragging { cursor: grabbing; }
#map .sys.dragging .box { stroke-width: 1.5; }
#map.connecting { cursor: crosshair; }
#map.connecting .sys { cursor: crosshair; }
#map.connecting .sys:hover .box { fill: #d2d2d214; }
#map .bandLine { stroke: var(--themeColor); stroke-width: 1; stroke-dasharray: 4 4; pointer-events: none; }
#map .selBox { fill: #d2d2d210; stroke: var(--themeColor); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }
#mapBar.readOnly #editGroup .barLabel::after { content: ' · read-only'; color: #6a6a6a; letter-spacing: 0; text-transform: none; }

/* context menu */
.cmMenu { position: fixed; z-index: 3500; min-width: 190px; background-color: var(--popBg); border: 1px solid var(--borderColor31); box-shadow: 0 8px 24px #000000a0; padding: 4px 0; user-select: none; }
.cmTitle { padding: 6px 12px 5px; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); border-bottom: 1px solid var(--borderColor31); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.cmList { display: flex; flex-direction: column; }
.cmItem { position: relative; display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 12px 0 10px; background: none; border: 0; color: var(--textColor); font: inherit; font-size: 0.9286em; text-align: left; cursor: pointer; white-space: nowrap; }
.cmItem:hover, .cmItem:focus-visible { background-color: #d2d2d214; color: #ffffff; outline: none; }
.cmItem:disabled { opacity: .4; cursor: default; }
.cmItem:disabled:hover { background: none; color: var(--textColor); }
.cmItem.cmDanger { color: var(--occupiedText); }
.cmItem.cmChecked .cmLabel { color: var(--themeColor); }
.cmIco { width: 1.2308em; height: 1.2308em; flex-shrink: 0; display: inline-flex; }
.cmIco svg { width: 1.2308em; height: 1.2308em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cmLabel { flex: 1; }
.cmHint { font-size: 0.8462em; color: #6a6a6a; margin-left: 8px; }
.cmArrow { width: 1.0769em; height: 1.0769em; margin-left: 6px; opacity: .6; }
.cmArrow svg { width: 1.0769em; height: 1.0769em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cmSep { height: 1px; margin: 4px 0; background-color: var(--borderColor31); }
.cmSub { display: none; position: absolute; top: -1px; min-width: 170px; background-color: var(--popBg); border: 1px solid var(--borderColor31); box-shadow: 0 8px 24px #000000a0; padding: 4px 0; }
.cmItem:hover > .cmSub, .cmItem:focus-within > .cmSub { display: flex; }

/* system panel actions */
.sysActions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 12px 10px; border-top: 1px solid var(--borderColor31); margin-top: 8px; }

/* add-system search rows */
.srItem.sysItem { display: grid; grid-template-columns: 2.6154em minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
.srItem.sysItem .sysSec { font-family: 'Shentox SemiBold', sans-serif; font-size: 0.8462em; }
.srItem.sysItem .sysSub { grid-column: 2; font-size: 0.7692em; color: var(--textColor2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srItem.sysItem .sysOn { grid-column: 3; grid-row: 1 / span 2; font-size: 0.7692em; color: var(--friendly); letter-spacing: .5px; }
.dlgCustom { display: flex; flex-direction: column; gap: 6px; }
.dlgCustom .srList { max-height: 260px; overflow: auto; border: 1px solid var(--borderColor31); }
.dlgCheckField { padding: 2px 0; }
.dlgCheckField .dlgCheckName { color: var(--textColor); }

/* inline signature editing */
.sigRow .ed { cursor: text; }
.sigRow .ed:hover { box-shadow: inset 0 -1px 0 var(--textColor2); }
.sigRow .ed:empty::before { content: '…'; color: #4a4a4a; }
.sigEdit { width: 100%; height: 22px; padding: 0 5px; background: #00000080; border: 1px solid var(--themeColor); color: var(--themeColor); font: inherit; font-size: 0.9167em; outline: none; min-width: 0; }
.tabAction svg { width: 1em; height: 1em; }

/* notes */
.intelBox { padding: 6px 10px 2px; }
.intelHead { display: flex; align-items: center; gap: 8px; font-size: 0.8571em; letter-spacing: .6px; text-transform: uppercase; color: var(--textColor2); padding: 2px 0 4px; }
.intelHead .k { color: var(--textColor); }
.intelHead .act-add { margin-left: auto; text-transform: none; letter-spacing: 0; }
.intelList { display: flex; flex-direction: column; border-top: 1px solid var(--borderColor31); }
.intelRow { display: grid; grid-template-columns: 1.6923em 5.0769em minmax(0, 1fr) minmax(0, 1fr) 2.7692em auto; gap: 8px; align-items: center; padding: 4px 0; font-size: 0.9286em; border-bottom: 1px solid var(--borderColor31); }
.intelRow.intelStale { opacity: .55; }
.intelLogo { width: 1.6923em; height: 1.6923em; background: #2a2a2a; }
.intelLogo-none { display: inline-block; border: 1px solid var(--borderColor31); background: none; }
.intelKind { color: var(--themeColor); font-family: 'Shentox Medium', 'Segoe UI', sans-serif; white-space: nowrap; }
.intelName, .intelOwner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--textColor); }
.intelNote { color: var(--textColor2); }
.intelSeen { color: var(--textColor2); text-align: right; font-size: 0.9231em; }
.intelBtns { display: flex; align-items: center; gap: 4px; }
.intelBtns .del { width: 1em; height: 1em; }
.killList { display: flex; flex-direction: column; padding: 4px 0; }
.killRow { display: grid; grid-template-columns: 2.6154em 1.8462em minmax(0, 1fr) minmax(0, 7.6923em) 3.6923em; gap: 8px; align-items: center; padding: 4px 10px; font-size: 0.9286em; color: var(--textColor); text-decoration: none; }
.killRow:nth-child(odd) { background: #96969612; }
.killRow:hover { background: #d2d2d214; }
.killRow.killNpc { opacity: .6; }
.killWhen { color: var(--textColor2); white-space: nowrap; }
.killShip { width: 1.8462em; height: 1.8462em; background: #2a2a2a; }
.killWhat { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.killShipName { color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.killVictim { font-size: 0.8462em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.killBy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.killIsk { color: var(--themeColor); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.extLink { margin-left: auto; color: var(--textColor2); text-decoration: none; letter-spacing: .5px; }
.extLink:hover { color: var(--themeColor); }
.stat.st-click { cursor: pointer; }
.stat.st-click:hover { border-color: var(--textColor); }
.notesWrap { display: flex; flex-direction: column; height: 100%; min-height: 160px; }
.notesArea { flex: 1; min-height: 140px; margin: 8px 10px 0; padding: 8px 10px; background: #00000060; border: 1px solid var(--borderColor31); color: var(--themeColor); font: inherit; font-size: 1em; line-height: 1.45; resize: none; outline: none; }
.notesArea:focus { border-color: var(--themeColor); }
.notesBar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 10px 8px; }
.notesState { font-size: 0.7857em; color: var(--textColor2); }
.notesRead { padding: 8px 10px 12px; font-size: 1em; line-height: 1.45; color: var(--textColor); white-space: pre-wrap; }

/* pilots: ship under the name, dock glyph before the system */
.pilotRow .nm { display: flex; flex-direction: column; line-height: 1.15; }
.pilotRow .who { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pilotRow .ship { font-size: 0.7857em; color: var(--textColor2); }
.pilotRow .ship:empty { display: none; }
.pilotRow .val { display: inline-flex; align-items: center; gap: 5px; }
.pilotAdd { width: 1.4286em; height: 1.4286em; margin-left: 2px; padding: 0; background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); font-size: 1em; line-height: 1; cursor: pointer; }   /* off-map pilot: put the system on the map */
.pilotAdd:hover { color: var(--themeColor); border-color: var(--textColor); }
.pilotAdd:disabled { opacity: .4; cursor: default; }
.dockIco { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; opacity: .8; }

/* system panel: last-hour activity */


/* signature table: header stays put while the list scrolls */
/* the header row sticks at the very top of the scroll area: no padding above it for rows to peek through, an opaque background, and a 2px shadow closing the row gap */
.panelBody:has(> .sigTable) { padding-top: 0; }
.sigTable { padding-top: 0; }
.sigRow.hd { position: sticky; top: 0; z-index: 1; background-color: #0e0e0e; padding-top: 6px; box-shadow: 0 2px 0 #0e0e0e; }

/* map log tab */
.logList { display: flex; flex-direction: column; }
.logRow { display: grid; grid-template-columns: 2.6154em 7.3846em auto minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 4px 10px; font-size: 0.9286em; }
.logRow:nth-child(odd) { background: #96969612; }
.logWhen { color: #6a6a6a; text-align: right; }
.logWho { color: var(--themeColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logKind { color: var(--textColor2); font-size: 0.8462em; letter-spacing: .5px; text-transform: uppercase; }
.logWhat { color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logRow .act-restore { font-size: 0.8462em; align-self: center; }
.logRow.hasUndo .logKind { color: var(--stWarning); }

/* new signatures since the last look */
.sigRow.isNew .id::before { content: ''; display: inline-block; width: 0.4167em; height: 0.4167em; border-radius: 50%; background: var(--wormhole); margin: 0 0.4167em 0.1667em -0.8333em; }
.isNewTxt { color: var(--wormhole); }
.staleTxt { color: var(--stWarning); }
.sigRow.sigStale { opacity: .55; }                               /* older than it can be: probably gone */
.sigRow.sigStale .upd { color: var(--stWarning); }
#sigFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#sigFoot:empty { display: none; }
#sigFoot .btn-sm { padding: 2px 8px; }

/* help sheet */
.helpBody { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; padding: 16px 20px 20px; align-content: start; }
.helpSec h3 { margin: 0 0 6px; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: var(--themeColor); font-weight: normal; border-bottom: 1px solid var(--borderColor31); padding-bottom: 4px; }
.helpSec dl { margin: 0; display: grid; grid-template-columns: minmax(9.2308em, 38%) 1fr; gap: 5px 12px; font-size: 0.9286em; }
.helpSec dt { color: var(--textColor); }
.helpSec dd { margin: 0; color: var(--textColor2); }
.helpSec dd i { color: var(--textColor); font-style: normal; }
.helpSec kbd { display: inline-block; min-width: 1.3846em; padding: 0 5px; border: 1px solid var(--borderColor31); background: #00000060; color: var(--themeColor); font-family: inherit; font-size: 0.9231em; line-height: 1.5; text-align: center; }
.hlY { color: var(--jumpbridge); } .hlT { color: var(--wormhole); } .hlR { color: var(--occupiedText); } .hlG { color: var(--stHome); } .hlB { color: var(--stFriendly); } .hlO { color: var(--stWarning); }
@media (max-width: 900px) { .helpBody { grid-template-columns: 1fr; } }

/* ---- an illustration behind a tile, fading to the right: character portraits (v2.7), map art (v2.8) ---- */
.chTile, .artTile { overflow: hidden; }
.chTile > *, .artTile > * { position: relative; z-index: 1; }
.chTile > .tileArt, .artTile > .tileArt { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 78%; background-size: cover; background-position: center 20%; background-color: transparent;
    opacity: .42; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 92%); mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 92%); pointer-events: none; }
.artTile > .tileArt { width: 85%; background-position: left center; opacity: .62; }   /* mostly-black star fields: they can be stronger than portraits */
.chTile.chOff > .tileArt { filter: saturate(.25); opacity: .3; }          /* offline: a quarter of the colour */
.chTile .tileName, .chTile .tileDesc, .artTile .tileName, .artTile .tileDesc, .artTile .tileWho { text-shadow: 0 1px 3px #000; }
/* the illustration picker in the map dialogs */
.artGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr)); gap: 6px; }
.artOpt { position: relative; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--borderColor31); background: #151515; color: var(--textColor2); cursor: pointer; overflow: hidden; font: inherit; }
.artOpt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.artOpt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 0.7857em; text-align: left; background: linear-gradient(0deg, #000c, transparent); color: var(--textColor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artOpt.artNone span, .artOpt.artAuto:not(:has(img)) span { top: 0; display: flex; align-items: center; justify-content: center; background: none; text-transform: uppercase; letter-spacing: 1px; color: var(--textColor2); }
.artOpt:hover img { opacity: 1; }
.artOpt.artOn { border-color: var(--themeColor); box-shadow: inset 0 0 0 1px var(--themeColor); }
.artOpt.artOn img { opacity: 1; }
.chTile .tileHead { align-items: center; }
.chAdded { box-shadow: inset 0 0 0 1px var(--themeColor); }
.chWhere { display: inline-flex; align-items: center; gap: 6px; color: var(--textColor2); }
.chTile .statV.warn { color: var(--stWarning); }
.chMaps { display: flex; flex-wrap: wrap; gap: 4px; }
.chMaps .chip { color: var(--textColor); }
.chMaps .chipOff { color: var(--textColor2); border-style: dashed; }
.chMaps .chipOff .x { color: var(--stWarning); margin-right: 5px; }
.chMaps .chipMore { color: var(--textColor2); cursor: help; }
.chFollowed { color: var(--themeColor); }
.chNote { margin: 18px 2px 0; max-width: 60em; font-size: 0.9286em; color: var(--textColor2); line-height: 1.5; }
.chNote b { color: var(--textColor); font-weight: normal; }

/* ---- Thera & Turnur (v2.9, EvE-Scout): chips under the box, ghost hubs, the panel ---- */
.hubChip { cursor: pointer; }
.hubChip rect { fill: var(--thera); }
.hubChip.hub-turnur rect { fill: var(--turnur); }
.hubChip text { fill: #151515; font-size: 8px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; text-anchor: middle; letter-spacing: .5px; pointer-events: none; }
.hubChip:hover rect { filter: brightness(1.2); }
.hubGhost { cursor: pointer; }
.hubGhost line { stroke: var(--thera); stroke-width: 2; stroke-dasharray: 7 5; }
.hubGhost rect { fill: #0e0e0ecc; stroke: var(--thera); stroke-width: 1.5; stroke-dasharray: 6 4; }
.hubGhost.hub-turnur line, .hubGhost.hub-turnur rect { stroke: var(--turnur); }
.hubGhost .nm { fill: #d2d2d2; font-size: 12px; } .hubGhost .sg { fill: #8a8a8a; font-size: 9px; font-family: 'Shentox SemiBold', monospace; } .hubGhost .x { fill: #8a8a8a; font-size: 12px; }
.hubGhost:hover .x { fill: #d2d2d2; }
#mapTooltip .hubTt-thera { color: var(--thera); } #mapTooltip .hubTt-turnur { color: var(--turnur); }
.viaHub.hub-thera { color: var(--thera); } .viaHub.hub-turnur { color: var(--turnur); }
.notice-hub { border-left-color: var(--thera); cursor: pointer; } .notice-hub.hub-turnur { border-left-color: var(--turnur); }
.lgHub { display: inline-block; font-style: normal; font-size: 0.7143em; line-height: 1.4; padding: 0 3px; margin-right: 3px; color: #151515; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.lgHub.hub-thera { background: var(--thera); } .lgHub.hub-turnur { background: var(--turnur); }
.hbRow { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 5px 10px; border-top: 1px solid #1f1f1f; cursor: pointer; font-size: 0.9286em; }
.hbRow:first-child { border-top: 0; }
.hbRow:hover { background: #d2d2d208; }
.hbTag { font-size: 0.7692em; text-align: center; color: #151515; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; padding: 1px 0; }
.hbTag.hub-thera { background: var(--thera); } .hbTag.hub-turnur { background: var(--turnur); }
.hbSys { min-width: 0; } .hbName { color: var(--themeColor); } .hbReg { color: var(--textColor2); font-size: 0.8462em; }
.hbSub { display: block; color: var(--textColor2); font-size: 0.8462em; font-family: 'Shentox SemiBold', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbWhere { color: var(--textColor2); font-size: 0.8462em; white-space: nowrap; } .hbOn { color: var(--stOnline); }
.hbRow .miniBtn { font-size: 0.8462em; }

/* ---------------- v2.10: route avoid list ---------------- */

.avoidMark rect { fill: #151515; stroke: var(--warn); stroke-width: 1; }
.avoidMark circle, .avoidMark path { fill: none; stroke: var(--warn); stroke-width: 1.4; }
.avTag { font-size: 0.8462em; color: var(--warn); white-space: nowrap; margin-left: 6px; }
.avTag.off { color: var(--textColor2); }
.sysWay .act-avoid { margin-left: auto; }
.avChips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.avChip { display: inline-flex; align-items: center; gap: 4px; color: var(--themeColor); }
.avChip button { background: none; border: 0; color: var(--textColor2); cursor: pointer; padding: 0 0 0 2px; font-size: 1.1em; line-height: 1; }
.avChip button:hover { color: var(--occupiedText); }
.lgAvoid { font-style: normal; color: var(--warn); font-size: 1.1em; line-height: 1; }

/* ---------------- v2.10: pings ---------------- */

.pingRing { pointer-events: none; }
.pingRing rect { fill: none; stroke: var(--warn); stroke-width: 2; }
.pingRing rect.pulse { stroke-width: 6; stroke-opacity: .35; animation: pingPulse 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.pingRing.ping-hostiles rect, .pingRing.ping-help rect { stroke: var(--occupied); }
.pingRing.ping-clear rect { stroke: var(--stOnline); }
.pingRing.ping-scout rect { stroke: var(--wormhole); }
@keyframes pingPulse { from { transform: scale(1); stroke-opacity: .5; } to { transform: scale(1.12); stroke-opacity: 0; } }
#pingStack { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 25; display: flex; flex-direction: column; gap: 6px; width: min(560px, calc(100% - 32px)); pointer-events: none; }
.pingBanner {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; pointer-events: auto;
    background: var(--popBg); border: 1px solid var(--borderColor31); border-left: 3px solid var(--warn);
    font-size: 0.9286em; color: var(--textColor); animation: noticeIn .2s ease-out;
}
.pingBanner.ping-hostiles, .pingBanner.ping-help { border-left-color: var(--occupied); }
.pingBanner.ping-clear { border-left-color: var(--stOnline); }
.pingBanner.ping-scout { border-left-color: var(--wormhole); }
.pingBanner b { color: var(--themeColor); font-weight: normal; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.pingBanner.ping-hostiles .pbText > b:first-child, .pingBanner.ping-help .pbText > b:first-child { color: var(--occupiedText); }
.pbIco svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }
.pingBanner.ping-hostiles .pbIco, .pingBanner.ping-help .pbIco { color: var(--occupied); }
.pbText { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pbWho { display: block; font-size: 0.8462em; color: var(--textColor2); }
.pingBanner .del { background: none; border: 0; color: var(--textColor2); cursor: pointer; font-size: 1.3em; line-height: 1; padding: 0 2px; }
.pingBanner .del:hover { color: var(--themeColor); }
.lgPing { border-color: var(--occupied) !important; box-shadow: 0 0 0 2px #ff5c5c40; }

/* ---------------- v2.10: follow a pilot ---------------- */

.pilotEye { width: 1.6em; height: 1.6em; padding: 0; margin-right: 2px; background: none; border: 1px solid transparent; color: var(--textColor2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pilotEye svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pilotEye:hover { color: var(--themeColor); border-color: var(--borderColor31); }
.pilotEye.on { color: #151515; background: var(--themeColor); border-color: var(--themeColor); }
.pilotRow:not(:hover) .pilotEye:not(.on) { opacity: .45; }

/* ---------------- v2.10: mass through holes ---------------- */

.edgeGauge rect { fill: #151515; stroke: var(--wormhole); stroke-width: 1; }
.edgeGauge rect.fill { fill: var(--wormhole); stroke: none; }
.edgeGauge text { fill: var(--wormhole); font-size: 9px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; text-anchor: middle; }
.edgeGauge.gauge-red rect { stroke: var(--warn); } .edgeGauge.gauge-red rect.fill { fill: var(--warn); } .edgeGauge.gauge-red text { fill: var(--warn); }
.edgeGauge.gauge-crit rect { stroke: var(--occupied); } .edgeGauge.gauge-crit rect.fill { fill: var(--occupied); } .edgeGauge.gauge-crit text { fill: var(--occupiedText); }
.edgeGauge { cursor: pointer; }
.lgGauge { font-style: normal; font-size: 0.8182em; color: var(--wormhole); border: 1px solid var(--wormhole); padding: 0 3px; line-height: 1.3; }
.psBar { position: relative; height: 10px; background: #151515; border: 1px solid var(--borderColor31); margin: 2px 0 8px; }
.psFill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--wormhole); }
.psBar.red .psFill { background: var(--warn); } .psBar.crit .psFill { background: var(--occupied); }
.psTick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--textColor); opacity: .5; }
.psSum { font-size: 0.9286em; color: var(--textColor); } .psSum b { color: var(--themeColor); font-weight: normal; }
.psNote { font-size: 0.7857em; color: var(--textColor2); margin: 4px 0 10px; }
.psList { max-height: 220px; overflow: auto; border-top: 1px solid var(--borderColor31); }
.psRow { display: grid; grid-template-columns: 3em 1fr auto 4.5em 1.4em; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid #1d1d1d; font-size: 0.8571em; }
.psWhen { color: var(--textColor2); } .psWho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--themeColor); }
.psDir { color: var(--textColor2); white-space: nowrap; } .psMass { text-align: right; font-family: 'Shentox SemiBold', monospace; }
.psTag { font-size: 0.8333em; color: var(--textColor2); border: 1px solid var(--borderColor31); padding: 0 4px; }
.psRow .del { background: none; border: 0; color: var(--textColor2); cursor: pointer; font-size: 1.3em; line-height: 1; padding: 0; }
.psRow .del:hover { color: var(--occupiedText); }
.psAdd { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.psPresets { display: flex; flex-wrap: wrap; gap: 5px; }
.psPre { background: none; cursor: pointer; }
.psPre:hover { color: var(--themeColor); border-color: var(--textColor); }
.psForm { display: grid; grid-template-columns: 1fr 7em auto auto; gap: 6px; width: 100%; }
.psForm .dlgInput { min-width: 0; }

/* ---------------- v2.10: Local ---------------- */

.localBox { padding: 6px 10px 0; margin-bottom: 6px; }
.localBox:empty { display: none; }
.localBox .intelHead .act-local { margin-left: auto; text-transform: none; letter-spacing: 0; }
.lcCounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; font-size: 0.9286em; padding: 2px 0 6px; }
.lcCounts.lcOld { opacity: .6; }
.lcN b { font-weight: normal; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; font-size: 1.15em; margin-right: 3px; }
.lc-other b { color: var(--occupiedText); } .lc-friendly b { color: var(--friendly); } .lc-npc b { color: var(--textColor); }
.lcCounts .extLink { margin-left: auto; font-size: 0.8462em; }
.lcCounts .del { background: none; border: 0; color: var(--textColor2); cursor: pointer; font-size: 1.3em; line-height: 1; padding: 0; }
.lcCounts .del:hover { color: var(--occupiedText); }
.lcGroups { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 3px 10px; }
.lcGroup { display: flex; align-items: center; gap: 6px; padding: 2px 4px 2px 0; border-left: 2px solid var(--occupied); padding-left: 5px; font-size: 0.8571em; color: var(--textColor); text-decoration: none; min-width: 0; }
.lcGroup:hover { background: #d2d2d20a; color: var(--themeColor); }
.lcGroup.lc-friendly { border-left-color: var(--friendly); } .lcGroup.lc-npc { border-left-color: #555; } .lcGroup.lc-mixed { border-left-color: var(--warn); }
.lcGroup img { width: 18px; height: 18px; flex-shrink: 0; }
.lcName { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcTick { color: var(--textColor2); }
.lcCount { font-family: 'Shentox SemiBold', monospace; color: var(--themeColor); }
.lcHist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.lcH { background: none; border: 1px solid var(--borderColor31); color: var(--textColor2); font-size: 0.7857em; padding: 1px 6px; cursor: pointer; }
.lcH b { font-weight: normal; color: var(--friendly); } .lcH b.bad { color: var(--occupiedText); }
.lcH.on, .lcH:hover { color: var(--themeColor); border-color: var(--textColor); }
.localBadge { pointer-events: auto; }
.localBadge rect { fill: #151515; stroke: var(--friendly); stroke-width: 1; }
.localBadge path { fill: none; stroke: var(--friendly); stroke-width: 1.1; }
.localBadge text { fill: var(--friendly); font-size: 8.5px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.localBadge.local-bad rect { stroke: var(--occupied); fill: #2a1010; } .localBadge.local-bad path { stroke: var(--occupiedText); } .localBadge.local-bad text { fill: var(--occupiedText); }
.localBadge.local-old { opacity: .45; }
.lgLocal { font-style: normal; font-size: 0.8182em; color: var(--occupiedText); border: 1px solid var(--occupied); background: #2a1010; padding: 0 4px; line-height: 1.3; }

/* ---------------- v2.10: phone — compact bar, full map, panels as a bottom sheet ---------------- */

#sheetTabs { display: none; }
body.phone #mainTop { height: 48px; }
body.phone #mainTop-Logo { height: 48px; width: 44px; }
body.phone .svg_ewtLogo { width: 32px; height: 32px; }
body.phone .menuIcon { height: 48px; width: 36px; }
body.phone .topSeparator, body.phone #pageName, body.phone #btnLogout, body.phone #eveTime { display: none; }
body.phone .toggleBtn { margin: 0 4px; padding: 0 6px; }
body.phone #whoBtn img { width: 26px; height: 26px; }
body.phone #mapBar { padding: 6px 8px; gap: 6px; }
body.phone #mapName { min-width: 0; flex: 1 1 auto; font-size: 1.05em; padding: 5px 10px; overflow: hidden; }
body.phone #mapNameText { overflow: hidden; text-overflow: ellipsis; }
body.phone #mapMeta, body.phone #showGroup, body.phone #editGroup .barLabel, body.phone #btnTidy, body.phone #btnLockLayout { display: none; }
body.phone #editGroup { margin-left: 0; }
body.phone .barBtn .bl { display: none; }
body.phone #mapSearch { width: 120px; }
body.phone #mapSearch .tsKey { display: none; }
body.phone #legendBar, body.phone #LegalNotice, body.phone #miniMap { display: none !important; }
body.phone #map { touch-action: none; }
body.phone #zoomBox { bottom: 62px; right: 10px; }
body.phone #pingStack { top: 8px; }
body.phone #sheetTabs {
    display: flex; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; z-index: 22;
    background: var(--popBg); border-top: 1px solid var(--borderColor31);
}
#sheetTabs button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: 0; color: var(--textColor2); font-size: 0.7143em; letter-spacing: .5px; cursor: pointer; padding: 0 4px; }
#sheetTabs button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sheetTabs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#sheetTabs button.on { color: var(--themeColor); box-shadow: inset 0 2px 0 var(--themeColor); }
body.phone .panel { display: none; }
body.phone .panel.sheetOn {
    display: flex !important; position: absolute; left: 0 !important; right: 0 !important; top: auto !important; bottom: 52px !important;
    width: auto !important; height: 58% !important; max-height: none; min-width: 0; z-index: 21; background-color: #0d0d0d;
    border-left: 0; border-right: 0; box-shadow: 0 -8px 24px #00000080;
}
body.phone .panel.sheetOn > .panelBody { display: block; flex: 1 1 auto; overflow: auto; }   /* collapsed on desktop or not: a sheet shows it all */
body.phone .panel.sheetOn > .tabRow { display: flex; overflow-x: auto; }
body.phone .panel.sheetOn > .panelFoot { display: block; }
body.phone .panelHead { cursor: default; height: 38px; }
body.phone .panelHead .grip, body.phone .panelResize, body.phone .panelCollapse { display: none; }
body.phone .panelClose { font-size: 1.6em; width: 1.4em; height: 1.4em; }
body.phone .dlg { width: calc(100vw - 16px) !important; max-height: calc(100vh - 16px); }
body.phone .psForm { grid-template-columns: 1fr 6em; }
body.phone .sysActions { flex-wrap: wrap; }

/* ---------------- v2.12: kills on the map ---------------- */

.killBadge { cursor: pointer; }
.killBadge rect { fill: #2a1010; stroke: #a33; stroke-width: 1; }
.killBadge path { fill: none; stroke: var(--occupiedText); stroke-width: 1.1; }
.killBadge text { fill: var(--occupiedText); font-size: 8.5px; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; }
.killBadge.kill-hot rect { fill: var(--occupied); stroke: var(--occupied); } .killBadge.kill-hot path { stroke: #151515; } .killBadge.kill-hot text { fill: #151515; }
.killBadge.kill-pods { opacity: .7; }
.killBadge:hover rect { filter: brightness(1.3); }
.lgKill { font-style: normal; font-size: 0.8182em; color: var(--occupiedText); border: 1px solid #a33; background: #2a1010; padding: 0 4px; line-height: 1.3; }

/* ---------------- v2.12: rolling planner ---------------- */

.psSum + .act-roll, .act-roll { margin-top: 6px; }
.rlSum { font-size: 0.9286em; color: var(--textColor); margin-bottom: 10px; } .rlSum b { color: var(--themeColor); font-weight: normal; }
.rlFleet { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rlShip { display: grid; grid-template-columns: 1fr auto auto 1.6em; gap: 8px; align-items: center; font-size: 0.8571em; color: var(--textColor2); }
.rlShip label { display: inline-flex; align-items: center; gap: 4px; }
.rlShip .rlCold, .rlShip .rlHot { width: 4.5em; }
.rlShip .del { background: none; border: 0; color: var(--textColor2); cursor: pointer; font-size: 1.4em; line-height: 1; padding: 0; }
.rlShip .del:disabled { opacity: .3; cursor: default; }
.rlSteps { margin: 0; padding: 0 0 0 1.8em; max-height: 260px; overflow: auto; font-size: 0.8571em; border-top: 1px solid var(--borderColor31); }
.rlStep { display: grid; grid-template-columns: 7em 1fr 3em; gap: 2px 10px; padding: 5px 0; border-bottom: 1px solid #1d1d1d; border-left: 2px solid transparent; padding-left: 6px; }
.rlStep::marker { color: var(--textColor2); }
.rlWho { color: var(--themeColor); } .rlMove b { font-weight: normal; color: var(--themeColor); } .rlUsed { text-align: right; font-family: 'Shentox SemiBold', monospace; }
.rlNote { grid-column: 2 / 4; color: var(--textColor2); font-size: 0.9167em; }
.rl-closes { border-left-color: var(--stOnline); } .rl-closes .rlNote { color: var(--stOnline); }
.rl-maybe { border-left-color: var(--warn); } .rl-maybe .rlNote { color: var(--warn); }
.rl-stranded { border-left-color: var(--occupied); } .rl-stranded .rlNote { color: var(--occupiedText); }
.rlFoot { font-size: 0.8571em; color: var(--textColor); margin: 8px 0 4px; }
body.phone .rlShip { grid-template-columns: 1fr 1fr; }

/* ---------------- v2.12: guest links ---------------- */

.guestPage #guestName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.3571em; color: var(--themeColor); letter-spacing: 1px; margin-left: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.guestPage #guestBadge { font-size: 0.7143em; letter-spacing: 1.5px; color: #151515; background: var(--warn); padding: 2px 6px; margin-left: 12px; flex-shrink: 0; }
.guestPage #guestExp { font-size: 0.8571em; color: var(--textColor2); margin-left: 12px; white-space: nowrap; }
.guestPage #mainTop-Right { padding-right: 16px; }
.guestPage #guestSys { position: absolute; }
.guestPage #guestSys .panelBody { padding: 8px 12px; }
.guestPage .eolTxt { color: var(--eol); font-size: 0.8571em; }
@media (max-width: 760px) { .guestPage #pageName, .guestPage #guestExp { display: none; } .guestPage #guestSys { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; } }
.glList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.glRow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--borderColor31); font-size: 0.8571em; }
.glWhat { min-width: 0; } .glLabel { color: var(--themeColor); } .glMeta { display: block; color: var(--textColor2); font-size: 0.9167em; }
.glUrl { width: 100%; font-family: monospace; font-size: 0.8571em; }
.glNew { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; }