/* Fitlab — the fit viewer (index.html). Builds on styles.css (site chrome); harmonised.css loads after it.
   Atlas brand book: menu buttons grey / lighter / bright with a bottom mark, frameless tabs on a hairline,
   uppercase Shentox Medium action buttons, dark fields, the selected row with a left tick. */

:root {
    --text: #999; --text2: #6b6b6b; --theme: #d2d2d2; --b: #313131; --panel: #00000042;
    --mark: inset 0 -2px 0 #d2d2d2; --btnN: #6b6b6b; --btnH: #9e9e9e; --btnS: #d2d2d2;
    --ok: #48f0c0; --warn: #ffb648; --bad: #ff9a9a; --badFrame: #ff5c5c;
    --em: #5aa0ff; --th: #ff6a4d; --ki: #b0b0b0; --ex: #ffb648;
}
[hidden] { display: none !important; }
button { font: inherit; }
#flApp { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
.grow { flex: 1; } .dim { color: var(--text2); } .num { text-align: right; font-variant-numeric: tabular-nums; } .bad { color: var(--bad) !important; }
.game { font-size: .69em; letter-spacing: 1px; color: #111; background: var(--warn); padding: 0 4px; margin-left: 6px; vertical-align: 2px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; }

/* ---------------- buttons (brand book) */
.mb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--b); padding: 6px 13px 8px; color: var(--btnN); font-size: .91em; cursor: pointer; transition: color .15s linear; }
.mb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mb:hover { color: var(--btnH); } .mb.on { color: var(--btnS); box-shadow: var(--mark); } .mb:disabled { opacity: .35; cursor: default; color: var(--btnN); }
.mb.sm { font-size: .84em; padding: 4px 10px 6px; }
.act { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .8em; letter-spacing: 1px; text-transform: uppercase; padding: .55em 1.1em calc(.55em + 2px); line-height: 1.2;
    background: none; border: 1px solid var(--b); color: var(--btnN); cursor: pointer; transition: color .15s linear; }
.act:hover { color: var(--btnH); } .act.pri { color: var(--btnS); } .act.pri:hover { color: #fff; }
.x { background: none; border: 0; color: var(--text2); cursor: pointer; font-size: .95em; padding: 2px 6px; } .x:hover { color: var(--theme); }

/* ---------------- Fitlab bar */
#flBar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--panel); border-bottom: 1px solid var(--b); flex-wrap: wrap; position: sticky; top: 0; z-index: 15; backdrop-filter: blur(6px); }
#flBar .tgrp { display: flex; gap: 4px; flex-wrap: wrap; } .tsep { width: 1px; height: 26px; background: var(--b); margin: 0 8px; }
.tb { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid var(--b); padding: 7px 14px 9px; color: var(--btnN); font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .83em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: color .15s linear; }
.tb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tb:hover { color: var(--btnH); } .tb.pri { color: var(--btnS); } .tb.pri:hover { color: #fff; } .tb:disabled { opacity: .35; cursor: default; color: var(--btnN); }
.pk { display: inline-flex; align-items: center; gap: 7px; background: none; border: 1px solid transparent; padding: 6px 11px 8px; color: var(--btnS); font-size: .93em; cursor: pointer; }
.pk:hover { border-color: var(--b); } .pk svg { width: 16px; height: 16px; fill: none; stroke: var(--btnN); stroke-width: 1.6; }
.pk small { color: var(--btnN); font-size: .84em; letter-spacing: 1px; } .pk b { font-weight: normal; } .pk i { font-style: normal; color: var(--btnN); font-size: .86em; }

/* ---------------- layout */
#flMain { display: grid; grid-template-columns: var(--lpW, 20%) minmax(0, 1fr); gap: 10px; padding: 10px; align-items: start; width: 100%; flex: 1 0 auto; }
#flWork { min-width: 0; }
.cols2 { display: grid; grid-template-columns: minmax(0, 1fr) var(--spW, 33.3%); gap: 10px; margin-top: 10px; align-items: start; }
.panel { border: 1px solid var(--b); background: var(--panel); min-width: 0; }

/* ---------------- left panel */
.lp { border: 1px solid var(--b); background: var(--panel); display: flex; flex-direction: column; font-size: .95em; position: sticky; top: 59px; height: calc(100vh - 64px - 59px - var(--lpGap, 10px)); min-height: 420px; }
.lpTabs { display: flex; border-bottom: 1px solid var(--b); padding: 0 6px; flex-shrink: 0; }
.lpTabs button { flex: 1; background: none; border: 0; text-align: center; white-space: nowrap; padding: 9px 4px 10px; margin-bottom: -1px; color: var(--btnN); cursor: pointer; transition: color .15s linear; }
.lpTabs button:hover { color: var(--btnH); } .lpTabs button.on { color: var(--btnS); box-shadow: var(--mark); }
#lpBody { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.lpSearch { display: flex; gap: 6px; padding: 10px 10px 6px; align-items: center; flex-shrink: 0; }
.lpSearch .sb { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; border: 1px solid var(--b); min-height: 34px; padding: 0 10px; color: var(--text2); background: #00000060; }
.lpSearch .sb:focus-within { border-color: var(--theme); }
.lpSearch .sb svg { width: 15px; height: 15px; fill: none; stroke: var(--btnN); stroke-width: 1.8; flex-shrink: 0; }
.lpSearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--theme); font: inherit; }
.lpSearch input::placeholder { color: #6b6b6b; }
.lpSearch .sb.dis, .lpFilt.dis { opacity: .45; }
.lpFilt { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; padding: 4px 10px 10px; border-bottom: 1px solid var(--b); color: var(--btnN); }
.lpFilt .fi { display: flex; justify-content: center; align-items: center; height: 36px; border: 1px solid var(--b); }
.lpFilt .fi svg.f { fill: currentColor; stroke: none; width: 21px; height: 21px; }
svg.f.s { fill: none !important; stroke: currentColor !important; stroke-width: 2.6; stroke-linejoin: miter; }
.lpSoon { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; } .lpSoon b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1.5px; color: var(--theme); font-weight: normal; } .lpSoon span { line-height: 1.5; }
.lpTree { padding: 4px 0 8px; overflow-y: auto; min-height: 0; flex: 1; }
.tn { display: flex; align-items: center; gap: 6px; padding: 3px 10px; color: var(--text); white-space: nowrap; width: 100%; background: none; border: 0; text-align: left; cursor: pointer; }
.tn:hover { background: #d2d2d20a; } .tn .ar { color: var(--text2); width: 10px; font-size: .86em; flex-shrink: 0; }
.tn .gi { width: 14px; height: 14px; display: block; background: #d2d2d21a; border-radius: 2px; flex-shrink: 0; margin: 0 2px; }
.tn .gic { width: 18px; height: 18px; display: block; flex-shrink: 0; opacity: .6; } .tn:hover .gic { opacity: .9; }
.tn .tt { overflow: hidden; text-overflow: ellipsis; } .tn .cn { margin-left: auto; color: var(--text2); font-size: .92em; padding-left: 6px; }
.tn.leaf { padding-left: 30px; color: var(--theme); } .tn.leaf img { width: 20px; height: 20px; background: #1a1a1a; flex-shrink: 0; }
.tn.leaf.fit { padding-left: 14px; }
.tn.sec { cursor: default; font-size: .81em; letter-spacing: 1.5px; color: var(--text2); padding: 10px 12px 4px; } .tn.sec:hover { background: none; }
.tn.sec.hs { padding-top: 8px; display: flex; align-items: center; gap: 6px; } .tn.sec .tfold { margin-left: auto; height: 22px; } .tn.sec :is(.hsort, .cn) + .tfold { margin-left: 4px; } .tfold svg, .bti svg { pointer-events: none; } .hsort { margin-left: auto; display: inline-flex; gap: 3px; letter-spacing: 0; font-size: 1.25em; } .hsort .mb.sm { padding: 2px 8px 4px; }
.tn .flogo { width: 18px; height: 18px; display: block; flex-shrink: 0; border-radius: 2px; }
.tn .race { width: 10px; height: 10px; display: block; flex-shrink: 0; margin: 0 4px; transform: rotate(45deg); opacity: .8; }
.tn.path { cursor: default; font-size: .86em; color: var(--text2); padding: 8px 12px 2px; white-space: normal; } .tn.path:hover { background: none; }
.lpFoot { border-top: 1px solid var(--b); padding: 6px 12px 7px; font-size: .84em; color: var(--text2); flex-shrink: 0; }

/* the tabs strip stays where it is while the fit scrolls (wide layout, where the page scrolls inside #flApp): its backdrop runs from the
   top of the scrolling area (behind the top bar) down to halfway into the gap under the strip, painted with the page's own gradient
   (fixed, so it matches what is behind): the fit is never seen above that line */
@media (min-width: 1101px) {
    #flTabsBar { position: sticky; top: 59px; z-index: 12; }
    #flTabsBar::before { content: ''; position: absolute; left: -1px; right: -1px; top: -60px; bottom: -6px; z-index: -1; pointer-events: none;
        background: linear-gradient(to bottom, transparent 59px, #00000030 59px, #00000030 calc(100% - 5px), transparent calc(100% - 5px)) scroll,
            radial-gradient(circle, rgba(42,42,42,1) 0%, rgba(21,21,21,1) 100%) fixed; }
}
/* ---------------- fit tabs and header: a framed strip closed by its bottom border; inside, the site's tab mechanism (frameless, the
   open one marked underneath); the tabs scroll in their track (wheel, or ◂ ▸ when they overflow), never a scrollbar; SKILLS at the far right */
.fitTabs { display: flex; align-items: stretch; padding: 0 6px; border: 1px solid var(--b); background: #00000030; min-width: 0; }
.ftTrack { display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; overflow: hidden; scroll-behavior: smooth; }
.ft { display: flex; align-items: center; gap: 8px; padding: 9px 12px 10px; margin-bottom: -1px; font-size: .93em; color: var(--btnN); cursor: pointer; white-space: nowrap; max-width: 280px; flex-shrink: 0; transition: color .15s linear; }
.ft:hover { color: var(--btnH); } .ft img { width: 20px; height: 20px; background: #1a1a1a; } .ft .ftn { overflow: hidden; text-overflow: ellipsis; }
/* the source mark and the unsaved dot keep their slot whatever they show, so a change never moves the tabs */
.ft .fsrc { width: 14px; height: 14px; flex-shrink: 0; display: inline-flex; color: var(--btnN); } .ft .fsrc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; } .ft.on .fsrc { color: var(--btnH); }
.ft .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); display: inline-block; flex-shrink: 0; visibility: hidden; } .ft .dot.on { visibility: visible; }
.ft.on { color: var(--theme); box-shadow: var(--mark); }   /* same size as the others: picking a tab moves nothing */
.ftBtns { display: flex; align-items: center; gap: 4px; margin-left: 8px; flex-shrink: 0; } .ftBtns .mb { height: 24px; width: 28px; padding: 0; justify-content: center; line-height: 1; font-size: 1.05em; }
.ftBtns .nav { display: none; } .fitTabs.overflow .ftBtns .nav { display: inline-flex; } .ftBtns .nav:disabled { opacity: .35; cursor: default; }
.fitTabs .pk { margin-left: auto; align-self: center; padding: 4px 9px 6px; flex-shrink: 0; }
.ft .ren { background: none; border: 0; color: var(--btnN); font-size: .85em; cursor: pointer; padding: 0 3px; } .ft .ren:hover { color: var(--btnH); }
.midHead .mctl { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0; font-size: 1.05em; margin-left: auto; } .midHead .mctl .ctl { display: inline-flex; align-items: center; gap: 4px; }
.midHead .shipTag { display: inline-flex; align-items: baseline; gap: 6px; margin-right: 2px; letter-spacing: 0; font-size: .95em; white-space: nowrap; } .midHead .shipTag b { font-weight: normal; color: var(--theme); } .midHead .shipTag span { color: var(--text2); font-size: .9em; }
.midHead > .dim { white-space: nowrap; }
@container (max-width: 1000px) { .midHead .shipTag span { display: none; } .midHead .mctl .lbl { display: none; } }
@container (max-width: 860px) { .midHead .mctl .mb svg { display: none; } .midHead .mctl .mb { padding: 3px 7px 5px; } .midHead .shipTag { margin-right: 4px; } }
.midHead .mctl .mb { padding: 3px 9px 5px; } .midHead .mctl .mb svg { width: 13px; height: 13px; }
@media (max-width: 1500px) { .midHead .mctl .lbl { display: none; } }
@media (max-width: 1350px) { #tbUndo span, #tbRedo span { display: none; } #tbUndo, #tbRedo { padding: 6px 9px 8px; } }
@media (max-width: 1200px) { .fitTabs .pk small { display: none; } }
@media (max-width: 1250px) { .midHead .shipTag span { display: none; } .midHead .mctl .mb svg { display: none; } .midHead .mctl .mb { padding: 3px 7px 5px; } .midHead .mctl .vsep { margin: 0 3px; } }

.lbl { font-size: .78em; letter-spacing: 1.5px; color: var(--btnN); margin: 0 2px 0 6px; } .vsep { width: 1px; height: 24px; background: var(--b); margin: 0 6px; }
.warnBar { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #ffb64855; background: #ffb6480a; padding: 7px 10px; margin-top: 8px; font-size: .95em; }
.warnBar span { flex: 1; } .warnBar b { color: var(--warn); font-weight: normal; }

/* ---------------- loading and welcome */
.loadBox { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 70px 20px; border: 1px solid var(--b); background: var(--panel); text-align: center; position: relative; overflow: hidden; }
#flLoading { background: #121212 url('img/w/fitlab_theme_new_f_05.jpg') center 40% / cover no-repeat; } #flLoading::before { content: ''; position: absolute; inset: 0; background: #0d0d0db8; } #flLoading > * { position: relative; }
.loadBox b { color: var(--theme); font-weight: normal; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1px; } .loadBox span { font-size: .95em; color: var(--text2); }
.spin { width: 26px; height: 26px; border: 2px solid #313131; border-top-color: #d2d2d2; border-radius: 50%; animation: flspin 1s linear infinite; margin-bottom: 6px; }
@keyframes flspin { to { transform: rotate(360deg); } }
#flWelcome { position: relative; overflow: hidden; border: 1px solid var(--b); background: #121212; min-height: calc(100vh - 64px - 69px - 43px); display: flex; }
/* the hangar scene fills the panel (img/w/: the web-weight copies of the theme pictures); a vignette keeps the text readable */
#flWelcome .wArt { position: absolute; inset: 0; background: url('img/w/fitlab_theme_new_f_01.jpg') center 45% / cover no-repeat; opacity: .7; }
#flWelcome .wArt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, #0d0d0da6 0%, #0d0d0d55 55%, #0d0d0dcc 100%), linear-gradient(180deg, transparent 55%, #121212 100%); }
.wIn { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3em 18px 2.5em; gap: 0; }
.flMark { width: 6.5em; height: 6.5em; fill: #d2d2d263; }
#flTitle { margin: .45em 0 0; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; font-size: 2.6em; letter-spacing: .35em; padding-left: .35em; color: var(--theme); }
#flSub { margin: .4em 0 0; color: var(--text); font-size: 1.0714em; }
.wHow { margin: 1.4em 0 0; color: var(--text); } .wHow b { color: var(--theme); font-weight: normal; }
.wBtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 1.1em; }
#heroChips { display: none; } #heroNext { margin-top: 1.6em; }
.wWhy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; max-width: 60em; margin-top: 2em; text-align: left; }
.flPoint { position: relative; overflow: hidden; background-color: #0d0d0dcc; border: 1px solid var(--b); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.flPoint::before { content: ''; position: absolute; inset: 0; background: center / cover no-repeat; opacity: .28; mask-image: linear-gradient(90deg, #0004, #000); -webkit-mask-image: linear-gradient(90deg, #0004, #000); }
.flPoint:nth-child(1)::before { background-image: url('img/w/fitlab_theme_new_01.jpg'); } .flPoint:nth-child(2)::before { background-image: url('img/w/fitlab_theme_new_02.jpg'); } .flPoint:nth-child(3)::before { background-image: url('img/w/fitlab_theme_new_08.jpg'); }
.flPoint > * { position: relative; }
.flPoint b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; color: var(--theme); letter-spacing: 1px; } .flPoint span { font-size: 1em; line-height: 1.5; }
.wCards { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; width: 100%; max-width: 60em; margin-top: 12px; text-align: left; }
.fbCard { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; background-color: #0d0d0dcc; border: 1px solid var(--b); padding: 12px 16px; }
.fbText { display: flex; flex-direction: column; gap: 3px; flex: 1 1 20em; min-width: 0; }
.fbTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1.5px; color: var(--theme); font-size: 1em; } .fbSub { color: var(--text2); font-size: .96em; }
.fbBtns { display: flex; gap: 3px; }
.flRoad { display: flex; flex-direction: column; justify-content: center; gap: 3px; background-color: #0d0d0dcc; border: 1px solid var(--b); padding: 12px 18px; text-decoration: none; transition: border-color .15s linear; }
.flRoad:hover { border-color: #3e3e3e; } .flRoad:hover .fbSub { color: var(--btnH); }

/* ---------------- middle: the module lines (racks, and the same lines as grid boxes or at pyfa's reduced density) */
.midHead { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--b); font-size: .86em; letter-spacing: 1.5px; } .midHead > span:first-child { color: var(--theme); }
.rack { border-bottom: 1px solid #d2d2d212; padding-bottom: 4px; }
.rh { display: flex; align-items: center; gap: 8px; padding: 7px 10px 4px; font-size: .84em; letter-spacing: 1.5px; color: var(--text2); }
.rh .g { color: var(--text); display: flex; } .rh .g svg { width: 16px; height: 16px; display: block; } .rh .g svg.f { fill: currentColor; }
.pips { display: flex; gap: 3px; margin-left: 6px; flex-wrap: wrap; } .pips i { width: 7px; height: 7px; border: 1px solid #555; display: block; } .pips i.u { background: var(--theme); border-color: var(--theme); }
.rc { margin-left: auto; letter-spacing: 0; } .rc.over { color: var(--bad); }
/* the HIGH rack's hardpoints after the squares: the STATS panel's icons, bright when used */
.hps { display: flex; gap: 3px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--b); } .hps + .hps { margin-left: 4px; padding-left: 0; border-left: 0; }
.hpi { width: 18px; height: 18px; display: block; opacity: .25; } .hpi.on { opacity: 1; }
/* the calibration: a small bar in the RIGS header (racks, reduced) or a full one above the rack (grid) */
.cbar { position: relative; width: 150px; height: 14px; background: #d2d2d20d; margin-left: 12px; flex-shrink: 0; } .cbar i { position: absolute; inset: 0 auto 0 0; background: #48f0c055; } .cbar.over i { background: #ff5c5c66; }
.cbar b { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 5px; font-weight: normal; font-size: .72em; letter-spacing: 1px; line-height: 14px; color: var(--theme); white-space: nowrap; }
.panel.mid .bar.calib { margin: 10px 10px 0; }
.m1 { display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px 44px 106px 62px 58px 66px 66px; gap: 10px; align-items: center; margin: 2px 8px; padding: 4px 8px 4px 15px; position: relative; background: #ffffff05; box-shadow: inset 9px 0 0 #3d3d3d; }
.m1.on { box-shadow: inset 9px 0 0 var(--ok); } .m1.online { box-shadow: inset 9px 0 0 #474747; } .m1.heat { box-shadow: inset 9px 0 0 var(--badFrame); } .m1.off { box-shadow: inset 9px 0 0 #2b2b2b; opacity: .55; }
.m1 img { width: 34px; height: 34px; background: #1a1a1a; } .m1 .ph { width: 34px; height: 34px; border: 1px dashed #3a3a3a; display: flex; justify-content: center; align-items: center; color: #5a5a5a; }
.ph svg.f { width: 18px; height: 18px; fill: currentColor; } .ph svg.f.s { width: 16px; height: 16px; }
.m1 .t { display: flex; flex-direction: column; min-width: 0; } .m1 .t b { font-weight: normal; color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m1 .t span { font-size: .86em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; } .m1 .t span img { width: 16px; height: 16px; }
.m1 .cp { font-size: .93em; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .m1 .cp small { color: var(--text2); font-size: .89em; }
/* the racks' column titles */
.m1.m1h { background: none; box-shadow: none; padding-top: 6px; padding-bottom: 2px; margin-bottom: 0; } .m1.m1h .cp { font-size: .69em; letter-spacing: .5px; color: var(--text2); }
/* narrower middle panel: the less used columns go first */
.panel.mid { container-type: inline-size; }
@container (max-width: 760px) { .m1 { grid-template-columns: 34px minmax(0, 1fr) 52px 44px 106px 62px; } .m1 > .cp:nth-child(n+7) { display: none; } }
@container (max-width: 560px) { .m1 { grid-template-columns: 34px minmax(0, 1fr) 52px 44px; } .m1 > .cp:nth-child(n+5) { display: none; } }
.acts { background: none; border: 0; color: var(--text2); cursor: pointer; padding: 2px 4px; font-size: 1.15em; } .acts:hover { color: var(--theme); }
/* charge slot: half the module icon, an empty frame when nothing is loaded; the charge's name right after it */
.m1 .t span.chs { box-sizing: border-box; width: 17px; height: 17px; flex: 0 0 17px; display: block; overflow: hidden; border: 1px dashed #6b6b6b; background: #0d0d0d; font-size: 0; }
.m1 .t span.chs.on { border: 1px solid #5a5a5a; }
.m1 .t span.chs img { width: 100%; height: 100%; display: block; background: none; }
.m1 .t span.chn { font-size: .97em; color: #b0b0b0; flex-shrink: 0; overflow: visible; margin-left: 2px; display: inline; }
.m1 .t span.chn.nil { color: #6b6b6b; font-style: italic; }
.m1.empty { background: none; box-shadow: none; border: 1px dashed #2c2c2c; }
/* the state bar (Racks, Reduced): a click switches active / not active; a click elsewhere on the row, online / offline */
.m1 .sbar { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; cursor: pointer; } .m1.r1 .sbar { width: 6px; }
.m1 .sbar:hover { background: #ffffff26; }
.m1.r1:is(.m1h, .empty) { box-shadow: none; }
.m1.sel { outline: 1px solid var(--theme); outline-offset: -1px; background: #d2d2d214; }
/* grid: the same lines, a 56 px box with the charge in its corner */
.m1.g1 { grid-template-columns: 58px minmax(0, 1fr) 52px 44px 106px 62px 58px 66px 66px; margin: 3px 8px; padding: 4px 8px 4px 5px; }
.m1.g1 .box { position: relative; width: 56px; height: 56px; display: block; border: 1px solid #2f2f2f; background: #121212; box-sizing: border-box; }
.m1.g1 .box > img { width: 100%; height: 100%; display: block; background: none; } .m1.g1 .box .chg { position: absolute; right: 3px; bottom: 3px; width: 20px; height: 20px; border: 1px solid #555; background: #111; }
/* the box's border carries the state: no left bar in the grid (the warning bar of a problem stays) */
.m1.g1.on, .m1.g1.online, .m1.g1.heat, .m1.g1.off { box-shadow: none; }
.m1.g1.on .box { border-color: #48f0c088; } .m1.g1.online .box { border-color: #6b6b6b; } .m1.g1.heat .box { border-color: var(--badFrame); } .m1.g1.off .box { border-color: #3a3a3a; }
.m1.g1 .box.ph { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px dashed #3a3a3a; background: none; color: #5a5a5a; }
.m1.g1 .t b { font-size: 1.05em; }
/* reduced: pyfa's density — 20 px lines, 16 px icons, the state as the left bar, the charge as a chip after the name */
.m1.r1 { grid-template-columns: 16px minmax(0, 1fr) 52px 44px 106px 62px 58px 66px 66px; gap: 8px; margin: 0 8px; padding: 1px 6px 1px 11px; min-height: 20px; font-size: .86em; box-shadow: inset 6px 0 0 #3a3a3a; background: none; }
.m1.r1:nth-child(even) { background: #ffffff04; } .m1.r1.on { box-shadow: inset 6px 0 0 var(--ok); } .m1.r1.heat { box-shadow: inset 6px 0 0 var(--badFrame); } .m1.r1.off { box-shadow: inset 6px 0 0 #2b2b2b; }
.m1.r1 > img, .m1.r1 .ph { width: 16px; height: 16px; } .m1.r1 .ph svg { width: 11px; height: 11px; }
.m1.r1 .t { flex-direction: row; align-items: center; gap: 8px; } .m1.r1 .t b { font-size: 1em; flex: 0 0 auto; max-width: 100%; } .m1.r1 .t .chs { width: 12px; height: 12px; flex-basis: 12px; } .m1.r1 .t .chn { font-size: .92em; color: var(--text2); flex: 0 1 auto; min-width: 30px; overflow: hidden; text-overflow: ellipsis; }
.m1.r1 .cp { font-size: .95em; } .m1.r1 .acts { font-size: .9em; padding: 0; }
.m1.r1.m1h { padding-top: 6px; padding-bottom: 0; min-height: 0; background: none; } .m1.r1.m1h .cp { font-size: .69em; }
.panel.mid.rd .rh { padding: 6px 10px 2px; font-size: .74em; } .panel.mid.rd .cbar { height: 11px; width: 120px; } .panel.mid.rd .cbar b { font-size: .64em; line-height: 11px; }
.panel.mid.rd .m1.empty .t b { font-size: .95em; }
/* pyfa's mouse: the icon changes the state (pointer), rows can be dragged to another slot (Ctrl = copy) */
.m1[data-mi] > img, .m1[data-mi] > .box > img:not(.chg) { cursor: pointer; }
[draggable="true"] { -webkit-user-drag: element; } .dragging { opacity: .45; }
.dropin { outline: 1px solid #d2d2d2; outline-offset: -1px; background: #d2d2d214 !important; } .dropin.copy { outline-color: var(--ok); } .m1.empty .t b { color: var(--text2); font-style: italic; } .m1.empty .t span { color: #555; }
.r-mode .modeSeg { display: flex; gap: 4px; padding: 2px 10px 6px; flex-wrap: wrap; }
.st { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #555; display: block; } .st.on { background: var(--ok); border-color: var(--ok); } .st.online { background: #6b6b6b; border-color: #6b6b6b; } .st.heat { background: var(--badFrame); border-color: var(--badFrame); }
.bar { position: relative; height: 18px; background: #d2d2d20d; margin: 2px 0 6px; } .bar i { position: absolute; inset: 0 auto 0 0; background: #48f0c055; }
.bar.over { background: #ff5c5c1f; box-shadow: inset 0 0 0 1px #ff5c5c88; } .bar.over i { background: #ff5c5caa; } .bar.over b small { color: #ffd0d0; } .bar b { position: absolute; inset: 0; display: flex; justify-content: space-between; padding: 0 6px; font-weight: normal; font-size: .89em; line-height: 18px; color: var(--theme); } .bar b small { color: var(--theme); font-size: .92em; }

/* drones, implants... */
.subTabs { display: flex; flex-wrap: wrap; border-top: 1px solid var(--b); border-bottom: 1px solid var(--b); font-size: .86em; margin-top: 8px; padding: 0 4px; }
.subTabs button { background: none; border: 0; padding: 7px 10px 8px; margin-bottom: -1px; color: var(--btnN); cursor: pointer; transition: color .15s linear; }
.subTabs button:hover { color: var(--btnH); } .subTabs button.on { color: var(--btnS); box-shadow: var(--mark); } .subTabs button.soon { opacity: .4; cursor: default; }
.subBody { padding: 4px 0 6px; display: grid; }
/* all the tab bodies share one cell; the hidden ones still take their room, so the area keeps the tallest one's height */
.subBody > .sbody { grid-area: 1 / 1; min-width: 0; visibility: hidden; } .subBody > .sbody.on { visibility: visible; }
/* drones: state · amount · the icon (the switch) · name · ACTIVE (left, in a fixed place) · spacer · the numbers; cargo and holds: amount · icon · name · BAY · PRICE */
.drow { display: grid; grid-template-columns: 14px 58px 40px minmax(120px, 190px) auto minmax(0, 1fr) 70px 72px 72px 54px 76px 175px; gap: 8px; align-items: center; padding: 5px 10px; font-size: .95em; }
.drow .num { white-space: nowrap; }
/* the drone table in a narrower middle panel: the speed, range and tracking go first, then the DPS (the stats panel has them) */
@container (max-width: 1000px) { .drow:not(.simple) { grid-template-columns: 14px 58px 40px minmax(120px, 190px) auto minmax(0, 1fr) 70px 76px 175px; } .drow:not(.simple) > :is(:nth-child(8), :nth-child(9), :nth-child(10)) { display: none; } }
@container (max-width: 700px) { .drow:not(.simple) { grid-template-columns: 14px 58px 40px minmax(100px, 1fr) auto 76px 175px; } .drow:not(.simple) > :is(:nth-child(6), :nth-child(7)) { display: none; } }
.drow.simple { grid-template-columns: 26px minmax(0, 1fr) auto; } .drow.simple.wq { grid-template-columns: 58px 26px minmax(0, 1fr) 175px 110px; }
.drow.dh2 { font-size: .76em; letter-spacing: 1px; color: var(--text2); padding-top: 6px; padding-bottom: 2px; }
/* the amount: a fixed cell, the number right-aligned in its slot, the × halfway to the icon; a double-click turns the number into a box, nothing moves */
.drow .qty { display: inline-grid; grid-template-columns: 46px minmax(0, 1fr); margin-right: -8px; align-items: center; height: 24px; line-height: 24px; color: var(--text); white-space: nowrap; cursor: text; }
.drow .qty .qn { text-align: right; font-variant-numeric: tabular-nums; } .drow .qty .qx { font-size: 1.05em; text-align: center; } .drow .qty:hover { color: var(--theme); }
.drow .qtyIn { width: 46px; height: 24px; box-sizing: border-box; background: #0d0d0d; border: 1px solid var(--theme); color: var(--text); font: inherit; text-align: right; padding: 0 3px; -moz-appearance: textfield; }
.drow .qtyIn::-webkit-outer-spin-button, .drow .qtyIn::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.drow .vol { white-space: nowrap; } .drow .price small { color: var(--text2); }
.drow img { width: 26px; height: 26px; background: #1a1a1a; } .drow .mn { color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the drone icon is the switch, like a module's: a green frame when the stack is out */
.dicon { width: 40px; height: 40px; padding: 0; background: #121212; border: 1px solid #2f2f2f; cursor: pointer; display: block; } .dicon img { width: 100%; height: 100%; display: block; background: none; }
.dicon.on { border-color: var(--ok); box-shadow: 0 0 0 1px #48f0c044, inset 0 0 12px #48f0c022; } .dicon:hover { border-color: var(--btnH); }
.dact { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: .99em; white-space: nowrap; }
.dpips { display: inline-flex; gap: 2px; } .dpips i { width: 6px; height: 12px; display: block; border: 1px solid #555; } .dpips i.u { background: var(--ok); border-color: var(--ok); }
.dtxt { min-width: 70px; } .dtxt small { color: var(--text2); }
.drow[data-drow] { cursor: grab; } .drow[data-drow].dropin { outline: 1px dashed var(--warn); outline-offset: -1px; }
.pm { width: 20px; height: 20px; background: none; border: 1px solid var(--b); color: var(--btnN); cursor: pointer; line-height: 1; padding: 0; } .pm:hover { color: var(--btnH); }
/* reduced layout: the additions follow, at pyfa's density */
.panel.mid.rd .subTabs button { padding: 5px 8px 4px; } .panel.mid.rd .subBody { padding: 2px 0 4px; }
.panel.mid.rd .drow { padding: 1px 8px; font-size: .84em; gap: 6px; grid-template-columns: 10px 50px 24px minmax(120px, 190px) auto minmax(0, 1fr) 60px 66px 66px 50px 70px 150px; }
.panel.mid.rd .drow.simple { grid-template-columns: 18px minmax(0, 1fr) auto; } .panel.mid.rd .drow.simple.wq { grid-template-columns: 50px 18px minmax(0, 1fr) 150px 100px; } .panel.mid.rd .drow.simple.rmv { grid-template-columns: 18px minmax(0, 1fr) auto 18px; }
.panel.mid.rd .drow.dh2 { font-size: .68em; padding-top: 4px; } .panel.mid.rd .drow img { width: 18px; height: 18px; }
.panel.mid.rd .drow .qty { height: 20px; line-height: 20px; grid-template-columns: 38px minmax(0, 1fr); margin-right: -6px; } .panel.mid.rd .drow .qtyIn { width: 38px; height: 20px; }
.panel.mid.rd .dicon { width: 24px; height: 24px; } .panel.mid.rd .st { width: 7px; height: 7px; } .panel.mid.rd .pm { width: 16px; height: 16px; font-size: .9em; }
.panel.mid.rd .dpips i { width: 5px; height: 9px; } .panel.mid.rd .dtxt { min-width: 60px; } .panel.mid.rd .dfoot { padding: 3px 8px 0; font-size: .78em; }
.dfoot { display: flex; gap: 16px; flex-wrap: wrap; padding: 6px 10px 2px; font-size: .84em; color: var(--text2); border-top: 1px solid #d2d2d20a; margin-top: 4px; }
.none { padding: 10px 12px; font-size: .93em; color: var(--text2); }
textarea.notes { display: block; width: calc(100% - 20px); margin: 6px 10px; min-height: 110px; background: #00000060; border: 1px solid var(--b); color: var(--theme); font: inherit; font-size: .97em; padding: 8px 10px; resize: vertical; outline: none; }
textarea.notes:focus { border-color: var(--theme); }

/* ---------------- the ring, above the layout when toggled on: centred, the hull and fit name in the top-left corner */
.ringBox { position: relative; display: flex; justify-content: center; padding: 12px 10px 6px; border-bottom: 1px solid var(--b); background: radial-gradient(circle at 50% 55%, #1e1e1e 0%, #121212 60%); }
.ringLbl { position: absolute; left: 12px; top: 10px; font-size: .9em; line-height: 1.4; } .ringLbl b { display: block; font-weight: normal; color: var(--theme); letter-spacing: 2px; } .ringLbl span { color: var(--text2); }
.ringSvg .sg.hl .slot, .ringSvg .sg.hl .mode { stroke: #d2d2d2; }
.ringSvg { width: 100%; max-width: 440px; height: auto; display: block; }
.ringSvg .sg { cursor: pointer; }
.ringSvg .rim { fill: none; stroke: #2a2a2a; stroke-width: 1.5; } .ringSvg .inner { fill: none; stroke: #2a2a2a; }
.ringSvg .slot { fill: #ffffff06; stroke: #3a3a3a; stroke-width: 1; } .ringSvg .slot.on { fill: #48f0c014; stroke: #48f0c088; } .ringSvg .slot.online { fill: #d2d2d20d; stroke: #5a5a5a; }
.ringSvg .slot.heat { fill: #ff5c5c18; stroke: #ff5c5c99; } .ringSvg .slot.off { fill: #00000080; stroke: #3a3a3a; }
.ringSvg .slot.empty { fill: none; stroke-dasharray: 3 3; } .ringSvg .slot.sel { stroke: #fff; stroke-width: 1.5; }
.ringSvg .sg:hover .slot { stroke: #9e9e9e; } .ringSvg .eg rect { fill: #6b6b6b; }
.ringSvg .chg { fill: #e0b040; }
.ringSvg .mode { fill: #0d0d0dcc; stroke: #5a5a5a; } .ringSvg .mode.on { fill: #48f0c033; stroke: #48f0c0; } .ringSvg .mode.sel { stroke: #fff; stroke-width: 1.5; }
.ringSvg .gt { fill: none; stroke: #2a2a2a; stroke-width: 5; }
.ringSvg .gc { fill: none; stroke: #48f0c0bb; stroke-width: 5; } .ringSvg .gp { fill: none; stroke: #ff5c5cb0; stroke-width: 5; } .ringSvg .gk { fill: none; stroke: #d2d2d2a0; stroke-width: 5; }
.ringSvg .over { stroke: #ff9a9a; }
.ringSvg .cn { fill: var(--theme); font-size: 13px; text-anchor: middle; font-family: 'Segoe UI', sans-serif; paint-order: stroke; stroke: #000000aa; stroke-width: 3px; }
.sc { border: 1px solid var(--b); background: #0d0d0de6; padding: 10px 12px 12px; font-size: .95em; }
.sc.hint0 { display: flex; flex-direction: column; gap: 4px; color: var(--text2); } .sc.hint0 b { color: var(--theme); font-weight: normal; }
.sc .r3h { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .sc .r3h img, .sc .mbig { width: 44px; height: 44px; background: #1a1a1a; display: flex; justify-content: center; align-items: center; color: var(--text2); flex-shrink: 0; }
.sc .mbig svg { width: 22px; height: 22px; fill: currentColor; }
.sc .r3h b { display: block; font-weight: normal; color: var(--theme); font-size: 1.05em; } .sc .r3h span { font-size: .92em; color: var(--text2); }
.r3b { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.cardNote { margin: 4px 0 0; line-height: 1.5; }
.mcmp { margin-top: 4px; } .mcmp .mh, .mcmp .mr { display: grid; grid-template-columns: 82px repeat(3, minmax(0, 1fr)); gap: 6px; padding: 3px 0; border-top: 1px solid #d2d2d20a; }
.mcmp .mh { font-size: .84em; letter-spacing: 1px; color: var(--text2); border-top: 0; } .mcmp span { text-align: right; color: var(--text); white-space: nowrap; } .mcmp .k { text-align: left; color: var(--text2); }
.mcmp .on { color: var(--theme); } .mcmp .mh .on { color: var(--ok); }
.alts { margin-top: 10px; } .alt { display: flex; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; border-top: 1px solid #d2d2d20a; padding: 5px 0; cursor: pointer; text-align: left; font-size: 1em; }
.alt span:first-child { color: var(--theme); } .alt:hover span:first-child { color: #fff; } .alt .dim { font-size: .92em; text-align: right; }

/* ---------------- stats panel */
.sp { font-size: .9em; }
/* a narrow stats panel (small windows, or dragged in) steps its text down so the pairs of figures stay on one line */
.panel.sp { container-type: inline-size; }
@container (max-width: 360px) { .panel.sp > :not(.rsz) { font-size: .92em; } .panel.sp .rhead, .panel.sp .rrow { grid-template-columns: 44px repeat(4, minmax(0, 1fr)) 44px; gap: 3px; } }
.spTop { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--b); } .spTop > span { flex: 1; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 2px; color: var(--theme); font-size: .92em; }
.blk { border-bottom: 1px solid var(--b); } .blk:last-child { border-bottom: 0; }
.bh { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px 5px; cursor: pointer; width: 100%; background: none; border: 0; text-align: left; color: inherit; }
.bh .cv { color: var(--text2); font-size: .86em; width: 10px; } .bh:hover .bt { color: #fff; }
.bh .bt { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1.5px; font-size: .92em; color: var(--theme); } .bh .bv { margin-left: auto; color: var(--text2); font-size: 1em; text-align: right; }
.blk.folded .bh .bv { color: var(--text); }
.bb { padding: 0 10px 8px; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .kv .k { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kv .v { color: var(--theme); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .kv .v small { color: var(--text2); font-size: .97em; } .kv .v.dim { color: var(--text2); }
.kv2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 10px; }
.rhead, .rrow { display: grid; grid-template-columns: 50px repeat(4, minmax(0, 1fr)) 52px; gap: 4px; align-items: center; margin-bottom: 3px; }
.rhead { font-size: .81em; color: var(--text2); letter-spacing: 1px; } .rhead .em { color: var(--em); } .rhead .th { color: var(--th); } .rhead .ki { color: var(--ki); } .rhead .ex { color: var(--ex); }
.rl { color: var(--text2); font-size: .97em; }
.gauge { position: relative; height: 17px; background: #d2d2d20d; display: block; } .gauge i { position: absolute; inset: 0 auto 0 0; opacity: .55; }
.gauge.em i { background: var(--em); } .gauge.th i { background: var(--th); } .gauge.ki i { background: var(--ki); } .gauge.ex i { background: var(--ex); }
.gauge b { position: absolute; inset: 0; text-align: center; font-weight: normal; font-size: .91em; line-height: 17px; color: #fff; text-shadow: 0 0 3px #000; }
.ehp { color: var(--theme); }
.dt { margin-top: 6px; border: 1px solid #262626; } .dtH { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 3px 8px 4px; font-size: .86em; color: var(--text2); cursor: pointer; } .dtH:hover { color: var(--btnH); }
.dt.open .dtH { color: var(--theme); border-bottom: 1px solid #262626; }
.dtB { padding: 6px 8px 8px; background: #00000030; }
.dh { font-size: .81em; letter-spacing: 1.5px; color: var(--text2); margin: 8px 0 3px; } .dh:first-child { margin-top: 0; }
.ub { display: grid; grid-template-columns: minmax(0, 1fr) 48px 70px; gap: 6px; align-items: center; padding: 2px 0; } .ub span:first-child { color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ub i { display: block; height: 5px; background: #d2d2d255; }
.split { display: flex; height: 10px; margin: 2px 0 6px; } .split i { display: block; height: 100%; } .split .em { background: var(--em); } .split .th { background: var(--th); } .split .ki { background: var(--ki); } .split .ex { background: var(--ex); }
.chart { width: 100%; max-width: 480px; height: auto; background: #151515; border: 1px solid var(--b); display: block; } .chart line { stroke: #d2d2d214; } .chart text { fill: var(--text2); font-size: 9px; font-family: 'Segoe UI', sans-serif; }
.chart path.c { fill: none; stroke: var(--ok); stroke-width: 1.4; } .chart rect.band { fill: #48f0c014; }
.gameLine { margin-top: 8px; border: 1px solid #ffb64855; background: #ffb6480a; padding: 6px 8px; font-size: .99em; } .gameLine .game { margin: 0 6px 0 0; } .gameLine b { font-weight: normal; color: var(--theme); }
.hint { margin-top: 6px; color: var(--text); font-size: .99em; } .hint b { color: var(--theme); font-weight: normal; }
.ghost { opacity: .45; }

/* ---------------- menus, dialogs, toast */
.flMenu { position: fixed; z-index: 60; min-width: 210px; max-width: 320px; background: #0d0d0df7; border: 1px solid var(--b); box-shadow: 0 10px 30px #000a; padding: 6px 0; font-size: .95em; }
.flMenu .mh { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .84em; letter-spacing: 1.5px; color: var(--theme); padding: 4px 12px 6px; border-bottom: 1px solid var(--b); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flMenu .msub { font-size: .81em; letter-spacing: 1px; color: var(--text2); padding: 2px 12px 0; }
.flMenu .mrow { display: flex; gap: 3px; flex-wrap: wrap; padding: 4px 10px 8px; border-bottom: 1px solid #d2d2d212; margin-bottom: 4px; }
.flMenu .mi { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; background: none; border: 0; text-align: left; padding: 6px 12px 7px; color: var(--text); cursor: pointer; }
.flMenu .mi:hover { background: #d2d2d20f; color: var(--theme); } .flMenu .mi.on { color: var(--theme); box-shadow: inset 2px 0 0 #d2d2d2; }
.flMenu.wide { width: 400px; max-width: calc(100vw - 16px); }
.flMenu .mh small { float: right; color: var(--text2); font-family: inherit; letter-spacing: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.flMenu .mh .x { float: right; margin: -3px -6px 0 6px; padding: 2px 6px; font-size: 1.05em; line-height: 1.2; letter-spacing: 0; }   /* the pickers' close button, beside the current name */
.flMenu .psearch { padding: 2px 10px 6px; } .flMenu .psearch input { width: 100%; box-sizing: border-box; background: #ffffff08; border: 1px solid var(--b); color: var(--theme); font: inherit; padding: 5px 8px; outline: none; } .flMenu .psearch input:focus { border-color: var(--theme); }
.flMenu .ptree { max-height: min(56vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.flMenu .ptree .msub { padding-top: 8px; padding-bottom: 2px; }
.flMenu .pkids { padding-left: 12px; }
.flMenu .mi.pnode { justify-content: flex-start; gap: 6px; padding-top: 4px; padding-bottom: 5px; } .flMenu .mi.pnode .pn { flex: 1; } .flMenu .mi.pnode .ar { width: 10px; color: var(--text2); }
.flMenu .mi.pl { padding-top: 4px; padding-bottom: 5px; } .flMenu .mi.pl .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flMenu .mi.pl .pn small { display: block; overflow: hidden; text-overflow: ellipsis; }
.pbar { display: flex; width: 64px; height: 6px; flex-shrink: 0; background: #ffffff10; } .pbar i { display: block; height: 100%; }
.pres { display: flex; gap: 2px; flex-shrink: 0; } .pres i { position: relative; width: 12px; height: 12px; background: #ffffff10; } .pres i b { position: absolute; left: 0; right: 0; bottom: 0; }
.pbar i.em, .pres i.em b { background: var(--em); } .pbar i.th, .pres i.th b { background: var(--th); } .pbar i.ki, .pres i.ki b { background: var(--ki); } .pbar i.ex, .pres i.ex b { background: var(--ex); }
.flMenu .mi.pl .pv { flex-shrink: 0; font-size: .8em; font-variant-numeric: tabular-nums; }
.flMenu .pnone { padding: 10px 12px; color: var(--text2); }
.flMenu .mi.dis { opacity: .45; cursor: default; } .flMenu .mi.dis:hover { background: none; color: var(--text); } .flMenu .mi small { color: var(--text2); font-size: .86em; }
.flDlg { position: fixed; inset: 0; z-index: 50; background: #000000a8; display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; overflow-y: auto; }
.dlgBox { width: 100%; max-width: 460px; background: #0d0d0df7; border: 1px solid var(--b); box-shadow: 0 10px 40px #000; }
.dlgBox.wide { max-width: 980px; } .dlgBox.plan { max-width: 640px; } .dlgBox.plan .dlgBody { max-height: calc(100vh - 120px); overflow-y: auto; }
.dlgHead { display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--b); } .dlgHead span { flex: 1; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 2px; color: var(--theme); font-size: .92em; }
.dlgBody { padding: 12px 14px 14px; font-size: .97em; }
.dlgNote { margin: 0 0 10px; color: var(--text); line-height: 1.5; font-size: 1em; }
.dlgBody textarea, .fld input, .ck input[type="text"] { width: 100%; background: #00000060; border: 1px solid var(--b); color: var(--theme); font: inherit; padding: 8px 10px; outline: none; min-height: 34px; }
.dlgBody textarea { font-family: Consolas, 'Courier New', monospace; font-size: .99em; resize: vertical; }
.dlgBody textarea:focus, .fld input:focus, .ck input[type="text"]:focus { border-color: var(--theme); }
.dlgErr { margin-top: 8px; color: var(--bad); } .dlgErr.top { margin: 0 0 10px; border: 1px solid #ff9a9a44; background: #ff9a9a0a; padding: 7px 10px; }
.dlgFoot { display: flex; gap: 4px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; } .dlgFoot.left { justify-content: flex-start; }
.fld { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .fld .fl { font-size: .84em; letter-spacing: 1px; color: var(--text2); }
.ck { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--theme); }
.ck.opt input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid #555; margin: 0; flex-shrink: 0; cursor: pointer; } .ck.opt input[type="checkbox"]:checked { background: var(--theme); box-shadow: inset 0 0 0 2px #0d0d0d; }
.profGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shareGrid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
.cardBox { overflow: hidden; }
.sfList { display: flex; flex-direction: column; margin-bottom: 10px; max-height: 60vh; overflow-y: auto; }
.sfRow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #d2d2d20a; } .sfRow img { width: 32px; height: 32px; background: #1a1a1a; }
.sfRow .tt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sfRow b { font-weight: normal; color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sfRow small { color: var(--text2); }
.flToast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: #0d0d0df7; border: 1px solid #3e3e3e; padding: 9px 16px; color: var(--theme); font-size: .97em; box-shadow: 0 8px 24px #000a; max-width: calc(100vw - 32px); }

/* ---------------- share card (Hero): the render faded as Tether's tiles, in colour */
.card { width: 600px; height: 315px; position: relative; overflow: hidden; border: 1px solid var(--b); flex-shrink: 0; transform-origin: 0 0; }
.card.hero4 { background: radial-gradient(ellipse at 28% 55%, #24272b 0%, #121212 72%); } .card.hero4::before { content: ''; position: absolute; inset: 0; background: url('img/w/fitlab_theme_new_09.jpg') center 40% / cover no-repeat; opacity: .35; }
.card.hero4 .art { position: absolute; left: 0; top: 0; bottom: 0; width: 78%; background-size: cover; background-position: center 50%; mix-blend-mode: lighten; opacity: .92;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 92%); mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 92%); }
.card .cmark { position: absolute; right: 18px; top: 16px; display: flex; gap: 8px; align-items: center; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 3px; color: #d2d2d299; font-size: .86em; z-index: 2; } .card .cmark svg { width: 26px; height: 26px; fill: #d2d2d299; }
.card .ct { position: absolute; z-index: 2; left: 312px; top: 54px; right: 18px; text-shadow: 0 1px 3px #000; } .card .ct b { display: block; font-weight: normal; color: #fff; font-size: 1.7em; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1px; } .card .ct span { color: #b0b0b0; }
.card .cs { position: absolute; z-index: 2; left: 312px; right: 18px; bottom: 44px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; text-shadow: 0 1px 3px #000; }
.card .cs div b { display: block; color: var(--theme); font-weight: normal; font-size: 1.35em; } .card .cs div span { font-size: .81em; letter-spacing: 1.5px; color: var(--text2); }
.card .cf { position: absolute; z-index: 2; bottom: 14px; left: 312px; right: 12px; font-size: .81em; color: var(--text2); }

/* ---------------- phone: figures pinned on top, Fit / Stats / Browse */
.kpis, .mobSeg { display: none; }
/* resize handles: on the inner edge of the left panel and of the stats panel (drag; double-click = back to the default) */
.panel.sp { position: relative; }   /* .lp is sticky, which already anchors its handle */
.rsz { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 6; touch-action: none; }
.rsz::after { content: ''; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; background: transparent; transition: background .15s linear; }
.rsz:hover::after, .rsz.on::after { background: #d2d2d266; }
.lp > .rsz { right: -11px; } .panel.sp > .rsz { left: -11px; }
body.resizing, body.resizing * { cursor: col-resize !important; user-select: none !important; }
@media (max-width: 1100px) {
    .cols2 { grid-template-columns: minmax(0, 1fr); } .panel.sp > .rsz { display: none; }
    #flApp { overflow: visible; } .lp { height: auto; max-height: calc(100vh - 70px); } #flWelcome { min-height: 0; }
    #flBar { top: 0; }
    .lp { top: 56px; max-height: calc(100vh - 70px); }
}
@media (max-width: 900px) {
    #flMain { grid-template-columns: minmax(0, 1fr); padding: 8px; } .rsz { display: none; }
    #flBar { position: static; } #flWork { order: 1; } #flLeft { order: 2; }
    #flBar .tb span, #flBar .pk small, .tsep { display: none; } #flBar .tb { padding: 6px 9px 8px; } #flBar .pk { padding: 5px 6px 7px; }
    .lp { position: static; max-height: none; height: auto; } .lp .lpTree { max-height: 65vh; }
    body:not(.noFit)[data-mob="fit"] #flLeft, body:not(.noFit)[data-mob="stats"] #flLeft { display: none; }
    body:not(.noFit)[data-mob="browse"] .cols2, body:not(.noFit)[data-mob="browse"] .midHead { display: none; }
    body[data-mob="fit"] .cols2 .sp { display: none; } body[data-mob="stats"] .cols2 .mid { display: none; }
    .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 0; position: sticky; top: 0; z-index: 10; background: #161616; }
    .kpis div { border: 1px solid var(--b); padding: 5px 6px; } .kpis b { display: block; color: var(--theme); font-weight: normal; font-size: 1.05em; } .kpis span { font-size: .78em; color: var(--text2); letter-spacing: 1px; }
    .mobSeg { display: flex; border: 1px solid var(--b); margin: 2px 0 0; font-size: .93em; }
    .mobSeg button { flex: 1; background: none; border: 0; text-align: center; padding: 7px 0 9px; color: var(--btnN); cursor: pointer; } .mobSeg button.on { color: var(--btnS); box-shadow: var(--mark); }
    .midHead .mctl .ctl.lay, .midHead .mctl .vsep { display: none; } .midHead { flex-wrap: wrap; }
    .ft.on { max-width: 100%; }
    .m1 { grid-template-columns: 30px minmax(0, 1fr) !important; gap: 8px; margin: 2px 4px; } .m1 .cp { display: none !important; } .m1.m1h { display: none; } .m1 img, .m1 .ph { width: 30px; height: 30px; }
    .m1.g1 { grid-template-columns: 34px minmax(0, 1fr) !important; } .m1.g1 .box { width: 30px; height: 30px; } .m1.g1 .box.ph { width: 30px; height: 30px; }
    .m1.r1 { grid-template-columns: 16px minmax(0, 1fr) 18px !important; } .m1.r1 > img, .m1.r1 .ph { width: 16px; height: 16px; }
    .ringBox { padding-top: 46px; } .hpi { width: 13px; height: 13px; } .hps { gap: 1px; margin-left: 6px; padding-left: 6px; }
    .drow { grid-template-columns: 12px 58px 32px minmax(0, 1fr) auto; } .drow:not(.simple) > :nth-child(n+6) { display: none; } .drow.simple.wq { grid-template-columns: 58px 26px minmax(0, 1fr) 160px; } .drow.simple.wq > :nth-child(5) { display: none; } .dicon { width: 32px; height: 32px; }
    .wWhy, .wCards { grid-template-columns: minmax(0, 1fr); } #flTitle { font-size: 2em; } .wIn { padding-top: 2em; }
    .shareGrid { grid-template-columns: minmax(0, 1fr); }
    .flDlg { padding-top: 4vh; }
}

/* ===== Phase 3: module and charge browsers (left panel) ===== */
.lpFilt .fi { position: relative; background: none; color: var(--btnN); cursor: pointer; padding: 0; transition: color .15s linear; }
.lpFilt .fi:hover { color: var(--btnH); } .lpFilt .fi.on { color: var(--btnS); box-shadow: var(--mark); } .lpFilt .fi.open { border-color: #6b6b6b; }
.lpFilt .fi svg.f.s { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: miter; }
.lpFilt .fi .dd { position: absolute; right: 0; bottom: 0; font-style: normal; font-size: .69em; color: var(--btnN); padding: 2px 3px; }
.lpFilt .fi .dd:hover { color: var(--btnS); }
.pop { margin: 0 10px 8px; background: #0d0d0df7; border: 1px solid var(--b); padding: 10px 12px 8px; box-shadow: 0 10px 30px #000a; }
.pop .ph { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .83em; letter-spacing: 2px; color: var(--theme); margin-bottom: 6px; }
.rad { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 5px 0; color: var(--theme); background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.rad i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid #555; display: block; } .rad.on i { background: var(--theme); box-shadow: inset 0 0 0 3px #0d0d0d; }
.rad span { flex-basis: 100%; padding-left: 21px; font-size: .92em; color: var(--text2); }
.tn .fic { width: 18px; height: 18px; display: block; flex-shrink: 0; background: #1a1a1a; opacity: .85; }
.tn .mg { width: 11px; height: 13px; display: block; flex-shrink: 0; margin: 0 3px; clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.tn .mg.fs { background: #48b048; } .tn .mg.ds { background: #3f7fe0; } .tn .mg.off { background: #9a5cf0; }
.tn.it { cursor: grab; } .tn.it:active { cursor: grabbing; }
.tn.it .bi { position: relative; display: block; flex-shrink: 0; width: 22px; height: 22px; }
.tn.it .bi img { width: 22px; height: 22px; display: block; background: #1a1a1a; }
/* the client's meta corner on the item icon */
.tn.it .bi::before { content: ''; position: absolute; left: 0; top: 0; border-style: solid; border-width: 8px 8px 0 0; border-color: var(--mc, transparent) transparent transparent transparent; }
.bi.t2 { --mc: #d88a2a; } .bi.fac { --mc: #48b048; } .bi.sto { --mc: #8ab040; } .bi.ds { --mc: #3f7fe0; } .bi.off { --mc: #9a5cf0; }
.bi.t3 { --mc: #c0502a; } .bi.pre { --mc: #c060c0; } .bi.lim { --mc: #d0b040; }
.tn.it .badd { margin-left: auto; flex-shrink: 0; width: 26px; height: 26px; display: none; justify-content: center; align-items: center; background: none; border: 1px solid var(--b); color: var(--btnN); cursor: pointer; padding: 0; }
.tn.it .badd svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.tn.it .badd:hover { color: var(--btnS); border-color: #6b6b6b; }
.tn.it:hover .badd, .tn.it.sel .badd { display: flex; }
.tn.it.sel { background: #d2d2d214; box-shadow: inset 2px 0 0 #d2d2d2; }
.tn.it.on .tt { color: var(--ok); } .tn.it.on .tt::after { content: ' · loaded'; color: var(--text2); font-size: .92em; }
.tn.it.dim { opacity: .45; } .tn.it.dim:hover { opacity: .75; }
.lpNone { padding: 10px 14px; color: var(--text2); font-size: .95em; line-height: 1.5; } .lpNone.sub { padding: 2px 14px 6px 40px; }
.drow.simple.rmv { grid-template-columns: 26px minmax(0, 1fr) auto 18px; cursor: default; } .drow.simple.rmv:hover { background: #d2d2d20a; }
.panel.mid.dropin { background: transparent !important; outline-offset: -2px; outline-style: dashed; }
@media (hover: none) { .tn.it .badd { display: flex; } }

.m1 .burn { color: #ffb648; font-variant-numeric: tabular-nums; }

/* ===== right-click menu pages (charges, variants) and the Show info dialog ===== */
.flMenu { max-height: min(62vh, 560px); overflow-y: auto; scrollbar-width: thin; }
.flMenu .mi.mback { color: var(--text2); padding-top: 4px; padding-bottom: 4px; justify-content: flex-start; gap: 6px; } .flMenu .mi.mback:hover { color: var(--theme); }
.flMenu .mi.ic { justify-content: flex-start; gap: 8px; padding-top: 4px; padding-bottom: 4px; } .flMenu .mi.ic img { width: 22px; height: 22px; background: #1a1a1a; flex-shrink: 0; }
.flMenu .mi.ic span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flMenu .mi.ic small { flex-shrink: 0; }
.flMenu .mrow.seg { gap: 0; padding: 6px 10px 8px; } .flMenu .mrow.seg .mb.sm { flex: 1; justify-content: center; }
.flMenu .mi[disabled] { opacity: .45; cursor: default; }
.info { font-size: .95em; }
.infoHead { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; } .infoHead img { width: 48px; height: 48px; background: #1a1a1a; flex-shrink: 0; }
.infoHead div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .infoHead b { font-weight: normal; color: var(--theme); font-size: 1.08em; } .infoHead span { font-size: .88em; color: var(--text2); }
.info .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .info .chip { border: 1px solid var(--b); padding: 2px 8px 3px; font-size: .88em; color: var(--text); } .info .chip b { font-weight: normal; color: var(--theme); margin-left: 4px; }
.info .dh.irh { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 8px; margin-top: 10px; padding: 0 0 4px; border-bottom: 1px solid var(--b); } .info .dh.irh span:not(:first-child) { text-align: right; }
.irow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px; gap: 8px; padding: 3px 0; border-top: 1px solid #d2d2d20a; font-variant-numeric: tabular-nums; }
.irow .k { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .irow .v { text-align: right; color: var(--theme); } .irow .v.on { color: var(--ok); }
.isep { height: 6px; border-bottom: 1px solid var(--b); margin-bottom: 4px; }
.infoNote { margin: 10px 0 0; font-size: .85em; line-height: 1.4; }


/* ===== skill profiles ===== */
.flMenu .msep { height: 1px; background: var(--b); margin: 4px 0; }
.dlgBox.char-box { max-width: 720px; } .dlgBox.char-box .dlgBody { max-height: calc(100vh - 120px); overflow-y: auto; display: flex; flex-direction: column; }
.charHead { display: flex; gap: 10px; align-items: flex-end; } .charHead .fld { margin-bottom: 0; } .charBtns { display: inline-flex; gap: 3px; padding-bottom: 2px; }
.skSearch { display: flex; gap: 8px; align-items: center; border: 1px solid var(--b); min-height: 34px; padding: 0 10px; background: #00000060; margin: 10px 0 6px; }
.skSearch svg { width: 15px; height: 15px; fill: none; stroke: var(--btnN); stroke-width: 1.8; flex-shrink: 0; } .skSearch input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--theme); font: inherit; }
.skList { min-height: 0; } .skList .skgrp { padding: 6px 8px; font-size: .78em; letter-spacing: 1.5px; color: var(--text2); } .skList .skgrp .tt { color: var(--theme); }
.skrow { display: flex; align-items: center; gap: 10px; padding: 3px 8px 3px 26px; border-top: 1px solid #d2d2d20a; } .skrow:hover { background: #d2d2d208; }
.skrow .sk { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .skrow .sk small { margin-left: 8px; font-size: .8em; }
.skrow .lvs { display: inline-flex; flex-shrink: 0; } .skrow .lv { width: 32px; padding: 3px 0 4px; background: none; border: 1px solid var(--b); border-left-width: 0; color: var(--btnN); cursor: pointer; font-size: .82em; }
.skrow .lv:first-child { border-left-width: 1px; } .skrow .lv:hover { color: var(--btnH); } .skrow .lv.on { color: var(--btnS); box-shadow: var(--mark); background: #d2d2d20a; }
@media (max-width: 600px) { .skrow { padding-left: 10px; } .skrow .lv { width: 26px; } .charHead { flex-wrap: wrap; } }

/* ===== fit checks ===== */
.checkBar { border: 1px solid #ffb64855; background: #ffb6480a; margin-top: 8px; font-size: .95em; } .checkBar.bad { border-color: #ff5c5c66; background: #ff5c5c0c; }
.checkBar .ch { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; text-align: left; padding: 7px 10px; color: var(--text); cursor: pointer; }
.checkBar .ch .cv { color: var(--text2); font-size: .8em; } .checkBar .ch b { font-weight: normal; color: var(--warn); } .checkBar.bad .ch b { color: var(--bad); }
.checkBar ul { margin: 0; padding: 0 10px 8px 28px; line-height: 1.5; } .checkBar li { color: var(--text); } .checkBar li.bad::marker { color: var(--bad); } .checkBar li.warn::marker { color: var(--warn); }
.m1.issue { box-shadow: inset 9px 0 0 var(--warn); } .m1.issue.bad { box-shadow: inset 9px 0 0 var(--badFrame); }
.iss { display: inline-flex; justify-content: center; align-items: center; width: 14px; height: 14px; border-radius: 50%; margin-left: 6px; font-style: normal; font-size: .7em; color: #111; background: var(--warn); vertical-align: 2px; }
.issue.bad .iss { background: var(--badFrame); color: #fff; }

/* ===== floating windows (Show info) ===== */
.win { position: fixed; z-index: 55; width: 460px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); display: flex; flex-direction: column; background: #0d0d0df7; border: 1px solid var(--b); box-shadow: 0 10px 40px #000a; }
.win.top { border-color: #4a4a4a; }
.winHead { display: flex; align-items: center; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--b); cursor: move; user-select: none; touch-action: none; }
.winHead span { flex: 1; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: .86em; letter-spacing: 2px; text-transform: uppercase; color: var(--theme); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winBody { padding: 12px 14px 14px; overflow-y: auto; scrollbar-width: thin; font-size: .97em; }
/* block header tools (damage and target profiles, EHP / HP and firepower / mining switches) */
.bhw { display: flex; align-items: stretch; } .bhw .bh { flex: 1; min-width: 0; } .btools { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; flex-shrink: 0; }
.bti { display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 5px; background: none; border: 1px solid transparent; color: var(--btnN); cursor: pointer; font-size: .72em; letter-spacing: 1px; transition: color .15s linear; }
.bti svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; } .bti:hover { color: var(--btnH); border-color: var(--b); } .bti.on { color: var(--btnS); }
.drow.dragc { cursor: grab; } .drow.dragc:active { cursor: grabbing; }

/* ===== stats cards (Firepower) and paired bars (Resources) ===== */
/* RESOURCES: the hardpoints and drones on the left (the drones centred on the two drone bars), the five budgets on the right */
.resGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto); column-gap: 10px; }
.resGrid .bar { margin: 2px 0 4px; grid-column: 2; } .resGrid .bar b { padding: 0 5px; gap: 6px; } .resGrid .bar b span, .resGrid .bar b small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resGrid .r1 { grid-row: 1; } .resGrid .r2 { grid-row: 2; } .resGrid .r3 { grid-row: 3; } .resGrid .r4 { grid-row: 4; } .resGrid .r5 { grid-row: 5; }
.hrow { grid-column: 1; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 7px; align-items: center; height: 18px; margin: 2px 0 4px; font-size: .89em; }
.hrow img { width: 18px; height: 18px; display: block; opacity: .8; } .hrow .k { color: var(--text2); letter-spacing: 1px; font-size: .9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hrow .v { color: var(--theme); font-variant-numeric: tabular-nums; }
.hrow.bad .v { color: var(--bad); } .hrow.h1 { grid-row: 1; } .hrow.h2 { grid-row: 2; } .hrow.h3 { grid-row: 4 / span 2; align-self: center; }
@container (max-width: 420px) { .resGrid .bar .u { display: none; } }
/* a narrow panel: the bars take the room, the counts keep their icon and figure (as the resistance rows do) */
@container (max-width: 360px) { .resGrid { grid-template-columns: auto minmax(0, 1fr); } .hrow { grid-template-columns: 18px auto; } .hrow .k { display: none; } }
/* a stats-block button that shows a client icon instead of a drawing */
.bti.ico img { width: 18px; height: 18px; display: block; opacity: .6; transition: opacity .15s linear; } .bti.ico:hover img { opacity: 1; }
.bars2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; } .bars2 .bar { margin: 2px 0 6px; } .bars2 .bar b { padding: 0 5px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0 2px; }
.card4 { aspect-ratio: 1; border: 1px solid var(--b); background: #00000030; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 4px; text-align: center; }
.card4 span { font-size: .7875em; letter-spacing: 1.5px; color: #9e9e9e; } .card4 b { font-weight: normal; color: var(--theme); font-size: 1.4625em; line-height: 1.1; font-variant-numeric: tabular-nums; } .card4 small { font-size: .7em; color: var(--text2); letter-spacing: 1px; }
.gline { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #d2d2d20a; } .gline .game { margin-left: 0; } .gline .k { color: var(--text2); flex: 1; } .gline .v { color: var(--theme); }

/* a greyscale client icon as the card's background (--bg), the figure and label on top with a soft halo */
.card4 { position: relative; overflow: hidden; } .card4 > * { position: relative; }
.card4.bgi::before { content: ''; position: absolute; inset: 0; background: var(--bg) center / 75% no-repeat; opacity: .11; pointer-events: none; }
.card4.bgi > b { text-shadow: 0 0 6px #161616, 0 0 2px #161616; } .card4.bgi > span, .card4.bgi > small { text-shadow: 0 0 4px #161616; }
.card4.zero b { color: var(--text2); } .card4.ok b { color: var(--ok); } .card4.bad b { color: var(--bad); }
.rhead img { width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; opacity: .85; }
.rhead span { white-space: nowrap; }
.rhead .ri, .rrow .rl[title] { cursor: help; } .rrow.trow { margin-top: 8px; } .rrow .pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; } .rhead .ri { text-align: center; } .rhead .ri img { width: 18px; height: 18px; margin: 0; vertical-align: middle; opacity: .9; }   /* the damage types: in-game icon only, the name in the tooltip */
@container (max-width: 400px) { .panel.sp .card4 span { font-size: .75em; letter-spacing: 1px; } .panel.sp .rhead { letter-spacing: 0; } .panel.sp .rhead img { width: 12px; height: 12px; margin-right: 1px; } }

/* stats as key / value lists instead of cards (the toggle in the STATS bar) */
.lst .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; } .lst .cards[style] { margin-top: 0 !important; }
.lst .card4 { aspect-ratio: auto; flex-direction: row; align-items: baseline; gap: 7px; padding: 2px 2px; border: 0; background: none; text-align: left; overflow: visible; min-width: 0; }
.lst .card4 b { white-space: nowrap; } .lst .card4 small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8em; flex: 0 1 auto; }
.lst .card4::before { content: ''; position: static; width: 16px; height: 16px; flex: none; align-self: center; opacity: .8; background: var(--bg) center / contain no-repeat; }
.lst .card4:not(.bgi)::before { background: none; }
.lst .blk:not(:has(.card4.bgi)) .card4::before { display: none; }
.lst .card4 span { flex: 1 1 auto; display: flex; align-items: baseline; font-size: .74em; letter-spacing: 1px; white-space: nowrap; min-width: max-content; }
.lst .card4 span::after { content: ''; flex: 1; min-width: 6px; border-bottom: 1px dotted #d2d2d238; margin: 0 6px; position: relative; top: -4px; }
.lst .card4 b { font-size: 1.05em; } .lst .card4 small { font-size: .74em; }
.lst .card4.bgi > b, .lst .card4.bgi > span, .lst .card4.bgi > small { text-shadow: none; }
.spTop .bti { height: 26px; }

/* Phase 4: the EVE login chip and the pilots menu */
#flBar .tgrp.eve { margin-left: auto; }
.tb.eve .pp { width: 22px; height: 22px; border-radius: 50%; margin: -4px -8px -4px 0; border: 1px solid var(--b); background: #000; }
.tb.eve .pp + .pp { margin-left: -2px; } .tb.eve .pp + span { margin-left: 10px; } .tb.eve i { font-style: normal; opacity: .6; }
.tb.eve.on { color: var(--text); } .tb.eve.on span { text-transform: none; letter-spacing: .5px; }
.flMenu .pilot { display: flex; align-items: center; gap: 9px; padding: 6px 12px; }
.flMenu .pilot .pp { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--b); background: #000; flex: none; }
.flMenu .pilot .pw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .flMenu .pilot .pw b { font-weight: normal; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flMenu .pilot .pw small { color: var(--text2); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flMenu .pilot.revoked .pw small { color: var(--bad); }
.flMenu .pilot .pacts { display: flex; gap: 2px; flex: none; } .flMenu .pilot .bti { height: 22px; padding: 0 5px; font-size: .68em; } .flMenu .pilot .bti.bad:hover { color: var(--bad); }
.flMenu .pilot .bti:disabled { opacity: .35; cursor: default; }
.flMenu:has(.pilot) { min-width: 400px; max-width: 480px; }
@media (max-width: 1250px) { .tb.eve span { display: none; } .tb.eve .pp + span { margin-left: 0; } }

/* Phase 4: publishing in the Fitting Library */
a.tb { text-decoration: none; }
.pubGrid { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 18px; }
.pubGrid .fld textarea, .pubGrid .fld select { width: 100%; box-sizing: border-box; background: #151515; border: 1px solid var(--b); color: var(--theme); font-family: inherit; font-size: .95em; padding: 6px 10px; outline: none; }
.pubGrid .fld textarea { resize: vertical; } .pubGrid .fld textarea:focus, .pubGrid .fld select:focus { border-color: var(--theme); }
.pubGrid .fld.row { display: flex; gap: 6px; } .pubGrid .fld.row input { flex: 1; min-width: 0; }
.pubGrid .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pubGrid .chip { font-size: .72em; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px 4px; border: 1px solid var(--b); color: var(--text2); background: none; font-family: inherit; cursor: pointer; }
.pubGrid .chip:hover { color: var(--text); } .pubGrid .chip.on { color: var(--theme); border-color: #3e3e3e; box-shadow: inset 3px 0 0 #d2d2d2; }
.pubGrid .dlgNote a { color: var(--theme); }
.pubSide { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.pubSide img { width: 160px; height: 160px; background: #000; border: 1px solid var(--b); }
.pubSide b { font-weight: normal; color: var(--theme); } .pubSide small { color: var(--text2); }
.pubFigs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; margin-top: 6px; }
.pubFigs div { border: 1px solid var(--b); background: #00000030; padding: 5px 2px 6px; display: flex; flex-direction: column; gap: 1px; }
.pubFigs span { font-size: .62em; letter-spacing: 1.2px; color: #9e9e9e; } .pubFigs b { font-size: 1em; }
@media (max-width: 700px) { .pubGrid { grid-template-columns: 1fr; } .pubSide { display: none; } }
.pubGrid .chips.seg .chip { text-transform: none; letter-spacing: .3px; font-size: .82em; }
.pubGrid #pubDocNew { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 8px; } .pubGrid #pubDocNew input, .pubGrid #pubDocNew select { background: #151515; border: 1px solid var(--b); color: var(--theme); font-family: inherit; font-size: .95em; padding: 6px 10px; outline: none; }
.pubGrid #pubDocNew input:focus { border-color: var(--theme); }
.dlgBody .dh.gameHd { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .dlgNote.bad { color: var(--bad); }
.sfSearch { margin: 0 0 8px; } .sfgrp { width: 100%; }
/* saved-fit state pills (My fits) */
.sfRow .pills { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.pill { font-style: normal; font-size: .66em; letter-spacing: .8px; text-transform: uppercase; padding: 1px 6px 2px; border: 1px solid var(--b); color: var(--text2); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pill.red { color: var(--bad); border-color: #e0606055; } .pill.orange { color: #e0a040; border-color: #e0a04055; } .pill.green { color: var(--ok); border-color: #4fc38a55; }
.gameHd .cn { color: var(--text2); font-size: .9em; } .gameHd .cn.bad { color: var(--bad); }
.kv .v.on { color: var(--ok); }
.sfTop { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; } .sfTop .sfSearch { flex: 1; margin: 0; } .sfTop .mb.sm { white-space: nowrap; }
.sfgrp.sub { font-size: .74em; } .sfgrp.sub .tt { color: var(--text2); } .sfgrp.sub .gic, .sfgrp.sub .flogo { width: 15px; height: 15px; }

/* details: denser; two columns only where the keys are short (kv2 is chosen list by list) */
.dtB { padding: 4px 8px 6px; font-size: .95em; } .dtB .dh { margin: 6px 0 2px; }
.dtB .kv { gap: 1px 12px; } .dtB .ub { padding: 1px 0; }
.panel.sp .rhead, .panel.sp .rrow { grid-template-columns: 74px repeat(4, minmax(0, 1fr)) 52px; }
.panel.sp .rrow .rl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .panel.sp .rrow .rl img { width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; opacity: .85; }
.panel.sp .rhead .num, .panel.sp .rrow .num { text-align: right; font-variant-numeric: tabular-nums; }
.rrow .rl.rlb { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }   /* the Damage and Target labels open their pickers, as the block's buttons do */
.rrow .rl.rlb:hover, .rrow .rl.rlb:hover .dmgi { color: var(--theme); stroke: var(--theme); }
.panel.sp .rrow .rl .dmgi { width: 14px; height: 14px; vertical-align: -3px; margin-right: 4px; fill: none; stroke: var(--text2); stroke-width: 1.7; }
@container (max-width: 400px) { .panel.sp .rhead, .panel.sp .rrow { grid-template-columns: 22px repeat(4, minmax(0, 1fr)) 44px; gap: 3px; } .panel.sp .rrow .rl .t { display: none; } .panel.sp .rrow .rl img, .panel.sp .rrow .rl .dmgi { margin-right: 0; } }
@container (max-width: 400px) { .panel.sp.lst .cards { grid-template-columns: 1fr; } }
.blk.folded.empty .bh .bt, .blk.folded.empty .bh .bv { color: var(--text2); opacity: .75; }

/* the EVE login asked for (Save As, My fits without a pilot) */
.loginNote { display: grid; gap: 10px; justify-items: start; padding: 4px 0 6px; } .loginNote p { margin: 0; color: var(--text); line-height: 1.5; max-width: 60ch; }
.tn.hintRow { white-space: normal; color: var(--text2); font-size: .9em; cursor: default; padding: 2px 12px 8px; line-height: 1.4; } .tn.hintRow:hover { background: none; }
.dlgBox .dh small { color: var(--text2); letter-spacing: 0; text-transform: none; }

/* ---------------- Graphs window (js/graphs-ui.js): pyfa's graph window, enhanced; everything scoped under .gw */
.win.gwin { width: min(1120px, calc(100vw - 16px)); max-height: calc(100vh - 78px); background: #0d0d0d; }
.gw input[type=checkbox] { width: 13px; height: 13px; margin: 0; accent-color: var(--theme); }
.win.gwin .winBody { padding: 0; }
.gw { --fg: var(--text); --fg2: var(--text2); --grid: #232323; --win: #0d0d0d; font-size: 14px; line-height: 1.4; color: var(--fg); }
.gw .gHead { display: flex; align-items: center; gap: 12px; padding: 8px 14px 0; flex-wrap: wrap; }
.gw .gHead .gmsg { color: var(--warn); font-size: .84em; }
.gw .addMenu .ms.none { letter-spacing: 0; padding-bottom: 6px; }
.gw .addMenu .qbox { padding: 6px 10px 2px; } .gw .addMenu .qbox input { width: 100%; box-sizing: border-box; background: #111; color: var(--theme); border: 1px solid var(--b); padding: 5px 7px; font: inherit; font-size: .88em; }
.gw button { font: inherit; }
.gw .mb { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--b); padding: 4px 11px 6px; color: var(--fg2); font-size: .88em; cursor: pointer; }
.gw .mb:hover { color: #9e9e9e; }
.gw .mb.on { color: var(--theme); box-shadow: inset 0 -2px 0 var(--theme); }
.gw .tag { font-size: .68em; letter-spacing: 1.5px; color: var(--fg2); border: 1px solid var(--b); padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.gw select, .gw input[type=number] { background: #111; color: var(--theme); border: 1px solid var(--b); padding: 4px 6px; font: inherit; font-size: .88em; }
.gw select:focus, .gw input:focus { outline: none; border-color: var(--theme); }
.gw #gtype { min-width: 15em; font-size: .92em; }
.gw .chartArea { padding: 10px 14px 6px; display: grid; gap: 6px; min-width: 0; }
.gw .chartBox { position: relative; }
.gw svg.gchart { width: 100%; height: auto; display: block; touch-action: none; }
.gw .gchart .gl { stroke: var(--grid); stroke-width: 1; }
.gw .gchart .ax { stroke: #3a3a3a; stroke-width: 1; }
.gw .gchart text { fill: var(--fg2); font-size: 11px; font-family: inherit; }
.gw .gchart text.at { fill: var(--fg); letter-spacing: 1px; }
.gw .gchart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gw .gchart .part { fill: none; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .75; }
.gw .gchart .ref { stroke-width: 1; stroke-dasharray: 2 4; }
.gw .gchart .xh { stroke: #6b6b6b; stroke-width: 1; }
.gw .gchart .dot { stroke: var(--win); stroke-width: 2; }
.gw .gchart .mk { stroke-width: 1; stroke-dasharray: 1 3; opacity: .9; }
.gw .gchart .mkl { font-size: 10px; }
.gw .gchart .empty { fill: var(--fg2); font-size: 13px; }
.gw .pinTip { position: absolute; pointer-events: none; background: #111111f2; border: 1px solid var(--warn); padding: 6px 9px 7px; font-size: .84em; min-width: 170px; z-index: 1; }
.gw .pinTip .th { color: var(--warn); margin-bottom: 3px; letter-spacing: 1px; font-size: .9em; }
.gw .gchart .pin { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 2; }
.gw .tip { position: absolute; pointer-events: none; background: #111111f2; border: 1px solid var(--b); padding: 6px 9px 7px; font-size: .84em; min-width: 170px; display: none; z-index: 2; }
.gw .tip .th { color: var(--fg2); margin-bottom: 3px; letter-spacing: 1px; font-size: .9em; }
.gw .tip .tr, .gw .pinTip .tr { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 7px; align-items: center; }
.gw .tip .tr b, .gw .pinTip .tr b { font-weight: normal; color: var(--theme); font-variant-numeric: tabular-nums; }
.gw .tip .tr span, .gw .pinTip .tr span { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.gw .tip .sub, .gw .pinTip .sub { padding-left: 21px; color: var(--fg2); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; font-size: .92em; }
.gw .sw { display: inline-block; width: 14px; height: 0; border-top: 2.5px solid; vertical-align: middle; }
.gw .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .86em; }
.gw .legend > span { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); }
.gw .legend small { color: var(--fg2); font-size: 1em; }
.gw .msgs { font-size: .82em; color: var(--fg2); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gw .msgs span::before { content: '· '; }
.gw .det { border-top: 1px solid var(--b); }
.gw .detHead { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; color: var(--fg2); padding: 7px 14px; cursor: pointer; letter-spacing: 2px; font-size: .78em; text-align: left; }
.gw .detHead:hover { color: var(--theme); }
.gw .detHead .ar { font-size: 1.1em; }
.gw .detBody { padding: 4px 14px 12px; display: grid; gap: 10px; }
.gw .detBody[hidden] { display: none; }
.gw .xrow { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.gw .ammo { display: grid; grid-auto-rows: min-content; align-content: start; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; font-size: .86em; max-height: 9.5em; overflow: auto; border: 1px solid var(--b); padding: 6px 8px; }
.gw .ammo label { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw .ammo .ph { grid-column: 1 / -1; color: var(--fg2); font-size: .9em; letter-spacing: 1px; margin-top: 4px; }
.gw .dsl { display: inline-flex; align-items: center; gap: 8px; font-size: .86em; color: var(--fg); margin-left: 6px; }
.gw .dsl input { width: 120px; accent-color: var(--theme); }
.gw .dsl output { color: var(--theme); min-width: 4.5em; font-variant-numeric: tabular-nums; }
.gw .ammo input, .gw .row input[type=checkbox] { accent-color: var(--theme); margin: 0; }
.gw .tblWrap { overflow-x: auto; }
.gw table { border-collapse: collapse; font-size: .84em; width: 100%; font-variant-numeric: tabular-nums; }
.gw th, .gw td { padding: 3px 8px; text-align: right; border-bottom: 1px solid #1f1f1f; white-space: nowrap; }
.gw th { color: var(--fg2); font-weight: normal; letter-spacing: 1px; }
.gw th:first-child, .gw td:first-child { text-align: left; }
.gw td { color: var(--fg); }
.gw .gpanel { border-top: 1px solid var(--b); display: grid; grid-template-columns: 200px 300px minmax(0, 1fr); }
.gw .sl { display: grid; gap: 1px; font-size: .88em; }
.gw .sl .slh { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gw .sl .slh > span:first-child { color: var(--fg); }
.gw .sl input[type=range] { width: 100%; margin: 0; accent-color: var(--theme); height: 18px; }
.gw .sl .num input { width: 4.6em; padding: 1px 5px; background: none; border-color: transparent; }
.gw .sl .num input:hover, .gw .sl .num input:focus { border-color: var(--b); background: #111; }
.gw .col { padding: 10px 12px 14px; display: grid; align-content: start; gap: 8px; min-width: 0; }
.gw .col + .col { border-left: 1px solid var(--b); }
.gw .dh { margin: 0; font-size: .74em; letter-spacing: 2px; color: var(--fg2); display: flex; align-items: center; gap: 6px; }
.gw .fld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; font-size: .88em; }
.gw .fld select { width: 100%; }
.gw .fld > span { color: var(--fg); }
.gw .fld.vert { grid-template-columns: 1fr; gap: 3px; }
.gw .num { display: inline-flex; align-items: center; gap: 5px; }
.gw .num input { width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; }
.gw .num small { color: var(--fg2); min-width: 1.6em; }
.gw .fld.main > span { color: var(--theme); }
.gw .lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.gw .row { display: grid; grid-template-columns: 16px 16px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 3px 0; font-size: .9em; cursor: pointer; }
.gw .row b { font-weight: normal; color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw .row small { color: var(--fg2); white-space: nowrap; }
.gw .row .rm { background: none; border: 0; color: var(--fg2); cursor: pointer; padding: 0 2px; }
.gw .row .rm:hover { color: #ff9a9a; }
.gw .addWrap { position: relative; }
.gw .addMenu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; width: 320px; max-width: calc(100vw - 40px); max-height: 440px; overflow: auto; background: #0d0d0df7; border: 1px solid var(--b); box-shadow: 0 10px 30px #000a; }
.gw .addMenu[hidden] { display: none; }
.gw .addMenu .ms { padding: 7px 10px 3px; font-size: .72em; letter-spacing: 1.5px; color: var(--fg2); }
.gw .addMenu button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; width: 100%; background: none; border: 0; color: var(--fg); padding: 5px 10px; text-align: left; cursor: pointer; font-size: .88em; }
.gw .addMenu button:hover { background: #d2d2d214; color: #fff; }
.gw .addMenu button small { color: var(--fg2); }
.gw .dis { opacity: .35; pointer-events: none; }
@media (max-width: 900px) {
    .gw .gpanel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .gw .col:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--b); }
}
@media (max-width: 600px) {
    .gw .gpanel { grid-template-columns: minmax(0, 1fr); }
    .gw .col + .col { border-left: 0; border-top: 1px solid var(--b); }
    .gw .lists { grid-template-columns: minmax(0, 1fr); }
}
.gw .gchart { max-width: none; background: none; border: 0; }
.chart.opens { cursor: pointer; } .chart.opens:hover { border-color: #4a4a4a; }

/* ---------------------------------------------------------------- Projected and Command tabs (projected.js)
   Rows as the module rows: a state bar on the left (green: active, dark: off) that is the switch */
.pxbody { padding: 2px 0 6px; }
.pxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 6px 10px 4px; font-size: .9em; }
.pxbar .mb.sm { padding: 2px 9px 4px; }
.pxbody .tag, .flMenu .tag { font-size: .68em; letter-spacing: 1.5px; color: var(--text2); border: 1px solid var(--b); padding: 0 4px; margin-left: 4px; vertical-align: 1px; font-style: normal; font-family: inherit; }
.pxrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 96px minmax(180px, 240px) 22px; gap: 4px 8px; align-items: center; font-size: .95em;
    margin: 2px 8px; padding: 4px 8px 4px 15px; position: relative; background: #ffffff05; box-shadow: inset 9px 0 0 var(--ok); }
.pxrow.pxc { grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1.1fr) 22px; }
.pxrow.off { box-shadow: inset 9px 0 0 #2b2b2b; } .pxrow.off > :not(.sbar):not(.x) { opacity: .55; }
.pxrow.dh2 { font-size: .76em; letter-spacing: 1px; color: var(--text2); background: none; box-shadow: none; padding-top: 6px; padding-bottom: 2px; }
.pxrow:not(.dh2):hover { background: #ffffff09; }
.pxrow .sbar { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; padding: 0; border: 0; background: none; cursor: pointer; } .pxrow .sbar:hover { background: #ffffff26; }
.pxic img { width: 26px; height: 26px; display: block; background: #1a1a1a; }
.pxsq { width: 26px; height: 26px; display: grid; place-items: center; background: #1a1a1a; color: var(--text2); }
.pxn { min-width: 0; } .pxn .mn { display: block; color: var(--theme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxrow .sub { display: block; font-size: .8em; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pxrow .sub.bur { white-space: normal; }
.pxrow .amt { display: inline-flex; align-items: center; gap: 4px; } .pxrow .amt b { min-width: 20px; text-align: center; font-weight: normal; color: var(--theme); }
.pxrow .pm:disabled { opacity: .3; cursor: default; }
.pxrow .rng { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; align-items: center; font-size: .86em; }
.pxrow .rng.dim { display: block; }
.pxrow .rv { text-align: right; white-space: nowrap; color: var(--text); } .pxrow .rv small { display: block; color: var(--text2); font-size: .9em; } .pxrow .rv.out { color: var(--bad); }
.pxbody input[type=range] { width: 100%; accent-color: #9e9e9e; margin: 0; }
.pxrow .x { background: none; border: 0; color: var(--text2); cursor: pointer; padding: 0; } .pxrow .x:hover { color: var(--bad); }
.pxrow .xline { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: .84em; }
.pxrow .xline input[type=range] { max-width: 170px; }
.pxrow .xline select { background: #111; color: var(--theme); border: 1px solid var(--b); font: inherit; padding: 1px 4px; max-width: 280px; }
.pxrow .chip { background: none; border: 1px solid var(--b); color: var(--text2); padding: 0 7px 1px; cursor: pointer; font: inherit; }
.pxrow .chip:hover { color: var(--btnH); } .pxrow .chip.on { color: var(--theme); border-color: #4a4a4a; box-shadow: inset 0 -2px 0 var(--ok); } .pxrow .chip.nostat { border-style: dashed; }
.pxfoot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.pxfoot .mb { padding: 3px 11px 5px; }
details.pxdet { margin: 8px 8px 0; border: 1px solid #1f1f1f; }
.pxlim { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 6px; } .pxlim label { display: inline-flex; gap: 6px; align-items: center; color: var(--text2); } .pxlim input { width: 90px; }
/* the Killmail tab of a fit opened from a killmail (js/killmail.js) */
.kmBody { padding: 4px 0 8px; } .kmBody .dh small { letter-spacing: 0; text-transform: none; }
.kmHead { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 4px 0 8px; border-bottom: 1px solid var(--b); margin-bottom: 4px; } .kmHead > span:first-child { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; } .kmHead .act { margin-left: auto; text-decoration: none; }
.kmProf { display: grid; grid-template-columns: repeat(4, minmax(60px, 1fr)) auto; gap: 6px 10px; align-items: center; margin: 2px 0 8px; } .kmProf .act[disabled] { opacity: .6; cursor: default; }
.kmRow { display: grid; grid-template-columns: 24px minmax(120px, 1.3fr) minmax(90px, 1fr) minmax(90px, 1.2fr) 80px 56px; gap: 4px 10px; align-items: center; padding: 3px 0; font-size: .95em; } .kmRow img { width: 24px; height: 24px; } .kmRow .nm, .kmRow .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kmRow .mn { display: flex; align-items: baseline; gap: 6px; min-width: 0; } .kmRow .tag { flex-shrink: 0; margin-left: 0; }
.kmRow.dh2 { font-size: .76em; letter-spacing: 1px; color: var(--text2); padding: 6px 0 2px; } .kmRow.fb .mn { color: var(--theme); } .kmRow .tag { font-size: .68em; letter-spacing: 1.5px; color: var(--text2); border: 1px solid var(--b); padding: 0 4px; margin-left: 6px; vertical-align: 1px; }
/* skills needed (Export › Skills needed…): the table, the missing rows */
.flyTbl { border-collapse: collapse; width: 100%; margin: 6px 0 4px; } .flyTbl th { text-align: left; font-weight: normal; text-transform: uppercase; font-size: .75em; letter-spacing: 1.5px; color: var(--text2); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--b); }
.flyTbl td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--b); } .flyTbl td:not(:first-child), .flyTbl th:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .flyTbl tr.miss td { color: var(--theme); }
/* compare fits (toolbar › Compare) */
.dlgBox.plan.cmp { max-width: 900px; }
.cmpPick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; } .cmpPick .flyChip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: .9em; padding: 2px 8px 2px 4px; border: 1px solid var(--b); background: none; color: var(--text2); } .cmpPick .flyChip:hover { color: var(--theme); } .cmpPick .flyChip.ok { color: var(--ok); border-color: #48f0c055; } .cmpPick .flyChip img { width: 20px; height: 20px; }
.cmpWrap { overflow-x: auto; } .cmpTbl { border-collapse: collapse; width: 100%; font-size: .95em; } .cmpTbl th { text-align: left; font-weight: normal; vertical-align: bottom; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--b); }
.cmpTbl th.num { text-align: right; } .cmpTbl th img { width: 28px; height: 28px; display: block; margin: 0 0 2px auto; } .cmpTbl th b { display: block; color: var(--theme); font-weight: normal; } .cmpTbl th small { color: var(--text2); display: block; max-width: 160px; margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmpTbl td { padding: 3px 8px 3px 0; border-bottom: 1px solid #ffffff08; white-space: nowrap; } .cmpTbl td.num { text-align: right; font-variant-numeric: tabular-nums; } .cmpTbl td.ref { color: var(--theme); } .cmpTbl td.same { color: var(--text2); }
.cmpTbl tr.sec td { font-size: .74em; letter-spacing: 1.5px; color: var(--text2); padding-top: 10px; border-bottom: 1px solid var(--b); }
.cmpTbl .good { color: var(--ok); } .cmpTbl .bad { color: var(--bad); } .cmpTbl small.d { display: block; font-size: .78em; color: var(--text2); }
.cmpDiff { padding: 3px 0; } .cmpDiff b { color: var(--theme); font-weight: normal; } .cmpDiff .good { color: var(--ok); } .cmpDiff .bad { color: var(--bad); }
/* cheaper variants (PRICE › Cheaper…) */
.dlgBox.plan.ch { max-width: 820px; }
.chBest { border: 1px solid var(--b); padding: 8px 10px; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .chBest b { color: var(--theme); font-weight: normal; } .chBest .act { margin-left: auto; } .chBest .dim { flex-basis: 100%; font-size: .9em; }
.chItem { margin-top: 8px; } .chh { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--b); } .chh img { width: 24px; height: 24px; } .chh b { color: var(--theme); font-weight: normal; }
.chRow { display: grid; grid-template-columns: minmax(160px, 1.6fr) 86px 62px 62px 62px 86px 74px; gap: 4px 8px; align-items: center; padding: 3px 0 3px 32px; font-size: .95em; border-bottom: 1px solid #ffffff08; }
.chRow.dh2 { font-size: .74em; letter-spacing: 1px; color: var(--text2); padding: 8px 0 2px 32px; border-bottom: 1px solid var(--b); } .chRow .mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chRow .good { color: var(--ok); }
.chRow .tag { font-size: .68em; letter-spacing: 1.5px; color: var(--text2); border: 1px solid var(--b); padding: 0 4px; margin-right: 6px; vertical-align: 1px; } .chRow.nofit .mn, .chRow.nofit .num { opacity: .55; } .chRow .act { padding: .35em .7em calc(.35em + 2px); }
/* after a game update: the fits that changed */
.lpFoot .lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--theme); cursor: pointer; text-decoration: underline dotted; } .lpFoot .lnk:hover { color: #fff; }
.upRow { padding: 8px 0; border-bottom: 1px solid var(--b); } .upRow .uph { display: flex; align-items: center; gap: 8px; } .upRow .uph img { width: 28px; height: 28px; } .upRow .uph b { font-weight: normal; color: var(--theme); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upRow ul { margin: 4px 0 0; padding-left: 36px; color: var(--text); } .upRow .good { color: var(--ok); } .upRow .bad { padding-left: 36px; }
/* a fit against a D-scan: one row per hull */
.dsRow { display: grid; grid-template-columns: 22px 28px minmax(140px, 1.4fr) 62px minmax(80px, .8fr) minmax(160px, 1.2fr); gap: 4px 8px; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--b); font-size: .95em; }
.dsRow.dh2 { font-size: .74em; letter-spacing: 1px; color: var(--text2); border-bottom: 1px solid var(--b); padding: 6px 0 2px; } .dsRow.off > :not(label) { opacity: .45; }
.dsRow img { width: 28px; height: 28px; } .dsRow .mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dsRow .num { white-space: nowrap; }
.dsRow input.dsn { width: 42px; background: #151515; border: 1px solid var(--b); color: var(--theme); font: inherit; padding: 2px 4px; text-align: right; }
.dsRow select { width: 100%; background: #151515; border: 1px solid var(--b); color: var(--theme); font: inherit; font-size: .92em; padding: 2px 4px; min-width: 0; }
.dsRow label.chk { margin: 0; } .dsRow input[type=checkbox] { margin: 0; }
.dlgEmpty { position: relative; padding: 26px 16px; text-align: center; border: 1px dashed var(--b); background: url('img/w/fitlab_theme_new_06.jpg') center 35% / cover no-repeat; } .dlgEmpty::before { content: ''; position: absolute; inset: 0; background: #0d0d0dcc; } .dlgEmpty > * { position: relative; }
.dlgBody label.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); margin: 2px 0 4px; cursor: pointer; }
.kmKv { max-width: 560px; } .kmKv .v.bad { color: var(--bad); } .kmNote { color: var(--text2); margin: 6px 0 0; max-width: 720px; }
@container (max-width: 760px) { .kmRow { grid-template-columns: 24px minmax(100px, 1.3fr) minmax(80px, 1fr) 70px; } .kmRow > :nth-child(4), .kmRow > :nth-child(6) { display: none; } .kmProf { grid-template-columns: repeat(4, minmax(50px, 1fr)); } }
details.pxdet > summary { cursor: pointer; list-style: none; padding: 6px 10px; font-size: .76em; letter-spacing: 1.5px; color: var(--text2); text-transform: uppercase; }
details.pxdet > summary::-webkit-details-marker { display: none; }
details.pxdet > summary::before { content: '▸ '; } details.pxdet[open] > summary::before { content: '▾ '; } details.pxdet > summary:hover { color: var(--btnH); }
.pxdet .detBody { padding: 2px 12px 10px; font-size: .9em; display: grid; gap: 8px; min-width: 0; overflow-x: auto; }
.pxdet .chg { display: grid; gap: 2px; } .pxdet .chg .rh { color: var(--theme); } .pxdet .chg ul { margin: 0; padding-left: 16px; }
.pxdet .good { color: var(--ok); }
.pxdet table.t { border-collapse: collapse; width: 100%; } .pxdet table.t td, .pxdet table.t th { padding: 3px 6px; text-align: left; white-space: nowrap; }
.pxdet table.t th { font-weight: normal; color: var(--text2); font-size: .82em; letter-spacing: 1px; } .pxdet table.t .num { text-align: right; } .pxdet table.t td.chg { color: var(--warn); }
.panel.mid .subTabs button.dropin, .pxbody.dropin { outline: 1px dashed var(--warn); outline-offset: -3px; background: #ffb64808; }
.flMenu:has(.pxmenu) { width: 580px; max-width: calc(100vw - 16px); }
.pxmenu { display: grid; grid-template-columns: 1fr 1fr; } .pxmenu .pxcol { min-width: 0; } .pxmenu .pxcol + .pxcol { border-left: 1px solid var(--b); }
.pxmenu .pxq { display: block; margin: 2px 10px 6px; width: calc(100% - 20px); box-sizing: border-box; background: #111; color: var(--theme); border: 1px solid var(--b); padding: 4px 6px; font: inherit; font-size: .95em; }
.pxmenu .pxq:focus { outline: none; border-color: var(--theme); }
.flMenu .mh.sm { font-size: .72em; color: var(--text2); border-bottom: 0; margin-bottom: 0; padding-top: 8px; }
.flMenu .mrow .mb.sm { padding: 1px 8px 3px; }
@media (max-width: 640px) {
    .pxrow, .pxrow.pxc { grid-template-columns: 26px minmax(0, 1fr) 22px; } .pxrow .amt, .pxrow .rng, .pxrow .sub.bur { grid-column: 2 / -1; } .pxrow.dh2 { display: none; }
    .pxrow > .x { grid-row: 1; grid-column: 3; } .pxmenu { grid-template-columns: 1fr; } .pxmenu .pxcol + .pxcol { border-left: 0; border-top: 1px solid var(--b); }
}
@media (hover: none) { .pxfoot span { display: none; } }
/* what a Projected / Command row does (pxinfo.js) */
.pxn .mnl { display: flex; align-items: center; gap: 6px; min-width: 0; } .pxn .mnl .mn { min-width: 0; }
.pxwhat { flex: none; width: 16px; height: 16px; line-height: 14px; padding: 0; border: 1px solid var(--b); border-radius: 50%; background: none; color: var(--text2); font-size: .72em; cursor: pointer; }
.pxwhat:hover { color: var(--theme); border-color: var(--text2); }
.flMenu:has(.pxinfo) { width: 420px; max-width: calc(100vw - 16px); }
.pxinfo ul { margin: 0; padding: 2px 12px 6px 26px; font-size: .9em; line-height: 1.45; } .pxinfo li { margin: 2px 0; } .pxinfo li b { font-weight: normal; color: var(--theme); }
.pxinfo li.hdl { list-style: none; margin: 8px 0 0 -14px; } .pxinfo .hd { color: var(--text); letter-spacing: .5px; }
.pxinfo .pxnote { padding: 2px 12px 8px; font-size: .82em; color: var(--text2); }
/* abyssal (mutated) modules and drones (muta.js): the mark after the name, the mutation window */
.mutm { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid #5a3f77; color: #c98aff; font-style: normal; font-size: .62em; letter-spacing: 1.2px; line-height: 1.5; vertical-align: 2px; font-weight: normal; }
.mutm.unk { border-color: #6b5530; color: var(--warn); }
.m1.mutd .t b, .drow .mn.mutd { color: #c98aff; }
.flMenu .warn { color: var(--warn); }
.win.mwin { width: 640px; }
.mued .muh { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--b); }
.mued .muh b { color: #c98aff; font-weight: normal; letter-spacing: .5px; } .mued .muh span { color: var(--text2); font-size: .88em; }
.mued .muwarn { margin: 8px 0 0; padding: 6px 8px; border-left: 2px solid var(--warn); background: #ffb64808; font-size: .86em; color: var(--text); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.mued .muwarn select { background: #111; color: var(--theme); border: 1px solid var(--b); font: inherit; padding: 1px 4px; margin-left: 6px; }
.mued .mut { display: grid; grid-template-columns: minmax(0, 1.3fr) 82px minmax(110px, 1.5fr) 118px 52px; gap: 6px 10px; align-items: center; padding: 10px 0 6px; font-size: .9em; }
.mued .mut .hd { font-size: .72em; letter-spacing: 1.2px; color: var(--text2); } .mued .mut .hd .tag { font-size: .9em; }
.mued .mut .num { text-align: right; font-variant-numeric: tabular-nums; } .mued .mut .an { color: var(--theme); min-width: 0; }
.mued .mut .nv { display: flex; align-items: center; gap: 4px; } .mued .mut .nv small { width: 22px; flex: none; color: var(--text2); font-size: .82em; }
.mued .mut input[type=number] { width: 100%; box-sizing: border-box; background: #111; color: var(--theme); border: 1px solid var(--b); padding: 2px 4px; font: inherit; text-align: right; }
.mued .mut input[type=number]:focus { outline: none; border-color: #c98aff; }
.mued .mut input[type=range] { width: 100%; margin: 0; accent-color: #c98aff; }
.mued .roll { display: inline-block; min-width: 40px; text-align: right; } .mued .roll.hi { color: var(--ok); } .mued .roll.lo { color: var(--bad); }
.mued .muf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 0 10px; border-bottom: 1px solid var(--b); font-size: .9em; }
.mued .muf .tag, .mued .mufit .tag { font-size: .68em; letter-spacing: 1.5px; color: var(--text2); border: 1px solid var(--b); padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.mued .muscore { margin-left: auto; color: var(--text2); } .mued .muscore b { color: var(--theme); font-weight: normal; }
.mued .mufit { padding-top: 8px; font-size: .9em; } .mued .mufit .dh { font-size: .74em; letter-spacing: 1.5px; color: var(--text2); margin-bottom: 4px; }
.mued .mufit .kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; } .mued .mufit .v { text-align: right; font-variant-numeric: tabular-nums; }
.mued .mufit b { font-weight: normal; } .mued .mufit b.up { color: var(--ok); } .mued .mufit b.dn { color: var(--bad); }
@media (max-width: 640px) {
    .mued .mut { grid-template-columns: minmax(0, 1fr) 112px 46px; grid-auto-flow: row dense; }
    .mued .mut .opt, .mued .mut .hd:nth-child(3) { display: none; }
    .mued .mut .rl { grid-column: 1 / -1; margin-bottom: 4px; }
}
/* what Projected, Command and mutations change, marked in the stats panel (app.js markChanges) */
.panel.sp .chg, .kpis .chg { color: var(--warn) !important; cursor: help; }
.panel.sp .gauge .chg, .panel.sp b.chg { text-decoration: underline dotted #ffb64880; text-underline-offset: 2px; }
.chgBar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 10px 4px; padding: 5px 8px; border: 1px solid var(--b); background: #ffb64806; font-size: .8em; color: var(--text2); }
.chgBar .chgKey { display: inline-flex; align-items: center; gap: 6px; margin-right: 2px; } .chgBar .chgKey i { width: 8px; height: 8px; background: var(--warn); border-radius: 1px; }
.chgBar .chip { background: none; border: 1px solid var(--b); color: var(--text2); padding: 0 7px 1px; cursor: pointer; font: inherit; }
.chgBar .chip:hover { color: var(--btnH); } .chgBar .chip.on { color: var(--theme); border-color: #6b5530; box-shadow: inset 0 -2px 0 var(--warn); }
.chgBar .chip small { color: var(--text2); margin-left: 2px; } .chgBar .chgHint { flex-basis: 100%; font-size: .95em; }
/* a carrier's fighter squadrons (the Fighters tab, view.js) */
.drow.frow { grid-template-columns: 14px 58px 40px minmax(150px, 230px) minmax(0, 1fr) 76px 72px 78px 60px 175px; }
.drow.frow .mn small { font-size: .8em; }
.drow.frow .fabs { display: flex; flex-wrap: wrap; gap: 3px 4px; }
.drow.frow .chip { background: none; border: 1px solid var(--b); color: var(--text2); padding: 0 6px 1px; cursor: pointer; font: inherit; font-size: .8em; white-space: nowrap; }
.drow.frow .chip:hover { color: var(--btnH); } .drow.frow .chip.on { color: var(--theme); border-color: var(--text2); box-shadow: inset 0 -2px 0 var(--ok); } .drow.frow .chip.nostat { border-style: dashed; }
.drow.frow .chip.nostat.on { box-shadow: none; }
@container (max-width: 1000px) { .drow.frow:not(.simple) { grid-template-columns: 14px 58px 40px minmax(140px, 1fr) minmax(0, 1.2fr) 76px 175px; } .drow.frow:not(.simple) > :is(:nth-child(7), :nth-child(8), :nth-child(9)) { display: none; } .drow.frow:not(.simple) > :nth-child(10) { display: block; } }
@container (max-width: 700px) { .drow.frow:not(.simple) { grid-template-columns: 14px 58px 40px minmax(100px, 1fr) 76px; } .drow.frow:not(.simple) > :is(:nth-child(5), :nth-child(10)) { display: none; } .drow.frow:not(.simple) > :nth-child(6) { display: block; } }
/* ---- the cargo: an "add an item" box over the list, a drop line while something is dragged from the browsers */
.cargoAdd { padding: 8px 10px 4px; }
.cargoAdd .sb { display: flex; gap: 8px; align-items: center; border: 1px solid var(--b); min-height: 30px; padding: 0 10px; color: var(--text2); background: #00000060; max-width: 420px; }
.cargoAdd .sb:focus-within { border-color: var(--theme); }
.cargoAdd .sb svg { width: 14px; height: 14px; fill: none; stroke: var(--btnN); stroke-width: 1.8; flex-shrink: 0; }
.cargoAdd input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--theme); font: inherit; }
.cargoAdd input::placeholder { color: #6b6b6b; }
.cargoDrop { display: none; margin: 6px 10px 10px; border: 1px dashed #4a6a7c; color: #9fd2ef; padding: 8px; text-align: center; font-size: .88em; }
body.dragMkt .cargoDrop { display: block; }
body.dragMkt .subTabs [data-cargodrop] { box-shadow: inset 0 -2px 0 #4a6a7c; }
.cargoBody.dropin { outline: 1px dashed var(--ok); outline-offset: -2px; background: transparent !important; }
.flMenu .mrow.cgo { align-items: center; gap: 6px; } .flMenu .mrow.cgo input { width: 110px; background: #0d0d0d; border: 1px solid var(--b); color: var(--theme); font: inherit; padding: 2px 6px; }
/* ---- the Boosters tab: the state bar on the left as on modules (taken / not taken), the side effects to tick under each drug */
.drow.brow { position: relative; padding-left: 17px; box-shadow: inset 9px 0 0 var(--ok); background: #ffffff05; }
.drow.brow.off { box-shadow: inset 9px 0 0 #2b2b2b; } .drow.brow.off > :not(.sbar):not(.rmx) { opacity: .55; }
.drow.brow .sbar { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; padding: 0; border: 0; background: none; cursor: pointer; } .drow.brow .sbar:hover { background: #ffffff26; }
.drow.brow .bgv { font-size: .88em; margin-left: auto; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bse { display: grid; gap: 2px; padding: 2px 12px 8px 60px; border-bottom: 1px solid #d2d2d212; font-size: .9em; }
.bse.off { opacity: .55; }
.bse .hd { font-size: .74em; letter-spacing: 1.5px; color: var(--text2); margin: 2px 0 3px; }
.bse label.chk { display: flex; gap: 8px; align-items: center; max-width: 380px; cursor: pointer; }
.bse label.chk input { margin: 0; accent-color: var(--warn); }
.bse label .v { margin-left: auto; color: var(--text2); font-variant-numeric: tabular-nums; } .bse label .v.bad { color: var(--bad); }
.drow.simple.brow { grid-template-columns: 26px minmax(0, 1fr) auto 18px; } .panel.mid.rd .drow.simple.brow { grid-template-columns: 18px minmax(0, 1fr) auto 18px; }
.drow.brow .bgv { margin-left: 0; }
.splm { display: inline-block; margin-left: 6px; padding: 0 4px; border: 1px solid #2f5a4c; color: var(--ok); font-style: normal; font-size: .62em; letter-spacing: 1.2px; line-height: 1.5; vertical-align: 2px; }
/* ---- the Implants tab: the Sets menu over the list */
.impBar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: .88em; }
.flMenu .mrow.cgo input[type="text"] { width: 180px; }
/* ---- Import many fits */
.dlgBox.bulk { max-width: 760px; } .dlgBox.bulk .dlgBody { max-height: calc(100vh - 120px); overflow-y: auto; }
.bkDrop { border: 1px dashed #4a4a4a; padding: 12px; text-align: center; color: var(--text2); font-size: .9em; margin-bottom: 10px; }
.bkDrop.dropin { border-color: var(--ok); color: var(--theme); }
.bkDrop b { color: var(--theme); font-weight: normal; }
#bkText { width: 100%; box-sizing: border-box; background: #0d0d0d; border: 1px solid var(--b); color: var(--theme); font: .9em/1.4 ui-monospace, Consolas, monospace; padding: 8px; }
.bkSum { margin: 4px 0 8px; font-size: .92em; } .bkSum b { color: var(--theme); font-weight: normal; }
.bkPick { display: flex; gap: 6px; margin-bottom: 6px; }
.bkList { max-height: min(46vh, 420px); overflow: auto; border: 1px solid #d2d2d21a; }
.bkRow { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 10px; border-bottom: 1px solid #d2d2d20f; font-size: .92em; cursor: pointer; }
.bkRow img, .bkRow .bkNo { width: 26px; height: 26px; display: grid; place-items: center; background: #1a1a1a; color: var(--text2); }
.bkRow .mn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--theme); }
.bkRow > span:last-child { font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.bkRow.bad { opacity: .7; cursor: default; }
.bkFoot { gap: 14px; flex-wrap: wrap; align-items: center; } .bkFoot .sp { flex: 1; }
@media (max-width: 600px) { .bkRow { grid-template-columns: 18px 26px minmax(0, 1fr); } .bkRow > span:last-child { grid-column: 3; max-width: none; } }
/* ---- Hulls & Fits: the community fits section (a button: it folds) */
.lpTree .tn.csec { width: 100%; background: none; border: 0; text-align: left; cursor: pointer !important; font-family: inherit; font-size: .81em; letter-spacing: 1.5px; color: var(--text2); display: flex; align-items: center; gap: 6px; } .lpTree .tn.csec:hover { color: var(--theme); }
.lpTree .tn.csec .ar { width: 10px; }
.lpTree .tn.leaf .au { margin-left: auto; padding-left: 8px; color: var(--text2); font-size: .82em; white-space: nowrap; }