:root {
  --bg: #f3f6fb;
  --card: #ffffff;
  --card-shadow: 0 10px 28px #8aa4c914;
  --line: #d5e0f0;
  --text: #12203a;
  --muted: #5b6f8c;
  --blue: #2563eb;
  --accent: #1d4ed8;
  --dc-border: #d5e0f0;
  --dc-green: #059669;
  --dc-amber: #d97706;
  --input-bg: #ffffff;
  --surface: #eef3fb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
body {
  font-family: Inter, system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, strong, b, label { color: var(--text); }
h1 { font-size: clamp(22px, 4vw, 28px); letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 0 0 8px; }
h3 { margin: 0; }
.muted { color: var(--muted); }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 0.9fr; }
.auth-intro { padding: 48px 56px; }
.brand, .sidebar-brand, .auth-intro__brand, .auth-card__brand {
  display: flex; gap: 10px; align-items: center; font-weight: 800;
}
.brand-mark, .brand span, .auth-card__brand span {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, #347cff, #1f5edc);
  display: grid; place-items: center; color: #fff; font-weight: 800;
  box-shadow: 0 10px 24px #1857de57;
}
.eyebrow { color: #7dd3c7; letter-spacing: .16em; font-size: 11px; font-weight: 800; }
.auth-intro h1 { font-size: clamp(28px, 4vw, 44px); margin: 12px 0; }
.auth-benefits { display: grid; gap: 16px; margin: 28px 0 36px; }
.auth-benefits div { display: grid; gap: 2px; }
.auth-benefits b { font-size: 15px; }
.auth-benefits small, .auth-intro p { color: var(--muted); }
.steps { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13px; }
.steps i {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px;
  border-radius: 50%; background: #eaf2ff; color: var(--blue); font-style: normal; font-size: 12px; font-weight: 800;
}
.auth-panel { display: grid; place-items: center; padding: 32px; }
.auth-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: 20px; padding: 28px;
  box-shadow: 0 18px 42px #8aa4c91f;
}
.auth-mode { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: 999px; padding: 4px; margin: 16px 0 20px; }
.auth-mode button { border: 0; background: transparent; color: var(--muted); padding: 10px; border-radius: 999px; cursor: pointer; }
.auth-mode button.active { background: var(--blue); color: #fff; font-weight: 700; }

label { display: grid; gap: 6px; font-size: 13px; margin-bottom: 12px; }
input, textarea, select {
  width: 100%; background: var(--input-bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 12px;
}
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; padding: 0; margin: 0; flex: none;
  accent-color: #347cff; border-radius: 4px;
}
input[type="color"], .color-field__swatch {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 3px;
  cursor: pointer;
  flex: none;
}
input[type="color"]::-webkit-color-swatch-wrapper,
.color-field__swatch::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch,
.color-field__swatch::-webkit-color-swatch {
  border: 0;
  border-radius: 7px;
}
.color-field { margin-bottom: 12px; }
.color-field__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
}
.color-field__swatch,
input[type="color"].color-field__swatch {
  background: #fff;
  border: 1px solid var(--line);
}
.color-field__hex {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.button {
  border: 0; border-radius: 10px; padding: 11px 16px; cursor: pointer; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.button.primary {
  color: #fff; background: linear-gradient(135deg, #347cff, #1f5edc);
  border: 1px solid #689fff57; box-shadow: 0 10px 28px #1857de57;
}
.button.primary:hover { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.button.secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.text-button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 8px 0; }
textarea { min-height: 120px; resize: vertical; }
.error { color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; margin: 8px 0 12px; font-size: 13px; }
.error:empty { display: none; }
.prompt { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 12px 14px; margin: 8px 0 16px; font-size: 13px; line-height: 1.45; }
.prompt b { color: #78350f; }
.prompt ol { margin: 8px 0 0; padding-left: 18px; }
.prompt li { margin: 4px 0; }
.sites-management-card__domain--pending { color: #7a899f !important; }

.header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.header-gear {
  width: 40px; height: 40px; border-radius: 10px; color: #5b6f8c;
  display: grid; place-items: center; background: #f3f6fb; border: 1px solid var(--line);
}
.header-gear svg { width: 18px; height: 18px; }
.header-gear:hover { color: var(--text); background: #fff; }

.dash-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 28px 32px; margin-bottom: 16px; overflow: hidden;
  box-shadow: var(--card-shadow);
  position: relative;
}
.dash-hero::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px;
  border-radius: 999px; background: #2563eb;
}
.dash-hero__copy { padding-left: 12px; min-width: 0; }
.dash-hero__hello { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.dash-hero h1 { margin: 0 0 8px; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.04em; }
.dash-hero__copy > p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.dash-hero__art { flex: none; width: 150px; }
.dash-hero__art svg { width: 100%; height: auto; display: block; }

.dc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.dc-metric, .card, .sites-management-card, .dns-connection, .commission-sync {
  border: 1px solid var(--dc-border);
  background: var(--card);
  box-shadow: var(--card-shadow);
  min-width: 0;
}
.dc-metric {
  border-radius: 16px; min-height: 0; padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.dc-metric:hover { transform: translateY(-2px); border-color: #93b4ea; box-shadow: 0 12px 28px #8aa4c91f; }
.dc-metric-head { display: flex; align-items: center; gap: 10px; }
.dc-metric-icon {
  color: #2563eb; background: #eef4ff; border: 0;
  border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; flex: none;
}
.dc-metric-icon svg { width: 16px; height: 16px; }
.dc-metric.green .dc-metric-icon { color: #059669; background: #ecfdf5; }
.dc-metric.amber .dc-metric-icon { color: #d97706; background: #fffbeb; }
.dc-metric small { color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.dc-metric strong { font-size: 28px; letter-spacing: -0.04em; line-height: 1; }
.dc-metric em { color: var(--muted); font-style: normal; font-size: 12px; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .9fr);
  gap: 16px;
  align-items: start;
}
.dash-panel { padding: 20px 22px; }
.dash-panel h2 { margin: 0; font-size: 16px; letter-spacing: -0.02em; }
.dash-panel__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.dash-panel__head .muted { margin: 0 0 4px; font-size: 12px; }
.dash-panel__head a { font-size: 13px; font-weight: 700; white-space: nowrap; }
.dash-empty { margin: 24px 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 52ch; }
.dash-earn-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.dash-earn-row:first-of-type { border-top: 0; }
.dash-earn-row b { display: block; font-size: 13px; }
.dash-earn-row .muted { font-size: 12px; }
.dash-actions h2 { margin-bottom: 12px; }
.dash-action {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 10px; border-radius: 12px; color: inherit; text-decoration: none;
}
.dash-action:hover { background: #f5f8ff; }
.dash-action__icon {
  width: 38px; height: 38px; border-radius: 12px; background: #eef4ff; color: #2563eb;
  display: grid; place-items: center;
}
.dash-action__icon svg { width: 16px; height: 16px; }
.dash-action b { display: block; font-size: 13px; }
.dash-action small { color: var(--muted); font-size: 12px; }
.dash-action__go { color: #94a3b8; font-size: 18px; line-height: 1; }

.portal-shell { min-height: 100vh; min-width: 0; max-width: 100%; }
.sidebar {
  background: #fff;
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 28px #8aa4c912;
  width: 216px; z-index: 40;
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0;
}
.sidebar-brand { padding: 18px 14px 10px; gap: 8px; }
.sidebar-brand strong { font-size: 15px; }
.sidebar nav { flex: 1; padding: 10px 8px; overflow: auto; }
.sidebar nav p {
  letter-spacing: 1.6px; color: #8b9bb3; margin: 14px 8px 6px; font-size: 9px; font-weight: 800;
}
.sidebar nav a, .logout {
  color: #3d5273; background: 0 0; border: 0; border-radius: 7px;
  align-items: center; gap: 10px; width: 100%; min-height: 41px; margin: 2px 0;
  padding: 0 10px; font-size: 12px; font-weight: 600; display: flex; cursor: pointer;
}
.sidebar nav a svg, .logout svg { width: 16px; height: 16px; flex: none; }
.sidebar nav a:hover, .sidebar nav a.active {
  color: #12203a; background: #eef4ff;
}
.sidebar nav a.active { box-shadow: inset 3px 0 #2563eb; }
.sidebar-user { padding: 8px 14px 4px; }
.sidebar-user b { display: block; font-size: 12px; }
.sidebar-user small { color: var(--muted); font-size: 11px; word-break: break-all; }
.logout { border-top: 1px solid var(--line); border-radius: 0; height: 50px; padding-left: 16px; color: #dc2626; }

.content { min-height: 100vh; margin-left: 216px; min-width: 0; }
.content > header {
  position: sticky; top: 0; z-index: 20;
  min-height: 68px; padding: 10px 20px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 1px 0 #e2eaf4;
}
.menu-toggle {
  display: none; color: var(--text); background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; width: 36px; height: 36px; place-items: center; cursor: pointer;
}
.header-brand { margin-right: auto; min-width: 0; }
.header-brand b { display: block; font-size: 17px; letter-spacing: -0.025em; }
.header-brand span { color: var(--muted); font-size: 10px; }
.header-cta {
  width: auto; min-height: 40px; padding-inline: 20px; font-size: 13px; flex: none;
  letter-spacing: .01em;
}
.header-site-picker {
  margin: 0;
  min-width: min(100%, 220px);
  max-width: 280px;
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.header-site-picker select {
  margin-top: 4px;
  padding: 8px 10px;
  min-height: 38px;
}
.section-heading { margin: 22px 0 6px; font-size: 15px; }
.content > main {
  min-width: 0; max-width: 100%;
  min-height: calc(100vh - 68px);
  padding: 16px 28px 40px;
  background: var(--bg);
}
.page { width: 100%; max-width: none; min-width: 0; }
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 35; border: 0;
  background: #05112a9e; backdrop-filter: blur(3px);
}

.sites-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 13px;
  align-items: stretch;
}
.sites-management-card.is-current { border-color: #4f8dff99; box-shadow: 0 0 0 1px #4f8dff55; }
.site-switch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.site-switch-card {
  text-align: left;
  color: var(--text);
  background: #071a38;
  border: 1px solid #1f477a;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 4px;
  cursor: pointer;
}
.site-switch-card span, .site-switch-card em { color: var(--muted); font-style: normal; font-size: 12px; }
.site-switch-card.is-on { border-color: #4f8dff; background: #0d2c5c; }
.site-edit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  background: #071a38;
}
.site-edit-bar span { color: var(--muted); font-size: 13px; }
.sites-management-card {
  border-radius: 16px; min-height: 260px; padding: 14px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sites-management-card:before {
  content: ""; position: absolute; top: 0; left: 20px; right: 20px; height: 3px;
  border-radius: 0 0 999px 999px; background: linear-gradient(90deg, #2868dc, #00cfd7);
}
.sites-management-card:hover { transform: translateY(-2px); border-color: #6395ed4d; }
.sites-management-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 6px; }
.sites-management-card__identity { min-width: 0; }
.sites-management-card__identity h3 { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sites-management-card__identity span, .sites-management-card__domain {
  color: #4f8dff; display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sites-management-card__badges { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.sites-card-msg {
  width: 32px; height: 32px; padding: 0; border-radius: 999px;
  color: #1d4ed8; background: #eef4ff; border: 1px solid var(--line);
  display: grid; place-items: center; cursor: pointer;
}
.sites-card-msg svg { width: 15px; height: 15px; }
.sites-card-msg:hover { background: #dbeafe; color: #1e40af; }
.site-msg { display: grid; gap: 12px; }
.site-msg h2 { margin: 0 36px 0 0; }
.site-msg label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.site-msg textarea { width: 100%; min-height: 96px; resize: vertical; }
.site-msg__thread {
  display: grid; gap: 8px; max-height: min(42vh, 360px); overflow: auto;
  padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafc;
}
.site-msg__bubble { border-radius: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); }
.site-msg__bubble small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; margin-bottom: 4px; }
.site-msg__bubble p { margin: 0; font-size: 13px; white-space: pre-wrap; }
.site-msg__bubble--admin { background: #ecfdf5; border-color: #a7f3d0; }
.site-msg__bubble--admin small { color: #047857; }
.site-msg__bubble--user { background: #eff6ff; border-color: #bfdbfe; }
.sites-status {
  border-radius: 999px; min-height: 25px; padding: 5px 9px; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 5px;
}
.sites-status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sites-status--active { color: #72e9bd; background: #188e692e; border: 1px solid #28d59a47; }
.sites-status--pending { color: #f2c86b; background: #9a630f2e; border: 1px solid #f1bc4b47; }
.sites-management-card__meta { display: grid; gap: 10px; margin: auto 0 15px; padding-top: 22px; }
.sites-management-card__meta > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.sites-management-card__meta dt { color: #73829b; }
.sites-management-card__meta dd { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sites-management-card > footer {
  border-top: 1px solid var(--line); margin-top: auto; padding-top: 11px;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.sites-card-actions a, .sites-card-actions button {
  color: #1d4ed8; background: #eef4ff; border: 1px solid var(--line); border-radius: 7px;
  min-height: 36px; padding: 0 10px; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.sites-card-actions .danger { color: #ff9aa7; border-color: #ff667857; background: #7d192e38; width: 42px; margin-left: auto; }

.card { border-radius: 16px; padding: 16px; }
.row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.badge { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #102a22; color: #34d399; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.manager-lead { margin: 0 0 16px; max-width: 72ch; }
.manager-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
}
.site-picker { min-width: min(100%, 280px); max-width: 420px; margin: 0; flex: 1; }
.theme-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 0;
}
.theme-toolbar .button { width: auto; }
.editor-form, .manager-card {
  width: 100%;
  max-width: none;
  margin-top: 0;
  padding: 22px 24px 20px;
}
.editor-form h2, .manager-card h2 { font-size: 15px; letter-spacing: .01em; margin: 0 0 6px; }
.editor-panel { min-width: 0; }
.editor-form > * + .editor-panel,
.editor-form > * + .editor-split,
.editor-form > * + .editor-actions {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.editor-look {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px 18px;
}
.editor-look .span-2, .editor-look .font-preview { grid-column: 1 / -1; }
.social-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 18px;
  margin-top: 12px;
}
.social-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.avatar-picker-wrap { margin: 8px 0 4px; }
.avatar-picker-label { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.avatar-picker {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 10px 0 4px;
}
.avatar-choice {
  width: 44px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 50%;
  background: var(--surface); cursor: pointer; overflow: hidden; position: relative;
}
.avatar-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-choice.is-on { border-color: #60a5fa; box-shadow: 0 0 0 3px #2563eb55; }
.avatar-choice--upload {
  width: auto; min-width: 44px; height: 44px; padding: 0 10px 0 0; border-radius: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}
.avatar-choice--upload img, .avatar-choice--upload .avatar-plus {
  width: 40px; height: 40px; border-radius: 50%;
}
.avatar-plus {
  width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #93c5fd;
}
.avatar-choice--upload small { color: var(--muted); font-size: 11px; padding-right: 6px; white-space: nowrap; }
.editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.editor-split > .card { margin: 0; }
.editor-split .widget-grid { grid-template-columns: 1fr; }
.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0 0;
}
.widget-grid .check {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  min-height: 54px;
  align-items: center;
}
.page-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 8px 0; }
.page-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; margin-bottom: 0; }
.page-row input[type="checkbox"] { width: 18px; height: 18px; }
.editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
}
.editor-actions__note { margin: 0; flex: 1; min-width: 180px; }
.editor-actions__buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }

.site-wizard {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.config-steps {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 12px;
}
.config-steps button {
  color: #5b6f8c;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 650;
  display: flex;
  cursor: pointer;
}
.config-steps b {
  background: #eaf2ff;
  color: #2563eb;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 11px;
  display: grid;
  flex: none;
}
.config-steps button.active {
  color: #fff;
  background: #2563eb;
  font-weight: 700;
}
.config-steps button.active b,
.config-steps button.complete b {
  background: #fff;
  color: #1d4ed8;
}
.config-steps button.complete {
  color: #1d4ed8;
}
.config-steps button.locked {
  opacity: .42;
  cursor: not-allowed;
}
.wizard-step { display: none; }
.wizard-step.is-on { display: block; }
.wizard-step > header { margin-bottom: 16px; }
.wizard-step > header h2 {
  font-size: 22px;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.wizard-step > header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.editor-form.config-panel { margin-top: 0; }
.config-footer button[hidden],
.config-footer a[hidden] { display: none !important; }
.editor-form > .wizard-step + .wizard-step,
.editor-form > .config-footer {
  margin-top: 0;
}
.loader-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 14px;
}
.loader-choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.loader-choice strong { font-size: 14px; }
.loader-choice span { color: var(--muted); font-size: 12px; }
.loader-choice.is-on {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px #2563eb55;
}
.loader-choice .theme-loader {
  background: var(--t-nav, #0b1220);
  border-radius: 12px;
  overflow: hidden;
}
.loader-colors { margin-top: 4px; }
.tab-style-grid, .bot-style-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 14px;
}
.style-choice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.style-choice strong { font-size: 13px; }
.style-choice span { color: var(--muted); font-size: 12px; }
.style-choice.is-on {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px #2563eb55;
}
.landing-page-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 8px;
  font-weight: 700;
}
.landing-style-grid.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.landing-style-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 4px 0 14px;
}
@media (min-width: 900px) {
  .landing-style-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.style-choice--landing {
  gap: 10px;
}
.style-choice--landing > strong {
  font-size: 14px;
}
.landing-preview {
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 168px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #0b1220;
  position: relative;
  color: #e2e8f0;
  font-size: 9px;
  line-height: 1.25;
}
.landing-preview strong,
.landing-preview b,
.landing-preview span,
.landing-preview em,
.landing-preview u,
.landing-preview i {
  font-style: normal;
  text-decoration: none;
  font-weight: 600;
}
.landing-preview__brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.landing-preview__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  background: #07111fd9;
  border-bottom: 1px solid #94a3b833;
}
.landing-preview__links {
  display: none;
  gap: 6px;
  margin-left: auto;
  margin-right: 4px;
}
.landing-preview__links i {
  font-size: 7px;
  color: #94a3b8;
  font-weight: 600;
}
@media (min-width: 900px) {
  .landing-preview__links { display: flex; }
}
.landing-preview__top em {
  background: #2563eb;
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 8px;
  flex-shrink: 0;
}
.landing-preview__ticker {
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  background: #030b18;
  border-bottom: 1px solid #0d2448;
}
.landing-preview__ticker i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: #1e3a5f;
}
.landing-preview__hero-copy {
  padding: 10px 10px 6px;
  display: grid;
  gap: 5px;
}
.landing-preview__hero-copy strong {
  font-size: 12px;
  color: #f8fafc;
}
.landing-preview__hero-copy span {
  color: #94a3b8;
  font-weight: 500;
  font-size: 8px;
}
.landing-preview__hero-copy u {
  display: inline-flex;
  width: fit-content;
  background: #2563eb;
  color: #fff;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 8px;
}
.landing-preview__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 8px 8px;
}
.landing-preview__cards i {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: #1e293b;
  border: 1px solid #334155;
}
.landing-preview--community {
  background: linear-gradient(160deg, #07111f, #0b1f3a 55%, #07111f);
}
.landing-preview--neon {
  background:
    linear-gradient(#22d3ee14 1px, transparent 1px),
    linear-gradient(90deg, #22d3ee14 1px, transparent 1px),
    linear-gradient(135deg, #020617, #0f172a);
  background-size: 12px 12px, 12px 12px, auto;
}
.landing-preview--neon .landing-preview__top {
  background: #020617d9;
  border-bottom-color: #22d3ee33;
}
.landing-preview--neon .landing-preview__links i { color: #67e8f9; }
.landing-preview--neon .landing-preview__top em,
.landing-preview--neon .landing-preview__hero-copy u {
  background: linear-gradient(90deg, #06b6d4, #8b5cf6);
}
.landing-preview--neon .landing-preview__hero-copy strong { color: #67e8f9; }
.landing-preview--neon .landing-preview__cards i {
  border-color: #22d3ee44;
  background: #0b1220cc;
}
.landing-preview--split {
  background: linear-gradient(160deg, #eef2ff, #f8fafc 50%, #ecfeff);
  color: #0f172a;
}
.landing-preview--split .landing-preview__top {
  background: #fffffff5;
  border-bottom-color: #e2e8f0;
}
.landing-preview--split .landing-preview__brand,
.landing-preview--split .landing-preview__hero-copy strong { color: #0f172a; }
.landing-preview--split .landing-preview__links i { color: #64748b; }
.landing-preview--split .landing-preview__ticker { background: #0f172a; border-bottom-color: #1e293b; }
.landing-preview--split .landing-preview__hero-copy span { color: #64748b; }
.landing-preview--split .landing-preview__top em,
.landing-preview--split .landing-preview__hero-copy u { background: #0f172a; }
.landing-preview--split .landing-preview__cards i {
  background: #fff;
  border-color: #e2e8f0;
}
.landing-preview--aurora {
  background:
    radial-gradient(circle at 85% 10%, #a78bfa88, transparent 40%),
    radial-gradient(circle at 10% 80%, #38bdf866, transparent 35%),
    #040816;
}
.landing-preview--aurora .landing-preview__top {
  background: #ffffff14;
  border-bottom-color: #ffffff2e;
}
.landing-preview--aurora .landing-preview__links i { color: #f5d0fe; }
.landing-preview--aurora .landing-preview__top em,
.landing-preview--aurora .landing-preview__hero-copy u {
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #f472b6);
}
.landing-preview--aurora .landing-preview__hero-copy strong { color: #fce7f3; }
.landing-preview--aurora .landing-preview__cards i {
  background: #ffffff16;
  border-color: #ffffff2e;
}
.landing-preview--warm {
  background: linear-gradient(160deg, #ffedd5, #fff7ed 50%, #fed7aa);
  color: #7c2d12;
}
.landing-preview--warm .landing-preview__top {
  background: #fff7ede6;
  border-bottom-color: #fed7aa;
}
.landing-preview--warm .landing-preview__brand,
.landing-preview--warm .landing-preview__hero-copy strong { color: #9a3412; }
.landing-preview--warm .landing-preview__links i { color: #c2410c; }
.landing-preview--warm .landing-preview__ticker { background: #9a3412; border-bottom-color: #c2410c; }
.landing-preview--warm .landing-preview__hero-copy span { color: #c2410c; }
.landing-preview--warm .landing-preview__top em,
.landing-preview--warm .landing-preview__hero-copy u { background: #ea580c; }
.landing-preview--warm .landing-preview__cards i {
  background: #fff;
  border-color: #fdba74;
}
.config-tab-preview {
  background: #0b1f3a;
  border-radius: 10px;
  min-height: 72px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.config-tab-preview span {
  color: #fff;
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 7px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}
.config-tab-preview span i {
  border: 1px solid currentColor;
  border-radius: 4px;
  place-items: center;
  width: 15px;
  height: 15px;
  font-size: 8px;
  font-style: normal;
  display: grid;
}
.config-tab-preview--solid span.active { background: #00e5ff; color: #0b1f3a; }
.config-tab-preview--underline span.active {
  border-bottom: 3px solid #00e5ff;
  border-radius: 0;
  color: #00e5ff;
}
.config-tab-preview--pills { gap: 4px; padding: 8px; }
.config-tab-preview--pills span { background: #ffffff1a; border-radius: 99px; }
.config-tab-preview--pills span.active { background: #00e5ff; color: #0b1f3a; }
.config-tab-preview--icon_top span { flex-direction: column; }
.config-tab-preview--icon_top span.active { background: #00e5ff; color: #0b1f3a; }
.config-color-grid {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
  padding-top: 16px;
  display: grid;
}
.bot-look {
  min-height: 118px;
  border-radius: 12px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.bot-look b { font-size: 12px; line-height: 1.3; }
.bot-look small { color: inherit; opacity: .75; font-size: 11px; }
.bot-look em {
  margin-top: auto;
  font-style: normal;
  text-align: center;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
}
.bot-look__premium {
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #14532d;
  font-size: 9px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 0 12px 0 8px;
  letter-spacing: .4px;
}
.bot-look--gradient {
  background: linear-gradient(180deg, #163a7a, #0b1f3a);
  color: #fff;
}
.bot-look--gradient em { background: #0b1f3a; color: #fff; }
.bot-look--card {
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 10px 24px #00000022;
}
.bot-look--card em { background: #0b1f3a; color: #fff; }
.bot-look--minimal {
  background: #fff;
  color: #0f172a;
  border: 1px solid #dbe4f0;
}
.bot-look--minimal em { background: #0b1f3a; color: #fff; }
.bot-look--compact {
  background: #fff;
  color: #0f172a;
  gap: 6px;
  padding-top: 22px;
}
.bot-look__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #e5edf7;
  border-radius: 8px;
  padding: 6px 8px;
}
.bot-look__row b { font-size: 10px; }
.bot-look__row em {
  margin: 0;
  padding: 5px 8px;
  background: #0b1f3a;
  color: #fff;
  border-radius: 6px;
  font-size: 9px;
}
.nav-builder { display: grid; gap: 8px; margin-top: 10px; }
.nav-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
}
.nav-row__move { display: flex; flex-direction: column; gap: 2px; }
.nav-move {
  width: 28px; height: 22px; padding: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.nav-row__on {
  display: flex; align-items: center; gap: 6px;
  margin: 0; font-size: 12px; font-weight: 700;
}
.nav-row__label { margin: 0; display: grid; gap: 2px; }
.nav-row__label input { margin: 0; }

.editor-form .button.primary, .card > form .button.primary, .manager-card .button.primary {
  width: auto;
  min-width: 168px;
  min-height: 44px;
  padding: 12px 22px;
}
.editor-form .button.secondary, .editor-actions a.button {
  width: auto;
  min-height: 44px;
  padding: 12px 18px;
}
.theme-toolbar__using {
  font-size: 13px; color: #059669; font-weight: 700;
}
.theme-modal {
  position: fixed; inset: 0; z-index: 80;
  background: #020817cc; display: grid; place-items: center; padding: 16px;
}
.theme-modal__panel {
  width: min(920px, 100%); max-height: min(90vh, 860px); overflow: auto;
  background: #fff;
  border: 1px solid var(--dc-border); border-radius: 20px; padding: 20px;
  box-shadow: 0 24px 64px #8aa4c933;
}
.theme-modal__panel > header {
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px;
}
.theme-modal__panel h2 { margin: 0 0 4px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; width: 100%; margin-top: 16px; }
.theme-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
  display: grid; gap: 8px;
}
.theme-card.is-active { border-color: #34d399; }
.theme-card h3 { font-size: 16px; }
.theme-card p { margin: 0; color: var(--muted); font-size: 13px; }
.theme-card__using { color: #34d399 !important; font-weight: 700; }
.theme-card__preview {
  border-radius: 12px; overflow: hidden; background: var(--t-nav, #071827);
  min-height: 168px; display: grid; align-content: start; cursor: pointer;
}
.theme-nav {
  display: flex; gap: 2px; background: var(--t-nav, #071827); padding: 8px;
}
.theme-nav span {
  display: inline-flex; align-items: center; gap: 5px;
  color: #eaf2ff; font-size: 11px; font-weight: 700; padding: 8px 10px; border-radius: 6px;
  opacity: 0.7; white-space: nowrap;
}
.theme-nav__icon { font-style: normal; font-size: 13px; line-height: 1; }
.theme-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: #020817d4; display: grid; place-items: center; padding: 16px;
  backdrop-filter: blur(6px);
}
.theme-overlay__panel {
  position: relative; width: min(520px, 100%);
  background: linear-gradient(145deg, #0a1f44, #061735);
  border: 1px solid var(--dc-border); border-radius: 20px; padding: 20px;
  box-shadow: 0 24px 64px #00051399;
}
.theme-overlay__close {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: 0; background: #13294d; color: #fff; border-radius: 8px;
  font-size: 20px; cursor: pointer; line-height: 1;
}
.theme-overlay__panel .theme-view__actions { margin: 12px 0 8px; }
.theme-nav span.is-on {
  background: var(--t-primary, #2563eb); opacity: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 40%, transparent);
}
.theme-nav--lg span { font-size: 13px; padding: 10px 14px; }
.theme-loader {
  height: 110px; display: grid; place-items: center; position: relative;
}
.theme-loader--orbit { color: #fff; }
.theme-orbit {
  position: absolute; width: 54px; height: 54px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--t-primary, #2563eb);
  border-right-color: var(--t-accent, #22d3ee); animation: theme-spin 1s linear infinite;
}
.theme-loader--orbit b, .theme-loader-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--t-primary), var(--t-accent)); font-size: 14px;
  object-fit: cover; overflow: hidden; z-index: 1;
}
.theme-loader-avatar--letter { color: #fff; font-weight: 800; }
.theme-loader--candles .theme-loader-avatar,
.theme-loader--bubbles .theme-loader-avatar,
.theme-loader--sparkles .theme-loader-avatar {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
}
.theme-header-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--t-primary), var(--t-accent)); color: #fff; font-weight: 800;
}
.theme-header-avatar--letter { font-size: 14px; }
.theme-loader--candles { display: flex; align-items: flex-end; justify-content: center; gap: 8px; padding-bottom: 18px; }
.theme-candle {
  width: 8px; border-radius: 2px;
  background: linear-gradient(180deg, var(--t-accent, #22d3ee), var(--t-primary, #2563eb));
  animation: theme-candle 1.1s ease-in-out infinite; transform-origin: bottom;
}
.theme-candle--1 { height: 28px; animation-delay: 0s; }
.theme-candle--2 { height: 46px; animation-delay: .12s; }
.theme-candle--3 { height: 64px; animation-delay: .24s; }
.theme-candle--4 { height: 40px; animation-delay: .36s; }
.theme-candle--5 { height: 54px; animation-delay: .48s; }
.theme-loader--bubbles { position: relative; }
.theme-bubble {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--t-accent, #22d3ee) 42%, var(--t-primary, #2563eb));
  animation: theme-bubble 2s ease-in-out infinite;
}
.theme-bubble--1 { width: 16px; height: 16px; left: 18%; bottom: 18px; }
.theme-bubble--2 { width: 22px; height: 22px; left: 42%; bottom: 28px; animation-delay: .15s; }
.theme-bubble--3 { width: 12px; height: 12px; left: 68%; bottom: 16px; animation-delay: .3s; }
.theme-bubble--4 { width: 18px; height: 18px; left: 28%; bottom: 52px; animation-delay: .45s; }
.theme-bubble--5 { width: 10px; height: 10px; left: 58%; bottom: 58px; animation-delay: .6s; }
.theme-bubble--6 { width: 14px; height: 14px; left: 78%; bottom: 42px; animation-delay: .75s; }
.theme-loader--sparkles { position: relative; }
.theme-sparkle {
  position: absolute; width: 12px; height: 14px;
  background: var(--t-accent, #22d3ee);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: theme-sparkle 1.15s ease-in-out infinite;
}
.theme-sparkle--1 { left: 16%; top: 36%; }
.theme-sparkle--2 { left: 42%; top: 18%; width: 18px; height: 18px; animation-delay: .15s; }
.theme-sparkle--3 { left: 70%; top: 34%; animation-delay: .3s; }
.theme-sparkle--4 { left: 30%; top: 62%; animation-delay: .45s; }
.theme-sparkle--5 { left: 62%; top: 60%; animation-delay: .6s; }
@keyframes theme-spin { to { transform: rotate(360deg); } }
@keyframes theme-candle {
  0%, 100% { transform: scaleY(.55); opacity: .7; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes theme-bubble {
  0%, 100% { transform: translateY(6px) scale(.85); opacity: .55; }
  50% { transform: translateY(-8px) scale(1); opacity: 1; }
}
@keyframes theme-sparkle {
  0%, 100% { transform: scale(.55); opacity: .4; }
  50% { transform: scale(1.15); opacity: 1; }
}
.theme-loader--cube,
.theme-loader--gyro,
.theme-loader--helix,
.theme-loader--orb,
.theme-loader--prism {
  perspective: 280px;
}
.theme-cube {
  width: 40px; height: 40px; position: relative;
  transform-style: preserve-3d;
  animation: theme-cube-spin 3s linear infinite;
}
.theme-cube__face {
  position: absolute; inset: 0;
  border: 1px solid color-mix(in srgb, var(--t-accent, #22d3ee) 75%, #fff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--t-primary, #2563eb) 78%, transparent), color-mix(in srgb, var(--t-accent, #22d3ee) 55%, #0b1220));
}
.theme-cube__face--front { transform: translateZ(20px); }
.theme-cube__face--back { transform: rotateY(180deg) translateZ(20px); }
.theme-cube__face--right { transform: rotateY(90deg) translateZ(20px); }
.theme-cube__face--left { transform: rotateY(-90deg) translateZ(20px); }
.theme-cube__face--top { transform: rotateX(90deg) translateZ(20px); background: linear-gradient(145deg, var(--t-accent, #22d3ee), var(--t-primary, #2563eb)); }
.theme-cube__face--bottom { transform: rotateX(-90deg) translateZ(20px); }
@keyframes theme-cube-spin {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to { transform: rotateX(-22deg) rotateY(360deg); }
}
.theme-gyro {
  width: 72px; height: 72px; position: relative;
  transform-style: preserve-3d;
  animation: theme-gyro-spin 5.5s linear infinite;
}
.theme-gyro__ring {
  position: absolute; inset: 4px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--t-accent, #22d3ee) 85%, #fff);
}
.theme-gyro__ring--x { transform: rotateX(72deg); }
.theme-gyro__ring--y { transform: rotateY(72deg); border-color: var(--t-primary, #2563eb); }
.theme-gyro__ring--z { transform: rotateX(18deg) rotateY(18deg); opacity: .65; }
.theme-gyro b {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--t-accent, #22d3ee), var(--t-primary, #2563eb));
  box-shadow: 0 0 16px var(--t-accent, #22d3ee);
}
@keyframes theme-gyro-spin {
  from { transform: rotateX(16deg) rotateY(0deg); }
  to { transform: rotateX(16deg) rotateY(360deg); }
}
.theme-helix {
  width: 64px; height: 72px; position: relative;
  transform-style: preserve-3d;
  animation: theme-helix-spin 2.4s linear infinite;
}
.theme-helix__dot {
  position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px;
  border-radius: 50%;
  background: var(--t-accent, #22d3ee);
  box-shadow: 0 0 8px var(--t-accent, #22d3ee);
}
.theme-helix__dot--1 { transform: rotateY(0deg) translateZ(22px) translateY(-28px); }
.theme-helix__dot--2 { transform: rotateY(45deg) translateZ(22px) translateY(-20px); background: var(--t-primary, #2563eb); }
.theme-helix__dot--3 { transform: rotateY(90deg) translateZ(22px) translateY(-12px); }
.theme-helix__dot--4 { transform: rotateY(135deg) translateZ(22px) translateY(-4px); background: var(--t-primary, #2563eb); }
.theme-helix__dot--5 { transform: rotateY(180deg) translateZ(22px) translateY(4px); }
.theme-helix__dot--6 { transform: rotateY(225deg) translateZ(22px) translateY(12px); background: var(--t-primary, #2563eb); }
.theme-helix__dot--7 { transform: rotateY(270deg) translateZ(22px) translateY(20px); }
.theme-helix__dot--8 { transform: rotateY(315deg) translateZ(22px) translateY(28px); background: var(--t-primary, #2563eb); }
@keyframes theme-helix-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
.theme-orb {
  width: 52px; height: 52px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 28%, #fff 0 6%, var(--t-accent, #22d3ee) 26%, var(--t-primary, #2563eb) 62%, #071018 100%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--t-primary, #2563eb) 45%, transparent), inset -8px -10px 16px #00000059;
  animation: theme-orb-float 2.2s ease-in-out infinite;
  transform-style: preserve-3d;
}
.theme-orb__shine {
  position: absolute; left: 18%; top: 16%; width: 16px; height: 12px; border-radius: 50%;
  background: #ffffff8c; filter: blur(1px);
}
.theme-orb__ring {
  position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--t-accent, #22d3ee);
  border-bottom-color: color-mix(in srgb, var(--t-primary, #2563eb) 70%, transparent);
  animation: theme-spin 1.4s linear infinite;
  transform: rotateX(66deg);
}
@keyframes theme-orb-float {
  0%, 100% { transform: translateY(4px) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}
.theme-prism {
  width: 48px; height: 48px; position: relative;
  transform-style: preserve-3d;
  animation: theme-prism-flip 3s ease-in-out infinite;
}
.theme-prism__face {
  position: absolute; inset: 0; opacity: .9;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.theme-prism__face--a { background: linear-gradient(135deg, var(--t-accent, #22d3ee), var(--t-primary, #2563eb)); transform: rotateY(0deg) translateZ(12px); }
.theme-prism__face--b { background: linear-gradient(135deg, var(--t-primary, #2563eb), #0b1220); transform: rotateY(90deg) translateZ(12px); }
.theme-prism__face--c { background: linear-gradient(135deg, var(--t-accent, #22d3ee), #fff); transform: rotateY(180deg) translateZ(12px); }
.theme-prism__face--d { background: linear-gradient(135deg, var(--t-primary, #2563eb), var(--t-accent, #22d3ee)); transform: rotateY(-90deg) translateZ(12px); }
@keyframes theme-prism-flip {
  0% { transform: rotateX(-18deg) rotateY(20deg); }
  50% { transform: rotateX(18deg) rotateY(200deg); }
  100% { transform: rotateX(-18deg) rotateY(380deg); }
}
.theme-card__actions, .theme-view__actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.theme-card__actions .button, .theme-view__actions .button { width: auto; padding: 8px 12px; }
.theme-view { margin-top: 8px; }
.theme-view__stage {
  border-radius: 16px; overflow: hidden; background: var(--t-nav); margin-bottom: 12px;
}
.theme-view__brand {
  margin: 0; padding: 0 16px 16px; display: flex; justify-content: center;
}
#theme-error { margin-top: 10px; }

.bot-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 8px 0 4px;
}
.bot-store {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0; overflow: hidden;
}
.bot-store summary {
  cursor: pointer; font-weight: 700; font-size: 13px;
  list-style: none; display: flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.bot-store summary::-webkit-details-marker { display: none; }
.bot-store summary:before {
  content: ""; width: 6px; height: 6px; border-right: 2px solid #7aa2e8; border-bottom: 2px solid #7aa2e8;
  transform: rotate(-45deg); margin-right: 2px; flex: none;
}
.bot-store[open] summary:before { transform: rotate(45deg); margin-top: -3px; }
.bot-store summary .muted { margin-left: auto; font-weight: 600; }
.bot-store__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 8px;
  padding: 12px;
}
.bot-card {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0; min-height: 58px; padding: 10px 11px;
  background: #06132a; border: 1px solid #1f477a; border-radius: 10px;
  font-size: 12px; font-weight: 650; line-height: 1.35; color: var(--text);
  cursor: pointer;
}
.bot-card:hover { border-color: #4f8dff88; background: #0b2144; }
.bot-card:has(input:checked) {
  border-color: #4f8dff99;
  background: linear-gradient(180deg, #163868, #0c2348);
  box-shadow: inset 0 0 0 1px #4f8dff33;
}
.bot-card input { margin-top: 2px; }
.bot-card span { min-width: 0; }
.bot-edit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.bot-edit:last-child { border-bottom: 0; }
.bot-edit__actions { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; }
.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.settings-grid > .card { margin: 0; max-width: none; }
.settings-hero {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 22px; margin-bottom: 16px;
}
.settings-hero__who { display: flex; align-items: center; gap: 14px; }
.settings-hero__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
  background: #2563eb; color: #fff;
}
.settings-hero__who strong { display: block; font-size: 22px; }
.settings-hero__who small { color: var(--muted); }
.settings-hero__pill {
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 800;
  background: #dcfce7; color: #166534;
}
.account-form { display: grid; gap: 12px; margin-top: 12px; }
.account-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.account-form input {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font: inherit; background: var(--card, #fff);
}
.account-form__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px; margin-top: 12px;
}
.account-meta article { display: grid; gap: 4px; }
.account-meta small { color: var(--muted); font-size: 12px; }
.account-meta strong { font-size: 14px; word-break: break-all; }
@media (max-width: 720px) {
  .account-form__split { grid-template-columns: 1fr; }
}
.manager-stack { display: grid; gap: 16px; }
.dns-connection, .domain-card { max-width: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-orbit, .theme-candle, .theme-bubble, .theme-sparkle,
  .theme-cube, .theme-gyro, .theme-helix, .theme-orb, .theme-orb__ring, .theme-prism { animation: none; }
}
.commission-months { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.commission-months button {
  border: 1px solid var(--line);
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.commission-months button.is-on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.commission-sync .dot { width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
.commission-sync .dot.ok { background: #34d399; }
.commission-sync .dot.syncing { background: #fbbf24; }
.commission-sync .dot.error { background: #f87171; }
.commission-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.commission-stats article {
  background: #f4f7fb;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 6px;
  color: #12203a;
}
.commission-stats small, .commission-stats em {
  color: #5b6f8c;
  font-style: normal;
  font-size: 12px;
  font-weight: 650;
}
.commission-stats strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0f172a;
}
.money-pos { color: #047857; font-weight: 800; }
.table-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
.commission-table { width: 100%; min-width: 640px; border-collapse: collapse; margin-top: 12px; }
.commission-table th, .commission-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.commission-table td b { display: block; }
.commission-table td span { display: block; }
.commission-table code { font-size: 12px; color: var(--accent); word-break: break-all; }
.commission-table td a { display: block; }
.pool-waiting { margin: 16px 0 8px; padding-top: 8px; border-top: 1px solid var(--dc-border); }
.pool-waiting h3 { margin: 0; }
.pool-waiting-row {
  display: grid;
  grid-template-columns: 1.4fr minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--dc-border);
}
.pool-waiting-row small { display: block; color: var(--muted); font-size: 12px; }
.pool-assign { display: grid; gap: 8px; margin-top: 8px; }
.pool-assign select, .pool-waiting-row select { width: 100%; }
@media (max-width: 720px) {
  .pool-waiting-row { grid-template-columns: 1fr; }
}
.commission-empty { text-align: center; padding: 36px 16px 28px; }
.commission-empty b { display: block; font-size: 16px; margin-bottom: 6px; }
.commission-empty p { margin: 0; color: var(--muted); }
.wallet-methods { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.wallet-methods label {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid var(--dc-border); cursor: pointer; font-size: 13px;
}
.wallet-methods label.is-on { border-color: var(--accent); background: #3e71d314; }
.wallet-status { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--surface); text-transform: capitalize; }
.wallet-status.paid { background: #102a22; color: #34d399; }
.wallet-status.pending, .wallet-status.processing { background: #2a2108; color: #fbbf24; }
.wallet-status.failed { background: #2a1212; color: #f87171; }
.payout-celebrate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.46);
  overflow: hidden;
}
.payout-celebrate__card {
  position: relative;
  z-index: 2;
  width: min(440px, calc(100% - 32px));
  background: #fff;
  color: #0f172a;
  border-radius: 28px;
  padding: 36px 28px 28px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}
.payout-celebrate__kicker {
  margin: 0 0 8px;
  color: #0f766e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.payout-celebrate__card h2 {
  margin: 0 0 10px;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.payout-celebrate__card p { margin: 0 0 10px; font-size: 17px; }
.payout-celebrate__effort { color: #0f766e; font-weight: 700; }
.payout-celebrate__card .button { margin-top: 14px; }
.sidebar-withdraw {
  color: #1f5edc; background: #eef4ff; border: 0; border-radius: 7px;
  align-items: center; gap: 10px; width: 100%; min-height: 41px; margin: 2px 0;
  padding: 0 10px; font-size: 12px; font-weight: 700; display: flex; cursor: pointer;
}
.sidebar-withdraw svg { width: 16px; height: 16px; flex: none; }
.withdraw-float {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(15, 23, 42, 0.42);
}
.withdraw-float__amount {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: #fff; color: #0f172a;
  padding: 28px 24px 32px;
  box-shadow: -18px 0 50px rgba(15, 23, 42, 0.2);
  overflow: auto;
  animation: withdraw-slide .28s ease;
}
.withdraw-float__amount h2 {
  margin: 0 0 6px; font-size: 42px; letter-spacing: -0.04em; line-height: 1;
}
.withdraw-float__kicker {
  margin: 0 0 8px; color: #1f5edc; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.withdraw-float__thin {
  position: absolute; top: 84px; right: 28px; z-index: 2;
  width: min(300px, calc(100% - 32px));
  background: #fff; color: #0f172a;
  border-radius: 18px; padding: 22px 18px 18px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.28);
  animation: withdraw-rise .22s ease;
}
.withdraw-float__thin h3 { margin: 0 0 8px; font-size: 22px; }
.withdraw-float__confirm { top: 156px; right: 48px; z-index: 3; width: min(280px, calc(100% - 40px)); }
.withdraw-float__close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border: 0; border-radius: 999px;
  background: #f1f5f9; color: #0f172a; font-size: 20px; cursor: pointer;
}
.withdraw-float .button.primary { width: 100%; margin-top: 8px; }
@keyframes withdraw-slide {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes withdraw-rise {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (max-width: 720px) {
  .withdraw-float__thin, .withdraw-float__confirm { right: 16px; left: 16px; width: auto; }
  .withdraw-float__confirm { top: 210px; }
}
.payout-flower {
  position: absolute;
  bottom: -48px;
  z-index: 1;
  animation-name: flower-pop;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes flower-pop {
  0% { transform: translateY(20px) scale(0.3) rotate(-12deg); opacity: 0; }
  18% { opacity: 1; transform: translateY(-12vh) scale(1.2) rotate(8deg); }
  100% { transform: translateY(-110vh) scale(1) rotate(24deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .payout-flower { animation: none; opacity: 0.8; bottom: auto; top: 12%; }
}
.inline-app { display: flex; gap: 8px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.inline-app input { margin: 0; }
.inline-app .button { width: auto; padding: 8px 12px; }
.dns-connection { border-radius: 16px; padding: 18px; }
.dns-connection.valid { border-color: #14532d; }
.dns-connection.pending { border-color: #854d0e; }
.dns-connection.invalid { border-color: #7f1d1d; }
.dns-connection__summary { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.dns-connection__summary h3 { margin: 0 0 8px; word-break: break-word; }
.dns-connection__status-pill { display: inline-block; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--surface); }
.dns-connection.valid .dns-connection__status-pill { background: #102a22; color: #34d399; }
.dns-connection.pending .dns-connection__status-pill { background: #2a2108; color: #fbbf24; }
.dns-connection.invalid .dns-connection__status-pill { background: #2a1212; color: #f87171; }
.dns-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.dns-table th, .dns-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.dns-table code { color: var(--accent); word-break: break-all; }
.dns-connection__details { margin-top: 14px; display: grid; gap: 12px; }
.dns-connection__hint, .dns-connection__note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.dns-connection__value { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dns-connection__value .text-button { width: auto; padding: 0; }
.nameserver-setup { display: grid; gap: 12px; }
.nameserver-setup__intro { display: flex; align-items: flex-start; gap: 11px; }
.nameserver-setup__badge {
  color: #1d4ed8; text-transform: uppercase; letter-spacing: .06em;
  background: #edf4ff; border: 1px solid #cfe0ff; border-radius: 7px;
  flex: none; padding: 5px 8px; font-size: 10px; font-weight: 800;
}
.nameserver-setup__intro h5, .nameserver-setup__intro p { margin: 0; }
.nameserver-setup__intro h5 { font-size: 14px; }
.nameserver-setup__intro p { color: var(--muted); margin-top: 4px; font-size: 13px; line-height: 1.5; }
.nameserver-setup__steps {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr)); display: grid; overflow: hidden;
}
.nameserver-setup__steps span {
  color: var(--muted); align-items: center; gap: 7px; min-width: 0;
  padding: 9px 11px; font-size: 12px; font-weight: 700; display: flex;
}
.nameserver-setup__steps span:not(:last-child) { border-right: 1px solid var(--line); }
.nameserver-setup__steps b {
  color: var(--accent); background: #13294d; border-radius: 6px;
  flex: 0 0 20px; place-items: center; width: 20px; height: 20px; font-size: 11px; display: grid;
}
.nameserver-setup__steps--ns { grid-template-columns: 1fr; }
.nameserver-setup__steps--ns span { color: var(--text); font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.nameserver-setup__steps--ns span:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
.nameserver-setup__steps--ns b { flex-basis: auto; width: auto; padding: 0 6px; font-family: inherit; }
.nameserver-setup__steps--ns .text-button { margin-left: auto; flex-shrink: 0; font-family: inherit; }

@media (max-width: 1180px) {
  .dc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .widget-grid, .page-list { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .bot-store__list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 900px) {
  .theme-grid { grid-template-columns: 1fr; }
  .auth-intro { padding: 28px 20px 0; }
  .content > main { padding: 10px 12px 22px; }
  .editor-look, .editor-split, .grid2, .grid3, .dash-grid, .social-form-grid { grid-template-columns: 1fr; }
  .dash-hero { padding: 20px 18px; }
  .dash-hero__art { display: none; }
  .site-wizard { grid-template-columns: 1fr; }
  .config-steps {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
  }
  .config-steps button { width: auto; flex: none; white-space: nowrap; }
  .loader-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-style-grid, .bot-style-grid, .landing-style-grid, .config-color-grid { grid-template-columns: 1fr; }
  .nav-row { grid-template-columns: auto auto minmax(0, 1fr); }
  .bot-edit { grid-template-columns: 1fr; }
  .site-picker { max-width: none; }
  .editor-form .button.primary, .card > form .button.primary, .manager-card .button.primary {
    width: 100%;
  }
  .editor-actions__buttons { width: 100%; }
  .editor-actions__buttons .button { flex: 1; }
}

@media (max-width: 760px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-intro { padding: 22px 18px 8px; }
  .auth-intro h1 { font-size: 28px; }
  .auth-benefits, .steps { display: none; }
  .auth-panel { min-height: 100dvh; padding: 16px; align-items: start; }
  .auth-card { width: 100%; }
  .sidebar {
    transform: translate(-100%);
    transition: transform .2s;
  }
  .portal-shell.nav-open .sidebar { transform: none; box-shadow: 20px 0 60px #00020c99; }
  .portal-shell.nav-open .nav-overlay { display: block; }
  .content { margin-left: 0; }
  .menu-toggle { display: grid; }
  .content > header { min-height: 62px; padding: 8px 10px; flex-wrap: wrap; }
  .header-brand span { display: none; }
  .header-cta { min-height: 34px; padding-inline: 12px; font-size: 12px; }
  .header-site-picker { max-width: none; flex: 1 1 180px; }
  .dc-metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dc-metric { min-height: 98px; padding: 11px; }
  .dc-metric strong { font-size: 22px; }
  .sites-management-card { min-height: 0; padding: 12px; }
  .sites-management-card > header { flex-direction: column; }
  .sites-management-card__badges { flex-flow: wrap; align-items: flex-start; }
  .sites-management-card__meta > div { grid-template-columns: 1fr; gap: 2px; }
  .sites-management-card > footer { grid-template-columns: 1fr 1fr auto; }
  .row .button, .row a.button { width: auto; }
  .dns-connection__summary .button { width: 100%; }
  .nameserver-setup__steps { grid-template-columns: 1fr; }
  .nameserver-setup__steps span:not(:last-child) { border-right: 0; border-bottom: 1px solid var(--line); }
}

.mode-switch {
  display: flex; gap: 8px; margin: 8px 0 16px;
}
.mode-switch button {
  flex: 1; border: 1px solid var(--line); background: var(--input-bg); color: var(--text);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700;
}
.mode-switch button.active {
  background: linear-gradient(135deg, #347cff, #1f5edc); color: #fff; border-color: #689fff57;
}
.appearance-card h3 { margin: 16px 0 4px; font-size: 14px; }
.font-preview { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); }

html[data-portal-theme="dark"] {
  --bg: #020c21;
  --card: linear-gradient(145deg, #091d3e, #06162f);
  --card-shadow: 0 18px 42px #00051333;
  --line: #1b4273;
  --text: #eaf2ff;
  --muted: #8799b9;
  --blue: #347cff;
  --accent: #4f8dff;
  --dc-border: #5b85cf2e;
  --dc-green: #20d98b;
  --dc-amber: #f5b72f;
  --input-bg: #071422;
  --surface: #13294d;
}
html[data-portal-theme="dark"] body {
  background: radial-gradient(circle at 87% 4%, #2768e024, transparent 34rem), var(--bg);
}
html[data-portal-theme="dark"] .sidebar {
  background: radial-gradient(circle at 30% 12%, #265dca26, #0000 30%), linear-gradient(#020f2b 0%, #031633 52%, #020d24 100%);
  border-right-color: #5e8de21f;
  box-shadow: 18px 0 50px #0005133d;
}
html[data-portal-theme="dark"] .sidebar nav p { color: #6f8abb; }
html[data-portal-theme="dark"] .sidebar nav a, html[data-portal-theme="dark"] .logout { color: #a9bde0; }
html[data-portal-theme="dark"] .sidebar-withdraw { color: #dbeafe; background: #1d4ed833; }
html[data-portal-theme="dark"] .sidebar nav a:hover,
html[data-portal-theme="dark"] .sidebar nav a.active {
  color: #fff; background: linear-gradient(90deg, #2664d945, #2351a621);
}
html[data-portal-theme="dark"] .sidebar nav a.active { box-shadow: inset 3px 0 #4386ff, 0 8px 24px #00041429; }
html[data-portal-theme="dark"] .logout { color: #ff9aa7; border-top-color: #ffffff12; }
html[data-portal-theme="dark"] .content > header {
  color: #f5f8ff;
  background: radial-gradient(circle at 82% 0, #2e69d82e, #0000 35%), linear-gradient(110deg, #061735 0%, #09234c 58%, #0b2d61 100%);
  border-bottom-color: #6c94dc21;
  box-shadow: 0 10px 34px #0005133d;
}
html[data-portal-theme="dark"] .header-brand span { color: #8194b8; }
html[data-portal-theme="dark"] .menu-toggle { color: #dce8fb; background: #091d40; border-color: #7499da33; }
html[data-portal-theme="dark"] .header-site-picker { color: #9eb4d6; }
html[data-portal-theme="dark"] .content > main {
  background-image: linear-gradient(#4271c708 1px, #0000 1px), linear-gradient(90deg, #4271c708 1px, #0000 1px);
  background-size: 42px 42px;
}
html[data-portal-theme="dark"] .dc-metric, html[data-portal-theme="dark"] .card,
html[data-portal-theme="dark"] .sites-management-card, html[data-portal-theme="dark"] .dns-connection,
html[data-portal-theme="dark"] .commission-sync {
  background: radial-gradient(circle at 95% 0, #3e71d314, #0000 32%), linear-gradient(145deg, #0a1f44f5, #061735f5);
}
html[data-portal-theme="dark"] .admin-stats-side,
html[data-portal-theme="dark"] .admin-stats-side__item {
  background: #0a1f44;
  border-color: #1f477a;
  color: #e2e8f0;
}
html[data-portal-theme="dark"] .admin-stats-side__item em { color: #9eb4d6; }
html[data-portal-theme="dark"] .prompt { color: #fde68a; background: #241c0d; border-color: #854d0e; }
html[data-portal-theme="dark"] .prompt b { color: #fef3c7; }
html[data-portal-theme="dark"] .button.secondary { background: #13294d; color: #fff; border-color: #1f477a; }
html[data-portal-theme="dark"] .config-steps { background: #071427; }
html[data-portal-theme="dark"] .config-steps button { color: #8aa0c2; }
html[data-portal-theme="dark"] .config-steps b { background: #13294d; color: #9db0c9; }
html[data-portal-theme="dark"] .config-steps button.complete { color: #dbeafe; }
html[data-portal-theme="dark"] .sites-card-actions a,
html[data-portal-theme="dark"] .sites-card-actions button,
html[data-portal-theme="dark"] .sites-card-msg {
  color: #dce8fb; background: #071a38; border-color: #1f477a;
}
html[data-portal-theme="dark"] .site-msg__thread { background: #071427; border-color: #1f477a; }
html[data-portal-theme="dark"] .site-msg__bubble { background: #0a1f44; border-color: #1f477a; color: #eaf2ff; }
html[data-portal-theme="dark"] .site-msg__bubble--admin { background: #052e1a; border-color: #14532d; }
html[data-portal-theme="dark"] .site-msg__bubble--user { background: #0b2a5a; border-color: #1e3a8a; }
html[data-portal-theme="dark"] .auth-card {
  background: linear-gradient(145deg, #0a1f44, #061735);
}
html[data-portal-theme="dark"] .share-chip { background: #13294d; color: #d7e6ff; }
html[data-portal-theme="dark"] .commission-stats article {
  background: linear-gradient(145deg, #0a1f44f5, #061735f5);
  border-color: #5b85cf2e;
  color: #eaf2ff;
}
html[data-portal-theme="dark"] .commission-stats small,
html[data-portal-theme="dark"] .commission-stats em { color: #9db0c9; }
html[data-portal-theme="dark"] .commission-stats strong { color: #ffffff; }
html[data-portal-theme="dark"] .commission-months button {
  background: #0a1f44;
  border-color: #5b85cf2e;
  color: #d7e6ff;
}
html[data-portal-theme="dark"] .commission-months button.is-on {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

@media (max-width: 480px) {
  .dc-metrics { grid-template-columns: 1fr; }
  .commission-stats { grid-template-columns: 1fr 1fr; }
}

.sf-loader {
  --loader-primary: #00e5ff;
  --loader-secondary: #102a43;
  isolation: isolate;
  color: #eef5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 5000;
  padding: 24px;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
}
.sf-loader--fullscreen {
  background:
    radial-gradient(circle at 18% 14%, #3573e538, transparent 31rem),
    radial-gradient(circle at 86% 84%, #26bed321, transparent 28rem),
    linear-gradient(145deg, #02091a, #031630 55%, #061b3e);
}
.sf-loader--overlay {
  background: #010918c2;
  backdrop-filter: blur(13px) saturate(125%);
  animation: sf-loader-veil 0.2s ease-out;
}
.sf-loader--out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
  pointer-events: none;
}
.sf-loader__ambient {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  width: min(48vw, 470px);
  aspect-ratio: 1;
  filter: blur(55px);
  opacity: 0.28;
  animation: 8s ease-in-out infinite alternate sf-loader-ambient;
}
.sf-loader__ambient--one {
  background: radial-gradient(circle, #3279ff, transparent 68%);
  top: -25%;
  left: -12%;
}
.sf-loader__ambient--two {
  background: radial-gradient(circle, #23c6d7, transparent 68%);
  animation-duration: 10s;
  animation-delay: -3s;
  bottom: -30%;
  right: -14%;
}
.sf-loader__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(430px, 100%);
  padding: 38px 28px;
  color: #eef5ff;
  background: linear-gradient(145deg, #0d2a55d6, #05142ef5);
  border: 1px solid #5a90e847;
  border-radius: 24px;
  box-shadow: 0 32px 85px #00030e7a, inset 0 1px #ffffff14;
  backdrop-filter: blur(18px);
  animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) both sf-loader-panel-in;
}
.sf-loader--overlay .sf-loader__panel {
  flex-direction: row;
  gap: 15px;
  width: min(560px, 100%);
  padding: 13px 15px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a2247e0, #061733f0);
  box-shadow: 0 12px 30px #0004113d;
}
.sf-loader__emblem {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
}
.sf-loader--overlay .sf-loader__emblem {
  width: 52px;
  height: 52px;
}
.sf-loader__orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid #649efa3d;
  border-radius: 50%;
  animation: 2.4s linear infinite sf-loader-orbit;
}
.sf-loader__orbit--outer { inset: 0; }
.sf-loader__orbit--inner {
  inset: 12px;
  animation-duration: 1.65s;
  animation-direction: reverse;
}
.sf-loader--overlay .sf-loader__orbit--inner { inset: 7px; }
.sf-loader__logo {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background: linear-gradient(145deg, #347af2, #1747ad);
  border: 1px solid #97c2ff61;
  border-radius: 17px;
  font-weight: 800;
  box-shadow: 0 14px 32px #1453c36b, inset 0 1px #ffffff40;
  animation: 2.1s ease-in-out infinite sf-loader-logo-pulse;
}
.sf-loader--overlay .sf-loader__logo {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 14px;
}
.sf-loader__copy {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.sf-loader--overlay .sf-loader__copy {
  text-align: left;
  justify-items: start;
}
.sf-loader__brand {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.sf-loader--overlay .sf-loader__brand { font-size: 1rem; }
.sf-loader__status {
  margin: 0;
  color: #b5c8ed;
  font-size: 13px;
}
.sf-loader__progress {
  position: relative;
  display: block;
  width: min(260px, 82%);
  height: 5px;
  margin-top: 12px;
  overflow: hidden;
  background: #020c1eb8;
  border: 1px solid #548be12e;
  border-radius: 999px;
}
.sf-loader--overlay .sf-loader__progress {
  width: min(230px, 100%);
  height: 4px;
  margin-top: 6px;
}
.sf-loader__beam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -44%;
  width: 44%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #3d7ff0 18%, #4dd8e8 74%, #c9f7ff);
  box-shadow: 0 0 14px #4dd8e870;
  animation: 1.35s cubic-bezier(0.45, 0, 0.55, 1) infinite sf-loader-progress;
}
.sf-loader__glint {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  background: linear-gradient(90deg, transparent 40%, #ffffff4d 50%, transparent 60%);
  animation: 2.2s ease-in-out infinite sf-loader-glint;
}
@keyframes sf-loader-orbit { to { transform: rotate(360deg); } }
@keyframes sf-loader-logo-pulse {
  50% { filter: brightness(1.08); transform: scale(1.045); }
}
@keyframes sf-loader-progress {
  0% { left: -44%; }
  55%, 100% { left: 110%; }
}
@keyframes sf-loader-glint {
  0%, 28% { transform: translate(-100%); }
  72%, 100% { transform: translate(100%); }
}
@keyframes sf-loader-ambient {
  to { transform: translate(6%, 5%) scale(1.08); }
}
@keyframes sf-loader-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.975); }
}
@keyframes sf-loader-veil { from { opacity: 0; } }
@media (max-width: 560px) {
  .sf-loader--overlay .sf-loader__panel {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sf-loader--overlay .sf-loader__copy {
    justify-items: center;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sf-loader__orbit,
  .sf-loader__logo,
  .sf-loader__beam,
  .sf-loader__glint,
  .sf-loader__ambient { animation: none; }
}

.ai-build {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: calc(100vh - 140px);
  max-width: 720px;
  gap: 14px;
}
.ai-build__toolbar {
  display: flex;
  justify-content: flex-end;
}
.ai-build__thread {
  display: grid;
  align-content: start;
  gap: 12px;
  max-height: min(62vh, 640px);
  overflow: auto;
  padding-right: 4px;
}
.ai-msg {
  width: min(100%, 540px);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--dc-border);
}
.ai-msg p { margin: 0; line-height: 1.5; }
.ai-msg--ai {
  background: linear-gradient(145deg, #0d2a58, #071a38);
}
.ai-msg--user {
  justify-self: end;
  background: linear-gradient(145deg, #1d4ed8, #1e40af);
}
.ai-progress {
  margin: 0;
  padding: 12px 14px 12px 32px;
  background: #071422;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.ai-progress li { color: var(--muted); margin: 6px 0; }
.ai-progress li.is-done { color: var(--text); }
.ai-progress li.is-on { color: #7dd3c7; font-weight: 700; }
.ai-think {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--dc-border);
  border-radius: 18px;
  background: linear-gradient(160deg, #071427, #04101f);
}
.ai-think--bar {
  align-items: center;
  padding: 10px 12px;
  background: #071427;
}
.ai-think--bar p { margin: 0; color: var(--muted); }
.ai-orb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.85) 0 7%, transparent 28%),
    radial-gradient(circle at 50% 46%, #93c5fd 0%, #2563eb 38%, #020617 74%);
  box-shadow: 0 0 22px rgba(59, 130, 246, .45), inset 0 -10px 18px rgba(2, 6, 23, .55);
  overflow: hidden;
  flex-shrink: 0;
}
.ai-orb--sm { width: 28px; height: 28px; }
.ai-orb::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 20deg, transparent 0 18%, rgba(191,219,254,.55), transparent 42%, rgba(196,181,253,.45), transparent 70%);
  animation: ai-orb-spin 2.6s linear infinite;
}
.ai-orb::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(125, 211, 252, .28);
  animation: ai-orb-ring 1.7s ease-out infinite;
}
.ai-think.is-live .ai-orb { animation: ai-orb-breathe 1.45s ease-in-out infinite; }
.ai-think__copy { display: grid; gap: 4px; min-width: 0; }
.ai-think__done {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.ai-think__line {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.45;
}
.ai-preview {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--dc-border);
  background: var(--ai-nav, #071827);
}
.ai-preview__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--ai-nav, #071827) 88%, black);
  overflow: auto;
}
.ai-preview__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ai-preview__nav b { font-size: 13px; white-space: nowrap; }
.ai-preview__nav em {
  font-style: normal;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--ai-primary, #2563eb) 28%, transparent);
  color: #fff;
  white-space: nowrap;
}
.ai-preview__nav span {
  width: 18px; height: 4px; border-radius: 99px; background: var(--ai-primary, #2563eb); opacity: .55;
}
.ai-preview__stage { min-height: 160px; display: grid; place-items: center; padding: 18px; }
.ai-preview p { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--muted); background: #061018; }
@keyframes ai-orb-spin { to { transform: rotate(360deg); } }
@keyframes ai-orb-breathe {
  0%, 100% { transform: scale(.92); filter: brightness(.92); }
  50% { transform: scale(1.08); filter: brightness(1.18); }
}
@keyframes ai-orb-ring {
  0% { transform: scale(.72); opacity: .7; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb::before, .ai-orb::after, .ai-think.is-live .ai-orb { animation: none; }
}
.ai-build__composer {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(#020c2100, var(--bg) 18%);
}
.ai-build__form { display: grid; gap: 10px; }
.ai-build__form textarea, .ai-build__form input { width: 100%; }
.ai-build__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-dns {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--dc-border);
  background: #071a38;
}
.ai-dns ul { margin: 8px 0 0; padding-left: 18px; }
.ai-dns li { margin: 6px 0; }
html[data-portal-theme="light"] .ai-msg--ai { background: #eef4ff; border-color: #cfe0ff; }
html[data-portal-theme="light"] .ai-msg--user { color: #fff; }
html[data-portal-theme="light"] .ai-progress, html[data-portal-theme="light"] .ai-dns, html[data-portal-theme="light"] .ai-think { background: #fff; }

.domain-store { max-width: 720px; display: grid; gap: 14px; }
.domain-store__search { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.domain-store__search label { margin: 0; }
.domain-pay-prompt {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #1d4ed8;
  background: #102a56;
}
.domain-pay-prompt__price { margin: 0 0 6px; font-size: 1.05rem; }
.domain-pay-prompt p { margin: 0; }
html[data-portal-theme="light"] .domain-pay-prompt {
  background: #eef4ff;
  border-color: #93c5fd;
}
.ai-build__pay { display: grid; gap: 10px; }
.domain-results { display: grid; gap: 8px; }
.theme-overlay__panel.domain-picker {
  width: min(680px, 100%);
  max-height: min(86vh, 740px);
  overflow: auto;
}
.domain-picker h2 { margin: 0 32px 8px 0; }
.domain-picker .domain-results { margin-top: 12px; }
.domain-picker .domain-result { grid-template-columns: 1fr auto auto; }
html[data-portal-theme="light"] .domain-picker .domain-result { background: #fff; }
.domain-result {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  background: #071a38;
}
.domain-result strong { display: block; }
.domain-result__pill {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
}
.domain-result.ok .domain-result__pill { color: #34d399; }
.domain-result.taken .domain-result__pill { color: #f87171; }
.domain-result__pay { text-align: right; }
.domain-result__pay b { display: block; }
.domain-result__pay small { color: var(--muted); }
.domain-order__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.domain-order__steps span {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 6px;
  border-radius: 8px;
  background: #061428;
  color: var(--muted);
}
.domain-order__steps span.is-on { color: #fff; background: #1d4ed8; }
.domain-order__steps span.is-bad { background: #7f1d1d; color: #fecaca; }
html[data-portal-theme="light"] .domain-result,
html[data-portal-theme="light"] .domain-order { background: #fff; }
html[data-portal-theme="light"] .domain-order__steps span { background: #eef4ff; }
@media (max-width: 720px) {
  .domain-store__search, .domain-result { grid-template-columns: 1fr; }
  .domain-order__steps { grid-template-columns: 1fr 1fr; }
}
.admin-sites { display: grid; gap: 8px; margin-top: 14px; }
.admin-site-row {
  display: grid;
  grid-template-columns: 1.3fr 1.4fr auto auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--dc-border);
  border-radius: 12px;
  background: #071a38;
}
.admin-site-row strong { display: block; }
.admin-site-row small, .admin-site-row a { color: var(--muted); font-size: 12px; }
.admin-site-row code { font-size: 12px; }
#special-ids-form label { display: grid; gap: 6px; margin: 12px 0; font-weight: 600; }
html[data-portal-theme="light"] .admin-site-row { background: #fff; }
@media (max-width: 900px) {
  .admin-site-row { grid-template-columns: 1fr 1fr; }
}
.admin-stats { display: grid; gap: 16px; margin-top: 16px; }
.admin-stats-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.admin-stats-shell .admin-stats { margin-top: 0; }
.admin-stats-side {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 120px);
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line, #d5deeb);
  border-radius: 16px;
  background: var(--card, #fff);
}
.admin-stats-side h3 { margin: 0; font-size: 15px; }
.admin-stats-side > .muted { margin: 0; font-size: 12px; }
.admin-stats-side__list { display: grid; gap: 8px; }
.admin-stats-side__item {
  display: grid;
  gap: 2px;
  text-align: left;
  width: 100%;
  border: 1px solid var(--line, #d5deeb);
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.admin-stats-side__item b { font-size: 14px; }
.admin-stats-side__item small { font-size: 13px; font-weight: 700; color: #0f766e; }
.admin-stats-side__item em { font-size: 11px; color: #64748b; font-style: normal; }
.admin-stats-side__item.is-missing small { color: #b45309; }
.admin-stat-card { padding: 16px; }
.admin-stat-card h2 { margin: 0 0 4px; font-size: 18px; }
.admin-stat-card__phone {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.admin-stat-card__phone b { color: var(--text); }
.admin-stat-card__phone--missing { color: #b45309; font-weight: 700; }
.admin-stat-card__totals { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 13px; }
.admin-stat-card__totals b { color: var(--text); }
.admin-stat-card .commission-table { min-width: 720px; }
@media (max-width: 980px) {
  .admin-stats-shell { grid-template-columns: 1fr; }
  .admin-stats-side { position: relative; top: 0; max-height: 280px; order: -1; }
}

.share-page {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 40px 16px 64px;
}
.share-page__card {
  width: min(860px, 100%);
  display: grid;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--dc-border);
  border-radius: 20px;
  background: var(--card);
}
.share-page .brand,
.share-page a[href="/login"],
.share-page a[href="/dashboard"],
.share-page a[href="/access-keys"],
.share-page p.muted:has(a[href="/login"]),
.share-page p.muted:has(a[href="/dashboard"]),
.share-page p.muted:has(a[href="/access-keys"]) {
  display: none !important;
}
.share-page .commission-stats article {
  background: #eef3f9;
  border: 1px solid #d5deeb;
  color: #12203a;
}
.share-page .commission-stats small,
.share-page .commission-stats em { color: #5b6f8c; }
.share-page .commission-stats strong { color: #0b1220; }
.share-open-form, .share-create-form, .share-created { display: grid; gap: 12px; }
.share-open-form input, .share-created input { width: 100%; }
.share-scopes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 14px;
  margin: 4px 0 12px;
}
.share-scopes label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
}
.share-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.share-chip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f0ff;
  color: #1e3a8a;
  font-size: 11px;
  font-weight: 700;
}
.share-key-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--dc-border);
}
.share-key-row:last-child { border-bottom: 0; }
.share-key-row small, .share-key-row__meta { color: var(--muted); font-size: 12px; display: grid; gap: 4px; }
.share-key-row.is-revoked { opacity: .55; }
.share-period { margin-top: 8px; }
html[data-portal-theme="light"] .share-chip { background: #e8f0ff; color: #1e3a8a; }
@media (max-width: 720px) {
  .share-key-row { grid-template-columns: 1fr; }
}

.sabar {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 6000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: Inter, system-ui, sans-serif;
}
.sabar__fab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  box-shadow: 0 12px 32px #2563eb66;
  cursor: pointer;
  font-weight: 800;
}
.sabar__fab-name { font-size: 13px; }
.sabar__fab-x { font-size: 26px; line-height: 1; }
.sabar__fab-pulse {
  position: absolute; inset: -5px; border-radius: inherit;
  border: 2px solid #2563eb; pointer-events: none;
  animation: sabar-pulse 2.2s ease-out infinite;
}
.sabar__fab--nudge {
  background: linear-gradient(135deg, #f59e0b, #2563eb);
  animation: sabar-nudge 0.75s ease-in-out infinite;
}
@keyframes sabar-nudge {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-14deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}
.sabar__bubble--notice {
  border: 1px solid #f59e0b;
  background: #422006;
  color: #fde68a;
}
.sabar__who--notice { color: #fbbf24; }
@keyframes sabar-pulse {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.18); }
}
.sabar__panel {
  width: min(380px, calc(100vw - 24px));
  height: min(580px, calc(100vh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: #0b1220; color: #e2e8f0;
  box-shadow: 0 24px 64px #00000073; border: 1px solid #1e293b;
}
.sabar__head {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px;
  gap: 10px; align-items: center; padding: 12px 12px 12px 14px;
  background: linear-gradient(135deg, #1d4ed8, #0b1220);
}
.sabar__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800;
  background: #fff; color: #2563eb;
}
.sabar__head strong { display: block; font-size: 15px; }
.sabar__head em { display: block; font-size: 11px; font-style: normal; color: #cbd5e1; }
.sabar__close {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: #ffffff22; color: #fff; font-size: 22px; cursor: pointer;
}
.sabar__thread {
  flex: 1; overflow: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.sabar__bubble {
  margin: 0; max-width: 92%; padding: 9px 12px; border-radius: 14px;
  font-size: 13px; line-height: 1.45; white-space: pre-wrap;
}
.sabar__bubble p { margin: 0; }
.sabar__pic {
  display: block; width: 88px; height: 88px; object-fit: cover;
  border-radius: 16px; margin-top: 8px; background: #0f172a;
}
.sabar__bubble--progress { width: 100%; max-width: 100%; }
.sabar__steps {
  margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: #cbd5e1;
}
.sabar__steps li.is-on { color: #7dd3fc; font-weight: 700; }
.sabar__bubble--assistant { align-self: flex-start; background: #1e293b; }
.sabar__bubble--user { align-self: flex-end; background: #2563eb; color: #fff; }
.sabar__bubble--typing { opacity: .75; font-style: italic; }
.sabar__bubble--admin { align-self: flex-start; background: #14532d; }
.sabar__bubble--system {
  align-self: center; background: transparent; color: #94a3b8;
  border: 1px dashed #334155; font-size: 12px; text-align: center;
}
.sabar__who { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #86efac; margin-bottom: 4px; }
.sabar__tools {
  display: flex; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid #1e293b; background: #0f172a;
}
.sabar__tools button {
  border: 1px solid #334155; background: #111827; color: #e2e8f0;
  border-radius: 999px; padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.sabar__tools button:disabled { opacity: .45; cursor: default; }
.sabar__chats {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 6px;
  border-bottom: 1px solid #1e293b;
}
.sabar__chat {
  flex: 0 0 auto; max-width: 160px; text-align: left;
  border: 1px solid #334155; background: #111827; color: #cbd5e1;
  border-radius: 10px; padding: 6px 8px; cursor: pointer;
}
.sabar__chat b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sabar__chat small { display: block; font-size: 10px; color: #94a3b8; }
.sabar__chat.is-on { border-color: #38bdf8; color: #fff; }
.sabar__chat.is-wait small { color: #fbbf24; font-weight: 700; }
.sabar__meta {
  display: block; margin-top: 6px; font-size: 10px; letter-spacing: .02em;
  opacity: .82;
}
.sabar__meta--wait { color: #fde68a; font-weight: 700; opacity: 1; }
.sabar-inbox__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.migrate-card { display: grid; gap: 14px; max-width: 640px; }
.migrate-card form { display: grid; gap: 12px; }
.migrate-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.migrate-card input, .migrate-card select {
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font: inherit; background: var(--card, #fff);
}
.migrate-live { margin: 0; font-size: 13px; color: var(--muted); }
.sabar__fab-badge {
  position: absolute; top: -6px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
}
.sabar-inbox { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; min-height: 70vh; }
.sabar-inbox__list { display: flex; flex-direction: column; gap: 8px; }
.sabar-inbox__item {
  display: grid; gap: 2px; text-align: left; border: 1px solid var(--line);
  background: var(--card, #fff); border-radius: 12px; padding: 10px 12px; cursor: pointer;
}
.sabar-inbox__item b { font-size: 13px; }
.sabar-inbox__item small, .sabar-inbox__item em { color: #64748b; font-size: 12px; font-style: normal; }
.sabar-inbox__item.is-on { border-color: #2563eb; box-shadow: 0 0 0 2px #2563eb22; }
.sabar-inbox__item.is-urgent { border-color: #ef4444; }
.sabar-inbox__chat { display: flex; flex-direction: column; min-height: 70vh; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card, #fff); }
.sabar-inbox__head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sabar-inbox__head small { display: block; color: #64748b; }
.sabar-inbox__summary { padding: 12px 16px; border-bottom: 1px solid var(--line); }
.sabar-inbox__summary p { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.sabar-inbox__thread { flex: 1; overflow: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.sabar-inbox__msg { max-width: 92%; padding: 8px 12px; border-radius: 12px; background: #e2e8f0; }
.sabar-inbox__msg small { display: block; font-size: 11px; color: #475569; margin-bottom: 4px; }
.sabar-inbox__msg p { margin: 0; white-space: pre-wrap; font-size: 13px; }
.sabar-inbox__msg--user { align-self: flex-start; background: #dbeafe; }
.sabar-inbox__msg--admin { align-self: flex-end; background: #dcfce7; }
.sabar-inbox__msg--sabar { align-self: flex-start; background: #1e293b; color: #e2e8f0; }
.sabar-inbox__msg--sabar small { color: #93c5fd; }
.sabar-inbox__msg--system { align-self: center; background: transparent; border: 1px dashed #94a3b8; }
.sabar-inbox__reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.sabar-inbox__reply textarea { border: 1px solid var(--line); border-radius: 12px; padding: 10px; font: inherit; min-height: 44px; }
@media (max-width: 900px) {
  .sabar-inbox { grid-template-columns: 1fr; }
}
.sabar__bubble--user { align-self: flex-end; background: #2563eb; color: #fff; }
.sabar__bubble--typing { opacity: .75; font-style: italic; }
.sabar__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sabar__chips button {
  border: 1px solid #334155; background: #111827; color: #e2e8f0;
  border-radius: 999px; padding: 6px 10px; font-size: 11px; cursor: pointer;
}
.sabar__composer {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px; padding: 10px; border-top: 1px solid #1e293b;
}
.sabar__composer textarea {
  resize: none; min-height: 40px; border: 1px solid #334155;
  border-radius: 12px; background: #111827; color: #f8fafc;
  padding: 10px 12px; font: inherit; font-size: 13px;
}
.sabar__composer button {
  border: 0; border-radius: 12px; padding: 0 14px;
  font-weight: 800; color: #fff; background: #2563eb; cursor: pointer;
}
.sabar__composer button:disabled { opacity: .45; cursor: default; }
@media (max-width: 720px) {
  .sabar { right: 12px; bottom: 12px; }
  .sabar__panel { height: min(70vh, calc(100vh - 78px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sabar__fab-pulse,
  .sabar__fab--nudge { animation: none; }
}