/* ==========================================================================
   DUCK HOST — WHMCS CLIENT TEMPLATE
   Design system fiel ao site institucional: duckhost.com.br
   Paleta: Navy (#040B22 #071331 #0A1C46) + Azul Duck Host (#1062FE #083FBF)
           + Ciano (#35D6F0 #7BE6F7) + Verde (#12B76A)
   Fontes: Inter / Sora (Google Fonts)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

/* ---------- Tokens ---------- */
:root {
  --dh-navy-950: #040b22;
  --dh-navy-900: #071331;
  --dh-navy-800: #0a1c46;
  --dh-navy-700: #102654;
  --dh-blue-700: #083fbf;
  --dh-blue-600: #1062fe;
  --dh-blue-500: #009aff;
  --dh-blue-300: #8fcaff;
  --dh-blue-100: #dbe7fb;
  --dh-cyan-400: #35d6f0;
  --dh-cyan-300: #7be6f7;
  --dh-green: #12b76a;
  --dh-green-soft: #e7f7ef;
  --dh-amber: #f59e0b;
  --dh-red: #ef4444;

  --dh-bg: #f5f7fc;
  --dh-surface: #ffffff;
  --dh-surface-2: #f0f4fb;
  --dh-border: #e3e9f4;
  --dh-border-strong: #cfd8ea;
  --dh-text: #0b1633;
  --dh-text-2: #3a4a72;
  --dh-text-3: #7a86a8;
  --dh-muted: #9aa6c4;

  --dh-radius-sm: 8px;
  --dh-radius: 14px;
  --dh-radius-lg: 20px;
  --dh-radius-xl: 28px;
  --dh-shadow-sm: 0 2px 8px rgba(4, 11, 34, 0.06);
  --dh-shadow: 0 10px 30px rgba(4, 11, 34, 0.10);
  --dh-shadow-lg: 0 24px 60px rgba(4, 11, 34, 0.16);
  --dh-shadow-glow: 0 18px 44px rgba(27, 99, 255, 0.28);

  --dh-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dh-font-display: "Sora", "Inter", sans-serif;

  --dh-container: 1200px;
  --dh-header-h: 76px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--dh-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--dh-text);
  background: var(--dh-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--dh-blue-600); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--dh-blue-700); }
button, input, select, textarea { font: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--dh-font-display); font-weight: 700; letter-spacing: -0.02em; color: var(--dh-navy-900); margin: 0 0 .6em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
.container { width: 100%; max-width: var(--dh-container); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.dh-header {
  position: sticky; top: 0; z-index: 1000;
  background: linear-gradient(135deg, var(--dh-navy-950) 0%, var(--dh-navy-900) 55%, var(--dh-navy-800) 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s ease;
}
.dh-header--scrolled { box-shadow: 0 18px 44px rgba(4,11,34,.45); }
.dh-header__inner {
  max-width: var(--dh-container); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: nowrap;
  min-height: var(--dh-header-h);
}
.dh-header__brand { display: flex; align-items: center; gap: 14px; }
.dh-header__logo { height: 24px; width: auto; max-width: 190px; }
.dh-header__tag { font-family: var(--dh-font-display); font-size: .56rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: #8aa3ce; display: block; margin-top: 4px; white-space: nowrap; }
.dh-header__status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #c3d2ec; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.dh-header__status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dh-green); box-shadow: 0 0 0 3px rgba(18,183,106,.18); position: relative; }
.dh-header__status-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(18,183,106,.45); animation: dh-ping 2.4s ease-out infinite; }
@keyframes dh-ping { 0%{transform:scale(.7);opacity:.9} 80%,100%{transform:scale(1.6);opacity:0} }
.dh-header__actions { display: flex; align-items: center; gap: 9px; flex: none; }
.dh-header__account { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; color: #eaf1ff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; font-size: .84rem; font-weight: 700; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
.dh-header__account:hover { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.dh-header__account svg { width: 17px; height: 17px; }
.dh-header__account--primary { color: #fff; background: var(--dh-blue-600); border-color: var(--dh-blue-600); }
.dh-header__account--primary:hover { color: #fff; background: var(--dh-blue-700); border-color: var(--dh-blue-700); }
.dh-header__account--products { color: #c7f5ff; background: rgba(53,214,240,.09); border-color: rgba(123,230,247,.24); }
.dh-header__account--products:hover { color: #fff; background: rgba(53,214,240,.17); border-color: rgba(123,230,247,.4); }
.dh-header__account--icon { width: 40px; padding: 0; color: #8be6f7; }

/* ---------- Hero ---------- */
.dh-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 320px at 88% -60%, rgba(27,99,255,.34), transparent 62%),
    radial-gradient(760px 300px at -12% -40%, rgba(53,214,240,.14), transparent 60%),
    linear-gradient(135deg, var(--dh-navy-950) 0%, var(--dh-navy-900) 55%, var(--dh-navy-800) 100%);
  color: #fff; padding: 72px 0 60px;
}
.dh-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.dh-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .8rem; font-weight: 600; color: #c3d2ec; margin-bottom: 20px; }
.dh-hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dh-green); box-shadow: 0 0 0 3px rgba(18,183,106,.2); }
.dh-hero h1 { color: #fff; font-size: clamp(2rem,4.2vw,3.2rem); }
.dh-hero h1 .accent { background: linear-gradient(90deg, var(--dh-cyan-300), var(--dh-blue-300)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dh-hero p { color: #b9c7e6; font-size: 1.08rem; max-width: 560px; }
.dh-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.dh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s; }
.dh-btn:hover { transform: translateY(-1px); }
.dh-btn--primary { background: linear-gradient(135deg, var(--dh-blue-600), var(--dh-blue-700)); color: #fff; box-shadow: var(--dh-shadow-glow); }
.dh-btn--primary:hover { color: #fff; box-shadow: 0 22px 50px rgba(27,99,255,.4); }
.dh-btn--ghost { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.dh-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.dh-btn--outline { background: #fff; border-color: var(--dh-border-strong); color: var(--dh-navy-900); }
.dh-btn--outline:hover { border-color: var(--dh-blue-600); color: var(--dh-blue-600); }
.dh-btn--sm { padding: 9px 16px; font-size: .85rem; border-radius: 10px; }
.dh-btn--lg { padding: 16px 28px; font-size: 1rem; border-radius: 14px; }

.dh-hero__badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; font-size: .85rem; color: #9fb0d6; }
.dh-hero__badges span { display: inline-flex; align-items: center; gap: 6px; }
.dh-hero__badges .check { color: var(--dh-green); }

/* Hero mockup card */
.dh-hero__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--dh-radius-lg);
  padding: 22px; backdrop-filter: blur(10px); box-shadow: var(--dh-shadow-lg);
}
.dh-hero__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dh-hero__card-title { font-family: var(--dh-font-display); font-weight: 700; font-size: .95rem; color: #fff; }
.dh-hero__card-status { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: #8be6f7; }
.dh-hero__card-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dh-green); }
.dh-metric { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-metric__item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; }
.dh-metric__label { font-size: .72rem; color: #9fb0d6; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.dh-metric__value { font-family: var(--dh-font-display); font-size: 1.5rem; font-weight: 800; color: #fff; margin-top: 4px; }
.dh-metric__sub { font-size: .75rem; color: #8be6f7; margin-top: 2px; }
.dh-progress { height: 6px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.dh-progress__bar { height: 100%; background: linear-gradient(90deg, var(--dh-cyan-400), var(--dh-blue-500)); border-radius: 999px; }

/* ---------- Section ---------- */
.dh-section { padding: 72px 0; }
.dh-section--alt { background: var(--dh-surface); }
.dh-section__head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.dh-section__eyebrow { display: inline-block; font-family: var(--dh-font-display); font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--dh-blue-600); margin-bottom: 12px; }
.dh-section__title { margin-bottom: 14px; }
.dh-section__sub { color: var(--dh-text-2); font-size: 1.05rem; }

/* ---------- Feature grid ---------- */
.dh-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dh-feature { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); padding: 26px 22px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.dh-feature:hover { transform: translateY(-4px); box-shadow: var(--dh-shadow); border-color: var(--dh-blue-300); }
.dh-feature__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(27,99,255,.12), rgba(53,214,240,.12)); color: var(--dh-blue-600); margin-bottom: 16px; }
.dh-feature__icon svg { width: 22px; height: 22px; }
.dh-feature h3 { font-size: 1.05rem; margin-bottom: 6px; }
.dh-feature p { color: var(--dh-text-2); font-size: .92rem; margin: 0; }

/* ---------- Migration steps ---------- */
.dh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; }
.dh-step { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); padding: 28px 24px; position: relative; }
.dh-step__num { font-family: var(--dh-font-display); font-size: 2.2rem; font-weight: 800; background: linear-gradient(135deg, var(--dh-blue-600), var(--dh-cyan-400)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 14px; }
.dh-step h3 { font-size: 1.1rem; }
.dh-step p { color: var(--dh-text-2); font-size: .92rem; margin: 0; }

/* ---------- Pricing ---------- */
.dh-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.dh-plan { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); padding: 30px 26px; display: flex; flex-direction: column; position: relative; transition: transform .2s, box-shadow .2s; }
.dh-plan:hover { transform: translateY(-6px); box-shadow: var(--dh-shadow-lg); }
.dh-plan--featured { border-color: var(--dh-blue-600); box-shadow: 0 0 0 2px var(--dh-blue-600), var(--dh-shadow-glow); transform: scale(1.03); }
.dh-plan--featured:hover { transform: scale(1.03) translateY(-6px); }
.dh-plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--dh-blue-600), var(--dh-cyan-400)); color: #fff; font-family: var(--dh-font-display); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; box-shadow: var(--dh-shadow-sm); }
.dh-plan__name { font-family: var(--dh-font-display); font-size: 1.3rem; font-weight: 800; color: var(--dh-navy-900); }
.dh-plan__desc { color: var(--dh-text-3); font-size: .88rem; margin-bottom: 18px; }
.dh-plan__price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 4px; }
.dh-plan__currency { font-family: var(--dh-font-display); font-size: 1.1rem; font-weight: 700; color: var(--dh-navy-900); }
.dh-plan__amount { font-family: var(--dh-font-display); font-size: 2.6rem; font-weight: 800; color: var(--dh-navy-900); line-height: 1; letter-spacing: -0.03em; }
.dh-plan__period { color: var(--dh-text-3); font-size: .85rem; margin-bottom: 20px; }
.dh-plan__features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.dh-plan__features li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: .92rem; color: var(--dh-text); border-bottom: 1px solid var(--dh-border); }
.dh-plan__features li:last-child { border-bottom: none; }
.dh-plan__features .check { color: var(--dh-green); flex: none; margin-top: 2px; }
.dh-plan__features strong { color: var(--dh-navy-900); }
.dh-plan__cta { margin-top: auto; }

/* ---------- FAQ ---------- */
.dh-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.dh-faq__item { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); overflow: hidden; }
.dh-faq__q { width: 100%; text-align: left; background: none; border: none; padding: 18px 22px; font-family: var(--dh-font-display); font-weight: 600; font-size: 1rem; color: var(--dh-navy-900); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dh-faq__q:hover { color: var(--dh-blue-600); }
.dh-faq__q .chev { transition: transform .25s; color: var(--dh-text-3); }
.dh-faq__item.is-open .chev { transform: rotate(180deg); color: var(--dh-blue-600); }
.dh-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; padding: 0 22px; color: var(--dh-text-2); font-size: .95rem; }
.dh-faq__item.is-open .dh-faq__a { max-height: 400px; padding: 0 22px 20px; }

/* ---------- Contact / CTA band ---------- */
.dh-cta-band { background: linear-gradient(135deg, var(--dh-navy-950), var(--dh-navy-800)); color: #fff; padding: 60px 0; border-radius: var(--dh-radius-xl); margin: 0 auto; max-width: var(--dh-container); position: relative; overflow: hidden; }
.dh-cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 80% 0%, rgba(27,99,255,.35), transparent 60%); pointer-events: none; }
.dh-cta-band__inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; padding: 0 40px; }
.dh-cta-band h2 { color: #fff; margin-bottom: 10px; }
.dh-cta-band p { color: #b9c7e6; margin: 0; }
.dh-cta-band__contact { display: flex; flex-direction: column; gap: 12px; }
.dh-contact-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dbe7fb; font-size: .9rem; text-decoration: none; transition: background .2s; }
.dh-contact-item:hover { background: rgba(255,255,255,.12); color: #fff; }
.dh-contact-item svg { width: 18px; height: 18px; color: var(--dh-cyan-300); }

/* ---------- Footer ---------- */
.dh-footer { background: var(--dh-navy-950); color: #9fb0d6; padding: 60px 0 24px; margin-top: 0; }
.dh-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.dh-footer h4 { color: #fff; font-size: .95rem; font-family: var(--dh-font-display); margin-bottom: 14px; }
.dh-footer ul { list-style: none; padding: 0; margin: 0; }
.dh-footer li { margin-bottom: 8px; }
.dh-footer a { color: #9fb0d6; font-size: .9rem; }
.dh-footer a:hover { color: #fff; }
.dh-footer__brand p { color: #7a86a8; font-size: .9rem; max-width: 320px; }
.dh-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.dh-footer__social a { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); display: grid; place-items: center; color: #dbe7fb; transition: background .2s, color .2s; }
.dh-footer__social a:hover { background: rgba(27,99,255,.25); color: #fff; }
.dh-footer__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: .85rem; color: #7a86a8; }
.dh-footer__payments { display: flex; gap: 8px; flex-wrap: wrap; }
.dh-footer__payments span { padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: .75rem; font-weight: 600; color: #c3d2ec; }

/* ---------- Floating WhatsApp ---------- */
.dh-wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 999; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(37,211,102,.45); transition: transform .2s; text-decoration: none; }
.dh-wa-float:hover { transform: scale(1.08); color: #fff; }
.dh-wa-float svg { width: 30px; height: 30px; }

/* ---------- WHMCS client area overrides ---------- */
/* Generic WHMCS panels restyled to Duck Host */
.panel, .card { border-radius: var(--dh-radius); border: 1px solid var(--dh-border); box-shadow: var(--dh-shadow-sm); overflow: hidden; }
.panel-heading, .card-header { background: linear-gradient(135deg, var(--dh-navy-950), var(--dh-navy-800)); color: #fff; font-family: var(--dh-font-display); font-weight: 700; padding: 14px 18px; border: none; }
.panel-heading h3, .panel-heading h4, .card-header h3, .card-header h4 { color: #fff; margin: 0; font-size: 1rem; }
.panel-body, .card-body { padding: 20px; }
.table { border-radius: var(--dh-radius); overflow: hidden; }
.table thead th { background: var(--dh-surface-2); color: var(--dh-navy-900); font-family: var(--dh-font-display); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 2px solid var(--dh-border); }
.table tbody td { vertical-align: middle; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--dh-surface-2); }
.btn-primary, .btn-default.btn-primary { background: linear-gradient(135deg, var(--dh-blue-600), var(--dh-blue-700)); border: none; border-radius: 10px; font-weight: 600; box-shadow: var(--dh-shadow-sm); }
.btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--dh-blue-700), var(--dh-blue-600)); }
.btn-success { background: var(--dh-green); border: none; border-radius: 10px; }
.btn-danger { background: var(--dh-red); border: none; border-radius: 10px; }
.btn-default { border-radius: 10px; border-color: var(--dh-border-strong); }
.form-control { border-radius: 10px; border: 1px solid var(--dh-border-strong); padding: 10px 14px; transition: border-color .2s, box-shadow .2s; }
.form-control:focus { border-color: var(--dh-blue-600); box-shadow: 0 0 0 3px rgba(27,99,255,.15); }
.label, .badge { border-radius: 6px; font-weight: 600; }
.alert { border-radius: var(--dh-radius); border: none; }
.alert-success { background: var(--dh-green-soft); color: #0b6b3a; }
.alert-danger { background: #fde8e8; color: #9b1c1c; }
.alert-info { background: #e7f0ff; color: var(--dh-blue-700); }
.alert-warning { background: #fef3c7; color: #92400e; }
.breadcrumb { background: transparent; padding: 0; font-size: .85rem; }
.breadcrumb a { color: var(--dh-blue-600); }
.well { background: var(--dh-surface-2); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); }

/* Login / register cards */
.dh-auth { min-height: calc(100vh - var(--dh-header-h)); display: grid; place-items: center; padding: 40px 0; background: linear-gradient(135deg, var(--dh-navy-950) 0%, var(--dh-navy-900) 100%); }
.dh-auth__inner { width: min(100% - 36px, 480px); display: grid; justify-items: center; gap: 8px; }
.dh-auth__card { background: #fff; border-radius: var(--dh-radius-xl); padding: 40px 36px; max-width: 440px; width: 100%; box-shadow: var(--dh-shadow-lg); }
.dh-auth__logo { text-align: center; margin-bottom: 24px; }
.dh-auth__title { text-align: center; margin-bottom: 6px; }
.dh-auth__sub { text-align: center; color: var(--dh-text-3); font-size: .9rem; margin-bottom: 24px; }
.dh-auth__footer { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--dh-text-3); }
.dh-auth__input { position: relative; }
.dh-auth__input svg { position: absolute; z-index: 1; top: 50%; left: 15px; width: 19px; height: 19px; transform: translateY(-50%); color: var(--dh-blue-600); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.dh-auth__input .form-control { height: 48px; padding-left: 47px; }
.dh-auth__options { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; font-size: .86rem; }
.dh-auth__options label { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--dh-text-2); font-weight: 500; }
.dh-auth__options a { font-weight: 650; }
.dh-auth__submit { width: 100%; min-height: 48px; }
.dh-rocket { width: 64px; height: 64px; margin: 0 auto 12px; animation: dh-rocket-flight 2.8s ease-in-out infinite; }
.dh-rocket img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 15px rgba(0,0,0,.22)); }
.dh-rocket--login { width: 82px; height: 82px; margin: 0 auto 2px; }
.dh-rocket--login img { filter: drop-shadow(0 9px 20px rgba(0,0,0,.4)); }
@keyframes dh-rocket-flight { 0%,100% { transform: translate3d(-8px, 3px, 0) rotate(-5deg); } 50% { transform: translate3d(8px, -7px, 0) rotate(5deg); } }
.dh-register { max-width: 900px; padding-top: 42px; padding-bottom: 56px; }
.dh-register__heading { margin: 0 auto 28px; text-align: center; }
.dh-register__heading h1 { margin-bottom: 8px; }
.dh-register__heading p { color: var(--dh-text-2); }
.dh-register__form { display: grid; gap: 18px; }
.dh-register__card { padding: 26px; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-sm); }
.dh-register__card h2 { margin-bottom: 20px; font-size: 1.15rem; }
.dh-register__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.dh-register__wide { grid-column: 1 / -1; }
.dh-register__card .form-group { min-width: 0; margin-bottom: 18px; }
.dh-register__card label span { color: var(--dh-text-3); font-weight: 400; }
.dh-register__check { display: flex; align-items: flex-start; gap: 10px; color: var(--dh-text-2); font-size: .9rem; font-weight: 400 !important; }
.dh-register__check input { margin-top: 5px; }
.dh-register__submit { width: 100%; min-height: 50px; }
.dh-register__login { margin: 0; text-align: center; color: var(--dh-text-2); }
.dh-captcha { display: block; width: 100%; margin: 4px 0 12px; }
.dh-captcha .recaptcha-container { display: flex; justify-content: center; width: 100%; min-height: 78px; }
.dh-captcha__challenge { display: flex; align-items: center; gap: 12px; }
.dh-captcha__challenge img { max-width: 50%; }
.dh-account-page { padding-top: 34px; padding-bottom: 54px; }
.dh-account-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--dh-blue-700); font-size: .9rem; font-weight: 700; }
.dh-account-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dh-account-heading { margin-bottom: 24px; }
.dh-account-heading h1 { margin: 4px 0 7px; font-size: clamp(1.9rem, 4vw, 2.7rem); }
.dh-account-heading p { margin: 0; color: var(--dh-text-2); }
.dh-account-form { display: grid; gap: 18px; }
.dh-account-card { margin-bottom: 18px; padding: 24px; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-sm); }
.dh-account-card h2 { margin: 0 0 18px; font-size: 1.12rem; }
.dh-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.dh-account-grid__wide { grid-column: 1 / -1; }
.dh-account-submit { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dh-account-subheading { margin: 20px 0 12px; font-size: 1rem; }
.dh-account-preferences { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.dh-account-preferences label { display: flex; align-items: flex-start; gap: 9px; color: var(--dh-text-2); font-weight: 500; }
.dh-account-preferences input { margin-top: 4px; }
.dh-password-card { max-width: 680px; }
.dh-security-card__heading, .dh-account-card__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dh-account-card__heading h2 { margin: 0 0 4px; }
.dh-account-card__heading p { margin: 0; color: var(--dh-text-2); }
.dh-account-card__icon { width: 46px; height: 46px; flex: none; display: grid; place-items: center; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 13px; }
.dh-account-card__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-security-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.dh-security-toggle label { display: flex; align-items: center; gap: 8px; margin: 0; }
.dh-security-toggle span { color: var(--dh-text-2); font-size: .84rem; }
.dh-contact-switcher { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; padding: 16px; background: #fff; border: 1px solid var(--dh-border); border-radius: 13px; }
.dh-contact-switcher__form { display: flex; align-items: flex-end; gap: 10px; width: min(100%, 700px); }
.dh-contact-switcher__form label { min-width: max-content; margin-bottom: 11px; }
.dh-contact-switcher__form select { min-width: 180px; }
.dh-contact-delete { display: flex; justify-content: flex-end; margin-top: -6px; }
.dh-account-empty { display: grid; justify-items: center; padding: 46px 22px; text-align: center; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); }
.dh-account-empty__icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 14px; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 15px; }
.dh-account-empty__icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-email-list { display: grid; gap: 12px; }
.dh-email-card { display: flex; align-items: center; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--dh-border); border-radius: 14px; box-shadow: var(--dh-shadow-sm); }
.dh-email-card__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 12px; }
.dh-email-card__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dh-email-card__content { min-width: 0; flex: 1; }
.dh-email-card__date, .dh-email-card__attachment { color: var(--dh-text-3); font-size: .8rem; }
.dh-email-card h2 { margin: 3px 0; color: var(--dh-navy-900); font-size: 1rem; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .dh-register { padding-top: 28px; padding-bottom: 36px; }
  .dh-register__card { padding: 20px; }
  .dh-register__grid { grid-template-columns: 1fr; }
  .dh-register__wide { grid-column: auto; }
}

/* Dashboard tiles */
.dh-tile { background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: var(--dh-radius); padding: 20px; display: flex; align-items: center; gap: 16px; transition: transform .2s, box-shadow .2s; }
.dh-tile:hover { transform: translateY(-3px); box-shadow: var(--dh-shadow); }
.dh-tile__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(27,99,255,.12), rgba(53,214,240,.12)); color: var(--dh-blue-600); }
.dh-tile__icon svg { width: 24px; height: 24px; }
.dh-tile__label { font-size: .8rem; color: var(--dh-text-3); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.dh-tile__value { font-family: var(--dh-font-display); font-size: 1.4rem; font-weight: 800; color: var(--dh-navy-900); }
.dh-shortcut-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dh-shortcut { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: var(--dh-navy-900); background: #fff; border: 1px solid var(--dh-border); border-radius: 12px; font-weight: 650; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.dh-shortcut:hover { color: var(--dh-blue-700); background: #f8fbff; border-color: var(--dh-blue-300); box-shadow: var(--dh-shadow-sm); transform: translateY(-2px); }
.dh-shortcut svg { width: 21px; height: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--dh-blue-600); }

/* ---------- Client area / native WHMCS components ---------- */
.dh-dashboard-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.dh-home-invoice-alert { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 18px 20px; color: #6e4b00; background: linear-gradient(110deg, #fff9e9, #fff4cf); border: 1px solid #f1d47c; border-radius: 15px; box-shadow: 0 5px 18px rgba(126, 89, 0, .08); }
.dh-home-invoice-alert__icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #a86f00; background: rgba(255, 255, 255, .72); border: 1px solid rgba(168, 111, 0, .12); border-radius: 13px; }
.dh-home-invoice-alert__icon svg { width: 22px; height: 22px; }
.dh-home-invoice-alert__copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.dh-home-invoice-alert__copy strong { color: #563900; font-size: .96rem; }
.dh-home-invoice-alert__copy span { color: #7c642d; font-size: .84rem; }
.dh-home-invoice-alert__action { flex: 0 0 auto; }
.dh-services-page { padding-top: 38px; padding-bottom: 54px; }
.dh-services-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.dh-services-heading h1 { margin: 4px 0 7px; font-size: clamp(2rem, 4vw, 3rem); }
.dh-services-heading p { margin: 0; color: var(--dh-text-2); font-size: 1rem; }
.dh-services-heading__cta { flex: none; }
.dh-services-list { display: grid; gap: 16px; }
.dh-service-card { overflow: hidden; padding: 22px 24px; background: #fff; border: 1px solid var(--dh-border); border-radius: 17px; box-shadow: var(--dh-shadow-sm); transition: border-color .2s, box-shadow .2s, transform .2s; }
.dh-service-card:hover { border-color: var(--dh-blue-300); box-shadow: var(--dh-shadow); transform: translateY(-2px); }
.dh-service-card__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--dh-border); }
.dh-service-card__product { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dh-service-card__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: var(--dh-blue-600); background: linear-gradient(135deg, rgba(16,98,254,.12), rgba(53,214,240,.18)); border-radius: 14px; }
.dh-service-card__icon svg { width: 24px; height: 24px; }
.dh-service-card__product h2 { margin: 0 0 4px; color: var(--dh-navy-900); font-size: 1.12rem; }
.dh-service-card__group { color: var(--dh-text-3); font-size: .84rem; }
.dh-service-pill { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 11px; color: #46536e; background: #eef2f8; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.dh-service-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dh-service-pill--active { color: #087a43; background: #e7f7ef; }
.dh-service-pill--pending { color: #946200; background: #fff4d6; }
.dh-service-pill--suspended { color: #a33b18; background: #fff0e9; }
.dh-service-pill--closed { color: #68738b; background: #edf0f5; }
.dh-service-card__domain { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; }
.dh-service-card__domain > span, .dh-service-card__details span { color: var(--dh-text-3); font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.dh-service-card__domain a, .dh-service-card__domain strong { color: var(--dh-navy-900); font-weight: 700; overflow-wrap: anywhere; }
.dh-service-card__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 16px; background: #f7f9fd; border: 1px solid #edf1f8; border-radius: 12px; }
.dh-service-card__details > div { display: grid; gap: 5px; min-width: 0; }
.dh-service-card__details strong { color: var(--dh-navy-900); font-size: .92rem; overflow-wrap: anywhere; }
.dh-service-card__notice { margin-top: 14px; padding: 12px 14px; color: #85420d; background: #fff7e8; border: 1px solid #f3dfb5; border-radius: 10px; font-size: .88rem; }
.dh-service-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dh-service-card__actions .dh-btn { gap: 9px; }
.dh-service-card__actions svg { width: 17px; height: 17px; }
.dh-service-card__secondary { color: var(--dh-blue-700); font-size: .87rem; font-weight: 700; }
.dh-services-empty { display: grid; justify-items: center; padding: 54px 24px; text-align: center; background: #fff; border: 1px solid var(--dh-border); border-radius: 18px; box-shadow: var(--dh-shadow-sm); }
.dh-services-empty__icon { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 15px; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 18px; }
.dh-services-empty__icon svg { width: 30px; height: 30px; }
.dh-services-empty h2 { margin-bottom: 8px; font-size: 1.3rem; }
.dh-services-empty p { margin-bottom: 20px; color: var(--dh-text-2); }
.dh-home-panels { display: grid; gap: 18px; margin: 0 0 24px; }
.dh-home-panel { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow-sm); }
.dh-home-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 20px; color: #fff; background: linear-gradient(110deg, var(--dh-navy-950), var(--dh-navy-800)); }
.dh-home-panel__header h2 { display: flex; align-items: center; gap: 9px; margin: 0; color: inherit; font-size: 1rem; }
.dh-home-panel__header h2 i { color: var(--dh-cyan-300); }
.dh-home-panel__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 23px; padding: 0 7px; color: #fff; background: var(--dh-blue-600); border-radius: 999px; font-size: .76rem; font-weight: 700; }
.dh-home-panel__body { padding: 18px 20px; }
.dh-home-panel__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
.dh-home-panel__link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; color: var(--dh-navy-900); background: #f8faff; border: 1px solid var(--dh-border); border-radius: 10px; transition: border-color .2s, color .2s, transform .2s; }
.dh-home-panel__link:hover { color: var(--dh-blue-700); border-color: var(--dh-blue-300); transform: translateY(-1px); }
.dh-home-panel__link > i { color: var(--dh-blue-600); }
.dh-home-panel__link > span:first-of-type { flex: 1; }
.dh-home-panel__link--static { color: var(--dh-text-2); }
.dh-home-panel__link .label,
.dh-home-panel__link .status,
.dh-home-panel__link .badge:not(.dh-home-panel__badge) { display: inline-flex !important; align-items: center; padding: 4px 9px !important; color: #1745a5 !important; background: #eaf1ff !important; border: 1px solid #d6e4ff !important; border-radius: 999px !important; font-size: .72rem !important; font-weight: 750 !important; line-height: 1.25 !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; }
.dh-home-panel__link .label-success,
.dh-home-panel__link .status-answered,
.dh-home-panel__link .status-closed { color: #087a43 !important; background: #e7f7ef !important; border-color: #c4ebd4 !important; }
.dh-home-panel__link .label-warning,
.dh-home-panel__link .status-customer-reply,
.dh-home-panel__link .status-in-progress { color: #855600 !important; background: #fff4d6 !important; border-color: #f3dfaa !important; }
.dh-home-panel__link .label-danger,
.dh-home-panel__link .status-open { color: #a51d2d !important; background: #fdebed !important; border-color: #f5c8ce !important; }
.dh-home-panel__badge { color: #fff !important; background: var(--dh-blue-600) !important; }
.dh-home-panel__footer { padding: 0 20px 16px; }
.dh-service-page { padding-top: 32px; padding-bottom: 52px; }
.dh-service-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .9rem; font-weight: 700; }
.dh-service-back svg { width: 18px; height: 18px; }
.dh-service-summary, .dh-service-access, .dh-service-nameservers { margin-bottom: 20px; padding: 24px; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-sm); }
.dh-usage-card { margin-bottom: 20px; padding: 24px; background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-sm); }
.dh-usage-card__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dh-usage-card__heading h2 { margin: 3px 0 0; font-size: 1.2rem; }
.dh-usage-card__updated { color: var(--dh-text-3); font-size: .78rem; }
.dh-usage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dh-usage-meter { min-width: 0; padding: 17px; background: #f8faff; border: 1px solid var(--dh-border); border-radius: 13px; }
.dh-usage-meter__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--dh-text-2); font-size: .87rem; font-weight: 650; }
.dh-usage-meter__heading strong { color: var(--dh-blue-700); font-family: var(--dh-font-display); font-size: 1rem; }
.dh-usage-meter__track { height: 9px; margin: 13px 0 10px; overflow: hidden; background: #e5ebf5; border-radius: 999px; }
.dh-usage-meter__bar { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, var(--dh-blue-500), var(--dh-blue-600)); border-radius: inherit; }
.dh-usage-meter__bar--traffic { background: linear-gradient(90deg, var(--dh-cyan-400), var(--dh-blue-600)); }
.dh-usage-meter p { margin: 0; color: var(--dh-text-3); font-size: .8rem; }
.dh-service-summary { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: center; }
.dh-service-summary__main h1 { margin: 5px 0 6px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.dh-service-domain { display: inline-block; margin-bottom: 12px; font-weight: 650; }
.dh-service-status { display: table; padding: 5px 10px; color: #087a43; background: var(--dh-green-soft); border-radius: 999px; font-size: .78rem; font-weight: 750; }
.dh-service-status--suspended, .dh-service-status--pending { color: #8a5700; background: #fff4d6; }
.dh-service-status--terminated, .dh-service-status--cancelled, .dh-service-status--fraud { color: #a51d2d; background: #fde8e8; }
.dh-service-summary__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dh-service-summary__facts > div { display: grid; gap: 4px; padding: 12px; background: #f7f9fd; border-radius: 10px; }
.dh-service-summary__facts span, .dh-service-nameservers div span { color: var(--dh-text-3); font-size: .75rem; }
.dh-service-summary__facts strong { color: var(--dh-navy-900); font-size: .9rem; overflow-wrap: anywhere; }
.dh-service-invoice-alert { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; padding: 16px 18px; color: #725100; background: #fff8e1; border: 1px solid #f5d779; border-radius: 12px; }
.dh-service-invoice-alert.is-overdue { color: #9b1c1c; background: #fff0f0; border-color: #f3b3b3; }
.dh-service-invoice-alert > div { display: grid; gap: 3px; }
.dh-service-invoice-alert span { font-size: .87rem; }
.dh-service-access__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.dh-service-access__icon, .dh-webmail-link__icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 13px; }
.dh-service-access__icon svg, .dh-webmail-link__icon svg { width: 23px; height: 23px; }
.dh-service-access__heading h2, .dh-service-nameservers h2 { margin: 0 0 4px; font-size: 1.2rem; }
.dh-service-access__heading p { margin: 0; color: var(--dh-text-2); font-size: .9rem; }
.dh-service-module-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dh-service-module-actions .btn, .dh-service-module-actions .modulebutton, .dh-service-module-actions input[type=submit] { min-height: 42px; margin: 0 8px 8px 0; padding: 10px 16px; color: #fff !important; background: var(--dh-blue-600) !important; border: 1px solid var(--dh-blue-600) !important; border-radius: 10px !important; font-weight: 700; text-decoration: none; }
.dh-service-module-empty { padding: 16px; color: var(--dh-text-2); background: #f7f9fd; border-radius: 10px; }
.dh-service-module-empty p { margin-bottom: 12px; }
.dh-webmail-link { display: flex; align-items: center; gap: 13px; padding: 14px; color: var(--dh-text); background: #f7faff; border: 1px solid var(--dh-border); border-radius: 12px; }
.dh-webmail-link:hover { color: var(--dh-blue-700); border-color: var(--dh-blue-300); }
.dh-webmail-link__icon { width: 42px; height: 42px; }
.dh-webmail-link > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.dh-webmail-link small { color: var(--dh-text-3); }
.dh-webmail-link__arrow { color: var(--dh-blue-600); font-size: 1.2rem; }
.dh-service-nameservers h2 { margin-bottom: 14px; }
.dh-service-nameservers div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--dh-border); }
.dh-service-nameservers code { color: var(--dh-navy-900); }
.dh-service-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* WHMCS invoice view page (standalone template) */
.dh-invoice-body { min-height: 100vh; background: var(--dh-bg); }
.dh-invoice { width: min(100% - 32px, 1080px); margin: 0 auto; padding: 22px 0 48px; }
.dh-invoice__topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding: 14px 18px; background: linear-gradient(120deg, var(--dh-navy-950), var(--dh-navy-800)); border-radius: 14px; }
.dh-invoice__brand { display: flex; align-items: center; gap: 12px; color: #d7e4ff; font-size: .8rem; }
.dh-invoice__brand img { width: 118px; height: auto; filter: brightness(0) invert(1); }
.dh-invoice__back { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-size: .88rem; font-weight: 700; }
.dh-invoice__back:hover { color: var(--dh-cyan-300); }
.dh-invoice__back svg, .dh-invoice__actions svg { width: 18px; height: 18px; }
.dh-invoice__card { padding: clamp(20px, 4vw, 38px); background: #fff; border: 1px solid var(--dh-border); border-radius: 18px; box-shadow: var(--dh-shadow); }
.dh-invoice__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--dh-border); }
.dh-invoice__heading h1 { margin: 4px 0 6px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.dh-invoice__heading p { margin: 0; color: var(--dh-text-2); }
.dh-invoice__status { flex: none; padding: 8px 13px; color: #4e5c75; background: #edf1f7; border-radius: 999px; font-size: .82rem; font-weight: 800; }
.dh-invoice__status--unpaid, .dh-invoice__status--draft { color: #8a5700; background: #fff2cd; }
.dh-invoice__status--paid, .dh-invoice__status--payment-pending { color: #087a43; background: #e4f6ec; }
.dh-invoice__status--cancelled, .dh-invoice__status--refunded { color: #a51d2d; background: #fdebed; }
.dh-invoice__paybox { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 22px 0; padding: 18px 20px; background: #f2f7ff; border: 1px solid #dce8ff; border-radius: 14px; }
.dh-invoice__paybox > div:first-child { display: grid; gap: 3px; color: var(--dh-text-2); }
.dh-invoice__paybox > div:first-child span { color: var(--dh-navy-900); font-size: 1.5rem; font-weight: 800; }
.dh-invoice__paybutton .btn, .dh-invoice__paybutton input[type=submit] { padding: 11px 20px; color: #fff !important; background: var(--dh-blue-600) !important; border: 1px solid var(--dh-blue-600) !important; border-radius: 10px !important; font-weight: 750; }
.dh-invoice__addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0; }
.dh-invoice__addresses section { min-width: 0; padding: 18px; background: #f8faff; border: 1px solid var(--dh-border); border-radius: 12px; }
.dh-invoice__addresses h2, .dh-invoice__items h2, .dh-invoice__transactions h2, .dh-invoice__credit h2 { margin: 0 0 12px; font-size: 1rem; }
.dh-invoice__addresses address { margin: 0; color: var(--dh-text-2); font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.dh-invoice__method { margin-top: 12px; color: var(--dh-text-2); font-size: .88rem; }
.dh-invoice__notes, .dh-invoice__credit { margin: 20px 0; padding: 17px; background: #f8faff; border: 1px solid var(--dh-border); border-radius: 12px; }
.dh-invoice__items, .dh-invoice__transactions { margin-top: 26px; }
.dh-invoice__items .table, .dh-invoice__transactions .table { width: 100%; }
.dh-invoice__items .table th, .dh-invoice__transactions .table th { padding: 12px; color: var(--dh-navy-900); background: #f0f4fb; }
.dh-invoice__items .table td, .dh-invoice__transactions .table td { padding: 12px; vertical-align: top; }
.dh-invoice__total td { background: #f6f8fc; }
.dh-invoice__empty { color: var(--dh-text-3); text-align: center; }
.dh-invoice__credit-row { display: flex; gap: 10px; max-width: 480px; }
.dh-invoice__credit-row .form-control { min-width: 0; }
.dh-invoice__qr { display: grid; place-items: center; padding: 20px; }
.dh-invoice__actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--dh-border); }
.dh-invoice__actions > a { display: inline-flex; align-items: center; gap: 8px; }
.dh-invoice__document-actions { display: flex; gap: 8px; }
.dh-invoice__error { margin-top: 28px; text-align: center; }
.dh-invoice__error h1 { font-size: 1.7rem; }
.dh-invoice__error p { color: var(--dh-text-2); }
@media (max-width: 640px) {
  .dh-invoice { width: min(100% - 20px, 1080px); padding-top: 10px; }
  .dh-invoice__topbar { align-items: flex-start; flex-direction: column; padding: 14px; }
  .dh-invoice__heading { align-items: flex-start; flex-direction: column; }
  .dh-invoice__addresses { grid-template-columns: 1fr; gap: 12px; }
  .dh-invoice__paybox, .dh-invoice__actions { align-items: stretch; flex-direction: column; }
  .dh-invoice__paybutton .btn, .dh-invoice__paybutton input[type=submit] { width: 100%; }
  .dh-invoice__document-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dh-invoice__credit-row { flex-direction: column; }
}
.dh-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
.dh-body .main-content, .dh-body #main-body { min-height: 45vh; }
.dh-body .main-content > .container, .dh-body #main-body > .container { padding-top: 34px; padding-bottom: 42px; }
.dh-body .breadcrumb { margin: 0 0 22px; color: var(--dh-text-3); }
.dh-body .breadcrumb > li + li::before { color: var(--dh-muted); }
.dh-body .panel, .dh-body .card { background: var(--dh-surface); }
.dh-body .panel-heading a, .dh-body .card-header a { color: #fff; }
.dh-body .table { margin-bottom: 0; }
.dh-body .table > thead > tr > th { padding: 14px 12px; }
.dh-body .table > tbody > tr > td { padding: 13px 12px; }
.dh-body .table > tbody > tr:hover { background: #f4f7fd; }
.dh-body .pagination > li > a, .dh-body .pagination > li > span { border-color: var(--dh-border); color: var(--dh-blue-700); }
.dh-body .pagination > .active > a, .dh-body .pagination > .active > span { background: var(--dh-blue-600); border-color: var(--dh-blue-600); color: #fff; }
.dh-body label { color: var(--dh-navy-900); font-weight: 600; margin-bottom: 7px; }
.dh-body .form-group { display: block; width: 100%; min-width: 0; margin-bottom: 18px; }
.dh-body .form-group > label { display: block; width: 100%; }
.dh-body .form-control { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; background-color: #fff; color: var(--dh-text); }
.dh-body .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.dh-body .form-group select,
.dh-body .form-group textarea { display: block; width: 100%; max-width: 100%; min-width: 0; }
.dh-body .dh-captcha .recaptcha-container { display: flex; justify-content: center; width: 100%; }
.dh-body textarea.form-control { min-height: 120px; }
.dh-body .checkbox label, .dh-body .radio label { font-weight: 400; }
.dh-body .dropdown-menu { border: 1px solid var(--dh-border); border-radius: 12px; padding: 7px; box-shadow: var(--dh-shadow); }
.dh-body .dropdown-menu > li > a { padding: 9px 12px; border-radius: 7px; }
.dh-body .dropdown-menu > li > a:hover { background: var(--dh-surface-2); color: var(--dh-blue-700); }
.dh-body .dh-main { min-height: calc(100vh - 220px); }
.dh-body .store-order-container { max-width: 1000px; margin: 28px auto 42px; padding: clamp(20px, 4vw, 38px); background: #fff; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-sm); }
.dh-body .store-order-container h2, .dh-body .store-order-container h3, .dh-body .store-order-container h4 { color: var(--dh-navy-900); }
.dh-body .store-order-container .payment-term { padding: 18px; background: #f6f9ff; border: 1px solid var(--dh-border); border-radius: 13px; }
.dh-body .store-order-container .nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; border: 0; }
.dh-body .store-order-container .nav-tabs > li { float: none; margin: 0; }
.dh-body .store-order-container .nav-tabs > li > a { color: var(--dh-navy-900); background: #f4f7fc; border: 1px solid var(--dh-border); border-radius: 10px; font-weight: 650; }
.dh-body .store-order-container .nav-tabs > li.active > a,
.dh-body .store-order-container .nav-tabs > li > a:hover { color: var(--dh-blue-700); background: #eaf1ff; border-color: #b9d0ff; }
.dh-body .store-order-container .store-domain-tab-content { padding: 22px; border: 1px solid var(--dh-border); border-radius: 0 0 13px 13px; }
.dh-body .store-order-container .card { margin-top: 20px; }
.dh-body .store-order-container .btn-primary { color: #fff; background: var(--dh-blue-600); border: 0; border-radius: 10px; font-weight: 700; }
.dh-body .label-success, .dh-body .label-active { color: #fff !important; background: #0b9958 !important; }
.dh-body .label-warning { color: #4b3500 !important; background: #ffd66b !important; }
.dh-body .label-danger { color: #fff !important; background: #cf3342 !important; }
.dh-body .label-default, .dh-body .label-info { color: #1642a0 !important; background: #e5efff !important; }
.dh-body .alert { padding: 15px 18px; }
.dh-body .alert a { text-decoration: underline; }
.dh-body .modal-content { overflow: hidden; border: 1px solid var(--dh-border); border-radius: var(--dh-radius-lg); box-shadow: var(--dh-shadow-lg); }
.dh-body .modal-header { background: var(--dh-navy-900); color: #fff; }
.dh-body .modal-title { color: #fff; }
.dh-body .modal-footer { border-top-color: var(--dh-border); }
.dh-body .list-group-item { border-color: var(--dh-border); }
.dh-body .list-group-item.active, .dh-body .list-group-item.active:hover { background: var(--dh-blue-600); border-color: var(--dh-blue-600); }
.dh-body .well { box-shadow: none; }
.dh-body :focus-visible, .dh-body a:focus-visible, .dh-body button:focus-visible { outline: 3px solid rgba(53,214,240,.75); outline-offset: 3px; }

/* WHMCS order form and checkout */
.dh-body .product, .dh-body .product-item, .dh-body .order-summary, .dh-body .view-cart-items { border-radius: var(--dh-radius); }
.dh-body .order-summary { border: 1px solid var(--dh-border); box-shadow: var(--dh-shadow-sm); }
.dh-body .order-summary .summary-title { background: var(--dh-navy-900); color: #fff; }
.dh-body .cart-items .item, .dh-body .domainchecker-result { border-color: var(--dh-border); }
.dh-body .domain-available, .dh-body .domain-available a { color: #087a43; }
.dh-body .domain-unavailable { color: #b42332; }
.dh-body .payment-methods .payment-method { border: 1px solid var(--dh-border); border-radius: 12px; padding: 14px; }

/* ---------- Duck Host client portal home ---------- */
.dh-portal-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 8vw, 92px) 0 clamp(58px, 8vw, 96px);
  color: #fff;
  text-align: center;
  background:
    radial-gradient(700px 280px at 50% -30%, rgba(53,214,240,.22), transparent 72%),
    radial-gradient(520px 240px at 88% 110%, rgba(27,99,255,.3), transparent 72%),
    linear-gradient(135deg, var(--dh-navy-950), var(--dh-navy-800));
}
.dh-portal-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.dh-portal-hero__inner { position: relative; z-index: 1; }
.dh-portal-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #c3d2ec; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dh-status-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--dh-green); box-shadow: 0 0 0 4px rgba(18,183,106,.17); }
.dh-portal-hero h1 { max-width: 820px; margin: 0 auto 14px; color: #fff; font-size: clamp(2rem, 4.5vw, 3.35rem); }
.dh-portal-hero p { max-width: 640px; margin: 0 auto; color: #b9c7e6; font-size: clamp(1rem, 2vw, 1.15rem); }
.dh-portal-main { position: relative; padding: 0 0 64px; background: var(--dh-bg); }
.dh-portal-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: -34px; position: relative; z-index: 2; }
.dh-portal-card { min-height: 260px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; color: var(--dh-text); background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 18px; box-shadow: var(--dh-shadow); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.dh-portal-card:hover { color: var(--dh-text); border-color: var(--dh-blue-300); box-shadow: var(--dh-shadow-lg); transform: translateY(-5px); }
.dh-portal-card:focus-visible { outline: 3px solid var(--dh-cyan-400); outline-offset: 4px; }
.dh-portal-card__icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; color: var(--dh-blue-600); background: linear-gradient(135deg, rgba(27,99,255,.12), rgba(53,214,240,.15)); border: 1px solid rgba(27,99,255,.08); border-radius: 15px; }
.dh-portal-card__icon svg { width: 27px; height: 27px; }
.dh-portal-card__title { color: var(--dh-navy-900); font-family: var(--dh-font-display); font-size: 1.18rem; font-weight: 700; line-height: 1.3; }
.dh-portal-card__text { margin-top: 9px; color: var(--dh-text-2); font-size: .94rem; line-height: 1.65; }
.dh-portal-card__link { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: var(--dh-blue-600); font-weight: 700; font-size: .9rem; }
.dh-portal-card__link span { font-size: 1.15rem; transition: transform .2s ease; }
.dh-portal-card:hover .dh-portal-card__link span { transform: translateX(4px); }
.dh-portal-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 42px; padding: 28px 32px; background: var(--dh-surface); border: 1px solid var(--dh-border); border-radius: 16px; }
.dh-portal-help__eyebrow { color: var(--dh-blue-600); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dh-portal-help h2 { margin: 5px 0 6px; font-size: 1.35rem; }
.dh-portal-help p { margin: 0; color: var(--dh-text-2); font-size: .92rem; }
.dh-portal-help__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dh-portal-footer { padding: 28px 0 18px; background: var(--dh-navy-950); }
.dh-portal-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.dh-portal-footer__brand { display: flex; flex-direction: column; gap: 6px; color: #9fb0d6; font-size: .75rem; }
.dh-portal-footer__brand img { width: 122px; height: auto; filter: brightness(0) invert(1); opacity: .92; }
.dh-portal-footer__links { display: flex; flex-wrap: wrap; gap: 18px; }
.dh-portal-footer__links a, .dh-portal-footer__contact { color: #c3d2ec; font-size: .84rem; }
.dh-portal-footer__links a:hover, .dh-portal-footer__contact:hover { color: #fff; }
.dh-portal-footer__contact-group { display: grid; gap: 5px; text-align: right; }
.dh-portal-footer__address { color: #7a86a8; font-size: .75rem; }
.dh-portal-footer .dh-footer__bottom { margin-top: 20px; padding-top: 16px; }
.dh-ticket-history-page .panel, .dh-ticket-history-page .table-responsive, .dh-ticket-history-page .table { width: 100%; }
.dh-ticket-history-page .table { min-width: 760px; }
.dh-invoice-history-card { width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--dh-border); border-radius: 17px; box-shadow: var(--dh-shadow-sm); }
.dh-invoice-history-table-wrap { width: 100%; overflow-x: auto; }
.dh-invoice-history-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; }
.dh-invoice-history-table th { padding: 15px 17px; color: var(--dh-text-2); background: #f0f4fb; border-bottom: 1px solid var(--dh-border); font-size: .72rem; font-weight: 750; letter-spacing: .07em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.dh-invoice-history-table td { padding: 16px 17px; color: var(--dh-text-2); border-bottom: 1px solid #edf1f7; font-size: .9rem; vertical-align: middle; }
.dh-invoice-history-table tbody tr:last-child td { border-bottom: 0; }
.dh-invoice-history-table tbody tr:hover { background: #f9fbff; }
.dh-invoice-history-number { color: var(--dh-navy-900); font-weight: 750; }
.dh-invoice-history-total { color: var(--dh-navy-900) !important; font-weight: 700; white-space: nowrap; }
.dh-invoice-history-status { display: inline-flex; align-items: center; padding: 6px 10px; color: #52617b; background: #eef2f8; border-radius: 999px; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.dh-invoice-history-status--unpaid { color: #895b00; background: #fff1c8; }
.dh-invoice-history-status--paid { color: #087a43; background: #e4f6ec; }
.dh-invoice-history-status--cancelled { color: #68738b; background: #edf0f5; }
.dh-invoice-history-empty, .dh-domain-empty { display: grid; justify-items: center; padding: 52px 22px; text-align: center; background: #fff; border: 1px solid var(--dh-border); border-radius: 17px; box-shadow: var(--dh-shadow-sm); }
.dh-invoice-history-empty__icon, .dh-domain-empty__icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 15px; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 17px; }
.dh-invoice-history-empty__icon svg, .dh-domain-empty__icon svg { width: 27px; height: 27px; }
.dh-invoice-history-empty h2, .dh-domain-empty h2 { margin: 0 0 7px; font-size: 1.25rem; }
.dh-invoice-history-empty p, .dh-domain-empty p { margin: 0 0 20px; color: var(--dh-text-2); }
.dh-domains-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.dh-domain-list { display: grid; gap: 15px; }
.dh-domain-card { min-width: 0; padding: 22px 24px; background: #fff; border: 1px solid var(--dh-border); border-radius: 17px; box-shadow: var(--dh-shadow-sm); }
.dh-domain-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--dh-border); }
.dh-domain-card__name { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dh-domain-card__icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 13px; }
.dh-domain-card__icon svg { width: 23px; height: 23px; }
.dh-domain-card__name h2 { margin: 0 0 3px; color: var(--dh-navy-900); font-size: 1.08rem; overflow-wrap: anywhere; }
.dh-domain-card__name div > span { color: var(--dh-text-3); font-size: .82rem; }
.dh-domain-status { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 6px 10px; color: #68738b; background: #edf0f5; border-radius: 999px; font-size: .76rem; font-weight: 750; }
.dh-domain-status--active { color: #087a43; background: #e4f6ec; }
.dh-domain-status--pending { color: #895b00; background: #fff1c8; }
.dh-domain-status--expired, .dh-domain-status--cancelled, .dh-domain-status--terminated { color: #a51d2d; background: #fdebed; }
.dh-domain-card__facts, .dh-domain-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 17px 0; }
.dh-domain-card__facts > div, .dh-domain-details-grid > div { display: grid; gap: 5px; min-width: 0; }
.dh-domain-card__facts span, .dh-domain-details-grid span { color: var(--dh-text-3); font-size: .73rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.dh-domain-card__facts strong, .dh-domain-details-grid strong { color: var(--dh-navy-900); font-size: .89rem; overflow-wrap: anywhere; }
.dh-domain-card__notice { margin: 0 0 14px; padding: 11px 13px; color: #835700; background: #fff7e2; border: 1px solid #f4dfa1; border-radius: 10px; font-size: .84rem; }
.dh-domain-card__actions, .dh-domain-details-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid var(--dh-border); }
.dh-domain-details-heading { align-items: center; }
.dh-domain-details-page .dh-account-card { margin-bottom: 16px; }
.dh-domain-details-grid { padding: 0; }
.dh-domain-ssl__status { display: flex; align-items: center; gap: 9px; color: #087a43; }
.dh-domain-ssl__status.is-inactive { color: #895b00; }
.dh-domain-registrar__actions { display: flex; flex-wrap: wrap; gap: 9px; }
.dh-domain-registrar__actions .btn, .dh-domain-registrar__actions .modulebutton { margin: 0; }
.dh-install-card { position: fixed; right: 20px; bottom: 20px; z-index: 3000; width: min(410px, calc(100vw - 32px)); padding: 20px; color: var(--dh-text); background: #fff; border: 1px solid var(--dh-border); border-radius: 18px; box-shadow: 0 22px 70px rgba(4,11,34,.28); }
.dh-install-card__close { position: absolute; top: 10px; right: 11px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--dh-text-3); background: transparent; border: 0; border-radius: 9px; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.dh-install-card__close:hover { color: var(--dh-navy-900); background: var(--dh-surface-2); }
.dh-install-card__top { display: flex; align-items: flex-start; gap: 13px; padding-right: 22px; }
.dh-install-card__icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 13px; }
.dh-install-card__icon svg { width: 23px; height: 23px; }
.dh-install-card__top h2 { margin: 1px 0 5px; color: var(--dh-navy-900); font-size: 1.02rem; }
.dh-install-card__top p { margin: 0; color: var(--dh-text-2); font-size: .84rem; line-height: 1.5; }
.dh-install-card__instructions { margin: 14px 0 0 59px; padding: 11px 12px; color: var(--dh-text-2); background: #f3f7ff; border-radius: 10px; font-size: .82rem; line-height: 1.55; }
.dh-install-card__instructions[hidden] { display: none; }
.dh-install-card__actions { display: flex; align-items: center; gap: 9px; margin: 16px 0 0 59px; }
.dh-install-card__actions .dh-btn { min-height: 42px; padding: 10px 15px; font-size: .84rem; }
.dh-install-card__later { padding: 9px 10px; color: var(--dh-text-3); background: transparent; border: 0; font: inherit; font-size: .82rem; cursor: pointer; }
.dh-install-card__later:hover { color: var(--dh-navy-900); }
.dh-logout-page { min-height: 48vh; display: grid; place-items: center; padding: 56px 20px; background: var(--dh-bg); }
.dh-logout-card { width: min(100%, 520px); padding: 40px; text-align: center; background: #fff; border: 1px solid var(--dh-border); border-radius: 20px; box-shadow: var(--dh-shadow); }
.dh-logout-icon { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 20px; color: var(--dh-blue-600); background: rgba(16,98,254,.1); border-radius: 18px; }
.dh-logout-icon svg { width: 30px; height: 30px; }
.dh-logout-card h1 { margin-bottom: 10px; font-size: 1.8rem; }
.dh-logout-card p { margin-bottom: 24px; color: var(--dh-text-2); }

@media (max-width: 800px) {
  .dh-portal-actions { grid-template-columns: 1fr; gap: 14px; margin-top: -24px; }
  .dh-portal-card { min-height: 0; padding: 23px; }
  .dh-portal-card__icon { margin-bottom: 16px; }
  .dh-portal-help { align-items: flex-start; flex-direction: column; padding: 24px; }
}
@media (max-width: 560px) {
  .dh-install-card { right: 12px; bottom: 12px; left: 12px; width: auto; padding: 17px; }
  .dh-install-card__actions { align-items: stretch; flex-direction: column; margin-left: 0; }
  .dh-install-card__actions .dh-btn { width: 100%; }
  .dh-install-card__instructions { margin-left: 0; }
  .dh-portal-footer__inner { align-items: flex-start; flex-direction: column; }
  .dh-portal-footer__contact-group { text-align: left; }
  .dh-portal-footer__links { flex-direction: column; gap: 9px; }
  .dh-portal-footer .dh-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1024px) {
  .dh-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dh-service-summary { grid-template-columns: 1fr; }
}
/* Responsive */
@media (max-width: 1024px) {
  .dh-hero__grid { grid-template-columns: 1fr; }
  .dh-features { grid-template-columns: repeat(2,1fr); }
  .dh-pricing { grid-template-columns: 1fr; }
  .dh-plan--featured { transform: none; }
  .dh-footer__grid { grid-template-columns: 1fr 1fr; }
  .dh-cta-band__inner { grid-template-columns: 1fr; padding: 0 24px; }
}
@media (max-width: 640px) {
  .dh-features { grid-template-columns: 1fr; }
  .dh-steps { grid-template-columns: 1fr; }
  .dh-footer__grid { grid-template-columns: 1fr; }
  .dh-header__tag { display: none; }
  .dh-header__status { display: none; }
  .dh-header__inner { gap: 10px; padding: 10px 14px; }
  .dh-header__brand { min-width: 0; gap: 0; }
  .dh-header__brand > a { min-width: 0; }
  .dh-header__logo { width: auto; height: 21px; max-width: 42vw; object-fit: contain; object-position: left center; }
  .dh-header__actions { gap: 7px; }
  .dh-header__account { min-width: 38px; min-height: 38px; padding: 0 10px; font-size: .78rem; }
  .dh-header__account:not(.dh-header__account--primary) { width: 38px; padding: 0; }
  .dh-header__account:not(.dh-header__account--primary) span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .dh-header__account--icon { width: 38px; padding: 0; }
  .dh-contact-grid { grid-template-columns: 1fr; }
  .dh-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dh-tile { min-width: 0; min-height: 84px; gap: 9px; padding: 12px; }
  .dh-tile__icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; }
  .dh-tile__icon svg { width: 19px; height: 19px; }
  .dh-tile__label { font-size: .62rem; letter-spacing: .04em; line-height: 1.35; }
  .dh-tile__value { font-size: 1.2rem; }
  .dh-home-invoice-alert { align-items: flex-start; flex-wrap: wrap; gap: 10px 12px; padding: 15px; }
  .dh-home-invoice-alert__copy { flex-basis: calc(100% - 56px); }
  .dh-home-invoice-alert__action { width: 100%; }
  .dh-shortcut-grid { grid-template-columns: 1fr; }
  .dh-home-panel__links { grid-template-columns: 1fr; }
  .dh-service-summary, .dh-service-access, .dh-service-nameservers { padding: 18px; }
  .dh-usage-card { padding: 18px; }
  .dh-usage-card__heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .dh-usage-grid { grid-template-columns: 1fr; }
  .dh-service-summary__facts { grid-template-columns: 1fr 1fr; }
  .dh-service-invoice-alert { align-items: flex-start; flex-direction: column; }
  .dh-services-page { padding-top: 28px; padding-bottom: 38px; }
  .dh-services-heading { align-items: flex-start; flex-direction: column; }
  .dh-services-heading__cta { width: 100%; }
  .dh-service-card { padding: 18px; }
  .dh-service-card__details { grid-template-columns: 1fr; gap: 10px; }
  .dh-service-card__details > div { grid-template-columns: minmax(110px, .7fr) 1fr; align-items: baseline; }
  .dh-service-card__actions .dh-btn { width: 100%; }
  .dh-auth { padding: 24px 0; }
  .dh-auth__inner { width: min(100% - 28px, 440px); }
  .dh-auth__card { padding: 30px 22px; }
  .dh-auth__options { align-items: flex-start; flex-direction: column; }
  .dh-account-page { padding-top: 26px; padding-bottom: 36px; }
  .dh-account-card { padding: 19px; }
  .dh-account-grid, .dh-account-preferences { grid-template-columns: 1fr; }
  .dh-account-grid__wide { grid-column: auto; }
  .dh-account-submit { flex-direction: column; }
  .dh-account-submit .dh-btn { width: 100%; }
  .dh-domains-heading { align-items: stretch; flex-direction: column; }
  .dh-domains-heading > .dh-btn { width: 100%; }
  .dh-domain-card { padding: 17px; }
  .dh-domain-card__top { align-items: flex-start; flex-wrap: wrap; }
  .dh-domain-card__facts, .dh-domain-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .dh-domain-card__actions, .dh-domain-details-actions { flex-direction: column; }
  .dh-domain-card__actions .dh-btn, .dh-domain-details-actions .dh-btn { width: 100%; }
  .dh-invoice-history-card { overflow: visible; }
  .dh-invoice-history-table-wrap { overflow: visible; }
  .dh-invoice-history-table { display: block; min-width: 0; }
  .dh-invoice-history-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .dh-invoice-history-table tbody, .dh-invoice-history-table tr { display: block; width: 100%; }
  .dh-invoice-history-table tr { padding: 8px 16px; border-bottom: 1px solid var(--dh-border); }
  .dh-invoice-history-table tbody tr:last-child { border-bottom: 0; }
  .dh-invoice-history-table td { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf1f7; text-align: right; }
  .dh-invoice-history-table td::before { content: attr(data-label); color: var(--dh-text-3); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase; }
  .dh-invoice-history-table td:last-child { border-bottom: 0; }
  .dh-invoice-history-table td .dh-btn { min-width: 118px; }
  .dh-contact-switcher { align-items: stretch; flex-direction: column; }
  .dh-contact-switcher__form { align-items: stretch; flex-direction: column; }
  .dh-contact-switcher__form label { margin-bottom: 0; }
  .dh-contact-switcher__form .dh-btn, .dh-contact-switcher > .dh-btn { width: 100%; }
  .dh-email-card { align-items: flex-start; flex-wrap: wrap; }
  .dh-email-card__content { flex-basis: calc(100% - 60px); }
  .dh-email-card > .dh-btn { width: 100%; }
  .container { padding: 0 18px; }
  .dh-hero { padding: 48px 0 40px; }
}
@media (max-width: 760px) {
  .dh-account-grid, .dh-account-preferences { grid-template-columns: 1fr; }
  .dh-account-grid__wide { grid-column: auto; }
}
@media (max-width: 380px) {
  .dh-header__inner { gap: 7px; padding-right: 10px; padding-left: 10px; }
  .dh-header__logo { height: 20px; max-width: 43vw; }
  .dh-header__account--primary { width: 38px; padding: 0; }
  .dh-header__account--primary span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .dh-service-card__top { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* print */
@media print { .dh-header, .dh-footer, .dh-wa-float { display: none; } }