@font-face {
  font-family: "Winter Display";
  src: url("assets/headline-display.ttf") format("truetype");
  font-display: swap;
}

:root {
  --hub-snow: #f4fbff;
  --hub-white: #ffffff;
  --hub-ink: #17384d;
  --hub-muted: #68899b;
  --hub-line: #c9e3ee;
  --hub-ice: #20a8d1;
  --hub-ice-dark: #117b9f;
  --hub-ice-soft: #dff5fb;
  --hub-fire: #f28a3a;
  --hub-fire-dark: #c95e1e;
  --hub-fire-soft: #fff0e1;
  --hub-danger: #d95050;
  --hub-font: "Noto Sans SC Local", "Microsoft YaHei", sans-serif;
  --hub-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --nav-height: 74px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: #dcecf3;
  color: var(--hub-ink);
  accent-color: var(--hub-ice);
}

::selection {
  color: #fff;
  background: var(--hub-ice-dark);
}

button,
input {
  font: inherit;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(32, 168, 209, 0.32);
  outline-offset: 2px;
}

.skip-link:not(:focus):not(:focus-visible) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  transform: none;
}

.app-shell {
  width: min(100%, 430px);
  max-width: 430px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 0 calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px);
  overflow: clip;
  background: var(--hub-snow);
  box-shadow: 0 12px 44px rgba(22, 74, 99, 0.14);
}

.intel-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  min-height: 78px;
  padding: 8px 16px 7px;
  background: rgba(244, 251, 255, 0.96);
  border-bottom: 1px solid rgba(171, 211, 227, 0.72);
}

.intel-header .brand-logo {
  display: block;
  width: 170px;
  height: 62px;
  min-height: 0;
}

.intel-header .brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.intel-header p {
  margin: -4px 0 0;
  color: var(--hub-muted);
  font-size: 11px;
  font-weight: 700;
}

.gateway-state {
  position: absolute;
  right: 12px;
  top: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 8px;
  color: var(--hub-muted);
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.gateway-state i,
.collector-strip .status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e5a541;
  box-shadow: 0 0 0 3px rgba(229, 165, 65, 0.13);
}

.gateway-state.is-ready i,
.collector-strip.is-ready .status-dot {
  background: #2aa878;
  box-shadow: 0 0 0 3px rgba(42, 168, 120, 0.13);
}

.gateway-state.is-error i,
.collector-strip.is-warning .status-dot {
  background: var(--hub-danger);
  box-shadow: 0 0 0 3px rgba(217, 80, 80, 0.12);
}

.app-view {
  min-height: calc(100svh - 180px);
  padding: 18px 14px 28px;
}

.app-view[hidden] {
  display: none !important;
}

.app-view.is-active {
  animation: hub-view-in 260ms cubic-bezier(0.2, 0.78, 0.25, 1) both;
}

.view-title,
.view-header h1,
.single-result-header h2,
.monitor-item h2,
.section-heading h2 {
  letter-spacing: 0;
}

.pk-title {
  position: relative;
  z-index: 5;
  width: 100%;
  margin: 0 0 -7px;
  color: #164968;
  font-family: "Winter Display", "Microsoft YaHei", sans-serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

#view-pk {
  padding: 0 0 28px;
}

#view-pk .match-stage {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
}

#view-pk .match-stage::after {
  display: none;
}

#view-pk .match-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#view-pk .versus {
  top: 50%;
  bottom: auto;
  width: 104px;
  height: 104px;
}

#view-pk .match-controls {
  padding: 14px 14px 0;
}

#view-pk .match-controls > form {
  margin: 0;
}

#view-pk .result-stage {
  margin-top: 20px;
}

.view-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 2px 16px;
}

.view-header h1 {
  margin: 0;
  color: #153d56;
  font-family: "Winter Display", "Microsoft YaHei", sans-serif;
  font-size: 29px;
  font-weight: 900;
  line-height: 1.08;
}

.view-header p {
  margin: 5px 0 0;
  color: var(--hub-muted);
  font-size: 12px;
  font-weight: 650;
}

.first-strike-heading {
  align-items: center;
}

.first-strike-heading h1 {
  font-size: 27px;
}

.first-strike-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 0 8px;
  color: #7d6426;
  background: #fff4d3;
  border: 1px solid #ecd28a;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
}

.first-strike-status svg {
  width: 14px;
  height: 14px;
}

.first-strike-status[data-state="armed"],
.first-strike-status[data-state="ready"] {
  color: #0f745b;
  background: #e1f9f0;
  border-color: #a6ddce;
}

.first-strike-status[data-state="executing"] {
  color: #0b6988;
  background: #e0f5fb;
  border-color: #a8dbe9;
}

.first-strike-status[data-state="executing"] svg,
.first-strike-status[data-state="loading"] svg {
  animation: hub-spin 1s linear infinite;
}

.first-strike-status[data-state="success"] {
  color: #107158;
  background: #dcf8ee;
  border-color: #98dac6;
}

.first-strike-status[data-state="error"] {
  color: #a53e37;
  background: #fff0ed;
  border-color: #efb9b2;
}

#view-events {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 14px;
}

#view-events .first-strike-heading { margin-bottom: 0; }

.strike-session-panel,
.strike-mode-panel {
  min-width: 0;
  background: #fff;
  border: 1px solid #c5e0ea;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(28, 87, 111, 0.07);
}

.strike-mode-panel[hidden] { display: none !important; }

.strike-session-state {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  padding: 10px;
}

.strike-session-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #a06422;
  background: #fff2d8;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.strike-session-icon svg { width: 20px; height: 20px; }
.strike-session-state[data-ready="true"] .strike-session-icon { color: #fff; background: #178267; }
.strike-session-state > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.strike-session-state small { color: #6c8996; font-size: 9px; font-weight: 800; }
.strike-session-state strong { overflow: hidden; color: #173d50; font: 850 12px/1.35 var(--hub-mono); text-overflow: ellipsis; white-space: nowrap; }
.strike-session-state em { color: #a06422; font-size: 9px; font-style: normal; font-weight: 750; }
.strike-session-state[data-ready="true"] em { color: #14765f; }

.strike-session-state button {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 58px;
  min-height: 44px;
  padding: 6px 7px;
  color: #176f8d;
  background: #e9f7fb;
  border: 1px solid #b7dce8;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
}

.strike-session-state button:active { transform: scale(.97); }
.strike-session-state button svg { width: 15px; height: 15px; }

.strike-login-guide { border-top: 1px solid #dcebf0; }
.strike-login-guide summary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 11px;
  color: #315e70;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  list-style: none;
}
.strike-login-guide summary::-webkit-details-marker { display: none; }
.strike-login-guide summary svg { width: 16px; height: 16px; }
.strike-login-guide summary svg:last-child { transition: transform 180ms ease; }
.strike-login-guide[open] summary svg:last-child { transform: rotate(180deg); }
.strike-login-guide ol { display: grid; gap: 8px; margin: 0; padding: 4px 11px 10px; list-style: none; }
.strike-login-guide li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; }
.strike-login-guide li > b { display: grid; place-items: center; width: 24px; height: 24px; color: #fff; background: #1681a4; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); font: 800 10px/1 var(--hub-mono); }
.strike-login-guide li > span { display: grid; gap: 1px; }
.strike-login-guide li strong { color: #244c5e; font-size: 10px; }
.strike-login-guide li small { color: #728d99; font-size: 9px; }
.strike-login-guide p { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 11px; color: #18705c; background: #eaf8f3; font-size: 9px; line-height: 1.5; }
.strike-login-guide p svg { flex: 0 0 auto; width: 15px; height: 15px; }

.strike-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #dcebf1;
  border-radius: 8px;
}

.strike-mode-tabs button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 9px;
  color: #5b7885;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.strike-mode-tabs button svg { width: 20px; height: 20px; }
.strike-mode-tabs button span { display: grid; min-width: 0; gap: 1px; }
.strike-mode-tabs button strong { color: inherit; font-size: 11px; }
.strike-mode-tabs button small { overflow: hidden; color: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.strike-mode-tabs button[aria-selected="true"] { color: #0d6f90; background: #fff; box-shadow: 0 4px 12px rgba(32, 93, 117, .09); }
.strike-mode-tabs button[data-strike-mode="fortress"][aria-selected="true"] { color: #a84d1e; }

.strike-target-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid #d7eaf1;
}
.strike-target-heading > span:nth-child(2) { display: grid; min-width: 0; gap: 1px; }
.strike-target-heading small { color: #77909c; font-size: 8px; font-weight: 800; }
.strike-target-heading strong { color: #19485d; font-size: 15px; font-weight: 900; }
.strike-target-heading em { color: #668895; font-size: 9px; font-style: normal; }
.strike-target-heading > b { padding: 5px 7px; color: #16715a; background: #e0f7ef; border-radius: 4px; font-size: 9px; }
.strike-target-heading > b[data-ready="false"] { color: #91620e; background: #fff3d4; }
.fortress-heading .first-strike-mark { background: #cb682c; }
.fortress-heading > b { color: #91620e; background: #fff3d4; }
.fortress-heading > b[data-ready="true"] { color: #117058; background: #def7ed; }

.fortress-timing-panel { display: grid; gap: 9px; padding: 10px; overflow: hidden; background: #f4fafc; border: 1px solid #cce2e9; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.fortress-timing-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fortress-timing-head > span { display: grid; min-width: 0; gap: 1px; }
.fortress-timing-head small { color: #78919b; font-size: 8px; font-weight: 800; }
.fortress-timing-head strong { color: #19495b; font-size: 12px; }
.fortress-timing-head button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 72px; min-height: 34px; color: #126b88; background: #e2f5fb; border: 1px solid #acd7e5; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); font-size: 10px; font-weight: 900; }
.fortress-timing-head button:active:not(:disabled) { transform: scale(.98); }
.fortress-timing-head button:disabled { cursor: wait; opacity: .64; }
.fortress-timing-head button svg { width: 14px; height: 14px; }
.fortress-timing-head button .is-spinning { animation: hub-spin .8s linear infinite; }
.fortress-timing-source { display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 38px; padding: 7px 8px; background: #fff; border: 1px solid #d8e8ed; }
.fortress-timing-source > span:last-child { display: grid; min-width: 0; gap: 2px; }
.fortress-timing-source strong { overflow: hidden; color: #345d6c; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.fortress-timing-source small { overflow-wrap: anywhere; color: #7b929b; font: 750 8px/1.35 var(--hub-mono); }
.fortress-timing-panel[data-state="ready"] .fortress-timing-source .first-strike-live-dot { background: #15966f; animation: activity-pulse 1.8s ease-out infinite; }
.fortress-timing-panel[data-state="error"] { background: #fff7f3; border-color: #edc9ba; }
.fortress-timing-panel[data-state="error"] .fortress-timing-source .first-strike-live-dot { background: #c45c43; }

.fortress-schedule { display: grid; gap: 0; max-height: 190px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid #d9e8ed; }
.fortress-schedule li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 48px; padding: 6px 2px; border-bottom: 1px solid #d9e8ed; cursor: pointer; }
.fortress-schedule li:active:not(.is-empty) { transform: scale(.99); }
.fortress-schedule li > b { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: #1784a5; clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); font: 850 10px/1 var(--hub-mono); }
.fortress-schedule li > span { display: grid; min-width: 0; gap: 2px; }
.fortress-schedule li strong { color: #28566a; font-size: 10px; }
.fortress-schedule li small { color: #7f959e; font: 700 8px/1.25 var(--hub-mono); }
.fortress-schedule li time { color: #b0521f; font: 900 13px/1 var(--hub-mono); white-space: nowrap; }
.fortress-schedule li[data-state="pending"] { opacity: .66; }
.fortress-schedule li.is-empty { grid-template-columns: 30px minmax(0, 1fr); cursor: default; }
.fortress-schedule li.is-empty > svg { width: 18px; height: 18px; margin: auto; color: #7c9ca9; }
.fortress-next-window { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; background: #e8f7fc; border: 1px solid #bcdde8; }
.fortress-next-window > span { display: grid; min-width: 0; gap: 2px; }
.fortress-next-window small { color: #668694; font-size: 8px; font-weight: 800; }
.fortress-next-window strong { overflow: hidden; color: #185c74; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fortress-next-window time { color: #126e8d; font: 900 18px/1 var(--hub-mono); letter-spacing: 0; white-space: nowrap; }
.fortress-next-window[data-state="imminent"] { background: #fff1e7; border-color: #edc3a6; }
.fortress-next-window[data-state="imminent"] time { color: #bc4f1b; animation: fortress-countdown-pulse .8s ease-in-out infinite alternate; }

.strike-setting-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 3px; }
.strike-setting-title > span { display: grid; gap: 1px; }
.strike-setting-title b { color: #244f62; font-size: 12px; }
.strike-setting-title small { color: #77909b; font-size: 9px; }
.strike-setting-title > svg { width: 17px; height: 17px; color: #6f9baa; }
.strike-number-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.strike-number-grid.is-single { grid-template-columns: 1fr; }
.strike-number-grid .first-strike-number { display: grid; gap: 6px; padding: 8px; background: #fff; border: 1px solid #d7e6eb; border-radius: 6px; }
.strike-number-grid .first-strike-number > span { display: grid; gap: 1px; }
.strike-number-grid .first-strike-number input { width: 100%; }

.fortress-strike-panel { display: grid; gap: 12px; padding: 13px; overflow: hidden; }
.fortress-target-groups { display: grid; gap: 10px; }
.fortress-target-groups fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fortress-target-groups legend { width: 100%; margin: 0 0 6px; color: #28566a; font-size: 11px; font-weight: 900; }
.fortress-target-groups legend small { margin-left: 4px; color: #8199a3; font: 700 8px/1 var(--hub-mono); }
.fortress-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fortress-target-grid button { aspect-ratio: 1.45; min-width: 0; color: #316174; background: #edf8fb; border: 1px solid #c4e0e9; border-radius: 5px; font: 850 12px/1 var(--hub-mono); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.fortress-target-grid button[aria-pressed="true"] { color: #fff; background: #1783a6; border-color: #1783a6; }
.fortress-target-grid button[data-registered="true"] { box-shadow: inset 0 -3px 0 #38a8c7; }
.fortress-target-grid button[data-registered="true"]::after { content: "场"; }
.fortress-target-grid button[data-registered="false"] { color: #81949d; background: #f2f6f7; border-color: #dbe4e7; opacity: .68; }
.fortress-target-grid button[aria-pressed="true"][data-registered="true"] { color: #fff; background: #1783a6; border-color: #1783a6; box-shadow: inset 0 -3px 0 rgba(255,255,255,.3); }
.stronghold-group { padding-top: 9px !important; border-top: 1px solid #e1edf1 !important; }
.stronghold-target-grid button { color: #9b5123; background: #fff2e8; border-color: #edcbb5; }
.stronghold-target-grid button[aria-pressed="true"] { color: #fff; background: #c8662a; border-color: #c8662a; }
.stronghold-target-grid button[aria-pressed="true"][data-registered="true"] { background: #c8662a; border-color: #c8662a; }

.fortress-setting-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fortress-setting-grid.is-single { grid-template-columns: 1fr; }
.fortress-setting-grid label { display: grid; gap: 7px; min-width: 0; padding: 9px; background: #f6fbfd; border: 1px solid #d6e7ed; border-radius: 6px; }
.fortress-setting-grid label > span { display: grid; gap: 1px; }
.fortress-setting-grid strong { color: #31586a; font-size: 10px; }
.fortress-setting-grid small { color: #7d939d; font-size: 8px; }
.fortress-setting-grid input { width: 100%; min-height: 34px; padding: 5px 7px; color: #173e50; background: #fff; border: 1px solid #c4dae3; border-radius: 5px; font: 850 13px/1 var(--hub-mono); }
.fortress-readiness { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 9px 10px; color: #795a1d; background: #fff5d8; border: 1px solid #ecd89d; border-radius: 6px; }
.fortress-readiness > svg { width: 20px; height: 20px; }
.fortress-readiness > span { display: grid; gap: 2px; }
.fortress-readiness strong { font-size: 10px; }
.fortress-readiness small { font-size: 9px; line-height: 1.45; }
.fortress-arm { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; color: #78909a; background: #e6eef1; border: 0; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); font-size: 12px; font-weight: 900; }
.fortress-arm svg { width: 18px; height: 18px; }

.first-strike-console {
  display: grid;
  gap: 12px;
  padding: 13px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #badde9;
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(30, 98, 126, 0.09);
}

.first-strike-identity {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #d7eaf1;
}

.first-strike-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: #137d9f;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.first-strike-mark svg {
  width: 20px;
  height: 20px;
}

.first-strike-identity > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.first-strike-identity small {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.first-strike-identity strong {
  overflow: hidden;
  color: var(--hub-ink);
  font: 850 13px/1.35 var(--hub-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-strike-identity > b {
  padding: 5px 7px;
  color: #a94f1d;
  background: var(--hub-fire-soft);
  border-radius: 4px;
  font-size: 10px;
}

.first-strike-sequence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.first-strike-sequence > span {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 2px;
  min-height: 66px;
  padding: 9px 7px 7px;
  background: #edf8fc;
  border: 1px solid #c5e3ed;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.first-strike-sequence > span:last-of-type {
  background: #fff2e7;
  border-color: #f0cfb2;
}

.first-strike-sequence > span > b {
  position: absolute;
  top: 4px;
  right: 5px;
  color: #8fb4c2;
  font: 800 8px/1 var(--hub-mono);
}

.first-strike-sequence small {
  color: var(--hub-muted);
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

.first-strike-sequence strong {
  align-self: end;
  color: #136f8e;
  font: 900 15px/1 var(--hub-mono);
}

.first-strike-sequence > span:last-of-type strong {
  color: #b6551c;
}

.first-strike-sequence > svg {
  width: 12px;
  height: 12px;
  color: #9abac7;
}

.first-strike-readiness {
  display: grid;
  gap: 0;
  border-top: 1px solid #d7eaf1;
  border-bottom: 1px solid #d7eaf1;
}

.first-strike-sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 7px 2px;
}

.first-strike-sample + .first-strike-sample {
  border-top: 1px solid #e1eef3;
}

.first-strike-sample > span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.first-strike-sample svg {
  width: 16px;
  height: 16px;
  color: #88a7b5;
}

.first-strike-sample b {
  color: #365d70;
  font-size: 11px;
}

.first-strike-sample > strong {
  color: #9a6b29;
  font: 800 10px/1.3 var(--hub-mono);
  text-align: right;
}

.first-strike-sample[data-ready="true"] svg,
.first-strike-sample[data-ready="true"] > strong {
  color: #14785f;
}

.first-strike-monitor {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 47px;
  padding: 8px 10px;
  background: #f0f7fa;
  border: 1px solid #cadde4;
  border-radius: 6px;
}

.first-strike-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a7bbc4;
}

.first-strike-monitor > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.first-strike-monitor small,
.first-strike-monitor time {
  color: var(--hub-muted);
  font: 750 9px/1.2 var(--hub-mono);
}

.first-strike-monitor strong {
  color: #365d70;
  font-size: 11px;
}

.first-strike-monitor[data-state="listening"] {
  background: #e8f9f2;
  border-color: #9ed9c6;
}

.first-strike-monitor[data-state="listening"] .first-strike-live-dot {
  background: #209c77;
  animation: activity-pulse 1.8s ease-out infinite;
}

.first-strike-confirm {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px 10px;
  cursor: pointer;
  background: #fff7ef;
  border: 1px solid #efd3bc;
  border-radius: 6px;
}

.first-strike-confirm input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.first-strike-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: transparent;
  background: #fff;
  border: 2px solid #dcac84;
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.first-strike-check svg {
  width: 14px;
  height: 14px;
}

.first-strike-confirm input:checked + .first-strike-check {
  color: #fff;
  background: #c76024;
  border-color: #c76024;
}

.first-strike-confirm > span:last-child {
  display: grid;
  gap: 2px;
}

.first-strike-confirm strong {
  color: #7d3f1d;
  font-size: 11px;
}

.first-strike-confirm small {
  color: #997058;
  font-size: 9px;
  line-height: 1.4;
}

.first-strike-confirm:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.62;
}

.first-strike-settings {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dbe8ee;
  background: #f7fbfc;
  border-radius: 8px;
}

.first-strike-auto {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid #b8dce8;
  background: #eefaff;
  border-radius: 6px;
}

.first-strike-auto input { margin-top: 2px; accent-color: #1686a8; }

.first-strike-number {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #31515e;
  font-size: 12px;
}

.first-strike-number input {
  width: 96px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #c5d9e0;
  border-radius: 5px;
  color: #173945;
  background: #fff;
  font: inherit;
}

.first-strike-schedule {
  padding: 2px 0 8px;
  border-bottom: 1px solid #dbe8ee;
}

.first-strike-schedule input {
  width: min(190px, 54vw);
  font-variant-numeric: tabular-nums;
}

.first-strike-settings strong { display: block; color: #173945; font-size: 12px; }
.first-strike-settings small { display: block; margin-top: 2px; color: #64808a; font-size: 10px; line-height: 1.45; }

.first-strike-actions {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) 43px;
  gap: 7px;
}

.first-strike-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 47px;
  border: 0;
  border-radius: 0;
  transition: transform 160ms ease, opacity 160ms ease;
}

.first-strike-actions button:active:not(:disabled) {
  transform: scale(0.98);
}

.first-strike-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.first-strike-actions svg {
  width: 18px;
  height: 18px;
}

.first-strike-refresh,
.first-strike-disarm {
  color: #176d89;
  background: #e1f4fa;
  border: 1px solid #afd8e6 !important;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.first-strike-disarm {
  color: #a6453d;
  background: #fff0ed;
  border-color: #eeb8b2 !important;
}

.first-strike-arm {
  gap: 8px;
  color: #fff;
  background: linear-gradient(100deg, #0c789e 0 48%, #cb5c21 52% 100%);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  font-size: 13px;
  font-weight: 900;
}

.first-strike-confirm-submit {
  gap: 6px;
  color: #fff;
  background: #1c7890;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  font-size: 12px;
  font-weight: 900;
}

.first-strike-message {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  color: #775f2c;
  background: #fff5d8;
  border: 1px solid #ead59d;
  border-radius: 6px;
}

.first-strike-message > svg {
  width: 20px;
  height: 20px;
}

.first-strike-message > span {
  display: grid;
  gap: 2px;
}

.first-strike-message strong {
  font-size: 11px;
}

.first-strike-message small {
  font-size: 9px;
  line-height: 1.4;
}

.first-strike-message[data-tone="ready"],
.first-strike-message[data-tone="armed"],
.first-strike-message[data-tone="success"] {
  color: #126b56;
  background: #e7f9f2;
  border-color: #9ed9c6;
}

.first-strike-message[data-tone="executing"] {
  color: #126987;
  background: #e8f7fb;
  border-color: #a8dbe9;
}

.first-strike-message[data-tone="warning"] {
  color: #845516;
  background: #fff5d8;
  border-color: #e5cc87;
}

.first-strike-message[data-tone="error"] {
  color: #9e3c35;
  background: #fff0ed;
  border-color: #efb9b2;
}

.first-strike-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #c9e0e8;
  background: #f4fafc;
}

.first-strike-metrics[hidden] { display: none !important; }

.first-strike-metrics > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px 10px;
}

.first-strike-metrics > span:nth-child(even) { border-left: 1px solid #d9e8ed; }
.first-strike-metrics > span:nth-child(n + 3) { border-top: 1px solid #d9e8ed; }
.first-strike-metrics small { color: #748f9a; font-size: 8px; font-weight: 800; }
.first-strike-metrics strong { color: #174b61; font: 900 13px/1.1 var(--hub-mono); }
.first-strike-metrics > span:nth-child(3) strong,
.first-strike-metrics > span:nth-child(4) strong { color: #b6551c; }

.first-strike-log {
  min-width: 0;
  padding-top: 2px;
}

.first-strike-log .section-heading {
  margin: 0 0 5px;
}

.first-strike-log ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.first-strike-log li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 7px 2px;
  border-top: 1px solid #e0edf2;
}

.first-strike-log li > svg {
  width: 18px;
  height: 18px;
  color: #1680a2;
}

.first-strike-log li > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.first-strike-log li strong {
  color: var(--hub-ink);
  font-size: 10px;
}

.first-strike-log li small {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 8px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.first-strike-log li time {
  color: #86a1ae;
  font: 750 8px/1 var(--hub-mono);
}

.first-strike-log .is-empty {
  grid-template-columns: 30px minmax(0, 1fr);
  color: var(--hub-muted);
  font-size: 10px;
}

.tool-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  background: var(--hub-white);
  border: 1px solid var(--hub-line);
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(39, 111, 140, 0.09);
}

.single-kingdom-input {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.single-kingdom-input > span:first-child {
  color: var(--hub-muted);
  font-size: 11px;
  font-weight: 800;
}

.number-field {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 46px;
  background: var(--hub-snow);
  border: 1px solid #b9dbe9;
  border-radius: 6px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.number-field:focus-within {
  border-color: var(--hub-ice);
  box-shadow: 0 0 0 3px rgba(32, 168, 209, 0.12);
}

.number-field b {
  padding-left: 12px;
  color: var(--hub-ice-dark);
  font: 800 16px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.number-field input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 10px 0 5px;
  color: var(--hub-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: 850 18px/1 ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

.number-field input::placeholder {
  color: #96b0bd;
  opacity: 1;
}

.number-field input[aria-invalid="true"] {
  color: var(--hub-danger);
}

.compact-range {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.compact-range button {
  min-height: 40px;
  color: var(--hub-muted);
  background: var(--hub-snow);
  border: 1px solid var(--hub-line);
  border-radius: 5px;
  font-size: 13px;
  font-weight: 850;
}

.compact-range button[aria-pressed="true"] {
  color: #fff;
  background: var(--hub-ice);
  border-color: var(--hub-ice);
  box-shadow: 0 5px 12px rgba(32, 168, 209, 0.2);
}

.ice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 116px;
  min-height: 50px;
  align-self: end;
  padding: 0 16px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  border-radius: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-shadow: 0 8px 16px rgba(17, 123, 159, 0.18);
  font-size: 14px;
  font-weight: 900;
}

.ice-action svg {
  width: 18px;
  height: 18px;
}

.ice-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.orange-action {
  background: var(--hub-fire-dark);
  box-shadow: 0 8px 16px rgba(201, 94, 30, 0.17);
}

.tool-result {
  min-height: 224px;
  margin-top: 14px;
}

.tool-empty,
.tool-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 224px;
  padding: 30px 24px;
  color: var(--hub-muted);
  background: rgba(255, 255, 255, 0.66);
  border: 1px dashed #bcdbe8;
  border-radius: 8px;
  text-align: center;
}

.tool-empty svg,
.tool-loading svg {
  width: 27px;
  height: 27px;
  color: var(--hub-ice);
}

.tool-empty strong {
  color: var(--hub-ink);
  font-size: 15px;
}

.tool-empty span,
.tool-loading span {
  max-width: 30ch;
  font-size: 12px;
  line-height: 1.55;
}

.tool-loading svg {
  animation: hub-spin 900ms linear infinite;
}

.tool-error svg {
  color: var(--hub-danger);
}

.single-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: #fff;
  background: #157fa3;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

.single-result-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.single-result-header span {
  display: block;
  margin-top: 4px;
  color: #dff7ff;
  font-size: 11px;
  font-weight: 700;
}

.live-badge {
  padding: 4px 7px;
  color: #116f5a;
  background: #dbfff4;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
}

.single-dimension-toolbar {
  margin: 10px 0;
  padding: 0 1px 7px;
}

.ranking-player-list,
.chat-message-list,
.alliance-ladder {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-player-list li {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 64px;
  padding: 9px 10px;
  background: #fff;
  border-bottom: 1px solid var(--hub-line);
}

.ranking-position {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--hub-ice-dark);
  background: var(--hub-ice-soft);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  font: 850 12px/1 ui-monospace, Consolas, monospace;
}

.ranking-player-list li:nth-child(1) .ranking-position {
  color: #8a5b0b;
  background: #ffe7a7;
}

.ranking-player-list li:nth-child(2) .ranking-position {
  color: #536f7c;
  background: #e3edf1;
}

.ranking-player-list li:nth-child(3) .ranking-position {
  color: #8c512b;
  background: #f9d3b9;
}

.ranking-identity {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ranking-identity strong {
  overflow: hidden;
  color: var(--hub-ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-identity small {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-score {
  padding-left: 8px;
  color: var(--hub-ice-dark);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.collector-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-top: 10px;
  padding: 0 11px;
  color: var(--hub-muted);
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
}

.chat-result {
  min-height: 300px;
}

.chat-boundary {
  min-height: 260px;
}

.chat-message-list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  padding: 10px 8px;
  background: #fff;
  border-bottom: 1px solid var(--hub-line);
}

.chat-avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff;
  background: var(--hub-ice-dark);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-size: 15px;
  font-weight: 900;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chat-message-meta strong {
  overflow: hidden;
  color: var(--hub-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-meta time {
  flex: 0 0 auto;
  color: var(--hub-muted);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.chat-message-list p {
  margin: 5px 0 0;
  color: #31586d;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.alliance-result-header {
  background: #bf5c25;
}

.alliance-result-header span {
  color: #fff0e7;
}

.alliance-ladder li {
  padding: 12px 10px 10px;
  background: #fff;
  border-bottom: 1px solid #efd8ca;
}

.alliance-line,
.alliance-line > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.alliance-line b {
  color: var(--hub-fire-dark);
  font: 850 11px/1 ui-monospace, Consolas, monospace;
}

.alliance-line strong {
  color: var(--hub-ink);
  font-size: 14px;
}

.alliance-line > strong {
  color: var(--hub-fire-dark);
  font-variant-numeric: tabular-nums;
}

.alliance-line-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.alliance-line-actions > strong {
  flex: 0 0 auto;
  color: var(--hub-fire-dark);
  font-variant-numeric: tabular-nums;
}

.alliance-members-button,
.alliance-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  color: var(--hub-fire-dark);
  background: #fff8f3;
  border: 1px solid #efc4aa;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.alliance-members-button svg,
.alliance-back-button svg {
  width: 14px;
  height: 14px;
}

.alliance-members-button:hover,
.alliance-back-button:hover {
  background: #ffeedf;
}

.alliance-members-button:disabled {
  color: #a7b5ba;
  background: #f4f7f8;
  border-color: #dce6e9;
  cursor: not-allowed;
  opacity: .8;
}

.alliance-member-header {
  display: flex;
  align-items: center;
  min-width: 0;
}

.alliance-member-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  margin: 10px 0 8px;
}

.alliance-member-updated {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-member-groups {
  display: grid;
  gap: 10px;
}

.alliance-rank-group {
  overflow: hidden;
  background: #fff;
  border: 1px solid #efd8ca;
  border-radius: 5px;
}

.alliance-rank-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 38px;
  padding: 7px 10px;
  background: #fff4eb;
  border-bottom: 1px solid #efd8ca;
}

.alliance-rank-title h3 {
  margin: 0;
  color: var(--hub-fire-dark);
  font-size: 12px;
  font-weight: 900;
}

.alliance-rank-title span {
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 750;
}

.alliance-member-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alliance-member-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 45px;
  padding: 7px 9px;
  border-bottom: 1px solid #f1e4dc;
}

.alliance-member-row:last-child {
  border-bottom: 0;
}

.alliance-member-index {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: var(--hub-fire-dark);
  background: #fff0e5;
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  font: 850 9px/1 var(--hub-mono);
}

.alliance-member-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.alliance-member-identity strong,
.alliance-member-identity small,
.alliance-member-meta {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alliance-member-identity strong {
  color: var(--hub-ink);
  font-size: 12px;
}

.alliance-member-identity small {
  color: var(--hub-muted);
  font: 9px/1.2 var(--hub-mono);
}

.alliance-member-meta {
  color: var(--hub-muted);
  font-size: 9px;
}

.alliance-member-status {
  min-width: 26px;
  color: #9aaab0;
  font-size: 9px;
  font-weight: 850;
  text-align: right;
  white-space: nowrap;
}

.alliance-member-status.is-online {
  color: #13866d;
}

.alliance-ladder p {
  margin: 6px 0 8px;
  color: var(--hub-muted);
  font-size: 10px;
  line-height: 1.45;
}

.alliance-bar {
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  background: var(--hub-fire-soft);
  border-radius: 2px;
}

.alliance-bar::after {
  display: block;
  width: var(--fill);
  height: 100%;
  background: var(--hub-fire);
  content: "";
}

.monitor-heading {
  align-items: center;
}

.hub-view-heading {
  align-items: center;
  margin-bottom: 13px;
}

.feature-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 18px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
}

.feature-tabs button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  padding: 5px 3px;
  color: var(--hub-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 850;
}

.feature-tabs button[aria-selected="true"] {
  color: #fff;
  background: var(--hub-ice-dark);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.feature-tabs svg {
  width: 19px;
  height: 19px;
}

.feature-panel {
  min-width: 0;
  animation: hub-view-in 220ms cubic-bezier(0.2, 0.78, 0.25, 1) both;
}

.feature-panel[hidden] {
  display: none !important;
}

.activity-view-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.activity-heading-actions {
  display: flex;
  gap: 6px;
}

.activity-notification,
.activity-refresh {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--hub-ice-dark);
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 7px;
  box-shadow: 0 6px 14px rgba(17, 123, 159, 0.1);
}

.activity-refresh:disabled svg {
  animation: hub-spin 900ms linear infinite;
}

.activity-notification svg,
.activity-refresh svg {
  width: 18px;
  height: 18px;
}

.activity-notification.is-enabled {
  color: #fff;
  background: var(--hub-fire-dark);
  border-color: var(--hub-fire-dark);
}

.activity-monitor-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(26, 88, 113, 0.07);
}

.activity-monitor-control label {
  display: grid;
  min-width: 0;
  gap: 4px;
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 850;
}

.activity-kid-input {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  min-height: 42px;
  overflow: hidden;
  color: var(--hub-ice-dark);
  background: var(--hub-snow);
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.activity-kid-input:focus-within {
  border-color: var(--hub-ice);
  box-shadow: 0 0 0 3px rgba(32, 168, 209, 0.14);
}

.activity-kid-input b {
  display: grid;
  place-items: center;
  background: var(--hub-ice-soft);
  font: 900 14px/1 var(--hub-mono);
}

.activity-kid-input input {
  min-width: 0;
  width: 100%;
  padding: 0 9px;
  color: var(--hub-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: 900 16px/1 var(--hub-mono);
}

.activity-kid-input input:disabled {
  color: #506f7e;
  background: #edf5f8;
  cursor: not-allowed;
}

.activity-monitor-toggle {
  display: flex;
  align-items: center;
  align-self: end;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 12px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font-size: 12px;
  font-weight: 900;
}

.activity-monitor-toggle[data-mode="stop"] {
  background: var(--hub-fire-dark);
}

.activity-monitor-toggle:disabled {
  cursor: wait;
  opacity: 0.68;
}

.activity-monitor-toggle svg {
  width: 17px;
  height: 17px;
}

.activity-live-strip {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 12px;
  padding: 0 11px;
  color: #426879;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 7px;
  font-size: 10px;
}

.activity-live-strip strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-live-strip time {
  color: var(--hub-muted);
  font-family: var(--hub-mono);
}

.activity-live-dot {
  width: 8px;
  height: 8px;
  background: #e6aa42;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(230, 170, 66, 0.14);
}

.activity-live-strip[data-state="listening"] .activity-live-dot {
  background: #17a074;
  box-shadow: 0 0 0 3px rgba(23, 160, 116, 0.14);
  animation: activity-pulse 1.8s ease-out infinite;
}

.activity-live-strip[data-state="error"] .activity-live-dot,
.activity-live-strip[data-state="retrying"] .activity-live-dot {
  background: var(--hub-danger);
  box-shadow: 0 0 0 3px rgba(217, 80, 80, 0.14);
}

.activity-live-strip[data-state="stopped"] .activity-live-dot {
  background: #8ca4af;
  box-shadow: 0 0 0 3px rgba(140, 164, 175, 0.14);
}

.activity-match-board {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.activity-match-board > .tool-loading,
.activity-match-board > .tool-error {
  min-height: 320px;
}

.activity-monitor-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 260px;
  padding: 24px;
  color: var(--hub-muted);
  background: #fff;
  border: 1px dashed var(--hub-line);
  border-radius: 8px;
  text-align: center;
}

.activity-monitor-empty svg {
  width: 30px;
  height: 30px;
  color: var(--hub-ice-dark);
}

.activity-monitor-empty strong {
  color: var(--hub-ink);
  font-size: 14px;
}

.activity-monitor-empty span {
  font-size: 10px;
}

.activity-intel-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(26, 88, 113, 0.07);
}

.activity-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 8px 11px;
  border-bottom: 1px solid var(--hub-line);
}

.activity-card-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 900;
}

.activity-card-identity svg {
  width: 19px;
  height: 19px;
  color: var(--hub-ice-dark);
}

.arsenal-card .activity-card-identity svg {
  color: var(--hub-fire-dark);
}

.activity-badge {
  flex: 0 0 auto;
  min-width: 54px;
  padding: 5px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.activity-badge.tone-live {
  color: #117158;
  background: #dff8ef;
}

.activity-badge.tone-alert {
  color: #fff;
  background: var(--hub-danger);
}

.activity-badge.tone-muted {
  color: #637b87;
  background: #eaf3f6;
}

.activity-badge.tone-error {
  color: #a92f2f;
  background: #ffe5e5;
}

.activity-stage-line {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  border-bottom: 1px solid var(--hub-line);
}

.activity-metric {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid var(--hub-line);
}

.activity-metric:last-child {
  border-right: 0;
}

.activity-metric small {
  color: var(--hub-muted);
  font-size: 8px;
  font-weight: 750;
}

.activity-metric strong {
  overflow: hidden;
  font: 850 11px/1.25 var(--hub-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-matchup {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-height: 104px;
  padding: 14px 12px;
  color: var(--hub-muted);
  background: linear-gradient(90deg, var(--hub-ice-soft), #fff 48%, var(--hub-fire-soft));
  text-align: center;
}

.activity-matchup.is-alert {
  background: linear-gradient(90deg, #cfeff8, #fff 48%, #ffe2ca);
  box-shadow: inset 0 0 0 2px rgba(217, 80, 80, 0.2);
}

.activity-matchup > svg {
  width: 25px;
  height: 25px;
  color: var(--hub-ice-dark);
}

.activity-matchup > strong {
  color: var(--hub-ink);
  font-size: 14px;
}

.activity-kids {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
}

.activity-kid {
  min-width: 92px;
  padding: 8px 9px;
  color: #fff;
  background: var(--hub-ice-dark);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  font: 900 18px/1 var(--hub-mono);
}

.activity-kid:last-child {
  background: var(--hub-fire-dark);
}

.activity-versus {
  color: var(--hub-danger);
  font: 950 12px/1 var(--hub-mono);
}

.activity-alert-copy,
.activity-match-copy {
  font-size: 10px;
  font-weight: 850;
}

.activity-alert-copy {
  color: #aa3434;
}

.activity-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  color: var(--hub-muted);
  background: #f8fcfe;
  border-top: 1px solid var(--hub-line);
  font-size: 8px;
}

.activity-card-foot time {
  font-family: var(--hub-mono);
}

.activity-state-message {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 116px;
  padding: 18px;
  color: var(--hub-muted);
  text-align: center;
}

.activity-state-message svg {
  width: 25px;
  height: 25px;
  color: var(--hub-fire-dark);
}

.activity-state-message strong {
  color: var(--hub-ink);
  font-size: 13px;
}

.activity-state-message span {
  font-size: 9px;
}

.activity-state-message.is-error svg {
  color: var(--hub-danger);
}

.arsenal-legion-list {
  display: grid;
}

.arsenal-activity-meta {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.75fr;
  border-bottom: 1px solid var(--hub-line);
}

.arsenal-legion-row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  min-height: 70px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hub-line);
}

.arsenal-legion-row:last-child {
  border-bottom: 0;
}

.arsenal-legion-label {
  color: var(--hub-fire-dark);
  font-size: 10px;
  font-weight: 900;
}

.arsenal-opponent {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.arsenal-opponent strong {
  font: 900 15px/1.1 var(--hub-mono);
}

.arsenal-opponent span,
.arsenal-opponent small {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arsenal-legion-row > svg {
  width: 18px;
  height: 18px;
  color: var(--hub-fire);
}

.activity-timeline {
  min-width: 0;
  padding-top: 3px;
}

.activity-timeline-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 68px;
  color: var(--hub-muted);
  background: #fff;
  border: 1px dashed var(--hub-line);
  border-radius: 8px;
  font-size: 10px;
}

.activity-timeline-empty svg {
  width: 18px;
  height: 18px;
}

.activity-event-list {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
  list-style: none;
}

.activity-event-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 57px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--hub-line);
}

.activity-event-list li:last-child {
  border-bottom: 0;
}

.activity-event-list li > svg {
  width: 18px;
  height: 18px;
  color: var(--hub-ice-dark);
}

.activity-event-list li.severity-critical > svg {
  color: var(--hub-danger);
}

.activity-event-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.activity-event-copy strong,
.activity-event-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-event-copy strong {
  font-size: 10px;
}

.activity-event-copy small,
.activity-event-list time {
  color: var(--hub-muted);
  font-size: 8px;
}

.activity-event-list time {
  font-family: var(--hub-mono);
}

.online-estimate-probe {
  margin-bottom: 20px;
}

.online-estimate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px 8px 0 0;
}

.online-estimate-result {
  min-height: 152px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.online-estimate-empty {
  min-height: 150px;
  border: 0;
  border-radius: 0;
}

.online-estimate-panel {
  display: grid;
  min-width: 0;
}

.online-estimate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  color: #fff;
  background: var(--hub-ice-dark);
}

.online-estimate-head > strong {
  font-size: 14px;
  font-weight: 900;
}

.online-estimate-confidence {
  padding: 5px 7px;
  color: #e9faff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
}

.online-estimate-confidence.is-low {
  color: #fff5d9;
  background: rgba(127, 80, 0, 0.34);
}

.online-estimate-confidence.is-unavailable {
  color: #edf4f7;
  background: rgba(58, 71, 82, 0.48);
}

.online-estimate-confidence.is-calibrated {
  color: #e9faff;
  background: rgba(17, 123, 159, 0.72);
}

.online-estimate-confidence.is-cached {
  color: #fff5d9;
  background: rgba(127, 80, 0, 0.42);
}

.online-estimate-total {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 12px 13px;
  background: var(--hub-ice-soft);
}

.online-estimate-total span {
  color: var(--hub-muted);
  font-size: 11px;
  font-weight: 800;
}

.online-estimate-total strong {
  color: var(--hub-ice-dark);
  font: 900 25px/1 var(--hub-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.online-estimate-daily {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 11px 12px;
  color: #416a7e;
  background: #fff;
  border-top: 1px solid #cce5ed;
}

.online-estimate-daily > span {
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 850;
}

.online-estimate-daily > strong {
  color: var(--hub-ice-dark);
  font: 900 18px/1 var(--hub-font);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.online-estimate-daily > small {
  grid-column: 1 / -1;
  color: #5c7c8d;
  font: 750 9px/1.3 var(--hub-mono);
}

.online-estimate-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 12px;
  color: #416a7e;
  background: #f4fbfd;
  border-top: 1px solid #cce5ed;
  border-bottom: 1px solid #cce5ed;
  font: 800 9px/1.35 var(--hub-mono);
}

.online-estimate-sample {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--hub-line);
}

.online-estimate-sample span {
  min-width: 0;
  padding: 9px 5px;
  color: var(--hub-muted);
  border-right: 1px solid var(--hub-line);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.online-estimate-sample span:last-child {
  border-right: 0;
}

.online-estimate-list {
  display: grid;
}

.online-estimate-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  color: var(--hub-ink);
  background: #fff;
  border-bottom: 1px solid var(--hub-line);
}

.online-estimate-list-title strong {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
}

.online-estimate-list-title span {
  min-width: 0;
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.online-estimate-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 53px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--hub-line);
}

.online-estimate-row > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.online-estimate-row strong {
  overflow: hidden;
  color: var(--hub-ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.online-estimate-row small {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.online-estimate-row > b {
  color: var(--hub-ice-dark);
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 350px) {
  .online-estimate-range {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .online-estimate-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .online-estimate-row > b {
    white-space: normal;
  }

  .online-estimate-list-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .online-estimate-list-title span {
    text-align: left;
  }
}

.online-estimate-list-empty {
  padding: 16px 12px;
  color: var(--hub-muted);
  font-size: 11px;
  text-align: center;
}

.online-estimate-note {
  margin: 0;
  padding: 10px 12px 12px;
  color: var(--hub-muted);
  background: #f9fdff;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.55;
}

.location-probe {
  margin-bottom: 20px;
}

.location-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px 8px 0 0;
}

.uid-field {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  background: var(--hub-snow);
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.uid-field svg {
  width: 19px;
  height: 19px;
  color: var(--hub-ice-dark);
}

.uid-field input {
  min-width: 0;
  width: 100%;
  color: var(--hub-ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: 800 16px/1 var(--hub-font);
}

.kingdom-field {
  grid-template-columns: 18px minmax(0, 1fr);
  padding: 0 8px;
}

.kingdom-field b {
  color: var(--hub-ice-dark);
  font: 900 14px/1 var(--hub-mono);
}

.location-submit,
.location-open-map,
.location-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 12px;
  font-weight: 900;
}

.location-submit svg,
.location-open-map svg,
.location-follow svg {
  width: 17px;
  height: 17px;
}

.location-result {
  min-height: 112px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.location-empty {
  min-height: 110px;
}

.location-miss-actions {
  width: 100%;
  margin-top: 4px;
}

.location-search-all,
.location-search-cancel {
  min-height: 40px;
  padding: 0 14px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  font-size: 11px;
  font-weight: 900;
}

.location-search-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.location-search-all svg {
  width: 16px;
  height: 16px;
}

.player-search-progress {
  display: grid;
  gap: 10px;
  min-height: 110px;
  padding: 14px 12px;
  background: linear-gradient(180deg, #f6fcff, #fff);
}

.player-search-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.player-search-progress-head strong {
  color: var(--hub-ink);
  font-size: 13px;
}

.player-search-progress-head b {
  color: var(--hub-ice-dark);
  font: 900 13px/1 var(--hub-mono);
}

.player-search-meter {
  height: 8px;
  overflow: hidden;
  background: #dcebf2;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.player-search-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--hub-ice-dark), #57b8df);
  transition: width 180ms ease;
}

.player-search-progress > span {
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.player-search-progress > .player-search-resolution {
  color: var(--hub-ice-dark);
  font: 900 11px/1.35 var(--hub-mono);
}

.location-search-cancel {
  justify-self: start;
  color: var(--hub-ice-dark);
  background: var(--hub-ice-soft);
  border: 1px solid var(--hub-line);
}

.location-miss svg {
  color: var(--hub-fire-dark);
}

.location-card {
  display: grid;
  gap: 11px;
  padding: 12px;
}

.location-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.location-card-head > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.location-card-head strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.location-card-head small,
.location-card-head > b {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.location-card-head > b {
  flex: 0 0 auto;
}

.location-coordinate {
  display: grid;
  grid-template-columns: 26px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 9px 11px;
  background: var(--hub-ice-soft);
  border-radius: 6px;
}

.location-coordinate svg {
  width: 23px;
  height: 23px;
  color: var(--hub-ice-dark);
}

.location-coordinate strong {
  color: var(--hub-ice-dark);
  font: 900 21px/1 var(--hub-mono);
}

.location-coordinate span {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.location-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.location-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.location-open-map,
.location-follow {
  width: 100%;
  background: var(--hub-fire-dark);
}

.location-follow {
  background: var(--hub-ice-dark);
}

.location-follow:disabled {
  color: var(--hub-muted);
  background: var(--hub-ice-soft);
}

.watch-probe {
  margin-bottom: 20px;
}

.watch-heading {
  align-items: end;
}

.watch-heading > div {
  display: grid;
  gap: 2px;
}

.watch-heading > div > span {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.watch-tools,
.watch-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.watch-tools button,
.watch-actions button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--hub-ice-dark);
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.watch-tools button.is-enabled {
  color: #117158;
  background: #dff8ef;
}

.watch-tools svg,
.watch-actions svg {
  width: 17px;
  height: 17px;
}

.watch-list {
  display: grid;
  gap: 8px;
}

.watch-empty {
  min-height: 126px;
  background: #fff;
  border: 1px dashed var(--hub-line);
  border-radius: 8px;
}

.watch-item {
  display: grid;
  gap: 10px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
}

.watch-item.has-alerts {
  border-color: #efd1b8;
}

.watch-item.is-loading {
  opacity: 0.68;
}

.watch-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.watch-item-head > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.watch-item-head strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watch-item-head small {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.watch-actions {
  flex: 0 0 auto;
}

.watch-actions button {
  width: 34px;
  height: 34px;
}

.watch-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 42px;
  padding: 8px 10px;
  background: var(--hub-snow);
  border-radius: 6px;
}

.watch-status strong {
  color: var(--hub-ice-dark);
  font: 900 16px/1 var(--hub-mono);
}

.watch-status span {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
  text-align: right;
}

.watch-alerts {
  display: grid;
  gap: 6px;
  padding-top: 9px;
  border-top: 1px solid #efd8ca;
}

.watch-alert {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 9px;
  color: var(--hub-fire-dark);
  background: var(--hub-fire-soft);
  border-radius: 6px;
}

.watch-alert svg {
  width: 19px;
  height: 19px;
}

.watch-alert span {
  display: grid;
  gap: 2px;
}

.watch-alert strong {
  font-size: 11px;
}

.watch-alert small {
  color: #6f553f;
  font-size: 9px;
}

.watch-clear {
  justify-self: end;
  min-height: 32px;
  padding: 0 10px;
  color: var(--hub-fire-dark);
  background: transparent;
  border: 1px solid #efd1b8;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 850;
}

.map-probe {
  margin-bottom: 20px;
}

.map-form {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 0.9fr 48px;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px 8px 0 0;
}

.map-form label {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.map-form label > span {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 800;
}

.map-form input {
  min-width: 0;
  width: 100%;
  height: 40px;
  padding: 0 7px;
  color: var(--hub-ink);
  background: var(--hub-snow);
  border: 1px solid var(--hub-line);
  border-radius: 5px;
  font: 800 16px/1 var(--hub-font);
}

.map-form input:focus-visible {
  border-color: var(--hub-ice);
  outline: 2px solid color-mix(in srgb, var(--hub-ice) 25%, transparent);
  outline-offset: 1px;
}

.map-submit {
  display: grid;
  align-self: end;
  place-items: center;
  width: 48px;
  height: 40px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

.map-submit svg {
  width: 18px;
  height: 18px;
}

.map-submit span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
}

.map-result {
  min-height: 112px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
}

.map-empty {
  min-height: 110px;
}

.map-result-header,
.map-city-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map-result-header {
  padding: 10px 11px;
  background: var(--hub-ice-soft);
  border-bottom: 1px solid var(--hub-line);
}

.map-result-header strong {
  font-size: 13px;
}

.map-result-header span {
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 750;
}

.map-city-list {
  display: grid;
  max-height: 420px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.map-city-list li {
  min-width: 0;
  padding: 10px 11px;
  border-bottom: 1px solid var(--hub-line);
}

.map-city-list li:last-child {
  border-bottom: 0;
}

.map-city-line > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.map-city-line strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-city-line p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--hub-muted);
  font-size: 9px;
  font-weight: 650;
}

.map-city-line > b {
  flex: 0 0 auto;
  color: var(--hub-ice-dark);
  font: 900 11px/1 var(--hub-mono);
}

.map-city-marks {
  display: flex;
  gap: 5px;
  min-height: 0;
  margin-top: 6px;
}

.map-mark {
  padding: 3px 5px;
  color: #117158;
  background: #dff8ef;
  border-radius: 3px;
  font-size: 8px;
}

.map-mark.move {
  color: #8a3e14;
  background: var(--hub-fire-soft);
}

.map-mark.neutral {
  color: var(--hub-muted);
  background: var(--hub-snow);
}

.trend-form,
.events-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
  box-shadow: 0 9px 22px rgba(39, 111, 140, 0.08);
}

.trend-sample {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  color: var(--hub-ice-dark);
  background: var(--hub-ice-soft);
  border: 1px solid #acd8e8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}

.trend-sample svg { width: 17px; height: 17px; }

.trend-result,
.player-history-result,
.events-result {
  min-height: 280px;
  margin-top: 12px;
}

.trend-panel,
.history-panel,
.events-board {
  display: grid;
  gap: 10px;
}

.trend-head,
.history-head,
.events-overview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  color: #fff;
  background: #147e9f;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.trend-head > span,
.events-overview-head > span { display: grid; min-width: 0; gap: 3px; }
.trend-head strong,
.history-head strong,
.events-overview-head strong { font-size: 16px; }
.trend-head small,
.events-overview-head small { color: #dcf7ff; font-size: 10px; font-weight: 700; }

.trend-status,
.events-readonly {
  flex: 0 0 auto;
  padding: 4px 7px;
  color: #126b58;
  background: #ddfff4;
  border-radius: 4px;
  font-size: 10px;
}

.trend-status.is-waiting { color: #8d5a12; background: #fff1c7; }
.trend-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.trend-metric {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 11px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.trend-metric small { color: var(--hub-muted); font-size: 10px; font-weight: 750; }
.trend-metric strong { overflow: hidden; color: var(--hub-ink); font: 900 17px/1.2 var(--hub-mono); text-overflow: ellipsis; white-space: nowrap; }
.trend-metric b { color: #188b68; font-size: 9px; }
.trend-metric b.is-down { color: var(--hub-danger); }
.trend-metric b.is-flat { color: var(--hub-muted); }

.trend-chart {
  margin: 0;
  padding: 8px 8px 10px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 7px;
}

.trend-chart svg { display: block; width: 100%; aspect-ratio: 360 / 156; overflow: visible; border-bottom: 1px solid #d9ebf2; }
.trend-chart-area { fill: #dbf4fb; }
.trend-chart-line { fill: none; stroke: var(--hub-ice-dark); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.trend-chart-point { fill: #fff; stroke: var(--hub-fire); stroke-width: 2; }

.trend-chart figcaption {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 0;
  color: var(--hub-muted);
  font-size: 9px;
}

.trend-chart figcaption strong { color: var(--hub-ice-dark); font-size: 10px; }
.trend-chart figcaption span:last-child { text-align: right; }
.trend-waiting,
.trend-note { padding: 12px; color: #4e7386; background: #eaf8fd; border-left: 3px solid var(--hub-ice); font-size: 11px; line-height: 1.55; }
.trend-note { margin: 0; background: transparent; border-left-color: #bdd9e5; }

.history-head { background: #bf6228; }
.history-head b { padding: 4px 7px; color: #984415; background: #fff0e4; border-radius: 4px; font-size: 10px; }
.history-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.history-timeline::before { position: absolute; top: 22px; bottom: 22px; left: 20px; width: 2px; background: #c6e2ed; content: ""; }
.history-timeline li { position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; padding: 10px 0; }

.history-node {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: var(--hub-ice-dark);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.history-node.is-shield { background: var(--hub-fire-dark); }
.history-node svg { width: 18px; height: 18px; }
.history-copy { min-width: 0; padding: 10px 11px; background: #fff; border: 1px solid var(--hub-line); border-radius: 6px; }
.history-copy strong { color: var(--hub-ink); font-size: 13px; }
.history-copy p { margin: 5px 0; color: #365f73; font: 750 11px/1.5 var(--hub-mono); overflow-wrap: anywhere; }
.history-copy small { color: var(--hub-muted); font-size: 9px; }

.shield-countdown {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  margin-top: 7px;
  padding: 3px 7px;
  color: #0c765c;
  background: #ddfff4;
  border: 1px solid #a6e2d2;
  border-radius: 4px;
  font: 850 10px/1.3 var(--hub-mono);
  font-variant-numeric: tabular-nums;
}

.shield-countdown.is-expired { color: #8a5a17; background: #fff3d8; border-color: #ecd195; }
.watch-shield-countdown { margin-top: -2px; }
.location-marks .shield-countdown,
.map-city-marks .shield-countdown { margin-top: 0; }
.events-form { margin-bottom: 12px; }
.events-board { gap: 9px; }

.event-data-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(31, 100, 128, 0.07);
}

.event-data-card.state-unavailable,
.event-data-card.state-inactive,
.event-data-card.state-outside_warzone { border-color: #e6d7c5; }

.event-data-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 9px 11px;
  background: #edf9fd;
  border-bottom: 1px solid var(--hub-line);
}

.event-data-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.event-data-title svg { width: 18px; height: 18px; color: var(--hub-ice-dark); }
.event-data-title strong { color: var(--hub-ink); font-size: 14px; }

.event-state {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: #15725e;
  background: #dcfff3;
  border-radius: 4px;
  font-size: 9px;
}

.state-unavailable .event-state,
.state-inactive .event-state,
.state-outside_warzone .event-state,
.event-state.is-research { color: #925317; background: #fff0dc; }
.event-message { margin: 0; padding: 10px 11px; color: #4d6f7f; font-size: 11px; line-height: 1.55; }

.event-stat-grid,
.sunfire-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }

.event-stat,
.sunfire-flow .event-stat { display: grid; min-width: 0; gap: 3px; padding: 8px; background: #f3fafc; border: 1px solid #d7e9f0; border-radius: 5px; }
.event-stat small { color: var(--hub-muted); font-size: 9px; }
.event-stat strong { overflow: hidden; color: var(--hub-ink); font: 850 12px/1.3 var(--hub-mono); text-overflow: ellipsis; white-space: nowrap; }

.fortress-ranking { display: grid; gap: 0; margin: 0 10px 10px; padding: 0; list-style: none; border-top: 1px solid var(--hub-line); }
.fortress-ranking li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-height: 38px; border-bottom: 1px solid var(--hub-line); }
.fortress-ranking b { color: var(--hub-fire-dark); font: 850 11px/1 var(--hub-mono); }
.fortress-ranking span { overflow: hidden; color: #31596c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fortress-ranking strong { color: var(--hub-fire-dark); font-size: 10px; white-space: nowrap; }
.fortress-applications,
.sunfire-boundary { margin: 0 10px 10px; padding: 8px; color: #785735; background: #fff6e9; border-left: 3px solid var(--hub-fire); font-size: 10px; line-height: 1.55; }
.sunfire-research-card .event-data-head { background: #fff4e9; border-color: #f0d6be; }
.sunfire-research-card .event-data-title svg { color: var(--hub-fire-dark); }
.sunfire-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.monitor-section-heading {
  margin-top: 2px;
}

.icon-action,
.add-monitor,
.monitor-actions button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--hub-ice-dark);
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.icon-action svg,
.add-monitor svg,
.monitor-actions svg {
  width: 19px;
  height: 19px;
}

.monitor-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 8px;
}

.add-monitor {
  width: 48px;
  height: 46px;
  color: #fff;
  background: var(--hub-ice-dark);
  border: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border-radius: 0;
}

.monitor-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.monitor-empty {
  min-height: 160px;
}

.monitor-item {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
}

.monitor-item.is-loading {
  opacity: 0.68;
}

.monitor-item-head,
.monitor-actions,
.monitor-alliance-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.monitor-item h2 {
  margin: 0;
  color: var(--hub-ink);
  font-size: 15px;
  font-weight: 900;
}

.monitor-item-head div > span {
  display: block;
  max-width: 24ch;
  margin-top: 3px;
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-actions {
  flex: 0 0 auto;
}

.monitor-actions button {
  width: 34px;
  height: 34px;
}

.monitor-alliance-list {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--hub-line);
}

.monitor-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 10px;
  overflow: hidden;
  background: var(--hub-line);
  border: 1px solid var(--hub-line);
  border-radius: 6px;
}

.monitor-metrics > div {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 5px;
  background: var(--hub-snow);
  text-align: center;
}

.monitor-metrics span {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 8px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-metrics strong {
  color: var(--hub-ink);
  font: 900 13px/1 var(--hub-mono);
}

.monitor-metrics small {
  color: var(--hub-muted);
  font-size: 8px;
  font-weight: 750;
}

.monitor-metrics small.is-up {
  color: #117158;
}

.monitor-metrics small.is-down {
  color: var(--hub-fire-dark);
}

.monitor-dominance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 7px 9px;
  color: var(--hub-muted);
  background: var(--hub-ice-soft);
  border-radius: 5px;
  font-size: 9px;
  font-weight: 750;
}

.monitor-note {
  margin: 7px 0 0;
  color: var(--hub-muted);
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
}

.monitor-dominance strong {
  flex: 0 0 auto;
  color: var(--hub-ice-dark);
  font: 900 12px/1 var(--hub-mono);
}

.monitor-alliance-list div {
  color: var(--hub-muted);
  font-size: 11px;
}

.monitor-alliance-list strong {
  color: var(--hub-ink);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.section-heading h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

.section-heading > span {
  color: var(--hub-muted);
  font-size: 10px;
  font-weight: 750;
}

.capability-panel {
  margin-top: 20px;
}

.capability-list {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: 8px;
}

.capability-list > div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hub-line);
}

.capability-list > div:last-child {
  border-bottom: 0;
}

.capability-list svg {
  width: 20px;
  height: 20px;
  color: var(--hub-ice-dark);
}

.capability-list span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.capability-list strong {
  font-size: 12px;
}

.capability-list small {
  overflow: hidden;
  color: var(--hub-muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capability-list b {
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 9px;
  white-space: nowrap;
}

.status-pending {
  color: #91620e;
  background: #fff4d8;
}

.status-ready {
  color: #117158;
  background: #dff8ef;
}

.status-evidence {
  color: #176d87;
  background: var(--hub-ice-soft);
}

.account-boundary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  margin-top: 12px;
  padding: 12px;
  color: #6f553f;
  background: var(--hub-fire-soft);
  border: 1px solid #efd1b8;
  border-radius: 8px;
}

.account-boundary svg {
  width: 21px;
  height: 21px;
  color: var(--hub-fire-dark);
}

.account-boundary div {
  display: grid;
  gap: 3px;
}

.account-boundary strong {
  font-size: 12px;
}

.account-boundary span {
  font-size: 10px;
  line-height: 1.5;
}

.app-shell > footer {
  display: flex;
  justify-content: center;
  margin: 6px 14px 0;
  padding: 16px 8px 8px;
  color: var(--hub-muted);
  border-top: 1px solid var(--hub-line);
  font-size: 10px;
}

.app-shell > footer p {
  max-width: 38em;
  margin: 0;
  line-height: 1.65;
  text-align: center;
  overflow-wrap: anywhere;
}

.app-nav {
  position: fixed;
  z-index: 80;
  right: 50%;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 430px);
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  padding: 6px 5px env(safe-area-inset-bottom);
  transform: translateX(50%);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #bad9e6;
  box-shadow: 0 -8px 24px rgba(28, 90, 117, 0.11);
}

.app-nav button {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 0;
  color: #7190a0;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
}

.app-nav button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav button[data-view-target="events"] span {
  font-size: 9px;
}

.app-nav button::before {
  position: absolute;
  top: 0;
  width: 24px;
  height: 3px;
  background: transparent;
  border-radius: 2px;
  content: "";
}

.app-nav button[aria-current="page"] {
  color: var(--hub-ice-dark);
  background: var(--hub-ice-soft);
}

.app-nav button[aria-current="page"]::before {
  background: var(--hub-ice);
}

.app-nav button.nav-pending {
  color: #a8bbc4;
  cursor: not-allowed;
  opacity: 0.62;
}

.app-nav button.nav-pending::before {
  display: none;
}

.app-nav svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}

@keyframes hub-view-in {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes hub-spin {
  to { transform: rotate(360deg); }
}

@keyframes activity-pulse {
  0% { box-shadow: 0 0 0 0 rgba(23, 160, 116, 0.32); }
  70%, 100% { box-shadow: 0 0 0 6px rgba(23, 160, 116, 0); }
}

@keyframes fortress-countdown-pulse {
  from { transform: scale(1); opacity: .72; }
  to { transform: scale(1.035); opacity: 1; }
}

@media (max-width: 350px) {
  .intel-header {
    min-height: 72px;
    padding: 7px 12px 6px;
  }

  .intel-header .brand-logo {
    width: 158px;
    height: 58px;
  }

  .app-view {
    padding-right: 10px;
    padding-left: 10px;
  }

  .first-strike-console {
    gap: 10px;
    padding: 10px;
  }

  .first-strike-actions {
    grid-template-columns: minmax(0, 1fr) 43px;
  }

  .first-strike-confirm-submit {
    grid-column: 1;
    grid-row: 1;
  }

  .first-strike-arm {
    grid-column: 1;
    grid-row: 2;
  }

  .first-strike-disarm {
    grid-column: 2;
    grid-row: 2;
  }

  .strike-session-state { grid-template-columns: 36px minmax(0, 1fr) 52px; gap: 7px; padding: 8px; }
  .strike-session-icon { width: 36px; height: 36px; }
  .strike-session-state button { min-width: 52px; padding-right: 4px; padding-left: 4px; }
  .strike-mode-tabs button { grid-template-columns: 22px minmax(0, 1fr); gap: 5px; padding-right: 6px; padding-left: 6px; }
  .strike-mode-tabs button svg { width: 18px; height: 18px; }
  .strike-number-grid,
  .fortress-setting-grid { grid-template-columns: 1fr; }

  .fortress-next-window time { font-size: 15px; }
  .fortress-schedule li { grid-template-columns: 27px minmax(0, 1fr) auto; gap: 6px; }
  .fortress-schedule li > b { width: 25px; height: 25px; }

  .first-strike-sequence > span {
    min-height: 62px;
    padding-right: 5px;
    padding-left: 5px;
  }

  .first-strike-sequence small {
    font-size: 7px;
  }

  .first-strike-sequence strong {
    font-size: 13px;
  }

  .first-strike-identity > b {
    padding-right: 5px;
    padding-left: 5px;
    font-size: 9px;
  }

  .first-strike-identity strong {
    font-size: 10px;
  }

  #view-pk .match-stage {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .tool-form {
    gap: 8px;
    padding: 10px;
  }

  .ice-action {
    min-width: 104px;
    padding: 0 11px;
    font-size: 13px;
  }

  .ranking-player-list li {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding-right: 7px;
    padding-left: 7px;
  }

  .ranking-score {
    font-size: 12px;
  }

  .alliance-line {
    align-items: flex-start;
  }

  .alliance-line-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .alliance-members-button {
    min-height: 28px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 9px;
  }

  .alliance-member-toolbar {
    align-items: flex-start;
  }

  .alliance-member-row {
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
    padding: 7px;
  }

  .alliance-member-meta {
    grid-column: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }

  .alliance-member-status {
    grid-column: 3;
    grid-row: 1;
  }

  .map-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 8px;
  }

  .map-form label:first-child,
  .map-form label:nth-child(4),
  .map-submit {
    grid-column: span 2;
  }

  .map-submit {
    display: flex;
    gap: 6px;
    width: 100%;
  }

  .map-submit span {
    position: static;
    overflow: visible;
    width: auto;
    height: auto;
    clip: auto;
    font-size: 11px;
    font-weight: 900;
  }

  .location-form {
    grid-template-columns: minmax(0, 1fr) 82px;
    padding: 8px;
  }

  .online-estimate-form {
    grid-template-columns: minmax(0, 1fr) 82px;
    padding: 8px;
  }

  .activity-monitor-control {
    grid-template-columns: minmax(0, 1fr) 106px;
    padding: 8px;
  }

  .activity-monitor-toggle {
    padding: 0 8px;
    font-size: 11px;
  }

  .online-estimate-total {
    align-items: start;
    flex-direction: column;
    gap: 7px;
  }

  .online-estimate-total strong {
    font-size: 22px;
  }

  .online-estimate-daily {
    grid-template-columns: 1fr;
  }

  .online-estimate-daily > small {
    grid-column: auto;
  }

  .location-card-head {
    display: grid;
  }

  .location-coordinate {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .location-coordinate span {
    grid-column: 2;
    text-align: left;
  }

  .location-actions {
    grid-template-columns: 1fr;
  }

  .watch-item-head {
    align-items: start;
  }

  .watch-status {
    display: grid;
  }

  .watch-status span {
    text-align: left;
  }

  .monitor-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app-view.is-active,
  .tool-loading svg {
    animation: none;
  }
}