:root {
  --bg: #08111f;
  --bg2: #0d1528;
  --panel: rgba(14, 23, 42, 0.72);
  --card: rgba(18, 30, 54, 0.82);
  --text: #eef4ff;
  --muted: #94a9c9;
  --line: rgba(255,255,255,0.08);
  --primary: #6ea8ff;
  --primary2: #8b5cf6;
  --green: #22c55e;
  --yellow: #f59e0b;
  --red: #ef4444;
  --cyan: #22d3ee;
  --shadow: 0 20px 50px rgba(0,0,0,0.35);
}
body.light {
  --bg: #eef4ff;
  --bg2: #dde8ff;
  --panel: rgba(255,255,255,0.78);
  --card: rgba(255,255,255,0.94);
  --text: #10203a;
  --muted: #63779b;
  --line: rgba(16,32,58,0.08);
  --shadow: 0 20px 40px rgba(84,114,176,0.16);
}
body.light .soft-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(243,247,255,0.96));
  border: 1px solid rgba(120, 145, 210, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
}
body.light .glass {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(120, 145, 210, 0.16);
}
body.light .chip {
  background: rgba(255,255,255,0.72);
  color: #63779b;
  border: 1px solid rgba(145, 163, 210, 0.24);
}
body.light .primary-btn {
  color: #0d2340;
}
body.light .icon-btn,
body.light .ghost-btn,
body.light .small-btn,
body.light .nav-item {
  background: rgba(109, 127, 165, 0.08);
}
body.light .metric-item,
body.light .table-scroll,
body.light .bar-track,
body.light .progress,
body.light .progress-split,
body.light .ratio-track {
  background: rgba(82, 103, 160, 0.08);
  border-color: rgba(120, 145, 210, 0.16);
}
body.light .donut::after {
  background: rgba(255,255,255,0.95);
}
body.light .bottom-nav {
  background:
    radial-gradient(circle at 72% 100%, rgba(139,92,246,0.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,245,255,0.92));
  border: 1px solid rgba(120,145,210,0.18);
  box-shadow: 0 12px 30px rgba(84,114,176,0.18), inset 0 1px 0 rgba(255,255,255,0.8);
}
body.light .nav-item {
  color: #6b7ea5;
}
body.light .nav-item.active {
  background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(232,239,255,0.9));
  color: #10203a;
}
body.light .stat-label,
body.light .stat-sub,
body.light .site-mini,
body.light .site-stats span,
body.light .metric-item span,
body.light .bar-label,
body.light .bar-value,
body.light .legend-item,
body.light .progress-meta,
body.light .hint,
body.light .subtitle,
body.light .panel-head p,
body.light .account-site,
body.light .error-text {
  color: #6d7fa5;
}
body.light .site-stats strong,
body.light .metric-item strong,
body.light .chart-title,
body.light .account-name,
body.light .group-head h3,
body.light .panel-head h2,
body.light .stat-value,
body.light h1 {
  color: #10203a;
}
body.light .toast {
  background: rgba(255,255,255,0.94);
  color: #10203a;
  border: 1px solid rgba(120,145,210,0.18);
}
body.light .login-form input,
body.light .editor-form input,
body.light .editor-form select,
body.light .search-wrap input {
  background: rgba(255,255,255,0.8);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); }
body {
  background:
    radial-gradient(circle at top left, rgba(110,168,255,0.22), transparent 28%),
    radial-gradient(circle at top right, rgba(139,92,246,0.20), transparent 24%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
body.app-booting #loginScreen,
body.app-booting #app {
  opacity: 0;
  pointer-events: none;
}
input, select { font: inherit; }
button, input, select, textarea, a {
  -webkit-tap-highlight-color: transparent;
}
.app-shell { max-width: 480px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom)); }
.view-section { display: grid; gap: 0; }
.screen { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(100%, 420px); border-radius: 28px; padding: 24px; }
.login-form, .editor-form { display: grid; gap: 12px; margin-top: 16px; }
.login-form input, .editor-form input, .editor-form select, .search-wrap input {
  width: 100%; min-width: 0; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,0.04); color: var(--text); outline: none;
}
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 14px; }
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: visible;
  padding-bottom: 2px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  color: #c9d7f2;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.chip-refresh {
  min-width: 126px;
  justify-content: flex-start;
  padding-inline: 14px;
}

.chip-stat {
  min-width: 84px;
}
.chip-green { color: #75f0b2; }
.chip-yellow { color: #ffd271; }
.chip-red { color: #ff9ab2; }
.accent-cyan { color: #63e6ff; }
.accent-violet { color: #d1b3ff; }
.topbar, .panel-head, .account-top, .meta-row, .hero-card, .hero-actions, .site-row, .legend-item, .bottom-nav { display: flex; align-items: center; }
.topbar, .panel-head, .hero-card, .site-row, .meta-row { justify-content: space-between; }
.topbar { margin-bottom: 16px; gap: 12px; }
.eyebrow { color: var(--cyan); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
h1 { font-size: 28px; margin: 0 0 6px; line-height: 1.1; }
.subtitle, .panel-head p, .account-site, .error-text { color: var(--muted); margin: 0; font-size: 13px; }
.icon-btn, .primary-btn, .ghost-btn, .small-btn, .nav-item {
  border: 0;
  color: var(--text);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.icon-btn, .primary-btn, .ghost-btn, .small-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.icon-btn, .ghost-btn, .small-btn, .nav-item { background: rgba(255,255,255,0.06); }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; }
.primary-btn { background: linear-gradient(135deg, #2bd0ff, #4f8dff); padding: 12px 16px; border-radius: 18px; font-weight: 700; box-shadow: 0 12px 28px rgba(43, 163, 255, 0.28); }
.ghost-btn { padding: 12px 14px; border-radius: 14px; }
.small-btn {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  min-height: 28px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.danger-btn { background: rgba(239,68,68,0.12); color: #ff9b9b; border-color: rgba(239,68,68,0.14); }
.glass { background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.soft-card { background: linear-gradient(180deg, rgba(15, 26, 50, 0.92), rgba(13, 22, 42, 0.86)); border: 1px solid rgba(124, 145, 196, 0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.hero-card, .panel { border-radius: 22px; padding: 16px; margin-bottom: 12px; }
.hero-card { flex-direction: column; align-items: stretch; gap: 14px; }
.hero-text { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.status-dot { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--green), var(--cyan)); box-shadow: 0 0 0 6px rgba(34,197,94,0.12); }
.hero-actions { gap: 10px; }
.hero-actions > * { flex: 0 0 auto; }
.account-tools { display: flex; align-items: center; gap: 8px; width: 100%; }
.compact-toggle-btn { min-height: 38px; padding: 0 14px; border-radius: 16px; white-space: nowrap; }
.search-wrap { flex: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.stat-card { padding: 14px; border-radius: 18px; }
.stat-label { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.stat-value { font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.stat-sub { margin-top: 6px; color: var(--muted); font-size: 12px; }
.panel-head { gap: 10px; margin-bottom: 12px; }
.panel-head h2 { margin: 0 0 4px; font-size: 17px; }
.site-summary, .group-list { display: grid; gap: 12px; }
.site-pill { padding: 13px; border-radius: 18px; }
.site-row { gap: 10px; margin-bottom: 10px; }
.site-actions, .inline-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.site-name { font-weight: 700; }
.site-mini { color: var(--muted); font-size: 12px; }
.progress { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--primary2)); }
.progress-split {
  background: rgba(255,255,255,0.08);
}
.progress-balance {
  background: linear-gradient(90deg, #65b5ff, #8b5cf6);
}
.progress-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}
.site-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.site-stats strong, .metric-item strong { display: block; margin-top: 4px; font-size: 14px; }
.site-stats span, .metric-item span { color: var(--muted); font-size: 12px; }
.charts-grid { display: grid; gap: 12px; }
.chart-card { border-radius: 18px; padding: 13px; }
.chart-title { font-weight: 700; margin-bottom: 12px; }
.bars { display: grid; gap: 12px; }
.settings-actions { display: grid; gap: 10px; }
.settings-btn { width: 100%; justify-content: center; }
.bar-item { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 10px; }
.bar-label, .bar-value { font-size: 12px; color: var(--muted); }
.bar-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--primary2)); }
.ratio-track {
  background: rgba(255,255,255,0.08);
}
.donut-wrap { display: flex; justify-content: center; margin: 8px 0 12px; }
.donut { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; position: relative; font-size: 24px; font-weight: 800; }
.donut::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); }
.donut span { position: relative; z-index: 1; }
.legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.legend-item { gap: 8px; justify-content: center; color: var(--muted); font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 999px; }
.stack-mobile { align-items: stretch; flex-direction: column; }
.account-card { padding: 13px; border-radius: 18px; position: relative; }
.account-top {
  align-items: flex-start;
  position: relative;
  padding-right: 70px;
}
.account-name { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 9px;
  font-size: 11px;
}
.badge.ok { background: rgba(34,197,94,.16); color: #7df0a4; }
.badge.warn { background: rgba(245,158,11,.16); color: #ffd47b; }
.badge.err { background: rgba(239,68,68,.16); color: #ff9b9b; }
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0; }
.metric-item { padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); }
.group-block { display: grid; gap: 10px; }
.group-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 0; }
.group-head h3 { margin: 0; font-size: 16px; }
.site-actions,
.inline-actions {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: end;
  align-content: start;
}

.site-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.inline-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.site-actions .small-btn,
.inline-actions .small-btn {
  min-width: 0;
  min-width: 44px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  min-height: 27px;
  justify-self: end;
  text-align: center;
}

.site-actions .danger-btn,
.inline-actions .danger-btn {
  padding-inline: 9px;
}

.meta-row {
  align-items: flex-start;
  gap: 10px;
}

.error-text {
  flex: 1;
  min-width: 0;
  line-height: 1.5;
  padding-top: 3px;
}

.inline-actions {
  flex-shrink: 0;
  margin-top: -2px;
  gap: 5px;
}
.empty-tip { color: var(--muted); font-size: 13px; text-align: center; padding: 18px; }
.table-scroll { overflow: hidden; border-radius: 16px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; word-break: break-word; }
th { color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(452px, calc(100vw - 20px));
  padding: 10px 10px 12px;
  gap: 7px;
  border-radius: 24px;
  justify-content: space-between;
  background:
    radial-gradient(circle at 72% 100%, rgba(139,92,246,0.24), transparent 28%),
    linear-gradient(180deg, rgba(14,23,42,0.94), rgba(12,20,38,0.92));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.nav-item {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 10px 6px 8px;
  border-radius: 16px;
  color: var(--muted);
  font-size: 12px;
  background: transparent;
}
.nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
}
.nav-item.active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.nav-item.active .nav-icon {
  color: #69e0ff;
  text-shadow: 0 0 18px rgba(34,211,238,0.34);
}
.icon-btn:focus,
.primary-btn:focus,
.ghost-btn:focus,
.small-btn:focus,
.nav-item:focus {
  outline: none;
}

.icon-btn:focus-visible,
.primary-btn:focus-visible,
.ghost-btn:focus-visible,
.small-btn:focus-visible,
.nav-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(99, 230, 255, 0.18);
}

.icon-btn:active,
.primary-btn:active,
.ghost-btn:active,
.small-btn:active,
.nav-item:active {
  transform: scale(0.98);
}

.primary-btn.is-loading::after,
.ghost-btn.is-loading::after,
.small-btn.is-loading::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.22);
  border-top-color: rgba(255,255,255,0.95);
  animation: button-spin .75s linear infinite;
}

.small-btn.is-loading::after {
  width: 10px;
  height: 10px;
}

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

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 92px; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: rgba(15,23,42,.9); color: #fff; border: 1px solid var(--line); z-index: 99; }
.hidden { display: none !important; }
@media (min-width: 700px) {
  .app-shell { max-width: 1100px; padding-left: 20px; padding-right: 20px; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .charts-grid { grid-template-columns: 1.2fr .8fr; }
  .group-list { grid-template-columns: 1fr 1fr; }
  .hero-card { flex-direction: row; justify-content: space-between; align-items: center; }
  .hero-actions > * { flex: initial; }
  .stack-mobile { flex-direction: row; align-items: center; }
  .search-wrap { width: 260px; }
  .bottom-nav { width: min(760px, calc(100vw - 48px)); }
}

@media (max-width: 520px) {
  .app-shell {
    padding: calc(12px + env(safe-area-inset-top)) 10px calc(88px + env(safe-area-inset-bottom));
  }

  .topbar {
    margin-bottom: 12px;
    gap: 10px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: .14em;
  }

  h1 {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .subtitle,
  .panel-head p,
  .account-site,
  .error-text {
    font-size: 12px;
  }

  .hero-card,
  .panel {
    border-radius: 20px;
    padding: 14px;
    margin-bottom: 10px;
  }

  .hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "text action"
      "chips chips";
    column-gap: 10px;
    row-gap: 8px;
  }

  .hero-text {
    font-size: 12.5px;
    grid-area: text;
  }

  .hero-actions {
    grid-area: action;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-end;
    justify-self: end;
    align-self: start;
  }

  .primary-btn {
    padding: 9px 14px;
    border-radius: 15px;
    font-size: 13px;
  }

  .ghost-btn {
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
  }

  #refreshAllBtn {
    min-height: 30px;
    min-width: 76px;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    align-self: flex-start;
  }

  #viewToggleBtn {
    min-height: 36px;
  }

  .hero-chips {
    grid-area: chips;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    margin-top: 0;
  }

  .chip {
    min-height: 24px;
    font-size: 10px;
    border-radius: 14px;
    padding: 0 7px;
  }

  .chip-refresh {
    min-width: 98px;
    padding-inline: 8px;
  }

  .chip-stat {
    min-width: 58px;
    padding-inline: 6px;
  }

  .stats-grid {
    gap: 9px;
    margin-bottom: 10px;
  }

  .stat-card {
    padding: 12px;
    border-radius: 16px;
  }

  .stat-label,
  .stat-sub {
    font-size: 11px;
  }

  .stat-value {
    font-size: 22px;
  }

  .panel-head {
    gap: 8px;
    margin-bottom: 10px;
  }

  .account-tools {
    gap: 7px;
    align-items: stretch;
  }

  .panel-head h2 {
    font-size: 16px;
  }

  .login-form input,
  .editor-form input,
  .editor-form select,
  .search-wrap input {
    padding: 11px 12px;
    border-radius: 13px;
    font-size: 13px;
  }

  .editor-form {
    gap: 10px;
    margin-top: 14px;
  }

  .site-pill,
  .chart-card,
  .account-card {
    padding: 12px;
    border-radius: 16px;
  }

  .site-pill {
    padding: 11px;
  }

  .site-row,
  .meta-row,
  .group-block {
    gap: 8px;
  }

  .site-row {
    align-items: flex-start;
  }

  .site-name {
    font-size: 15px;
  }

  .site-mini,
  .progress-meta,
  .site-stats span,
  .metric-item span,
  .bar-label,
  .bar-value,
  .legend-item {
    font-size: 11px;
  }

  .site-stats strong,
  .metric-item strong {
    font-size: 13px;
  }

  .chart-title,
  .account-name,
  .group-head h3 {
    font-size: 15px;
  }

  .metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 12px 0 10px;
  }

  .metric-item {
    padding: 8px 7px;
    border-radius: 12px;
  }

  .metric-item span {
    font-size: 10px;
  }

  .metric-item strong {
    font-size: 12px;
    line-height: 1.25;
    word-break: break-word;
  }

  .account-top {
    padding-right: 62px;
  }

  .status-badge {
    top: 1px;
    right: 0;
    padding: 4px 8px;
    font-size: 10px;
  }

  .table-scroll {
    border-radius: 14px;
  }

  th,
  td {
    padding: 9px 7px;
    font-size: 11px;
  }

  th:nth-child(5),
  td:nth-child(5) {
    text-align: center;
  }

  .bottom-nav {
    width: min(452px, calc(100vw - 16px));
    padding: 8px;
    border-radius: 22px;
  }

  .nav-item {
    padding: 9px 6px 8px;
    border-radius: 14px;
    font-size: 12px;
  }

  .nav-icon {
    font-size: 15px;
  }

  .toast {
    bottom: 84px;
    padding: 11px 14px;
    border-radius: 13px;
    font-size: 13px;
  }

  .site-actions {
    gap: 5px;
    padding: 2px;
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    flex-wrap: nowrap;
  }

  .site-actions .small-btn,
  .inline-actions .small-btn {
    min-height: 25px;
    font-size: 10px;
    padding: 4px 8px;
  }

  .inline-actions {
    gap: 5px;
    flex-wrap: nowrap;
  }
}