:root {
  color-scheme: dark;
  --bg: #070b12;
  --bg-soft: #0a1019;
  --sidebar: #090e16;
  --panel: #101824;
  --panel-raised: #131d2b;
  --panel-soft: #0c141f;
  --line: #213047;
  --line-soft: rgba(103, 135, 177, .14);
  --text: #f5f8fd;
  --text-soft: #d9e1ed;
  --muted: #8998ad;
  --muted-2: #65758c;
  --primary: #3b82f6;
  --primary-bright: #62a0ff;
  --primary-soft: rgba(59, 130, 246, .14);
  --green: #2dd4a3;
  --green-soft: rgba(45, 212, 163, .13);
  --amber: #f6b94b;
  --amber-soft: rgba(246, 185, 75, .13);
  --red: #f36970;
  --red-soft: rgba(243, 105, 112, .12);
  --violet: #9b87f5;
  --violet-soft: rgba(155, 135, 245, .13);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --sidebar-width: 252px;
  --topbar-height: 82px;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; scrollbar-gutter: stable; }

/* All sizes are CSS pixels; keep the panel readable at normal browser zoom. */
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% -20%, rgba(45, 100, 188, .20), transparent 33rem),
    radial-gradient(circle at 20% 110%, rgba(51, 82, 141, .10), transparent 40rem),
    var(--bg);
  color: var(--text);
  font: 14px/1.5 Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(85, 153, 255, .28);
  outline-offset: 2px;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 14px; }

.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(117, 145, 185, .12);
  background: rgba(8, 13, 21, .96);
  box-shadow: 20px 0 60px rgba(0, 0, 0, .08);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--topbar-height);
  padding: 0 22px;
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #5aa0ff, #2e70ef);
  box-shadow: 0 9px 26px rgba(49, 120, 241, .34), inset 0 1px rgba(255, 255, 255, .22);
}
.brand-mark svg { width: 22px; height: 22px; stroke-width: 2.2; }
.brand-copy { min-width: 0; }
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-size: 17px; letter-spacing: -.02em; }
.brand-copy small {
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-nav {
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  gap: 7px;
  padding: 25px 14px;
}
.nav-item {
  position: relative;
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #8999af;
  cursor: pointer;
  text-align: left;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.nav-item svg { width: 19px; height: 19px; }
.nav-item:hover { color: #d7e2f1; background: rgba(99, 132, 179, .08); }
.nav-item:active { transform: scale(.985); }
.nav-item.active {
  color: #f5f8ff;
  background: linear-gradient(100deg, rgba(57, 126, 242, .20), rgba(57, 126, 242, .08));
  box-shadow: inset 3px 0 #4a8cff;
}
.nav-item.active svg { color: #67a4ff; }
.nav-item span:nth-child(2) { font-weight: 650; }
.nav-count {
  min-width: 25px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(112, 141, 182, .10);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}
.nav-item.active .nav-count { background: var(--primary-soft); color: #78aeff; }

.sidebar-bottom {
  margin-top: auto;
  padding: 18px 17px 20px;
  border-top: 1px solid var(--line-soft);
}
.sidebar-health {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(18, 28, 41, .55);
}
.sidebar-health span:last-child { min-width: 0; }
.sidebar-health strong, .sidebar-health small { display: block; }
.sidebar-health strong {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-health small { color: var(--muted); font-size: 10px; }
.version { display: block; margin: 12px 5px 0; color: #526176; font-size: 10px; }

.pulse-dot {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #718096;
}
.pulse-dot.online { background: var(--green); box-shadow: 0 0 0 5px rgba(45, 212, 163, .10); }
.pulse-dot.warning { background: var(--amber); box-shadow: 0 0 0 5px rgba(246, 185, 75, .10); }
.pulse-dot.offline { background: var(--red); box-shadow: 0 0 0 5px rgba(243, 105, 112, .10); }

.sidebar-scrim { display: none; }

.workspace {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 13px clamp(22px, 3.2vw, 48px);
  border-bottom: 1px solid var(--line-soft);
  background: rgba(7, 11, 18, .78);
  backdrop-filter: blur(20px);
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar h1 { margin: 0; font-size: 18px; letter-spacing: -.015em; }
.topbar p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.mobile-menu { display: none !important; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

.api-state {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  color: var(--muted);
  background: rgba(16, 24, 36, .65);
  font-size: 11px;
  white-space: nowrap;
}
.api-state.online { color: #b9dcca; }
.api-state.offline { color: #f2b1b5; }

.balance-chip {
  min-width: 96px;
  height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(16, 24, 36, .65);
}
.balance-chip small { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.balance-chip strong { margin-top: -1px; font-size: 14px; }

.icon-button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: rgba(16, 24, 36, .72);
  color: #aab8ca;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.icon-button:hover { color: #fff; background: #172334; border-color: #30445f; transform: translateY(-1px); }
.icon-button svg { width: 19px; height: 19px; }

.notification-center { position: relative; }
.notification-button[aria-expanded="true"] { color: #fff; background: #172334; border-color: #30445f; }
.notification-badge {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--bg);
  border-radius: 99px;
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 800;
}
.notification-panel {
  position: absolute;
  top: 52px;
  right: 0;
  width: min(410px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid #293a52;
  border-radius: 17px;
  background: rgba(15, 23, 34, .98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48);
  backdrop-filter: blur(22px);
}
.notification-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 3px 4px 13px; }
.notification-head strong, .notification-head small { display: block; }
.notification-head strong { font-size: 15px; }
.notification-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.text-button { padding: 4px; border: 0; background: none; color: #78adff; font-size: 11px; font-weight: 700; cursor: pointer; }
.notification-list { max-height: 420px; display: grid; gap: 8px; overflow: auto; scrollbar-width: thin; }
.notification-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--panel-soft);
}
.notification-item-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: #73aaff; }
.notification-item-icon svg { width: 15px; height: 15px; }
.notification-item.success .notification-item-icon { color: var(--green); background: var(--green-soft); }
.notification-item.error .notification-item-icon { color: var(--red); background: var(--red-soft); }
.notification-item.warning .notification-item-icon { color: var(--amber); background: var(--amber-soft); }
.notification-item strong, .notification-item small, .notification-item time { display: block; }
.notification-item strong { color: var(--text-soft); font-size: 12px; }
.notification-item small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.notification-item time { margin-top: 4px; color: var(--muted-2); font-size: 9px; }
.notification-empty { padding: 34px 16px; border: 1px dashed #283950; border-radius: 12px; color: var(--muted); text-align: center; }

.connection-banner {
  width: min(1500px, calc(100% - clamp(36px, 6.4vw, 96px)));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid rgba(243, 105, 112, .28);
  border-radius: 13px;
  background: rgba(92, 31, 39, .18);
}
.banner-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--red-soft); color: #ff9aa0; font-weight: 800; }
.connection-banner strong { display: block; font-size: 12px; }
.connection-banner p { margin: 1px 0 0; color: #b48f94; font-size: 11px; }

.content {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 3.5vw, 48px);
}

.view { display: none; }
.view.active { display: block; }
.view-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
@keyframes view-in { from { opacity: 0; } }

.welcome-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: 40px;
  margin-bottom: 29px;
}
.eyebrow, .panel-kicker {
  color: #6fa8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.welcome-row h2 {
  margin: 8px 0 12px;
  max-width: 760px;
  font-size: clamp(33px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.welcome-row > div > p { max-width: 750px; margin: 0; color: #8fa1b8; font-size: 15px; }

.system-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 102px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(19, 30, 45, .92), rgba(11, 18, 27, .92));
  box-shadow: var(--shadow);
}
.system-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: var(--muted); background: rgba(101, 119, 145, .12); }
.system-card.ready .system-icon { color: var(--green); background: var(--green-soft); }
.system-card.warning .system-icon { color: var(--amber); background: var(--amber-soft); }
.system-card.error .system-icon { color: var(--red); background: var(--red-soft); }
.system-card small, .system-card strong, .system-card em { display: block; }
.system-card small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.system-card strong { margin-top: 2px; color: var(--text-soft); font-size: 15px; }
.system-card em { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.overview-status { min-height: 72px; margin-bottom: 14px; padding: 14px 16px; border-radius: 15px; background: var(--panel); box-shadow: none; }
.overview-status .system-icon { width: 38px; height: 38px; border-radius: 11px; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.standalone-purchase { max-width: 1180px; }
.metric-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(16, 24, 36, .76);
}
.metric-icon { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 12px; }
.metric-icon svg { width: 18px; height: 18px; }
.metric-icon.blue { color: #6fa7ff; background: var(--primary-soft); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.violet { color: var(--violet); background: var(--violet-soft); }
.metric-icon.amber { color: var(--amber); background: var(--amber-soft); }
.metric-card small, .metric-card strong, .metric-card em { display: block; }
.metric-card small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.metric-card strong { margin: -1px 0; font-size: 23px; letter-spacing: -.03em; }
.metric-card em { overflow: hidden; color: var(--muted-2); font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, rgba(17, 26, 39, .96), rgba(11, 18, 27, .97));
  box-shadow: var(--shadow);
}
.purchase-panel { padding: clamp(20px, 2.4vw, 30px); }
.purchase-panel > .panel-head { flex-wrap: wrap; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; }
.panel-head.inline { align-items: center; }
.panel-head h3 { margin: 4px 0 3px; font-size: 21px; letter-spacing: -.02em; }
.panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.price-hint { align-self: center; max-width: 240px; color: #7090b8; font-size: 11px; text-align: right; }

.purchase-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(170px, .75fr) 115px minmax(300px, 1.55fr) auto;
  align-items: start;
  gap: 13px;
  margin-top: 22px;
}
.field { min-width: 0; display: block; }
.field > span:first-child { display: block; margin: 0 0 7px; color: #b8c5d7; font-size: 11px; font-weight: 700; }
.field small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 10px; }
code { padding: 1px 5px; border-radius: 5px; background: rgba(67, 129, 224, .13); color: #77adff; font-family: "Cascadia Code", Consolas, monospace; }
input:not([type="checkbox"]):not([type="radio"]), select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #2a3b53;
  border-radius: 11px;
  outline: 0;
  background: #0a111a;
  color: var(--text);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input::placeholder { color: #4f5d70; }
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover { border-color: #364c69; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus { border-color: #4b8df5; background: #0b131e; box-shadow: 0 0 0 3px rgba(75, 141, 245, .12); }
input.invalid, select.invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px var(--red-soft) !important; }
select { cursor: pointer; }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(.985); }
.button:disabled { opacity: .46; cursor: not-allowed; transform: none; }
.button svg { width: 17px; height: 17px; }
.button.primary { background: linear-gradient(135deg, #5598ff, #2e73ee); color: white; box-shadow: 0 9px 26px rgba(46, 115, 238, .22), inset 0 1px rgba(255, 255, 255, .16); }
.button.primary:hover { filter: brightness(1.08); }
.button.secondary { border-color: var(--line); background: #151f2d; color: var(--text-soft); }
.button.secondary:hover { background: #1b2838; border-color: #334965; }
.button.danger { border-color: rgba(243, 105, 112, .28); background: var(--red-soft); color: #ff9ca1; }
.button.compact { min-height: 36px; padding: 0 13px; font-size: 11px; }
.button.loading { pointer-events: none; }
.purchase-button { height: 46px; align-self: start; margin-top: 25px; padding-inline: 19px; }

.spinner {
  width: 16px;
  height: 16px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .72s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.jobs-panel { margin-top: 18px; padding: clamp(20px, 2.4vw, 28px); }
.count-badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 99px;
  background: var(--primary-soft);
  color: #7baeff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.ready, .status-badge.online, .status-badge.success { background: var(--green-soft); color: var(--green); }
.status-badge.error, .status-badge.offline { background: var(--red-soft); color: var(--red); }
.status-badge.warning, .status-badge.progress, .status-badge.pending, .status-badge.provisioning { background: var(--amber-soft); color: var(--amber); }
.status-badge.neutral { background: rgba(120, 139, 164, .10); color: #91a0b4; }

.jobs-list { display: grid; gap: 12px; margin-top: 17px; }
.job-card {
  padding: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: rgba(9, 16, 25, .74);
}
.job-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.job-top strong, .job-top small { display: block; }
.job-top strong { color: var(--text-soft); font-size: 13px; }
.job-top small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.job-actions { display: flex; align-items: center; gap: 11px; }
.job-percent { color: #76abff; font-size: 12px; font-weight: 800; }
.cancel-button { padding: 4px 8px; border: 1px solid rgba(243, 105, 112, .25); border-radius: 8px; background: var(--red-soft); color: #ff9aa0; font-size: 10px; font-weight: 700; cursor: pointer; }
.progress-track { height: 6px; margin: 12px 0; overflow: hidden; border-radius: 99px; background: #1b293b; }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #347ff5, #68a7ff); transition: width .38s ease; }
.job-domains { display: grid; gap: 6px; }
.job-domain { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; border-radius: 8px; background: rgba(17, 27, 40, .75); }
.job-domain code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-domain span { color: var(--muted); font-size: 10px; text-align: right; }
.job-card > .job-domains { margin-top: 12px; }
.job-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.job-waiting .job-state, .job-attention .job-state { color: #e2ba70; }
.attention-panel { border-color: rgba(226, 186, 112, .24); }
.job-attention { border-color: rgba(226, 186, 112, .16); }
.job-domain .job-domain-label { flex: 1; align-self: center; font-size: 12px; overflow-wrap: anywhere; }
.job-domain-attention .job-domain-label { color: #d9b778; }
.job-domain-find { flex: 0 0 auto; align-self: center; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; color: #9dbde9; background: transparent; font-size: 11px; cursor: pointer; }
.job-domain-find:hover { background: var(--primary-soft); }
.job-more { margin-top: 9px; }
.job-more summary { width: fit-content; color: #8db9ff; cursor: pointer; font-size: 12px; }
.job-more .job-domains { margin-top: 10px; }
@media (max-width: 650px) {
  .job-top { flex-wrap: wrap; gap: 9px; }
  .job-actions { flex-wrap: wrap; }
  .job-domain { flex-wrap: wrap; gap: 7px 12px; }
  .job-domain code { flex: 1 1 70%; min-width: 0; }
  .job-domain .job-domain-label { flex-basis: 65%; text-align: left; }
}
.jobs-empty { display: flex; align-items: center; gap: 11px; padding: 18px 2px 2px; color: var(--muted); }
.jobs-empty-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.jobs-empty strong, .jobs-empty small { display: block; }
.jobs-empty strong { color: #c9d3e0; font-size: 12px; }
.jobs-empty small { font-size: 10px; }

.view-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 4px 0 24px; }
.view-head h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.035em; }
.view-head p { max-width: 720px; margin: 6px 0 0; color: var(--muted); }

.table-panel { overflow: hidden; }
.table-toolbar {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.search-box { position: relative; width: min(360px, 100%); }
.search-box svg { position: absolute; left: 13px; top: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search-box input { height: 43px !important; padding-left: 41px !important; }
.filter-select { min-width: 180px; }
.filter-select select { height: 43px; }
.toolbar-count { margin-left: auto; color: var(--muted); font-size: 11px; }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(70, 137, 241, .22);
  background: rgba(42, 103, 198, .10);
}
.bulk-bar strong { color: #8db9ff; font-size: 11px; }
.bulk-bar span { flex: 1; color: #7590b3; font-size: 10px; }
.bulk-bar.inactive { visibility: hidden; pointer-events: none; }
.bulk-role { display: inline-flex; align-items: center; gap: 6px; }
.bulk-role input { width: 130px; height: 31px !important; padding: 0 10px !important; border-radius: 9px !important; font-size: 10px; }

.responsive-table { position: relative; width: 100%; overflow: auto; scrollbar-width: thin; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: middle; }
.data-table th { color: #708198; background: rgba(12, 20, 31, .65); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.data-table td { color: #b7c3d3; font-size: 11px; }
.data-table tbody tr { transition: background .14s ease; }
.data-table tbody tr:hover { background: rgba(80, 116, 166, .045); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.check-column { width: 42px; text-align: center !important; }
input[type="checkbox"]:not(.switch) { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.domain-name { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.domain-name-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #78adff; background: var(--primary-soft); }
.domain-name-icon svg { width: 14px; height: 14px; }
.domain-name strong, .domain-name small { display: block; }
.domain-name strong { color: #e4eaf3; font: 600 11px/1.4 "Cascadia Code", Consolas, monospace; }
.domain-name small { color: var(--muted-2); font-size: 9px; }
.domain-open-link { color: inherit; border-radius: 4px; text-decoration: none; text-underline-offset: 3px; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.domain-open-link:hover { color: #a5caff; background: rgba(76, 143, 247, .12); box-shadow: 0 0 0 3px rgba(76, 143, 247, .12); text-decoration: underline; }
.domain-open-link:focus-visible { outline: 2px solid #79b1ff; outline-offset: 4px; }
.copy-domain-button { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; padding: 0; border: 1px solid var(--line-soft); border-radius: 8px; background: #121d2b; color: #7faeff; cursor: pointer; }
.copy-domain-button:hover { color: #fff; border-color: #355273; background: #19283a; }
.copy-domain-button svg { width: 13px; height: 13px; }
.domain-usage { min-width: 190px; display: flex; align-items: center; gap: 9px; transition: opacity .15s ease; }
.domain-usage.saving { opacity: .58; }
.used-check { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #9aa9bb; font-size: 9px; cursor: pointer; white-space: nowrap; }
.used-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--green); }
.role-editor { box-sizing: border-box; width: 96px; height: 27px; flex: 0 0 96px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; overflow: hidden; border: 1px solid rgba(210, 222, 238, .28); border-radius: 999px; background: #101a27; color: #b7c4d4; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.role-editor:hover { border-color: rgba(236, 242, 249, .42); background: #0e1824; }
.role-editor:focus-within { border-color: rgba(244, 248, 253, .78); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 0 14px rgba(218, 231, 247, .08); color: #f2f6fb; }
.role-editor svg { width: 11px; height: 11px; flex: 0 0 auto; }
.role-editor input.role-input { box-sizing: border-box; min-width: 0; width: 62px; height: 25px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: #edf2f8; font-size: 9px; line-height: 25px; }
.role-editor input.role-input:hover, .role-editor input.role-input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.role-input::placeholder { color: #68778a; }
.domains-table tr.domain-used { background: rgba(45, 212, 163, .035); }
.domains-table tr.domain-vk-banned { background: rgba(243, 105, 112, .055); }
.domains-table tr.domain-vk-banned:hover { background: rgba(243, 105, 112, .08); }
.domains-table tr.domain-change-blocked { box-shadow: inset 3px 0 rgba(243,105,112,.75); }
.domains-table tr.domain-change-blocked:not(.domain-selected) { background:rgba(243,105,112,.065); }
.domains-table tr.domain-change-blocked:not(.domain-selected):hover { background:rgba(243,105,112,.10); }
.target-link { display: block; max-width: 340px; overflow: hidden; color: #83a9dc; font-family: "Cascadia Code", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.target-link:hover { color: #a5c6f2; }
.dual-state { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.dual-state.compact { gap: 7px; }
.mini-state { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }
.mini-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #67778d; }
.mini-state.ready { color: #75cbb0; }
.mini-state.ready::before { background: var(--green); }
.mini-state.error { color: #e99196; }
.mini-state.error::before { background: var(--red); }
.mini-state.progress { color: #d8ad62; }
.mini-state.progress::before { background: var(--amber); }
.domain-status-stack { display: inline-flex; align-items: center; min-width: 105px; }
.domain-status-stack:has(.urlscan-report-link) { flex-direction: column; align-items: flex-start; gap: 4px; }
.domain-status-stack .urlscan-report-link { font-size: 11px; line-height: 1.3; white-space: nowrap; }
.domain-clicks { display: inline-flex; align-items: center; white-space: nowrap; }
.domain-click-details { display: grid; width: 76px; gap: 5px; font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.domain-click-details > span { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; column-gap: 7px; }
.domain-click-details strong { color: #dbe6f5; text-align: right; font-weight: 600; }
.domain-click-details svg { width: 13px; height: 13px; }
.domain-unique-count svg { color: #65cbb2; }
.domain-bot-count svg { color: #b49abd; }
.row-actions { display: flex; justify-content: flex-end; gap: 6px; }
.row-action {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(19, 30, 44, .72);
  color: #8fa0b5;
  cursor: pointer;
  transition: .15s ease;
}
.row-action:hover { color: #fff; border-color: #354d6c; background: #192638; }
.row-action.danger:hover { color: #ff9ca1; border-color: rgba(243, 105, 112, .3); background: var(--red-soft); }
.row-action svg { width: 14px; height: 14px; }

.empty-state {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 42px 20px;
  text-align: center;
}
.empty-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: #7197ca; background: rgba(64, 111, 178, .11); }
.empty-icon svg { width: 25px; height: 25px; }
.empty-state h3 { margin: 13px 0 4px; font-size: 16px; }
.empty-state p { max-width: 480px; margin: 0 0 17px; color: var(--muted); font-size: 11px; }

.server-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
  padding: 14px 17px;
  border: 1px solid rgba(67, 132, 231, .20);
  border-radius: 15px;
  background: rgba(40, 93, 173, .08);
}
.server-summary-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: #74aaff; background: var(--primary-soft); }
.server-summary strong { font-size: 12px; }
.server-summary p { margin: 2px 0 0; color: #7890af; font-size: 10px; }
.capacity { padding: 6px 10px; border-radius: 99px; background: var(--primary-soft); color: #79adff; font-size: 11px; font-weight: 800; }

.servers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.server-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 28, 42, .96), rgba(10, 17, 26, .97));
  box-shadow: var(--shadow);
}
.server-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px; }
.server-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.server-icon { width: 41px; height: 41px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; color: #7891b3; background: rgba(91, 119, 158, .10); }
.server-icon.online { color: var(--green); background: var(--green-soft); }
.server-icon.warning { color: var(--amber); background: var(--amber-soft); }
.server-icon.offline { color: var(--red); background: var(--red-soft); }
.server-identity strong, .server-identity small, .server-identity code { display: block; }
.server-identity strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.server-identity code { max-width: 260px; margin-top: 3px; overflow: hidden; background: none; padding: 0; color: #8496ad; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.server-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 18px 16px; }
.server-stat { padding: 0 10px; border-left: 1px solid var(--line-soft); }
.server-stat:first-child { padding-left: 0; border-left: 0; }
.server-stat small, .server-stat strong { display: block; }
.server-stat small { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.server-stat strong { margin-top: 2px; overflow: hidden; color: #cbd5e2; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.server-card-message { margin: 0 18px 16px; padding: 9px 10px; border-radius: 9px; background: rgba(76, 104, 144, .08); color: var(--muted); font-size: 10px; }
.server-card-message.error { background: var(--red-soft); color: #e99ca0; }
.server-operation { margin: 0 18px 16px; padding: 16px; border: 1px solid #2b4161; border-radius: 12px; background: linear-gradient(135deg, #11223a, #0e1826); min-width: 0; }
.job-card > .server-operation { margin: 14px 0 0; }
.server-operation-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.server-operation-head strong { font-size: 13px; }
.server-operation-percent { color: #87b8ff; font-size: 16px; font-weight: 800; white-space: nowrap; }
.server-operation-detail { margin-top: 7px; color: #b2c4df; font-size: 12px; overflow-wrap: anywhere; }
.operation-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.operation-count { padding: 9px 5px; background: #0b1524; border-radius: 8px; text-align: center; }
.operation-count strong, .operation-count small { display: block; }
.operation-count strong { font-size: 18px; color: #b7cdec; }
.operation-count small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.operation-ready strong { color: var(--green); }
.operation-errors strong { color: var(--muted); }
.operation-errors.has-errors strong { color: var(--red); }
.operation-hint { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.install-log pre { max-height: 210px; overflow: auto; padding: 10px; border-radius: 8px; background: #080f19; color: #b9cbe3; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; }
.server-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); background: rgba(8, 14, 22, .35); }
.node-action { min-height: 34px; padding: 0 11px; border: 1px solid var(--line-soft); border-radius: 9px; background: #141f2e; color: #a7b5c7; font-size: 10px; font-weight: 700; cursor: pointer; }
.node-action:hover { color: #fff; border-color: #344b69; background: #1a293b; }
.node-action.primary { color: #83b4ff; border-color: rgba(66, 133, 237, .22); background: var(--primary-soft); }
.node-action.danger { margin-left: auto; color: #c98a8e; background: transparent; }
.node-action:disabled { opacity: .45; cursor: not-allowed; }

.history-table td:nth-child(1) { min-width: 140px; color: #8fa0b4; white-space: nowrap; }
.history-table td:nth-child(2) { color: #d9e2ed; font-weight: 650; }
.history-table td:nth-child(3) { font-family: "Cascadia Code", Consolas, monospace; color: #89aee0; }
.history-table td:nth-child(4) { max-width: 560px; color: var(--muted); line-height: 1.45; white-space: normal; word-break: break-word; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 11, .78); backdrop-filter: blur(10px); }
.modal-card {
  position: relative;
  z-index: 1;
  width: min(660px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #2b3d56;
  border-radius: 21px;
  background: #101824;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .58);
  animation: modal-in .18s ease both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.compact-modal { width: min(590px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 24px 19px; border-bottom: 1px solid var(--line-soft); }
.modal-head h2 { margin: 4px 0 3px; font-size: 22px; letter-spacing: -.025em; }
.modal-head p { max-width: 560px; margin: 0; color: var(--muted); font-size: 11px; }
.modal-body { padding: 21px 24px; overflow-y: auto; scrollbar-width: thin; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 16px 24px; border-top: 1px solid var(--line-soft); background: rgba(8, 14, 22, .26); }
.form-stack { display: grid; gap: 17px; }
.field-row { display: flex; gap: 12px; }
.grow { flex: 1; }
.port-field { width: 125px; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 46px !important; }
.reveal-button { position: absolute; top: 5px; right: 5px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.reveal-button:hover { color: #fff; background: rgba(109, 141, 184, .10); }
.reveal-button svg { width: 17px; height: 17px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid rgba(45, 212, 163, .17); border-radius: 11px; background: rgba(45, 212, 163, .055); }
.notice > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--green); }
.notice strong, .notice small { display: block; }
.notice strong { color: #b9d9ce; font-size: 10px; }
.notice small { margin-top: 2px; color: #718c84; font-size: 9px; }
.vk-result-list { display: grid; gap: 8px; }
.vk-result-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border: 1px solid rgba(243, 105, 112, .20); border-radius: 11px; background: rgba(243, 105, 112, .055); }
.vk-result-item strong { color: #f0d6d8; font: 600 11px/1.4 "Cascadia Code", Consolas, monospace; }
.vk-result-empty { padding: 22px 14px; border: 1px solid rgba(45, 212, 163, .18); border-radius: 12px; background: rgba(45, 212, 163, .05); color: #95d9c3; text-align: center; font-size: 11px; }

.settings-body { display: grid; gap: 14px; }
.settings-page { max-width: 1080px; overflow: hidden; }
.settings-page-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; padding: 20px; }
.settings-page-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 15px 20px; border-top: 1px solid var(--line-soft); background: rgba(8, 14, 22, .26); }
.settings-page-actions .save-state { margin-right: auto; }
.settings-section { padding: 16px; border: 1px solid var(--line-soft); border-radius: 14px; background: rgba(9, 16, 25, .45); }
.settings-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.settings-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: #78adff; font-size: 11px; font-weight: 800; }
.settings-section-title strong, .settings-section-title small { display: block; }
.settings-section-title strong { font-size: 12px; }
.settings-section-title small { color: var(--muted); font-size: 9px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.toggle-row:last-child { padding-bottom: 0; border-bottom: 0; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { color: #cbd5e2; font-size: 10px; }
.toggle-row small { margin-top: 2px; color: var(--muted-2); font-size: 9px; }
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 37px;
  height: 21px;
  appearance: none;
  border: 1px solid #344257;
  border-radius: 99px;
  background: #1b2635;
  cursor: pointer;
  transition: .16s ease;
}
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #8491a4; transition: .16s ease; }
.switch:checked { border-color: #397cf0; background: #2d6edb; }
.switch:checked::after { left: 19px; background: white; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid #2a3a50; border-radius: 11px; background: #0b121c; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.segmented input:checked + span { color: #fff; background: #1d365a; box-shadow: 0 4px 15px rgba(0, 0, 0, .18); }
.save-state { margin-right: auto; color: var(--muted); font-size: 10px; }

.nav-status-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #405068; }
.nav-status-dot.enabled { background: var(--green); box-shadow: 0 0 0 4px rgba(45, 212, 163, .09); }
.traffic-actions { justify-content: flex-end; gap: 9px; margin-bottom: 12px; }
.traffic-actions .filter-select { min-width: 260px; }
.period-switch { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line-soft); border-radius: 10px; background: #0b131e; }
.period-switch button { min-width: 88px; height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.period-switch button.active { color: #f4f8ff; background: #203653; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
.traffic-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.traffic-metrics .metric-card { padding: 14px; box-shadow: none; }
.traffic-metrics .metric-card strong { margin-top: 3px; }
.traffic-metrics .bot-metric strong { color: #ee858a; }
.traffic-table-panel { overflow: hidden; }
.live-table-controls { display: flex; align-items: center; gap: 12px; }
.traffic-view-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line-soft); border-radius: 9px; background: rgba(7, 14, 23, .45); }
.traffic-view-switch button { min-height: 27px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 700; cursor: pointer; }
.traffic-view-switch button.active { background: #233f68; color: #f2f7ff; }
.live-table-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; border-bottom: 1px solid var(--line-soft); }
.live-table-head strong, .live-table-head small { display: block; }
.live-table-head strong { color: #dfe7f2; font-size: 11px; }
.live-table-head small { margin-top: 2px; color: var(--muted-2); font-size: 9px; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: #8fa0b5; font-size: 9px; font-weight: 700; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(45, 212, 163, .08); }
.traffic-events-table { min-width: 960px; }
.traffic-events-table td { height: 48px; }
.traffic-events-table tr { box-shadow: inset 3px 0 transparent; }
.traffic-events-table tr.traffic-bot-row { box-shadow: inset 3px 0 rgba(239, 95, 103, .78); }
.traffic-events-table tr.traffic-human-row { box-shadow: inset 3px 0 rgba(45, 212, 163, .65); }
.traffic-time strong, .traffic-time small, .traffic-visitor strong, .traffic-visitor small, .traffic-source strong, .traffic-source small, .traffic-event-status small { display: block; }
.traffic-time strong { color: #e8eef7; font: 600 10px/1.3 "Cascadia Code", Consolas, monospace; }
.traffic-time small, .traffic-visitor small, .traffic-source small, .traffic-event-status small { margin-top: 2px; max-width: 220px; overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.traffic-domain, .traffic-path { display: block; max-width: 210px; overflow: hidden; color: #87b3ec; font: 500 9px/1.35 "Cascadia Code", Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.traffic-path { color: #aab6c6; }
.traffic-visitor strong, .traffic-source strong { color: #cdd7e4; font-size: 9px; font-weight: 600; }
.traffic-event-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 8px; font-weight: 800; }
.traffic-event-badge.unique { color: var(--green); background: var(--green-soft); }
.traffic-event-badge.repeat { color: #9aacbf; background: rgba(132, 151, 176, .10); }
.traffic-event-badge.bot { color: #f17f85; background: var(--red-soft); }
.bot-settings { max-width: 920px; overflow: hidden; }
.bot-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px; border-bottom: 1px solid var(--line-soft); }
.bot-setting-head h3 { margin: 0 0 4px; font-size: 17px; }
.bot-setting-head p { margin: 0; color: var(--muted); font-size: 11px; }
.bot-rules { display: grid; gap: 9px; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.bot-rules span { position: relative; padding-left: 19px; color: #aebbd0; font-size: 11px; }
.bot-rules span::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.bot-action-grid { display: grid; grid-template-columns: 1fr 1.5fr; align-items: end; gap: 14px; padding: 20px 22px; }

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 20%, rgba(42, 101, 197, .22), transparent 28rem),
    rgba(5, 9, 15, .97);
  backdrop-filter: blur(16px);
}
.auth-card {
  width: min(420px, 100%);
  padding: 30px;
  border: 1px solid #2a3d57;
  border-radius: 22px;
  background: linear-gradient(145deg, #121c2a, #0c131e);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .58);
  text-align: center;
}
.auth-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 17px;
  color: white;
  background: linear-gradient(145deg, #5aa0ff, #2e70ef);
  box-shadow: 0 12px 32px rgba(49, 120, 241, .3);
}
.auth-logo svg { width: 25px; height: 25px; stroke-width: 2.2; }
.auth-card h2 { margin: 5px 0 5px; font-size: 25px; letter-spacing: -.03em; }
.auth-card > p { max-width: 340px; margin: 0 auto 21px; color: var(--muted); font-size: 11px; }
.auth-card .field { text-align: left; }
.auth-card .auth-submit { width: 100%; margin-top: 15px; }
.auth-card > small { display: block; margin-top: 14px; color: var(--muted-2); font-size: 9px; }
.auth-card .auth-error { margin: 9px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--red-soft); color: #f2a1a6; font-size: 10px; text-align: left; }

.toast-region { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: min(390px, calc(100vw - 32px)); max-height: 75vh; overflow-y: auto; display: grid; gap: 9px; pointer-events: none; scrollbar-width: thin; }
.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid #31445d;
  border-radius: 13px;
  background: rgba(20, 30, 44, .97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .38);
  animation: toast-in .22s ease both;
  pointer-events: auto;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: #75aaff; font-weight: 800; }
.toast.success .toast-icon { background: var(--green-soft); color: var(--green); }
.toast.error .toast-icon { background: var(--red-soft); color: var(--red); }
.toast.warning .toast-icon { background: var(--amber-soft); color: var(--amber); }
.toast strong, .toast small { display: block; }
.toast strong { color: #e1e8f1; font-size: 11px; }
.toast small { margin-top: 1px; color: var(--muted); font-size: 10px; }
.toast-close { padding: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; }

@media (max-width: 1440px) {
  .purchase-form { grid-template-columns: 1.25fr .8fr 110px 1.6fr; }
  .purchase-button { grid-column: 4; margin-top: 0; }
  .target-field { grid-column: 1 / 4; }
  .servers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
  :root { --sidebar-width: 220px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .welcome-row { grid-template-columns: 1fr; gap: 20px; }
  .system-card { width: min(460px, 100%); }
  .purchase-form { grid-template-columns: 1.4fr 1fr 110px; }
  .target-field { grid-column: 1 / 4; }
  .purchase-button { grid-column: 1 / 4; margin-top: 0; }
  .api-state { display: none; }
  .traffic-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .settings-page-body { grid-template-columns: 1fr; }
  :root { --topbar-height: 72px; }
  .sidebar { transform: translateX(-102%); width: min(285px, 86vw); transition: transform .22s ease; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 55; display: block; border: 0; background: rgba(2, 6, 11, .68); opacity: 0; visibility: hidden; transition: .2s ease; }
  body.sidebar-open .sidebar-scrim { opacity: 1; visibility: visible; }
  .workspace { margin-left: 0; }
  .mobile-menu { display: grid !important; }
  .topbar { padding-inline: 17px; }
  .topbar p { display: none; }
  .content { padding: 27px 17px; }
  .welcome-row h2 { font-size: 36px; }
  .view-head { align-items: flex-start; }
  .view-head .button span { display: none; }
  .view-head .button { width: 44px; padding: 0; }
  .table-toolbar { flex-wrap: wrap; }
  .search-box { flex: 1; width: auto; min-width: 220px; }
  .toolbar-count { width: 100%; margin-left: 0; }
  .bulk-bar { flex-wrap: wrap; }
  .bulk-bar span { min-width: 60%; }
  .server-summary { grid-template-columns: auto 1fr; }
  .server-summary .capacity { grid-column: 2; justify-self: start; }

  .domains-table thead { display: none; }
  .domains-table, .domains-table tbody, .domains-table tr, .domains-table td { display: block; width: 100%; }
  .domains-table tbody { padding: 10px; }
  .domains-table tr { position: relative; margin-bottom: 10px; padding: 14px 44px 14px 45px; border: 1px solid var(--line-soft); border-radius: 13px; background: rgba(10, 17, 26, .7); }
  .domains-table tr:last-child { margin-bottom: 0; }
  .domains-table td { padding: 4px 0; border: 0; }
  .domains-table .check-column { position: absolute; left: 15px; top: 19px; width: auto; }
  .domains-table td::before { content: attr(data-label); display: inline-block; min-width: 93px; color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; vertical-align: top; }
  .domains-table .check-column::before, .domains-table td:nth-child(2)::before, .domains-table td:last-child::before { display: none; }
  .domains-table td:nth-child(2) { margin-bottom: 7px; }
  .domains-table .domain-usage { min-width: 0; }
  .domains-table .role-input { width: 62px; }
  .domains-table .target-link { display: inline-block; max-width: calc(100% - 100px); vertical-align: middle; }
  .domains-table .dual-state { display: inline-flex; }
  .domains-table .status-badge { display: inline-flex; }
  .domains-table .domain-status-stack { display: inline-flex; min-width: 0; }
  .domains-table td:last-child { position: absolute; right: 10px; top: 12px; }
  .row-actions { flex-direction: column; }
}

@media (max-width: 600px) {
  .topbar h1 { font-size: 16px; }
  .balance-chip { display: none; }
  .topbar-actions { gap: 7px; }
  .icon-button { width: 40px; height: 40px; }
  .notification-panel { position: fixed; top: 67px; right: 12px; left: 12px; width: auto; }
  .connection-banner { width: calc(100% - 24px); grid-template-columns: auto 1fr; }
  .connection-banner .button { grid-column: 1 / -1; width: 100%; }
  .content { padding: 23px 12px; }
  .welcome-row { margin-bottom: 21px; }
  .welcome-row h2 { font-size: 31px; }
  .welcome-row > div > p { font-size: 13px; }
  .system-card { min-height: 88px; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .metric-card { align-items: flex-start; padding: 12px; }
  .metric-icon { width: 34px; height: 34px; }
  .metric-card strong { font-size: 19px; }
  .metric-card small { font-size: 8px; }
  .metric-card em { display: none; }
  .panel { border-radius: 17px; }
  .panel-head { display: block; }
  .price-hint { display: block; max-width: none; margin-top: 9px; text-align: left; }
  .purchase-form { grid-template-columns: 1fr; }
  .target-field, .purchase-button { grid-column: auto; }
  .purchase-button { width: 100%; }
  .panel-head.inline { display: flex; align-items: flex-start; }
  .panel-head.inline p { display: none; }
  .job-top { display: block; }
  .job-actions { justify-content: space-between; margin-top: 9px; }
  .job-domain { display: grid; gap: 3px; }
  .job-domain span { text-align: left; }
  .view-head h2 { font-size: 28px; }
  .view-head p { font-size: 12px; }
  .table-toolbar { padding: 12px; }
  .search-box { min-width: 100%; }
  .filter-select { width: 100%; }
  .bulk-bar .button { width: 100%; }
  .server-summary { grid-template-columns: 1fr; text-align: center; }
  .server-summary-icon, .server-summary .capacity { grid-column: auto; justify-self: center; }
  .server-card-head { display: block; }
  .server-card-head .status-badge { margin: 12px 0 0 53px; }
  .server-stats { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .server-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .server-actions { display: grid; grid-template-columns: 1fr; }
  .node-action.danger { margin-left: 0; }
  .field-row { display: grid; }
  .port-field { width: auto; }
  .modal { padding: 0; align-items: end; }
  .modal-card { width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; animation-name: sheet-in; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(30px); } }
  .modal-head, .modal-body, .modal-actions { padding-left: 18px; padding-right: 18px; }
  .modal-actions .button { flex: 1; }
  .save-state { display: none; }
  .toggle-row { align-items: flex-start; }
  .traffic-metrics { grid-template-columns: 1fr 1fr; }
  .traffic-actions { display: grid; grid-template-columns: 1fr; }
  .traffic-actions .filter-select { min-width: 0; }
  .bot-action-grid { grid-template-columns: 1fr; }
  .bot-setting-head { padding: 18px; }
  .bot-rules, .bot-action-grid { padding-left: 18px; padding-right: 18px; }
  .toast-region { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.settings-switch-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-soft)}
.settings-switch-row>span{display:grid;gap:4px}.settings-switch-row small{color:var(--muted);line-height:1.45}

.selection-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); }
.select-count-control { display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: 12px; }
.select-count-control input { width: 76px; height: 36px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--text); }
.selection-hint { flex: 1; font-size: 12px; color: var(--muted); }
.archive-notice { margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; color: #a8bbd2; background: var(--panel); font-size: 13px; }

/* Readable, stable tables and batch controls. */
:root { --muted-2: #95a4b9; }
.data-table th { font-size: 11px; color: #9aaec7; }
.data-table td { font-size: 13px; }
.domains-table tbody { overflow-anchor: none; }
.domain-name strong { font-size: 13px; }
.domain-name small, .target-link, .domain-click-details { font-size: 11px; }
.target-link { max-width: 270px; }
.used-check { font-size: 12px; gap: 7px; }
.role-editor { width: 124px; flex-basis: 124px; height: 34px; }
.role-editor input.role-input { width: 91px; height: 32px !important; line-height: 32px; font-size: 12px; }
.role-editor svg { width: 13px; height: 13px; }
.domain-usage .role-editor { --role-hue: 210; width: auto; min-width: 100px; max-width: 240px; flex: 0 1 auto; height: 34px; gap: 6px; padding: 0 10px; border-radius: 11px; border-color: #2b3e55; }
.domain-usage .role-editor.has-role { color: hsl(var(--role-hue) 65% 80%); background: hsl(var(--role-hue) 40% 18%); border-color: hsl(var(--role-hue) 35% 35%); }
.domain-usage .role-editor input.role-input { width: auto; min-width: 40px; max-width: 175px; color: inherit; font-weight: 600; text-overflow: ellipsis; }
.role-clear { display: none; width: 20px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit; font-size: 17px; cursor: pointer; }
.has-role .role-clear { display: block; }
.role-clear:hover { background: #ffffff18; }
.table-toolbar { flex-wrap: wrap; }
.table-toolbar .filter-select { min-width: 140px; flex: 1; }
.table-toolbar .search-box { flex: 2; min-width: 240px; }
.domain-usage.save-failed .role-editor { border-color: var(--red); }
.status-badge, .mini-state { font-size: 11px; }
.domain-selected { box-shadow: inset 3px 0 var(--primary); background: rgba(59, 130, 246, .07) !important; }
.row-action, .copy-domain-button { min-width: 34px; min-height: 34px; }
.bulk-bar {
  position: fixed; z-index: 45; left: calc(var(--sidebar-width) + 28px); right: 28px; bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px; border: 1px solid #355782; border-radius: 16px;
  background: #111e30; box-shadow: 0 12px 48px #0009;
}
.bulk-bar.inactive { display: none; }
.bulk-bar strong { font-size: 13px; white-space: nowrap; }
.bulk-selection { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.bulk-selection .text-button { font-size: 12px; }
.bulk-role input { width: 160px; height: 36px !important; font-size: 12px; }
.bulk-bar .button { font-size: 12px; min-height: 36px; width: auto; }
#view-domains { padding-bottom: calc(var(--bulk-bar-height, 0px) + 28px); }
.traffic-time strong, .traffic-visitor strong, .traffic-source strong { font-size: 12px; }
.traffic-time small, .traffic-visitor small, .traffic-source small, .traffic-event-status small { font-size: 11px; color: #95a4b9; }
.traffic-domain, .traffic-path, .traffic-event-badge { font-size: 11px; }
.traffic-events-table td { height: 62px; }
.live-table-head { flex-wrap: wrap; gap: 12px; }
.live-table-controls { flex-wrap: wrap; }
.live-table-head strong { font-size: 14px; }
.live-table-head small, .live-indicator { font-size: 11px; }
.period-switch button, .traffic-view-switch button { font-size: 12px; min-height: 34px; }
.toolbar-count, .field > span:first-child, .settings-section-title strong { font-size: 13px; }
.field small, .save-state, .settings-section-title small, .job-top small, .job-domain span { font-size: 12px; }
.job-top strong { font-size: 15px; }
.button { font-size: 13px; }
.server-stat small { font-size: 10px; }
.server-stat strong, .server-card-message { font-size: 12px; }
.toast strong { font-size: 13px; }
.toast small { font-size: 12px; }
body:has(#domainBulkBar:not(.inactive)):has(#view-domains.active) .toast-region { bottom: calc(var(--bulk-bar-height, 0px) + 32px); }
.cloudflare-settings { margin-top: 24px; }
.telegram-settings { margin-top:24px; }
.telegram-settings .settings-page-body { grid-template-columns:1fr; }
.telegram-settings .settings-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.telegram-settings .settings-section > :not(.field) { grid-column:1 / -1; }
.telegram-settings .settings-section-title { margin-bottom:0; }
.telegram-options { margin:0; padding:14px; border:1px solid var(--border,#26384c); border-radius:12px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.telegram-options legend { color:var(--text-muted,#95a4b9); font-size:12px; padding:0 6px; }
.telegram-options label { display:flex; align-items:center; gap:10px; font-size:12px; line-height:1.5; }
.telegram-options input { width:17px; height:17px; flex:none; }
.telegram-options label { padding:8px; border-radius:8px; cursor:pointer; }
.telegram-options label:hover { background:rgba(76,145,255,.06); }
.telegram-options label:has(input:checked) { background:rgba(76,145,255,.08); }
.telegram-options strong,.telegram-options small { display:block; }
.telegram-options small { color:var(--text-muted,#95a4b9); font-size:11px; font-weight:400; }
.telegram-presets { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.telegram-presets > strong { margin-right:auto; font-size:13px; }
.telegram-preview { display:flex; align-items:center; gap:24px; padding:14px 18px; border:1px solid var(--border,#26384c); border-radius:12px; background:rgba(76,145,255,.035); }
.telegram-preview > span { color:var(--text-muted,#95a4b9); font-size:12px; }
.telegram-preview p { margin:0; font-size:12px; line-height:1.65; overflow-wrap:anywhere; }
.telegram-preview small { color:var(--text-muted,#95a4b9); }
@media (max-width:600px) { .telegram-options { grid-template-columns:1fr; } .telegram-preview { flex-direction:column; align-items:flex-start; gap:8px; } }
@media (max-width:600px) { .telegram-settings .settings-section { grid-template-columns:1fr; } }
.telegram-status { padding:12px 0; color:var(--text-muted,#95a4b9); font-size:12px; line-height:1.7; overflow-wrap:anywhere; }
.telegram-status.error { color:#ff929c; }
.server-health { margin:0 20px 14px; font-size:11px; color:var(--text-muted,#95a4b9); line-height:1.6; }
.server-health.error { color:#ff929c; }
.server-auto-check { display:flex; align-items:center; gap:7px; margin:0 20px 12px; color:var(--text-muted,#95a4b9); font-size:12px; font-variant-numeric:tabular-nums; line-height:1.6; }
.server-auto-check::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#7d8fa8; }
.server-auto-check[data-phase="checking"] { color:#8db7ff; }
.server-auto-check[data-phase="checking"]::before { background:#5598ff; box-shadow:0 0 0 3px #5598ff1c; }
.server-auto-check[data-phase="scheduled"]::before { background:#2dccb3; }
.cloudflare-credential-actions, .cloudflare-mode-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.cloudflare-mode-actions { justify-content:space-between; margin-top:16px; }
.cloudflare-mode-note { color:var(--text-muted,#95a4b9); font-size:12px; line-height:1.7; margin:12px 0; }
.cloudflare-progress { margin-top:18px; border-top:1px solid var(--border,#26384c); padding-top:16px; }
.cloudflare-progress-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; font-size:13px; }
.cloudflare-progress-summary { display:flex; gap:14px; flex-wrap:wrap; margin:12px 0; color:var(--text-muted,#95a4b9); font-size:12px; }
.dns-progress-track { height:6px; border-radius:20px; overflow:hidden; background:#1e2e42; }
.dns-progress-track > span { display:block; height:100%; border-radius:inherit; background:var(--primary,#3b82f6); transition:width .2s; }
.cloudflare-domain-list { max-height:280px; overflow:auto; margin-top:12px; display:grid; gap:8px; }
.cloudflare-domain-row { display:grid; grid-template-columns:minmax(110px,1fr) minmax(150px,2fr); gap:12px; padding:10px; border-radius:10px; background:#0a1420; font-size:12px; overflow-wrap:anywhere; }
.cloudflare-domain-row small { color:var(--text-muted,#95a4b9); display:block; margin-top:4px; }
.server-current-domains { padding:0 20px 14px; color:var(--text-muted,#95a4b9); font-size:11px; line-height:1.6; }
.server-operation-history { margin:0 18px 16px; padding:10px 12px; border:1px solid var(--line-soft); border-radius:10px; color:var(--muted); }
.server-operation-history > summary { font-size:11px; cursor:pointer; }
.server-operation-history .operation-hint { display:block; margin-top:10px; }
.servers-grid { align-items:start; }
.server-card .server-card-head { display:flex; align-items:flex-start; gap:10px; padding:14px 14px 11px; }
.server-card .server-card-head .status-badge { margin:0; flex-shrink:0; }
.server-card .server-identity { gap:9px; }
.server-card .server-identity > span:last-child { min-width:0; }
.server-card .server-icon { width:34px; height:34px; border-radius:10px; }
.server-primary-label { margin-top:3px; color:#87b8ff; font-size:10px; font-weight:700; }
.server-card .server-current-domains { display:flex; flex-wrap:wrap; gap:7px 16px; padding:0 14px 9px; font-size:12px; }
.server-current-domains strong { color:#dce7f5; font-variant-numeric:tabular-nums; }
.server-check-line { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:3px 12px; padding:0 14px 10px; }
.server-card .server-auto-check, .server-card .server-health { margin:0; font-size:11px; }
.server-card .server-card-message { margin:0 14px 8px; padding:7px 9px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.server-card .server-operation { margin:0 14px 10px; padding:12px; }
.server-card .server-operation-history { margin:0 14px 8px; padding:7px 9px; }
.server-operation-history.has-errors > summary { color:#ff9da7; }
.server-info { margin:0 14px 9px; color:var(--muted); font-size:11px; }
.server-info > summary { cursor:pointer; }
.server-info .operation-hint { margin-top:7px; overflow-wrap:anywhere; }
.install-log-text { max-height:180px; overflow:auto; padding:9px; background:#080f19; border-radius:8px; color:#b9cbe3; white-space:pre-wrap; overflow-wrap:anywhere; font-size:11px; }
.server-card .server-actions { display:flex; flex-wrap:wrap; gap:7px; padding:10px 14px; }
.server-card .node-action { min-height:32px; }
.server-card .node-action.danger { margin-left:auto; }
@media (min-width:1180px) { .servers-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .cloudflare-credential-actions .button,.cloudflare-mode-actions .button { width:100%; } .cloudflare-domain-row { grid-template-columns:1fr; } }

/* Keep supporting text usable at 100%, including short and narrow windows. */
.brand, .sidebar-bottom { flex-shrink: 0; }
.settings-number { flex-shrink: 0; }
.settings-section-title > span:last-child { min-width: 0; }
.domain-name > span:not(.domain-name-icon) { min-width: 0; }
.domain-name strong { overflow-wrap: anywhere; max-width: 240px; }
.metric-card small, .notification-item time, .brand-copy small, .version { font-size: 11px; }
.notice small, .toggle-row small, .modal-head p, .empty-state p, .auth-card > small, .price-hint { font-size: 12px; }
.role-editor:focus-within { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
.settings-title-line, .field > .settings-title-line, .settings-switch-row > .settings-title-line { display:flex; align-items:center; gap:7px; min-width:0; }
.settings-title-line strong { min-width:0; }
.help-trigger { display:inline-grid; place-items:center; flex:0 0 auto; width:22px; height:22px; padding:0; border:1px solid #4b8fdd66; border-radius:50%; background:#3989ec16; color:#77b5ff; font:700 13px/1 Georgia,serif; cursor:help; vertical-align:middle; }
.help-trigger:hover, .help-trigger[aria-expanded="true"] { color:#b2d7ff; background:#3989ec32; border-color:#77b5ff; }
.help-trigger:focus-visible { outline:2px solid #77b5ff; outline-offset:3px; }
.help-tooltip { position:fixed; z-index:2000; width:max-content; overflow:auto; padding:13px 15px; box-sizing:border-box; border:1px solid #3d6293; border-radius:12px; background:#101e30; color:#d1deee; font-size:12px; line-height:1.6; box-shadow:0 12px 40px #0008; overflow-wrap:anywhere; white-space:pre-wrap; }
.help-tooltip[hidden] { display:none; }
.settings-help-line { display:flex; align-items:center; gap:7px; margin-top:10px; color:var(--muted); font-size:12px; }
.auto-failover-settings .settings-switch-row, .cloudflare-settings .settings-switch-row { padding:11px 12px; gap:12px; }
.auto-failover-settings .settings-title-line, .cloudflare-settings .settings-title-line { flex-wrap:wrap; }
.cloudflare-settings .settings-page-body { gap:14px; padding:16px; }
.cloudflare-settings .settings-section { padding:14px; }
.cloudflare-settings .form-stack { gap:12px; }
.cloudflare-settings .cloudflare-credential-actions, .cloudflare-mode-actions { gap:8px; }
.cloudflare-settings .button { min-height:36px; padding:0 12px; font-size:12px; }
.cloudflare-settings .save-state:empty { display:none; }
.cloudflare-progress.compact-complete { margin-top:12px; padding-top:10px; }
.cloudflare-progress.compact-complete .cloudflare-progress-head { margin-bottom:6px; }
.cloudflare-progress .job-more { margin-top:9px; font-size:12px; }
.notification-panel { max-height: calc(100dvh - 90px); overflow: hidden; }
.notification-list { max-height: min(420px, calc(100dvh - 160px)); }
.standalone-purchase .panel-head.inline p { display: block; }
@media (min-width: 821px) {
  .content { padding: 32px 28px; }
  .domains-table { table-layout: fixed; min-width: 1000px; }
  .domains-table th, .domains-table td { padding-left: 8px; padding-right: 8px; }
  .domains-table th:nth-child(1) { width: 40px; }
  .domains-table th:nth-child(2) { width: 200px; }
  .domains-table th:nth-child(3) { width: 220px; }
  .domains-table th:nth-child(5) { width: 100px; }
  .domains-table th:nth-child(6) { width: 140px; }
  .domains-table th:nth-child(7) { width: 130px; }
  .domains-table .domain-name { min-width: 0; }
  .domains-table .domain-usage { min-width: 0; }
  .domains-table .domain-usage .role-editor { flex: 1; min-width: 60px; max-width: 100px; }
  .domains-table .target-link { max-width: 100%; }
  .domains-table .status-badge { white-space: normal; line-height: 1.4; }
}
@media (max-width: 820px) {
  .bulk-bar { left: 12px; right: 12px; bottom: 12px; max-height: 38vh; overflow-y: auto; }
  .bulk-selection { flex-basis: 100%; }
  .domains-table td::before { font-size: 10px; }
  .domains-table .target-link { max-width: 100%; }
  .domains-table td:last-child { width: auto; }
  .domains-table .row-actions { align-items: flex-end; }
}
.api-panel { padding: 24px; margin-bottom: 22px; min-width: 0; }
.api-panel h2 { margin: 0 0 12px; }
.api-panel p { line-height: 1.65; color: var(--text-muted, #91a4bc); }
.api-key-form { display: grid; gap: 16px; margin: 22px 0; max-width: 760px; }
.api-key-form > button { justify-self: start; }
.api-secret { display: flex; flex-wrap: wrap; gap: 12px; border: 1px solid #3975bd; border-radius: 12px; padding: 18px; }
.api-secret strong { width: 100%; }
.api-secret input { flex: 1 1 340px; min-width: 0; font-family: monospace; }
.api-key-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid #243348; }
.api-key-row small { display: block; color: #91a4bc; margin-top: 6px; overflow-wrap: anywhere; }
.api-docs details { padding: 16px 0; border-bottom: 1px solid #243348; }
.api-docs summary { cursor: pointer; font-weight: 650; color: #a7cfff; }
.api-docs pre { overflow: auto; padding: 16px; border-radius: 10px; background: #090f18; line-height: 1.65; font-size: 13px; }
.api-docs small, .api-reference { color: #91a4bc; font-size: 12px; }
.api-docs a { color: #82b7ff; }
.purchase-target-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; cursor: pointer; }
.purchase-target-toggle input { width: 15px; height: 15px; min-height: 0; flex: 0 0 15px; accent-color: #4289ff; }
#purchaseTarget[readonly] { opacity: .8; }
@media(max-width:600px) { .api-panel { padding: 16px; }.api-key-row { align-items: flex-start; flex-direction: column; }.api-secret input { flex-basis: 100%; } }