:root {
  color-scheme: dark;
  --bg: #071019;
  --panel: #0d1823;
  --line: #203241;
  --muted: #8aa0b2;
  --text: #eef7ff;
  --cyan: #43e6c4;
  --blue: #55a8ff;
  --amber: #ffca63;
  --red: #ff6f7d;
}
* {
  box-sizing: border-box;
}
html {
  min-height: 100%;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 80% 0%, #12334a 0, transparent 30%),
    radial-gradient(circle at 0 80%, #102726 0, transparent 30%), var(--bg);
  color: var(--text);
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
.hidden {
  display: none !important;
}
.shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0 70px;
}
.topbar,
.sectionTitle,
.accountHead,
.meterLabel,
.accountCard footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar h1 {
  margin: 5px 0 7px;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -1.5px;
}
.eyebrow {
  margin: 0;
  color: var(--cyan);
  font:
    700 11px/1.2 ui-monospace,
    monospace;
  letter-spacing: 2px;
}
.subtitle,
.accountHead p {
  margin: 0;
  color: var(--muted);
}
.primaryButton,
.accountCard button,
.loginCard button {
  border: 1px solid #2e6f69;
  color: #071914;
  background: var(--cyan);
  border-radius: 10px;
  padding: 11px 17px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.18s ease;
}
.primaryButton:hover,
.loginCard button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.iconButton {
  border: 1px solid var(--line);
  background: rgba(13, 24, 35, 0.85);
  color: var(--muted);
  border-radius: 10px;
  padding: 11px 14px;
  cursor: pointer;
}
.alert {
  margin: 25px 0 -9px;
  border: 1px solid rgba(255, 111, 125, 0.4);
  background: rgba(255, 111, 125, 0.08);
  color: #ffc1c8;
  border-radius: 12px;
  padding: 12px 15px;
}
.toastRegion {
  position: fixed;
  z-index: 1000;
  left: 22px;
  right: auto;
  bottom: 22px;
  max-width: min(420px, calc(100% - 44px));
  padding: 13px 16px;
  border: 1px solid #315064;
  border-radius: 12px;
  background: #112432;
  color: var(--text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.toastRegion.visible {
  opacity: 1;
  transform: translateY(0);
}
.toastRegion.loading {
  border-color: rgba(85, 168, 255, 0.6);
}
.toastRegion.success {
  border-color: rgba(67, 230, 196, 0.65);
  background: #0d2a29;
}
.toastRegion.warning {
  border-color: rgba(255, 202, 99, 0.65);
  background: #2b2617;
}
.toastRegion.error {
  border-color: rgba(255, 111, 125, 0.65);
  background: #321a22;
}
.summaryGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 34px 0 40px;
}
.summaryCard,
.accountCard,
.emptyState {
  background: linear-gradient(
    145deg,
    rgba(17, 31, 44, 0.96),
    rgba(10, 21, 31, 0.96)
  );
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.16);
}
.summaryCard {
  min-height: 142px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.summaryCard span,
.summaryCard small {
  color: var(--muted);
}
.summaryCard strong {
  margin: auto 0 2px;
  font-size: 38px;
}
.summaryCard .okText {
  color: #5dff8a;
}
.summaryCard .goldText {
  color: var(--amber);
}
.summaryCard .jpText {
  font-size: 27px;
  color: var(--amber);
}
.summaryCard.danger {
  border-color: rgba(255, 111, 125, 0.55);
}
.summaryCard.danger .jpText {
  color: var(--red);
}
.accountSection {
  margin-top: 38px;
}
.sectionTitle {
  margin-bottom: 18px;
}
.sectionTitle h2 {
  margin: 4px 0 0;
  font-size: 24px;
}
.sectionActions {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
  font-size: 13px;
}
#lastRefresh {
  display: grid;
  gap: 4px;
}
#lastRefresh small {
  color: #7596ad;
  font-size: 10px;
}
#lastRefresh small strong {
  color: var(--cyan);
}
.accountGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.accountCard {
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.accountCard:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.accountCard.error:before {
  background: linear-gradient(90deg, var(--red), transparent);
}
.accountHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  width: 100%;
}
.accountHead > div:first-child {
  min-width: 0;
}
.accountHead h3 {
  margin: 0 0 4px;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accountHead p {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statusBadge {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(67, 230, 196, 0.35);
  border-radius: 99px;
  color: var(--cyan);
  background: rgba(67, 230, 196, 0.12);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}
.statusBadge::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  content: "";
}
.statusBadge.pending {
  border-color: rgba(255, 190, 82, 0.35);
  color: var(--amber);
  background: rgba(255, 190, 82, 0.1);
}
.statusBadge.error {
  border-color: rgba(255, 111, 125, 0.35);
  color: #ff9ca6;
  background: rgba(255, 111, 125, 0.12);
}
.statusBadge.warning {
  border-color: rgba(255, 191, 88, 0.5);
  color: #ffbf58;
  background: rgba(255, 191, 88, 0.14);
  box-shadow: 0 0 16px rgba(255, 191, 88, 0.22);
}
.statusBadge.danger {
  border-color: rgba(255, 111, 125, 0.55);
  color: #ff6f7d;
  background: rgba(255, 111, 125, 0.16);
  box-shadow: 0 0 16px rgba(255, 111, 125, 0.3);
}
.statusBadge.warning::before,
.statusBadge.danger::before {
  animation: none;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.planRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 13px 14px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
  gap: 14px;
}
.planPill {
  font-weight: 850;
}
.renewText {
  font-size: 12px;
  color: var(--muted);
}
.dateGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.dateGrid div {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid #1c3140;
  border-radius: 10px;
  min-width: 0;
  text-align: center;
}
.dateGrid span {
  color: var(--muted);
  font-size: 11px;
}
.dateGrid strong {
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
  word-break: keep-all;
}
.dateGrid .membershipStart {
  border-color: rgba(67, 230, 196, 0.35);
  background: rgba(67, 230, 196, 0.035);
}
.dateGrid .membershipStart span,
.dateGrid .membershipStart strong {
  color: var(--cyan);
}
.dateGrid .membershipExpiry {
  border-color: rgba(255, 111, 125, 0.35);
  background: rgba(255, 111, 125, 0.035);
}
.dateGrid .membershipExpiry span,
.dateGrid .membershipExpiry strong {
  color: #ff7f8c;
}
.meterBlock {
  margin-top: 19px;
}
.meterLabel {
  font-size: 13px;
}
.meterLabel strong {
  color: var(--cyan);
}
.meterProgress {
  display: block;
  width: 100%;
  height: 9px;
  margin: 10px 0 7px;
  overflow: hidden;
  appearance: none;
  border: 0;
  border-radius: 99px;
  background: #172a38;
}
.meterProgress::-webkit-progress-bar {
  border-radius: 99px;
  background: #172a38;
}
.meterProgress::-webkit-progress-value {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), #64f4af);
}
.meterProgress::-moz-progress-bar {
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), #64f4af);
}
.meterProgress.warn::-webkit-progress-value {
  background: linear-gradient(90deg, var(--amber), #ff9f54);
}
.meterProgress.warn::-moz-progress-bar {
  background: linear-gradient(90deg, var(--amber), #ff9f54);
}
.meterProgress.danger::-webkit-progress-value {
  background: linear-gradient(90deg, var(--red), #ff9f7d);
}
.meterProgress.danger::-moz-progress-bar {
  background: linear-gradient(90deg, var(--red), #ff9f7d);
}
.meterStats {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.meterStats strong {
  color: var(--text);
}
.meterReset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.meterReset > span {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 72px;
  padding: 9px 10px;
  border: 1px solid #1c3140;
  border-radius: 9px;
  background: rgba(67, 230, 196, 0.035);
  text-align: center;
}
.meterReset em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.04em;
}
.meterReset strong {
  overflow: visible;
  color: #cbe5f8;
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}
.meterReset.empty {
  display: block;
  color: var(--muted);
}
.accountDetails {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #1c3444;
  border-radius: 11px;
  background: rgba(8, 24, 34, 0.55);
}
.accountDetails summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px;
  color: #cde8fa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
  user-select: none;
}
.accountDetails summary::-webkit-details-marker {
  display: none;
}
.accountDetails summary small::after {
  color: var(--muted);
  content: "展开";
  font-size: 10px;
  font-weight: 500;
}
.accountDetails[open] summary {
  border-bottom: 1px solid #1c3444;
}
.accountDetails[open] summary small::after {
  content: "收起";
}
.accountDetails summary > span:first-child {
  flex: 0 0 auto;
}
.accountDetails summary .accountIdentity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.accountDetails summary .accountAvatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(61, 255, 199, 0.38);
  box-shadow: 0 0 8px rgba(61, 255, 199, 0.22);
  background: #07141c;
}
.accountDetails summary .accountNick {
  flex: 1;
  min-width: 0;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accountDetails summary .accountNick.is-empty {
  color: var(--muted);
  font-weight: 500;
  opacity: 0.7;
}
.accountDetails summary small {
  flex: 0 0 auto;
  margin-left: 8px;
}
.detailGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}
.detailCell {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #1c3140;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
  text-align: center;
}
.detailCell > span {
  color: var(--muted);
  font-size: 10px;
}
.detailCell > strong {
  overflow: visible;
  color: #cde4f5;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.detailCell.healthy > strong {
  color: var(--cyan);
}
.detailCell.warn > strong {
  color: var(--amber);
}
.detailCell.danger > strong {
  color: #ff8f9b;
}
.accountError {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 111, 125, 0.08);
  color: #ffb2ba;
  font-size: 12px;
  line-height: 1.5;
}
.accountCard footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: initial;
  column-gap: 12px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.nodeMeta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.nodeMeta .countryInline {
  flex: 0 0 auto;
}
.nodeIp {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.accountCard footer button {
  padding: 8px 12px;
  background: transparent;
  color: var(--text);
  border-color: #365063;
  flex: 0 0 auto;
  white-space: nowrap;
}
.accountCard footer.recoveryMode {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  row-gap: 12px;
}
.accountRecoveryActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.accountCard footer .accountRecoveryActions button {
  min-width: 0;
  min-height: 40px;
  padding: 8px 7px;
  border-color: rgba(67, 230, 196, .42);
  color: var(--green);
  background: rgba(67, 230, 196, .07);
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.accountCard footer .accountRecoveryActions button:hover {
  border-color: rgba(67, 230, 196, .82);
  background: rgba(67, 230, 196, .14);
}
.emptyState {
  padding: 55px 20px;
  text-align: center;
}
.emptyIcon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 15px;
  border-radius: 14px;
  background: #183d42;
  color: var(--cyan);
  font-size: 28px;
}
.emptyState h3 {
  margin: 0 0 8px;
}
.emptyState p {
  max-width: 520px;
  margin: 0 auto 18px;
  color: var(--muted);
  line-height: 1.7;
}
.emptyActions,
.pageActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.emptyActions button,
.pageActions button {
  margin: 0;
}
.authDropZone {
  display: grid;
  gap: 5px;
  margin: -6px 0 16px;
  padding: 18px;
  border: 1px dashed #376579;
  border-radius: 13px;
  background: rgba(85, 168, 255, 0.045);
  text-align: center;
  cursor: pointer;
  transition: 0.18s ease;
}
.authDropZone span {
  color: var(--muted);
  font-size: 12px;
}
.authDropZone.dragging,
.importHelp.dragging {
  border-color: var(--cyan);
  background: rgba(67, 230, 196, 0.12);
  box-shadow: 0 0 0 3px rgba(67, 230, 196, 0.08);
}
.loginView {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.loginCard {
  width: min(410px, 100%);
  padding: 32px;
  background: rgba(13, 24, 35, 0.96);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.brandMark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  background: var(--cyan);
  color: #071914;
  border-radius: 14px;
  font-weight: 950;
  font-size: 22px;
}
.loginCard h1 {
  margin: 7px 0 8px;
  font-size: 27px;
}
.loginCard > p:not(.eyebrow) {
  margin: 0 0 25px;
  color: var(--muted);
}
.loginCard label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.loginCard label + label {
  margin-top: 14px;
}
.loginCard input,
.loginCard select,
.userPanel select,
.modal select,
.modal input,
.modal textarea {
  width: 100%;
  border: 1px solid #2b4254;
  background: #08131d;
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
.loginCard input:focus,
.modal input:focus,
.modal textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(67, 230, 196, 0.1);
}
.loginCard label small,
.modal label small,
.modal details > small {
  color: #6f8799;
  line-height: 1.5;
}
.loginCard button {
  width: 100%;
  margin-top: 14px;
}
.loginCard .authSwitch {
  margin: 8px 0 0 !important;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.loginCard .linkButton {
  display: inline;
  width: auto;
  margin: 0;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--cyan);
  font-weight: 800;
}
.loginCard .linkButton:hover {
  transform: none;
  text-decoration: underline;
}
.formError {
  min-height: 20px;
  margin-top: 10px;
  color: #ff9ca6;
  font-size: 12px;
}
.userPanel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: end;
  justify-items: end;
  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,
.userPanel > div {
  display: grid;
  text-align: right;
}
.userPanel small {
  color: var(--muted);
  font-size: 11px;
}
.userPanel select {
  width: auto;
  min-width: 145px;
}
.countryFlag {
  width: 24px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.countryInline {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  color: inherit;
  white-space: nowrap;
}
.countryInline span,
.summaryCard .countryInline,
.summaryCard .countryInline span {
  color: inherit;
}
.countryDisplay {
  display: inline-flex;
  align-items: center;
  min-height: 43px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(13, 24, 35, 0.85);
  color: var(--text);
}
.countrySelect {
  background-image: var(--country-flag) !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 24px 16px !important;
  padding-left: 47px !important;
}
.tabs {
  display: flex;
  gap: 5px;
  margin-top: 32px;
  padding: 5px;
  border: 1px solid var(--line);
  background: rgba(8, 19, 29, 0.72);
  border-radius: 12px;
}
.tabs button {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 6px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
}
.tabs button.active {
  background: #17313e;
  color: var(--text);
}
.pageHeading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 38px 0 20px;
}
.pageHeading h2 {
  margin: 5px 0 6px;
  font-size: 28px;
}
.pageHeading p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}
.scorePrivacy { padding: 9px 13px; border: 1px solid rgba(67,230,196,.35); border-radius: 999px; color: var(--green); background: rgba(67,230,196,.07); font: inherit; font-size: 12px; cursor: pointer; transition: border-color .16s ease, background .16s ease, opacity .16s ease; }
.scorePrivacy:not(:disabled):hover { border-color: rgba(67,230,196,.8); background: rgba(67,230,196,.14); }
.scorePrivacy:disabled { cursor: not-allowed; opacity: .45; }
.scoreControls { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: end; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,24,35,.8); }
.scoreControls label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; }
.scoreControls select { min-height: 43px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #091721; color: var(--text); }
.scoreState { margin-top: 0; padding: 18px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }
.scoreState.loading { color: var(--cyan); border-color: rgba(72,211,255,.35); }
.scoreState.error { color: #ff9ca6; border-color: rgba(255,111,125,.4); }
.scoreSummary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; margin-top: 0; width: 100%; min-width: 0; }
.scoreHero,.scoreVerdict,.scorePanel { border: 1px solid var(--line); border-radius: 16px; background: rgba(11,24,35,.88); min-width: 0; }
.scoreHero { display: grid; place-items: center; align-content: center; gap: 7px; min-height: 210px; width: 100%; text-align: center; }
.scoreHero > span,.scorePanel header span { color: var(--muted); font-size: 11px; letter-spacing: .12em; }
.scoreHero > strong { font-size: 62px; line-height: 1; color: var(--green); }
.scoreHero > strong small { font-size: 14px; color: var(--muted); }
.scoreHero > em { padding: 5px 10px; border-radius: 999px; background: rgba(67,230,196,.1); color: var(--cyan); font-style: normal; font-weight: 800; }
.scoreHero > b { padding: 4px 10px; border-radius: 999px; background: rgba(67,230,196,.1); color: var(--cyan); font-weight: 800; }
.scoreHero.warning > strong,.scoreHero.warning > b,.scoreHero.warning > em { color: #ffbf58; }
.scoreHero.danger > strong,.scoreHero.danger > b,.scoreHero.danger > em { color: #ff6f7d; }
.scoreHero.warning > em,.scoreHero.warning > b { background: rgba(255,191,88,.14); }
.scoreHero.danger > em,.scoreHero.danger > b { background: rgba(255,111,125,.16); }
.scoreVerdict { padding: 25px; display: flex; flex-direction: column; justify-content: center; min-width: 0; width: 100%; overflow-wrap: anywhere; }
.scoreVerdict > span { color: var(--cyan); font-size: 12px; }
.scoreVerdict h3 { margin: 8px 0; font-size: 23px; }
.scoreVerdict p { margin: 0 0 15px; line-height: 1.75; color: #c8d9e5; }
.scoreVerdict small { color: var(--muted); }
.scoreGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 0; width: 100%; min-width: 0; }
.scoreChartsPanel { grid-column: 1 / -1; min-width: 0; width: 100%; }
.scoreCharts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; width: 100%; min-width: 0; }
.scoreCharts article { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,20,30,.65); }
.scoreCharts h4 { margin: 0 0 5px; text-align: center; color: #c8d9e5; }
.chartHelp { min-height: 18px; margin: 0; text-align: center; color: var(--muted); font-size: 11px; }
.scoreCharts canvas { display: block; width: 100%; max-width: 100%; }
.accountCompare { display: flex; flex-direction: column; gap: 12px; min-height: 0; height: auto; padding: 10px 2px 4px; overflow: visible; }
.accountCompareRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; }
.accountCompareLabel { grid-column: 1 / -1; color: #9cb9cc; font-size: 12px; line-height: 1.4; overflow: visible; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.accountCompareShort { display: none; }
.accountCompareFull { display: inline; overflow-wrap: anywhere; word-break: break-word; }
.accountCompareTrack { grid-column: 1; height: 16px; background: #173142; border-radius: 4px; overflow: hidden; }
.accountCompareTrack.tall { height: 20px; }
.accountCompareTrack > i { display: block; height: 100%; border-radius: 4px; }
.accountCompareScore { grid-column: 2; color: #eaf6ff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.accountCompareHead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.accountCompareHead span { color: #9cb9cc; font-size: 12px; overflow-wrap: anywhere; }
.accountCompareHead strong { color: #eaf6ff; font-size: 16px; }
.accountCompareScale { display: flex; justify-content: space-between; color: #9cb9cc; font-size: 11px; }
.accountCompareHint { margin: 4px 0 0; text-align: center; color: #9cb9cc; font-size: 12px; }
.scorePanel { padding: 20px; min-width: 0; }
.scorePanel > header,.scoreAccountCard > header,.scoreDimension > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scorePanel h3 { margin: 4px 0 0; }
.scorePanel header small { color: var(--muted); }
.scoreDimensions { display: grid; gap: 11px; margin-top: 16px; }
.scoreDimension { padding: 13px; border: 1px solid rgba(48,75,94,.75); border-radius: 11px; background: rgba(8,20,30,.55); }
.scoreDimension b { color: var(--green); }
.scoreDimension.ok b { color: #3dffc7; }
.scoreDimension.warn b { color: #ffcc66; }
.scoreDimension.danger b { color: #ff5d73; }
.scoreDimension progress { width: 100%; height: 8px; margin: 10px 0 4px; border: 0; border-radius: 20px; overflow: hidden; background: #172f3e; }
.scoreDimension progress::-webkit-progress-bar { background: #172f3e; }
.scoreDimension progress::-webkit-progress-value { background: linear-gradient(90deg,#20cbae,#66ecc9); border-radius: 20px; }
.scoreDimension progress::-moz-progress-bar { background: #43e6c4; }
.scoreDimension p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.scoreRecommendations { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.scoreRecommendations li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; color: #c8d9e5; }
.scoreRecommendations li b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: rgba(67,230,196,.12); color: var(--green); }
.scoreAccountsPanel { grid-column: 1/-1; }
.scoreAccounts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 12px; margin-top: 16px; }
.scoreAccountCard { min-width: 0; height: 100%; display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #0a1924; }
.scoreAccountCard > header strong { overflow-wrap: anywhere; word-break: break-word; }
.scoreAccountCard .scoreDimension { margin-top: 12px; }
.scoreEvidence { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 10px; margin-top: 10px; min-height: 0; }
.scoreEvidence section { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: visible; padding: 11px; border-radius: 10px; background: rgba(19,41,55,.65); }
.scoreEvidence h4 { margin: 0 0 7px; color: var(--cyan); }
.scoreEvidence ul { flex: 1 1 auto; margin: 0; padding-left: 17px; color: var(--muted); font-size: 12px; line-height: 1.65; overflow: visible; }
.accountRecovery { margin-top: 14px; padding: 11px 13px; border: 1px solid rgba(67,230,196,.35); border-radius: 10px; background: rgba(67,230,196,.08); color: var(--green); text-align: center; }
.dataTable {
  border: 1px solid var(--line);
  border-radius: 15px;
  overflow: hidden;
  background: rgba(11, 24, 35, 0.8);
}
.tableHead,
.tableRow {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr;
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
}
.tableHead {
  background: #122330;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}
.tableRow {
  border-top: 1px solid var(--line);
  min-height: 76px;
}
.tableRow > span {
  display: grid;
  gap: 4px;
}
.tableRow small {
  color: var(--muted);
}
.userColumns {
  grid-template-columns: 1.4fr 0.8fr 1fr 0.6fr 1fr;
}
.rowActions {
  display: flex !important;
  flex-direction: row;
  gap: 7px;
}
.rowActions button,
.secondaryButton,
.dangerButton {
  border: 1px solid #365063;
  background: transparent;
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
}
.rowActions .dangerButton,
.dangerButton {
  border-color: rgba(255, 111, 125, 0.4);
  color: #ff9ca6;
}
.tableEmpty {
  padding: 45px;
  text-align: center;
  color: var(--muted);
}
.modal {
  width: min(760px, calc(100% - 26px));
  max-height: 90vh;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0b1721;
  color: var(--text);
  box-shadow: 0 30px 100px #000;
}
.modal::backdrop {
  background: rgba(1, 6, 10, 0.78);
  backdrop-filter: blur(5px);
}
.modal form {
  padding: 24px;
  overflow: auto;
  max-height: 90vh;
}
.modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.modal h2 {
  margin: 5px 0 0;
}
.importHelp {
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid rgba(67, 230, 196, 0.25);
  border-radius: 11px;
  background: rgba(67, 230, 196, 0.055);
}
.importHelp p {
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
.importHelp code {
  color: var(--cyan);
  overflow-wrap: anywhere;
}
.importHelp button {
  margin: 0 8px 0 0;
}
.importHelp small {
  color: #6f8799;
}
.sessionSecurityNotice {
  padding: 15px 16px;
  border: 1px solid rgba(67, 230, 196, 0.38);
  border-radius: 12px;
  background: rgba(67, 230, 196, 0.08);
}
.sessionSecurityNotice strong {
  color: var(--mint);
}
.sessionSecurityNotice p,
.sessionLimit {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.sessionSteps {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.sessionSteps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sessionSteps li > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(67, 230, 196, 0.14);
  color: var(--mint);
  font-weight: 800;
}
.sessionSteps div {
  display: grid;
  gap: 3px;
}
.sessionSteps small {
  color: var(--muted);
  line-height: 1.5;
}
.sessionSteps a {
  color: var(--cyan);
  overflow-wrap: anywhere;
}
.sessionLimit {
  padding-left: 11px;
  border-left: 3px solid var(--amber);
}
.closeButton {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 27px;
  cursor: pointer;
}
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.modal label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
.modal > form > label {
  margin-top: 14px;
}
.modal textarea {
  resize: vertical;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}
.modal details {
  margin-top: 15px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.modal summary {
  cursor: pointer;
  color: var(--muted);
}
.tokenGrid {
  margin-top: 15px;
}
.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 20px;
}
.modalActions .primaryButton {
  width: auto;
}
.checkLabel {
  display: flex !important;
  align-items: center;
  align-self: end;
  height: 42px;
}
.checkLabel input {
  width: auto;
}
@media (max-width: 800px) {
  .scoreCharts { grid-template-columns: 1fr; }
  .scoreGrid,.scoreSummary { grid-template-columns: 1fr; }
  .scoreAccounts { grid-template-columns: 1fr; }
  .summaryGrid {
    grid-template-columns: repeat(2, 1fr);
  }
  .accountGrid {
    grid-template-columns: 1fr;
  }
  .tableHead {
    display: none;
  }
  .tableRow,
  .userColumns {
    grid-template-columns: 1fr 1fr;
  }
  .formGrid {
    grid-template-columns: 1fr;
  }
  .userPanel {
    width: auto;
    flex-wrap: nowrap;
  }
  .userPanel > div,
  .userMeta {
    text-align: right;
    margin-right: 0;
  }
  .dateGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .scoreControls { grid-template-columns: 1fr; }
  .scoreControls button { width: 100%; }
  .scoreEvidence { grid-template-columns: 1fr; }
  .shell {
    width: min(100% - 22px, 1180px);
    padding-top: 24px;
  }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .summaryGrid {
    gap: 10px;
    margin-top: 24px;
  }
  .summaryCard {
    min-height: 118px;
    padding: 15px;
  }
  .summaryCard strong {
    font-size: 30px;
  }
  .summaryCard .jpText {
    font-size: 22px;
  }
  .accountCard {
    padding: 17px;
  }
  .accountHead {
    gap: 10px;
  }
  .accountHead h3 {
    font-size: 15px;
  }
  .planRow {
    margin-top: 16px;
    padding: 12px;
  }
  .dateGrid {
    gap: 8px;
    margin-top: 12px;
  }
  .dateGrid div {
    padding: 10px;
  }
  .meterBlock {
    margin-top: 16px;
  }
  .accountCard footer {
    gap: 10px;
    margin-top: 18px;
    padding-top: 14px;
  }
  .tabs {
    overflow: hidden;
  }
  .tabs button {
    white-space: nowrap;
  }
  .pageHeading,
  .sectionTitle {
    align-items: flex-start;
    flex-direction: column;
  }
  .pageHeading .primaryButton {
    width: 100%;
  }
  .pageActions {
    width: 100%;
  }
  .pageActions button {
    width: 100%;
  }
  .sectionActions {
    width: 100%;
    justify-content: space-between;
  }
  .tableRow,
  .userColumns {
    grid-template-columns: 1fr;
  }
  .modal form {
    padding: 18px;
  }
  .countryDisplay {
    min-width: 130px;
  }
  .loginCard {
    padding: 25px 20px;
  }
  .toastRegion {
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  }
}

@media (max-width: 440px) {
  .meterReset,
  .detailGrid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 410px) {
  .dateGrid {
    grid-template-columns: 1fr;
  }
}


/* ===== OLED black + neon + phone-first ===== */
:root {
  --bg: #050505;
  --panel: #0b0b0d;
  --line: rgba(255, 255, 255, 0.08);
  --muted: #8b93a7;
  --text: #f2f4f8;
  --cyan: #3dffc7;
  --mint: #3dffc7;
  --green: #3dffc7;
  --blue: #5ad0ff;
  --amber: #ffcc66;
  --gold: #d4af37;
  --red: #ff5d73;
  --glass: rgba(12, 12, 14, 0.86);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --tap: 46px;
}
html, body { background: #000; }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  font-family: "SF Pro Display", Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(720px 280px at 80% -12%, rgba(61, 255, 199, 0.09), transparent 58%),
    radial-gradient(640px 260px at 0% 110%, rgba(90, 208, 255, 0.07), transparent 55%),
    #050505;
  -webkit-tap-highlight-color: transparent;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.35;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 14%, transparent 86%, rgba(0,0,0,0.55));
}
.loginView, .shell, .modal { position: relative; z-index: 1; }
.shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: calc(22px + var(--safe-top)) 0 calc(48px + var(--safe-bottom));
}
.topbar {
  gap: 14px;
  padding: 18px 4px 8px;
  border-bottom: 1px solid var(--line);
}
.topbar h1 {
  margin: 6px 0 6px;
  color: #fff;
  font-size: clamp(24px, 6vw, 42px);
  letter-spacing: -1.2px;
  text-shadow: 0 0 24px rgba(61, 255, 199, 0.18);
}
.eyebrow {
  color: var(--cyan);
  letter-spacing: 0.22em;
}
.primaryButton,
.loginCard button[type="submit"] {
  min-height: var(--tap);
  border: 1px solid rgba(61, 255, 199, 0.4);
  color: #04110c;
  background: linear-gradient(180deg, #9bffdf, var(--cyan) 46%, #14c992);
  box-shadow: 0 0 0 1px rgba(61, 255, 199, 0.12), 0 10px 28px rgba(61, 255, 199, 0.16);
  border-radius: 12px;
  font-weight: 800;
}
.secondaryButton, .iconButton, .countryDisplay, .rowActions button, .accountCard footer button {
  min-height: var(--tap);
  border-color: rgba(255,255,255,0.1);
  background: #101114;
  color: var(--text);
}
.summaryCard, .accountCard, .emptyState, .scoreHero, .scoreVerdict, .scorePanel,
.dataTable, .scoreControls, .scoreAskPanel, .authDropZone, .loginCard, .scoreCharts article, .scoreAccountCard {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)), #0c0c0f;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.summaryGrid { margin: 20px 0 24px; gap: 12px; }
.summaryCard {
  position: relative;
  overflow: hidden;
  min-height: 140px;
  border-radius: 18px;
}
.summaryCard::after {
  content: "";
  position: absolute;
  right: -30px; bottom: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61,255,199,0.12), transparent 70%);
}
.accountCard { border-radius: 18px; }
.accountCard:before {
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), transparent);
}
.accountHead h3, .accountHead p, .nodeIp { overflow-wrap: anywhere; }
.tabs {
  position: relative;
  gap: 6px;
  margin-top: 16px;
  padding: 6px;
  border-radius: 14px;
  background: #0a0a0c;
  border-color: rgba(255,255,255,0.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  min-height: 42px;
  flex: 1 0 auto;
  white-space: nowrap;
  font-weight: 700;
}
.tabs button.active {
  color: #04110c;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(61, 255, 199, 0.25);
}
.loginView { padding: calc(18px + var(--safe-top)) 16px calc(18px + var(--safe-bottom)); }
.loginCard {
  width: min(420px, 100%);
  padding: 26px 20px;
  border-radius: 22px;
  background: #0b0b0e;
}
.brandMark {
  width: 56px; height: 56px; padding: 0; overflow: hidden;
  border-radius: 16px; background: #000;
  box-shadow: 0 0 22px rgba(61, 255, 199, 0.22);
}
.brandMark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.loginCard input, .loginCard select, .modal input, .modal select, .modal textarea, .scoreControls select {
  min-height: var(--tap);
  font-size: 16px;
  border-radius: 12px;
  background: #070708;
  border-color: #22242c;
  color: var(--text);
}
.modal {
  width: min(760px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
  border-radius: 20px;
  background: #0a0a0d;
  color: var(--text);
}
.modal::backdrop { background: rgba(0,0,0,0.78); backdrop-filter: blur(10px); }
.toastRegion {
  position: fixed;
  z-index: 1000;
  left: calc(22px + env(safe-area-inset-left, 0px));
  right: auto;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  background: #111114;
  max-width: min(420px, calc(100% - 44px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}
.scoreHero > strong { color: var(--cyan); text-shadow: 0 0 24px rgba(61,255,199,0.28); }
.scoreHero.warning > strong, .scoreHero.warning > b, .scoreHero.warning > em { color: #ffbf58; }
.scoreHero.danger > strong, .scoreHero.danger > b, .scoreHero.danger > em { color: #ff6f7d; }
.tableRow > span[data-label]::before { display: none; content: attr(data-label); }
* { min-width: 0; }
img, canvas, svg { max-width: 100%; }
.scoreCharts canvas { height: auto !important; }

@media (max-width: 900px) {
  .shell { width: min(100% - 16px, 1180px); }
  .pageHeading, .sectionTitle { flex-direction: column; align-items: stretch; }
  .userPanel { width: auto; justify-content: end; flex-wrap: nowrap; gap: 6px 8px; }
  .userPanel > div, .userMeta { text-align: right; margin-right: 0; }
  .summaryGrid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .accountGrid, .scoreGrid, .scoreSummary, .scoreCharts, .scoreAccounts { grid-template-columns: 1fr; }
  .pageActions, .emptyActions { width: 100%; }
  .pageActions button, .emptyActions button, .sectionActions .primaryButton { width: 100%; }
}
@media (max-width: 700px) {
  .tabs {
    position: sticky;
    top: var(--safe-top);
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    overflow: visible;
  }
  .tabs { gap: 8px; }
  .tabs button { width: 100%; min-height: 44px; }
  .scoreControls { grid-template-columns: 1fr; }
  .scoreControls button, .sectionActions { width: 100%; }
  .accountCompareRow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .accountCompareLabel { grid-column: 1 / -1; font-size: 11px; }
  .accountCompareShort { display: none; }
  .accountCompareFull { display: inline; }
  .accountCompareTrack { grid-column: 1; }
  .accountCompareHead strong { font-size: 15px; }
  .sectionActions { flex-wrap: wrap; }
  .formGrid, .scoreEvidence { grid-template-columns: 1fr; }
  .tableHead { display: none; }
  .tableRow, .userColumns {
    grid-template-columns: 1fr !important;
    gap: 10px;
    align-items: stretch;
    padding: 14px;
  }
  .tableRow > span {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .tableRow > span:last-child { border-bottom: 0; padding-bottom: 0; }
  .tableRow > span[data-label]::before {
    display: block;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 0 0 auto;
  }
  .rowActions { width: 100%; }
  .rowActions button { flex: 1; min-height: var(--tap); }
  .countryDisplay, .iconButton { min-height: var(--tap); }
  .modal { width: calc(100vw - 10px); border-radius: 16px; }
  .modal form { padding: 16px; }
  .modalActions { flex-direction: column-reverse; }
  .modalActions button { width: 100%; }
}
@media (max-width: 520px) {
  .summaryGrid { grid-template-columns: 1fr 1fr; }
  .summaryCard { min-height: 0; padding: 12px 8px; }
  .summaryCard strong { font-size: 30px; }
  .summaryCard .jpText { font-size: 20px; line-height: 1.3; }
  .accountHead { grid-template-columns: 1fr; }
  .statusBadge { justify-self: start; }
  .planRow, .accountCard footer { display: grid; grid-template-columns: 1fr; }
  .accountCard footer button { width: 100%; }
  .accountRecoveryActions { grid-template-columns: 1fr; }
  .nodeMeta { flex-wrap: wrap; white-space: normal; }
  .dateGrid { grid-template-columns: 1fr; }
  .loginCard { padding: 22px 16px; }
  .topbar h1 { font-size: 26px; }
  .pageHeading h2, .sectionTitle h2 { font-size: 22px; }
}
@media (max-width: 390px) {
  .shell { width: calc(100% - 12px); }
  .tabs button { font-size: 13px; padding: 10px 8px; }
  .meterReset, .detailGrid { grid-template-columns: 1fr; }
}

.tableHead, .tableRow {
  grid-template-columns: 1.7fr 0.9fr 1.1fr 0.9fr 1fr;
}
.statusBadge.healthy {
  border-color: rgba(61, 255, 199, 0.45);
  color: var(--cyan);
  background: rgba(61, 255, 199, 0.12);
}
.tableRow .statusBadge {
  justify-self: start;
}
@media (max-width: 800px) {
  .tableHead, .tableRow, .userColumns {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .tableHead { display: none; }
  .tableRow, .userColumns {
    grid-template-columns: 1fr !important;
  }
}


#scoreTab.tabPanel {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}
.scoreAskPanel {
  margin-top: 18px;
  order: 20;
  flex: 0 0 auto;
  padding: 16px 10px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(11, 24, 35, 0.88);
}
.scoreAskPanel header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  width: 100%;
}
.scoreAskPanel header > div:first-child {
  flex: 1;
  min-width: 0;
}
.scoreAskPanel header span {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.scoreAskPanel header h3 {
  margin: 1px 0 0;
  font-size: 16px;
  line-height: 1.2;
}
.scoreAskPanel header small {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  max-width: min(42vw, 280px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoreAskBody {
  padding: 0;
}
.scoreAskThread {
  display: grid;
  gap: 10px;
  max-height: min(46vh, 420px);
  overflow: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(61, 255, 199, 0.14);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}
.scoreAskEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.scoreAskTurn {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(61, 255, 199, 0.12);
  border-radius: 11px;
  background: rgba(5, 12, 18, 0.72);
}
.scoreAskTurn.error {
  border-color: rgba(255, 77, 109, 0.35);
}
.scoreAskQ, .scoreAskA {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}
.scoreAskQ span, .scoreAskA span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #04110c;
  background: var(--cyan);
}
.scoreAskA span {
  color: var(--cyan);
  background: rgba(61, 255, 199, 0.12);
  border: 1px solid rgba(61, 255, 199, 0.28);
}
.scoreAskQ p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.scoreAskA .aiAnswer {
  min-width: 0;
  max-height: 280px;
  overflow: auto;
  padding: 8px 10px 10px;
  border: 1px solid rgba(61, 255, 199, 0.16);
  border-left: 2px solid var(--cyan);
  border-radius: 10px;
  background: rgba(4, 14, 20, 0.9);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.scoreAskA .aiAnswer > :first-child,
.scoreAskA .aiAnswer .aiHoloGrid > :first-child,
.scoreAskA .aiAnswer .aiHolo > :first-child { margin-top: 0; }
.scoreAskA .aiAnswer > :last-child { margin-bottom: 0; }
.scoreAskA .aiAnswer h1,
.scoreAskA .aiAnswer h2,
.scoreAskA .aiAnswer h3 {
  margin: 10px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(61, 255, 199, 0.28);
}
.scoreAskA .aiAnswer h1 { color: var(--amber); font-size: 12px; }
.scoreAskA .aiAnswer p { margin: 0 0 8px; }
.scoreAskA .aiAnswer strong { color: var(--amber); font-weight: 700; }
.scoreAskA .aiAnswer em { color: #c9e7ff; font-style: normal; }
.scoreAskA .aiAnswer code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(61, 255, 199, 0.1);
  color: var(--cyan);
  font-size: 12px;
}
.scoreAskA .aiAnswer ul,
.scoreAskA .aiAnswer ol {
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.scoreAskA .aiAnswer li {
  padding: 6px 8px 6px 10px;
  border-left: 2px solid rgba(61, 255, 199, 0.38);
  background: rgba(0, 0, 0, 0.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.45;
}
.scoreAskA .aiAnswer ol { counter-reset: ai-log; }
.scoreAskA .aiAnswer ol li { counter-increment: ai-log; }
.scoreAskA .aiAnswer ol li::before {
  content: counter(ai-log, decimal-leading-zero);
  margin-right: 8px;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.scoreAskA .aiAnswer blockquote {
  margin: 8px 0;
  padding: 8px 10px;
  border-left: 2px solid var(--amber);
  color: var(--muted);
  background: rgba(255, 202, 99, 0.06);
}
.scoreAskA .aiAnswer .aiHoloGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 8px 0;
}
.scoreAskA .aiAnswer .aiHolo {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(61, 255, 199, 0.22);
  border-radius: 10px;
  background: rgba(5, 16, 24, 0.92);
  box-shadow: inset 0 0 0 1px rgba(61, 255, 199, 0.05);
}
.scoreAskA .aiAnswer .aiHolo h1,
.scoreAskA .aiAnswer .aiHolo h2,
.scoreAskA .aiAnswer .aiHolo h3 {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.scoreAskA .aiAnswer .aiHolo ul,
.scoreAskA .aiAnswer .aiHolo ol { margin: 0; }
.scoreAskA .aiAnswer .aiTableWrap {
  max-width: 100%;
  overflow-x: auto;
  margin: 8px 0;
  border: 1px solid rgba(61, 255, 199, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
}
.scoreAskA .aiAnswer table {
  display: table;
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  table-layout: auto;
}
.scoreAskA .aiAnswer th,
.scoreAskA .aiAnswer td {
  display: table-cell;
  padding: 7px 9px;
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  border-bottom: 1px solid rgba(61, 255, 199, 0.12);
}
.scoreAskA .aiAnswer th {
  position: sticky;
  top: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: #0a1924;
}
.scoreAskA .aiAnswer td { font-size: 13px; }
.scoreAskA small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}
.scoreAskChips,
.scoreAskForm {
  position: relative;
  z-index: 1;
}
.scoreAskChipBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.scoreAskChipFold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.scoreAskChipFold:hover,
.scoreAskChipFold:focus-visible {
  color: var(--cyan);
  background: rgba(61, 255, 199, 0.08);
}
.scoreAskChipChevron {
  display: inline-block;
  transform: rotate(0deg);
  transition: transform 0.18s ease;
  font-size: 12px;
}
.scoreAskChipFold[aria-expanded="true"] .scoreAskChipChevron {
  transform: rotate(90deg);
}
.scoreAskChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.scoreAskChipBar .scoreAskChips {
  margin: 0;
  flex: 1 1 auto;
}
.scoreAskChips.is-collapsed,
.scoreAskChips[hidden] {
  display: none;
}
.scoreAskChips button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(61, 255, 199, 0.28);
  border-radius: 999px;
  background: rgba(61, 255, 199, 0.08);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.scoreAskForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.scoreAskForm textarea {
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 10px 12px;
  font-size: 16px;
  line-height: 1.35;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #070708;
  color: var(--text);
  resize: vertical;
}
.scoreAskForm button {
  min-height: 44px;
  min-width: 88px;
}
.scoreAskStatus {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.scoreAskStatus.loading { color: var(--cyan); }
.scoreAskStatus.error { color: #ff9ca6; }
@media (max-width: 700px) {
  .scoreAskForm { grid-template-columns: 1fr; }
  .scoreAskForm button, .scoreAskChips button { width: 100%; min-height: var(--tap); }
  .scoreAskPanel header { flex-direction: row; align-items: center; }
  .scoreAskPanel header small { display: none; }
  .scoreAskA .aiAnswer { font-size: 14px; max-height: 240px; }
  .scoreAskA .aiAnswer .aiHoloGrid { grid-template-columns: 1fr; }
  .scoreAskA .aiAnswer table { min-width: 420px; }
}
.scoreWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "main hist";
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.scoreMain {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.scoreHistory {
  grid-area: hist;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(11, 24, 35, 0.88);
}
.scoreHistory header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.scoreHistory header span {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.scoreHistory header h3 {
  margin: 4px 0 0;
  font-size: 16px;
}
.scoreHistory header small {
  color: var(--muted);
  font-size: 11px;
}
.scoreRecordList,
.scoreHistoryList {
  display: grid;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}
.scoreRecord {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(5, 5, 5, 0.55);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  line-height: 1.35;
  overflow: visible;
}
.scoreRecord strong { display: block; width: 100%; font-size: 14px; line-height: 1.35; }
.scoreRecord span, .scoreRecord small { display: block; width: 100%; color: var(--muted); font-size: 12px; line-height: 1.35; }
.scoreRecord.active {
  border-color: rgba(61, 255, 199, 0.55);
  box-shadow: 0 0 0 1px rgba(61, 255, 199, 0.18);
  background: rgba(61, 255, 199, 0.08);
}
.scoreRecordEmpty { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.cacheMark {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid rgba(61, 255, 199, 0.35);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 11px;
}
@media (max-width: 900px) {
  .scoreWorkspace {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "hist";
    align-items: start;
  }
  .scoreHistory {
    grid-area: hist;
    position: static;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    max-height: 280px;
    min-height: 0;
    overflow: hidden;
  }
  .scoreRecordList,
  .scoreHistoryList { max-height: 280px; }
  .scoreMain { grid-area: main; }
  .scoreCharts { grid-template-columns: 1fr; }
  .scoreGrid,
  .scoreSummary { grid-template-columns: 1fr; }
}

/* ===== HUD FX ===== */
#fxLayer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#fxCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}
.fxScan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: overlay;
  animation: scanDrift 7s linear infinite;
  opacity: 0.45;
}
.fxFloor {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 42%;
  background:
    linear-gradient(rgba(61, 255, 199, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 255, 199, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(420px) rotateX(68deg);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, rgba(0,0,0,.55), transparent 78%);
  animation: floorDrift 18s linear infinite;
  opacity: 0.55;
}
.fxVignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(61, 255, 199, 0.08), transparent 55%),
    radial-gradient(ellipse at center, transparent 48%, rgba(0, 0, 0, 0.55) 100%);
}
@keyframes scanDrift {
  to { background-position: 0 28px; }
}
@keyframes floorDrift {
  to { background-position: 0 48px, 48px 0; }
}
body::before {
  animation: gridDrift 28s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 42px 42px, 42px 42px; }
}
.hudLive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 3px 8px 3px 6px;
  border: 1px solid rgba(61, 255, 199, 0.35);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 0.16em;
  background: rgba(61, 255, 199, 0.08);
  vertical-align: middle;
}
.hudLive i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: livePulse 1.6s ease-out infinite;
}
.hudClock {
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.12em;
  color: var(--cyan);
  padding: 8px 10px;
  border: 1px solid rgba(61, 255, 199, 0.22);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  text-shadow: 0 0 12px rgba(61, 255, 199, 0.45);
  min-height: var(--tap);
  display: inline-grid;
  place-items: center;
}
@keyframes livePulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(61, 255, 199, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(61, 255, 199, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(61, 255, 199, 0); }
}
.summaryCard, .accountCard, .loginCard, .scorePanel, .scoreHero, .scoreVerdict, .scoreControls, .scoreAskPanel, .dataTable, .authDropZone {
  background-image:
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
}
.summaryCard, .accountCard, .loginCard, .scorePanel, .scoreHero, .scoreVerdict {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
@media (hover: hover) {
  .summaryCard:hover, .accountCard:hover, .scorePanel:hover, .loginCard:hover {
    transform: translateY(-4px);
    border-color: rgba(61, 255, 199, 0.38);
    box-shadow:
      0 0 0 1px rgba(61, 255, 199, 0.16),
      0 18px 40px rgba(61, 255, 199, 0.1),
      0 16px 40px rgba(0, 0, 0, 0.35);
  }
}
.summaryCard::after {
  animation: orbPulse 4.8s ease-in-out infinite;
}
@keyframes orbPulse {
  50% { opacity: 0.45; transform: scale(1.12); }
}
.summaryCard strong {
  text-shadow: 0 0 18px rgba(61, 255, 199, 0.28);
}
.accountCard::before {
  left: -35%;
  width: 35%;
  background: linear-gradient(90deg, transparent, #9bffdf, var(--cyan), transparent);
  box-shadow: 0 0 16px rgba(61, 255, 199, 0.55);
  animation: beamSweep 16s linear infinite;
}
.accountCard.error::before {
  background: linear-gradient(90deg, transparent, #ff9aa6, var(--red), transparent);
  animation-duration: 11s;
}
@keyframes beamSweep {
  to { left: 110%; }
}
.statusBadge::before {
  border-radius: 50%;
  animation: livePulse 1.8s ease-out infinite;
}
.statusBadge.healthy {
  box-shadow: 0 0 16px rgba(61, 255, 199, 0.18);
}
.statusBadge.warning {
  box-shadow: 0 0 16px rgba(255, 191, 88, 0.22);
}
.statusBadge.danger {
  box-shadow: 0 0 16px rgba(255, 111, 125, 0.3);
}
.primaryButton,
.loginCard button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.primaryButton::after,
.loginCard button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.38), transparent 70%);
  transform: translateX(-130%);
  animation: shimmer 14s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmer {
  0%, 18% { transform: translateX(-130%); }
  48%, 100% { transform: translateX(130%); }
}
.tabs button.active {
  box-shadow: 0 0 22px rgba(61, 255, 199, 0.35);
}
.meterProgress::-webkit-progress-value,
.meterProgress::-moz-progress-bar {
  box-shadow: 0 0 12px rgba(61, 255, 199, 0.55);
}
.fxEnter {
  animation: fxEnter 0.55s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes fxEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
.topbar h1 {
  background: linear-gradient(90deg, #fff 20%, #9bffdf 50%, #fff 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleShift 7s linear infinite;
}
@keyframes titleShift {
  to { background-position: 200% 0; }
}
@media (max-width: 700px) {
  .fxFloor { opacity: 0.28; height: 28%; }
  #fxCanvas { opacity: 0.22; }
  .hudClock { width: auto; justify-self: end; }
  .accountCard::before { animation-duration: 18s; }
}
@media (prefers-reduced-motion: reduce) {
  #fxLayer, body::before, .accountCard::before, .primaryButton::after,
  .hudLive i, .statusBadge::before, .fxEnter, .topbar h1, .summaryCard::after,
  .fxScan, .fxFloor {
    animation: none !important;
  }
  .fxEnter { opacity: 1; transform: none; filter: none; }
  #fxCanvas { display: none; }
}


.summaryCard {
  align-items: center;
  text-align: center;
}
#egressIp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 8px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.summaryCard .countryInline {
  justify-content: center;
  white-space: normal;
  max-width: 100%;
}
@media (max-width: 700px) {
  .scoreAskPanel header { flex-direction: row; align-items: center; }
  .scoreAskPanel header small { display: none; }
  .scoreAskThread { max-height: min(42vh, 320px); }
  .scoreAskA .aiAnswer { max-height: 220px; font-size: 15px; }
  .scoreAskA .aiAnswer .aiTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scoreAskInput, .scoreAskForm textarea { font-size: 16px !important; }
  .primaryButton, .scoreAskForm button, .scoreAskChips button { min-height: 44px; }
  .summaryCard { animation: none; }
}


.scoreAskHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 0;
  padding-right: 0;
  flex: 0 0 auto;
}
.scoreAskExpand {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(61,255,199,.28);
  border-radius: 12px;
  background: rgba(61,255,199,.08);
  color: var(--cyan);
  cursor: pointer;
}
.scoreAskClear {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(61,255,199,.28);
  border-radius: 12px;
  background: rgba(61,255,199,.08);
  color: var(--cyan);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}
.scoreAskTheaterBar .scoreAskHeadActions {
  margin-left: auto;
}
.scoreAskThreadChat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 10px 18px;
}
.scoreAskBubble {
  display: flex;
  width: 100%;
}
.scoreAskBubble.user { justify-content: flex-end; }
.scoreAskBubble.ai { justify-content: flex-start; }
.scoreAskBubble .bubble {
  max-width: min(78%, 640px);
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.scoreAskBubble.user .bubble {
  background: #2a2a32;
  color: #f4f4f5;
  border-bottom-right-radius: 6px;
  font-size: 15px;
}
.scoreAskBubble.ai .bubble {
  background: transparent;
  padding: 2px 4px 8px;
  max-width: min(92%, 720px);
  border-radius: 0;
  color: var(--text);
  font-size: 15px;
}
.scoreAskBubble.ai .aiAnswer {
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  border-left: 0;
  background: transparent;
  font-size: 15px;
  line-height: 1.65;
}
.scoreAskBubble .meta {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}
.scoreAskBubble.pending .bubble { opacity: .7; }
.scoreAskTheater {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b0c10;
  color: var(--text);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.scoreAskTheater.hidden { display: none !important; }
.scoreAskTheaterGlow {
  position: absolute;
  inset: 18% 10% auto;
  height: 42%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(40,70,140,.35), transparent 68%);
}
.scoreAskTheaterBar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.scoreAskTheaterBar span {
  display: block;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .14em;
}
.scoreAskTheaterBar strong { font-size: 18px; }
.scoreAskTheater .scoreAskThread {
  position: relative;
  z-index: 1;
  max-height: none;
  margin: 0 12px;
  border: 0;
  background: transparent;
}
.scoreAskTheaterDock {
  position: relative;
  z-index: 1;
  padding: 8px 16px 16px;
}
.scoreAskTheaterDock .scoreAskChipBar {
  margin: 0 0 8px;
}
#scoreAskTheaterChips.is-collapsed,
#scoreAskTheaterChips[hidden] {
  display: none !important;
}
.scoreAskFormChat {
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}
.scoreAskFormChat textarea {
  min-height: 48px;
  max-height: 140px;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 16px;
}
body.askTheaterOpen { overflow: hidden; }
@media (max-width: 700px) {
  .scoreAskBubble .bubble { max-width: 88%; }
  .scoreAskHeadActions { width: auto; margin-left: auto; justify-content: flex-end; }
  .scoreAskFormChat { grid-template-columns: 1fr; }
  .scoreAskFormChat button { width: 100%; min-height: 44px; border-radius: 12px; }
  .scoreAskFormChat textarea { border-radius: 16px; }
  .scoreAskTheater { height: 100dvh; }
}


/* ===== ui32 mobile layout ===== */
.brandBlock { min-width: 0; }
.userToolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}
.userMeta { display: grid; text-align: right; }
@media (max-width: 900px) {
  .summaryGrid { grid-template-columns: 1fr 1fr !important; }
  .accountGrid { grid-template-columns: 1fr !important; }
}
@media (max-width: 800px) {
  .hudTelemetry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 8px;
  }
  .userPanel {
    width: auto;
    justify-self: end;
    justify-items: end;
    flex-wrap: nowrap;
  }
  .userToolbar {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .countryDisplay { min-width: 0; padding: 8px 10px; }
  #logout.iconButton { min-height: 44px; min-width: 44px; }
}
@media (max-width: 700px) {
  .topbar { padding: 12px 10px 10px; gap: 8px 10px; }
  .topbar h1 { font-size: 22px; margin: 4px 0; }
  .hudTelemetry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    gap: 8px;
  }
  .telItem { min-height: 48px; padding: 8px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; }
  .userPanel .hudClock { justify-self: end; }
  .userToolbar { width: 100%; }
  .userToolbar .countryDisplay,
  .userToolbar .iconButton { min-height: 44px; }
  .summaryGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
    margin: 14px 0 18px;
  }
  .summaryCard {
    min-height: 0;
    height: 100%;
    padding: 12px 8px 10px;
  }
  .gaugeWrap, .gaugeRing { width: 90px; height: 90px; }
  .gaugeWrap strong { font-size: 24px; }
  .summaryCard .jpText { font-size: 13px; }
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .tabs button {
    width: 100%;
    min-height: 44px;
  }
  .accountGrid { grid-template-columns: 1fr !important; }
  .accountCard { overflow: hidden; }
  .accountHead h3, .accountHead p { overflow-wrap: anywhere; word-break: break-word; }
}
@media (max-width: 600px) {
  .summaryGrid { grid-template-columns: 1fr 1fr !important; }
  .hudTelemetry { grid-template-columns: 1fr 1fr 1fr; width: 100%; }
}
@media (max-width: 520px) {
  .summaryGrid { grid-template-columns: 1fr 1fr !important; }
  .hudTelemetry { grid-template-columns: 1fr 1fr 1fr !important; width: 100%; }
  .gaugeWrap, .gaugeRing { width: 88px; height: 88px; }
  .topbar h1 { font-size: 20px; }
  .accountGrid { grid-template-columns: 1fr !important; }
}

/* ===== ui33 mobile fixes ===== */
html { overflow-x: hidden; }
.loginView {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.loginCard {
  flex: 0 0 auto;
  margin-top: auto;
  margin-bottom: auto;
  max-width: 100%;
}
.loginCard h1 { overflow-wrap: anywhere; }
.loginCard .linkButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
}
.loginCard select,
.modal select,
.scoreControls select {
  color-scheme: dark;
}
.closeButton {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  line-height: 1;
}
.accountDetails summary { min-height: 46px; }
.scoreAskPanel header small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scoreAskA .aiAnswer table,
.scoreAskBubble .aiAnswer table {
  min-width: 0;
  width: 100%;
}
.scoreAskBubble .aiTableWrap,
.scoreAskA .aiAnswer .aiTableWrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
  .accountHead h3,
  .accountHead p {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .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 {
    display: block;
    grid-column: 1;
    grid-row: 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;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .tableRow > span > small {
    grid-row: auto;
    grid-column: 2;
    display: block;
    width: 100%;
    white-space: nowrap;
  }
  .tableRow > span .statusBadge {
    justify-self: start;
  }
  .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;
    column-gap: 10px;
    align-items: start;
  }
  .tableRow > span.rowActions::before {
    grid-column: 1;
    width: auto;
    min-width: 0;
    text-align: left;
    white-space: nowrap;
  }
  .tableRow > span.rowActions button {
    grid-column: 2;
    justify-self: start;
    min-width: 72px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
  }
  .scoreAskA .aiAnswer table { min-width: 0; }
  .scorePrivacy {
    white-space: normal;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 420px) {
  .userPanel {
    max-width: 48%;
    min-width: 0;
    justify-self: end;
  }
  .userPanel .hudClock {
    min-width: 0;
    width: auto;
    letter-spacing: 0.08em;
  }
  .userPanel .userToolbar {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    justify-content: flex-end;
  }
  .userPanel .userMeta {
    flex: 1 1 100%;
    min-width: 0;
  }
  .userPanel .userMeta strong,
  .userPanel .userMeta small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .userToolbar .countryDisplay {
    min-width: 0;
    max-width: 100%;
  }
  .userToolbar .countryInline {
    white-space: nowrap;
    max-width: 100%;
  }
}

/* ===== ui35 score command-center lock ===== */
#scoreTab .scoreWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-areas: "main hist";
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
#scoreTab .scoreMain {
  grid-area: main;
  min-width: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#scoreTab .scoreHistory {
  grid-area: hist;
  grid-row: auto;
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#scoreTab .scoreHistoryList,
#scoreTab .scoreRecordList {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#scoreTab .scoreSummary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
}
#scoreTab .scoreHero,
#scoreTab .scoreVerdict {
  min-width: 0;
  width: 100%;
}
#scoreTab .scoreGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
}
#scoreTab .scoreChartsPanel,
#scoreTab .scoreAccountsPanel {
  grid-column: 1 / -1;
  min-width: 0;
}
#scoreTab .scoreCharts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  min-width: 0;
}
#scoreTab .scoreCharts article,
#scoreTab .scoreCharts canvas {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
#scoreTab .scoreCharts article {
  overflow: visible;
}
#scoreTab .accountCompare {
  overflow: visible;
  min-height: 0;
  height: auto;
}
#scoreTab .scoreAskPanel {
  width: 100%;
  flex: 0 0 auto;
  order: 20;
}
@media (max-width: 900px) {
  #scoreTab .scoreWorkspace {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "hist";
  }
  #scoreTab .scoreHistory {
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 280px;
  }
  #scoreTab .scoreCharts,
  #scoreTab .scoreGrid,
  #scoreTab .scoreSummary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  #scoreTab input,
  #scoreTab select,
  #scoreTab textarea {
    font-size: 16px;
    min-height: 44px;
  }
  #scoreTab button {
    min-height: 44px;
  }
}
.scoreAskHistWrap {
  position: relative;
  flex: 0 0 auto;
}
.scoreAskHistoryMenu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 45;
  width: min(320px, 86vw);
  max-height: min(52vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid rgba(61,255,199,.28);
  border-radius: 12px;
  background: rgba(8, 16, 26, 0.97);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
.scoreAskHistoryMenu.hidden,
.scoreAskHistoryMenu[hidden] {
  display: none !important;
}
.scoreAskTheaterBar .scoreAskHistoryMenu {
  z-index: 90;
  width: min(360px, 92vw);
}
.scoreAskHistoryEmpty {
  margin: 0;
  padding: 16px 12px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.scoreAskHistoryRow {
  display: flex;
  align-items: stretch;
  gap: 4px;
  min-height: 44px;
  border-radius: 10px;
}
.scoreAskHistoryRow + .scoreAskHistoryRow {
  margin-top: 4px;
}
.scoreAskHistoryOpen {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.scoreAskHistoryOpen:hover,
.scoreAskHistoryOpen:focus-visible,
.scoreAskHistoryRow.is-active .scoreAskHistoryOpen {
  border-color: rgba(61,255,199,.35);
  background: rgba(61,255,199,.1);
}
.scoreAskHistoryTime {
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.2;
}
.scoreAskHistoryPreview {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scoreAskHistoryDelete {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.scoreAskHistoryDelete:hover,
.scoreAskHistoryDelete:focus-visible {
  color: #ff9ca6;
  background: rgba(255,80,90,.12);
}
@media (max-width: 700px) {
  .scoreAskHistoryMenu {
    width: min(100vw - 24px, 360px);
    max-width: calc(100vw - 24px);
  }
}

/* ui41: equal-height score account cards in a row */
#scoreTab .scoreAccounts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
#scoreTab .scoreAccountCard {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  min-width: 0;
  overflow: visible;
}
#scoreTab .scoreAccountCard > header,
#scoreTab .scoreAccountCard > .scoreDimension {
  flex: 0 0 auto;
}
#scoreTab .scoreEvidence {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 10px;
  margin-top: 10px;
  min-height: 0;
  overflow: visible;
}
#scoreTab .scoreEvidence section {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: 100%;
  min-height: 0;
  overflow: visible;
}
#scoreTab .scoreEvidence ul {
  flex: 1 1 auto;
  overflow: visible;
}
@media (max-width: 900px) {
  #scoreTab .scoreAccounts {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    align-items: stretch;
  }
  #scoreTab .scoreAccountCard {
    height: auto;
  }
}
@media (max-width: 700px) {
  #scoreTab .scoreEvidence {
    grid-template-columns: 1fr;
  }
  #scoreTab .scoreEvidence section {
    height: auto;
  }
}

/* ui44: ACCOUNT DETAILS card header — identity left, risk badge top-right */
#scoreTab .scoreAccountCard > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 6px;
}
#scoreTab .scoreAccountIdentity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#scoreTab .scoreAccountEmail {
  display: block;
  max-width: 100%;
  color: var(--cyan);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#scoreTab .scoreGradeChip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(138, 160, 178, 0.28);
  border-radius: 6px;
  background: rgba(19, 41, 55, 0.85);
  color: #b7c9d6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}
#scoreTab .scoreAccountCard > header > .statusBadge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  flex-shrink: 0;
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 700px) {
  #scoreTab .scoreAccountCard > header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  #scoreTab .scoreAccountEmail {
    font-size: 16px;
  }
}

/* ui45: risk donut stacked — pie on top, detailed legend below */
#scoreTab .riskDonutCard,
.scoreCharts article.riskDonutCard {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#scoreTab .riskDonutCard > h4,
#scoreTab .riskDonutCard > .chartHelp {
  flex: 0 0 auto;
}
.riskDonutStack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
}
.riskDonutCanvasWrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
#scoreTab .riskDonutCard canvas,
.riskDonutCanvasWrap canvas,
#riskDonut {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  height: auto !important;
}
.riskLegend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.riskLegend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(48, 75, 94, 0.7);
  border-radius: 8px;
  background: rgba(8, 20, 30, 0.55);
}
.riskSwatch {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.riskLegendName {
  color: #c7dbe7;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.riskLegendCount {
  color: #eaf6ff;
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ui46: keep 流光 reverse + header cluster (hud.css is source of layout) */
.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: 420px) {
  .userPanel {
    max-width: none;
    min-width: 0;
  }
  .userPanel .userMeta {
    flex: 0 1 auto;
  }
}

.mailCard {
  margin: 0 0 22px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(11, 24, 35, 0.8);
}
.mailCard .pageHeading {
  margin: 0 0 16px;
  align-items: flex-start;
}
.mailCard .pageHeading h2 {
  font-size: 22px;
}
.mailForm {
  margin-bottom: 16px;
}
.mailCard label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}
.mailCard input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  font-size: 16px;
  border: 1px solid #2b4254;
  background: #08131d;
  color: var(--text);
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
}
.mailCard input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(67, 230, 196, 0.1);
}
.mailCard label small,
.mailKeyStatus {
  color: #43e6c4;
  font-size: 12px;
  line-height: 1.5;
  font-family: ui-monospace, monospace;
}
.mailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mailActions .primaryButton,
.mailActions .secondaryButton {
  min-height: 44px;
  padding: 11px 17px;
  font-size: 15px;
}
@media (max-width: 720px) {
  .mailForm.formGrid {
    grid-template-columns: 1fr;
  }
  .mailActions {
    flex-direction: column;
  }
  .mailActions .primaryButton,
  .mailActions .secondaryButton {
    width: 100%;
  }
}

.headingActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.headingActions button {
  min-height: 44px;
}
@media (max-width: 720px) {
  .headingActions {
    width: 100%;
  }
  .headingActions button {
    flex: 1;
  }
}

.mailModal {
  width: min(440px, calc(100vw - 28px));
}
.mailModal header {
  align-items: flex-start;
}
.mailHint {
  margin: 0 0 18px;
  color: #6f8799;
  font-size: 13px;
  line-height: 1.5;
}
.mailStack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.mailStack label {
  display: grid;
  gap: 8px;
}
.mailLabelRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mailKeyStatus {
  color: #43e6c4;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.mailModal input {
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  font-size: 16px;
  line-height: 20px;
  padding: 0 12px;
}
.mailActions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.mailActions button {
  width: 100%;
  min-height: 44px;
  margin: 0;
}
@media (max-width: 520px) {
  .mailActions {
    grid-template-columns: 1fr;
  }
}

.alertModal {
  width: min(640px, calc(100vw - 24px));
  max-height: min(92vh, 100dvh);
}
.alertModal form {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 24px;
  max-height: min(92vh, 100dvh);
  box-sizing: border-box;
}
.alertStack {
  display: grid;
  gap: 16px;
  flex: 1 1 auto;
}
.alertField {
  display: grid !important;
  gap: 8px;
}
.alertField span {
  color: #8ba3c7;
  font-size: 13px;
}
.alertGroup {
  display: grid;
  gap: 14px;
  padding: 16px 16px 18px;
  border: 1px solid var(--stroke, rgba(120,200,255,.14));
  border-radius: 16px;
  background: rgba(8, 19, 29, 0.55);
}
.alertSwitchRow {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin: 0;
}
.alertSwitchRow span {
  color: var(--text, #eaf6ff);
  font-size: 16px;
  line-height: 1.4;
}
.alertMaster {
  padding: 6px 2px 14px;
  border-bottom: 1px solid rgba(67, 230, 196, 0.18);
  margin-bottom: 4px;
}
.alertMaster span {
  color: #43e6c4;
  font-weight: 700;
  font-size: 17px;
}
.alertSwitch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 52px;
  width: 52px !important;
  min-width: 52px;
  height: 32px !important;
  min-height: 32px !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #243142 !important;
  box-shadow: inset 0 0 0 1px rgba(120,200,255,.16);
  cursor: pointer;
}
.alertSwitch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d7e6f2;
  transition: transform .18s ease, background .18s ease;
}
.alertSwitch:checked {
  background: #12c7a2 !important;
  box-shadow: 0 0 12px rgba(67, 230, 196, 0.28);
}
.alertSwitch:checked::after {
  transform: translateX(20px);
  background: #051016;
}
.alertSwitch:focus-visible {
  outline: 2px solid #43e6c4;
  outline-offset: 3px;
}
.alertQuotaRow {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  gap: 14px;
}
.alertModal select,
.alertModal input[type="email"],
.alertModal input[type="number"],
.alertModal input[type="time"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  font-size: 16px;
  padding: 0 14px;
  border: 1px solid #2b4254;
  background: #08131d;
  color: var(--text);
  border-radius: 12px;
}
.alertDigestRow {
  min-width: 0;
}
.alertModal input[type="time"] {
  min-width: 0;
  color-scheme: dark;
}
.dangerButton {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: #c0392b;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.dangerButton:hover {
  background: #e03131;
}
.scoreClearModal h2 {
  color: #ff6b6b;
}
.scoreHistoryTools {
  display: grid;
  justify-items: end;
  align-content: end;
  gap: 8px;
  min-width: 0;
}
.scoreHistoryClear {
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255, 107, 107, 0.45);
  border-radius: 999px;
  background: rgba(192, 57, 43, 0.16);
  color: #ff8a8a;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.scoreHistoryClear:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.alertModal .alertActions {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
  padding: 20px 0 8px;
  flex: 0 0 auto;
}
.alertModal .alertActions button {
  min-height: 48px;
  border-radius: 12px;
}
.alertField.is-disabled,
.alertQuotaRow.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}
.alertSwitch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.alertModal input:disabled,
.alertModal select:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
@media (max-width: 720px) {
  .alertModal {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 12px);
    margin: auto;
    border-radius: 16px;
  }
  .alertModal form {
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 12px);
  }
  .alertQuotaRow {
    grid-template-columns: 1fr;
  }
  .alertModal .alertActions {
    padding: 18px 0 4px;
    gap: 10px;
  }
  .alertSwitch {
    flex-basis: 52px;
  }
}
@media (max-width: 420px) {
  .alertModal {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .alertModal form {
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 100dvh;
  }
  .alertModal .alertActions {
    grid-template-columns: 1fr;
  }
}

.rowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rowActions button {
  min-height: 36px;
  padding: 6px 10px;
}

#pageProgress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:80;
  height:3px;
  overflow:hidden;
  pointer-events:none;
  background:rgba(61,255,199,.12);
}
#pageProgress[hidden]{display:none}
#pageProgress::after{
  content:"";
  display:block;
  height:100%;
  width:36%;
  background:linear-gradient(90deg,transparent,#3dffc7,#5ad0ff);
  animation:pageSweep 1s linear infinite;
}
@keyframes pageSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(320%)}
}

.otpRow {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.otpRow input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
}
.loginCard .otpRow button {
  flex: 0 0 auto;
  width: auto;
  min-width: 118px;
  margin-top: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(61, 255, 199, 0.28);
  background: #101114;
  color: var(--cyan);
  box-shadow: none;
  font-size: 14px;
  white-space: nowrap;
}
.loginCard input,
.loginCard select {
  font-size: 16px;
}
@media (max-width: 560px) {
  .otpRow {
    flex-direction: column;
  }
  .loginCard .otpRow button {
    width: 100%;
  }
  .loginCard {
    padding: 22px 16px;
  }
}

.authRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 10px;
  align-items: end;
  overflow: visible;
}
.authRow label {
  margin-top: 0 !important;
  min-width: 0;
}
.loginCard .authRow + label {
  margin-top: 14px;
}
.authRow select,
.authRow input {
  font-size: 16px;
}
@media (max-width: 420px) {
  .authRow {
    grid-template-columns: minmax(0, 1fr) 136px;
    gap: 8px;
  }
}

.forgotRow {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 0 !important;
}
.loginCard .forgotRow .linkButton {
  width: auto;
  margin: 0;
  min-height: 36px;
  padding: 4px 2px;
  font-size: 13px;
}

.loginCard input::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: #5d6d7e;
  opacity: 1;
}

.authRow {
  overflow: visible;
}
.authRow label {
  overflow: visible;
}
.countryPicker {
  position: relative;
  width: 100%;
  z-index: 2;
}
.countryPicker.is-open {
  z-index: 8;
}
.countryPicker .countrySelect {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.countryPickerBtn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap, 44px);
  padding: 10px 30px 10px 10px;
  border: 1px solid #22242c;
  border-radius: 12px;
  background: #070708;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
.countryPickerBtn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.countryPickerBtn .countryFlag {
  width: 22px;
  height: 15px;
}
.countryPickerBtn::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.5px solid #8b93a7;
  border-bottom: 1.5px solid #8b93a7;
  transform: rotate(45deg);
  pointer-events: none;
}
.loginCard .countryPickerBtn,
.modal .countryPickerBtn,
.userPanel .countryPickerBtn {
  width: 100%;
  margin-top: 0;
  background: #070708;
  color: var(--text);
  border: 1px solid #22242c;
  box-shadow: none;
  font-weight: 600;
}
.countryPickerMenu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  width: max(100%, 228px);
  min-width: 228px;
  margin: 0;
  padding: 8px;
  list-style: none;
  max-height: min(280px, 46vh);
  overflow: auto;
  border: 1px solid rgba(61, 255, 199, 0.2);
  border-radius: 14px;
  background: #0c0d12;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(255,255,255,0.03);
  scrollbar-width: thin;
  scrollbar-color: rgba(61, 255, 199, 0.35) transparent;
}
.countryPickerMenu::-webkit-scrollbar {
  width: 6px;
}
.countryPickerMenu::-webkit-scrollbar-track {
  background: transparent;
}
.countryPickerMenu::-webkit-scrollbar-thumb {
  background: rgba(61, 255, 199, 0.28);
  border-radius: 999px;
}
.countryPickerItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.countryPickerItem .countryFlag {
  width: 22px;
  height: 15px;
}
.loginCard .countryPickerItem,
.modal .countryPickerItem {
  width: 100%;
  margin: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-weight: 600;
}
.countryPickerItem.is-active {
  background: rgba(61, 255, 199, 0.14);
  color: #d9fff4;
}
.countryPickerItem:hover {
  background: rgba(61, 255, 199, 0.1);
}
.loginCard, .loginView {
  overflow: visible;
}

/* 20260818 score archive row delete + digest time */
.scoreRecord {
  position: relative !important;
}
.scoreRecord > .scoreRecordBody {
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 0 34px 0 0;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  text-align: left;
  box-shadow: none !important;
  cursor: pointer;
}
.scoreRecordDelete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 107, 107, 0.28);
  border-radius: 8px;
  background: rgba(8, 14, 20, 0.72);
  color: #ff8a8a;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 720px) {
  .alertDigestRow {
    grid-template-columns: 1fr;
  }
}

/* global select caret inset ~12px from inner border */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2343e6c4' d='M1.1 1.2L6 6.1l4.9-4.9 1.1 1.1L6 8.3 0 2.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.loginCard select,
.userPanel select,
.modal select,
.scoreControls select,
.alertModal select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2343e6c4' d='M1.1 1.2L6 6.1l4.9-4.9 1.1 1.1L6 8.3 0 2.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}
.countrySelect {
  background-image: var(--country-flag), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2343e6c4' d='M1.1 1.2L6 6.1l4.9-4.9 1.1 1.1L6 8.3 0 2.3z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: 12px center, right 12px center !important;
  background-size: 24px 16px, 12px 8px !important;
  padding-right: 38px !important;
}
input[type="time"]::-webkit-calendar-picker-indicator {
  margin-right: 8px;
}
.alertSwitchRow span small {
  display: block;
  margin-top: 4px;
  color: #8ba3c7;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}