/* ═══════════════════════════════════════════════════════════════════════
   HackEx 2 Bot — Web UI
   Styled to mirror the in-game HackEx 2 visual language:
   - Pure black + neon green (#00ff41) primary
   - JetBrains Mono / Cascadia Code monospace everywhere
   - CRT scan-line overlay
   - Sharp 2px corners, 4px radius buttons
   - Mobile-first 480px container
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color tokens (lifted from the HackEx 2 stylesheet) ── */
  --color-primary:       #00ff41;
  --color-secondary:     #00d4ff;
  --color-warning:       #ffb800;
  --color-danger:        #ff0040;
  --color-success:       #00ff41;
  --color-info:          #00d4ff;

  --color-bg:            #0a0a0a;
  --color-bg-elevated:   #0f0f1a;
  --color-surface:       #1a1a2e;
  --color-surface-hover: #252542;
  --color-border:        #2a2a4a;

  --color-text:          #e0e0e0;
  --color-text-muted:    #808090;
  --color-text-dim:      #505060;

  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               'Source Code Pro', Consolas, Menlo, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  --glow-green: 0 0 8px rgba(0, 255, 65, 0.5), 0 0 16px rgba(0, 255, 65, 0.2);
  --glow-cyan:  0 0 8px rgba(0, 212, 255, 0.5), 0 0 16px rgba(0, 212, 255, 0.2);
  --glow-amber: 0 0 8px rgba(255, 184, 0, 0.5), 0 0 16px rgba(255, 184, 0, 0.2);
  --glow-red:   0 0 8px rgba(255, 0, 64, 0.5),  0 0 16px rgba(255, 0, 64, 0.2);

  --header-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  background: var(--color-bg);
  color: var(--color-text);
  height: 100%;
  color-scheme: dark;
}
/* First tap = click on phones (no 300ms double-tap-zoom wait). */
a, button, .btn, input, select, textarea, label,
[role="button"], .action-card, .nav-burger, .header-account,
.acct-switcher-item, .job-chip, .ctrl-btn {
  touch-action: manipulation;
}

body {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── CRT scan-line overlay (lifted directly from the game) ── */
.scan-line-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 65, 0.015) 2px,
    rgba(0, 255, 65, 0.015) 4px
  );
}

/* Subtle radial glow on body, like the in-game wallpaper backgrounds */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0, 255, 65, 0.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.04), transparent 50%);
  pointer-events: none;
  z-index: -1;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-shadow: var(--glow-green); }

code, pre { font-family: var(--font-mono); color: var(--color-warning); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }

.text-mono    { font-family: var(--font-mono); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-warning { color: var(--color-warning); }
.text-danger  { color: var(--color-danger); }
.text-muted   { color: var(--color-text-muted); }
.text-dim     { color: var(--color-text-dim); }
.text-glow-green { color: var(--color-primary); text-shadow: var(--glow-green); }
.text-glow-cyan  { color: var(--color-secondary); text-shadow: var(--glow-cyan); }
.text-glow-red   { color: var(--color-danger); text-shadow: var(--glow-red); }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.8125rem; }
.text-lg { font-size: 1.125rem; }

/* ═══════════════════════════════════════════════════════════════════════
   App shell — mirrors the in-game app-shell/app-content layout
   ═══════════════════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  /* Avoid transform/filter here — they break position:fixed children */
}

.app-content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 480px;            /* exactly the game's container width */
  margin: 0 auto;
  padding: 0 var(--space-4);
  /* Footer is in-flow now (not viewport-fixed mid-scroll) */
  padding-bottom: var(--space-6, 24px);
}

/* Wider screens: same 480px feel, centered */
@media (min-width: 900px) {
  .app-content { max-width: 720px; }
}

.safe-area-top    { padding-top:    var(--safe-area-inset-top,    env(safe-area-inset-top,    0px)); }
.safe-area-bottom { padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }

/* ═══════════════════════════════════════════════════════════════════════
   Header / Topbar — game-style sticky header with green accent line
   ═══════════════════════════════════════════════════════════════════════ */

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  padding-top: env(safe-area-inset-top);
  /* Prevent the header from stretching when sibling content
     (e.g. tall wallet cards) resizes. */
  flex-shrink: 0;
  height: auto;
}

.app-header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-h);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  justify-self: start;
}

/* Hamburger (top-left) */
.nav-burger {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-burger:hover {
  border-color: rgba(0, 255, 65, 0.45);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
}
.nav-burger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  box-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
}
body.nav-open .nav-burger {
  border-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.35);
}
body.nav-open .nav-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-burger-bar:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-primary);
  text-shadow: var(--glow-green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 1;
  min-width: 0;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
/* Header brand is text-only (no logo) so center account chip has room on phones. */
.brand-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keep text brand on narrow screens; hide only if extremely tight */
@media (max-width: 320px) {
  .brand-text { display: none; }
}
/* Splash / other pages may still use logo-img */
img.logo-img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  filter: drop-shadow(0 0 6px rgba(0, 255, 65, 0.45));
  background: transparent;
}

/* Center of top bar: active account name + in-game username (click → switcher) */
.header-account {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
  max-width: 46vw;
  line-height: 1.2;
  padding: 2px 8px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.header-account:hover,
.header-account[aria-expanded="true"] {
  border-color: rgba(0, 255, 65, 0.35);
  background: rgba(0, 255, 65, 0.06);
}
.header-account-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-shadow: var(--glow-green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.header-account-sep {
  display: none; /* stacked layout: name over username */
}
.header-account-user {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.header-account-user::before {
  content: "@";
  opacity: 0.55;
  margin-right: 1px;
}
.header-account-ip {
  display: block;
  margin-top: 1px;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-dim, #808090);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-account-ip[hidden] {
  display: none !important;
}
.header-account-proxy {
  display: block;
  margin-top: 1px;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-secondary, #6cf);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-account-proxy.is-off {
  color: var(--color-text-dim);
  opacity: 0.85;
}
.header-account-proxy.is-low {
  color: var(--color-warning, #fc6);
}
.header-account-proxy.is-stealth {
  color: #b388ff;
}
.header-account.is-loading .header-account-name,
.header-account.is-loading .header-account-user {
  color: var(--color-text-dim);
}
.header-account.is-loading .header-account-proxy,
.header-account.is-loading .header-account-ip {
  display: none;
}

/* ── Quick account switcher overlay ── */
.acct-switcher {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--header-height, 56px) + 8px) 12px 24px;
  pointer-events: auto;
}
.acct-switcher.hidden,
.acct-switcher[hidden] {
  display: none !important;
}
.acct-switcher-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.acct-switcher-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  max-height: min(78vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #111);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 255, 65, 0.08);
  overflow: hidden;
  animation: fade-in 0.15s ease;
}
.acct-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 6px;
  border-bottom: 1px solid var(--color-border, #333);
}
.acct-switcher-head h2 {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-shadow: var(--glow-green);
}
.acct-switcher-sub {
  margin: 0;
  padding: 6px 14px 8px;
  font-size: 0.65rem;
}
.acct-switcher-status {
  margin: 0 12px 8px;
  padding: 8px 10px;
  font-size: 0.7rem;
  border-radius: 6px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  color: var(--color-secondary, #6cf);
}
.acct-switcher-status.is-err {
  background: rgba(255, 0, 64, 0.1);
  border-color: rgba(255, 0, 64, 0.35);
  color: var(--color-danger, #f66);
}
.acct-switcher-status.is-ok {
  background: rgba(0, 255, 65, 0.1);
  border-color: rgba(0, 255, 65, 0.35);
  color: var(--color-primary, #0f0);
}
.acct-switcher-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 10px;
  -webkit-overflow-scrolling: touch;
}
.acct-switcher-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  background: var(--color-bg, #0a0a0a);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.acct-switcher-item:hover:not(:disabled) {
  border-color: rgba(0, 255, 65, 0.4);
  background: rgba(0, 255, 65, 0.05);
}
.acct-switcher-item:disabled {
  opacity: 0.55;
  cursor: wait;
}
.acct-switcher-item.is-active {
  border-color: var(--color-primary, #0f0);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
}
.acct-switcher-item.is-last:not(.is-active) {
  border-color: rgba(0, 212, 255, 0.45);
}
.acct-switcher-item-main {
  flex: 1;
  min-width: 0;
}
.acct-switcher-item-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.acct-switcher-item-name-row .acct-user {
  margin-left: 0;
  flex-shrink: 0;
}
.acct-switcher-item-name {
  display: block;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.acct-switcher-item-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.65rem;
  color: var(--color-text-dim);
  font-family: var(--font-mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-switcher-item-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: flex-end;
}
.acct-switcher-foot {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--color-border, #333);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acct-folder-new {
  display: flex;
  gap: 6px;
  align-items: center;
}
.acct-folder-new .input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  padding: 8px 10px;
}
.acct-folder {
  margin-bottom: 8px;
  border: 1px solid var(--color-border, #333);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg, #0a0a0a);
}
.acct-folder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 4px 6px 4px 4px;
  background: rgba(0, 255, 65, 0.04);
}
.acct-folder-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 8px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.acct-folder-toggle:hover {
  background: rgba(0, 255, 65, 0.06);
}
.acct-folder-caret {
  flex-shrink: 0;
  width: 1.1em;
  color: var(--color-primary, #0f0);
  font-size: 0.75rem;
}
.acct-folder.is-open .acct-folder-caret { transform: rotate(90deg); }
.acct-folder-title {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #0f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-folder-count {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--color-text-dim);
  font-family: var(--font-mono, monospace);
}
.acct-folder-menu {
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--color-border, #333);
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-dim);
  cursor: pointer;
  font: inherit;
}
.acct-folder-body {
  display: none;
  padding: 4px 6px 8px;
  border-top: 1px solid var(--color-border, #333);
}
.acct-folder.is-open .acct-folder-body { display: block; }
.acct-folder-body .acct-switcher-item { margin-bottom: 4px; }
.acct-folder-ungrouped {
  margin-top: 10px;
  padding-top: 6px;
}
.acct-folder-ungrouped > .acct-folder-label {
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--color-text-dim);
  padding: 4px 8px 6px;
  text-transform: uppercase;
}
.acct-move {
  flex-shrink: 0;
  min-width: 36px;
  min-height: 36px;
  border: 1px solid var(--color-border, #333);
  border-radius: 6px;
  background: transparent;
  color: var(--color-secondary, #6cf);
  cursor: pointer;
  font-size: 0.85rem;
}
.acct-move-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 8px 42px;
}
.acct-move-picker button {
  font: inherit;
  font-size: 0.65rem;
  padding: 6px 8px;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--color-border, #333);
  background: var(--color-bg, #0a0a0a);
  color: var(--color-text);
  cursor: pointer;
}
.acct-move-picker button.is-current {
  border-color: var(--color-primary, #0f0);
  color: var(--color-primary, #0f0);
}

/* Floating toast (clipboard, etc.) */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  z-index: 3000;
  max-width: min(90vw, 360px);
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(12, 18, 14, 0.94);
  border: 1px solid rgba(0, 255, 65, 0.45);
  color: var(--color-primary, #0f0);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 255, 65, 0.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.app-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-toast--hide {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

/* Right cluster: API chip + job pill (one grid cell so job stays aligned) */
.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
}

.job-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  margin-left: 0;
  min-width: 0;
  max-width: min(34vw, 9.5rem);
  overflow: hidden;
  flex-shrink: 0;
  line-height: 1.2;
}
.job-indicator #job-label,
.job-indicator .job-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}
.job-indicator .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-text-dim);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.job-indicator .dot.running { background: var(--color-primary); box-shadow: var(--glow-green); animation: pulse-glow 1.5s ease-in-out infinite; }
.job-indicator .dot.idle    { background: var(--color-text-dim); }
.job-indicator.running { color: var(--color-primary); border-color: rgba(0, 255, 65, 0.3); }

/* Phone: keep center account chip and right job pill from colliding */
@media (max-width: 480px) {
  .app-header-inner {
    gap: 4px;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }
  .header-account {
    max-width: 38vw;
  }
  .job-indicator {
    max-width: min(32vw, 7.5rem);
    padding: 3px 6px;
    font-size: 0.5625rem;
    letter-spacing: 0.02em;
  }
  .brand-text {
    max-width: 4.5rem;
  }
}

/* ── Slide-out burger drawer (left) ── */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
body.nav-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}
body.nav-open {
  overflow: hidden;
}

/* Burger drawer ONLY — never put class page-nav on in-page tab bars */
#page-nav.page-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 200;
  width: min(300px, 88vw);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 255, 65, 0.06);
  transform: translateX(-105%);
  transition: transform var(--transition-normal);
  overflow: hidden;
  pointer-events: none;
}
body.nav-open #page-nav.page-nav {
  transform: translateX(0);
  pointer-events: auto;
}
.page-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.page-nav-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  text-shadow: var(--glow-green);
}
.nav-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  line-height: 1;
}
.nav-close:hover {
  color: var(--color-primary);
  border-color: rgba(0, 255, 65, 0.4);
}
.page-nav-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.page-nav-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}
.page-nav-label {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  padding-left: 4px;
  line-height: 1;
}
.page-nav-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: stretch;
  width: 100%;
}
.page-nav a {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: all var(--transition-fast);
  height: auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.page-nav a:hover {
  color: var(--color-primary);
  border-color: rgba(0, 255, 65, 0.25);
  background: rgba(0, 255, 65, 0.06);
  text-decoration: none;
}
.page-nav a.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.1);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.2);
}
/* Last burger group — patched / leftover pages */
.page-nav-group--outdated {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.page-nav-group--outdated .page-nav-label {
  color: var(--color-text-dim);
  opacity: 0.75;
}
.page-nav-group--outdated a {
  color: var(--color-text-dim);
  font-weight: 500;
}



/* ═══════════════════════════════════════════════════════════════════════
   Header block (the big "// MASS BYPASS" style titles from the game)
   ═══════════════════════════════════════════════════════════════════════ */

.header { margin: var(--space-5) 0 var(--space-4); }

.header-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin-bottom: var(--space-1);
}
.header-line::before,
.header-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.header-line .prefix { color: var(--color-primary); }

.header-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  text-shadow: var(--glow-green);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.header-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

.section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-dim);
  margin: var(--space-5) 0 var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.section-title-link {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-left: auto;
}
.section-title-link:hover {
  color: var(--color-primary);
  text-shadow: var(--glow-green);
  text-decoration: none;
}
/* When link is last child, section-title::after still fills middle via order */
.section-title .section-title-link {
  order: 2;
}
.section-title::after {
  order: 1;
}

.info-grid {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cards — like the in-game info rows
   ═══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast);
}
.card:hover { border-color: var(--color-surface-hover); }
.card h2 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.card h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.card p { color: var(--color-text-muted); font-size: 0.8125rem; }

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.8125rem;
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--color-text-muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; }
.info-value { color: var(--color-text); font-family: var(--font-mono); font-weight: 600; }
.info-value--highlight { color: var(--color-primary); text-shadow: 0 0 6px rgba(0, 255, 65, 0.4); }
.info-value--ip       { color: var(--color-secondary); }
.info-value--crypto   { color: var(--color-warning); }
.info-value--score    { color: var(--color-primary); font-weight: 700; }
.info-value--warning  { color: var(--color-warning); }
.info-value--reboot   { color: var(--color-secondary); }

.kv {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.8125rem;
  gap: var(--space-3);
}
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--color-text-muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.05em; }
.kv .v { color: var(--color-text); font-family: var(--font-mono); text-align: right; word-break: break-all; }

/* ═══════════════════════════════════════════════════════════════════════
   Action cards — clickable menu items (like in-game menu buttons)
   ═══════════════════════════════════════════════════════════════════════ */

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
@media (max-width: 380px) {
  .action-grid { grid-template-columns: 1fr; }
}

.action-card {
  display: block;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.action-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.action-card:hover {
  border-color: rgba(0, 255, 65, 0.4);
  background: var(--color-surface-hover);
  text-decoration: none;
}
.action-card:hover::before { opacity: 1; }
.action-card .action-icon {
  font-size: 22px;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  display: block;
  text-shadow: var(--glow-green);
}
.action-card .action-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text);
}
.action-card .action-desc {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.action-card.cyan .action-icon  { color: var(--color-secondary); text-shadow: var(--glow-cyan); }
.action-card.amber .action-icon { color: var(--color-warning); text-shadow: var(--glow-amber); }
.action-card.red .action-icon   { color: var(--color-danger);  text-shadow: var(--glow-red); }
.action-card.cyan:hover  { border-color: rgba(0, 212, 255, 0.4); }
.action-card.amber:hover { border-color: rgba(255, 184, 0, 0.4); }
.action-card.red:hover   { border-color: rgba(255, 0, 64, 0.4); }
.action-card.cyan::before  { background: var(--color-secondary); }
.action-card.amber::before { background: var(--color-warning); }
.action-card.red::before   { background: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   Forms — input, select, button (game-button look)
   ═══════════════════════════════════════════════════════════════════════ */

.form-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > label, .field > span {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.field input, .field select, .field textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  transition: all var(--transition-fast);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
  background: var(--color-bg-elevated);
}
.field input::placeholder { color: var(--color-text-dim); }
.form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.form-row > * { flex: 1; min-width: 0; }

.form-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}

input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px; height: 16px;
  cursor: pointer;
}

/* ── Buttons (game-button: sharp, monospace, glowing) ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  user-select: none;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: rgba(0, 255, 65, 0.1);
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-shadow: 0 0 4px rgba(0, 255, 65, 0.4);
}
.btn-primary:hover:not(:disabled) {
  background: rgba(0, 255, 65, 0.2);
  box-shadow: 0 0 12px rgba(0, 255, 65, 0.4);
}

.btn-secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
}

.btn-danger {
  background: rgba(255, 0, 64, 0.1);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: rgba(255, 0, 64, 0.2);
  box-shadow: 0 0 12px rgba(255, 0, 64, 0.4);
}

.btn-amber {
  background: rgba(255, 184, 0, 0.1);
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.btn-amber:hover:not(:disabled) {
  background: rgba(255, 184, 0, 0.2);
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.4);
}

.btn-small { padding: 6px 12px; font-size: 0.6875rem; }
.btn-block { width: 100%; }

/* ── Scheduled Tasks ── */
.sched-layout { display: flex; flex-direction: column; gap: var(--space-3); }
.sched-clock {
  font-size: 0.75rem;
  color: var(--color-secondary);
  letter-spacing: 0.04em;
}
.sched-time12 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.sched-time12 input[type="date"] {
  flex: 1 1 9.5rem;
  min-width: 9rem;
}
.sched-time12 select {
  min-height: 40px;
  min-width: 3.4rem;
}
.sched-time12-colon {
  color: var(--color-text-muted);
  font-weight: 700;
}
.sched-params { display: none; }
.sched-params.is-on {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.sched-list { display: flex; flex-direction: column; gap: 16px; }
.sched-acct {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sched-acct-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--color-border);
}
.sched-acct-name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}
.sched-acct-count {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.sched-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.sched-card.is-off { opacity: 0.55; }
.sched-card-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}
.sched-card-title {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sched-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: 6px;
}
.sched-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sched-badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: 2px;
}
.sched-badge--ok { color: var(--color-primary); border-color: var(--color-primary); }
.sched-badge--fail { color: var(--color-danger); border-color: var(--color-danger); }
.sched-badge--off { color: var(--color-text-dim); }
.sched-empty {
  text-align: center;
  color: var(--color-text-dim);
  padding: 20px 8px;
}
.sched-repeat-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.sched-repeat-box input { margin-top: 3px; flex-shrink: 0; }
.sched-repeat-box strong {
  display: block;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.sched-repeat-box span {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px;
}
.sched-edit-banner {
  font-size: 0.75rem;
  color: var(--color-warning);
  margin: 0 0 8px;
}
.sched-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sched-filters .btn.is-on {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.sched-badge--daily { color: var(--color-secondary); border-color: var(--color-secondary); }

/* Home profile — flagged account (user.status === 4) */
.profile-flagged-banner {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-sm);
  background: rgba(255, 0, 64, 0.1);
  box-shadow: 0 0 12px rgba(255, 0, 64, 0.15);
}
.profile-flagged-title {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-danger);
  margin-bottom: 4px;
}
.profile-flagged-detail {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.profile-flagged-detail strong { color: var(--color-danger); }
.profile-card--flagged {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 1px rgba(255, 0, 64, 0.25);
}
.info-value--flagged {
  color: var(--color-danger) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
/* Header account chip when flagged */
.header-account.header-account--flagged {
  color: var(--color-danger);
}
.header-account.header-account--flagged .header-account-name::after {
  content: ' FLAGGED';
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-left: 4px;
  opacity: 0.95;
}

/* Targets sort toolbar */
.sort-toolbar {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: 0;
  margin-bottom: var(--space-3);
}
.sort-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(0, 255, 65, 0.08);
}

/* Page sub-navs (Software, Victims, …) — horizontal L→R pills.
   NEVER use bare class "page-nav" alone — that is the burger drawer. */
.page-nav.software-subnav,
.software-subnav,
.victims-subnav {
  position: static !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  max-width: none;
  width: 100%;
  height: auto !important;
  padding: 0;
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  overflow-y: visible;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  /* Drawer .page-nav is pointer-events:none when closed — must not inherit */
  pointer-events: auto !important;
}
.software-subnav .sw-tab,
.victims-subnav .vic-tab {
  flex-shrink: 0;
  pointer-events: auto;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  height: 28px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.software-subnav .sw-tab:hover,
.victims-subnav .vic-tab:hover {
  color: var(--color-primary);
  border-color: rgba(0, 255, 65, 0.3);
}
.software-subnav .sw-tab.active,
.victims-subnav .vic-tab.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}
.sw-pane[hidden] { display: none !important; }
.btn-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.btn-row > .btn { flex: 1; min-width: 0; }

/* Software SEARCH tab */
.sw-search-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.sw-search-table {
  max-height: 65vh;
  overflow: auto;
}
.sw-search-table .data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg-elevated);
}
.sw-copy {
  cursor: pointer;
  border-bottom: 1px dotted var(--color-border);
}
.sw-copy:hover { color: var(--color-primary); }
.sw-copy--flash {
  color: var(--color-primary);
  text-shadow: 0 0 6px rgba(0, 255, 65, 0.45);
}
.text-primary { color: var(--color-primary); }
#tab-mine .mine-upgrade-btn { white-space: nowrap; min-width: 10rem; }
#tab-mine .mine-upgrade-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Intel action chips (single + mass) */
.intel-action-chips .btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
  padding-top: 8px;
  padding-bottom: 8px;
}
.intel-action-chips .btn-chip-sub {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}
#btn-intel-mass {
  border-color: rgba(0, 255, 65, 0.35);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.12);
}

/* ═══════════════════════════════════════════════════════════════════════
   Log / Terminal feed
   ═══════════════════════════════════════════════════════════════════════ */

.log-feed {
  max-height: 360px;
  overflow-y: auto;
  background: #050505;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.log-feed-tall { max-height: 600px; }
.log-feed::-webkit-scrollbar { width: 6px; }
.log-feed::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }

/* Stacked log rows: meta (time/type/account) on top, message full-width below.
   Phone: message is always readable without rotating / horizontal scroll. */
.log-line {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 4px 0;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.log-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.2;
}
.log-line .ts,
.log-line .log-ts {
  color: var(--color-text-dim);
  flex-shrink: 0;
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  opacity: 0.85;
}
.log-line .lvl,
.log-line .log-level {
  flex-shrink: 0;
  font-weight: 700;
  min-width: 0;
  text-align: left;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
}
.log-line .txt,
.log-line .log-text {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--color-text);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0;
}
.log-info .lvl, .log-info .log-level { color: var(--color-secondary); }
.log-ok   .lvl, .log-ok   .log-level { color: var(--color-primary); text-shadow: 0 0 4px rgba(0, 255, 65, 0.4); }
.log-fail .lvl, .log-fail .log-level { color: var(--color-danger);  text-shadow: 0 0 4px rgba(255, 0, 64, 0.4); }
.log-warn .lvl, .log-warn .log-level { color: var(--color-warning); }
.log-raw  .lvl, .log-raw  .log-level { color: var(--color-text-dim); }

.log-ask {
  background: rgba(255, 184, 0, 0.08);
  border-left: 2px solid var(--color-warning);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-1) 0;
  animation: pulse-glow 2s ease-in-out infinite;
}
.log-ask .lvl { color: var(--color-warning); }
.log-ask .txt { color: var(--color-warning); }

.log-empty {
  color: var(--color-text-dim);
  font-style: italic;
  padding: var(--space-3);
  text-align: center;
  font-size: 0.75rem;
}

/* ── Input prompt that pops up when a job is asking for input ── */
.input-pending {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(255, 184, 0, 0.08);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  animation: pulse-glow 2s ease-in-out infinite;
}
.input-pending p {
  color: var(--color-warning);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.input-pending .prompt-text {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  white-space: pre-wrap;
}
.input-row { display: flex; gap: var(--space-2); }
.input-row input {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.input-row input:focus { outline: none; border-color: var(--color-warning); }

/* ═══════════════════════════════════════════════════════════════════════
   Banners (in-game: success-banner, error-banner)
   ═══════════════════════════════════════════════════════════════════════ */

.success-banner, .error-banner {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.success-banner {
  background: rgba(0, 255, 65, 0.08);
  border: 1px solid rgba(0, 255, 65, 0.4);
  color: var(--color-primary);
}
.error-banner {
  background: rgba(255, 0, 64, 0.08);
  border: 1px solid rgba(255, 0, 64, 0.4);
  color: var(--color-danger);
}
.success-prefix, .error-prefix {
  font-weight: 700;
  flex-shrink: 0;
}
.success-msg, .error-msg { flex: 1; }

.empty-state {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.empty-icon {
  font-size: 36px;
  color: var(--color-text-dim);
  margin-bottom: var(--space-3);
}
.empty-text {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.empty-hint {
  color: var(--color-text-dim);
  font-size: 0.6875rem;
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   Table — like the in-game process list
   ═══════════════════════════════════════════════════════════════════════ */

.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.data-table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-surface); }

/* ── Status badges (in-game: pending, completed, failed, invalidated, emp-killed) ── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.badge--pending      { background: rgba(0, 212, 255, 0.1);  color: var(--color-secondary); border-color: rgba(0, 212, 255, 0.4); }
.badge--completed    { background: rgba(0, 255, 65, 0.1);   color: var(--color-primary);   border-color: rgba(0, 255, 65, 0.4); }
.badge--failed       { background: rgba(255, 0, 64, 0.1);   color: var(--color-danger);    border-color: rgba(255, 0, 64, 0.4); }
/* FAILED badge-as-button (Processes page retry) */
button.badge.badge--failed {
  cursor: pointer;
  font: inherit;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
}
button.badge.badge--failed:hover:not(:disabled) {
  background: rgba(255, 0, 64, 0.22);
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px rgba(255, 0, 64, 0.35);
}
button.badge.badge--failed:disabled {
  opacity: 0.65;
  cursor: wait;
}
.badge--invalidated  { background: rgba(255, 102, 204, 0.1); color: #ff66cc;               border-color: rgba(255, 102, 204, 0.4); }
.badge--emp-killed   { background: rgba(255, 184, 0, 0.1);  color: var(--color-warning);   border-color: rgba(255, 184, 0, 0.4); }
.badge--waiting      { background: var(--color-bg-elevated);  color: var(--color-text-muted); border-color: var(--color-border); }
.badge--run          { background: rgba(0, 212, 255, 0.1);  color: var(--color-secondary); border-color: rgba(0, 212, 255, 0.4); animation: pulse-glow 2s ease-in-out infinite; }
.badge--ok           { background: rgba(0, 255, 65, 0.1);   color: var(--color-primary);   border-color: rgba(0, 255, 65, 0.4); }

.toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.toolbar .spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Account list (in-game list-item style)
   ═══════════════════════════════════════════════════════════════════════ */

.account-list { display: flex; flex-direction: column; gap: var(--space-2); }
.account-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  transition: all var(--transition-fast);
}
.account-item:hover { border-color: rgba(0, 255, 65, 0.3); }
.account-item.active {
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.04);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.2);
}
.account-item.last-used {
  border-color: rgba(0, 212, 255, 0.55);
  background: rgba(0, 212, 255, 0.05);
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.15);
}
.acct-name { flex: 1; font-family: var(--font-mono); min-width: 0; }
.acct-name strong { color: var(--color-primary); text-shadow: 0 0 4px rgba(0, 255, 65, 0.3); }
.acct-name .muted { color: var(--color-text-dim); margin-left: var(--space-2); font-size: 0.6875rem; }
.acct-user {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--color-secondary, #00d4ff);
  border: 1px solid rgba(0, 212, 255, 0.45);
  border-radius: 999px;
  letter-spacing: 0.02em;
  vertical-align: middle;
  text-transform: none;
  font-weight: 600;
}
.acct-ip {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.acct-ip::before { content: none; }
.acct-ip-copy {
  cursor: pointer;
  border-bottom: 1px dashed rgba(0, 212, 255, 0.45);
  color: var(--color-secondary, #00d4ff);
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.acct-ip-copy:hover {
  color: var(--color-primary, #0f0);
  border-bottom-color: var(--color-primary, #0f0);
}
.acct-ip-copy--flash {
  background: rgba(0, 255, 65, 0.18);
  border-radius: 3px;
  color: var(--color-primary, #0f0);
}
#active-last-ip.acct-ip-copy {
  margin-left: 0;
  font-size: inherit;
}
.acct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.marker { color: var(--color-primary); font-weight: 700; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 6px; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); }
.marker--last {
  color: var(--color-secondary, #00d4ff);
  border-color: var(--color-secondary, #00d4ff);
}

.db-list { list-style: none; padding: 0; }
.db-list li { padding: var(--space-1) 0; color: var(--color-text-muted); font-size: 0.75rem; }
.db-list li code { font-size: 0.75rem; }

.result-msg {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  min-height: 1.2em;
}
.result-msg.ok  { color: var(--color-primary); }
.result-msg.err { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════════════
   Loading states (lifted from the game)
   ═══════════════════════════════════════════════════════════════════════ */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
}
.loading-spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin-loader 0.8s linear infinite;
}
.loading-text {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.loading-dots { animation: blink-cursor 1.2s step-end infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   Modal — like the in-game confirm modal
   ═══════════════════════════════════════════════════════════════════════ */

/* Modal z-index hierarchy:
     - normal modal:        1000
     - bot-splash:          2000  (full-screen init overlay)
     - appcheck modal:      3000  (MUST be above splash so user can submit token)
     - scan-line overlay:   2999  (below appcheck so it doesn't cover the form) */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-4);
  animation: fade-in 0.15s ease;
}
.modal.hidden { display: none; }

/* AppCheck modal must appear ABOVE the bot-splash overlay (2000) */
#appcheck-modal {
  z-index: 3000;
}
.scan-line-overlay { z-index: 40; }
.modal-inner {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-width: 420px;
  width: 100%;
  box-shadow: 0 0 32px rgba(255, 184, 0, 0.3);
  animation: fade-card-in 0.2s ease;
}
.modal-inner h2 {
  color: var(--color-warning);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.modal-sub {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-bottom: var(--space-3);
}
.server-msg {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  white-space: pre-wrap;
  max-height: 200px;
  overflow-y: auto;
}
.modal-inner input {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  margin-bottom: var(--space-3);
}
.modal-inner input:focus { outline: none; border-color: var(--color-warning); }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */

/* In-flow footer at the bottom of the shell (always end of page / viewport when short).
   Was position:fixed — broke when a parent gained transform/filter and sat mid-scroll. */
.app-footer {
  flex-shrink: 0;
  margin-top: auto;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  color: var(--color-text-dim);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--color-bg, #0a0a0a);
  border-top: 1px solid var(--color-border, #222);
  pointer-events: auto;
  z-index: 10;
}
.app-footer > * { pointer-events: auto; }
.app-footer .sep { margin: 0 6px; opacity: 0.4; }
.app-footer a {
  color: inherit;
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--color-primary, #0f0);
}
.app-footer .footer-load {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.app-footer .footer-load[data-level="ok"] { color: var(--color-primary, #0f0); opacity: 0.9; }
.app-footer .footer-load[data-level="mid"] { color: #c8c030; opacity: 1; }
.app-footer .footer-load[data-level="high"] { color: #f80; opacity: 1; }
.app-footer .footer-load[data-level="critical"] { color: #f04; opacity: 1; animation: pulse-glow 1.2s ease-in-out infinite; }
.app-footer .footer-load[data-level="unknown"] { opacity: 0.45; }

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Animations (lifted from the game's stylesheet)
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
@keyframes pulse-border {
  0%, 100% { border-color: var(--color-border); }
  50% { border-color: rgba(0, 255, 65, 0.15); }
}
@keyframes pulse-danger {
  0%, 100% { border-color: rgba(255, 0, 64, 0.3); }
  50% { border-color: rgba(255, 0, 64, 0.6); }
}
@keyframes spin-loader {
  to { transform: rotate(360deg); }
}
@keyframes blink-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fade-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
@keyframes typing {
  0% { width: 0; }
  to { width: 100%; }
}
@keyframes scan-line {
  0% { transform: translateY(-100%); }
  to { transform: translateY(100vh); }
}

.animate-fade-in   { animation: fade-in 0.3s ease both; }
.animate-fade-in-up { animation: fade-slide-in 0.3s ease both; }
.animate-glitch    { animation: glitch 0.3s ease both; }
.animate-pulse     { animation: pulse-glow 2s ease-in-out infinite; }
.animate-blink     { animation: blink-cursor 1.2s step-end infinite; }

/* ═══════════════════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .card { padding: var(--space-3); }
  .header-title { font-size: 1.25rem; }
  h1 { font-size: 1.5rem; }
  .action-card { padding: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Anchor styling — make the job indicator look the same as the old div
   ═══════════════════════════════════════════════════════════════════════ */

a.job-indicator,
a.job-indicator:link,
a.job-indicator:visited,
a.job-indicator:hover,
a.job-indicator:active {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
a.job-indicator:hover {
  background: var(--color-surface-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
   Activity Page — status banner + control buttons + event log
   ═══════════════════════════════════════════════════════════════════════ */

.activity-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

/* ── Status banner (activity page — primary status + ETA) ────── */
.status-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  transition: border-color var(--transition-normal);
}
.status-banner-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}
.status-banner .status-icon {
  font-size: 1.75rem;
  line-height: 1;
  width: 2rem;
  text-align: center;
  flex-shrink: 0;
}
.status-banner .status-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.status-label-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.status-banner .status-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.status-type-tag {
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  background: rgba(0, 255, 65, 0.08);
}
.status-started {
  font-size: 0.625rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-dim);
  letter-spacing: 0.02em;
}
.status-banner .status-job {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-eta-block {
  flex-shrink: 0;
  text-align: right;
  min-width: 4.5rem;
}
.status-eta-label {
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 2px;
}
.status-eta-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.status-banner.status-idle .status-eta-value { color: var(--color-text-dim); }
.status-banner.status-queued {
  border-color: rgba(100, 180, 255, 0.35);
  opacity: 0.95;
}
.status-banner.status-queued .status-label { color: var(--color-secondary, #6cf); }
.status-banner.status-queued .status-eta-value { color: var(--color-secondary, #6cf); }
.status-banner.status-error .status-eta-value,
.status-banner.status-stopped .status-eta-value { color: var(--color-danger); }
.status-banner.status-paused .status-eta-value,
.status-banner.status-pause_requested .status-eta-value { color: var(--color-warning); }

/* Progress bar under status banner */
.status-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.status-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.status-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), #00cc33);
  box-shadow: 0 0 8px var(--color-primary);
  transition: width 0.35s ease;
}
.status-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

/* State colors */
.status-banner.status-idle         { border-color: var(--color-border); }
.status-banner.status-idle         .status-icon { color: var(--color-text-dim); }
.status-banner.status-running      { border-color: var(--color-primary); animation: pulse-border 2s ease-in-out infinite; }
.status-banner.status-running      .status-icon { color: var(--color-primary); animation: pulse-glow 1.5s ease-in-out infinite; }
.status-banner.status-running      .status-label { color: var(--color-primary); }
.status-banner.status-paused       { border-color: var(--color-warning); }
.status-banner.status-paused       .status-icon { color: var(--color-warning); }
.status-banner.status-paused       .status-label { color: var(--color-warning); }
.status-banner.status-pause_requested { border-color: var(--color-warning); }
.status-banner.status-pause_requested .status-icon { color: var(--color-warning); animation: pulse-glow 0.8s ease-in-out infinite; }
.status-banner.status-pause_requested .status-label { color: var(--color-warning); }
.status-banner.status-stop_requested { border-color: var(--color-danger); }
.status-banner.status-stop_requested .status-icon { color: var(--color-danger); animation: pulse-glow 0.5s ease-in-out infinite; }
.status-banner.status-stop_requested .status-label { color: var(--color-danger); }
.status-banner.status-stopped      { border-color: var(--color-danger); }
.status-banner.status-stopped      .status-icon { color: var(--color-danger); }
.status-banner.status-stopped      .status-label { color: var(--color-danger); }
.status-banner.status-done         { border-color: var(--color-primary); }
.status-banner.status-done         .status-icon { color: var(--color-primary); }
.status-banner.status-done         .status-label { color: var(--color-primary); }
.status-banner.status-error        { border-color: var(--color-danger); }
.status-banner.status-error        .status-icon { color: var(--color-danger); }
.status-banner.status-error        .status-label { color: var(--color-danger); }

/* ── Control buttons ─────────────────────────────────────────── */
.control-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}
.ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 70px;
}
.ctrl-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  transform: translateY(-1px);
}
.ctrl-btn:active:not(:disabled) {
  transform: translateY(0);
}
.ctrl-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.ctrl-icon {
  font-size: 1.5rem;
  line-height: 1;
}
.ctrl-pause:not(:disabled)   { border-color: var(--color-warning); color: var(--color-warning); }
.ctrl-pause:not(:disabled):hover   { background: rgba(255, 184, 0, 0.1); box-shadow: var(--glow-amber); }
.ctrl-resume:not(:disabled)  { border-color: var(--color-primary); color: var(--color-primary); }
.ctrl-resume:not(:disabled):hover  { background: rgba(0, 255, 65, 0.1);  box-shadow: var(--glow-green); }
.ctrl-stop:not(:disabled)    { border-color: var(--color-danger);  color: var(--color-danger); }
.ctrl-stop:not(:disabled):hover    { background: rgba(255, 0, 64, 0.1);  box-shadow: var(--glow-red); }
.ctrl-stop:not(:disabled):active   { animation: pulse-danger 0.3s ease; }

.control-hint {
  font-size: 0.6875rem;
  color: var(--color-text-dim);
  text-align: center;
  margin: calc(var(--space-2) * -1) 0 0;
  line-height: 1.4;
}

/* ── Event log ───────────────────────────────────────────────── */
.log-card { padding: 0; overflow: hidden; }
.log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  flex-wrap: wrap;
  gap: var(--space-2);
}
.log-header .card-title {
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.live-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  background: var(--color-bg);
  vertical-align: middle;
}
.live-badge[data-state="live"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.08);
  animation: pulse-glow 2s ease-in-out infinite;
}
.live-badge[data-state="polling"] {
  color: var(--color-secondary, #00d4ff);
  border-color: var(--color-secondary, #00d4ff);
}
.live-badge[data-state="reconnecting"],
.live-badge[data-state="connecting"] {
  color: var(--color-warning);
  border-color: var(--color-warning);
}
.log-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.auto-scroll-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
.auto-scroll-toggle input { accent-color: var(--color-primary); }

.event-log {
  height: 55vh;
  min-height: 320px;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  padding: var(--space-2);
  -webkit-overflow-scrolling: touch;
}

/* Clean event log = ops progress + highlights (message-first) */
.event-log--clean {
  height: 42vh;
  min-height: 240px;
  max-height: 520px;
  font-size: 0.75rem;
  line-height: 1.4;
}
.event-log--clean .log-line {
  padding: 6px 8px;
  border-left-width: 3px;
  gap: 3px;
}
.event-log--clean .log-line.log-raw { display: none; }
.event-log--clean .log-text {
  font-size: 0.8125rem;
  line-height: 1.45;
}
.event-log--clean .log-job {
  max-width: 6.5rem;
  font-size: 0.55rem;
}
.event-log--clean .log-job-name {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.55rem;
  color: var(--color-text-dim);
  opacity: 0.85;
}

/* Full server dump at bottom of activity */
.event-log--server {
  height: 42vh;
  min-height: 220px;
  max-height: 560px;
  font-size: 0.65rem;
  line-height: 1.35;
  background: #050505;
  border-top: 1px solid var(--color-border);
}
.event-log--server .log-line {
  padding: 3px 6px;
  gap: 1px;
  opacity: 0.92;
}
.event-log--server .log-text {
  font-size: 0.68rem;
  line-height: 1.35;
}
.event-log--server .log-ts {
  font-size: 0.55rem;
}
.event-log--server .log-level {
  font-size: 0.55rem;
}
.server-log-card {
  margin-top: var(--space-2);
  border-color: rgba(255, 255, 255, 0.08);
}
.server-log-file-mark {
  color: var(--color-text-dim) !important;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
  padding: 6px 4px !important;
}
.log-card-hint {
  margin: 0;
  padding: 0 var(--space-3) 6px;
  font-size: 0.625rem;
  color: var(--color-text-dim);
  letter-spacing: 0.02em;
}
.log-card-hint code {
  font-size: 0.6rem;
  color: var(--color-text-muted);
}

.log-line {
  border-left: 2px solid transparent;
  padding: 4px 6px;
}
.log-line:hover { background: var(--color-bg-elevated); }
.log-job {
  flex-shrink: 1;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-secondary);
  max-width: 7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.9;
  min-width: 0;
}
.log-job::before { content: ''; }
.log-job::after  { content: ''; }
.log-job-name {
  flex-shrink: 1;
  min-width: 0;
}

/* Phone / narrow: tiny meta chips, big message — no rotation needed */
@media (max-width: 720px) {
  .activity-page {
    padding-left: 0;
    padding-right: 0;
  }
  .activity-page .card.log-card,
  .activity-page .error-log-card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
  .event-log {
    height: min(72vh, 560px);
    min-height: 260px;
    font-size: 0.75rem;
    padding: var(--space-2) var(--space-1);
  }
  .event-log .log-line {
    padding: 8px 6px;
    gap: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .event-log .log-meta-row {
    gap: 4px 6px;
  }
  /* HH:MM only on phone (full time still in title / data-full) */
  .event-log .log-line .log-ts {
    font-size: 0.5625rem;
  }
  .event-log .log-line .log-ts[data-short]::before {
    content: none;
  }
  .event-log .log-line .log-ts[data-short] {
    font-size: 0.5625rem;
  }
  /* Replace displayed time with short form via attr when present */
  .event-log .log-line .log-ts[data-short] {
    font-size: 0.5625rem;
  }
  .event-log .log-line .log-level {
    font-size: 0.5625rem;
    padding: 0 3px;
  }
  .event-log .log-line .log-job {
    max-width: 5.5rem;
    font-size: 0.55rem;
  }
  .event-log .log-line .log-job-name {
    max-width: 40%;
    font-size: 0.5rem;
  }
  .event-log .log-line .log-text {
    width: 100%;
    font-size: 0.875rem; /* message is the hero on phone */
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .event-log--clean {
    height: min(58vh, 480px);
    min-height: 220px;
  }
  .activity-page .log-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .activity-page .log-meta {
    flex-wrap: wrap;
  }
  .status-banner .status-job {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .status-banner-top {
    flex-wrap: wrap;
  }
  .status-eta-block {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
  }
  .status-eta-label { margin-bottom: 0; }
}
.log-info  { border-left-color: var(--color-text-dim); }
.log-info  .log-level { color: var(--color-text-muted); }
.log-ok    { border-left-color: var(--color-primary); }
.log-ok    .log-level { color: var(--color-primary); }
.log-ok    .log-text  { color: var(--color-primary); }
.log-warn  { border-left-color: var(--color-warning); }
.log-warn  .log-level { color: var(--color-warning); }
.log-warn  .log-text  { color: var(--color-warning); }
.log-fail  { border-left-color: var(--color-danger); }
.log-fail  .log-level { color: var(--color-danger); }
.log-fail  .log-text  { color: var(--color-danger); }
.log-raw   { border-left-color: var(--color-border); }
.log-raw   .log-level { color: var(--color-text-dim); }
.log-raw   .log-text  { color: var(--color-text-muted); }
.log-ask   { border-left-color: var(--color-secondary); }
.log-ask   .log-level { color: var(--color-secondary); }
.log-ask   .log-text  { color: var(--color-secondary); }
.log-appcheck { border-left-color: var(--color-warning); background: rgba(255, 184, 0, 0.05); }
.log-appcheck .log-level { color: var(--color-warning); }
.log-appcheck .log-text  { color: var(--color-warning); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   Bot init splash — full-screen overlay shown while bot is initializing.
   Prevents user from seeing broken/incomplete data before the bot is ready.
   ═══════════════════════════════════════════════════════════════════════ */

.bot-splash {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: var(--space-5);
  animation: fade-in 0.2s ease;
  transition: opacity 0.2s ease;
}
.bot-splash.hidden {
  display: none !important;
  pointer-events: none !important;
}
/* When the AppCheck modal is active, dim the splash so the user
   can see they're in a layered state (splash + modal on top). */
body.appcheck-active .bot-splash:not(.hidden) {
  opacity: 0.3;
}
.bot-splash-inner {
  text-align: center;
  max-width: 360px;
}
.bot-splash-logo {
  font-size: 4rem;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  animation: pulse-glow 1.5s ease-in-out infinite;
  text-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
}
img.bot-splash-logo.logo-img {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--space-4);
  border-radius: 18px;
  object-fit: contain;
  font-size: 0;
  text-shadow: none;
  filter: drop-shadow(0 0 18px rgba(0, 255, 65, 0.55));
}
.bot-splash-inner h2 {
  color: var(--color-primary);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}
.bot-splash-inner p {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  margin-bottom: var(--space-4);
}
.bot-splash-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin-loader 0.8s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════
   MONEY DUPE CARD — burst-style batch wallet check
   ═══════════════════════════════════════════════════════════════════ */
.money-dupe-card {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  position: relative;
  /* visible so long <select> option menus / wide fields aren't clipped */
  overflow: visible;
}
.money-dupe-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 0% 0%,   rgba(255, 184, 0, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 0, 64, 0.05), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
.money-dupe-card > * { position: relative; z-index: 1; }

.money-dupe-controls {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  align-items: end;
}
.money-dupe-controls--4 {
  grid-template-columns: 1.4fr 0.7fr 0.7fr auto;
}
/* Scale layout: account full width, then numeric row, then sig + options + fire */
.money-dupe-controls--scale {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}
.money-dupe-controls--scale .md-field--account,
.money-dupe-controls--scale .md-field--sig,
.money-dupe-controls--scale .md-scale-footer {
  grid-column: 1 / -1;
}
@media (max-width: 720px) {
  .money-dupe-controls--scale {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 540px) {
  .money-dupe-controls { grid-template-columns: 1fr 1fr; }
  .md-field.md-action { grid-column: 1 / -1; }
  .money-dupe-controls--4 { grid-template-columns: 1fr 1fr; }
}

/* Scale footer: options + fire — never share a cramped grid cell */
.md-scale-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-1);
  width: 100%;
}
.md-opts {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: rgba(0, 0, 0, 0.25);
  min-width: 0;
}
.md-opts-title {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  line-height: 1.2;
}
.md-opts-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.md-opt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  cursor: pointer;
  /* reset .md-field label styles if nested */
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  line-height: 1.35 !important;
  color: var(--color-text, #e8e8e8) !important;
  min-height: 28px;
}
.md-opt input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-warning);
  cursor: pointer;
}
.md-opt-text {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: anywhere;
}
.md-scale-footer .md-action {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  align-self: stretch;
}
/* legacy checkbox class (classic card if any) */
.md-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-text, #ddd);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  line-height: 1.35;
  white-space: normal;
}
.md-check input {
  accent-color: var(--color-warning);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.money-dupe-card--scale::before {
  background:
    radial-gradient(circle at 0% 0%,   rgba(0, 255, 180, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 184, 0, 0.06), transparent 50%);
}
.md-field select {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.875rem;
  padding: 10px 12px;
  border-radius: 2px;
  outline: none;
  width: 100%;
  min-height: 44px;
  min-width: 0;
  /* allow long option text to show in the closed control */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.md-field--sig select {
  white-space: normal;
  height: auto;
  min-height: 44px;
  line-height: 1.35;
  padding-top: 10px;
  padding-bottom: 10px;
}
.md-field select:focus {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.md-field select option {
  white-space: normal;
  padding: 8px;
  background: var(--color-bg, #111);
  color: var(--color-text, #eee);
}
.md-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
/* Only title labels — never checkbox option labels */
.md-field > label:not(.md-opt):not(.md-check),
.md-field > .md-field-label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  white-space: nowrap;
  overflow: visible;
}
.md-field input {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 2px;
  outline: none;
  -moz-appearance: textfield;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
}
.md-field input::-webkit-outer-spin-button,
.md-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.md-field input:focus { border-color: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning); }
.md-hint {
  font-size: 0.72rem;
  color: var(--color-text-dim);
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  max-width: 100%;
}
.md-hint--total {
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.md-action {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.btn-money-dupe {
  width: 100%;
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--color-warning) !important;
  color: #1a0a00 !important;
  border: 1px solid var(--color-warning) !important;
  text-shadow: none !important;
  transition: all 0.15s ease;
  white-space: normal;
  line-height: 1.2;
  padding: 10px 14px;
}
.btn-money-dupe:hover:not(:disabled) {
  background: #ffc833 !important;
  box-shadow: 0 0 12px rgba(255, 184, 0, 0.5);
  transform: translateY(-1px);
}
.btn-money-dupe:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.md-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-text-dim);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  border-radius: 2px;
  margin-bottom: var(--space-3);
}
.md-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-dim);
  flex-shrink: 0;
}
.md-status--idle   { border-left-color: var(--color-text-dim); }
.md-status--idle   .md-dot { background: var(--color-text-dim); }
.md-status--running {
  border-left-color: var(--color-warning);
  background: rgba(255, 184, 0, 0.06);
  color: var(--color-warning);
}
.md-status--running .md-dot {
  background: var(--color-warning);
  box-shadow: 0 0 8px var(--color-warning);
  animation: md-pulse 0.8s ease-in-out infinite;
}
.md-status--done {
  border-left-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.05);
  color: var(--color-primary);
}
.md-status--done   .md-dot { background: var(--color-primary); }
.md-status--error {
  border-left-color: var(--color-danger);
  background: rgba(255, 0, 64, 0.06);
  color: var(--color-danger);
}
.md-status--error  .md-dot { background: var(--color-danger); }
@keyframes md-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

.md-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.md-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-bg-card, rgba(20, 22, 26, 0.6));
  font-size: 0.8125rem;
}
.md-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
}
.md-value {
  color: var(--color-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.md-delta-row { grid-column: 1 / -1; }
.md-delta {
  font-size: 1.125rem !important;
  letter-spacing: 0.02em;
}
.md-delta--pos  { color: var(--color-primary); text-shadow: 0 0 8px rgba(0, 255, 65, 0.4); }
.md-delta--neg  { color: var(--color-danger);  text-shadow: 0 0 8px rgba(255, 0, 64, 0.4); }
.md-delta--zero { color: var(--color-text-muted); }

.md-packets {
  margin-top: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: var(--space-3);
  background: rgba(0, 0, 0, 0.25);
}
.md-packets-header {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.md-packets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 4px;
}
.md-pkt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--color-text-dim);
  border-radius: 1px;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.md-pkt-i   { color: var(--color-text-muted); }
.md-pkt-ts  { color: var(--color-text); }
.md-pkt-st  { font-weight: 700; }
.md-pkt--ok   { border-left-color: var(--color-primary); }
.md-pkt--ok   .md-pkt-st { color: var(--color-primary); }
.md-pkt--auth { border-left-color: var(--color-secondary); }
.md-pkt--auth .md-pkt-st { color: var(--color-secondary); }
.md-pkt--fail { border-left-color: var(--color-danger); }
.md-pkt--fail .md-pkt-st { color: var(--color-danger); }

/* ═══════════════════════════════════════════════════════════════════
   BULK DELETE FILTER MODAL
   ═══════════════════════════════════════════════════════════════════ */
.delete-filter-modal-inner {
  max-width: 460px;
  text-align: left;
}
.delete-filter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: var(--space-3) 0;
  max-height: 60vh;
  overflow-y: auto;
}
.delete-filter-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-bg);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin: 0;
}
.delete-filter-option:hover {
  border-color: var(--color-primary);
  background: rgba(0, 255, 65, 0.04);
}
.delete-filter-option input[type="radio"] {
  margin: 4px 0 0 0;
  accent-color: var(--color-danger);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.delete-filter-option:has(input:checked) {
  border-color: var(--color-danger);
  background: rgba(255, 0, 64, 0.08);
  box-shadow: 0 0 8px rgba(255, 0, 64, 0.2);
}
.dfo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.dfo-text strong {
  color: var(--color-text);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.dfo-text small {
  color: var(--color-text-muted);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ── Multi-activity status bar (Task #5) ──
   Hidden globally: active job + ETA live on /activity banner above
   Pause/Stop controls (user preference). Keep DOM for API/error JS. */
.status-bar {
  display: none !important;
}
.status-bar[data-empty="true"] {
  display: none !important;
}
/* keep original layout rules commented-out path for re-enable:
.status-bar-visible {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  min-height: 36px;
  flex-wrap: wrap;
}
*/
.status-bar-section {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.status-bar-label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 600;
}
.status-bar-chips {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.job-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.6875rem;
  line-height: 1;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all var(--transition-fast);
}
.job-chip-label {
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 700;
  flex-shrink: 0;
}
.job-chip-name {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.job-chip-cancel {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0 2px;
  margin-left: 2px;
  cursor: pointer;
  border-radius: 2px;
  transition: all var(--transition-fast);
}
.job-chip-cancel:hover {
  color: var(--color-danger);
  background: rgba(255, 0, 64, 0.1);
}
/* Status variants */
.job-chip--running {
  border-color: var(--color-primary);
  animation: pulse-border 2s ease-in-out infinite;
}
.job-chip--running .job-chip-label { color: var(--color-primary); }
.job-chip--done { border-color: var(--color-success); opacity: 0.7; }
.job-chip--done .job-chip-label { color: var(--color-success); }
.job-chip--stopped { border-color: var(--color-warning); opacity: 0.7; }
.job-chip--stopped .job-chip-label { color: var(--color-warning); }
.job-chip--error { border-color: var(--color-danger); }
.job-chip--error .job-chip-label { color: var(--color-danger); }
/* Error toggle button */
.status-bar-error-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.status-bar-error-toggle:hover {
  background: var(--color-danger);
  color: var(--color-bg);
}
.status-bar-error-icon {
  font-weight: 900;
  font-size: 0.875rem;
  line-height: 1;
}
.status-bar-error-count {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.status-bar-error-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Activity page bottom error log (replaces top-bar ERRORS toggle) ── */
.activity-page .error-log-card {
  margin-top: var(--space-4);
}
.activity-page .error-count-badge {
  display: inline-block;
  margin-left: 0.4rem;
  min-width: 1.25rem;
  padding: 0 6px;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-dim);
  vertical-align: middle;
}
.activity-page .error-count-badge[data-has="1"] {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: rgba(255, 0, 64, 0.08);
}
.activity-page .activity-error-list {
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* ── Error log panel (legacy styles; panel removed from top bar) ── */
.error-log-panel {
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  max-height: 240px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
}
.error-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.error-log-title {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-danger);
  font-weight: 700;
}
.error-log-actions {
  display: flex;
  gap: var(--space-2);
}
.error-log-list {
  overflow-y: auto;
  padding: var(--space-2);
  flex: 1;
}
.error-log-empty {
  text-align: center;
  color: var(--color-text-dim);
  font-size: 0.75rem;
  padding: var(--space-4);
  letter-spacing: 0.08em;
}
.error-log-item {
  display: grid;
  grid-template-columns: 70px 140px 1fr;
  gap: var(--space-2);
  padding: 4px 8px;
  font-size: 0.6875rem;
  border-bottom: 1px solid var(--color-bg);
  align-items: baseline;
}
.error-log-item:hover { background: var(--color-surface); }
.error-log-ts { color: var(--color-text-dim); font-weight: 600; }
.error-log-name { color: var(--color-warning); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.error-log-msg { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .status-bar { padding: var(--space-2); gap: var(--space-2); }
  .job-chip-name { max-width: 100px; }
  .error-log-item { grid-template-columns: 60px 1fr; }
  .error-log-name { display: none; }
}



/* ── Virus stats: hero summary + prettier cards ── */
.virus-hero-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 768px) {
  .virus-hero-row { grid-template-columns: repeat(2, 1fr); }
}
.muted { color: var(--color-text-dim); }
.data-table.compact th,
.data-table.compact td {
  padding: 4px 8px;
  font-size: 0.6875rem;
}

.virus-hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.virus-hero-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.virus-hero-stat:hover {
  border-color: var(--color-surface-hover);
  transform: translateY(-1px);
}
.virus-hero-stat--primary {
  background: linear-gradient(135deg, rgba(0,255,65,0.08), var(--color-bg-elevated));
  border-color: var(--color-primary);
  box-shadow: var(--glow-green);
}
.virus-hero-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
}
.virus-hero-stat--primary .virus-hero-icon {
  background: var(--color-primary);
  color: var(--color-bg);
  border-color: var(--color-primary);
}
.virus-hero-body { min-width: 0; flex: 1; }
.virus-hero-label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 600;
  margin-bottom: 2px;
}
.virus-hero-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: 1.1;
}
.virus-hero-stat--primary .virus-hero-value { color: var(--color-primary); }
.virus-hero-sub {
  font-size: 0.6875rem;
  color: var(--color-text-dim);
  margin-top: 2px;
}

/* ── Virus card: color-coded with left accent ── */
.virus-card {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.virus-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--color-border);
}
.virus-card--spam .virus-card-accent { background: var(--color-primary); box-shadow: 0 0 8px var(--color-primary); }
.virus-card--siphon .virus-card-accent { background: var(--color-secondary); box-shadow: 0 0 8px var(--color-secondary); }
.virus-card--rootkit .virus-card-accent { background: #a855f7; box-shadow: 0 0 8px #a855f7; }

.virus-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.virus-header h2 { margin: 0; }
.virus-header-right { display: flex; gap: var(--space-2); align-items: center; }
.virus-tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
}
.virus-tag.green { color: var(--color-primary); background: rgba(0, 255, 65, 0.08); }
.virus-tag.amber { color: var(--color-warning); background: rgba(255, 184, 0, 0.08); }
.virus-tag--cyan { color: var(--color-secondary); background: rgba(0, 212, 255, 0.08); border-color: var(--color-secondary); }
.virus-tag--dim { color: var(--color-text-dim); border-color: var(--color-border); background: transparent; }

/* ── Slot bar (progress) ── */
.virus-slots { margin: var(--space-3) 0; }
.slot-bar {
  width: 100%;
  height: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.slot-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width var(--transition-normal);
  box-shadow: 0 0 6px var(--color-primary);
}
.slot-fill--spam {
  background: linear-gradient(90deg, var(--color-primary), #00cc33);
}

/* ── Stat grid ── */
.virus-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.virus-stats--compact { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
  .virus-stats, .virus-stats--compact { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.stat--primary { border-color: var(--color-primary); background: rgba(0, 255, 65, 0.04); }
.stat-label {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  font-weight: 600;
}
.stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: 1;
}
.stat--primary .stat-value { color: var(--color-primary); }

/* ── Top earners table ── */
.virus-top { margin-top: var(--space-2); }
.virus-top-table { margin: 0; }
.virus-top-table td { padding: 6px 8px; font-size: 0.75rem; }
.virus-top-rank {
  width: 24px;
  text-align: center;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-dim);
}
.virus-top-rank.rank-1 { color: #ffd700; text-shadow: 0 0 4px rgba(255, 215, 0, 0.5); }
.virus-top-rank.rank-2 { color: #c0c0c0; text-shadow: 0 0 4px rgba(192, 192, 192, 0.5); }
.virus-top-rank.rank-3 { color: #cd7f32; text-shadow: 0 0 4px rgba(205, 127, 50, 0.5); }
.virus-top-victim { font-weight: 600; }
.virus-top-rate {
  text-align: right;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-weight: 600;
}

.text-center { text-align: center; }


/* Software Top tables: word-format type, username + user_id stack */
.muted-small {
  font-size: 0.72rem;
  color: #888;
  font-family: monospace;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.lvl-pill {
  display: inline-block;
  min-width: 32px;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: monospace;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  background: #1a1a1a;
  color: #ccc;
  border: 1px solid #333;
}
.lvl-pill.lvl-1 { color: #9aa0a6; border-color: #444; }
.lvl-pill.lvl-2 { color: #6dd1e9; border-color: #2a5a66; background: #0d1f24; }
.lvl-pill.lvl-3 { color: #ffd166; border-color: #6a5520; background: #241d0a; }
.lvl-pill.lvl-4 { color: #ff8c5a; border-color: #6a3a20; background: #2a1408; }
.lvl-pill.lvl-5 { color: #ff5577; border-color: #6a2030; background: #2a0a10; }
.mono { font-family: monospace; font-size: 0.85rem; color: #aaa; }

/* Money page: classic dupe account picker grid */
.money-dupe-controls--4 {
  grid-template-columns: 1.4fr 1fr 1fr auto;
}
@media (max-width: 640px) {
  .money-dupe-controls--4 { grid-template-columns: 1fr 1fr; }
  .money-dupe-controls--4 .md-field--account { grid-column: 1 / -1; }
}
.md-status--error {
  border-left-color: var(--color-danger, #ff0040);
  background: rgba(255, 0, 64, 0.06);
  color: var(--color-danger, #ff0040);
}
.md-status--error .md-dot { background: var(--color-danger, #ff0040); }

/* Wallet — centered ALL HOT → COLD */
.wallet-bank-card {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wallet-bank-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  text-align: center;
}
.btn-wallet-bank {
  min-width: min(280px, 90%);
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}
.wallet-bank-center .result-msg {
  text-align: center;
  width: 100%;
}

/* Wallet — crypto → credits (APK WalletComponent) */
.wallet-exchange-card .virus-stats { margin-top: var(--space-2); }
.wallet-ex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.wallet-ex-field { flex: 1; min-width: min(160px, 100%); }
.wallet-ex-row .btn { min-height: 44px; }

/* Store / Black Market */
.bm-sale-banner {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-warning);
  background: rgba(255, 184, 0, 0.08);
  color: var(--color-warning);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.bm-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-left: 3px solid var(--color-border);
}
.bm-item--common { border-left-color: #808090; }
.bm-item--uncommon { border-left-color: var(--color-secondary); }
.bm-item--rare { border-left-color: #b388ff; }
.bm-item--sale { border-color: rgba(255, 184, 0, 0.45); }
.bm-item--purchased { opacity: 0.55; }
.bm-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}
.bm-item-name {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.bm-item-desc {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.bm-item-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
}
.bm-price { font-weight: 700; color: var(--color-primary); }
.bm-price-old {
  text-decoration: line-through;
  color: var(--color-text-dim);
}
.bm-limit { color: var(--color-text-muted); }
.bm-rarity {
  font-size: 0.5rem;
  letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.bm-rarity--common { color: var(--color-text-muted); background: #8080901a; }
.bm-rarity--uncommon { color: var(--color-secondary); background: #00d4ff14; }
.bm-rarity--rare { color: #b388ff; background: #b388ff1a; }
.bm-chip {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.bm-chip--sale {
  color: var(--color-warning);
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid var(--color-warning);
}
.bm-buy { width: 100%; min-height: 44px; margin-top: auto; }
.bm-inv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-2);
}
.bm-inv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: inherit;
  font-family: inherit;
  min-height: 44px;
}
.bm-inv-chip--use { cursor: pointer; }
.bm-inv-chip--use:hover:not(:disabled) {
  border-color: var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.25);
}
.bm-inv-chip--target { cursor: pointer; opacity: 0.9; }
.bm-inv-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.bm-inv-name { text-transform: uppercase; letter-spacing: 0.04em; }
.bm-inv-qty { color: var(--color-primary); font-weight: 700; }
.bm-inv-use {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
}
.bm-inv-use--hint { color: var(--color-warning); }

.proxy-stealth-bar {
  margin-top: var(--space-3);
  height: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.proxy-stealth-fill {
  height: 100%;
  background: #b388ff;
  box-shadow: 0 0 8px rgba(179, 136, 255, 0.45);
  width: 0;
  transition: width var(--transition-normal);
}

@media (max-width: 640px) {
  .bm-grid { grid-template-columns: 1fr; }
}

/* Victims — IP scan hit + bypass */
.ip-hit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ip-hit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 10px;
  border: 1px solid var(--color-border, #333);
  border-radius: 6px;
  background: var(--color-bg-elevated, #111);
  border-left: 3px solid var(--color-primary, #0f8);
}
.ip-hit-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text, #eee);
}
.ip-hit-meta {
  margin-top: 4px;
  line-height: 1.4;
}
.ip-hit-actions {
  flex-shrink: 0;
}
.ip-hit-actions .btn {
  min-width: 110px;
}
.ip-hit-real {
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: #6d6;
  min-height: 1.1em;
}

/* Software MINE — device / network / botnet cards */
.mine-hw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .mine-hw-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mine-hw-card {
  border: 1px solid var(--color-border, #333);
  border-radius: 6px;
  padding: 12px 10px;
  background: var(--color-bg-elevated, #111);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}
.mine-hw-label {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #888);
}
.mine-hw-cur {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text, #eee);
  line-height: 1.3;
}
.mine-hw-next {
  flex: 1;
  line-height: 1.35;
}
.mine-hw-price {
  font-size: 0.8rem;
}
.mine-hw-card .mine-hw-btn {
  width: 100%;
  margin-top: 4px;
}
.mine-hw-card--device { border-top: 2px solid var(--color-primary, #0f8); }
.mine-hw-card--network { border-top: 2px solid #4af; }
.mine-hw-card--botnet { border-top: 2px solid #fa4; }

/* Wallet — HISTORY chip + ledger */
.wallet-chip.wallet-chip--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.15);
}
.wallet-history-card .toolbar {
  flex-wrap: wrap;
  gap: var(--space-2);
}
.wallet-tx-filter {
  background: var(--color-bg-elevated, #111);
  color: var(--color-text, #ddd);
  border: 1px solid var(--color-border, #333);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  max-width: 42vw;
}
/* Expand fully so grouped (esp. hour) sections are not trapped in a short
   nested scroll box — page scroll shows every hour + all its rows. */
.wallet-tx-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: none;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
}
.wallet-tx-row {
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border, #222);
}
.wallet-tx-row:last-child { border-bottom: none; }
.wallet-tx-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.wallet-tx-type {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text, #eee);
  text-transform: lowercase;
}
.wallet-tx-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
}
.wallet-tx-amt--pos { color: var(--color-success, #00ff88); }
.wallet-tx-amt--neg { color: var(--color-danger, #ff0040); }
.wallet-tx-amt--zero { color: var(--color-text-muted, #888); }
.wallet-tx-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 0.65rem;
  color: var(--color-text-muted, #888);
}
.wallet-tx-addr {
  font-family: ui-monospace, monospace;
  color: var(--color-primary, #0f8);
  opacity: 0.85;
}
.wallet-tx-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border, #222);
}
.wallet-tx-group {
  margin-bottom: 0;
  border: 1px solid var(--color-border, #222);
  border-radius: var(--radius-sm, 6px);
  /* never clip hour body — overflow:hidden + sticky broke mobile scroll */
  overflow: visible;
  background: rgba(255, 255, 255, 0.02);
  flex-shrink: 0;
}
.wallet-tx-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 8px 10px;
  background: rgba(0, 255, 65, 0.06);
  border-bottom: 1px solid var(--color-border, #222);
  /* no sticky — stacked sticky hour heads blocked scrolling */
  position: static;
}
.wallet-tx-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary, #0f8);
}
.wallet-tx-group-meta {
  font-size: 0.65rem;
  color: var(--color-text-muted, #888);
  font-variant-numeric: tabular-nums;
}
.wallet-tx-group-body {
  overflow: visible;
}
.wallet-tx-group-body .wallet-tx-row {
  padding-left: 10px;
  padding-right: 10px;
}
.wallet-tx-group-body .wallet-tx-row:last-child {
  border-bottom: none;
}
.wallet-history-card {
  overflow: visible;
}

/* Multi-job activity banners */
.job-banners { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.status-account {
  font-size: 0.7rem;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  margin-top: 2px;
  opacity: 0.9;
}
.job-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--color-border);
}
.job-banner-actions .btn-small {
  min-height: 36px;
}
.job-chip-account {
  display: block;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Live API health chips (header + activity + farms) — Pack A QoL */
.api-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  line-height: 1.2;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #141414;
  color: #aaa;
  white-space: nowrap;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  box-sizing: border-box;
}
.header-api-chip {
  max-width: min(42vw, 9rem);
  margin: 0;
  padding: 3px 6px;
  font-size: 0.5625rem;
  align-self: center;
}
.api-chip[data-state="ok"],
.header-api-chip[data-state="ok"] { border-color: #2a5; color: #6d6; }
.api-chip[data-state="cooling"],
.header-api-chip[data-state="cooling"] { border-color: #a60; color: #fa3; }
.api-chip[data-state="degraded"],
.header-api-chip[data-state="degraded"] { border-color: #a40; color: #f84; }
.api-chip[data-state="maintenance"],
.header-api-chip[data-state="maintenance"] {
  border-color: #c90;
  color: #fc3;
  background: #2a2008;
  animation: maint-pulse 1.6s ease-in-out infinite;
}
.api-chip[data-state="update"],
.header-api-chip[data-state="update"] {
  border-color: #c44;
  color: #f66;
  background: #2a0808;
  animation: maint-pulse 1.6s ease-in-out infinite;
}
@keyframes maint-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

@media (max-width: 480px) {
  .header-right {
    gap: 4px;
  }
  .header-api-chip {
    max-width: min(46vw, 8.5rem);
    padding: 2px 5px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Touch / iOS: first tap and first key must register.
   - :hover on iOS is sticky (first tap = hover, second tap = click)
   - inputs < 16px cause Safari to zoom on focus (feels like "type twice")
   - transform on :hover moves the hit target under your finger
   ═══════════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse) {
  html { scroll-behavior: auto; }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  a:hover { text-shadow: none; }

  .btn-primary:hover:not(:disabled) {
    background: rgba(0, 255, 65, 0.1);
    box-shadow: none;
  }
  .btn-secondary:hover:not(:disabled) {
    border-color: var(--color-border);
    color: var(--color-text);
    box-shadow: none;
  }
  .btn-danger:hover:not(:disabled) {
    background: rgba(255, 0, 64, 0.1);
    box-shadow: none;
  }
  .btn-amber:hover:not(:disabled) {
    background: rgba(255, 184, 0, 0.1);
    box-shadow: none;
  }
  .card:hover { border-color: var(--color-border); }
  .action-card:hover,
  .action-card.cyan:hover,
  .action-card.amber:hover,
  .action-card.red:hover {
    border-color: var(--color-border);
    background: var(--color-surface);
    transform: none;
  }
  .action-card:hover::before { opacity: 0; }
  .account-item:hover { border-color: var(--color-border); }
  .header-account:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .nav-burger:hover { background: transparent; }
  .page-nav a:hover { background: transparent; }
  .job-indicator:hover { box-shadow: none; }
  .data-table tr:hover td { background: transparent; }
  .log-line:hover { background: transparent; }
  .ctrl-btn:hover:not(:disabled),
  .ctrl-pause:not(:disabled):hover,
  .ctrl-resume:not(:disabled):hover,
  .ctrl-stop:not(:disabled):hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }
  .page-nav a:hover {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
  }
  .nav-burger:hover {
    background: transparent;
    border-color: var(--color-border);
    box-shadow: none;
  }
  a.job-indicator:hover, .job-indicator:hover {
    box-shadow: none;
    background: transparent;
  }
  .acct-switcher-item:hover:not(:disabled) {
    background: transparent;
    border-color: var(--color-border);
  }
  .acct-switcher-item:hover:not(:disabled) { background: transparent; }
  .app-footer a:hover { color: inherit; }
  .btn-money-dupe:hover:not(:disabled) {
    background: var(--color-warning) !important;
    box-shadow: none;
    transform: none;
  }
  .job-chip-cancel:hover {
    color: var(--color-text-dim);
    background: transparent;
  }
  .software-subnav .sw-tab:hover,
  .victims-subnav .vic-tab:hover { background: transparent; color: inherit; }
  .sw-copy:hover { color: inherit; }
  button.badge.badge--failed:hover:not(:disabled) { box-shadow: none; }
  .acct-ip-copy:hover { color: inherit; }
  .delete-filter-option:hover { background: transparent; }
  .status-bar-error-toggle:hover { background: transparent; }
  .error-log-item:hover { background: transparent; }
  .virus-hero-stat:hover { transform: none; box-shadow: none; }
  .nav-close:hover { background: transparent; }
  .section-title-link:hover { text-shadow: none; }
  .btn-wallet-bank:hover:not(:disabled) { transform: none; box-shadow: none; }
}