/* Eve WebTools — harmonisation layer for Planetary · User Planets (Planetary/planets/).
   Section F of the Planetary layer. Load it LAST on planets/index.html, right after ../harmonised.css
   (sections A–E: shared chrome, tokens --btn*, the one dialog, scrollbars), which it relies on.

   ====================================================================== F. USER PLANETS (Planetary/planets/)
   Loaded after styles.css, planets/planets.css, lib/custom_elements.css and harmonised.css.
   Square corners everywhere except genuinely round things (planet discs, status dots, the pie, map pins, the
   portrait set inside a planet disc). Status: ok #48f0c0 · warn #ffb648 · bad #ff9a9a text / #ff5c5c frame & fill.
   Data colours untouched: security, pie slices, the planet discs themselves. */

/* ============================================================ F0. cursors: no cursor images (same selectors as planets.css) */
#ante-content-UP-SSOButton-IMG, .up_char_planet_mini, .up_char_switcher_row, .up_character_img, .up_icon_btn, .up_char_menu_action, .up_char_menu_add,
.up_layout_toggle_btn, .up_summary_stat-filterable, .up_filter_chip, .up_filter_dd_trigger, .up_filter_dd_option, .up_filter_reset, .tile-planet,
.colony-refresh-btn, .detail-refresh-btn, .buildings-toggle, .tile-map .hdr .x, .map-pin, .map-edge-indicator, .pin-overlap-item,
.brow[data-pin-id]:not([data-pin-id=""]), .panel-row, .detail-ingame-map .map-pin, .up_char_modal_done,
.extractor-card[data-pin-id], .storage-card[data-pin-id], .facility-card[data-pin-id] { cursor: pointer; }
.colony-refresh-btn:disabled, .detail-refresh-btn:disabled, #up_char_refresh_btn:disabled { cursor: default; }
svg.colonymap { cursor: grab; }
.colonymap-stage.panning svg.colonymap { cursor: grabbing; }

/* ============================================================ F1. page: notices, plates, stacking */
.up_planets_span { font-size: 0.8571em; letter-spacing: 0.5px; line-height: 1.6; color: #6b6b6b; }
.up_planets_span:first-child { margin-top: 10px; font-size: 0.7857em; letter-spacing: 1.5px; }
/* the three bars are translucent page plates, like the sibling tools */
.up_characters, .up_filters, .up_summary { background-color: #00000042; border: 1px solid #313131; border-radius: 0; }
/* the open filter list and the character list sit above the colony list ([data-tooltip] items there carry z-index 50) */
.up_characters { z-index: 70; }
.up_filters { position: relative; z-index: 60; }

/* ============================================================ F2. characters bar */
.up_characters { padding: 12px 16px; }
.up_char_planets { background: none; border-radius: 0; padding: 0 4px; gap: 18px; }
.up_char_planet_mini img { box-shadow: 0 0 0 1px #313131; transition: box-shadow .15s linear; }                    /* planet discs stay round */
.up_char_planet_mini:hover img, .up_char_planet_mini:focus-visible img { box-shadow: 0 0 0 1px #d2d2d2; }
.up_char_planet_mini:focus-visible { outline: none; }
.up_character_body { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.2857em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2; }
/* the portrait opens the character list: a picker, so its frame lights on hover and while open */
.up_character_img { width: 48px; height: 48px; box-sizing: border-box; border: 1px solid #313131; transition: border-color .15s linear; }
.up_character_img > img, .up_character_img:hover > img, .up_character_img.open > img { width: 46px; height: 46px; border-radius: 0; box-shadow: none; }
.up_character_img:hover, .up_character_img.open { border-color: #d2d2d2; }
/* "|" text dividers -> hairlines */
.up_characters > .toolLogos { width: 17px; }
.up_characters > .toolLogos > span, .up_opt_divider { display: block; font-size: 0; width: 1px; height: 36px; background-color: #313131; }
.up_opt_divider { height: 24px; margin: 0 6px; }
.up_characters > .up_character_options { gap: 6px; }
/* icon buttons: #6b6b6b -> #9e9e9e -> #d2d2d2, constant frame */
.up_icon_btn svg { width: 18px; height: 18px; fill: #6b6b6b; transition: fill .15s linear; }
.up_icon_btn:hover svg { fill: #9e9e9e; }
.up_icon_btn:active svg, #up_char_refresh_btn.refreshing svg { fill: #d2d2d2; }
.up_character_options .up_icon_btn { width: 36px; height: 36px; padding: 0; box-sizing: border-box; background: none; border: 1px solid #313131; border-radius: 0; }
.up_character_options .up_icon_btn:hover { border-color: #313131; }
/* character list (portrait click): a pop-over list, rows with the near-opaque hover */
.up_char_switcher { background-color: #0d0d0d; border: 1px solid #313131; border-radius: 0; box-shadow: none; }
.up_char_switcher_row { border-bottom-color: #313131; transition: background-color .15s linear; }
.up_char_switcher_row:hover, .up_char_switcher_row:focus-visible { background-color: #d2d2d214; }
.up_char_switcher_row:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
.up_char_switcher_name { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 1em; color: #d2d2d2; }
.up_char_switcher_img img { border-radius: 0; }

/* ============================================================ F3. manage-characters dialog: the one dialog (see A7) */
.up_char_modal_backdrop { background-color: #00000080; }
.up_char_modal { width: 34em; max-width: calc(100% - 32px); background-color: #0d0d0d; border: 1px solid #313131; border-radius: 0; box-shadow: none; padding: 12px 16px 16px; gap: 12px; }
.up_char_modal_header { border-bottom: 1px solid #313131; padding-bottom: 8px; }
.up_char_modal_title { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2; }
#up_char_modal_close { width: auto; height: auto; padding: 6px 8px; background: none; border: 1px solid #313131; border-radius: 0; }      /* framed ✕ */
#up_char_modal_close svg { width: 12px; height: 12px; }
.up_char_menu_list { gap: 0; }
.up_char_menu_row { border-radius: 0; padding: 8px 10px; gap: 12px; transition: background-color .15s linear; }
.up_char_menu_row:hover { background-color: #d2d2d214; }
.up_char_menu_row.current { background-color: #d2d2d214; box-shadow: inset 3px 0 0 #d2d2d2; }                       /* the current character is the selected row */
.up_char_menu_img, .up_char_menu_img > img { width: 40px; height: 40px; border-radius: 0; }
.up_char_menu_name { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; color: #d2d2d2; gap: 8px; }
.up_char_menu_tag {                                                                                                  /* outlined neutral tag */
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; line-height: 1.4;
    color: #999999; border: 1px solid #313131; border-radius: 0; padding: 1px 6px;
}
.up_char_menu_action { width: 32px; height: 32px; }
.up_char_menu_action svg { width: 16px; height: 16px; fill: #6b6b6b; transition: fill .15s linear; }
.up_char_menu_action:hover svg { fill: #9e9e9e; }
.up_char_menu_remove:hover svg { fill: #ff9a9a; }                                                                    /* delete icon */
/* actions: right-aligned on the foot hairline, Close first, Add character (primary) last */
.up_char_modal_foot { display: flex; justify-content: flex-end; align-items: center; gap: 6px; border-top: 1px solid #313131; padding-top: 12px; }
.up_char_menu_add, .up_char_modal_done {
    appearance: none; -webkit-appearance: none; margin: 0; background: none; border: 1px solid #313131; border-radius: 0; box-shadow: none;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2;
    padding: 0.6em 1.6em calc(0.6em + 2px); color: var(--btnTextColourNormal); transition: color .15s linear;
}
.up_char_menu_add { gap: 8px; color: var(--btnTextColourSelected); }                                                 /* primary: bright at rest */
.up_char_menu_add svg, .up_char_menu_add:hover svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.up_char_menu_add:hover { color: #ffffff; border-color: #313131; }
.up_char_modal_done:hover { color: var(--btnTextColourHover); }
.up_char_modal_done:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }

/* ============================================================ F4. filter bar */
.up_filters { gap: 10px 12px; padding: 12px 14px; }
/* rows / panel: a menu-button group of two icon buttons, 3px apart, bottom mark when on */
.up_layout_toggle { height: auto; gap: 3px; padding: 0; background: none; border: none; border-radius: 0; }
.up_layout_toggle_btn { width: 36px; height: 34px; box-sizing: border-box; border: 1px solid #313131; border-radius: 0; background: none; transition: box-shadow .15s linear; }
.up_layout_toggle_btn svg { fill: #6b6b6b; transition: fill .15s linear; }
.up_layout_toggle_btn svg rect { rx: 0; ry: 0; }
.up_layout_toggle_btn:hover svg { fill: #9e9e9e; }
.up_layout_toggle_btn.active { background: none; box-shadow: var(--btnMark); }
.up_layout_toggle_btn.active svg { fill: #d2d2d2; }
/* reset: icon button */
.up_filter_reset { width: 36px; height: 34px; background: none; border: 1px solid #313131; border-radius: 0; color: #6b6b6b; transition: color .15s linear; }
.up_filter_reset svg { width: 16px; height: 16px; }
.up_filter_reset:hover { border-color: #313131; color: #9e9e9e; }
.up_filter_reset:active { color: #d2d2d2; }
/* pickers: they open a list, so the frame lights on hover and while open */
.up_filter_dd_trigger {
    height: 34px; background: none; border: 1px solid #313131; border-radius: 0; padding: 0 12px; gap: 9px;
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #999999;
    transition: color .15s linear, border-color .15s linear;
}
.up_filter_dd_trigger:hover, .up_filter_dd.open .up_filter_dd_trigger { color: #d2d2d2; border-color: #d2d2d2; }
.up_filter_dd_caret { width: 9px; height: 6px; }
.up_filter_dd_panel { top: calc(100% + 4px); gap: 0; padding: 4px 0; background-color: #0d0d0d; border: 1px solid #313131; border-radius: 0; box-shadow: none; }
.up_filter_dd_option { border-radius: 0; padding: 7px 12px; gap: 10px; font-size: 0.8571em; color: #999999; transition: color .15s linear, background-color .15s linear; }
.up_filter_dd_option:hover { background-color: #d2d2d214; color: #d2d2d2; }
.up_filter_dd_all { font-weight: normal; }
.up_filter_dd_sep { background-color: #313131; margin: 4px 0; }
/* the dark checkbox: 14px square, #313131 frame, checked = #d2d2d2 centre */
.up_filter_dd_option input[type="checkbox"], .up_alertsettings input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; box-sizing: border-box;
    border: 1px solid #313131; border-radius: 0; background-color: #00000060;
}
.up_filter_dd_option input[type="checkbox"]:checked, .up_alertsettings input[type="checkbox"]:checked { background-color: #d2d2d2; box-shadow: inset 0 0 0 3px #101010; }
.up_filter_dd_option input[type="checkbox"]:checked::after { display: none; }
.up_filter_dd_option input[type="checkbox"]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }
/* "Needs attention only": a toggle, so a menu button (the checkbox stays in the label for keyboard and forms, out of sight) */
.up_filter_chip {
    position: relative; height: 34px; padding: 0 13px 2px; background: none; border: 1px solid #313131; border-radius: 0;
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase;
    color: var(--btnTextColourNormal); transition: color .15s linear;
}
.up_filter_chip input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.up_filter_chip:hover { color: var(--btnTextColourHover); }
.up_filter_chip:has(input:checked) { color: var(--btnTextColourSelected); border-color: #313131; box-shadow: var(--btnMark); }
.up_filter_chip:has(input:focus-visible) { outline: 1px solid #d2d2d2; outline-offset: 2px; }
/* legend: section-label voice, status dots stay round */
.up_planets_legend { gap: 6px 16px; font-size: 0.7143em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b; }
.up_planets_legend span { gap: 7px; }
.up_attn_dot { width: 7px; height: 7px; }
.up_attn_dot.good { background-color: #48f0c0; }
.up_attn_dot.warn { background-color: #ffb648; }
.up_attn_dot.bad { background-color: #ff5c5c; }

/* ============================================================ F5. fleet summary: stat tiles; the four that filter are menu buttons */
.up_summary { gap: 6px; padding: 12px 14px; }
.up_summary_stat { min-width: 8.5em; gap: 4px; padding: 8px 14px 10px; background-color: #00000042; border: 1px solid #313131; border-radius: 0; }
.up_summary_val { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.2857em; letter-spacing: 1px; color: #d2d2d2; }
.up_summary_stat.is-warn .up_summary_val { color: #ffb648; }
.up_summary_stat.is-bad .up_summary_val { color: #ff9a9a; }
.up_summary_cap { font-size: 0.7143em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b; transition: color .15s linear; }
.up_summary_stat-filterable { transition: box-shadow .15s linear; }
.up_summary_stat-filterable:hover { border-color: #313131; }
.up_summary_stat-filterable:hover .up_summary_cap { color: #9e9e9e; }
.up_summary_stat-filterable.active { background-color: #00000042; border-color: #313131; box-shadow: var(--btnMark); }
.up_summary_stat-filterable.active .up_summary_cap { color: #d2d2d2; }

/* ============================================================ F6. colony list (row layout) */
.up_planets { gap: 14px; padding: 8px 16px 16px; }
.up_filters_empty { color: #6b6b6b; font-size: 0.9286em; }
.colony-row { gap: 8px; padding: 0; border-radius: 0; }
.tile { background-color: #00000042; border: 1px solid #313131; border-radius: 0; }
.tile-planet { transition: background-color .15s linear; }
.tile-planet:hover { background-color: #d2d2d20a; }                                                                 /* whole-card hover: fill, frame constant */
.tile-planet:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
/* pills over the planet: outlined neutral tags on a solid ground (they sit over the disc) */
.pill {
    gap: 5px; padding: 2px 6px; background-color: #151515; border: 1px solid #313131; border-radius: 0;
    font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.4; color: #999999;
}
.pill svg { width: 1.2em; height: 1.2em; }
.sc-item[data-tooltip]::before { font-size: 1em; }
.pill[data-tooltip]::before { font-size: 1.2em; letter-spacing: 0.5px; text-transform: none; }
/* attention dots: round, status colours, dark mark */
.attn { border: 2px solid #151515; color: #151515; font-family: 'Shentox Bold', 'Segoe UI', sans-serif; font-weight: normal; }
.attn.good { background-color: #48f0c0; }
.attn.warn { background-color: #ffb648; }
.attn.bad { background-color: #ff5c5c; }
/* card title: the card-name voice of the Template Library */
.colony-title, .panel-title {
    font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-weight: normal; font-size: 1em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2;
}
.colony-title { margin-bottom: 8px; }
.colony-title .sep, .panel-title .sep, .detail-title .sep { color: #313131; font-weight: normal; }
.colony-title .sec, .panel-title .sec, .detail-title .sec { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; letter-spacing: 1px; }
/* refresh icons */
.colony-refresh-btn svg, .detail-refresh-btn svg { width: 16px; height: 16px; fill: #6b6b6b; transition: fill .15s linear; }
.colony-refresh-btn:hover svg, .detail-refresh-btn:hover svg { fill: #9e9e9e; }
.colony-refresh-btn.refreshing svg, .detail-refresh-btn.refreshing svg, .colony-refresh-btn:active svg, .detail-refresh-btn:active svg { fill: #d2d2d2; }
/* building rows: hover fill, the selected building carries the left tick */
.buildings { gap: 1px; }
.brow { padding: 5px 8px; margin: 0 -8px; border-radius: 0; color: #999999; }
.brow[data-pin-id]:not([data-pin-id=""]) { transition: background-color .15s linear; }
.brow[data-pin-id]:not([data-pin-id=""]):hover { background-color: #d2d2d20a; }
.brow.brow-selected { outline: none; background-color: #d2d2d20a; box-shadow: inset 3px 0 0 #d2d2d2; }
.brow:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
.brow .res-icon, .sc-item img, .res-icon-sm { border-radius: 0; }
.brow .res-name { color: #d2d2d2; min-width: 6em; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .time { font-size: 0.9286em; color: #999999; }
.brow-leader { border-bottom: 1px dotted #313131; margin: 0 4px; }
/* tags: the tier is a filled neutral tag; head count and projected total are outlined neutral tags */
.res-tier, .b-tier, .pi-badge-tier, .b-count {
    font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; font-weight: normal; font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.4;
    padding: 1px 6px; border: 1px solid transparent; border-radius: 0; box-shadow: none;
}
.res-tier:not([title]), .b-tier, .pi-badge-tier { color: #151515; background-color: #d2d2d2a0; }
.pi-badge-tier { background-color: #9e9e9e; }                                                                        /* sits over the planet disc: solid */
.res-tier[title], .b-count { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; color: #999999; background: none; border-color: #313131; }
.pi-badge-extractor { filter: none; }
/* status words (.brow .time sets the quiet colour, so the row variants are spelled out) */
.brow .time.up_extraction_overdue { color: #ff9a9a; }
.brow .time.up_extraction_warn, .brow .time.up_extraction_soon { color: #ffb648; }
.up_extraction_overdue { color: #ff9a9a; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; }
.up_extraction_warn, .up_extraction_soon { color: #ffb648; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; }
/* storage bars: framed square track, neutral fill, warn and full take the status colours (label stays readable) */
.brow .loadbar, .detail-panel .loadbar { border: 1px solid #313131; border-radius: 0; background-color: #00000060; }
.brow .loadbar > div, .detail-panel .loadbar > div { border-radius: 0; background-color: #d2d2d230; }
.brow .loadbar > div.warn, .detail-panel .loadbar > div.warn { background-color: #ffb64859; }
.brow .loadbar > div.full, .detail-panel .loadbar > div.full { background-color: #ff5c5c66; }
.brow .loadbar-label, .detail-panel .loadbar-label { font-size: 0.7143em; letter-spacing: 0.5px; color: #d2d2d2; text-shadow: 0 1px 2px #000000cc; }
.brow .pct, .detail-panel .loadbar-wrap .pct { font-size: 0.8571em; color: #999999; }
.loadbar-wrap:has(> .loadbar > .loadbar-real.warn) > .pct { color: #ffb648; }
.loadbar-wrap:has(> .loadbar > .loadbar-real.full) > .pct { color: #ff9a9a; }
.sc-item, .sc-more { font-size: 0.8571em; color: #999999; }
.sc-list { gap: 8px; }
/* "N more": a quiet row-shaped button */
.buildings-toggle { border-radius: 0; color: #6b6b6b; transition: color .15s linear; }
.buildings-toggle:hover { color: #9e9e9e; }
/* owner */
.tile-owner { padding: 20px; }
.tile-owner .avatar { width: 96px; height: 96px; border-radius: 0; box-sizing: border-box; border: 1px solid #313131; }
.tile-owner .name { font-size: 0.8571em; letter-spacing: 1px; color: #999999; }

/* while the in-game layout is open the row is short of room: the owner tile (already named in the bar) steps aside */
.colony-row:has(> .tile-map.is-open) > .tile-owner { display: none; }

/* ---- in-game layout tile (planet click) and its map; pins stay round, ring colours follow the status palette */
.tile-map { border-color: #313131; padding: 10px; }
.tile-map .hdr { top: 10px; right: 10px; }
.tile-map .hdr .x {                                                                                                  /* framed ✕ */
    padding: 4px 8px; background: #0d0d0df7; border: 1px solid #313131; border-radius: 0;
    font-size: 0.8571em; color: #6b6b6b; transition: color .15s linear;
}
.tile-map .hdr .x:hover { color: #9e9e9e; }
svg.colonymap { border-radius: 0; }
.colonymap clipPath rect { rx: 0; ry: 0; }
.map-pin-ring[stroke="#6fcc3d"], .map-edge-ring[stroke="#6fcc3d"] { stroke: #48f0c0; }
.map-pin-ring[stroke="#cc793d"], .map-edge-ring[stroke="#cc793d"] { stroke: #ffb648; }
.map-pin-ring[stroke="#f30202"], .map-edge-ring[stroke="#f30202"] { stroke: #ff5c5c; }
.map-pin-ring2 { stroke: #d2d2d2; }
.map-pin.pin-selected .map-pin-ring2 { filter: none; }
.pin-overlap-list { padding: 4px 0; background-color: #0d0d0d; border: 1px solid #313131; border-radius: 0; box-shadow: none; }
.pin-overlap-lbl { font-size: 0.7143em; letter-spacing: 1.5px; color: #6b6b6b; padding: 4px 10px 5px; }
.pin-overlap-item { border-radius: 0; padding: 6px 10px; font-size: 0.8571em; color: #999999; transition: color .15s linear, background-color .15s linear; }
.pin-overlap-item:hover, .pin-overlap-item:focus-visible { background-color: #d2d2d214; color: #d2d2d2; }
.pin-overlap-dot[style*="#6fcc3d"] { background: #48f0c0 !important; }
.pin-overlap-dot[style*="#cc793d"] { background: #ffb648 !important; }
.pin-overlap-dot[style*="#f30202"] { background: #ff5c5c !important; }

/* ============================================================ F7. panel layout: the colony rail and the detail panel */
.up_panel_frame.layout-panel { gap: 0; }
.up_planets.layout-panel { gap: 8px; align-content: start; }                                                    /* a short rail no longer stretches its cards */
.panel-row { gap: 18px; padding: 16px 18px; background-color: #00000042; border: 1px solid #313131; border-radius: 0; transition: background-color .15s linear; }
.panel-row:not(.selected):hover { background-color: #d2d2d20a; }
.panel-row.selected { background-color: #d2d2d20a; border-color: #313131; box-shadow: inset 3px 0 0 #d2d2d2; }       /* the colony on show: left tick */
.panel-row:focus-visible { outline: 1px solid #d2d2d2; outline-offset: -1px; }
.owner-portrait { border-color: #161616; box-shadow: none; }                                                         /* round: it sits inside the planet disc */
.panel-row-details { gap: 8px; }
.b-summary { gap: 2px; }
.b-res-cluster { gap: 4px; }
.up_detail_panel_wrap { padding: 8px 16px 16px 8px; }
.detail-panel-empty { border: 1px dashed #313131; border-radius: 0; color: #6b6b6b; font-size: 0.9286em; }
/* the detail panel: a near-opaque side panel (its head is sticky, so it needs a solid ground) */
.detail-panel { gap: 18px; padding: 18px 20px; background-color: #151515; border: 1px solid #313131; border-radius: 0; }
.detail-pinned { gap: 18px; margin: -18px -20px 0; padding: 18px 20px 0; background-color: #151515; border-radius: 0; }
.detail-title-block { padding: 12px 14px; background-color: #00000042; border: 1px solid #313131; border-radius: 0; }
.detail-title-main { gap: 8px; align-items: flex-start; }
.detail-title { font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-weight: normal; font-size: 1.2857em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2; gap: 0.5em; }
.detail-refresh-btn { height: 1.4em; width: 1.4em; }
/* Healthy / Attention / Critical: outlined status tag */
.detail-status {
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-weight: normal; font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.4;
    padding: 1px 6px; border: 1px solid #313131; color: #999999;
}
.detail-status.good { color: #48f0c0; border-color: #48f0c066; }
.detail-status.warn { color: #ffb648; border-color: #ffb64866; }
.detail-status.bad { color: #ff9a9a; border-color: #ff5c5c80; }
.detail-owner .owner-name { font-size: 0.9286em; color: #999999; }
.owner-portrait-lg { border: 1px solid #313131; border-radius: 0; }
.detail-ingame-map { border-color: #313131; border-radius: 0; }
.detail-section { gap: 8px; }
.detail-section-label { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-weight: normal; font-size: 0.7857em; letter-spacing: 1.5px; color: #6b6b6b; }
.card-grid { gap: 8px; }
.extractor-card, .storage-card, .facility-card { background-color: #00000042; border: 1px solid #313131; border-radius: 0; }
.extractor-card[data-pin-id], .storage-card[data-pin-id], .facility-card[data-pin-id] { transition: background-color .15s linear, box-shadow .15s linear; }
.detail-panel .linked-hl { border-color: #313131; background-color: #d2d2d214; box-shadow: inset 3px 0 0 #d2d2d2; }    /* linked to the selected pin: left tick */
.ext-head .res-name, .storage-card .st-name, .fac-name { font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-weight: normal; font-size: 1em; color: #d2d2d2; }
.ext-stat .k { font-size: 0.7143em; letter-spacing: 1.5px; color: #6b6b6b; }
.ext-stat .v { font-size: 0.9286em; color: #d2d2d2; }
.ext-stat .v .sub { font-size: 0.9231em; color: #6b6b6b; }                                                           /* 0.8571em of the body */
.ext-demand-warn { background-color: #ff5c5c; color: #151515; font-family: 'Shentox Bold', 'Segoe UI', sans-serif; font-weight: normal; font-size: 0.7692em; }
.storage-overview .ov-label { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
.pie-legend-item { font-size: 0.8571em; }
.pie-legend-item .name { color: #d2d2d2; }
.pie-legend-item .amt { color: #999999; }
.fac-schematic .sname { font-size: 0.9286em; color: #999999; }
.fac-row { font-size: 0.8571em; }
.fac-row .k { font-size: 0.8333em; letter-spacing: 1.5px; color: #6b6b6b; }                                          /* 0.7143em of the body */
.fac-row .v { color: #d2d2d2; }
.fac-input-chip { background: none; border: 1px solid #313131; border-radius: 0; padding: 3px 9px; font-size: 1em; }   /* value chip, read-only */
.fac-input-chip span { color: #999999; }

/* ============================================================ F8. not signed in, loading */
#ante-content-UP { gap: 28px; }
#ante-content-UP-Infos { line-height: 1.7; color: #999999; }
#ante-content-UP-Infos > span:first-child {                                                                          /* block title */
    display: inline-block; margin-bottom: 6px; font-family: 'Shentox Light', 'Segoe UI', sans-serif; font-size: 1.2857em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d263;
}
#ante-content-UP-Infos b { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-weight: normal; color: #d2d2d2; }
#ante-content-UP-Infos i { font-style: normal; letter-spacing: 0.5px; }
/* loading: the scene stays as it is; its caption takes the section-label voice */
.up_loading { gap: 18px; font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b; }
.up_la_stage { border-radius: 0; }

/* ============================================================ F9. Discord alert settings (hidden today: display:none in planets.css) */
.up_alertsettings { border-radius: 0; background-color: #00000042; border: 1px solid #313131; }
.up_alertsettings_title { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2; }
.up_alertsettings_row > label { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
.up_alertsettings_row input[type="text"] { min-height: 34px; box-sizing: border-box; padding: 0 10px; background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; font-family: inherit; outline: none; }
.up_alertsettings_row input[type="text"]::placeholder { color: #6b6b6b; }
.up_alertsettings_row input[type="text"]:focus, #up_alert_lead:focus { border-color: #d2d2d2; }
#up_alert_lead { min-height: 34px; padding: 0 8px; font-family: inherit; }
#up_alert_save {
    appearance: none; -webkit-appearance: none; margin: 0; background: none; border: 1px solid #313131; border-radius: 0;
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2;
    padding: 0.55em 1.1em calc(0.55em + 2px); color: var(--btnTextColourNormal); transition: color .15s linear;
}
#up_alert_save:hover { color: var(--btnTextColourHover); }
#up_alert_save:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.up_alertsettings_hint { font-size: 0.7857em; color: #6b6b6b; }
#up_alert_status { font-size: 0.8571em; color: #6b6b6b; }

/* ============================================================ F10. motion */
.up_icon_btn svg, .up_char_menu_action svg, .colony-refresh-btn svg, .detail-refresh-btn svg { transition-timing-function: linear; }