/* ==========================================================================================
   screens/loadout.css — 干员调配 (Operator loadout, DESIGN §16; js/screens/loadout.js): full-screen overlay with a
   filterable roster of the visible chess (left) and the selected chess's skills, 局内数值 and elite modules (right).
   Official preset sprites (ui/outer: operator_preset, image_skill_select_outline, skill_select_deco, icon_equip_non)
   are used when the local-client art is present; every piece has a CSS fallback.
   Sizes use the local management design unit (100px at 1920×1080); text also follows the saved text preference.
   ========================================================================================== */

.lo {
  position: fixed; inset: 0; z-index: 55; /* above every screen (1) and the in-match banners (40), below the connection
                                             banner (60), modals / confirm dialogs (80), toasts and tooltips */
  display: flex; flex-direction: column;
  padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px);
  background: var(--bg-0);
  color: var(--text-hi);
  animation: lo-in 200ms var(--ease-out) backwards;
  overscroll-behavior: contain;
}
@keyframes lo-in { from { opacity: 0; } }
.lo__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 18% 10%, rgba(78, 216, 175, .07), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(52, 184, 216, .06), transparent 60%),
    linear-gradient(rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / calc(0.6 * var(--ui-unit, 1rem)) calc(0.6 * var(--ui-unit, 1rem)),
    linear-gradient(90deg, rgba(78, 216, 175, .035) 1px, transparent 1px) 0 0 / calc(0.6 * var(--ui-unit, 1rem)) calc(0.6 * var(--ui-unit, 1rem)),
    linear-gradient(180deg, #0f1312, #090b0a);
}
/* every layer but the background stacks above it. :where() keeps this at the specificity of the old `.lo > *` (one
   class), so the rules after it still win where they did, and it never matches .lo__bg: as `.lo > *` (same specificity,
   later rule) it beat the layer's `position: absolute`, which left a 0-px tall flex item that never drew (PR #14). */
.lo > :where(:not(.lo__bg)) { position: relative; }

/* ---- top bar ---------------------------------------------------------------------------------------------------- */
/* The tabs stay centred while both sides fit in equal halves beside them; a wider side keeps its own width and shifts
   the tabs instead (0.2.0: three tabs and the co-op countdown ran the right column into the tabs on phones and in
   English), and only when nothing else is left does the tab strip scroll (.lo-tabs). */
.lo-top {
  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); align-items: center; gap: calc(0.2 * var(--ui-unit, 1rem));
  height: max(calc(1 * var(--ui-unit, 1rem)), calc(0.48 * var(--ui-unit, 1rem))); padding: 0 calc(0.36 * var(--ui-unit, 1rem));
  background: linear-gradient(180deg, rgba(8, 10, 9, .95), rgba(10, 13, 12, .6));
  border-bottom: 1px solid var(--line);
}
.lo-top::after {
  content: ''; position: absolute; left: calc(0.36 * var(--ui-unit, 1rem)); right: calc(0.36 * var(--ui-unit, 1rem)); bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 26%, transparent 74%, var(--mint-700));
}
.lo-top__left { justify-self: start; display: flex; align-items: center; gap: calc(0.14 * var(--ui-unit, 1rem)); }
.lo-top__center { display: flex; flex-direction: column; align-items: center; gap: calc(0.02 * var(--ui-unit, 1rem)); min-width: 0; }
.lo-top__title { display: flex; align-items: center; gap: calc(0.12 * var(--ui-unit, 1rem)); margin: 0; font-size: max(calc(.32 * var(--utility-text, var(--t))), calc(0.16 * var(--ui-unit, 1rem))); font-weight: 900; letter-spacing: .14em; line-height: 1.15; }
.lo-top__icon { width: max(calc(0.3 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); height: max(calc(0.3 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); object-fit: contain; color: var(--mint-500); }
.lo-top__right { justify-self: end; display: flex; align-items: center; gap: calc(0.16 * var(--ui-unit, 1rem)); min-width: 0; }
.lo-count { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-lo); white-space: nowrap; }
.lo-count b { color: var(--mint-400); font-size: max(calc(.22 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); margin: 0 calc(0.02 * var(--ui-unit, 1rem)) 0 calc(0.06 * var(--ui-unit, 1rem)); }
/* co-op briefing: time left before the match locks the loadout (the overlay covers the briefing's own countdown) */
.lo-deadline { --cd-h: max(calc(0.44 * var(--ui-unit, 1rem)), calc(0.2 * var(--ui-unit, 1rem))); flex: none; }
/* its caption breaks at its spaces (Loadout / Deadline) rather than widening the column; 调配截止 stays one line */
.lo-deadline .countdown__label { font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); width: min-content; word-break: keep-all; text-align: right; }
.lo-sync { font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); padding: calc(0.03 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)); border: 1px solid var(--line-2); color: var(--text-lo); white-space: nowrap; letter-spacing: .04em; }
.lo-sync.is-ok { color: var(--mint-400); border-color: var(--mint-800); }
.lo-sync.is-busy { color: var(--text-md); }
.lo-sync.is-warn { color: var(--amber); border-color: rgba(246, 163, 41, .45); }
.lo-sync.is-bad { color: var(--red-premium); border-color: rgba(255, 84, 84, .45); }

.lo-note {
  flex: none; display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); margin: 0; padding: calc(0.07 * var(--ui-unit, 1rem)) calc(0.36 * var(--ui-unit, 1rem));
  font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo);
  background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 70%);
  border-bottom: 1px solid rgba(47, 58, 53, .6);
}
.lo-note .icon { width: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); color: var(--mint-500); flex: none; }
.lo-note.is-locked { color: var(--amber); background: linear-gradient(90deg, rgba(246, 163, 41, .12), transparent 70%); }
.lo-note.is-locked .icon { color: var(--amber); }

.lo-loading { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(0.14 * var(--ui-unit, 1rem)); color: var(--text-lo); font-size: max(calc(.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
/* the tab's game data did not load (GitHub #173): said in place of the roster */
.lo-missing { flex-direction: column; gap: calc(0.1 * var(--ui-unit, 1rem)); padding: calc(0.3 * var(--ui-unit, 1rem)); text-align: center; color: var(--amber); }
.lo-missing .icon { width: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); height: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); }
.lo-missing p { margin: 0; max-width: calc(9 * var(--ui-unit, 1rem)); color: var(--text-lo); font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); line-height: 1.6; text-wrap: balance; }

/* ---- body layout -------------------------------------------------------------------------------------------------- */
.lo-body {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(7 * var(--ui-unit, 1rem)));
  gap: calc(0.22 * var(--ui-unit, 1rem)); padding: calc(0.18 * var(--ui-unit, 1rem)) calc(0.3 * var(--ui-unit, 1rem)) calc(0.22 * var(--ui-unit, 1rem));
}
.lo-roster { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: calc(0.12 * var(--ui-unit, 1rem)); }
.lo-detail-wrap { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.lo-detail-back { display: none; }

/* ---- filters ----------------------------------------------------------------------------------------------------------- */
.lo-filters { flex: none; display: flex; flex-direction: column; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-frow { display: flex; align-items: center; gap: calc(0.12 * var(--ui-unit, 1rem)); flex-wrap: wrap; min-width: 0; }
.lo-chips { display: flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); flex-wrap: wrap; }
.lo-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(0.05 * var(--ui-unit, 1rem));
  min-width: max(calc(0.46 * var(--ui-unit, 1rem)), calc(0.26 * var(--ui-unit, 1rem))); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); padding: 0 calc(0.12 * var(--ui-unit, 1rem));
  font: inherit; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-lo);
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer;
  clip-path: polygon(calc(0.07 * var(--ui-unit, 1rem)) 0, 100% 0, calc(100% - calc(0.07 * var(--ui-unit, 1rem))) 100%, 0 100%);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}
.lo-chip:hover { color: var(--text-hi); border-color: var(--line-3); }
.lo-chip.is-on { color: var(--text-on-mint); background: var(--mint-500); border-color: var(--mint-400); }
.lo-chip--tier .num { font-family: var(--font-num); font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); letter-spacing: .04em; }
.lo-chip--t1 { --tc: var(--tier-1); } .lo-chip--t2 { --tc: var(--tier-2); } .lo-chip--t3 { --tc: var(--tier-3); }
.lo-chip--t4 { --tc: var(--tier-4); } .lo-chip--t5 { --tc: var(--tier-5); } .lo-chip--t6 { --tc: var(--tier-6); }
.lo-chip--tier { color: var(--tc); box-shadow: inset 0 -2px 0 var(--tc); }
.lo-chip--tier.is-on { color: #0b0d0c; background: var(--tc); border-color: var(--tc); }
.lo-chip__icon { width: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); object-fit: contain; }
/* prof.large art is a black glyph on a white square: inverted + screen-blended it becomes a white glyph on any dark
   surface; on the mint "on" chip it is multiplied instead (dark glyph, the square takes the chip colour) */
.lo-profglyph { filter: invert(1); mix-blend-mode: screen; opacity: .85; }
.lo-chip:hover .lo-profglyph { opacity: 1; }
.lo-chip.is-on .lo-profglyph { filter: none; mix-blend-mode: multiply; opacity: 1; }
.lo-chip__lbl { font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }
.lo-search { flex: 1 1 calc(2.6 * var(--ui-unit, 1rem)); min-width: calc(2 * var(--ui-unit, 1rem)); max-width: calc(4.2 * var(--ui-unit, 1rem)); margin-left: auto; }

.lo-select { display: inline-flex; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); padding-left: calc(0.1 * var(--ui-unit, 1rem)); border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
.lo-select__k { font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-dim); letter-spacing: .06em; }
.lo-select select {
  height: 100%; min-width: calc(1.6 * var(--ui-unit, 1rem)); padding: 0 calc(0.26 * var(--ui-unit, 1rem)) 0 calc(0.06 * var(--ui-unit, 1rem)); border: 0; outline: none; cursor: pointer;
  font: inherit; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-hi);
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%234ed8af' d='M7 9l5 6 5-6z'/></svg>") no-repeat right calc(0.04 * var(--ui-unit, 1rem)) center / calc(0.2 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem));
  -webkit-appearance: none; appearance: none;
}
.lo-select select option { background: var(--bg-2); color: var(--text-hi); }
.lo-select:focus-within { border-color: var(--mint-700); }

.lo-toggle {
  display: inline-flex; align-items: center; gap: calc(0.07 * var(--ui-unit, 1rem)); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); padding: 0 calc(0.12 * var(--ui-unit, 1rem));
  font: inherit; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-lo); background: transparent; border: 1px solid transparent; cursor: pointer;
  touch-action: manipulation;
}
.lo-toggle__box { display: grid; place-items: center; width: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); border: 1px solid var(--line-3); }
.lo-toggle__box .icon { width: 86%; height: 86%; opacity: 0; color: var(--text-on-mint); }
.lo-toggle.is-on { color: var(--mint-400); }
.lo-toggle.is-on .lo-toggle__box { background: var(--mint-500); border-color: var(--mint-400); }
.lo-toggle.is-on .lo-toggle__box .icon { opacity: 1; }

/* ---- roster: one list, one row per operator (0.2.2) ------------------------------------------------------------------------ */
/* The quick choices of PR #301 (by @farridge) as ONE list instead of three columns of cards (the owner's decision of
   2026-10-08: 「三个竖排有点乱影响观感」): every row has the same four columns — the operator (portrait, name, bonds), the
   skills, the elite's modules, 潜能 / 练度 — aligned under a sticky head row, so the eye runs down a column. Sizes: --q a
   quick button (a skill / module), --art the portrait; a coarse pointer gets 40 px targets. */
.lo-list {
  --q: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); --qg: max(calc(0.05 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); --art: max(calc(0.52 * var(--ui-unit, 1rem)), calc(0.4 * var(--ui-unit, 1rem)));
  --cols: minmax(max(calc(2.2 * var(--ui-unit, 1rem)), calc(1.1 * var(--ui-unit, 1rem))), max(calc(3.2 * var(--ui-unit, 1rem)), calc(2.6 * var(--ui-unit, 1rem)))) calc(3 * var(--q) + 2 * var(--qg)) calc(4 * var(--q) + 3 * var(--qg)) max(calc(2.2 * var(--ui-unit, 1rem)), calc(1.6 * var(--ui-unit, 1rem)));
  flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 0 calc(0.06 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)) 0; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent;
}
.sp-coarse .lo-list { --q: max(calc(0.44 * var(--ui-unit, 1rem)), calc(0.4 * var(--ui-unit, 1rem))); }
.lo-list__head, .lo .lo-card { display: grid; grid-template-columns: var(--cols); justify-content: start; align-items: center; column-gap: max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); }
/* (the head has the rows' box — the same borders, transparent, and padding — so its columns are the rows' to the pixel) */
.lo-list__head {
  position: sticky; top: 0; z-index: 2; padding: calc(0.05 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)) calc(0.05 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem)); border: 1px solid transparent; border-left-width: 3px;
  font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 700; letter-spacing: .12em; color: var(--text-dim);
  background: linear-gradient(180deg, #0d1110 70%, rgba(13, 17, 16, .85)); box-shadow: inset 0 -1px 0 var(--line);
}
.lo-list__h small { margin-left: calc(0.05 * var(--ui-unit, 1rem)); font-weight: 400; letter-spacing: .04em; color: var(--gold-2); opacity: .8; }
.lo-list__rows { display: flex; flex-direction: column; gap: max(calc(0.04 * var(--ui-unit, 1rem)), 3px); padding-top: max(calc(0.05 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); }
.lo-empty { padding: calc(0.4 * var(--ui-unit, 1rem)); text-align: center; font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }

.lo .lo-card {
  --tc: var(--tier-1);
  position: relative; min-width: 0; padding: max(calc(0.05 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))) calc(0.1 * var(--ui-unit, 1rem)) max(calc(0.05 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))) calc(0.07 * var(--ui-unit, 1rem));
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-left: 3px solid var(--tc);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lo-card--t1 { --tc: var(--tier-1); } .lo-card--t2 { --tc: var(--tier-2); } .lo-card--t3 { --tc: var(--tier-3); }
.lo-card--t4 { --tc: var(--tier-4); } .lo-card--t5 { --tc: var(--tier-5); } .lo-card--t6 { --tc: var(--tier-6); }
.lo .lo-card:hover { background: rgba(255, 255, 255, .045); border-color: var(--line-3); border-left-color: var(--tc); }
.lo .lo-card.is-sel { background: linear-gradient(90deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02) 60%); border-color: var(--mint-700); border-left-color: var(--tc); box-shadow: 0 0 0 1px var(--mint-500) inset; }
.lo-card button:focus-visible, .lo-card select:focus-visible { outline: 2px solid var(--mint-400); outline-offset: 1px; }
.lo-card__pick { display: flex; align-items: center; gap: max(calc(0.1 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem))); min-width: 0; padding: 0; font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
.lo-card__art { position: relative; flex: none; width: var(--art); height: var(--art); overflow: hidden; background: #1b201e; border: 1px solid var(--line-2); }
.lo-card__art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-card__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: max(calc(.24 * var(--utility-text, var(--t))), calc(0.16 * var(--ui-unit, 1rem))); font-weight: 900; color: var(--text-dim); }
.lo-card__tier { position: absolute; left: 1px; top: 1px; z-index: 1; transform-origin: 0 0; transform: scale(.8); }
.lo-card__id { display: flex; flex-direction: column; gap: max(calc(0.03 * var(--ui-unit, 1rem)), 2px); min-width: 0; }
.lo-card__name { font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-card__bonds { display: flex; flex-wrap: wrap; gap: max(calc(0.04 * var(--ui-unit, 1rem)), 3px); min-height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); }
.lo-card__bond, .lo-card__bonds .lo-bond__dot { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); object-fit: contain; }
.lo-card__flag { position: absolute; right: 0; top: 0; z-index: 1; width: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))); height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))); background: linear-gradient(225deg, var(--mint-400) 50%, transparent 50%); pointer-events: none; }
/* 0.2.0 补位: a chess marked 未持有 on the 干员持有 tab — its stand-in fights with a fixed skill and no 潜能 / 练度; the choices
   here apply once it is owned again */
.lo-card__sub { align-self: flex-start; padding: 0 calc(0.04 * var(--ui-unit, 1rem)); font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); font-weight: 700; line-height: 1.4; color: var(--ice-900); background: var(--ice); }
.lo .lo-card.is-standin .lo-card__skills, .lo .lo-card.is-standin .lo-card__mods, .lo .lo-card.is-standin .lo-cult { opacity: .55; }
.lo-locknote--standin { color: var(--ice); }

.lo-card__skills, .lo-card__mods { display: flex; align-items: center; gap: var(--qg); min-width: 0; }
.lo-card__mods { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.lo-q {
  position: relative; flex: none; display: grid; place-items: center; width: var(--q); height: var(--q); padding: 0;
  font: inherit; color: var(--text-lo); background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.lo-q--empty { border: 1px dashed rgba(255, 255, 255, .07); cursor: default; }
.lo-q:not(.is-on):not(.lo-q--empty) { opacity: .62; }
.lo-q:not(.is-on):not(.lo-q--empty):hover { opacity: 1; }
.lo-q__type { position: absolute; left: 0; bottom: 0; padding: 0 2px; font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); line-height: 1.3; color: var(--text-hi); background: rgba(0, 0, 0, .7); pointer-events: none; }
.lo-q--mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 calc(0.08 * var(--ui-unit, 1rem)) rgba(255, 198, 0, .35); }

/* 潜能 / 练度 (screens/cultivation.js): two compact selects side by side in the row's last column; at the defaults (潜能 6,
   精英2 Lv.60 — the same on every row) they stay quiet, a changed one is mint */
.lo-cult { display: flex; align-items: center; gap: max(calc(0.04 * var(--ui-unit, 1rem)), 3px); min-width: 0; }
.lo .lo-cult .lo-select { min-height: 0; height: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); padding-left: 0; border-color: transparent; background: rgba(255, 255, 255, .03); }
.lo .lo-cult .lo-select:hover, .lo .lo-cult .lo-select:focus-within { border-color: var(--line-3); }
.lo .lo-cult .lo-select select { width: 100%; min-width: 0; padding: 0 max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))) 0 max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-cult__pot { flex: 0 0 auto; }
.lo-cult__tier { flex: 1 1 auto; min-width: 0; }
.lo .lo-cult .lo-select.is-off { border-color: var(--mint-700); background: rgba(78, 216, 175, .08); }
.lo .lo-cult .lo-select.is-off select { color: var(--mint-400); font-weight: 700; }
.sp-coarse .lo .lo-cult .lo-select { height: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); }

/* the detail's 潜能 / 练度 section */
.lo-sec--cult { padding: calc(0.08 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)); margin-bottom: calc(0.14 * var(--ui-unit, 1rem)); background: rgba(0, 0, 0, .22); border: 1px solid var(--line); border-left: 3px solid var(--mint-500); }
.lo-sec--cult .lo-sec__head .lo-badge { margin-left: auto; }
.lo-cult__row { display: grid; grid-template-columns: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem))) minmax(0, 1fr); align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-cult__k { font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-dim); letter-spacing: .08em; }
.lo .lo-cult__row .lo-seg { margin-left: 0; flex-wrap: wrap; justify-self: start; }
.lo-seg--pot button { min-width: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.26 * var(--ui-unit, 1rem))); font-family: var(--font-num); }
.lo-seg--tier button { padding: 0 calc(0.1 * var(--ui-unit, 1rem)); }
.lo-cult__eff { margin: calc(0.02 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.5; color: var(--text-md); }
.lo-cult__eff b { color: var(--mint-400); margin-right: calc(0.04 * var(--ui-unit, 1rem)); }
.lo-cult__note { margin: 0; font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); line-height: 1.5; color: var(--text-dim); }
.lo-sec--cult.is-moot .lo-cult__row, .lo-sec--cult.is-moot .lo-cult__eff { opacity: .55; }
.lo-sec--cult.is-moot .lo-cult__note { color: var(--ice); }

/* ---- skill icon / module glyph ---------------------------------------------------------------------------------------------- */
.lo-sicon { position: relative; flex: none; display: inline-grid; place-items: center; width: calc(0.72 * var(--ui-unit, 1rem)); height: calc(0.72 * var(--ui-unit, 1rem)); background: #151a18; border: 1px solid var(--line-2); }
.lo-sicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-sicon--xs { width: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); height: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); border: 0; background: transparent; }
.lo-sicon--xs .lo-sicon__glyph { display: none; }
.lo-sicon--md { width: max(calc(0.72 * var(--ui-unit, 1rem)), calc(0.38 * var(--ui-unit, 1rem))); height: max(calc(0.72 * var(--ui-unit, 1rem)), calc(0.38 * var(--ui-unit, 1rem))); }
.lo-sicon--q { width: 86%; height: 86%; }
.lo-sicon__glyph { font-family: var(--font-num); font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-lo); letter-spacing: .04em; }
.lo-sicon.is-on { border-color: #1ea0ff; }
/* the selected skill's frame (a 30 × 30 sprite, a 3 px ring to its edges) drawn .05rem outside the icon on every side, square:
   theme.css `img { max-width: 100% }` clamped its width to the icon's while its height grew by .1rem, and `.lo-sicon img`
   (more specific) made it `cover` — a tall, left-shifted frame with clipped side lines (GitHub #398, PR #399) */
.lo-sicon .lo-sicon__outline { position: absolute; inset: calc(-0.05 * var(--ui-unit, 1rem)); width: calc(100% + calc(0.1 * var(--ui-unit, 1rem))) !important; height: calc(100% + calc(0.1 * var(--ui-unit, 1rem))) !important; max-width: none; object-fit: fill; pointer-events: none; }
.lo-sicon__ring { position: absolute; inset: calc(-0.05 * var(--ui-unit, 1rem)); border: 2px solid #1ea0ff; pointer-events: none; }

.lo-mglyph { position: relative; flex: none; display: inline-grid; place-items: center; width: max(calc(0.56 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem))); height: max(calc(0.56 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem)));
  background: linear-gradient(180deg, #2a322f, #151a18); border: 1px solid var(--line-3); }
.lo-mglyph img { width: 78%; height: 78%; object-fit: contain; }
.lo-mglyph__t { font-family: var(--font-num); font-size: max(calc(.26 * var(--utility-text, var(--t))), calc(0.15 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--gold-2); line-height: 1; }
.lo-mglyph--none { background: #121615; border-style: dashed; }
.lo-mglyph--q { width: 86%; height: 86%; }
.lo-mglyph__slash { position: absolute; inset: 22%; border-radius: 50%; border: 2px solid var(--text-dim); }
.lo-mglyph__slash::after { content: ''; position: absolute; left: 50%; top: -10%; bottom: -10%; width: 2px; background: var(--text-dim); transform: translateX(-50%) rotate(45deg); }

/* ---- detail panel -------------------------------------------------------------------------------------------------------- */
.lo-detail {
  --bk-c: var(--mint-500);
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(24, 30, 28, .97), rgba(10, 13, 12, .98));
  border: 1px solid var(--line-2); box-shadow: 0 calc(0.14 * var(--ui-unit, 1rem)) calc(0.4 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .45);
}
.lo-detail--empty { align-items: center; justify-content: center; font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo-dhead { position: relative; flex: none; display: grid; grid-template-columns: max(calc(1.3 * var(--ui-unit, 1rem)), calc(0.6 * var(--ui-unit, 1rem))) minmax(0, 1fr); gap: calc(0.16 * var(--ui-unit, 1rem)); padding: calc(0.16 * var(--ui-unit, 1rem)) calc(0.18 * var(--ui-unit, 1rem)) calc(0.14 * var(--ui-unit, 1rem)); border-bottom: 1px solid var(--line); }
.lo-dhead__art { position: relative; overflow: hidden; aspect-ratio: 1 / 1.25; background: #1b201e; border: 1px solid var(--line-2); box-shadow: inset 0 -3px 0 var(--tc, var(--tier-1)); }
.lo-dhead__art--t1 { --tc: var(--tier-1); } .lo-dhead__art--t2 { --tc: var(--tier-2); } .lo-dhead__art--t3 { --tc: var(--tier-3); }
.lo-dhead__art--t4 { --tc: var(--tier-4); } .lo-dhead__art--t5 { --tc: var(--tier-5); } .lo-dhead__art--t6 { --tc: var(--tier-6); }
.lo-dhead__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.lo-dhead__art .uthumb { width: 100%; height: 100%; }
.lo-dhead__info { min-width: 0; display: flex; flex-direction: column; gap: calc(0.04 * var(--ui-unit, 1rem)); }
.lo-dhead__chips { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-dhead__name { margin: calc(0.02 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(.34 * var(--utility-text, var(--t))), calc(0.17 * var(--ui-unit, 1rem))); font-weight: 900; letter-spacing: .06em; line-height: 1.1; }
.lo-dhead__en { font-family: var(--font-display); font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
.lo-dhead__class { display: flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); }
.lo-dhead__prof { width: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); height: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); object-fit: contain; }
.lo-sep { width: 1px; height: calc(0.16 * var(--ui-unit, 1rem)); background: var(--line-3); margin: 0 calc(0.04 * var(--ui-unit, 1rem)); }
.lo-dhead__bonds { display: flex; flex-wrap: wrap; gap: calc(0.05 * var(--ui-unit, 1rem)); margin-top: calc(0.02 * var(--ui-unit, 1rem)); }
.lo-bond { display: inline-flex; align-items: center; gap: calc(0.04 * var(--ui-unit, 1rem)); padding: calc(0.01 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem)) calc(0.01 * var(--ui-unit, 1rem)) calc(0.04 * var(--ui-unit, 1rem)); font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-md); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.lo-bond__icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); object-fit: contain; }
.lo-bond__dot { width: calc(0.1 * var(--ui-unit, 1rem)); height: calc(0.1 * var(--ui-unit, 1rem)); border-radius: 50%; background: var(--mint-700); }
.lo-dhead__reset { position: absolute; right: calc(0.12 * var(--ui-unit, 1rem)); top: calc(0.12 * var(--ui-unit, 1rem)); }

.lo-detail__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(0.12 * var(--ui-unit, 1rem)) calc(0.18 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)); scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.lo-garrisons { margin-bottom: calc(0.18 * var(--ui-unit, 1rem)); }
.lo-garrisons .dgarrison__k { font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo-garrisons .dgarrison__type { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }
.lo-garrisons .dgarrison__icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); }
.lo-garrisons .dgarrison__text { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo-sec { display: flex; flex-direction: column; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-sec + .lo-sec { margin-top: calc(0.18 * var(--ui-unit, 1rem)); }
.lo-sec__head { display: flex; align-items: center; gap: calc(0.12 * var(--ui-unit, 1rem)); min-height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); }
.lo-sec__head h3 { display: flex; align-items: baseline; gap: calc(0.08 * var(--ui-unit, 1rem)); margin: 0; font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 900; letter-spacing: .1em; }
.lo-sec__head h3::before { content: ''; align-self: center; width: calc(0.05 * var(--ui-unit, 1rem)); height: calc(0.2 * var(--ui-unit, 1rem)); background: var(--mint-500); }
.lo-sec__note { margin-left: auto; font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-dim); }
.lo-sec__note b { color: var(--text-md); }

.lo-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--line-2); }
.lo-seg button {
  height: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); padding: 0 calc(0.12 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo);
  background: transparent; border: 0; cursor: pointer; touch-action: manipulation;
}
.lo-seg button + button { border-left: 1px solid var(--line-2); }
.lo-seg button.is-on { color: var(--text-on-mint); background: var(--mint-500); }
.lo-seg button:disabled { opacity: .4; cursor: default; }

/* skills */
.lo-skills { display: flex; flex-direction: column; gap: calc(0.07 * var(--ui-unit, 1rem)); }
.lo-skill {
  position: relative; display: flex; align-items: flex-start; gap: calc(0.14 * var(--ui-unit, 1rem)); width: 100%; padding: calc(0.1 * var(--ui-unit, 1rem)) calc(0.12 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)) calc(0.16 * var(--ui-unit, 1rem));
  font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}
.lo-skill:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.lo-skill.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(30, 160, 255, .13), rgba(30, 160, 255, .02) 70%); border-color: rgba(30, 160, 255, .55); }
.lo-skill__deco { position: absolute; left: -1px; top: 50%; transform: translate(-40%, -50%); width: calc(0.14 * var(--ui-unit, 1rem)); height: calc(0.17 * var(--ui-unit, 1rem)); }
.lo-skill__deco img, .lo-skill__deco i { display: block; width: 100%; height: 100%; }
.lo-skill__deco i { background: #1ea0ff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lo-skill__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(0.05 * var(--ui-unit, 1rem)); }
.lo-skill__head { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); flex-wrap: wrap; }
.lo-skill__slot { font-family: var(--font-num); font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-dim); padding: 0 calc(0.05 * var(--ui-unit, 1rem)); border: 1px solid var(--line-2); letter-spacing: .06em; }
.lo-skill.is-on .lo-skill__slot { color: #7cc8ff; border-color: rgba(30, 160, 255, .55); }
.lo-skill__name { font-size: max(calc(.19 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-hi); }
.lo-skill__tags { display: flex; flex-wrap: wrap; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); }
.lo-skill__desc { display: block; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.55; color: var(--text-md); }
.lo-sp { padding: calc(0.01 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem)); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 700; color: #0b0d0c; background: #9bd26b; }
.lo-sp--atk { background: #ff9a3c; }
.lo-sp--def { background: #f5c542; }
.lo-sp--passive { background: #9aa4a0; }
.lo-tag { font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-tag b { color: var(--text-hi); font-family: var(--font-num); margin-left: calc(0.02 * var(--ui-unit, 1rem)); }

.lo-badge { display: inline-flex; align-items: center; gap: calc(0.03 * var(--ui-unit, 1rem)); padding: calc(0.01 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem)); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 700; line-height: 1.4; letter-spacing: .04em; white-space: nowrap; }
.lo-badge .icon { width: calc(0.13 * var(--ui-unit, 1rem)); height: calc(0.13 * var(--ui-unit, 1rem)); }
.lo-badge--def { color: var(--gold-2); border: 1px solid rgba(242, 189, 62, .55); }
.lo-badge--on { color: #0b1a26; background: #1ea0ff; }
.lo-badge--changed { color: var(--text-on-mint); background: var(--mint-500); }
.lo-badge--plain { color: var(--text-dim); border: 1px solid var(--line-2); }

/* modules */
.lo-mods { display: flex; flex-wrap: wrap; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-mod {
  position: relative; flex: 1 1 calc(1.9 * var(--ui-unit, 1rem)); min-width: calc(1.7 * var(--ui-unit, 1rem)); max-width: calc(3.2 * var(--ui-unit, 1rem)); display: flex; align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); padding: calc(0.08 * var(--ui-unit, 1rem)) calc(0.12 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem));
  font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line);
  transition: background var(--t-fast), border-color var(--t-fast); touch-action: manipulation;
}
.lo-mod:hover { border-color: var(--line-3); }
.lo-mod.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(242, 189, 62, .14), rgba(242, 189, 62, .02) 75%); border-color: rgba(242, 189, 62, .7); }
.lo-mod.is-on .lo-mglyph { border-color: var(--gold-2); box-shadow: 0 0 calc(0.1 * var(--ui-unit, 1rem)) rgba(255, 198, 0, .35); }
.lo-mod__text { min-width: 0; display: flex; flex-direction: column; gap: calc(0.01 * var(--ui-unit, 1rem)); }
.lo-mod__type { font-family: var(--font-num); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); letter-spacing: .1em; color: var(--text-dim); }
.lo-mod__name { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-mod__def { position: absolute; right: calc(0.04 * var(--ui-unit, 1rem)); top: calc(0.04 * var(--ui-unit, 1rem)); }

.lo-minfo { margin-top: calc(0.04 * var(--ui-unit, 1rem)); padding: calc(0.1 * var(--ui-unit, 1rem)) calc(0.12 * var(--ui-unit, 1rem)); display: flex; flex-direction: column; gap: calc(0.07 * var(--ui-unit, 1rem)); background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 3px solid var(--gold-2); }
.lo-minfo--none { border-left-color: var(--line-3); }
.lo-minfo__lead { margin: 0; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-minfo__title { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo-minfo__type { font-family: var(--font-num); font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--gold-2); letter-spacing: .1em; }
.lo-minfo__icon { flex: none; width: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); height: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); object-fit: contain; }
.lo-minfo__row { display: grid; grid-template-columns: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))) minmax(0, 1fr); gap: calc(0.08 * var(--ui-unit, 1rem)); align-items: baseline; }
.lo-minfo__k { font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-dim); letter-spacing: .08em; }
.lo-minfo__v { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.55; color: var(--text-md); }
.lo-minfo__tname { color: var(--text-hi); margin-right: calc(0.06 * var(--ui-unit, 1rem)); }
.lo-attrs { display: flex; flex-wrap: wrap; gap: calc(0.06 * var(--ui-unit, 1rem)); }
.lo-attr { display: inline-flex; align-items: baseline; gap: calc(0.04 * var(--ui-unit, 1rem)); padding: calc(0.01 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem)); background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-attr b { font-family: var(--font-num); font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }
.lo-attr.is-up b { color: var(--mint-400); }
.lo-attr.is-down b { color: var(--red-premium); }

/* 局内数值 (the chosen variant's stats, 攻击范围, 特性 and 天赋 — GitHub issue #64): the detail card's own block
   (ui/detailPanel.js chessStatsBlock: .dstats / .dstat / .drange / .rgrid / .rgrid-all from game-panels.css, drawn there in
   board-sized units) at this screen's reading sizes — a px floor on every text size (1 rem is 40 px on phones), the range box
   dropping under the numbers when the column is too narrow for both */
.lo-sec--stats .dstats-wrap { flex-wrap: wrap; gap: calc(0.1 * var(--ui-unit, 1rem)); }
.lo-sec--stats .dstats-wrap > .dstats { flex: 1 1 max(calc(3.2 * var(--ui-unit, 1rem)), calc(1.9 * var(--ui-unit, 1rem))); }
.lo-sec--stats .dstat { padding: calc(0.05 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem)); }
.lo-sec--stats .dstat__k { font-size: max(calc(0.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); }
.lo-sec--stats .dstat__v { font-size: max(calc(0.2 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
.lo-sec--stats .drange { min-width: max(calc(1.1 * var(--ui-unit, 1rem)), calc(0.56 * var(--ui-unit, 1rem))); }
.lo-sec--stats .rgrid { --rg: max(calc(0.14 * var(--ui-unit, 1rem)), calc(0.07 * var(--ui-unit, 1rem))); } /* (a grid wider than the box keeps its inline, shrunk --rg) */
.lo-sec--stats .rgrid-all { font-size: max(calc(0.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo-minfo--kit { margin-top: 0; border-left-color: var(--mint-500); }
.lo-stats__cap { margin: 0; font-size: max(calc(0.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); line-height: 1.5; color: var(--text-dim); }
.lo-locknote { display: flex; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); margin: calc(0.16 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--amber); }
.lo-locknote .icon { width: calc(0.16 * var(--ui-unit, 1rem)); height: calc(0.16 * var(--ui-unit, 1rem)); }

/* ---- tabs: 干员调配 / 干员持有 (0.2.0 补位) ---------------------------------------------------------------------------- */
.lo-tabs { display: flex; align-items: stretch; gap: calc(0.04 * var(--ui-unit, 1rem)); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lo-tab {
  display: inline-flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); padding: calc(0.02 * var(--ui-unit, 1rem)) calc(0.16 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(.24 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 900;
  letter-spacing: .12em; line-height: 1.2; color: var(--text-lo); background: transparent; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  touch-action: manipulation; white-space: nowrap;
}
.lo-tab .lo-top__icon { width: max(calc(0.24 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.24 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); }
.lo-tab:hover { color: var(--text-hi); }
.lo-tab.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }
.lo-tab__n { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; font-size: .62em; font-weight: 700; letter-spacing: 0; color: var(--ice-900); background: var(--ice); border-radius: 1em; }

/* ---- 干员持有 (screens/ownership.js): the NORMAL chess by tier, each operator → its stand-in, a 持有 switch -------------- */
.own { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(0.12 * var(--ui-unit, 1rem)); padding: calc(0.16 * var(--ui-unit, 1rem)) calc(0.3 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)); }
.own__bar { flex: none; display: flex; align-items: center; gap: calc(0.2 * var(--ui-unit, 1rem)); }
.own__lead { flex: 1; margin: 0; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); line-height: 1.5; color: var(--text-md); }
.own__lead b { color: var(--ice); font-weight: 700; }
.own__list { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(0.18 * var(--ui-unit, 1rem)); padding: 0 calc(0.06 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)) 0;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.own-tier__head { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); margin: 0 0 calc(0.08 * var(--ui-unit, 1rem)); font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-md); letter-spacing: .06em; }
.own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(4.4 * var(--ui-unit, 1rem)), calc(2.7 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.08 * var(--ui-unit, 1rem)); }
.own-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); min-width: 0;
  padding: calc(0.07 * var(--ui-unit, 1rem)) calc(0.1 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem)) calc(0.07 * var(--ui-unit, 1rem)); font: inherit; color: var(--text-hi); text-align: left; cursor: pointer; touch-action: manipulation;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line-3));
  transition: background var(--t-fast), border-color var(--t-fast);
}
.own-card--t1 { --tc: var(--tier-1); } .own-card--t2 { --tc: var(--tier-2); } .own-card--t3 { --tc: var(--tier-3); }
.own-card--t4 { --tc: var(--tier-4); } .own-card--t5 { --tc: var(--tier-5); } .own-card--t6 { --tc: var(--tier-6); }
.own-card:hover { background: rgba(255, 255, 255, .06); border-color: var(--line-3); }
.own-card__op, .own-card__sub { display: flex; align-items: center; gap: calc(0.07 * var(--ui-unit, 1rem)); min-width: 0; }
.own-card__ava { flex: none; display: grid; place-items: center; width: max(calc(0.46 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); height: max(calc(0.46 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.own-card__ava img { width: 100%; height: 100%; object-fit: cover; }
.own-card__ava b { font-size: max(calc(.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.own-card__txt { display: flex; flex-direction: column; min-width: 0; }
.own-card__name { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-card__txt small { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.own-card__arrow .icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); color: var(--text-dim); }
.own-card__sub { opacity: .55; }
.own-card__state { display: inline-flex; flex-direction: column; align-items: center; gap: calc(0.03 * var(--ui-unit, 1rem)); min-width: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem))); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--mint-400); white-space: nowrap; }
.own-switch { position: relative; display: inline-block; width: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); height: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))); border-radius: 1em; background: var(--mint-700); }
.own-switch > i { position: absolute; top: 2px; right: 2px; width: calc(max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))) - calc(0.04 * var(--ui-unit, 1rem))); height: calc(max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.13 * var(--ui-unit, 1rem))) - calc(0.04 * var(--ui-unit, 1rem))); border-radius: 50%; background: #fff; transition: right var(--t-fast), left var(--t-fast); }
/* 未持有: the operator greys out, the stand-in (who is deployed) lights up */
.own-card.is-off { background: rgba(159, 212, 255, .07); border-color: rgba(159, 212, 255, .35); }
.own-card.is-off .own-card__op { opacity: .5; filter: grayscale(.8); }
.own-card.is-off .own-card__sub { opacity: 1; }
.own-card.is-off .own-card__sub .own-card__ava { border-color: var(--ice); }
.own-card.is-off .own-card__state { color: var(--ice); }
.own-card.is-off .own-switch { background: var(--bg-4); }
.own-card.is-off .own-switch > i { right: auto; left: 2px; background: var(--ice); }

/* ---- 自选编队 (screens/diy.js): four DIY slots by tier, the slot picker (operator list + skill / module) --------------- */
.diy { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(0.12 * var(--ui-unit, 1rem)); padding: calc(0.16 * var(--ui-unit, 1rem)) calc(0.3 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)); }
.diy__body { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: calc(0.18 * var(--ui-unit, 1rem)); padding: 0 calc(0.06 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)) 0;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.diy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(calc(5.2 * var(--ui-unit, 1rem)), calc(3 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.1 * var(--ui-unit, 1rem)); }
.diy-slot {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: calc(0.1 * var(--ui-unit, 1rem)); align-items: start; min-width: 0;
  padding: calc(0.08 * var(--ui-unit, 1rem)); background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-left: 3px solid var(--tc, var(--line-3));
}
.diy-slot--t5 { --tc: var(--tier-5); } .diy-slot--t6 { --tc: var(--tier-6); }
.diy-slot.is-empty { display: flex; flex-direction: column; padding: 0; border-style: dashed; border-left-style: solid; }
.diy-slot__fill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(0.05 * var(--ui-unit, 1rem)); width: 100%; min-height: max(calc(1.3 * var(--ui-unit, 1rem)), calc(0.84 * var(--ui-unit, 1rem)));
  padding: calc(0.1 * var(--ui-unit, 1rem)); font: inherit; color: var(--text-md); background: none; border: 0; cursor: pointer; touch-action: manipulation;
}
.diy-slot__fill:hover { background: rgba(255, 255, 255, .05); color: var(--text-hi); }
.diy-slot__fill b { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.diy-slot__fill small { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-slot__plus { display: grid; place-items: center; width: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.26 * var(--ui-unit, 1rem))); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.26 * var(--ui-unit, 1rem))); border: 1px solid var(--line-3); border-radius: 50%; }
.diy-slot__plus .icon { width: 60%; height: 60%; }
.diy-slot__art { display: grid; place-items: center; width: max(calc(0.9 * var(--ui-unit, 1rem)), calc(0.56 * var(--ui-unit, 1rem))); height: max(calc(1.3 * var(--ui-unit, 1rem)), calc(0.84 * var(--ui-unit, 1rem))); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-slot__art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.diy-slot__art b { font-size: max(calc(.3 * var(--utility-text, var(--t))), calc(0.18 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-slot__body { display: flex; flex-direction: column; gap: calc(0.03 * var(--ui-unit, 1rem)); min-width: 0; }
.diy-slot__head { display: flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); }
.diy-slot__label { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); letter-spacing: .06em; }
.diy-slot__name { font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-slot__class { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-slot__kit { display: flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); min-width: 0; font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-md); }
.diy-slot__kit > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-slot__sicon, .diy-slot__micon { flex: none; display: inline-grid; place-items: center; width: max(calc(0.24 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); height: max(calc(0.24 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); object-fit: contain; font-size: .8em; color: var(--text-lo); }
.diy-slot__micon--none { border: 1px solid var(--line-2); }
.diy-slot__acts { display: flex; flex-direction: column; gap: calc(0.04 * var(--ui-unit, 1rem)); }
/* 0.2.2: an owned pick's 潜能 / 练度 (screens/cultivation.js) — a prototype has neither (a dim line instead) */
.diy-slot__cult { display: block; margin-top: calc(0.03 * var(--ui-unit, 1rem)); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); }
.diy-slot__cult .lo-cult { max-width: max(calc(2.6 * var(--ui-unit, 1rem)), calc(2 * var(--ui-unit, 1rem))); }
.diy-slot__bad { display: flex; align-items: center; gap: calc(0.04 * var(--ui-unit, 1rem)); margin: calc(0.02 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--amber); }
.diy-slot.is-bad { border-color: rgba(255, 196, 0, .45); }
.diy-tag { display: inline-flex; align-items: center; height: 1.5em; padding: 0 .4em; font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); font-weight: 700; border-radius: 1em; white-space: nowrap; }
.diy-tag--proto { color: var(--ice-900); background: var(--ice); }
.diy-tag--own { color: var(--text-on-mint); background: var(--mint-500); }
.diy-bonds { display: flex; flex-wrap: wrap; gap: calc(0.03 * var(--ui-unit, 1rem)) calc(0.06 * var(--ui-unit, 1rem)); }
.diy-bond { display: inline-flex; align-items: center; gap: calc(0.03 * var(--ui-unit, 1rem)); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-md); }
.diy-bond .bglyph, .diy-bond img { width: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); height: max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); }
/* the picker covers the tab: the list of the slot's tier on the left, the chosen operator's skill / module on the right */
.diy-pick { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: calc(0.08 * var(--ui-unit, 1rem)); padding: calc(0.12 * var(--ui-unit, 1rem)) calc(0.3 * var(--ui-unit, 1rem)) calc(0.14 * var(--ui-unit, 1rem)); background: var(--bg-1, #0d1110); }
.diy-pick__head { flex: none; display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.diy-pick__note { flex: 1; min-width: 0; font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-pick__x { display: grid; place-items: center; width: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); color: var(--text-md); background: none; border: 1px solid var(--line-2); cursor: pointer; }
.diy-pick__bar { flex: none; display: flex; align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); flex-wrap: wrap; }
.diy-pick__search { flex: 1 1 calc(2 * var(--ui-unit, 1rem)); min-width: calc(1.2 * var(--ui-unit, 1rem)); height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.26 * var(--ui-unit, 1rem))); padding: 0 calc(0.08 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-hi); background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); }
.diy-pick__main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: calc(0.12 * var(--ui-unit, 1rem)); }
.diy-pick__list, .diy-pick__detail { min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.diy-pick__list { display: grid; grid-template-columns: 1fr; align-content: start; gap: calc(0.06 * var(--ui-unit, 1rem)); }
.diy-opt {
  position: relative; display: flex; align-items: center; gap: calc(0.07 * var(--ui-unit, 1rem)); min-width: 0; padding: calc(0.06 * var(--ui-unit, 1rem)); font: inherit; color: var(--text-hi); text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; touch-action: manipulation;
}
.diy-opt:hover { background: rgba(255, 255, 255, .06); }
.diy-opt.is-sel { border-color: var(--mint-500); background: rgba(52, 211, 153, .08); }
.diy-opt.is-taken { opacity: .45; cursor: not-allowed; }
.diy-opt__ava { flex: none; display: grid; place-items: center; width: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); height: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-opt__ava img { width: 100%; height: 100%; object-fit: cover; }
.diy-opt__txt { display: flex; flex-direction: column; gap: calc(0.02 * var(--ui-unit, 1rem)); min-width: 0; }
.diy-opt__top { display: flex; align-items: center; gap: calc(0.04 * var(--ui-unit, 1rem)); min-width: 0; }
.diy-opt__name { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.diy-opt__class { display: inline-flex; align-items: center; gap: calc(0.03 * var(--ui-unit, 1rem)); font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-opt__prof { width: max(calc(0.14 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))); height: max(calc(0.14 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))); }
.diy-opt__taken { position: absolute; right: calc(0.04 * var(--ui-unit, 1rem)); bottom: calc(0.03 * var(--ui-unit, 1rem)); font-size: max(calc(.1 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); color: var(--amber); }
.diy-pick__detail { display: flex; flex-direction: column; gap: calc(0.06 * var(--ui-unit, 1rem)); padding: calc(0.06 * var(--ui-unit, 1rem)); background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.diy-pick__who { display: flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.diy-pick__ava { display: grid; place-items: center; width: max(calc(0.6 * var(--ui-unit, 1rem)), calc(0.4 * var(--ui-unit, 1rem))); height: max(calc(0.6 * var(--ui-unit, 1rem)), calc(0.4 * var(--ui-unit, 1rem))); overflow: hidden; background: #0a0d0c; border: 1px solid var(--line-2); }
.diy-pick__ava img { width: 100%; height: 100%; object-fit: cover; }
.diy-pick__wtxt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.diy-pick__wtxt b { font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
.diy-pick__wtxt small { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-pick__sec { display: flex; align-items: baseline; gap: calc(0.06 * var(--ui-unit, 1rem)); margin: calc(0.04 * var(--ui-unit, 1rem)) 0 0; font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); }
.diy-pick__sec small { font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); color: var(--text-lo); font-weight: 400; }
.diy-pick__choices { display: flex; flex-direction: column; gap: calc(0.04 * var(--ui-unit, 1rem)); }
.diy-choice {
  display: flex; align-items: flex-start; gap: calc(0.07 * var(--ui-unit, 1rem)); padding: calc(0.05 * var(--ui-unit, 1rem)); font: inherit; color: var(--text-hi); text-align: left;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line); cursor: pointer; touch-action: manipulation;
}
.diy-choice:disabled { cursor: default; }
.diy-choice.is-on { border-color: var(--mint-500); background: rgba(52, 211, 153, .08); }
.diy-choice__icon { flex: none; display: grid; place-items: center; width: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.diy-choice__icon img { width: 100%; height: 100%; object-fit: contain; }
.diy-choice__body { display: flex; flex-direction: column; gap: calc(0.02 * var(--ui-unit, 1rem)); min-width: 0; }
.diy-choice__head { display: flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); flex-wrap: wrap; font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }
.diy-choice__desc { font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); line-height: 1.45; color: var(--text-md); }
.diy-pick__foot { flex: none; display: flex; justify-content: flex-end; gap: calc(0.08 * var(--ui-unit, 1rem)); }
/* 0.2.0 自选编队: the slots the player filled (the entry button's chip) */
.lo-entry__diy { color: var(--text-on-mint); background: var(--mint-500); }

/* ---- entry button (lobby / room / briefing) --------------------------------------------------------------------------- */
.lo-entry { position: relative; gap: calc(0.08 * var(--ui-unit, 1rem)); }
.lo-entry__icon { width: 1.25em; height: 1.25em; object-fit: contain; flex: none; }
.lo-entry__n {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 .3em; margin-left: calc(0.02 * var(--ui-unit, 1rem));
  font-size: .8em; font-weight: 700; color: var(--text-on-mint); background: var(--mint-500); border-radius: 1em;
}
/* 0.2.0 补位: operators marked 未持有 on the 干员持有 tab */
.lo-entry__own { display: inline-flex; align-items: center; gap: .2em; height: 1.5em; padding: 0 .4em; font-size: .75em; font-weight: 700; color: var(--ice-900); background: var(--ice); border-radius: 1em; white-space: nowrap; }

/* Untimed phases (user playtest #11 / #4 item 3: the official 独立模拟 shows no countdown outside combat — the server
   sends deadline 0 for them, Match.soloUntimed): ui/components.js Countdown now renders nothing without a deadline;
   this rule stays as a safety net for the old "无倒计时" placeholder ("--" digits + COUNTDOWN label). */
.countdown[aria-label="无倒计时"] { display: none; }

/* the app screens behind the overlay do not need to animate */
.sp-loadout-open .app-root > .screen { visibility: hidden; }

/* ---- narrow / short viewports ------------------------------------------------------------------------------------------- */
/* tighter tabs below 1200 px: the co-op briefing's countdown, chips and buttons beside three English tabs */
/* phones in landscape (up to 932 px wide): the top bar keeps the tabs clear of the right column — no 已调整 / 同步 chips,
   and 返回 / 全部恢复默认 (全部持有, 全部清空; each confirms first) show their icon only, the text staying their name */
/* phones and small tablets (up to 1000 px wide; 0.2.2 — 760 px before the roster became one list with quick choices): the
   list takes the whole width and the detail slides over it — a row's quick choice keeps the list, its portrait / name
   opens the detail */
/* narrow phones: the row's bonds give their line to the name, the columns keep their place */
/* the shared Button / TextField scale with the root (40 px/rem on phones ⇒ 6–7 px text, 14–20 px tall): the overlay's
   own controls (返回, 全部恢复默认, 恢复默认, the search field) keep a readable size and a tappable height (review fix) */
.lo .lo-back { height: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem))) 0 max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem))); font-size: max(calc(.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
.lo .lo-top__right .btn, .lo .lo-dhead__reset { height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); }
.lo .lo-search .field__box { height: max(calc(0.56 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem))); }
.lo .lo-search .field__input { font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); }
.lo .lo-search .field__icon { width: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); }
.sp-coarse .lo-chip, .sp-coarse .lo-toggle, .sp-coarse .lo-select { min-height: calc(0.3 * var(--ui-unit, 1rem)); }
.sp-coarse .lo-seg button { min-height: calc(0.28 * var(--ui-unit, 1rem)); }
@media (prefers-reduced-motion: reduce) { .lo, .lo .lo-card { animation: none; transition: none; } }

/* 导出 / 导入 (干员调配 presets): the dialog is the shared Modal, rendered NEXT TO `.lo` (a sibling) rather than inside
   it — so components.css `.modal { position: fixed }` and its z-index above the overlay apply as they do everywhere
   else, and `.lo > *` needs no exception for it. Below: the payload textarea + the hidden input behind 选择文件. */
.lo-io__hint { margin: 0 0 max(calc(0.1 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); font-size: max(calc(.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); line-height: 1.55; color: var(--text-md); }
.lo-io__hint b { color: var(--mint-400); font-size: max(calc(.22 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); margin: 0 calc(0.02 * var(--ui-unit, 1rem)); }
.lo-io__hint strong { color: var(--gold); }
.lo-io__text {
  box-sizing: border-box; width: 100%; height: max(calc(2.4 * var(--ui-unit, 1rem)), calc(1.6 * var(--ui-unit, 1rem))); min-height: calc(1.2 * var(--ui-unit, 1rem)); resize: vertical;
  padding: max(calc(0.1 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))) max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.1 * var(--ui-unit, 1rem)));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 16 px: iOS zooms into a focused field below that (same reason as ui/clipboard.js) */
  font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.16 * var(--ui-unit, 1rem))); line-height: 1.45;
  color: var(--text-hi); background: rgba(4, 10, 8, .55);
  border: 1px solid var(--line-2); border-radius: 2px; outline: none;
  /* wrap instead of a horizontal scrollbar: phones are narrow and the payload is meant to be read/copied whole */
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
}
.lo-io__text:focus { border-color: var(--mint-700); }
.lo-io__text::placeholder { color: var(--text-lo); }
.lo-io__file { display: none; }

/* Per-operator voice, a browser-local preference in roster and DIY details. */
.lo-voice { display: flex; flex-wrap: wrap; align-items: center; gap: calc(0.12 * var(--ui-unit, 1rem)); padding: calc(0.14 * var(--ui-unit, 1rem)) 0; font-size: calc(.18 * var(--utility-text, var(--t))); }
.lo-voice > small { flex-basis: 100%; color: var(--text-dim); font-size: calc(.15 * var(--utility-text, var(--t))); }
.lo-voice .lo-select { min-width: calc(1.6 * var(--ui-unit, 1rem)); max-width: 100%; }
.lo-voice__preview { height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.24 * var(--ui-unit, 1rem))); padding: 0 calc(0.12 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(0.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--mint-400); background: transparent; border: 1px solid var(--line-2); cursor: pointer; }
.lo-voice__preview:hover, .lo-voice__preview:focus-visible { border-color: var(--mint-700); }

/* ---- 自选专属皮肤选择网格 (嵌入 DiyPicker) ------------------------------------------------------------- */
.diy-skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(calc(1.8 * var(--ui-unit, 1rem)), calc(1.2 * var(--ui-unit, 1rem))), 1fr));
  gap: max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.05 * var(--ui-unit, 1rem)));
  margin-top: calc(0.04 * var(--ui-unit, 1rem));
}

.diy-skin-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem)));
  padding: max(calc(0.05 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))) max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem)));
  font: inherit;
  color: var(--text-md);
  text-align: left;
  cursor: pointer;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: background var(--t-fast), border-color var(--t-fast);
  touch-action: manipulation;
}

.diy-skin-card:hover { border-color: var(--line-3); background: rgba(255, 255, 255, .06); }

.diy-skin-card.is-on {
  color: var(--text-hi);
  background: linear-gradient(90deg, rgba(78, 216, 175, .2), rgba(78, 216, 175, .06));
  border-color: var(--mint-400);
  box-shadow: 0 0 calc(0.08 * var(--ui-unit, 1rem)) rgba(78, 216, 175, .35);
}

.diy-skin-card__img {
  flex: 0 0 auto;
  width: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem)));
  height: max(calc(0.36 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem)));
  border-radius: 2px;
  background: #0a0d0c;
  border: 1px solid var(--line-2);
  object-fit: cover;
  object-position: center top;
}

.diy-skin-card__img--none {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px calc(0.07 * var(--ui-unit, 1rem)));
}

.diy-skin-card__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.diy-skin-card__name {
  font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem)));
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-hi);
}

.diy-skin-card__tag {
  font-family: var(--font-num);
  font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem)));
  letter-spacing: .04em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.diy-skin-card.is-on .diy-skin-card__tag {
  color: var(--mint-400);
  font-weight: 700;
}
/* DIY uses the same aligned rows and detail sections as operator loadout. */
.diy-pick__list .diy-opt { min-height: calc(0.64 * var(--ui-unit, 1rem)); padding: calc(0.1 * var(--ui-unit, 1rem)); }
.diy-pick__list .diy-opt__txt { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); }
.diy-pick__list .diy-opt__top { flex-wrap: wrap; }
.diy-pick__detail > .lo-sec { flex: none; }

.diy-choice__tags { display: flex; flex-wrap: wrap; gap: calc(0.08 * var(--ui-unit, 1rem)); color: var(--text-lo); font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }

/* ---- 干员皮肤 (docs/SKINS.md, ui/skinPicker.js) --------------------------------------------------------------
   One shared skin card layout; mobile density overrides live in utility-mobile.css.
   Only deployed outfits are offered; no downloader or game-server installation is triggered by clicking a tile. */
.lo-sec--skin > .lo-sec__head { flex-wrap: wrap; }
.lo-skin-status { display: flex; flex-wrap: wrap; align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); }
.lo-skins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(1.8 * var(--ui-unit, 1rem))), 1fr)); gap: calc(0.06 * var(--ui-unit, 1rem)); width: 100%; }
.lo-skin {
  position: relative; flex: none; width: auto; min-width: 0; max-width: none; min-height: calc(0.44 * var(--ui-unit, 1rem)); box-sizing: border-box;
  display: flex; align-items: center; gap: max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.06 * var(--ui-unit, 1rem))); padding: calc(0.04 * var(--ui-unit, 1rem)) calc(0.08 * var(--ui-unit, 1rem)) calc(0.04 * var(--ui-unit, 1rem)) calc(0.04 * var(--ui-unit, 1rem));
  font: inherit; color: var(--text-md); text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .025); border: 1px solid var(--line); border-radius: 2px;
  transition: background var(--t-fast), border-color var(--t-fast); touch-action: manipulation;
}
.lo-skin:hover:not(:disabled) { border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.lo-skin.is-on { color: var(--text-hi); background: linear-gradient(90deg, rgba(78, 216, 175, .14), rgba(78, 216, 175, .02) 75%); border-color: rgba(78, 216, 175, .7); }
.lo-skin:disabled { cursor: default; opacity: .45; }
.lo-skin__art { flex: 0 0 auto; width: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); height: max(calc(0.32 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); display: grid; place-items: center; overflow: hidden; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 2px; }
.lo-skin__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.lo-skin__art--none { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 3px, transparent 3px calc(0.07 * var(--ui-unit, 1rem))); }
.lo-skin__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(0.01 * var(--ui-unit, 1rem)); }
.lo-skin__name { font-size: calc(.16 * var(--utility-text, var(--t))); line-height: 1.2; font-weight: 700; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-skin__group { font-family: var(--font-num); font-size: calc(.12 * var(--utility-text, var(--t))); line-height: 1.2; letter-spacing: .06em; color: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================================
   物资调配处 deck (2026-10-13, the owner's request; js/screens/loadout.js DeckView / OpCard / ItemCodex / DeckBar):
   the 干员调配 tab's default view — tier groups of cards scrolling sideways, a bottom bar (干员 / 道具, tier jumps),
   快速配置 columns beside the cards, the detail in a drawer over the left of the deck, and the equipment codex.
   ========================================================================================== */
.lo-open .community-chat { visibility: hidden; }
.lo--deck {
  --drawer-w: min(calc(6.4 * var(--ui-unit, 1rem)), 92vw);
  --opw: max(calc(2.1 * var(--ui-unit, 1rem)), calc(1 * var(--ui-unit, 1rem)));          /* a card */
  --rail: max(calc(0.44 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem)));          /* its left rail: tier, levels */
  --qw: max(calc(0.9 * var(--ui-unit, 1rem)), calc(0.48 * var(--ui-unit, 1rem)));             /* the 快速配置 column (skills / modules) */
  --qcw: max(calc(1.56 * var(--ui-unit, 1rem)), calc(1.04 * var(--ui-unit, 1rem)));         /* the 快速配置 column (潜能 · 练度) */
  --itw: max(calc(4.3 * var(--ui-unit, 1rem)), calc(2.3 * var(--ui-unit, 1rem)));          /* an equipment tile */
}
.lo--deck .lo__bg {
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(78, 216, 175, .05), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px calc(1.2 * var(--ui-unit, 1rem))),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px calc(1.2 * var(--ui-unit, 1rem))),
    linear-gradient(180deg, #161918, #0c0e0d 70%, #090b0a);
}

/* ---- top bar ---- */
.lo-top--deck { grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr); }
.lo-info { display: grid; place-items: center; width: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); height: max(calc(0.5 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); padding: 0; color: var(--text-hi);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); cursor: pointer; }
.lo-info:hover { border-color: var(--mint-500); color: var(--mint-400); }
.lo-info .icon { width: 56%; height: 56%; }
.lo-top__note { margin: 0; max-width: calc(8.4 * var(--ui-unit, 1rem)); font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-top__note.is-locked { color: var(--amber); }
.lo-tbtn { position: relative; display: inline-flex; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.14 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem)));
  font: inherit; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-md); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-2); cursor: pointer; white-space: nowrap; }
.lo-tbtn:hover, .lo-tbtn.is-on { color: var(--text-hi); border-color: var(--mint-700); }
.lo-tbtn .icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); }
.lo-tbtn__n { min-width: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); padding: 0 3px; font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); text-align: center; color: #04140f; background: var(--mint-500); }
.lo-popwrap { position: relative; }
.lo-pop { position: absolute; top: calc(100% + calc(0.08 * var(--ui-unit, 1rem))); right: 0; z-index: 20; padding: calc(0.14 * var(--ui-unit, 1rem)); background: linear-gradient(180deg, #1d2321, #121615);
  border: 1px solid var(--line-2); box-shadow: 0 calc(0.14 * var(--ui-unit, 1rem)) calc(0.4 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .6); animation: lo-in 140ms var(--ease-out) backwards; }
.lo-pop--filter { width: min(calc(9.4 * var(--ui-unit, 1rem)), calc(100vw - calc(0.24 * var(--ui-unit, 1rem)))); display: flex; flex-direction: column; gap: calc(0.12 * var(--ui-unit, 1rem)); }
.lo-pop__row { display: flex; align-items: center; gap: calc(0.12 * var(--ui-unit, 1rem)); padding-top: calc(0.1 * var(--ui-unit, 1rem)); border-top: 1px solid var(--line); }
.lo-pop__k { font-size: max(calc(.14 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-dim); }
.lo-pop__row .lo-seg { margin: 0; }
.lo-pop__row .lo-tbtn { margin-left: auto; }
.lo-pop--menu { display: flex; flex-direction: column; min-width: max(calc(2.4 * var(--ui-unit, 1rem)), calc(1.5 * var(--ui-unit, 1rem))); padding: calc(0.06 * var(--ui-unit, 1rem)); }
.lo-pop--menu button { display: flex; align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); height: max(calc(0.44 * var(--ui-unit, 1rem)), calc(0.32 * var(--ui-unit, 1rem))); padding: 0 calc(0.14 * var(--ui-unit, 1rem)); font: inherit; font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem)));
  color: var(--text-md); background: none; border: 0; text-align: left; cursor: pointer; }
.lo-pop--menu button:hover:not(:disabled) { color: var(--text-hi); background: rgba(78, 216, 175, .1); }
.lo-pop--menu button:disabled { opacity: .4; cursor: default; }
.lo-pop--menu button.is-danger:hover:not(:disabled) { color: var(--red-premium); background: rgba(255, 84, 84, .1); }
.lo-pop--menu .icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); }
/* 干员持有 (like the event's 选配助战) and 快速配置: two big blocks at the right */
.lo-assist, .lo-quickbtn { display: inline-flex; align-items: stretch; height: max(calc(0.7 * var(--ui-unit, 1rem)), calc(0.4 * var(--ui-unit, 1rem))); padding: 0; font: inherit; border: 0; cursor: pointer; text-align: left; }
.lo-assist__txt, .lo-quickbtn__txt { display: flex; flex-direction: column; justify-content: center; padding: 0 max(calc(0.14 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); line-height: 1.1; }
.lo-assist__icon, .lo-quickbtn__icon { display: grid; place-items: center; width: max(calc(0.62 * var(--ui-unit, 1rem)), calc(0.34 * var(--ui-unit, 1rem))); }
.lo-assist__icon .icon, .lo-quickbtn__icon .icon { width: 58%; height: 58%; }
.lo-assist { color: #052119; background: var(--mint-500); }
.lo-assist:hover { background: var(--mint-400); }
.lo-assist__k { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; }
.lo-assist__v { font-size: max(calc(.22 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 800; }
.lo-assist__icon { margin: calc(0.06 * var(--ui-unit, 1rem)) calc(0.06 * var(--ui-unit, 1rem)) calc(0.06 * var(--ui-unit, 1rem)) 0; color: var(--mint-400); background: #0b1d18; }
.lo-quickbtn { color: #111614; background: #eef1ef; }
.lo-quickbtn:hover:not(:disabled) { background: #fff; }
.lo-quickbtn:disabled { opacity: .45; cursor: default; }
.lo-quickbtn__txt > span { font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 900; letter-spacing: .04em; }
.lo-quickbtn__txt small { font-family: var(--font-display); font-size: max(calc(.09 * var(--utility-text, var(--t))), calc(0.07 * var(--ui-unit, 1rem))); letter-spacing: .14em; color: #8b938f; }
.lo-quickbtn__icon { margin: calc(0.06 * var(--ui-unit, 1rem)) calc(0.06 * var(--ui-unit, 1rem)) calc(0.06 * var(--ui-unit, 1rem)) 0; color: #eef1ef; background: #1a1f1d; }
.lo-qbar__k { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-lo); white-space: nowrap; }
.lo-qseg { display: inline-flex; padding: 3px; background: rgba(0, 0, 0, .45); border: 1px solid var(--line-2); border-radius: calc(9.99 * var(--ui-unit, 1rem)); }
.lo-qseg button { height: max(calc(0.4 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); font: inherit; font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 800; color: var(--text-md);
  background: none; border: 0; border-radius: calc(9.99 * var(--ui-unit, 1rem)); cursor: pointer; white-space: nowrap; }
.lo-qseg button.is-on { color: #111614; background: #eef1ef; }

/* ---- the deck ---- */
.lo-deckwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }
.lo-deck { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: calc(0.34 * var(--ui-unit, 1rem)); padding: calc(0.24 * var(--ui-unit, 1rem)) calc(0.36 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
.lo-deck.is-dragging { cursor: grabbing; user-select: none; }
.lo-deck.is-dragging * { cursor: grabbing !important; }
.lo-deck--empty { align-items: center; justify-content: center; }
.lo-deck.has-drawer { padding-left: calc(var(--drawer-w) + calc(0.3 * var(--ui-unit, 1rem))); scroll-padding-left: calc(var(--drawer-w) + calc(0.2 * var(--ui-unit, 1rem))); }
.lo-tgroup { flex: none; display: flex; align-items: stretch; gap: calc(0.18 * var(--ui-unit, 1rem)); }
.lo-tmark { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: calc(0.04 * var(--ui-unit, 1rem)); width: max(calc(0.86 * var(--ui-unit, 1rem)), calc(0.44 * var(--ui-unit, 1rem)));
  padding: calc(0.12 * var(--ui-unit, 1rem)) 0 calc(0.14 * var(--ui-unit, 1rem)); overflow: hidden; background: linear-gradient(180deg, #2a2f2d, #151918 60%, #101312);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 3px 0 var(--tc), 0 calc(0.06 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .4); }
.lo-tmark__no { font-family: var(--font-display); font-size: max(calc(.1 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); letter-spacing: .12em; color: var(--text-dim); }
.lo-tmark__n { display: grid; place-items: center; width: 76%; aspect-ratio: 1 / 1.3; font-family: var(--font-num); font-size: max(calc(.38 * var(--utility-text, var(--t))), calc(0.2 * var(--ui-unit, 1rem))); font-weight: 900;
  line-height: 1; color: var(--tc); border: 1px solid rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .35); }
.lo-tmark__cnt { margin-top: auto; font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-tmark::after { content: 'RHODES ISLAND · OPERATOR DISPATCH'; position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: max(calc(.09 * var(--utility-text, var(--t))), calc(0.07 * var(--ui-unit, 1rem))); letter-spacing: .3em; color: rgba(255, 255, 255, .12); white-space: nowrap; }
.lo-tgrid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-columns: max-content; gap: calc(0.16 * var(--ui-unit, 1rem)) calc(0.14 * var(--ui-unit, 1rem)); min-height: 0; }

/* ---- an operator card ---- */
.lo-op { --tc: var(--tier-1); position: relative; display: flex; min-height: 0; }
.lo-op--t2 { --tc: var(--tier-2); } .lo-op--t3 { --tc: var(--tier-3); } .lo-op--t4 { --tc: var(--tier-4); }
.lo-op--t5 { --tc: var(--tier-5); } .lo-op--t6 { --tc: var(--tier-6); }
.lo-op__card { position: relative; width: var(--opw); min-height: 0; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto; column-gap: max(calc(0.05 * var(--ui-unit, 1rem)), 3px); padding: max(calc(0.06 * var(--ui-unit, 1rem)), 3px) max(calc(0.06 * var(--ui-unit, 1rem)), 3px) max(calc(0.07 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem)));
  background: linear-gradient(180deg, rgba(44, 50, 48, .94), rgba(24, 28, 27, .96)); border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 calc(0.05 * var(--ui-unit, 1rem)) calc(0.16 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .45); transition: border-color var(--t-fast), box-shadow var(--t-fast); cursor: pointer; }
.lo-op:hover .lo-op__card { border-color: rgba(255, 255, 255, .22); }
.lo-op.is-sel .lo-op__card { border-color: var(--mint-400); box-shadow: 0 0 0 1px var(--mint-400), 0 0 calc(0.18 * var(--ui-unit, 1rem)) rgba(89, 244, 202, .3); }
.lo-op__rail { grid-row: 1 / 3; grid-column: 1; display: flex; flex-direction: column; align-items: center; gap: max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); padding-top: 2px; }
.lo-op__tier.tier { width: 100%; }
.lo-op__lv { display: flex; flex-direction: column; align-items: center; gap: max(calc(0.05 * var(--ui-unit, 1rem)), 3px); width: 86%; padding: max(calc(0.06 * var(--ui-unit, 1rem)), 3px) 0;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .14); border-radius: calc(9.99 * var(--ui-unit, 1rem)); }
.lo-op__lvrow { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.lo-op__lvrow b { font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); color: var(--text-md); }
.lo-op__lvrow.is-elite b { color: var(--gold-2); }
.lo-op__chev { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.11 * var(--ui-unit, 1rem))); height: max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.07 * var(--ui-unit, 1rem))); background: currentColor; color: var(--text-lo);
  clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 62%, 50% 22%, 0 62%, 0 100%, 50% 60%, 100% 100%, 100% 78%, 50% 38%, 0 78%); }
.lo-op__lvrow.is-elite .lo-op__chev { color: var(--gold-2); }
.lo-op__mark { width: max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); height: max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); margin-top: auto; background: var(--mint-400); transform: rotate(45deg); box-shadow: 0 0 calc(0.06 * var(--ui-unit, 1rem)) rgba(89, 244, 202, .6); }
.lo-op__pick { grid-row: 1; grid-column: 2; position: relative; display: block; min-height: 0; padding: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(180deg, #d7dbd9, #aeb4b1 70%, #8d9390); border: 1px solid rgba(240, 244, 242, .55); }
.lo-op__art { position: absolute; inset: 0 0 max(calc(0.42 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))) 0; display: block; overflow: hidden; }
.lo-op__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; display: block; }
.lo-op__glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: max(calc(.5 * var(--utility-text, var(--t))), calc(0.22 * var(--ui-unit, 1rem))); font-weight: 900; color: rgba(17, 22, 20, .45); }
.lo-op__sub { position: absolute; left: 2px; top: 2px; width: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.2 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); padding: 2px; object-fit: contain; background: rgba(20, 24, 23, .85); }
.lo-op__ribbon { position: absolute; right: 3px; top: 0; padding: 3px 3px calc(0.07 * var(--ui-unit, 1rem)); font-size: max(calc(.11 * var(--utility-text, var(--t))), calc(0.08 * var(--ui-unit, 1rem))); font-weight: 800; line-height: 1.1; writing-mode: vertical-rl;
  color: var(--ice-900, #0d2236); background: var(--ice); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - calc(0.05 * var(--ui-unit, 1rem))), 0 100%); }
.lo-op__kit { position: absolute; left: 0; right: 0; bottom: 0; height: max(calc(0.42 * var(--ui-unit, 1rem)), calc(0.22 * var(--ui-unit, 1rem))); display: flex; align-items: center; gap: 3px; padding: 0 3px;
  background: linear-gradient(180deg, rgba(20, 24, 23, .7), rgba(20, 24, 23, .95)); }
.lo-op__slot { display: grid; place-items: center; width: max(calc(0.34 * var(--ui-unit, 1rem)), calc(0.18 * var(--ui-unit, 1rem))); height: max(calc(0.34 * var(--ui-unit, 1rem)), calc(0.18 * var(--ui-unit, 1rem))); background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .2); }
.lo-op__slot .lo-sicon, .lo-op__slot .lo-mglyph { width: 100%; height: 100%; border: 0; }
.lo-op__slot .lo-sicon__outline, .lo-op__slot .lo-sicon__ring { display: none; }
.lo-op__slot .lo-mglyph__t { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.1 * var(--ui-unit, 1rem))); }
.lo-op__meta { grid-row: 2; grid-column: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; padding-top: max(calc(0.04 * var(--ui-unit, 1rem)), 2px); }
.lo-op__pot { display: flex; gap: 2px; }
.lo-op__pot i { width: max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); height: max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); background: rgba(255, 255, 255, .18); transform: rotate(45deg); }
.lo-op__pot i.is-on { background: #c9cfcc; }
.lo-op__name { max-width: 100%; font-size: max(calc(.17 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 800; color: var(--text-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lo-op__bonds { grid-row: 3; grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 3px; min-height: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); padding-top: 2px; }
.lo-op__bond { display: grid; place-items: center; width: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); height: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .22); }
.lo-op__bond img { width: 70%; height: 70%; object-fit: contain; }
.lo-op.is-standin .lo-op__art img { filter: saturate(.5); }
/* 快速配置: a column of choices beside the card */
.lo-op__quick { flex: none; width: var(--qw); --q: calc(var(--qw) - max(calc(0.12 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem)))); --qg: max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem)));
  display: flex; flex-direction: column; align-items: center; gap: var(--qg); padding: max(calc(0.06 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))) 0; overflow-y: auto; scrollbar-width: none;
  background: rgba(16, 20, 19, .92); border: 1px solid rgba(255, 255, 255, .08); border-left: 0; animation: lo-q-in 160ms var(--ease-out) backwards; }
@keyframes lo-q-in { from { opacity: 0; transform: translateX(calc(-0.06 * var(--ui-unit, 1rem))); } }
.lo-op__quick .lo-q:not(.is-on):not(.lo-q--empty) { opacity: .55; }
.lo-op__quick .lo-q.is-on { opacity: 1; }
.lo-op__quick--cult { width: var(--qcw); padding: max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.05 * var(--ui-unit, 1rem))); justify-content: center; }
.lo-op__quick--cult .lo-cult { flex-direction: column; align-items: stretch; width: 100%; }
.lo-op__quick--cult .lo-select { width: 100%; }
.lo-op__none { margin: auto 0; font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-dim); writing-mode: vertical-rl; letter-spacing: .2em; }
/* 甄选干员 (自选编队) closing tiers 5 / 6 */
.lo-op--diy { flex-direction: column; align-items: center; justify-content: center; gap: max(calc(0.08 * var(--ui-unit, 1rem)), calc(0.04 * var(--ui-unit, 1rem))); width: var(--opw); padding: calc(0.1 * var(--ui-unit, 1rem)); font: inherit; color: var(--text-hi);
  cursor: pointer; background: linear-gradient(180deg, rgba(150, 160, 156, .2), rgba(80, 88, 85, .14)); border: 1px solid rgba(255, 255, 255, .16); }
.lo-op--diy:hover { border-color: var(--tc); background: linear-gradient(180deg, rgba(170, 180, 176, .26), rgba(90, 98, 95, .18)); }
.lo-diy__frame { position: relative; display: grid; place-items: center; width: 74%; aspect-ratio: 1 / 1.25; color: rgba(255, 255, 255, .78);
  border-left: 2px solid rgba(255, 255, 255, .5); border-right: 2px solid rgba(255, 255, 255, .5); }
.lo-diy__glyph { width: 62%; height: 62%; }
.lo-diy__faces { display: flex; flex-direction: column; gap: calc(0.04 * var(--ui-unit, 1rem)); width: 70%; }
.lo-diy__face { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; background: #1a1f1d; border: 1px solid var(--tc); font-weight: 900; }
.lo-diy__label { font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 800; letter-spacing: .1em; }
.lo-diy__n { font-size: max(calc(.3 * var(--utility-text, var(--t))), calc(0.16 * var(--ui-unit, 1rem))); color: var(--text-lo); }
.lo-diy__n b { color: var(--text-hi); font-size: max(calc(.4 * var(--utility-text, var(--t))), calc(0.2 * var(--ui-unit, 1rem))); }

/* ---- the detail drawer ---- */
.lo-drawer { position: absolute; left: 0; top: 0; bottom: 0; z-index: 4; width: var(--drawer-w); display: flex; flex-direction: column;
  background: #0e1211; border-right: 1px solid var(--line-2); box-shadow: calc(0.1 * var(--ui-unit, 1rem)) 0 calc(0.4 * var(--ui-unit, 1rem)) rgba(0, 0, 0, .55); animation: lo-drawer-in 200ms var(--ease-out) backwards; }
@keyframes lo-drawer-in { from { transform: translateX(calc(-0.24 * var(--ui-unit, 1rem))); opacity: 0; } }
.lo-drawer__close { flex: none; display: flex; align-items: center; gap: calc(0.06 * var(--ui-unit, 1rem)); height: max(calc(0.42 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem))); padding: 0 calc(0.16 * var(--ui-unit, 1rem)); font: inherit;
  font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); font-weight: 700; color: var(--text-md); background: #161b19; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.lo-drawer__close:hover { color: var(--mint-400); }
.lo-drawer__close .icon { width: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); height: max(calc(0.18 * var(--ui-unit, 1rem)), calc(0.12 * var(--ui-unit, 1rem))); }
.lo-drawer .lo-detail { border: 0; box-shadow: none; }

/* ---- bottom bar ---- */
.lo-bbar { position: relative; flex: none; display: flex; align-items: center; gap: calc(0.3 * var(--ui-unit, 1rem)); height: max(calc(0.8 * var(--ui-unit, 1rem)), calc(0.46 * var(--ui-unit, 1rem))); padding: 0 calc(0.36 * var(--ui-unit, 1rem));
  background: linear-gradient(180deg, rgba(10, 12, 11, .7), rgba(6, 8, 7, .96)); border-top: 1px solid var(--line); }
.lo-bbar__seg { flex: none; display: inline-flex; padding: 3px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line-2); border-radius: calc(9.99 * var(--ui-unit, 1rem)); }
.lo-bbar__seg button { display: inline-flex; align-items: center; gap: calc(0.08 * var(--ui-unit, 1rem)); height: max(calc(0.46 * var(--ui-unit, 1rem)), calc(0.3 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); font: inherit;
  font-size: max(calc(.18 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); font-weight: 800; color: var(--text-md); background: none; border: 0; border-radius: calc(9.99 * var(--ui-unit, 1rem)); cursor: pointer; white-space: nowrap; }
.lo-bbar__seg button .icon { width: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); height: max(calc(0.22 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); padding: 2px; border-radius: calc(0.04 * var(--ui-unit, 1rem)); color: #062019; background: var(--mint-500); }
.lo-bbar__seg button.is-on { color: #111614; background: #eef1ef; }
.lo-bbar__tiers { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: calc(0.04 * var(--ui-unit, 1rem)); overflow-x: auto; scrollbar-width: none; padding-top: calc(0.14 * var(--ui-unit, 1rem)); }
.lo-bbar__tier { position: relative; flex: none; display: inline-flex; align-items: center; gap: calc(0.05 * var(--ui-unit, 1rem)); height: max(calc(0.42 * var(--ui-unit, 1rem)), calc(0.28 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.16 * var(--ui-unit, 1rem)), calc(0.08 * var(--ui-unit, 1rem))); font: inherit;
  font-size: max(calc(.15 * var(--utility-text, var(--t))), calc(0.11 * var(--ui-unit, 1rem))); color: var(--text-lo); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.lo-bbar__tier + .lo-bbar__tier::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--line); }
.lo-bbar__tier:hover:not(:disabled) { color: var(--text-hi); }
.lo-bbar__tier.is-on { color: var(--text-hi); border-bottom-color: var(--mint-500); }
.lo-bbar__tier:disabled { opacity: .35; cursor: default; }
.lo-bbar__roman { display: grid; place-items: center; min-width: max(calc(0.3 * var(--ui-unit, 1rem)), calc(0.18 * var(--ui-unit, 1rem))); height: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); padding: 0 2px; font-size: max(calc(.13 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); font-weight: 800;
  border: 1px solid currentColor; border-radius: 3px; }
.lo-bbar__diy { position: absolute; left: 50%; top: max(calc(-0.2 * var(--ui-unit, 1rem)), calc(-0.14 * var(--ui-unit, 1rem))); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 1px; padding: 0 calc(0.04 * var(--ui-unit, 1rem));
  font-size: max(calc(.12 * var(--utility-text, var(--t))), calc(0.09 * var(--ui-unit, 1rem))); color: var(--text-md); background: rgba(255, 255, 255, .1); border-radius: calc(9.99 * var(--ui-unit, 1rem)); }
.lo-bbar__diy .icon { width: max(calc(0.13 * var(--ui-unit, 1rem)), calc(0.09 * var(--ui-unit, 1rem))); height: max(calc(0.13 * var(--ui-unit, 1rem)), calc(0.09 * var(--ui-unit, 1rem))); }
.lo-confirm { flex: none; display: inline-flex; align-items: center; gap: calc(0.1 * var(--ui-unit, 1rem)); height: max(calc(0.6 * var(--ui-unit, 1rem)), calc(0.38 * var(--ui-unit, 1rem))); padding: 0 max(calc(0.24 * var(--ui-unit, 1rem)), calc(0.14 * var(--ui-unit, 1rem))); font: inherit;
  font-size: max(calc(.2 * var(--utility-text, var(--t))), calc(0.13 * var(--ui-unit, 1rem))); font-weight: 900; color: #111614; background: #eef1ef; border: 0; cursor: pointer; }
.lo-confirm .icon { width: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); height: max(calc(0.26 * var(--ui-unit, 1rem)), calc(0.16 * var(--ui-unit, 1rem))); padding: 2px; color: #eef1ef; background: #1a1f1d; }
.lo-confirm:hover { background: #fff; }

/* ---- ⓘ 调度手册 ---- */
.lo-help { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: calc(0.1 * var(--ui-unit, 1rem)) calc(0.2 * var(--ui-unit, 1rem)); margin: 0; font-size: max(calc(.16 * var(--utility-text, var(--t))), calc(0.12 * var(--ui-unit, 1rem))); line-height: 1.6; }
.lo-help dt { font-weight: 800; color: var(--mint-400); white-space: nowrap; }
.lo-help dd { margin: 0; color: var(--text-md); }
@media (prefers-reduced-motion: reduce) { .lo-deck { transition: none; } }

/* ---- 转场 (2026-10-13, the owner's request: like the hub's screens — css/screens/lobby.css tr-* keyframes) ----------
   Opening: what is below darkens to black (150 ms), then the backdrop, the top bar, the tier groups one after another
   (sliding in from the right) and the bottom bar come up; the list view's roster and detail slide in from their sides; a
   tab's content (干员持有 / 自选编队 / 装备一览) comes up when opened; the drawer slides out of the left edge.
   Closing: the content fades, then the black lifts (LoadoutHost keeps the overlay 300 ms: ui/transitions.js). */
.lo { animation: tr-veil 150ms linear backwards; }
.lo__bg { animation: tr-fade 340ms ease-out 140ms backwards; }
.lo-top { animation: tr-fade 260ms ease-out 170ms backwards; }
.lo-top__center { animation: tr-right 400ms var(--tr-ease) 200ms backwards; }
.lo-top__right { animation: tr-right 420ms var(--tr-ease) 250ms backwards; }
.lo-note { animation: tr-fade 300ms ease-out 230ms backwards; }
.lo-tgroup { animation: tr-right 440ms var(--tr-ease) backwards; animation-delay: calc(240ms + var(--g, 0) * 70ms); }
.lo-tgroup:nth-child(2) { --g: 1; } .lo-tgroup:nth-child(3) { --g: 2; } .lo-tgroup:nth-child(4) { --g: 3; }
.lo-tgroup:nth-child(5) { --g: 4; } .lo-tgroup:nth-child(6) { --g: 5; } .lo-tgroup:nth-child(n+7) { --g: 6; }
.lo-bbar { animation: tr-rise 420ms var(--tr-ease) 380ms backwards; }
.lo-roster { animation: tr-left 440ms var(--tr-ease) 220ms backwards; }
.lo-detail-wrap { animation: tr-right 440ms var(--tr-ease) 280ms backwards; }
.own, .diy { animation: tr-fade 300ms ease-out 150ms backwards; }
.own-tier { animation: tr-right 420ms var(--tr-ease) backwards; animation-delay: calc(200ms + var(--g, 0) * 60ms); }
.own-tier:nth-child(2) { --g: 1; } .own-tier:nth-child(3) { --g: 2; } .own-tier:nth-child(4) { --g: 3; } .own-tier:nth-child(n+5) { --g: 4; }
.lo-drawer { animation: lo-drawer-slide 320ms var(--tr-ease) backwards; }
@keyframes lo-drawer-slide { from { transform: translateX(calc(-0.6 * var(--ui-unit, 1rem))); opacity: 0; } }
.lo.is-leaving { pointer-events: none; animation: tr-lift 170ms linear 130ms forwards; }
.lo.is-leaving > * { animation: tr-out 140ms ease-in forwards; }
@media (prefers-reduced-motion: reduce) {
  .lo, .lo *, .own *, .diy * { animation-delay: 0ms !important; }
}