/* Neon Comet 3.1 - Hangar (agent "hangar"). Look = dev/design/hangar_ref.html (approved, palette B).
   Every size here is a design px of the 844x390 mockup: js/ui/hangar.js sets --hk (= min(w/844, h/390)) and the
   screen root .ha-z / popups .ha-pop are scaled with transform, so nothing in this file uses core's --u.
   Classes are prefixed "ha-" (old v3.0 style.css still has .hg-*, .slot, .tab ... rules). Colours = palette B tokens. */

.scr.ha-scr { padding: 0; overflow: hidden; }
.ha {
  position: absolute; inset: 0; overflow: hidden; box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 28% 50%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 55%),
    radial-gradient(ellipse at 85% 10%, color-mix(in srgb, var(--amber) 5%, transparent), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='white'%3E%3Ccircle cx='13' cy='20' r='.8' opacity='.5'/%3E%3Ccircle cx='80' cy='44' r='.6' opacity='.35'/%3E%3Ccircle cx='47' cy='96' r='.9' opacity='.45'/%3E%3Ccircle cx='103' cy='81' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  font-family: 'NCUI', system-ui, sans-serif; color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ha *, .ha-pop * { box-sizing: border-box; }
.ha-z {
  position: relative; width: calc(100% / var(--hk, 1)); height: calc(100% / var(--hk, 1));
  transform: scale(var(--hk, 1)); transform-origin: 0 0;
  display: flex; flex-direction: column; gap: 7px; padding: 9px 12px 10px;
}
.ha-c { clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.ha-i { display: block; image-rendering: pixelated; filter: saturate(.82); pointer-events: none; width: 24px; height: 24px; flex: none; }
.ha [data-fit] { white-space: nowrap; overflow: hidden; min-width: 0; }
.hac0 { color: var(--r0); } .hac1 { color: var(--r1); } .hac2 { color: var(--r2); } .hac3 { color: var(--r3); } .hac4 { color: var(--r4); } .hacn { color: var(--dim); }
.ha .dim, .ha-pop .dim { color: var(--dim); }

/* ---------------------------------------------------------------- small glyphs (no font dependency) */
.ha-gem { display: inline-block; flex: none; width: 8px; height: 8px; margin: 0 2px; background: var(--cyan); transform: rotate(45deg); }
.ha-pill .ha-gem { width: 10px; height: 10px; margin: 0 3px; }
.ha-arr { display: inline-block; width: 7px; height: 10px; background: currentColor; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.ha-x { width: 28px; padding-left: 0 !important; padding-right: 0 !important; }
.ha-x i { position: relative; display: block; width: 11px; height: 11px; }
.ha-x i::before, .ha-x i::after { content: ''; position: absolute; left: 50%; top: -1px; width: 2px; height: 13px; background: currentColor; transform: translateX(-50%) rotate(45deg); }
.ha-x i::after { transform: translateX(-50%) rotate(-45deg); }

/* ---------------------------------------------------------------- buttons */
.ha-b {
  font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
  padding: 8px 14px; position: relative; display: inline-flex; gap: 6px; align-items: center; justify-content: center;
  white-space: nowrap; border: 1px solid transparent; border-radius: 0; cursor: pointer; color: var(--ink); background: none; margin: 0; min-width: 0;
}
.ha-b.sm { font-size: 11px; padding: 6px 9px; gap: 4px; }
.ha-b.back { background: linear-gradient(color-mix(in srgb, var(--red) 20%, var(--panel)), color-mix(in srgb, var(--red) 13%, var(--bg))); color: color-mix(in srgb, var(--red) 40%, var(--ink)); border-color: color-mix(in srgb, var(--red) 50%, var(--panel)); }
.ha-b.pri { background: linear-gradient(color-mix(in srgb, var(--amber) 88%, var(--ink)), color-mix(in srgb, var(--amber) 80%, var(--bg))); color: var(--bg); }
.ha-b.sec { background: linear-gradient(color-mix(in srgb, var(--cyan) 12%, var(--panel2)), color-mix(in srgb, var(--cyan) 8%, var(--panel))); color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 35%, var(--line)); }
.ha-b.mut { background: linear-gradient(var(--panel2), var(--panel)); color: var(--ink); border-color: var(--line); }
.ha-b.pri .ha-gem { background: var(--bg); opacity: .85; }
.ha-b.off { filter: saturate(.2) brightness(.65); cursor: default; }
.ha-b.poor { filter: saturate(.55) brightness(.85); }
.ha-b:hover:not(.off) { filter: brightness(1.08); }
.ha-b:active:not(.off) { transform: translateY(1px); filter: brightness(1.15); }
.ha-b.dotted { padding-right: 24px; }
.ha-dot { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 3px; background: var(--amber); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: 0; display: grid; place-items: center; line-height: 1; }

/* ---------------------------------------------------------------- top bar */
.ha-top { display: flex; align-items: center; gap: 10px; height: 30px; flex: none; }
.ha-top .ha-b.back { height: 30px; padding: 0 14px; }
.ha-title { margin: 0 auto; font-weight: 800; font-size: 20px; letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; white-space: nowrap; }
.ha-pill { background: var(--panel); border: 1px solid var(--line); height: 30px; padding: 0 10px; font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.ha-pill i { font-style: normal; color: var(--dim); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------------------------------------------------------------- main split */
.ha-main { flex: 1; min-height: 0; display: flex; gap: 12px; }
.ha-left { width: 424px; flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ha-right { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); }

/* stat boxes */
.ha-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; flex: none; }
.ha-st { background: var(--panel); border-left: 3px solid var(--amber); padding: 4px 8px; min-width: 0; }
.ha-st small { display: block; font-size: 11px; letter-spacing: .06em; color: var(--dim); }
.ha-st b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.ha-st.hp { border-color: var(--red); } .ha-st.shd { border-color: var(--cyan); } .ha-st.dps { border-color: var(--r2); }

/* ship stage with slot columns */
.ha-stage { flex: 1; min-height: 0; display: flex; justify-content: space-between; align-items: center; }
.ha-col { width: 54px; height: 234px; max-height: 100%; flex: none; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; }
.ha-slot { width: 54px; height: 54px; cursor: pointer; }
.ha-slot .ha-t { width: 100%; height: 100%; --bh: 14px; }
.ha-slot .ha-t > .ha-i { width: 30px; height: 30px; }
.ha-slot .ha-t > .ha-lv { font-size: 11px; }
.ha-center { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; align-items: center; padding: 0 12px; }
.ha-name { text-align: center; max-width: 100%; flex: none; padding-top: 2px; display: flex; flex-direction: column; align-items: center; }
.ha-name b { display: block; max-width: 100%; font-size: 19px; font-weight: 800; letter-spacing: .18em; padding-left: .18em; text-transform: uppercase; line-height: 1.25; }
.ha-name small { display: block; max-width: 100%; font-size: 12px; letter-spacing: .08em; line-height: 1.3; }
.ha-ship { flex: 1; min-height: 0; width: 100%; position: relative; display: grid; place-items: center; cursor: pointer; }
.ha-ship .ha-i.ship { width: auto; height: 144px; max-height: calc(100% - 22px); aspect-ratio: 1; position: relative; z-index: 1; }
.ha-ring { position: absolute; left: 50%; bottom: 14px; width: 190px; height: 34px; margin-left: -95px; border: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent); border-radius: 50%; box-shadow: 0 0 14px color-mix(in srgb, var(--cyan) 12%, transparent), inset 0 0 14px color-mix(in srgb, var(--cyan) 8%, transparent); }
.ha-ring2 { position: absolute; left: 50%; bottom: 22px; width: 130px; height: 20px; margin-left: -65px; border: 1px dashed color-mix(in srgb, var(--cyan) 22%, transparent); border-radius: 50%; }
.ha-ship:hover .ha-ring { border-color: color-mix(in srgb, var(--cyan) 55%, transparent); }

.ha-acts { display: flex; justify-content: center; gap: 8px; flex: none; }

/* ---------------------------------------------------------------- tiles (UI.frame look) */
.ha-t { position: relative; display: grid; place-items: center; background: var(--panel2); border: 2px solid var(--line); overflow: hidden; --bh: 13px; }
.ha-t.r0 { border-color: var(--r0); } .ha-t.r1 { border-color: var(--r1); } .ha-t.r2 { border-color: var(--r2); } .ha-t.r3 { border-color: var(--r3); } .ha-t.r4 { border-color: var(--r4); }
.ha-t.rn { border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)); }
.ha-t.r2 { box-shadow: inset 0 0 12px color-mix(in srgb, var(--r2) 12%, transparent); }
.ha-t.r3 { box-shadow: inset 0 0 12px color-mix(in srgb, var(--r3) 12%, transparent); }
.ha-t.r4 { box-shadow: inset 0 0 12px color-mix(in srgb, var(--r4) 14%, transparent); }
.ha-t.band > .ha-i { margin-top: calc(var(--bh) * -1); }
.ha-lv { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bh); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; color: var(--bg); background: color-mix(in srgb, var(--line) 75%, var(--dim)); overflow: hidden; }
.ha-t.r0 > .ha-lv { background: var(--r0); } .ha-t.r1 > .ha-lv { background: var(--r1); } .ha-t.r2 > .ha-lv { background: var(--r2); } .ha-t.r3 > .ha-lv { background: var(--r3); } .ha-t.r4 > .ha-lv { background: var(--r4); }
.ha-t > .ha-lv.price { background: color-mix(in srgb, var(--bg) 75%, var(--panel2)); color: var(--amber); gap: 2px; }
.ha-lv .ha-gem { width: 5px; height: 5px; margin: 0 2px 0 0; }
.ha-t.locked > .ha-i { filter: grayscale(.8) brightness(.6); }
.ha-up { position: absolute; top: 3px; right: 3px; width: 11px; height: 10px; background: var(--good); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ha-eq { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: var(--cyan); display: grid; place-items: center; }
.ha-eq::after, .ha-pick.on::after { content: ''; width: 3px; height: 6px; border: solid var(--bg); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ha-set { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; }
.ha-set.low { top: 15px; }
.ha-si { width: 12px; height: 12px; flex: none; display: inline-block; vertical-align: -2px; }
.ha-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; background: var(--amber); color: var(--bg); font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.ha-pick { position: absolute; top: 2px; right: 2px; width: 13px; height: 13px; border: 2px solid var(--dim); background: color-mix(in srgb, var(--bg) 60%, transparent); display: grid; place-items: center; }
.ha-pick.on { background: var(--amber); border-color: var(--amber); }
.ha-tag { position: absolute; left: 3px; bottom: calc(var(--bh) + 2px); padding: 0 3px; font-size: 9px; font-weight: 800; background: var(--amber); color: var(--bg); line-height: 12px; }
.ha-t.empty { border: 2px dashed color-mix(in srgb, var(--line) 70%, var(--dim)); background: color-mix(in srgb, var(--panel2) 60%, transparent); }
.ha-t.empty > .ha-i { filter: grayscale(1); opacity: .3; }
.ha-plus { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; background: color-mix(in srgb, var(--panel2) 60%, var(--line)); color: var(--cyan); font-size: 14px; font-weight: 800; display: grid; place-items: center; line-height: 1; }
.ha-glow { animation: haGlow .6s ease-out; }
@keyframes haGlow { 0% { filter: brightness(1.9) drop-shadow(0 0 6px var(--amber)); } 100% { filter: none; } }

/* ---------------------------------------------------------------- right panel */
.ha-rh { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); height: 38px; flex: none; }
.ha-rh > b { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; flex: 0 1 auto; }
.ha-rh .cnt { font-size: 12px; color: var(--dim); white-space: nowrap; flex: none; }
.ha-chips { margin-left: auto; display: flex; gap: 4px; flex: none; }
.ha-chip { height: 26px; min-width: 30px; padding: 0 6px; margin: 0; border-radius: 0; background: var(--panel2); border: 1px solid var(--line); display: grid; place-items: center; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); cursor: pointer; }
.ha-chip .ha-i { width: 18px; height: 18px; opacity: .6; }
.ha-chip.on { border-color: var(--amber); color: var(--amber); background: color-mix(in srgb, var(--amber) 6%, transparent); }
.ha-chip.on .ha-i { opacity: 1; }
.ha-sub { display: flex; align-items: center; gap: 6px; padding: 4px 10px 0; height: 32px; flex: none; font-size: 11px; color: var(--dim); }
.ha-info, .ha-mlab, .ha-setl { flex: 1; min-width: 0; font-size: 11px; color: var(--dim); }
.ha-info b, .ha-mlab b { color: var(--ink); font-weight: 700; }
.ha-mlab b { color: var(--amber); text-transform: uppercase; letter-spacing: .06em; }
.ha-mlab .ha-gem { width: 6px; height: 6px; }
.ha-setl { display: flex; gap: 12px; align-items: center; }
.ha-setl > span { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ha-setl b { color: var(--ink); font-weight: 700; }
.ha-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 22px; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.ha-list::-webkit-scrollbar { display: none; }
.ha-cat { display: flex; align-items: center; gap: 8px; margin: 5px 0 5px; font-size: 11px; letter-spacing: .1em; color: var(--amber); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.ha-cat:first-child { margin-top: 2px; }
.ha-cat::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.ha-cat i { font-style: normal; color: var(--dim); }
.ha-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ha-cell { position: relative; min-width: 0; cursor: pointer; }
.ha-grid > .ha-cell { height: 46px; }
.ha-grid > .ha-cell > .ha-t { width: 100%; height: 100%; }
.ha-grid.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 6px; }
.ha-grid.g5 > .ha-cell { height: auto; display: flex; flex-direction: column; gap: 3px; }
.ha-grid.g5 > .ha-cell > .ha-t { height: 56px; flex: none; }
.ha-grid.g5 .ha-t > .ha-i { width: 28px; height: 28px; }
.ha-grid.g5 .ha-t > .ha-i.sh { width: 34px; height: 34px; }
.ha-cap { display: block; height: 26px; overflow: hidden; font-size: 11px; font-weight: 600; text-align: center; line-height: 13px; color: var(--ink); overflow-wrap: normal; }
.ha-cap.dim { color: var(--dim); }
.ha-cell:hover .ha-t { filter: brightness(1.12); }
.ha-cell.dim { opacity: .32; }
.ha-cell.picked .ha-t { box-shadow: inset 0 0 0 2px var(--amber); }
.ha-empty { padding: 34px 10px; text-align: center; color: var(--dim); font-size: 12px; }

/* list rows (consumables, chests) */
.ha-lrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; margin-bottom: 6px; min-height: 64px; background: var(--panel2); border: 1px solid var(--line); }
.ha-lrow:first-child { margin-top: 2px; }
.ha-lrow .ha-t { width: 50px; height: 50px; flex: none; }
.ha-lrow .ha-t > .ha-i { width: 30px; height: 30px; }
.ha-lmain { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; align-self: stretch; }
.ha-ltx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ha-ltx b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ha-ltx small { display: block; font-size: 11px; line-height: 1.3; color: var(--dim); }
.ha-lact { flex: none; display: flex; flex-direction: column; gap: 5px; }
.ha-lrb { display: flex; gap: 5px; }
.ha-lrb > .ha-b { flex: 1; }

/* bottom icon tabs */
.ha-tabs { display: flex; height: 40px; flex: none; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, var(--bg)); }
.ha-itab { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: inherit; cursor: pointer; }
.ha-itab .ha-i { width: 22px; height: 22px; opacity: .5; filter: grayscale(.5) saturate(.82); }
.ha-itab em { display: none; font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--amber); line-height: 1.1; }
.ha-itab.on { flex-grow: 2.3; box-shadow: inset 0 2px 0 var(--amber); background: color-mix(in srgb, var(--amber) 5%, transparent); }
.ha-itab.on .ha-i { width: 20px; height: 20px; opacity: 1; filter: saturate(.82); }
.ha-itab.on em { display: block; }
.ha-itab:hover .ha-i { opacity: .85; }
.ha-itab .tdot { position: absolute; top: 5px; left: calc(50% + 9px); width: 6px; height: 6px; background: var(--amber); }

/* gamepad / keyboard focus (clip-path hides outlines, so chamfered things use inset rings) */
.ha [data-f].pad-focus, .ha-pop [data-f].pad-focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.ha .ha-b.pad-focus, .ha-pop .ha-b.pad-focus, .ha .ha-b:focus-visible, .ha-pop .ha-b:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber); filter: brightness(1.15); }
.ha .ha-b.pri.pad-focus, .ha-pop .ha-b.pri.pad-focus { box-shadow: inset 0 0 0 2px var(--ink); }
.ha .ha-itab.pad-focus, .ha .ha-chip.pad-focus { outline: none; box-shadow: inset 0 0 0 2px var(--amber); }
.ha .ha-ship.pad-focus { outline: none; }
.ha .ha-ship.pad-focus .ha-ring { border-color: var(--amber); box-shadow: 0 0 14px color-mix(in srgb, var(--amber) 30%, transparent); }

/* ---------------------------------------------------------------- popups (scaled with the same --hk) */
.modal.ha-modal { display: flex; align-items: center; justify-content: center; }
.ha-pop {
  position: relative; flex: none; font-family: 'NCUI', system-ui, sans-serif; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 10px 40px color-mix(in srgb, var(--bg) 70%, transparent);
  transform: scale(var(--hk, 1)); transform-origin: 50% 50%; animation: haPop .16s ease-out; -webkit-user-select: none; user-select: none;
}
@keyframes haPop { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.ha-pop [data-fit] { white-space: nowrap; overflow: hidden; min-width: 0; }
.ha-ph { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; flex: none; }
.ha-ph b { font-size: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.ha-ph span { font-size: 12px; color: var(--dim); }
.ha-pa { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: none; }
.ha-pa .sp { flex: 1; }
.ha-note { flex: 1; font-size: 11px; color: var(--dim); }

/* item detail */
.ha-dt { display: flex; gap: 12px; padding: 12px; width: 560px; max-height: 360px; }
.ha-card { --rc: var(--line); width: 200px; flex: none; display: flex; flex-direction: column; gap: 3px; padding-bottom: 10px; background: var(--panel2); border: 1px solid var(--line); position: relative; overflow: hidden; }
.ha-card.r0 { --rc: var(--r0); } .ha-card.r1 { --rc: var(--r1); } .ha-card.r2 { --rc: var(--r2); } .ha-card.r3 { --rc: var(--r3); } .ha-card.r4 { --rc: var(--r4); }
.ha-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rc); z-index: 1; }
.ha-art { position: relative; height: 112px; flex: none; display: grid; place-items: center; border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 70%); }
.ha-art .ha-i.art { width: 96px; height: 96px; }
.ha-eqtag { position: absolute; top: 8px; left: 8px; padding: 2px 5px; background: var(--cyan); color: var(--bg); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ha-dn { display: block; padding: 6px 10px 0; font-size: 17px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.ha-dsub { display: block; padding: 0 10px; font-size: 12px; letter-spacing: .06em; }
.ha-dl { padding: 3px 10px 0; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--dim); }
.ha-bar { display: block; height: 4px; background: var(--bg); }
.ha-bar > i { display: block; height: 100%; background: var(--amber); }
.ha-desc { margin: 4px 10px 0; font-size: 12px; line-height: 1.35; color: color-mix(in srgb, var(--ink) 85%, var(--dim)); }
.ha-desc b { color: var(--amber); font-weight: 700; }
.ha-dset { margin: 6px 10px 0; padding: 6px 8px; background: var(--bg); display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.3; color: var(--dim); }
.ha-dset b { display: flex; align-items: center; gap: 5px; color: var(--ink); }
.ha-dset .on { color: var(--good); }
.ha-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ha-sh, .ha-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; align-items: center; }
.ha-sh.two, .ha-rows.two .ha-row { grid-template-columns: minmax(0, 1fr) 70px 14px 70px; }
.ha-sh { font-size: 11px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.ha-sh b { color: var(--amber); font-size: 12px; letter-spacing: .1em; }
.ha-sh span { text-align: right; }
.ha-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.ha-row { font-size: 12px; min-height: 20px; padding: 1px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.ha-row .k { color: var(--dim); }
.ha-row .v { text-align: right; font-weight: 700; white-space: nowrap; }
.ha-row .v.up { color: var(--good); } .ha-row .v.dn { color: var(--bad); }
.ha-ra { justify-self: center; width: 0; height: 0; border-left: 5px solid var(--dim); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ha-rsec { margin-top: 6px; padding-bottom: 2px; font-size: 10px; letter-spacing: .1em; color: var(--amber); text-transform: uppercase; }
.ha-rsec:first-child { margin-top: 2px; }
.ha-dacts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; }
.ha-dacts > .ha-b { padding-top: 8px; padding-bottom: 8px; }
.ha-dacts .wide, .ha-dacts > :last-child:nth-child(even) { grid-column: 1 / -1; }
.ha-maxed { display: flex; align-items: center; justify-content: center; padding: 7px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); border: 1px dashed color-mix(in srgb, var(--amber) 45%, var(--line)); }
.ha-tick { animation: haTick .45s ease-out; }
@keyframes haTick { 0% { color: var(--amber); transform: scale(1.12); } 100% { transform: none; } }

/* merge-all summary */
.ha-sum { width: 480px; max-height: 340px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ha-sumg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 6px; overflow-y: auto; min-height: 0; padding: 2px; scrollbar-width: none; }
.ha-sumc { display: flex; flex-direction: column; gap: 3px; min-width: 0; animation: haPop .25s ease-out both; }
.ha-sumc .ha-t { height: 50px; }
.ha-sumc:nth-child(2) { animation-delay: .05s; } .ha-sumc:nth-child(3) { animation-delay: .1s; } .ha-sumc:nth-child(4) { animation-delay: .15s; } .ha-sumc:nth-child(n+5) { animation-delay: .2s; }

/* loadout picker */
.ha-lo { width: 440px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ha-lohint { margin: 0; font-size: 12px; color: var(--dim); }
.ha-log > .ha-cell > .ha-t { height: 56px; }