@font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/orbitron-500.woff2") format("woff2");
}
@font-face {
  font-family: Orbitron;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/orbitron-700.woff2") format("woff2");
}
@font-face {
  font-family: "Share Tech Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/share-tech-mono.woff2") format("woff2");
}

@property --spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --bg: #02040a;
  --panel: rgba(6, 14, 22, 0.72);
  --line: rgba(61, 255, 199, 0.18);
  --muted: #7f93a8;
  --text: #e8f6ff;
  --cyan: #3dffc7;
  --blue: #4cc9ff;
  --amber: #ffcc66;
  --red: #ff4d6d;
  --glow: 0 0 18px rgba(61, 255, 199, 0.35);
  --hud: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --display: Orbitron, "Share Tech Mono", "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html, body { background: #000; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", var(--hud);
  color: var(--text);
  background:
    radial-gradient(900px 420px at var(--mx, 70%) var(--my, 8%), rgba(61, 255, 199, 0.16), transparent 42%),
    radial-gradient(700px 380px at 8% 108%, rgba(76, 201, 255, 0.12), transparent 46%),
    linear-gradient(180deg, #07131c 0%, #02040a 42%, #000 100%);
}
body::before {
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(61, 255, 199, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 201, 255, 0.06) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0 55%, transparent 90%);
  animation: gridDrift 18s linear infinite;
}
#fxLayer { z-index: 0; }
#fxCanvas { opacity: 0.7; }
.fxScan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(180, 255, 230, 0.07) 0 1px,
    transparent 1px 3px
  );
  opacity: 0.7;
  animation: scanDrift 5s linear infinite;
}
.fxFloor {
  height: 48%;
  opacity: 0.8;
  background:
    linear-gradient(rgba(61, 255, 199, 0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 255, 199, 0.22) 1px, transparent 1px);
  background-size: 40px 40px;
  filter: drop-shadow(0 0 12px rgba(61, 255, 199, 0.35));
}
.fxVignette {
  background:
    radial-gradient(1000px 380px at 50% -8%, rgba(61, 255, 199, 0.16), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.15), transparent 18%, transparent 78%, rgba(0,0,0,.7));
}

#bootOverlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(61, 255, 199, 0.12), transparent 42%),
    #000;
  pointer-events: none;
  animation: bootOut 1.6s ease 1.15s forwards;
}
.bootInner { text-align: center; width: min(420px, calc(100% - 32px)); }
.bootInner p {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--cyan);
  text-shadow: var(--glow);
}
.bootBar {
  height: 4px;
  border: 1px solid rgba(61, 255, 199, 0.4);
  border-radius: 99px;
  overflow: hidden;
  background: #04110c;
}
.bootBar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), #fff);
  box-shadow: 0 0 16px var(--cyan);
  animation: bootFill 1.1s ease forwards;
}
.bootInner small {
  display: block;
  margin-top: 12px;
  font-family: var(--hud);
  letter-spacing: 0.18em;
  color: var(--muted);
}
@keyframes bootFill { to { width: 100%; } }
@keyframes bootOut { to { opacity: 0; visibility: hidden; } }

.eyebrow, .tabs button, .hudLive, .hudClock, .cardKicker, .telItem span,
.scoreHistory header span, .sectionTitle .eyebrow, .pageHeading .eyebrow {
  font-family: var(--hud);
}
.topbar h1, .pageHeading h2, .sectionTitle h2, .loginCard h1 {
  font-family: var(--display);
  font-weight: 700;
}
.topbar h1 {
  background: linear-gradient(90deg, #ffffff, #9bffdf 35%, #4cc9ff 70%, #ffffff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShift 5.5s linear infinite;
  filter: drop-shadow(0 0 16px rgba(61, 255, 199, 0.35));
  letter-spacing: 0.04em;
}

.shell {
  width: min(1240px, calc(100% - 20px));
}
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  grid-template-areas:
    "brand actions"
    "telemetry actions";
  gap: 16px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(61, 255, 199, 0.18);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(61, 255, 199, 0.07), transparent 40%),
    rgba(5, 10, 16, 0.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 40px rgba(61, 255, 199, 0.08);
  backdrop-filter: blur(16px);
  position: relative;
  overflow: hidden;
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
  animation: beamSweep 16s linear infinite;
}
.brandBlock { grid-area: brand; min-width: 0; }
.hudTelemetry {
  grid-area: telemetry;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  width: 100%;
}
.telItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 10px;
  border: 1px solid rgba(61, 255, 199, 0.16);
  background: rgba(0, 0, 0, 0.35);
  min-height: 52px;
  box-sizing: border-box;
}
.telItem span {
  display: block;
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  text-align: center;
  line-height: 1;
  margin: 0;
}
.telItem b {
  display: block;
  flex: 0 0 auto;
  margin: 3px 0 0;
  font-family: var(--hud);
  font-size: 13px;
  line-height: 1;
  color: #f4fffb;
  text-shadow: 0 0 10px rgba(61, 255, 199, 0.4);
  text-align: center;
}
.userPanel {
  grid-area: actions;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: end;
  justify-content: end;
  justify-items: end;
  align-self: start;
  align-items: center;
  gap: 6px 10px;
}
.userPanel .hudClock {
  grid-column: 1 / -1;
  justify-self: end;
}
.userToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.userMeta {
  display: grid;
  text-align: right;
}
.hudLive {
  border-color: rgba(61, 255, 199, 0.55);
  box-shadow: 0 0 16px rgba(61, 255, 199, 0.25);
}
.hudClock {
  font-size: 18px;
  letter-spacing: 0.16em;
  min-width: 132px;
  box-shadow: inset 0 0 12px rgba(61, 255, 199, 0.12), 0 0 18px rgba(61, 255, 199, 0.18);
}

.tabs {
  margin-top: 14px;
  padding: 7px;
  border: 1px solid rgba(61, 255, 199, 0.2);
  background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 24px rgba(61, 255, 199, 0.08);
}
.tabs button {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: #9fb3c4;
  background: transparent;
}
.tabs button.active {
  color: #03140e;
  background: linear-gradient(180deg, #b9ffe8, var(--cyan) 55%, #12c08a);
  box-shadow: 0 0 28px rgba(61, 255, 199, 0.45);
}

.summaryGrid { gap: 14px; }
.summaryCard {
  min-height: 188px;
  padding: 16px 14px 18px;
  display: grid;
  justify-items: center;
  text-align: center;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(#070d14, #070d14) padding-box,
    conic-gradient(from var(--spin), rgba(61,255,199,.05), var(--cyan), #4cc9ff, rgba(61,255,199,.05) 38%, transparent 55%, rgba(61,255,199,.08)) border-box;
  animation: spinBorder 28s linear infinite;
  box-shadow: 0 0 28px rgba(61, 255, 199, 0.08), inset 0 0 40px rgba(61, 255, 199, 0.04);
  backdrop-filter: blur(18px);
}
.summaryCard .cardKicker,
.summaryCard > span {
  font-family: var(--hud);
  letter-spacing: 0.16em;
  font-size: 11px;
  color: var(--cyan);
  text-transform: uppercase;
}
.gaugeWrap {
  position: relative;
  width: 118px;
  height: 118px;
  margin: 8px 0 6px;
}
.gaugeRing { width: 118px; height: 118px; transform: rotate(-90deg); }
.gaugeTrack { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 7; }
.gaugeValue {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(61, 255, 199, 0.8));
  transition: stroke-dashoffset 0.8s cubic-bezier(.2,.8,.2,1), stroke-dasharray 0.8s cubic-bezier(.2,.8,.2,1);
}
.gaugeValue[data-gauge="total"] { stroke: var(--cyan); filter: drop-shadow(0 0 8px rgba(61, 255, 199, 0.8)); }
.gaugeValue[data-gauge="healthy"] { stroke: #5dff8a; filter: drop-shadow(0 0 8px rgba(93, 255, 138, 0.75)); }
.gaugeValue[data-gauge="paid"] { stroke: var(--amber); filter: drop-shadow(0 0 8px rgba(255, 204, 102, 0.7)); }
.gaugeValue[data-gauge="egress"] { stroke: #4cc9ff; filter: drop-shadow(0 0 8px rgba(76, 201, 255, 0.75)); }
.summaryCard.accent-total > span { color: var(--cyan); }
.summaryCard.accent-healthy > span { color: #5dff8a; }
.summaryCard.accent-paid > span { color: var(--amber); }
.summaryCard.accent-egress > span { color: #4cc9ff; }
.nodeLatency {
  display: block;
  margin-top: 4px;
  font-family: var(--hud);
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
  text-shadow: none;
}
.nodeLatency.ok { color: var(--cyan); text-shadow: 0 0 10px rgba(61, 255, 199, 0.35); }
.nodeLatency.warn { color: var(--amber); text-shadow: 0 0 10px rgba(255, 204, 102, 0.35); }
.nodeLatency.danger { color: var(--red); text-shadow: 0 0 10px rgba(255, 77, 109, 0.4); }
.gaugeWrap strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  color: #f4fffb;
  text-shadow: 0 0 18px rgba(61, 255, 199, 0.55);
}
.summaryCard small { color: var(--muted); }
.summaryCard.danger {
  background:
    linear-gradient(#14070a, #14070a) padding-box,
    conic-gradient(from var(--spin), rgba(255,77,109,.15), var(--red), transparent 55%) border-box;
}
.summaryCard.danger .gaugeValue { stroke: var(--red); filter: drop-shadow(0 0 8px rgba(255,77,109,.8)); }

@keyframes spinBorder { to { --spin: 360deg; } }

.accountCard, .loginCard, .scorePanel, .scoreHero, .scoreVerdict, .scoreControls,
.scoreAskPanel, .dataTable, .authDropZone, .scoreHistory, .emptyState {
  border: 1px solid rgba(61, 255, 199, 0.18);
  background: linear-gradient(180deg, rgba(10, 18, 26, 0.92), rgba(5, 8, 12, 0.9));
  box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 24px rgba(61, 255, 199, 0.08);
  backdrop-filter: blur(16px);
  border-radius: 18px;
}
.accountCard {
  padding: 22px 18px 16px;
}
.accountCard::before {
  height: 3px;
  width: 46%;
  left: -46%;
  background: linear-gradient(90deg, transparent, #fff, var(--cyan), transparent);
  box-shadow: 0 0 18px var(--cyan);
  animation: beamSweep 16s linear infinite;
}
.accountCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(61,255,199,0.08), transparent 22%, transparent 78%, rgba(76,201,255,0.06));
}
@media (hover: hover) {
  .accountCard:hover, .summaryCard:hover, .scorePanel:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 0 0 1px rgba(61, 255, 199, 0.28), 0 24px 50px rgba(61, 255, 199, 0.16);
  }
}
.statusBadge {
  border-color: rgba(61, 255, 199, 0.55);
  box-shadow: 0 0 16px rgba(61, 255, 199, 0.25);
  letter-spacing: 0.08em;
}
.statusBadge.warning {
  border-color: rgba(255, 191, 88, 0.55);
  box-shadow: 0 0 16px rgba(255, 191, 88, 0.28);
}
.statusBadge.danger {
  border-color: rgba(255, 111, 125, 0.6);
  box-shadow: 0 0 16px rgba(255, 111, 125, 0.32);
}
.planPill {
  font-family: var(--hud);
  letter-spacing: 0.08em;
  border: 1px solid rgba(61, 255, 199, 0.25);
  box-shadow: 0 0 12px rgba(61, 255, 199, 0.12);
}
.meterProgress {
  height: 11px;
  background: #071018;
  box-shadow: inset 0 0 8px rgba(61, 255, 199, 0.15);
}
.meterProgress::-webkit-progress-value {
  background: linear-gradient(90deg, #0ea5a0, var(--cyan), #fff);
  box-shadow: 0 0 16px rgba(61, 255, 199, 0.8);
}
.primaryButton, .loginCard button[type="submit"] {
  font-family: var(--hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(61, 255, 199, 0.35), inset 0 0 12px rgba(255,255,255,0.2);
}
.primaryButton:hover, .loginCard button[type="submit"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 32px rgba(61, 255, 199, 0.55);
}

.loginView {
  background:
    radial-gradient(600px 240px at 50% 18%, rgba(61, 255, 199, 0.16), transparent 50%);
}
.loginCard {
  box-shadow: 0 0 60px rgba(61, 255, 199, 0.16);
}

.scoreHero strong {
  font-family: var(--display);
  font-size: 64px;
  text-shadow: 0 0 28px rgba(61, 255, 199, 0.55);
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "telemetry telemetry";
    gap: 10px 12px;
    padding: 12px 12px 10px;
  }
  .userPanel { justify-self: end; width: auto; }
  .userPanel .hudClock { justify-self: end; width: auto; }
  .hudTelemetry { grid-template-columns: 1fr 1fr 1fr; width: 100%; }
}
@media (max-width: 700px) {
  .hudTelemetry { grid-template-columns: 1fr 1fr 1fr; width: 100%; gap: 8px; }
  .summaryCard { min-height: 0; padding: 12px 8px 12px; }
  .gaugeWrap, .gaugeRing { width: 90px; height: 90px; }
  .gaugeWrap { margin: 4px 0; }
  .gaugeWrap strong { font-size: 24px; }
  .topbar h1 { font-size: 22px; letter-spacing: 0.02em; }
  .eyebrow { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
  .hudLive { margin-left: 0; }

  .fxFloor { opacity: 0.35; }
  #fxCanvas { opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  #bootOverlay, .summaryCard, .accountCard, .topbar::before { animation: none !important; }
  #bootOverlay { display: none; }
}
.gaugeWrap .jpText,
.gaugeWrap .countryInline {
  font-size: 14px;
  line-height: 1.2;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 0 10px;
}
.gaugeWrap .countryInline img,
.gaugeWrap .countryInline svg {
  width: 22px;
  height: 22px;
}
.gaugeWrap .countryInline span {
  font-family: var(--hud);
  letter-spacing: 0.08em;
}

.meterTrack, .scoreDimension .meterTrack {
  position: relative;
  display: block;
  height: 10px;
  margin: 10px 0 8px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(61, 255, 199, 0.14);
}
.meterFill {
  --p: 0;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  overflow: hidden;
  background: linear-gradient(90deg, #128f86, var(--cyan) 72%, #f4fffb);
  transform: scaleX(var(--p));
  transform-origin: left center;
}
/* CSP-safe remaining fill: data-p is remaining 0-100 (100 = full bar) */
.meterFill[data-p="0"] { transform: scaleX(0.00); }
.meterFill[data-p="1"] { transform: scaleX(0.01); }
.meterFill[data-p="2"] { transform: scaleX(0.02); }
.meterFill[data-p="3"] { transform: scaleX(0.03); }
.meterFill[data-p="4"] { transform: scaleX(0.04); }
.meterFill[data-p="5"] { transform: scaleX(0.05); }
.meterFill[data-p="6"] { transform: scaleX(0.06); }
.meterFill[data-p="7"] { transform: scaleX(0.07); }
.meterFill[data-p="8"] { transform: scaleX(0.08); }
.meterFill[data-p="9"] { transform: scaleX(0.09); }
.meterFill[data-p="10"] { transform: scaleX(0.10); }
.meterFill[data-p="11"] { transform: scaleX(0.11); }
.meterFill[data-p="12"] { transform: scaleX(0.12); }
.meterFill[data-p="13"] { transform: scaleX(0.13); }
.meterFill[data-p="14"] { transform: scaleX(0.14); }
.meterFill[data-p="15"] { transform: scaleX(0.15); }
.meterFill[data-p="16"] { transform: scaleX(0.16); }
.meterFill[data-p="17"] { transform: scaleX(0.17); }
.meterFill[data-p="18"] { transform: scaleX(0.18); }
.meterFill[data-p="19"] { transform: scaleX(0.19); }
.meterFill[data-p="20"] { transform: scaleX(0.20); }
.meterFill[data-p="21"] { transform: scaleX(0.21); }
.meterFill[data-p="22"] { transform: scaleX(0.22); }
.meterFill[data-p="23"] { transform: scaleX(0.23); }
.meterFill[data-p="24"] { transform: scaleX(0.24); }
.meterFill[data-p="25"] { transform: scaleX(0.25); }
.meterFill[data-p="26"] { transform: scaleX(0.26); }
.meterFill[data-p="27"] { transform: scaleX(0.27); }
.meterFill[data-p="28"] { transform: scaleX(0.28); }
.meterFill[data-p="29"] { transform: scaleX(0.29); }
.meterFill[data-p="30"] { transform: scaleX(0.30); }
.meterFill[data-p="31"] { transform: scaleX(0.31); }
.meterFill[data-p="32"] { transform: scaleX(0.32); }
.meterFill[data-p="33"] { transform: scaleX(0.33); }
.meterFill[data-p="34"] { transform: scaleX(0.34); }
.meterFill[data-p="35"] { transform: scaleX(0.35); }
.meterFill[data-p="36"] { transform: scaleX(0.36); }
.meterFill[data-p="37"] { transform: scaleX(0.37); }
.meterFill[data-p="38"] { transform: scaleX(0.38); }
.meterFill[data-p="39"] { transform: scaleX(0.39); }
.meterFill[data-p="40"] { transform: scaleX(0.40); }
.meterFill[data-p="41"] { transform: scaleX(0.41); }
.meterFill[data-p="42"] { transform: scaleX(0.42); }
.meterFill[data-p="43"] { transform: scaleX(0.43); }
.meterFill[data-p="44"] { transform: scaleX(0.44); }
.meterFill[data-p="45"] { transform: scaleX(0.45); }
.meterFill[data-p="46"] { transform: scaleX(0.46); }
.meterFill[data-p="47"] { transform: scaleX(0.47); }
.meterFill[data-p="48"] { transform: scaleX(0.48); }
.meterFill[data-p="49"] { transform: scaleX(0.49); }
.meterFill[data-p="50"] { transform: scaleX(0.50); }
.meterFill[data-p="51"] { transform: scaleX(0.51); }
.meterFill[data-p="52"] { transform: scaleX(0.52); }
.meterFill[data-p="53"] { transform: scaleX(0.53); }
.meterFill[data-p="54"] { transform: scaleX(0.54); }
.meterFill[data-p="55"] { transform: scaleX(0.55); }
.meterFill[data-p="56"] { transform: scaleX(0.56); }
.meterFill[data-p="57"] { transform: scaleX(0.57); }
.meterFill[data-p="58"] { transform: scaleX(0.58); }
.meterFill[data-p="59"] { transform: scaleX(0.59); }
.meterFill[data-p="60"] { transform: scaleX(0.60); }
.meterFill[data-p="61"] { transform: scaleX(0.61); }
.meterFill[data-p="62"] { transform: scaleX(0.62); }
.meterFill[data-p="63"] { transform: scaleX(0.63); }
.meterFill[data-p="64"] { transform: scaleX(0.64); }
.meterFill[data-p="65"] { transform: scaleX(0.65); }
.meterFill[data-p="66"] { transform: scaleX(0.66); }
.meterFill[data-p="67"] { transform: scaleX(0.67); }
.meterFill[data-p="68"] { transform: scaleX(0.68); }
.meterFill[data-p="69"] { transform: scaleX(0.69); }
.meterFill[data-p="70"] { transform: scaleX(0.70); }
.meterFill[data-p="71"] { transform: scaleX(0.71); }
.meterFill[data-p="72"] { transform: scaleX(0.72); }
.meterFill[data-p="73"] { transform: scaleX(0.73); }
.meterFill[data-p="74"] { transform: scaleX(0.74); }
.meterFill[data-p="75"] { transform: scaleX(0.75); }
.meterFill[data-p="76"] { transform: scaleX(0.76); }
.meterFill[data-p="77"] { transform: scaleX(0.77); }
.meterFill[data-p="78"] { transform: scaleX(0.78); }
.meterFill[data-p="79"] { transform: scaleX(0.79); }
.meterFill[data-p="80"] { transform: scaleX(0.80); }
.meterFill[data-p="81"] { transform: scaleX(0.81); }
.meterFill[data-p="82"] { transform: scaleX(0.82); }
.meterFill[data-p="83"] { transform: scaleX(0.83); }
.meterFill[data-p="84"] { transform: scaleX(0.84); }
.meterFill[data-p="85"] { transform: scaleX(0.85); }
.meterFill[data-p="86"] { transform: scaleX(0.86); }
.meterFill[data-p="87"] { transform: scaleX(0.87); }
.meterFill[data-p="88"] { transform: scaleX(0.88); }
.meterFill[data-p="89"] { transform: scaleX(0.89); }
.meterFill[data-p="90"] { transform: scaleX(0.90); }
.meterFill[data-p="91"] { transform: scaleX(0.91); }
.meterFill[data-p="92"] { transform: scaleX(0.92); }
.meterFill[data-p="93"] { transform: scaleX(0.93); }
.meterFill[data-p="94"] { transform: scaleX(0.94); }
.meterFill[data-p="95"] { transform: scaleX(0.95); }
.meterFill[data-p="96"] { transform: scaleX(0.96); }
.meterFill[data-p="97"] { transform: scaleX(0.97); }
.meterFill[data-p="98"] { transform: scaleX(0.98); }
.meterFill[data-p="99"] { transform: scaleX(0.99); }
.meterFill[data-p="100"] { transform: scaleX(1.00); }

.meterFill.ok {
  background: linear-gradient(90deg, #128f86, #3dffc7 72%, #f4fffb);
}
.meterFill.warn {
  background: linear-gradient(90deg, #c47a12, #ffcc66 70%, #ffe7b3);
}
.meterFill.danger {
  background: linear-gradient(90deg, #b42238, #ff5d73 70%, #ffd0d6);
}
.scoreDimension.ok b { color: #3dffc7; }
.scoreDimension.warn b { color: #ffcc66; }
.scoreDimension.danger b { color: #ff5d73; }
.meterLabel strong { color: var(--muted); }
.meterLabel strong.ok { color: #3dffc7; text-shadow: 0 0 10px rgba(61, 255, 199, 0.35); }
.meterLabel strong.warn { color: #ffcc66; text-shadow: 0 0 10px rgba(255, 204, 102, 0.4); }
.meterLabel strong.danger { color: #ff5d73; text-shadow: 0 0 10px rgba(255, 93, 115, 0.45); }
.meterReset strong.liveCountdown.ok { color: #3dffc7; text-shadow: 0 0 10px rgba(61, 255, 199, 0.35); }
.meterReset strong.liveCountdown.warn { color: #ffcc66; text-shadow: 0 0 10px rgba(255, 204, 102, 0.4); }
.meterReset strong.liveCountdown.danger { color: #ff5d73; text-shadow: 0 0 10px rgba(255, 93, 115, 0.45); }
.scoreDimension.ok .meterTrack { box-shadow: inset 0 0 0 1px rgba(61,255,199,0.18); }
.scoreDimension.warn .meterTrack { box-shadow: inset 0 0 0 1px rgba(255,204,102,0.28); }
.scoreDimension.danger .meterTrack { box-shadow: inset 0 0 0 1px rgba(255,93,115,0.28); }
.meterFill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.0), rgba(255,255,255,.55), transparent);
  animation: fillShine 2.2s ease-in-out infinite;
}
@keyframes fillShine {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(280%); }
}
.meterProgress { display: none; }
.bootBar {
  position: relative;
  overflow: hidden;
}
.bootBar i {
  position: relative;
  overflow: hidden;
}
.bootBar i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: fillShine 1s linear infinite;
}
.hudBody {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: 16px;
}
.quotaDial {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 132px;
}
.quotaRing {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
}
.quotaRing svg {
  position: absolute;
  inset: 0;
  width: 120px;
  height: 120px;
  transform: rotate(-90deg);
}
.quotaTrack, .quotaBar {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: butt;
}
.quotaTrack { stroke: rgba(255, 255, 255, 0.14); }
.quotaBar { stroke: #3dffc7; }
.quotaRing.ok .quotaBar { stroke: #3dffc7; }
.quotaRing.warn .quotaBar { stroke: #ffcc66; }
.quotaRing.danger .quotaBar { stroke: #ff5d73; }
.quotaFace {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-variant-numeric: tabular-nums;
}
.quotaFace b {
  font-family: ui-monospace, "Share Tech Mono", "SF Pro Display", "Microsoft YaHei", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #f4fffb;
}
.quotaRing.ok .quotaFace b,
.quotaRing.ok .quotaFace em { color: #3dffc7; text-shadow: 0 0 12px rgba(61, 255, 199, 0.35); }
.quotaRing.warn .quotaFace b,
.quotaRing.warn .quotaFace em { color: #ffcc66; text-shadow: 0 0 12px rgba(255, 204, 102, 0.4); }
.quotaRing.danger .quotaFace b,
.quotaRing.danger .quotaFace em { color: #ff5d73; text-shadow: 0 0 12px rgba(255, 93, 115, 0.45); }
.quotaFace em {
  font-family: ui-monospace, "Share Tech Mono", monospace;
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
  line-height: 1;
}
.quotaCaption {
  font-family: ui-monospace, "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.hudReadouts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.readout {
  padding: 10px 12px;
  border: 1px solid rgba(61, 255, 199, 0.14);
  background: rgba(0, 0, 0, 0.28);
  min-width: 0;
}
.readout span {
  display: block;
  font-family: var(--hud);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--cyan);
}
.readout strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-all;
}
.readout.expire span, .readout.expire strong { color: #ff8b97; }
@media (max-width: 700px) {
  .hudBody { grid-template-columns: 1fr; justify-items: center; }
  .hudReadouts { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .meterFill::after, .bootBar i::after { animation: none !important; }
}

/* ===== perf: drop heavy FX, keep cheap 流光 ===== */
#fxCanvas, .fxFloor, .fxScan { display: none !important; }
.fxVignette { opacity: 0.55; }
body::before { animation: none !important; opacity: 0.22; }
.summaryCard, .accountCard, .loginCard, .scorePanel, .scoreHero, .scoreVerdict,
.scoreControls, .scoreAskPanel, .dataTable, .authDropZone, .scoreHistory, .emptyState, .topbar {
  backdrop-filter: none !important;
}
@media (hover: hover) {
  .accountCard:hover, .summaryCard:hover, .scorePanel:hover {
    transform: none;
  }
}

/* ===== final tidy ===== */
#fxLayer { display: none !important; }
#bootOverlay { display: none !important; }
.meterFill::after, .bootBar i::after { display: none !important; animation: none !important; }
.hudLive i, .statusBadge::before { animation: none !important; }
.fxEnter { animation: none !important; opacity: 1; filter: none; transform: none; }
.gaugeValue, .quotaDial svg, .gaugeRing { filter: none !important; }
.summaryCard, .accountCard { will-change: auto; }

/* ===== AI briefing HUD (no FX) ===== */
.scoreAskA .aiAnswer {
  box-shadow: inset 0 0 0 1px rgba(61, 255, 199, 0.06);
}
.scoreAskA .aiAnswer h1,
.scoreAskA .aiAnswer h2,
.scoreAskA .aiAnswer h3 {
  font-family: var(--display);
}
.scoreAskA .aiAnswer .aiHolo {
  background:
    linear-gradient(180deg, rgba(61, 255, 199, 0.05), transparent 42%),
    rgba(5, 16, 24, 0.92);
}
.scoreAskQ span { opacity: 0.72; }


/* ===== ui32 mobile tidy ===== */
@media (max-width: 800px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "telemetry telemetry";
  }
  .hudTelemetry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 8px;
  }
  .summaryGrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .hudTelemetry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 8px;
  }
  .summaryGrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .summaryCard {
    min-height: 0;
    height: 100%;
    padding: 12px 8px 10px;
    align-content: start;
  }
  .gaugeWrap, .gaugeRing { width: 90px; height: 90px; }
  .gaugeWrap strong { font-size: 24px; }
  .tabs { gap: 8px; }
  .tabs button { min-height: 44px; }
}
@media (max-width: 520px) {
  .hudTelemetry { grid-template-columns: 1fr 1fr 1fr; width: 100%; }
  .summaryGrid { grid-template-columns: 1fr 1fr; }
  .gaugeWrap, .gaugeRing { width: 88px; height: 88px; }
}

/* ui46: compact header HUD cluster + random 流光 direction */
.topbar {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand actions"
    "telemetry telemetry";
  align-items: start;
  column-gap: 16px;
}
.topbar .userPanel {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: start;
  justify-self: end;
  gap: 6px;
  width: auto;
  max-width: none;
  min-width: 0;
}
.topbar .userPanel .hudClock,
.topbar .hudClock {
  grid-column: auto;
  justify-self: end;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  min-width: 0;
  height: auto;
  font-family: var(--hud), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(61, 255, 199, 0.28);
}
.topbar .userToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
  width: auto;
  max-width: 100%;
}
.topbar .userMeta,
.topbar .userPanel > div.userMeta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: left;
  margin: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(61, 255, 199, 0.16);
  border-radius: 999px;
  background: rgba(6, 14, 22, 0.55);
  box-shadow: none;
  flex: 0 0 auto;
}
.topbar .userMeta strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #eaf6ff;
  text-transform: uppercase;
  white-space: nowrap;
}
.topbar .userMeta small,
.topbar .userPanel small {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 3px 8px;
  min-height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(61, 255, 199, 0.22);
  background: rgba(61, 255, 199, 0.1);
  color: var(--cyan);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}
.topbar .countryDisplay {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(61, 255, 199, 0.16);
  background: rgba(6, 14, 22, 0.45);
  color: var(--text);
  box-shadow: none;
}
.topbar .countryDisplay .countryInline {
  gap: 6px;
}
.topbar #logout.iconButton,
.topbar .ghostButton {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: #9fb3c4;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}
.topbar #logout.iconButton:hover,
.topbar .ghostButton:hover {
  border-color: rgba(61, 255, 199, 0.35);
  color: #eaf6ff;
  background: rgba(61, 255, 199, 0.06);
}

/* reverse 流光; durations stay 16 / 11 / 18 / 14 / 28s */
.beamReverse {
  animation-direction: reverse;
}
.summaryCard.beamReverse {
  animation-direction: reverse;
}
.accountCard.beamReverse::before,
.topbar.beamReverse::before {
  animation-direction: reverse;
}
.primaryButton.beamReverse::after,
.loginCard button[type="submit"].beamReverse::after {
  animation-direction: reverse;
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "telemetry telemetry";
  }
  .topbar .userPanel {
    width: auto;
    max-width: none;
  }
}
@media (max-width: 700px) {
  .topbar .userPanel {
    max-width: none;
    width: auto;
    min-width: 0;
  }
  .topbar .hudClock {
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .topbar .userToolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
    gap: 8px;
  }
  .topbar .userMeta,
  .topbar .countryDisplay,
  .topbar #logout.iconButton {
    min-height: 44px;
  }
}
@media (max-width: 420px) {
  .topbar .userPanel {
    max-width: none;
    width: auto;
    min-width: 0;
  }
  .topbar .userToolbar {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .topbar .userMeta {
    flex: 0 1 auto;
  }
}

/* ===== mhdr1: phone Command Deck — stack, never split CJK words ===== */
.topbar h1 {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}
.topbar h1 .titleLead,
.topbar h1 .titleTail {
  display: inline;
  white-space: nowrap;
  min-width: max-content;
}
.topbar .brandTags,
.topbar .subtitle.brandTags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  color: var(--muted);
}
.topbar .brandTags span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: max-content;
  padding: 3px 9px;
  border: 1px solid rgba(61, 255, 199, 0.16);
  border-radius: 999px;
  background: rgba(6, 14, 22, 0.45);
  color: #9fb3c4;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    grid-template-areas:
      "brand actions"
      "telemetry telemetry";
    column-gap: 12px;
    row-gap: 10px;
  }
  .topbar h1 {
    font-size: clamp(18px, 3.2vw, 28px);
    letter-spacing: 0.02em;
  }
  .topbar .userToolbar {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .topbar .hudTelemetry {
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "actions"
      "telemetry";
    align-items: stretch;
    gap: 10px;
    padding: 12px 12px 12px;
    column-gap: 10px;
  }
  .brandBlock {
    grid-area: brand;
    width: 100%;
    min-width: 0;
  }
  .topbar .eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    letter-spacing: 0.12em;
  }
  .topbar .hudLive {
    margin-left: 0;
    flex: 0 0 auto;
  }
  .topbar h1 {
    display: block;
    width: 100%;
    margin: 8px 0 8px;
    font-size: clamp(17px, 5.1vw, 22px);
    letter-spacing: 0.01em;
    line-height: 1.25;
    word-break: keep-all;
    overflow-wrap: normal;
    line-break: strict;
  }
  .topbar h1 .titleLead,
  .topbar h1 .titleTail {
    display: inline;
    white-space: nowrap;
    min-width: max-content;
  }
  .topbar .userPanel {
    grid-area: actions;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 8px;
  }
  .topbar .userToolbar {
    order: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 8px;
  }
  .topbar .userPanel .hudClock,
  .topbar .hudClock {
    order: 2;
    align-self: flex-start;
    justify-self: start;
    font-size: 11px;
    letter-spacing: 0.08em;
    min-width: 0;
    padding: 0;
  }
  .topbar .userMeta,
  .topbar .userPanel > div.userMeta {
    flex: 0 1 auto;
    min-height: 44px;
    max-width: 100%;
  }
  .topbar .countryDisplay,
  .topbar #logout.iconButton,
  .topbar .ghostButton {
    min-height: 44px;
    min-width: 44px;
  }
  .topbar .hudTelemetry {
    grid-area: telemetry;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    gap: 8px;
    width: 100%;
  }
  .topbar .telItem {
    min-width: 0;
    min-height: 48px;
    padding: 8px 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 375px) {
  .topbar h1 {
    font-size: 17px;
    letter-spacing: 0;
  }
  .topbar .eyebrow {
    letter-spacing: 0.1em;
    font-size: 10px;
  }
  .topbar .brandTags span {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ===== mhdr2: center action labels; never overlay 凭据 ===== */
.primaryButton,
.secondaryButton,
.dangerButton,
.iconButton,
.ghostButton,
.rowActions button,
.accountCard footer button,
.pageActions button,
.emptyActions button,
.sectionActions button,
.loginCard button,
.modalActions button,
.headingActions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}
.primaryButton,
.loginCard button[type="submit"] {
  letter-spacing: 0.06em;
}

@media (max-width: 700px) {
  .pageActions .primaryButton,
  .pageActions .secondaryButton,
  .emptyActions .primaryButton,
  .emptyActions .secondaryButton {
    width: 100%;
    letter-spacing: 0.04em;
  }
  .tableRow > span[data-label] > small {
    grid-row: auto !important;
    grid-column: 2;
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tableRow > span[data-label="凭据"] {
    align-items: start;
  }
  .tableRow > span[data-label="凭据"] > small + small {
    grid-row: auto !important;
  }
  .tableRow > span .statusBadge {
    justify-self: start;
  }
  .tableRow > span[data-label="绑定国家"] > * {
    justify-self: end;
  }
  .tableRow > span.rowActions {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tableRow > span.rowActions::before {
    flex: 1 0 100%;
  }
  .tableRow > span.rowActions button,
  .pageActions button,
  .accountCard footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 44px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===== score3: 评分记录 — block layout, no flex on WebKit button ===== */
#scoreTab button.scoreRecord,
button.scoreRecord,
.scoreRecord {
  display: block !important;
  height: auto !important;
  /* score4: removed min-height: 0 !important — it shrank rows in short grid */
  padding: 10px 12px;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
}
.scoreRecord .scoreRecordBody {
  display: block !important;
  height: auto !important;
}
.scoreRecord .scoreRecordBody strong,
.scoreRecord .scoreRecordBody small,
.scoreRecord .scoreRecordBody .scoreRecordScope {
  display: block !important;
  position: static !important;
  float: none !important;
  width: auto;
  height: auto !important;
  margin: 0 0 6px 0;
  line-height: 1.4 !important;
  white-space: normal;
}
.scoreRecord .scoreRecordBody .scoreRecordScope { margin-bottom: 0; }

/* score4: list rows must not shrink; overlap was min-height:0 + short grid */
#scoreTab .scoreHistory,
.scoreHistory {
  max-height: none;
}
@media (max-width: 700px) {
  #scoreTab .scoreHistory,
  .scoreHistory {
    max-height: min(70vh, 560px);
  }
}
.scoreRecordList,
.scoreHistoryList,
#scoreTab .scoreRecordList {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  grid-auto-rows: unset;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
#scoreTab button.scoreRecord,
button.scoreRecord,
.scoreRecord {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 72px !important; /* enough for 3 lines */
  max-height: none !important;
  margin: 0 !important;
  overflow: visible !important;
  align-self: stretch;
}
.scoreRecord .scoreRecordBody {
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}
.scoreRecord .scoreRecordBody strong,
.scoreRecord .scoreRecordBody small,
.scoreRecord .scoreRecordBody .scoreRecordScope {
  display: block !important;
  position: static !important;
  float: none !important;
  height: auto !important;
  margin: 0 0 6px 0 !important;
  line-height: 1.4 !important;
}
.scoreRecord .scoreRecordBody .scoreRecordScope { margin-bottom: 0 !important; }


/* ===== hdrfill: fill empty right half of mobile topbar ===== */
@media (min-width: 641px) and (max-width: 900px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(118px, 0.9fr) !important;
    grid-template-areas:
      "brand actions"
      "telemetry telemetry" !important;
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }
  .brandBlock { grid-area: brand; min-width: 0; }
  .topbar .userPanel {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
  }
  .topbar .hudTelemetry {
    grid-area: telemetry !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(118px, 0.9fr) !important;
    grid-template-areas:
      "brand actions"
      "telemetry telemetry" !important;
    column-gap: 10px;
    row-gap: 10px;
    align-items: start;
  }
  .brandBlock { grid-area: brand; min-width: 0; }
  .topbar .userPanel {
    grid-area: actions !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px;
    width: 100%;
  }
  .topbar .userPanel .hudClock,
  .topbar .hudClock {
    order: 0 !important;
    align-self: stretch !important;
    width: 100%;
    text-align: right;
    font-size: clamp(16px, 5.4vw, 22px);
    letter-spacing: 0.14em;
    padding: 0;
    min-height: 0;
  }
  .topbar .userToolbar {
    order: 1 !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 6px;
  }
  .topbar .userMeta,
  .topbar .countryDisplay,
  .topbar #logout.iconButton {
    flex: 1 1 auto;
    justify-content: center;
  }
  .topbar .hudTelemetry {
    grid-area: telemetry !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    width: 100%;
  }
}

/* ===== align1: fixed 5.5em label column so mobile card values share one vertical line ===== */
@media (max-width: 700px) {
  .tableRow > span,
  .tableRow > span[data-label] {
    display: grid !important;
    grid-template-columns: 5.5em minmax(0, 1fr) !important;
    column-gap: 10px;
    align-items: start;
  }
  .tableRow > span[data-label]::before {
    grid-column: 1;
    width: auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
  }
  .tableRow > span > *,
  .tableRow > span[data-label] > * {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    min-width: 0;
  }
  .tableRow > span[data-label="绑定国家"] > * {
    justify-self: start;
    text-align: left;
  }
  .tableRow > span.rowActions {
    display: grid !important;
    grid-template-columns: 5.5em minmax(0, 1fr) !important;
  }
  .tableRow > span.rowActions::before {
    grid-column: 1;
  }
  .tableRow > span.rowActions button {
    grid-column: 2;
  }
}
@media (max-width: 640px) {
  .tableRow > span,
  .tableRow > span[data-label] {
    display: grid !important;
    grid-template-columns: 5.5em minmax(0, 1fr) !important;
    column-gap: 10px;
    align-items: start;
  }
  .tableRow > span[data-label]::before {
    grid-column: 1;
    width: auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
  }
  .tableRow > span > *,
  .tableRow > span[data-label] > * {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    min-width: 0;
  }
  .tableRow > span[data-label="绑定国家"] > * {
    justify-self: start;
    text-align: left;
  }
  .tableRow > span.rowActions {
    display: grid !important;
    grid-template-columns: 5.5em minmax(0, 1fr) !important;
  }
  .tableRow > span.rowActions::before {
    grid-column: 1;
  }
  .tableRow > span.rowActions button {
    grid-column: 2;
  }
}

@media (max-width: 700px) {
  .tableRow > span.rowActions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    grid-template-columns: none !important;
  }
  .tableRow > span.rowActions::before {
    flex: 0 0 5.5em;
    width: 5.5em;
    max-width: 5.5em;
    grid-column: auto !important;
  }
  .tableRow > span.rowActions button {
    flex: 1 1 0;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .tableRow > span.rowActions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 8px;
    grid-template-columns: none !important;
  }
  .tableRow > span.rowActions::before {
    flex: 0 0 5.5em;
    width: 5.5em;
    max-width: 5.5em;
    grid-column: auto !important;
  }
  .tableRow > span.rowActions button {
    flex: 1 1 0;
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===== updpos: update time sits next to proxy, button stays right ===== */
.accountCard footer {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 12px;
  row-gap: 6px;
}
.accountCard footer .footerLead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.accountCard footer .nodeMeta {
  min-width: 0;
  max-width: 100%;
}
.cardUpdated {
  justify-self: start;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted, #8b93a7);
}
.cardUpdated.is-failed {
  color: #ffb2ba;
}
.accountCard footer button {
  flex: 0 0 auto;
  width: auto !important;
  white-space: nowrap;
}
.accountWarning {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 196, 87, 0.1);
  color: #ffd38a;
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 520px) {
  .accountCard footer {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
  }
  .accountCard footer button {
    width: auto !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .cardUpdated {
    font-size: 11px;
  }
}
@media (max-width: 390px) {
  .accountCard footer {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
  }
  .accountCard footer .footerLead {
    flex: 1 1 auto;
    min-width: 0;
  }
  .accountCard footer .cardUpdated {
    justify-self: start;
    text-align: left;
  }
  .accountCard footer button {
    align-self: center;
    width: auto !important;
  }
}

/* 20260818: digest time + score archive clear */
.scoreHistory header { align-items: flex-start; }
.scoreHistoryTools { flex: 0 0 auto; }
#scoreTab .scoreRecord > .scoreRecordBody,
.scoreRecord > .scoreRecordBody {
  display: block !important;
  width: auto;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 36px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.scoreRecordDelete {
  position: absolute;
  top: 8px;
  right: 8px;
}
@media (max-width: 700px) {
  .alertDigestRow { grid-template-columns: 1fr !important; }
  .scoreHistory header { flex-wrap: wrap; gap: 8px; }
  .scoreHistoryTools { width: 100%; justify-items: start; }
}


/* 20260819: ChatGPT nickname on LIVE ACCOUNTS details row */
.accountDetails summary .accountNick {
  flex: 1;
  min-width: 0;
  color: var(--cyan);
  font-family: var(--hud);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 10px rgba(61, 255, 199, 0.28);
}
.accountDetails summary .accountNick.is-empty {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.65;
  text-shadow: none;
}
.accountDetails summary small {
  flex: 0 0 auto;
  margin-left: 8px;
}