:root {
  --dh-navy: #0f1834;
  --dh-navy-2: #172144;
  --dh-accent: #4d48f5;
  --dh-accent-soft: #ecebff;
  --dh-blue-soft: #dfe9ff;
  --dh-text: #33343a;
  --dh-muted: #6e7077;
  --dh-line: #dedfe4;
  --dh-page: #f7f7f8;
  --dh-card: #ffffff;
  --dh-green: #4fac68;
  --dh-red: #e24661;
  --dh-orange: #e3913e;
  --dh-shadow: 0 12px 34px rgba(20, 24, 42, 0.1);
  --dh-radius: 8px;
  --dh-space: clamp(20px, 3vw, 42px);
  --dh-bar: 64px;
  font-family: Poppins, Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: Poppins;
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Poppins;
  src: url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--dh-text);
  background: var(--dh-page);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(77, 72, 245, 0.34);
  outline-offset: 2px;
}

.dh-subtab:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(77, 72, 245, 0.28);
}

a {
  color: var(--dh-accent);
  text-decoration: none;
}

.dh-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.dh-topbar {
  min-height: var(--dh-bar);
  background: var(--dh-navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 54px);
  gap: 26px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.dh-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
}

.dh-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: #7a7d87;
  background: #f1f3f7;
  border-color: #d6d9e1;
  cursor: not-allowed;
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(214, 217, 225, 0.45);
}

label:has(:disabled) {
  color: #7a7d87;
}

.dh-brand {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 24px;
  white-space: nowrap;
}

.dh-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-block;
  background:
    radial-gradient(circle at 55% 48%, var(--dh-navy) 0 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, transparent 0 47%, #9bd45d 49% 62%, transparent 64%),
    conic-gradient(from 210deg, #9bd45d, #7dd3fc, #4d48f5, #9bd45d);
}

.dh-mainnav {
  display: flex;
  align-items: stretch;
  gap: 3px;
  height: var(--dh-bar);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.dh-nav-btn {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 0 18px;
  cursor: pointer;
  white-space: nowrap;
}

.dh-nav-btn.is-active {
  color: var(--dh-text);
  background: #fff;
  border-radius: 8px 8px 0 0;
}

.dh-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.dh-session-chip {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.dh-icon-circle,
.dh-avatar,
.dh-lang {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.88);
  background: transparent;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.dh-avatar,
.dh-lang {
  border: 0;
  background: var(--dh-accent-soft);
  color: var(--dh-accent);
}

.dh-profile-menu,
.dh-project-menu {
  display: none;
  position: absolute;
  z-index: 40;
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  box-shadow: var(--dh-shadow);
  min-width: 260px;
  padding: 10px 0;
}

.dh-profile-menu {
  top: 58px;
  right: 0;
}

.dh-profile-menu.is-open,
.dh-project-menu.is-open {
  display: block;
}

.dh-profile-menu button,
.dh-project-menu button {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
  padding: 14px 18px;
  color: var(--dh-text);
  text-align: left;
  cursor: pointer;
}

.dh-profile-menu button:hover,
.dh-project-menu button:hover {
  background: var(--dh-page);
}

.dh-profile-menu-label {
  display: block;
  padding: 10px 18px 6px;
  color: var(--dh-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.dh-main {
  flex: 1;
}

/* ── Login page: full-screen split layout ────────────────────────────────── */
body:has([data-view="login"].is-active) .dh-topbar,
body:has([data-view="login"].is-active) .dh-subbar { display: none !important; }

[data-view="login"].is-active {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
}

.dh-login-split {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.dh-login-promo {
  flex: 1;
  background: linear-gradient(150deg, #0c1128 0%, #172144 45%, #0f1c3e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  position: relative;
  overflow: hidden;
}
.dh-login-promo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 25%, rgba(77,72,245,.22) 0%, transparent 60%);
  pointer-events: none;
}
.dh-login-promo-inner {
  position: relative;
  max-width: 400px;
  width: 100%;
}
.dh-login-logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 52px;
}
.dh-login-logo-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.dh-login-promo-title {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 32px !important;
  line-height: 1.3 !important;
}
.dh-login-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.dh-login-features li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dh-login-feat-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: rgba(77,72,245,.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.dh-login-features b {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.dh-login-features p {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  margin: 0;
  line-height: 1.55;
}

/* Form panel */
.dh-login-form-panel {
  width: 480px;
  flex-shrink: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  overflow-y: auto;
}
.dh-login-form-inner {
  width: 100%;
  max-width: 360px;
}
.dh-login-form-inner [data-login-title] {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 0 0 8px !important;
}
.dh-login-subtitle {
  font-size: 14px;
  color: #777;
  margin: 0 0 32px;
}
.dh-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.dh-login-field label {
  font-size: 13px;
  font-weight: 600;
  color: #222;
}
.dh-login-field input {
  height: 48px;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fafafa;
  color: #111;
  width: 100%;
  box-sizing: border-box;
}
.dh-login-field input:focus {
  border-color: var(--dh-accent);
  box-shadow: 0 0 0 3px rgba(77,72,245,.1);
  background: #fff;
}
.dh-login-password-wrap { position: relative; }
.dh-login-password-wrap input { padding-right: 48px; }
.dh-login-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  padding: 4px;
  line-height: 1;
  transition: color .15s;
}
.dh-login-eye:hover { color: #555; }
.dh-login-submit {
  width: 100%;
  height: 52px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 8px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .dh-login-promo { display: none; }
  .dh-login-form-panel { width: 100%; min-height: 100dvh; padding: 40px 24px; }
}

.dh-view {
  display: none;
}

.dh-view.is-active {
  display: block;
}

.dh-subbar {
  min-height: 56px;
  display: flex;
  align-items: end;
  gap: 18px;
  padding: 0 clamp(18px, 8vw, 180px);
  background: #fff;
  border-bottom: 1px solid var(--dh-line);
  box-shadow: 0 6px 14px rgba(20, 24, 42, 0.06);
  overflow-x: auto;
}

.dh-subtab {
  min-height: 52px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dh-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  cursor: pointer;
}

.dh-subtab.is-active {
  color: var(--dh-text);
  border-color: var(--dh-accent);
}

.dh-subbar-actions {
  margin-left: auto;
  align-self: center;
}

.dh-subbar-actions .dh-primary {
  white-space: nowrap;
}

.dh-content {
  width: min(1680px, calc(100% - 36px));
  margin: 0 auto;
  padding: 36px 0 72px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 20px;
  font-weight: 700;
}

h2 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

h3 {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.dh-muted {
  color: var(--dh-muted);
}

.dh-title-row,
.dh-panel-head,
.dh-project-head,
.dh-filter-row {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}

.dh-title-row > div:first-child {
  min-width: 0;
}

.dh-title-row h1 {
  margin-bottom: 16px;
}

.dh-title-actions {
  display: flex;
  align-self: flex-start;
  padding-top: 18px;
}

.dh-primary,
.dh-secondary,
.dh-soft,
.dh-link-btn,
.dh-kebab {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
}

.dh-primary {
  background: var(--dh-accent);
  color: #fff;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 6px 14px rgba(77, 72, 245, 0.2);
}

.dh-secondary,
.dh-soft {
  background: var(--dh-accent-soft);
  color: var(--dh-accent);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dh-soft {
  min-height: 34px;
  padding: 0 14px;
}

.dh-link-btn,
.dh-kebab {
  background: transparent;
  color: var(--dh-accent);
}

.dh-kebab {
  font-size: 26px;
  line-height: 1;
  width: 38px;
}

.dh-row-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.dh-row-actions .dh-soft {
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
}

.dh-row-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dh-row-actions code {
  display: block;
  flex-basis: 100%;
  color: var(--dh-muted);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.dh-danger-action {
  color: var(--dh-red);
  background: rgba(226, 70, 97, 0.1);
}

.dh-service-grid,
.dh-market-grid,
.dh-extra-grid,
.dh-card-grid-two,
.dh-panel-grid,
.dh-choice-grid,
.dh-profile-grid {
  display: grid;
  gap: 22px;
}

.dh-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dh-service-grid--three {
  margin-bottom: 26px;
}

.dh-market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dh-panel-grid,
.dh-card-grid-two,
.dh-profile-grid,
.dh-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dh-service-card,
.dh-panel,
.dh-table-card,
.dh-project-details,
.dh-info-band,
.dh-market-grid article,
.dh-extra-grid article,
.dh-payment-card,
.dh-add-card,
.dh-renew-card,
.dh-choice-grid article,
.dh-warning,
.dh-empty {
  background: var(--dh-card);
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
}

.dh-service-card,
.dh-market-grid article {
  min-height: 214px;
  padding: 28px 30px;
  position: relative;
}

[data-dev-label] {
  position: relative;
}

[data-dev-label]::after {
  content: attr(data-dev-label);
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  min-height: 18px;
  padding: 2px 7px;
  border: 1px solid rgba(77, 72, 245, 0.18);
  border-radius: 999px;
  background: rgba(77, 72, 245, 0.06);
  color: rgba(77, 72, 245, 0.68);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
}

.dh-billing-view[data-dev-label]::after,
.dh-admin-view[data-dev-label]::after,
.dh-tool-panel[data-dev-label]::after {
  top: 0;
  right: 0;
}

.dh-referral-hero[data-dev-label]::after {
  top: 24px;
  right: clamp(18px, 8vw, 180px);
}

.dh-modal form[data-dev-label]::after {
  top: 16px;
  right: 58px;
}

.dh-service-card h2,
.dh-market-grid h2 {
  max-width: 70%;
}

.dh-service-card > p,
.dh-market-grid article > p {
  max-width: 72%;
}

.dh-service-card .dh-line-icon,
.dh-market-grid .dh-line-icon {
  position: absolute;
  right: 28px;
  top: 28px;
}

.dh-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
  color: var(--dh-muted);
}

.dh-panel {
  padding: 26px;
}

.dh-panel-head {
  align-items: flex-start;
}

.dh-panel-head .dh-pill {
  flex: 0 0 auto;
  margin-top: 4px;
}

.dh-panel-head h2 {
  max-width: 460px;
}

.dh-stack-list {
  display: grid;
  gap: 14px;
}

.dh-stack-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dh-line);
}

.dh-stack-list span,
.dh-panel p {
  color: var(--dh-muted);
}

.dh-pill,
.dh-badge,
.dh-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  border-radius: 4px;
  padding: 0 8px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
}

.dh-pill {
  color: var(--dh-accent);
  background: var(--dh-accent-soft);
}

.dh-badge {
  color: #fff;
  background: var(--dh-accent);
}

.dh-status.is-green {
  color: var(--dh-green);
  background: rgba(79, 172, 104, 0.12);
}

.dh-status.is-red {
  color: var(--dh-red);
  background: rgba(226, 70, 97, 0.12);
}

.dh-status.is-orange {
  color: var(--dh-orange);
  background: rgba(227, 145, 62, 0.14);
}

.dh-job-progress {
  display: grid;
  gap: 4px;
  min-width: 180px;
  max-width: 260px;
  margin-top: 6px;
}

.dh-job-progress small {
  color: var(--dh-muted);
}

.dh-meters {
  display: grid;
  gap: 18px;
}

.dh-meters label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  font-weight: 500;
}

progress {
  width: 100%;
  height: 10px;
  grid-column: 1 / -1;
  accent-color: var(--dh-accent);
}

.dh-job-progress progress {
  height: 7px;
  grid-column: auto;
}

.dh-table-card {
  position: relative;
  overflow-x: auto;
}

.dh-table {
  width: 100%;
  border-collapse: collapse;
}

.dh-table th,
.dh-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--dh-line);
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

.dh-table th {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dh-muted);
}

.dh-table tr:last-child td {
  border-bottom: 0;
}

.dh-server-health {
  display: grid;
  gap: 4px;
}

.dh-server-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.dh-server-details div {
  border: 1px solid var(--dh-line);
  border-radius: 8px;
  padding: 10px 12px;
}

.dh-server-details b,
.dh-server-details span {
  display: block;
}

.dh-server-details span {
  color: var(--dh-muted);
  font-size: 13px;
  margin-top: 3px;
}

.dh-project-menu {
  position: fixed;
  right: auto;
  top: auto;
  max-height: min(420px, calc(100vh - 24px));
  overflow: auto;
}

.dh-project-details {
  margin-top: 28px;
}

.dh-access-section {
  margin-top: 34px;
}

.dh-access-section .dh-table-card {
  margin-top: 22px;
}

.dh-project-head {
  padding: 28px;
  justify-content: flex-start;
}

.dh-project-head .dh-line-icon {
  flex: 0 0 72px;
  margin: 0;
}

.dh-project-head > .dh-soft {
  margin-left: auto;
}

.dh-project-head ul {
  margin: 0;
  padding-left: 20px;
}

.dh-project-resources {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--dh-line);
  background: var(--dh-line);
}

.dh-project-resources span {
  display: grid;
  gap: 4px;
  min-height: 82px;
  align-content: center;
  background: #fff;
  padding: 16px 22px;
  color: var(--dh-muted);
}

.dh-project-resources b {
  color: var(--dh-text);
  overflow-wrap: anywhere;
}

.dh-tabs {
  display: flex;
  gap: 20px;
  border-top: 1px solid var(--dh-line);
  border-bottom: 1px solid var(--dh-line);
  padding: 0 22px;
}

.dh-tabs button {
  min-height: 64px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dh-muted);
  cursor: pointer;
}

.dh-tabs button.is-active {
  color: var(--dh-text);
  border-color: var(--dh-accent);
}

.dh-extra-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 28px;
}

.dh-extra-grid article {
  min-height: 300px;
  padding: 26px;
  text-align: center;
  position: relative;
}

.dh-extra-grid .dh-badge,
.dh-market-grid .dh-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

.dh-line-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  color: #8a8d94;
  position: relative;
}

.dh-line-icon::before,
.dh-line-icon::after {
  content: "";
  position: absolute;
  border: 3px solid currentColor;
}

.dh-line-icon::before {
  inset: 8px;
  border-radius: 12px;
  background: #eef3fb;
}

.dh-line-icon::after {
  width: 18px;
  height: 18px;
  right: 8px;
  bottom: 8px;
  border-radius: 6px;
  background: #fff;
}

.dh-line-icon[data-icon="hosting"]::before {
  border-radius: 16px;
}

.dh-line-icon[data-icon="hosting"]::after {
  width: 12px;
  height: 12px;
  left: 14px;
  top: 14px;
  right: auto;
  bottom: auto;
  border-radius: 50%;
  box-shadow: 22px 0 0 -3px #fff, 22px 0 0 0 currentColor, 11px 22px 0 -3px #fff, 11px 22px 0 0 currentColor;
}

.dh-line-icon[data-icon="bot"]::before {
  border-radius: 50%;
}

.dh-line-icon[data-icon="bot"]::after {
  width: 34px;
  height: 24px;
  inset: 24px 19px;
  border-radius: 14px;
}

.dh-line-icon[data-icon="server"]::before,
.dh-line-icon[data-icon="files"]::before,
.dh-line-icon[data-icon="backup"]::before {
  border-radius: 2px;
}

.dh-line-icon[data-icon="domain"]::before,
.dh-line-icon[data-icon="cdn"]::before,
.dh-line-icon[data-icon="scanner"]::before {
  border-radius: 50%;
}

.dh-line-icon[data-icon="ssl"]::before {
  border-radius: 18px 18px 6px 6px;
}

.dh-line-icon[data-icon="users"]::before,
.dh-line-icon[data-icon="email"]::before {
  border-radius: 50% 50% 8px 8px;
}

.dh-line-icon[data-icon="git"]::before,
.dh-line-icon[data-icon="deploy"]::before,
.dh-line-icon[data-icon="ssh"]::before {
  transform: rotate(45deg);
  inset: 13px;
}

.dh-line-icon[data-icon="git"]::after,
.dh-line-icon[data-icon="deploy"]::after,
.dh-line-icon[data-icon="ssh"]::after {
  display: none;
}

/* DB Server icon */
.dh-line-icon[data-icon="db-server"]::before {
  border-radius: 50%;
  inset: 18px 8px;
}
.dh-line-icon[data-icon="db-server"]::after {
  border-radius: 50%;
  top: 10px; left: 8px; right: 8px; height: 10px;
  bottom: auto;
}

/* LLM Server icon */
.dh-line-icon[data-icon="llm-server"]::before {
  border-radius: 4px;
  inset: 10px;
  transform: rotate(45deg) scale(0.7);
}
.dh-line-icon[data-icon="llm-server"]::after {
  inset: 16px;
  border-radius: 50%;
  background: var(--dh-accent);
  border: none;
}

.dh-filter-row {
  justify-content: flex-start;
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius) var(--dh-radius) 0 0;
  padding: 22px;
}

label {
  display: grid;
  gap: 8px;
  font-weight: 500;
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid #b9bbc2;
  border-radius: 6px;
  padding: 0 16px;
  color: var(--dh-text);
  background: #fff;
}

textarea {
  min-height: 86px;
  padding-top: 14px;
}

.dh-billing-view {
  display: none;
}

.dh-billing-view.is-active,
.dh-admin-view.is-active {
  display: block;
}

.dh-admin-view {
  display: none;
}

.dh-admin-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 24px;
}

.dh-admin-kpis article {
  min-height: 112px;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  display: grid;
  gap: 8px;
  align-content: center;
}

.dh-admin-kpis span {
  color: var(--dh-muted);
  font-weight: 500;
}

.dh-admin-kpis b {
  font-size: 28px;
}

.dh-payment-card,
.dh-add-card {
  min-height: 280px;
  padding: 28px;
  position: relative;
}

.dh-checkout-summary {
  margin-top: 22px;
  background: var(--dh-card);
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.dh-payment-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-content: space-between;
}

.dh-payment-card strong {
  grid-column: 1 / -1;
  font-size: 28px;
}

.dh-payment-card div:not(.dh-mastercard) {
  display: grid;
  gap: 4px;
}

.dh-payment-card small {
  color: var(--dh-muted);
}

.dh-mastercard {
  width: 92px;
  height: 54px;
  border: 1px solid var(--dh-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dh-mastercard span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2332b;
  margin: -4px;
}

.dh-mastercard span + span {
  background: #f5a333;
}

.dh-add-card {
  display: grid;
  place-items: center;
  text-align: center;
}

.dh-plus {
  width: 68px;
  height: 68px;
  border: 2px solid var(--dh-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--dh-accent);
  font-size: 36px;
}

.dh-renew-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 450px) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
}

.dh-renew-card + .dh-renew-card {
  margin-top: 16px;
}

.dh-renew-card label {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
}

.dh-renew-card input[type="checkbox"] {
  width: 22px;
  min-height: 22px;
  padding: 0;
}

.dh-renew-card label small {
  grid-column: 2;
  color: var(--dh-muted);
}

.dh-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.dh-checkbox-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dh-checkbox-line input[type="checkbox"] {
  width: 22px;
  min-width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  accent-color: var(--dh-accent);
}

.dh-runtime-picker {
  border: 1px solid #b9bbc2;
  border-radius: 6px;
  padding: 14px 16px 16px;
  margin: 0;
  background: #fff;
}

.dh-runtime-picker legend {
  padding: 0 6px;
  font-weight: 600;
}

.dh-runtime-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dh-runtime-group label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--dh-line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fafafa;
}

.dh-runtime-group input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: var(--dh-accent);
}

.dh-resource-form {
  display: grid;
  gap: 18px;
}

.dh-resource-form label {
  grid-template-columns: 120px 1fr auto;
  align-items: center;
}

.dh-resource-form input[type="range"] {
  min-height: auto;
  padding: 0;
  accent-color: var(--dh-accent);
}

.dh-info-band {
  min-height: 116px;
  padding: 22px;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.dh-profile-card {
  text-align: center;
}

.dh-avatar-large {
  width: 130px;
  height: 130px;
  margin: 0 auto 18px;
  font-size: 48px;
}

.dh-inline-field {
  display: grid;
  grid-template-columns: 1fr auto;
}

.dh-inline-field input {
  border-radius: 6px 0 0 6px;
}

.dh-inline-field button {
  border: 1px solid #b9bbc2;
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: #fff;
  color: var(--dh-accent);
  padding: 0 18px;
  font-weight: 600;
  text-transform: uppercase;
}

.dh-shell.is-tools-mode .dh-topbar {
  display: none;
}

.dh-tools-view.is-active {
  display: block;
  min-height: 100vh;
}

.dh-tools-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: calc(100vh - var(--dh-bar));
}

.dh-tools-select-label {
  display: none;
}

.dh-tools-sidebar {
  background: #fff;
  border-right: 1px solid var(--dh-line);
  padding: 24px 20px 40px;
  overflow-y: auto;
}

.dh-tools-sidebar a,
.dh-tools-sidebar button,
.dh-tools-sidebar h3 {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0 16px;
  text-align: left;
  color: var(--dh-text);
}

.dh-tools-sidebar button {
  border-radius: var(--dh-radius);
  cursor: pointer;
}

.dh-tools-sidebar h3 {
  margin: 16px 0 2px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dh-muted);
  min-height: 30px;
}

.dh-tools-sidebar button.is-active {
  background: #cfe0ff;
  font-weight: 600;
}

.dh-tools-main {
  min-width: 0;
}

.dh-tools-header {
  height: var(--dh-bar);
  background: #fff;
  border-bottom: 1px solid var(--dh-line);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 28px;
}

.dh-tools-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--dh-text);
}

.dh-tools-brand .dh-brand-mark {
  width: 26px;
  height: 26px;
}

.dh-tools-header .dh-icon-circle {
  color: var(--dh-text);
  border-color: var(--dh-line);
}

.dh-tools-header .dh-avatar {
  margin-left: auto;
}

.dh-tool-panel {
  display: none;
  padding: 34px clamp(20px, 3vw, 46px) 70px;
}

.dh-tool-panel.is-active {
  display: block;
}

.dh-pinned-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.dh-pinned-grid button {
  min-height: 210px;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  background: #fff;
  font-weight: 600;
  color: var(--dh-text);
  cursor: pointer;
}

.dh-split-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
  gap: 22px;
}

.dh-split-copy > div + div {
  border-left: 1px solid var(--dh-line);
}

.dh-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.dh-log-output {
  min-height: 160px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--dh-line);
  border-radius: 6px;
  background: #10172d;
  color: #eef3fb;
  padding: 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.dh-wide-label {
  margin-bottom: 22px;
}

.dh-warning {
  border-color: var(--dh-orange);
  padding: 24px;
}

.dh-warning b {
  color: var(--dh-text);
}

.dh-empty {
  min-height: 240px;
  display: grid;
  place-items: center;
  color: var(--dh-muted);
  font-size: 24px;
  font-weight: 600;
}

.dh-modal {
  border: 0;
  border-radius: var(--dh-radius);
  box-shadow: var(--dh-shadow);
  width: min(680px, calc(100vw - 34px));
  padding: 0;
}

.dh-server-actions-modal {
  width: min(1040px, calc(100vw - 34px));
  max-height: min(92vh, 960px);
  overflow: auto;
}

.dh-wizard-modal {
  width: min(980px, calc(100vw - 34px));
  max-height: min(92vh, 920px);
  overflow: auto;
}

.dh-wizard-modal .dh-form-grid {
  margin-bottom: 0;
}

.dh-modal::backdrop {
  background: rgba(10, 12, 18, 0.7);
}

.dh-modal form {
  padding: 34px;
  display: grid;
  gap: 18px;
}

.dh-action-section {
  border: 1px solid #dfe1e8;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  display: grid;
  gap: 14px;
}

.dh-action-section h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.dh-action-section .dh-form-grid {
  margin-bottom: 0;
}

.dh-server-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dh-server-type-option {
  border: 1px solid #dfe1e8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f8f9fc;
  font-size: 14px;
  line-height: 1.35;
}

.dh-server-type-option b {
  display: block;
  color: var(--dh-text);
  font-size: 15px;
  margin-bottom: 2px;
}

.dh-modal-close {
  position: absolute;
  right: 16px;
  top: 14px;
  border: 0;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
}

.dh-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  color: #fff;
  background: #5a8df8;
  font-weight: 600;
  font-size: 28px;
}

.dh-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 8px 0 12px;
}

.dh-steps span {
  border-top: 2px solid #b9bbc2;
  padding-top: 14px;
  font-weight: 600;
}

.dh-steps .is-done,
.dh-steps .is-active {
  border-color: var(--dh-accent);
  color: var(--dh-accent);
}

.dh-choice-grid article {
  padding: 24px;
}

.dh-choice-grid article.is-selected {
  border: 2px solid var(--dh-accent);
}

.dh-dc-modal select {
  min-height: 280px;
}

.dh-footer {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(18px, 3vw, 54px);
  color: var(--dh-muted);
}

.dh-footer span {
  justify-self: center;
}

.dh-danger {
  color: var(--dh-red);
}

.dh-feedback {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  max-width: min(420px, calc(100vw - 36px));
  border-radius: var(--dh-radius);
  background: var(--dh-navy);
  color: #fff;
  padding: 16px 20px;
  box-shadow: var(--dh-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dh-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.dh-referral-hero {
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);
  gap: 42px;
  align-items: center;
  padding: 64px clamp(18px, 8vw, 180px);
  background: #f4f0ff;
}

.dh-referral-hero h1 {
  max-width: 560px;
}

.dh-referral-hero p {
  max-width: 640px;
  color: var(--dh-muted);
  font-size: 20px;
}

.dh-referral-link {
  max-width: 640px;
  margin: 28px 0 20px;
}

.dh-referral-art {
  min-height: 320px;
  position: relative;
}

.dh-referral-card {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: #fff;
  border: 1px solid var(--dh-line);
  box-shadow: var(--dh-shadow);
  color: var(--dh-accent);
  font-weight: 600;
}

.dh-referral-card.is-main {
  inset: 24px 70px 40px 20px;
  font-size: 72px;
  background: linear-gradient(135deg, #fff, #e7f3ff);
}

.dh-referral-card.is-small {
  width: 84px;
  height: 84px;
  right: 18px;
  top: 8px;
  font-size: 38px;
  background: #ddf4e5;
}

.dh-referral-paper {
  position: absolute;
  right: 56px;
  bottom: 14px;
  width: 150px;
  height: 96px;
  border: 3px solid var(--dh-navy);
  transform: rotate(-8deg);
  background: #eef3fb;
}

@media (max-width: 1100px) {
  .dh-service-grid,
  .dh-market-grid,
  .dh-extra-grid,
  .dh-pinned-grid,
  .dh-admin-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dh-tools-body {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .dh-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    min-height: auto;
    padding: 12px 18px;
    gap: 10px;
  }

  .dh-brand {
    min-width: 0;
    font-size: 22px;
  }

  .dh-brand span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dh-menu-toggle {
    display: inline-flex;
  }

  .dh-top-actions {
    margin-left: 0;
    gap: 8px;
  }

  .dh-top-actions .dh-icon-circle {
    display: none;
  }

  .dh-icon-circle,
  .dh-avatar,
  .dh-lang,
  .dh-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .dh-mainnav {
    display: none;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    height: auto;
    overflow: visible;
    padding-top: 6px;
  }

  .dh-nav-btn {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    text-align: center;
  }

  .dh-mainnav.is-open {
    display: grid;
  }

  .dh-subbar {
    min-height: 46px;
    gap: 4px;
    padding: 0 10px;
    flex-wrap: nowrap;
    box-shadow: 0 4px 10px rgba(20, 24, 42, 0.05);
    scrollbar-width: none;
  }

  .dh-subbar--with-actions {
    flex-wrap: wrap;
  }

  .dh-subbar::-webkit-scrollbar {
    display: none;
  }

  .dh-subtab {
    min-height: 46px;
    padding: 0 5px;
    font-size: 11px;
  }

  .dh-subbar-actions {
    order: 2;
    width: 100%;
    margin-left: 0;
    padding: 0 0 12px;
  }

  .dh-subbar-actions .dh-primary {
    min-height: 44px;
    padding-inline: 22px;
  }

  .dh-content {
    width: auto;
    padding-inline: 18px;
    padding-top: 30px;
  }

  h1 {
    overflow-wrap: anywhere;
  }

  .dh-title-row,
  .dh-panel-head,
  .dh-project-head,
  .dh-filter-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dh-project-head > .dh-soft {
    margin-left: 0;
  }

  .dh-title-actions {
    padding-top: 0;
  }

  .dh-service-grid,
  .dh-market-grid,
  .dh-panel-grid,
  .dh-card-grid-two,
  .dh-profile-grid,
  .dh-choice-grid,
  .dh-extra-grid,
  .dh-pinned-grid,
  .dh-admin-kpis,
  .dh-project-resources {
    grid-template-columns: 1fr;
  }

  .dh-form-grid,
  .dh-runtime-group,
  .dh-renew-card,
  .dh-checkout-summary,
  .dh-stack-list div,
  .dh-resource-form label,
  .dh-info-band {
    grid-template-columns: 1fr;
  }

  .dh-checkout-summary {
    display: grid;
  }

  .dh-service-card h2,
  .dh-market-grid h2,
  .dh-service-card > p,
  .dh-market-grid article > p {
    max-width: calc(100% - 78px);
  }

  .dh-service-card .dh-line-icon,
  .dh-market-grid .dh-line-icon {
    width: 54px;
    height: 54px;
    position: absolute;
    top: 22px;
    right: 22px;
    margin: 0;
  }

  .dh-line-icon[data-icon="hosting"]::after {
    box-shadow: 17px 0 0 -3px #fff, 17px 0 0 0 currentColor, 8px 17px 0 -3px #fff, 8px 17px 0 0 currentColor;
  }

  .dh-service-card,
  .dh-market-grid article {
    min-height: 232px;
    padding: 26px 30px;
  }

  .dh-tools-view.is-active {
    display: block;
  }

  .dh-tools-body {
    display: block;
    min-height: calc(100vh - var(--dh-bar));
  }

  .dh-tools-select-label {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid var(--dh-line);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--dh-muted);
  }

  .dh-tools-select-label select {
    min-height: 46px;
    font-size: 16px;
    text-transform: none;
    color: var(--dh-text);
  }

  .dh-tools-sidebar {
    display: none;
  }

  .dh-tools-header {
    gap: 8px;
    padding: 0 14px;
    min-height: 68px;
    height: auto;
  }

  .dh-tools-header > b {
    white-space: nowrap;
    font-size: 14px;
  }

  .dh-tools-brand b {
    display: none;
  }

  .dh-tools-header > span:last-of-type {
    flex: 1 1 68px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dh-session-chip {
    display: none;
  }

  .dh-table-card {
    overflow: visible;
  }

  .dh-table,
  .dh-table thead,
  .dh-table tbody,
  .dh-table tr,
  .dh-table th,
  .dh-table td {
    display: block;
    width: 100%;
  }

  .dh-table thead {
    display: none;
  }

  .dh-table tbody {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .dh-table tr {
    border: 1px solid var(--dh-line);
    border-radius: var(--dh-radius);
    background: #fff;
    padding: 12px 14px;
  }

  .dh-table td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 12px;
    border-bottom: 0;
    padding: 8px 0;
    overflow-wrap: anywhere;
  }

  .dh-table td::before {
    content: attr(data-label);
    color: var(--dh-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .dh-table td[data-label="Actions"] {
    align-items: center;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr) 36px;
  }

  .dh-table td[data-label="Actions"] .dh-soft {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    padding-inline: 12px;
  }

  .dh-table td[data-label="Actions"] .dh-row-actions {
    grid-column: 2 / -1;
  }

  .dh-table td[data-label="Actions"] .dh-kebab {
    grid-column: 3;
    justify-self: center;
  }

  .dh-server-details {
    grid-template-columns: 1fr;
  }

  .dh-referral-hero {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 0;
    padding: 34px 18px;
  }

  .dh-referral-hero p {
    font-size: 16px;
  }

  .dh-referral-art {
    min-height: 220px;
  }

  .dh-split-copy {
    grid-template-columns: 1fr;
  }

  .dh-split-copy > div + div {
    border-left: 0;
    border-top: 1px solid var(--dh-line);
    padding-top: 22px;
  }

  .dh-footer span {
    justify-self: start;
  }

  .dh-feedback {
    top: calc(var(--dh-bar) + 8px);
    right: 18px;
    bottom: auto;
    left: 18px;
    max-width: none;
  }
}

.dh-admin-alert-banner {
  background: rgba(226, 70, 97, 0.1);
  border: 1px solid var(--dh-red);
  color: var(--dh-red);
  border-radius: var(--dh-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dh-admin-alert-banner[hidden] {
  display: none !important;
}

.dh-admin-alert-banner-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dh-admin-alert-banner-title {
  font-weight: 600;
  font-size: 15px;
}

.dh-admin-alert-banner-detail {
  font-size: 13px;
  opacity: 0.9;
}

/* ── Phase 1: Profile, Manage Users, Services, Referrals, Marketplace ─────── */

/* Shared badge */
.dh-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.dh-badge--sale {
  background: var(--dh-accent);
  color: #fff;
}

/* Manage-users / Referrals / Marketplace sub-views */
.dh-manage-view,
.dh-referrals-view,
.dh-mp-view {
  display: none;
}
.dh-manage-view.is-active,
.dh-referrals-view.is-active,
.dh-mp-view.is-active {
  display: block;
}

/* Info band note variant */
.dh-info-band--note {
  background: var(--dh-blue-soft);
  border-radius: var(--dh-radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.dh-info-band--note p { margin: 0; font-size: 14px; }

/* Profile page layout */
.dh-profile-layout {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 32px;
  align-items: start;
}
.dh-profile-main { display: flex; flex-direction: column; gap: 24px; }
.dh-profile-section { padding: 28px 28px 24px; }
.dh-profile-section h2 { margin-bottom: 20px; }

.dh-profile-password-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.dh-profile-password-row label { flex: 1; }
.dh-profile-pw-form {
  background: var(--dh-page);
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: 16px;
  display: grid;
  gap: 12px;
}

.dh-profile-oauth-row {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--dh-line);
  padding-top: 20px;
}
.dh-oauth-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.dh-oauth-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.dh-oauth-icon--google { background: #fff; border: 1px solid var(--dh-line); color: #4285F4; }
.dh-oauth-icon--apple  { background: #000; color: #fff; }

/* 2FA card */
.dh-2fa-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.dh-2fa-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
}
.dh-2fa-info { font-size: 14px; color: var(--dh-muted); }
.dh-2fa-info h3 { color: var(--dh-text); margin-bottom: 8px; }

.dh-pill--inactive { background: var(--dh-line); color: var(--dh-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; display: inline-block; }
.dh-pill--active   { background: #d1fae5; color: #065f46; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; display: inline-block; }

/* Profile avatar */
.dh-profile-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.dh-profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  background: var(--dh-accent-soft);
  color: var(--dh-accent);
  font-size: 26px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Services grid */
.dh-services-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dh-service-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: 18px 24px;
}
.dh-service-block-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dh-service-block h2 { margin: 0; font-size: 16px; }
.dh-service-block p { margin: 4px 0 0; font-size: 13px; }

/* Referrals */
.dh-referrals-hero {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: center;
  background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 100%);
  border-radius: 16px;
  padding: 40px 48px;
  margin-bottom: 32px;
}
.dh-referrals-copy h1 { margin-bottom: 12px; }
.dh-referrals-copy p  { color: var(--dh-muted); margin-bottom: 20px; }
.dh-referral-link-label { font-size: 14px; font-weight: 600; display: block; }
.dh-referral-link-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.dh-referral-link-row input {
  flex: 1;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: 8px 14px;
  background: #fff;
  font-size: 14px;
  min-width: 0;
}
.dh-referrals-visual {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-referral-bubble {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--dh-shadow);
  position: absolute;
}
.dh-referral-bubble--a { top: 0; left: 20px; }
.dh-referral-bubble--b { bottom: 0; right: 20px; }

/* Marketplace grid */
.dh-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.dh-mp-card {
  background: #fff;
  border: 1px solid var(--dh-line);
  border-radius: var(--dh-radius);
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.dh-mp-card h3 { margin: 0; font-size: 16px; }
.dh-mp-card p  { font-size: 13px; color: var(--dh-muted); flex: 1; margin: 0; }
.dh-mp-actions { display: flex; gap: 8px; margin-top: 8px; }
.dh-mp-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dh-muted);
  margin-bottom: 4px;
  display: block;
}

@media (max-width: 860px) {
  .dh-profile-layout { grid-template-columns: 1fr; }
  .dh-profile-avatar-col { flex-direction: row; justify-content: flex-start; padding-top: 0; }
  .dh-2fa-card { grid-template-columns: 1fr; }
  .dh-referrals-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .dh-referrals-visual { display: none; }
}

/* ── Phase 2: 3-step Wizard ─────────────────────────────────────── */
.dh-wizard-modal { max-width: 680px; width: 96vw; padding: 32px 32px 28px; }
.dh-wizard-title { margin: 0 0 24px; font-size: 22px; }

.dh-wizard-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.dh-wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dh-muted);
  white-space: nowrap;
}
.dh-wizard-step.is-active { color: var(--dh-accent); }
.dh-wizard-step.is-done { color: var(--dh-green); }
.dh-wizard-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.dh-wizard-step.is-active .dh-wizard-step-num { background: var(--dh-accent); color: #fff; border-color: var(--dh-accent); }
.dh-wizard-step.is-done .dh-wizard-step-num  { background: var(--dh-green);     color: #fff; border-color: var(--dh-green); }
.dh-wizard-step-line { flex: 1; height: 2px; background: var(--dh-line); margin: 0 8px; min-width: 24px; }

.dh-wizard-pane { display: none; }
.dh-wizard-pane.is-active { display: block; }

.dh-domain-cards,
.dh-setup-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.dh-setup-cards { grid-template-columns: repeat(2, 1fr); }

.dh-domain-card,
.dh-setup-card {
  border: 2px solid var(--dh-line);
  border-radius: 10px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.dh-domain-card.is-selected,
.dh-setup-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-domain-card p,
.dh-setup-card p { font-size: 12px; color: var(--dh-muted); margin: 0; }
.dh-domain-card button,
.dh-setup-card button { margin-top: 8px; }
.dh-domain-card.is-selected button,
.dh-setup-card.is-selected button { background: var(--dh-accent); color: #fff; border-color: var(--dh-accent); }

.dh-wizard-domain-name { margin-bottom: 16px; }
.dh-wizard-domain-name label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.dh-wizard-domain-name input { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 14px; }

.dh-choose-app { background: var(--dh-page); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.dh-choose-app h3 { margin: 0 0 12px; font-size: 14px; }
.dh-app-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.dh-app-card {
  border: 2px solid var(--dh-line);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}
.dh-app-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-app-card p { font-size: 12px; color: var(--dh-muted); margin: 0; }
.dh-app-card button { align-self: flex-start; margin-top: 6px; }
.dh-link-btn { background: none; border: none; color: var(--dh-accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 0; text-decoration: underline; }

.dh-extras-review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.dh-extras-review-card {
  border: 2px solid var(--dh-line);
  border-radius: 10px;
  padding: 18px 16px 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dh-extras-review-card .dh-badge { position: absolute; top: 10px; right: 10px; }
.dh-extras-review-card p { font-size: 12px; color: var(--dh-muted); margin: 0; flex: 1; }
.dh-extras-review-card button { align-self: flex-start; margin-top: 8px; }
.dh-extras-review-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-extras-review-card.is-selected button { background: var(--dh-accent); color: #fff; border-color: var(--dh-accent); }

.dh-badge--hot { background: #e8440a; color: #fff; }

.dh-datacenter-row { margin-bottom: 20px; }
.dh-datacenter-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.dh-datacenter-row select { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 14px; max-width: 320px; }

.dh-wizard-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; border-top: 1px solid var(--dh-line); padding-top: 18px; }

.dh-wizard-success { text-align: center; padding: 20px 0 10px; }
.dh-wizard-checkmark {
  width: 64px; height: 64px;
  background: var(--dh-green);
  color: #fff;
  border-radius: 50%;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.dh-wizard-success h2 { margin: 0 0 6px; }
.dh-wizard-success-domain { color: var(--dh-muted); font-size: 14px; margin-bottom: 4px; }
.dh-wizard-success-url-row { margin: 0 0 18px; }
.dh-wizard-success-url { font-size: 13px; font-weight: 600; color: var(--dh-accent); word-break: break-all; }
.dh-site-url-link { color: var(--dh-accent); word-break: break-all; }
.dh-site-status { font-size: 11px; color: var(--dh-muted); margin-top: 4px; }
.dh-wizard-success-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; text-align: left; }
.dh-wizard-success-card {
  border: 1px solid var(--dh-line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dh-wizard-success-card p { font-size: 12px; color: var(--dh-muted); margin: 0; flex: 1; }
.dh-wizard-success-card button { align-self: flex-start; margin-top: 10px; }

/* ── Context menu additions ──────────────────────────────────────── */
.dh-menu-divider { border: none; border-top: 1px solid var(--dh-line); margin: 4px 0; }
.dh-menu-danger { color: #e8440a !important; }
.dh-menu-danger:hover { background: #fef2f0 !important; }
.dh-popover-inline {
  padding: 8px 12px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.dh-popover-inline input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--dh-line);
  border-radius: 5px;
  font-size: 13px;
  min-width: 0;
}
.dh-popover-inline button {
  padding: 5px 10px;
  border: 1px solid var(--dh-accent);
  background: var(--dh-accent);
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* Delete confirm dialog button */
.dh-danger {
  padding: 8px 18px;
  background: #e8440a;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.dh-danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Project detail EXTRAS tab ───────────────────────────────────── */
.dh-project-detail-tabs { margin-top: 16px; }
.dh-project-detail-view { display: none; }
.dh-project-detail-view.is-active { display: block; }

.dh-extras-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 16px 0;
}
.dh-extra-card {
  border: 1px solid var(--dh-line);
  border-radius: 10px;
  padding: 14px 12px 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--dh-card);
}
.dh-extra-card .dh-badge { position: absolute; top: 8px; right: 8px; font-size: 10px; }
.dh-extra-card b { font-size: 13px; }
.dh-extra-card p { font-size: 12px; color: var(--dh-muted); margin: 0; flex: 1; }
.dh-extra-card .dh-extra-price { font-size: 12px; font-weight: 600; color: var(--dh-accent); margin-top: 4px; }
.dh-extra-card button { align-self: flex-start; margin-top: 8px; font-size: 12px; }

@media (max-width: 860px) {
  .dh-domain-cards { grid-template-columns: 1fr; }
  .dh-setup-cards   { grid-template-columns: 1fr; }
  .dh-extras-review-grid { grid-template-columns: 1fr; }
  .dh-wizard-success-cards { grid-template-columns: 1fr; }
  .dh-wizard-modal { padding: 20px 16px; }
}

/* ── Phase 3: Site Tools ─────────────────────────────────────────── */

/* Toggle row (HTTPS, CDN, Caching) */
.dh-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.dh-toggle-row input[type="checkbox"] {
  width: 36px; height: 20px;
  appearance: none;
  background: var(--dh-line);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background 0.2s;
}
.dh-toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: left 0.2s;
}
.dh-toggle-row input[type="checkbox"]:checked { background: var(--dh-accent); }
.dh-toggle-row input[type="checkbox"]:checked::after { left: 19px; }
.dh-toggle-list { display: flex; flex-direction: column; gap: 4px; }

/* Log output */
.dh-log-output {
  font-family: "Courier New", monospace;
  font-size: 12px;
  background: var(--dh-navy);
  color: #b5c4d6;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 12px 0 0;
  line-height: 1.7;
}

/* Traffic chart */
.dh-chart-placeholder {
  background: var(--dh-page);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  min-height: 100px;
}
.dh-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 80px; }
.dh-chart-bar {
  flex: 1;
  background: var(--dh-accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.7;
  min-width: 8px;
  transition: opacity 0.15s;
}
.dh-chart-bar:hover { opacity: 1; }
.dh-select-sm { padding: 4px 8px; border: 1px solid var(--dh-line); border-radius: 5px; font-size: 12px; }

/* App installer grid */
.dh-app-installer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.dh-app-install-card {
  border: 1px solid var(--dh-line);
  border-radius: 10px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--dh-card);
}
.dh-app-install-card p { font-size: 12px; color: var(--dh-muted); margin: 0; flex: 1; }
.dh-app-install-card button { align-self: flex-start; margin-top: 12px; }

/* Promo info band variant */
.dh-info-band--promo { background: linear-gradient(135deg, var(--dh-accent-soft) 0%, #f0f0ff 100%); }

/* CDN config inline */
.dh-cdn-config { border-top: 1px solid var(--dh-line); padding-top: 12px; margin-top: 8px; }

/* ── Phase 4: Billing cards ──────────────────────────────────────── */
.dh-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 8px 0 20px;
}
.dh-credit-card {
  border: 1px solid var(--dh-line);
  border-radius: 12px;
  padding: 18px 16px 14px;
  background: var(--dh-card);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.dh-credit-card:hover { box-shadow: 0 4px 16px rgba(20,24,42,0.1); }
.dh-credit-card--add {
  border: 2px dashed var(--dh-line);
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--dh-muted);
  font-size: 14px;
  gap: 8px;
  min-height: 110px;
}
.dh-credit-card--add:hover { border-color: var(--dh-accent); color: var(--dh-accent); }
.dh-card-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dh-muted); }
.dh-card-number { font-size: 15px; font-weight: 600; letter-spacing: 0.08em; margin: 2px 0; }
.dh-card-expiry { font-size: 12px; color: var(--dh-muted); }
.dh-card-primary { position: absolute; top: 10px; right: 10px; }
.dh-card-edit { position: absolute; bottom: 10px; right: 10px; background: none; border: none; cursor: pointer; color: var(--dh-muted); font-size: 14px; padding: 2px 4px; }
.dh-card-edit:hover { color: var(--dh-accent); }

.dh-dns-name-wrap { display: flex; align-items: center; gap: 4px; }
.dh-dns-name-wrap input { flex: 1; min-width: 0; }
.dh-dns-suffix { font-size: 11px; color: var(--dh-muted); white-space: nowrap; }
/* File Manager */
.dh-file-input { display: none; }
.dh-file-pick-label { cursor: pointer; }
.dh-file-pick-label input[type="file"] { display: none; }
.dh-btn-xs { padding: 3px 8px; font-size: 11px; }
/* DNS external warning */
.dh-dns-external-warning code { background: var(--dh-surface); padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.dh-btn-link { background: none; border: none; color: var(--dh-accent); cursor: pointer; padding: 0; font-size: 13px; text-align: left; }
.dh-btn-link:hover { text-decoration: underline; }
/* Cloudflare DNS zone status */
.dh-cf-active { border-left: 3px solid #f6821f; background: #fff8f2; }
.dh-cf-pending { border-left: 3px solid #faad14; background: #fffbe6; }
[data-dns-ns-band] code { display: inline-block; background: var(--dh-surface); padding: 2px 8px; border-radius: 4px; margin: 2px 0; font-size: 13px; }

/* ── LLM Model Selection ────────────────────────────────────────────────────── */
.dh-llm-models-step { display: flex; flex-direction: column; gap: 20px; }
.dh-llm-ram-hint { font-size: 13px; color: var(--dh-muted); background: var(--dh-accent-soft); border-radius: 6px; padding: 8px 12px; margin: 0; }
.dh-model-group h4 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.dh-model-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.dh-model-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1.5px solid var(--dh-line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  background: var(--dh-card);
  transition: border-color 0.15s, background 0.15s;
}
.dh-model-card:hover { border-color: var(--dh-accent); }
.dh-model-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-model-card input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--dh-accent); }
.dh-model-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dh-model-info b { font-size: 13px; }
.dh-model-info p { font-size: 12px; color: var(--dh-muted); margin: 0; }
.dh-model-size { font-size: 11px; font-weight: 600; color: var(--dh-accent); }
.dh-llm-total-size { font-size: 13px; font-weight: 600; color: var(--dh-text); padding: 8px 0; }

/* ── OpenClaw Wizard ────────────────────────────────────────────────────────── */
.dh-openclaw-backend { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dh-backend-card {
  border: 1.5px solid var(--dh-line);
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--dh-card);
  transition: border-color 0.15s;
}
.dh-backend-card:hover { border-color: var(--dh-accent); }
.dh-backend-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-backend-card b { font-size: 13px; }
.dh-backend-card p { font-size: 12px; color: var(--dh-muted); margin: 0; flex: 1; }
.dh-backend-config { padding: 12px 0; }
.dh-backend-config label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-width: 340px; margin-bottom: 10px; }
.dh-backend-config input { padding: 7px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }
.dh-integrations-grid { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.dh-integration-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.dh-integration-toggle input[type="checkbox"] { accent-color: var(--dh-accent); width: 16px; height: 16px; }
.dh-openclaw-token-row { margin-bottom: 10px; }
.dh-openclaw-token-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-width: 340px; }
.dh-openclaw-token-row input { padding: 7px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }

/* OpenClaw line icon (claw shape) */
.dh-line-icon[data-icon="openclaw"] { position: relative; }
.dh-line-icon[data-icon="openclaw"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 3px at 50% 35%, var(--dh-accent) 100%, transparent 100%),
    linear-gradient(165deg, transparent 40%, var(--dh-accent) 40%, var(--dh-accent) 46%, transparent 46%),
    linear-gradient(180deg, transparent 40%, var(--dh-accent) 40%, var(--dh-accent) 46%, transparent 46%),
    linear-gradient(195deg, transparent 40%, var(--dh-accent) 40%, var(--dh-accent) 46%, transparent 46%);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  opacity: 0.85;
  border-radius: 4px;
}

/* OpenClaw Manager tool panel */
.dh-status-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.dh-status-badge { font-size: 12px; font-weight: 600; color: var(--dh-green); background: #edfbf1; border-radius: 4px; padding: 2px 8px; }
.dh-field-row { margin: 10px 0; }
.dh-field-row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; max-width: 340px; }
.dh-field-row input { padding: 7px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; background: var(--dh-page); }
.dh-integrations-status { font-size: 13px; color: var(--dh-muted); padding: 6px 0; }
.dh-form-result { font-size: 13px; color: var(--dh-green); padding: 4px 0; min-height: 20px; }

/* Home page service card action row */
.dh-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* ── Bot Hosting Wizard ─────────────────────────────────── v20260524-03 ── */
.dh-bot-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 560px) { .dh-bot-mode-cards { grid-template-columns: 1fr; } }
.dh-bot-mode-card { border: 2px solid var(--dh-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s; }
.dh-bot-mode-card:hover { border-color: var(--dh-accent); }
.dh-bot-mode-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-bot-mode-card b { font-size: 15px; margin-bottom: 2px; }
.dh-bot-mode-desc { font-size: 13px; color: var(--dh-muted); line-height: 1.5; margin: 0; }
.dh-bot-mode-features { list-style: none; padding: 0; margin: 4px 0 10px; font-size: 12px; color: var(--dh-muted); line-height: 1.8; }
.dh-bot-mode-features li { padding: 0; }
.dh-sleep-config { margin: 0 0 14px; }
.dh-sleep-config label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; max-width: 260px; }
.dh-sleep-config select { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }
.dh-bot-runtime-row { margin-bottom: 14px; }
.dh-bot-runtime-row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; max-width: 260px; }
.dh-bot-runtime-row select { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }
.dh-bot-review-box { background: var(--dh-bg-alt); border: 1px solid var(--dh-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.dh-review-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--dh-line); font-size: 13px; }
.dh-review-row:last-child { border-bottom: none; }
.dh-review-row span { color: var(--dh-muted); }
/* Developer instructions block */
.dh-dev-instructions { text-align: left; margin: 12px 0; }
.dh-dev-instructions-block h3 { font-size: 15px; margin: 0 0 8px; }
.dh-dev-instructions-block h4 { font-size: 13px; font-weight: 600; margin: 12px 0 4px; color: var(--dh-text); }
.dh-dev-instructions-block p { font-size: 13px; color: var(--dh-muted); margin: 0 0 8px; line-height: 1.5; }
.dh-dev-instructions-block pre { background: var(--dh-bg-alt); border: 1px solid var(--dh-line); border-radius: 6px; padding: 10px 12px; overflow-x: auto; margin: 0 0 8px; }
.dh-dev-instructions-block pre code { font-size: 12px; font-family: ui-monospace, 'SF Mono', Consolas, monospace; line-height: 1.6; white-space: pre; color: var(--dh-text); }
.dh-dev-note { background: #fffbeb; border-left: 3px solid #f59e0b; padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: 12px !important; color: var(--dh-text) !important; }

/* ── Source Code step & GitHub deploy ──────────────────── v20260524-04 ── */
.dh-source-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 560px) { .dh-source-cards { grid-template-columns: 1fr; } }
.dh-source-card { border: 2px solid var(--dh-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s; }
.dh-source-card:hover { border-color: var(--dh-accent); }
.dh-source-card.is-selected { border-color: var(--dh-accent); background: var(--dh-accent-soft); }
.dh-source-card b { font-size: 15px; margin-bottom: 2px; }
.dh-source-card p { font-size: 13px; color: var(--dh-muted); line-height: 1.5; margin: 0; }
.dh-source-card-icon { color: var(--dh-muted); margin-bottom: 4px; }
.dh-source-card.is-selected .dh-source-card-icon { color: var(--dh-accent); }
.dh-source-features { list-style: none; padding: 0; margin: 4px 0 10px; font-size: 12px; color: var(--dh-muted); line-height: 1.8; }
.dh-github-fields { background: var(--dh-bg-alt); border: 1px solid var(--dh-line); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.dh-github-field-row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.dh-github-field-row input { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }
.dh-github-field-row--half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .dh-github-field-row--half { grid-template-columns: 1fr; } }
.dh-field-hint { font-size: 11px; color: var(--dh-muted); font-weight: 400; line-height: 1.4; }

/* ── Notices (info/warning/success) ────────────────────────────────────── */
.dh-notice { border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 10px; }
.dh-notice--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.dh-notice--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.dh-notice--success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; }
.dh-notice strong { display: block; margin-bottom: 4px; }
.dh-notice p { margin: 4px 0 8px; }
.dh-notice code { background: rgba(0,0,0,.06); border-radius: 3px; padding: 1px 4px; font-family: ui-monospace, monospace; font-size: 12px; }
.dh-btn--sm { padding: 6px 14px; font-size: 12px; }
.dh-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; margin-top: 8px; }
.dh-db-migrate-notice { margin: 14px 0; }

/* ── DB Migration Wizard Modal ──────────────────────────────────────────── */
.dh-db-migrate-modal { max-width: 560px; }
.dh-db-migrate-intro { font-size: 13px; color: var(--dh-muted); margin-bottom: 14px; line-height: 1.5; }
.dh-db-migrate-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.dh-db-migrate-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.dh-db-migrate-form input { padding: 8px 10px; border: 1px solid var(--dh-line); border-radius: 6px; font-size: 13px; }
.dh-db-migrate-status { margin-bottom: 10px; }
.dh-db-file-card { display: flex; align-items: center; gap: 12px; background: var(--dh-bg-alt); border: 1px solid var(--dh-line); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.dh-db-file-meta { display: flex; flex-direction: column; gap: 2px; }
.dh-db-file-meta strong { font-size: 14px; }
.dh-db-file-meta span { font-size: 12px; color: var(--dh-muted); }
.dh-db-export-status { margin-bottom: 14px; }
.dh-db-migrate-verify { background: var(--dh-bg-alt); border: 1px solid var(--dh-line); border-radius: 8px; padding: 12px 16px; margin: 12px 0; }
.dh-wizard-checkmark--db { background: #16a34a; }

/* ── Resource Stats Cards ───────────────────────────────────────────────── */
.dh-section-title { font-size: 13px; font-weight: 600; color: var(--dh-muted); text-transform: uppercase; letter-spacing: .04em; margin: 24px 0 10px; }
.dh-stats-refresh { font-size: 11px; font-weight: 400; color: var(--dh-muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
/* Range switcher */
.dh-stats-range-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.dh-stats-range-btn { padding: 5px 13px; border-radius: 20px; border: 1px solid var(--dh-line); background: transparent; color: var(--dh-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.dh-stats-range-btn:hover { background: var(--dh-bg-alt); color: var(--dh-text); }
.dh-stats-range-btn.is-active { background: var(--dh-accent); color: #fff; border-color: var(--dh-accent); }

/* Live sparkline grid */
.dh-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
@media (max-width: 900px) { .dh-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dh-stats-grid { grid-template-columns: 1fr; } }
.dh-stats-card { padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 6px; }
.dh-stats-head { display: flex; align-items: baseline; justify-content: space-between; }
.dh-stats-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--dh-muted); }
.dh-stats-value { font-size: 22px; font-weight: 700; color: var(--dh-text); font-variant-numeric: tabular-nums; line-height: 1; }
.dh-stats-sub { font-size: 11px; color: var(--dh-muted); margin-top: 2px; }
.dh-sparkline { display: block; width: 100%; height: 36px; overflow: visible; }
.dh-sparkline polyline { vector-effect: non-scaling-stroke; }
.dh-sparkline .spark-fill { opacity: .12; }

/* History charts grid */
.dh-stats-history-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 680px) { .dh-stats-history-grid { grid-template-columns: 1fr; } }
.dh-stats-history-card { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.dh-history-chart { display: block; width: 100%; height: 80px; overflow: visible; }
.dh-history-chart polyline { vector-effect: non-scaling-stroke; }
.dh-history-chart .spark-fill { opacity: .10; }
[data-stats-history-wrap].is-loading .dh-history-chart { opacity: .4; }

/* ── Git Deploy Section ─────────────────────────────────────────────────── */
.dh-git-statusbar { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--dh-bg-alt); border:1px solid var(--dh-line); border-radius:8px; font-size:13px; margin-bottom:14px; }
.dh-git-statusbar .dh-git-dot { width:8px; height:8px; border-radius:50%; background:#16a34a; flex-shrink:0; }
.dh-git-statusbar .dh-git-dot.is-error { background:#dc2626; }
.dh-git-statusbar .dh-git-dot.is-pending { background:#f59e0b; }
.dh-form-stack { display:flex; flex-direction:column; gap:10px; }
.dh-form-stack label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:500; }
.dh-form-stack input { padding:7px 10px; border:1px solid var(--dh-line); border-radius:6px; font-size:13px; background:var(--dh-bg); color:var(--dh-text); }
.dh-badge { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; padding:2px 6px; border-radius:4px; background:var(--dh-bg-alt); color:var(--dh-muted); border:1px solid var(--dh-line); vertical-align:middle; margin-left:4px; }
.dh-badge.is-ok { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.dh-muted-text { font-size:12px; color:var(--dh-muted); margin:0 0 10px; line-height:1.5; }
.dh-deploy-key-output { font-size:10px; font-family:ui-monospace,monospace; background:var(--dh-bg-alt); border:1px solid var(--dh-line); border-radius:6px; padding:8px 10px; white-space:pre-wrap; word-break:break-all; max-height:72px; overflow:hidden; margin:8px 0; color:var(--dh-muted); line-height:1.4; }
.dh-copy-value { font-size:11px; font-family:ui-monospace,monospace; word-break:break-all; }
.dh-git-deploy-list { display:flex; flex-direction:column; gap:6px; }
.dh-git-deploy-item { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--dh-line); font-size:12px; }
.dh-git-deploy-item:last-child { border-bottom:none; }
.dh-git-deploy-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#16a34a; }
.dh-git-deploy-dot.is-failed { background:#dc2626; }
.dh-git-deploy-meta { flex:1; min-width:0; }
.dh-git-deploy-meta strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.dh-git-deploy-meta span { color:var(--dh-muted); }
.dh-git-deploy-btn { font-size:11px; padding:2px 8px; cursor:pointer; background:none; border:1px solid var(--dh-line); border-radius:4px; color:var(--dh-muted); }
.dh-git-deploy-btn:hover { border-color:var(--dh-text); color:var(--dh-text); }

/* ── Client Portal ──────────────────────────────────────────────────────────── */
.dh-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 8px;
}
.dh-client-card {
  background: var(--dh-card);
  border: 1px solid var(--dh-line);
  border-radius: 12px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .15s, border-color .15s;
}
.dh-client-card:hover {
  box-shadow: 0 4px 22px rgba(20,24,42,.09);
  border-color: #c8c9d1;
}
.dh-client-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dh-client-card-top .dh-line-icon {
  width: 38px;
  height: 38px;
  background: var(--dh-accent-soft);
  border-radius: 8px;
}
.dh-client-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.dh-client-card-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
  color: var(--dh-text);
}
.dh-client-card-type {
  font-size: .78rem;
  color: var(--dh-muted);
}
.dh-client-card-plan {
  font-size: .78rem;
  color: var(--dh-accent);
  font-weight: 500;
  margin-top: 2px;
}
.dh-client-card-actions {
  display: flex;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--dh-line);
}
.dh-client-card-actions .dh-primary { flex: 1; font-size: .8rem; padding: 7px 12px; }
.dh-client-card-actions .dh-secondary { font-size: .8rem; padding: 7px 12px; }
.dh-client-tab-view { display: none; }
.dh-client-tab-view.is-active { display: block; }

/* ── Client Home Dashboard (SiteGround-style) ────────────────────────────── */
.dh-ch-promo {
  background: linear-gradient(135deg, #0f1834 0%, #172144 55%, #1a3268 100%);
  border-radius: 16px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}
.dh-ch-promo::before {
  content: '';
  position: absolute;
  right: 160px;
  top: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(77,72,245,.2) 0%, transparent 70%);
  pointer-events: none;
}
.dh-ch-promo-badge {
  display: inline-block;
  background: rgba(77,72,245,.25);
  border: 1px solid rgba(77,72,245,.45);
  color: #a8a5ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.dh-ch-promo-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 12px !important;
  line-height: 1.3 !important;
}
.dh-ch-promo-desc {
  font-size: 14px;
  color: rgba(255,255,255,.6);
  margin: 0 0 24px;
  line-height: 1.6;
  max-width: 460px;
}
.dh-ch-promo-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dh-ch-promo-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); }
.dh-ch-promo-visual { flex-shrink: 0; }
.dh-ch-visual-mockup {
  width: 200px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dh-ch-visual-bar { height: 8px; background: rgba(77,72,245,.7); border-radius: 4px; width: 65%; }
.dh-ch-visual-row { height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; }
.dh-ch-visual-row--short { width: 42%; }
.dh-ch-visual-actions { display: flex; gap: 8px; margin-top: 4px; }
.dh-ch-visual-btn { height: 8px; width: 52px; background: rgba(77,72,245,.55); border-radius: 4px; }
.dh-ch-visual-btn--ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); width: 40px; }

/* Section titles */
.dh-ch-section-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--dh-text) !important;
  margin: 0 0 14px !important;
}

/* Card grids */
.dh-ch-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.dh-ch-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }

/* Service card */
.dh-ch-card {
  background: #fff;
  border: 1.5px solid #e8e8ec;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s, border-color .15s;
}
.dh-ch-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: #d0d0da; }
.dh-ch-card-icon { margin-bottom: 8px; }
.dh-ch-card-name { font-size: 16px; font-weight: 700; color: #111; }
.dh-ch-card--sm .dh-ch-card-name { font-size: 14px; }
.dh-ch-card-desc { font-size: 13px; color: #777; margin: 0; line-height: 1.5; flex: 1; }
.dh-ch-card-desc b { color: #111; font-weight: 700; }
.dh-ch-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 960px) {
  .dh-ch-promo-visual { display: none; }
  .dh-ch-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .dh-ch-promo { padding: 28px 24px; }
  .dh-ch-grid-2, .dh-ch-grid-4 { grid-template-columns: 1fr; }
}