/* ============================================================================
   Business Email Console - design system
   Dark by default, light supported. Every colour is a token so a theme change
   never means editing a component.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    --bg:            #0b0e14;
    --bg-soft:       #0f131c;
    --surface:       #131926;
    --surface-2:     #182031;
    --surface-3:     #1e293c;
    --border:        #232d40;
    --border-soft:   #1b2333;

    --text:          #e8ecf4;
    --text-soft:     #aab4c6;
    --muted:         #7f8ca3;

    /* Brand fill, and the ink that sits on top of it. A lime fill needs dark
       text, so --on-brand is used everywhere the brand is a background. */
    --brand:         #b4f22e;
    --brand-strong:  #c6fb52;
    --on-brand:      #0a0f04;
    /* Accent used as *text* - lime is legible on dark, but not on white, so
       the light theme overrides this to a deeper olive. */
    --brand-ink:     #c2f24f;
    --brand-soft:    rgba(180, 242, 46, 0.13);
    --brand-border:  rgba(180, 242, 46, 0.34);

    --success:       #2fd07f;
    --success-soft:  rgba(47, 208, 127, 0.13);
    --warning:       #f6b23c;
    --warning-soft:  rgba(246, 178, 60, 0.14);
    --danger:        #f2555a;
    --danger-soft:   rgba(242, 85, 90, 0.14);
    --info:          #47b6f5;
    --info-soft:     rgba(71, 182, 245, 0.14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .55);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);

    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --sidebar-w: 258px;
    --topbar-h: 66px;

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans Bengali", sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

[data-theme="light"] {
    --bg:            #f4f6fb;
    --bg-soft:       #eef1f8;
    --surface:       #ffffff;
    --surface-2:     #f7f9fc;
    --surface-3:     #eef2f8;
    --border:        #dfe5ef;
    --border-soft:   #e9edf5;

    --text:          #141a26;
    --text-soft:     #47536b;
    --muted:         #6b7890;

    --brand:         #a8e326;
    --brand-strong:  #b7ef3a;
    --on-brand:      #0a0f04;
    --brand-ink:     #3f6212;
    --brand-soft:    rgba(101, 163, 13, 0.12);
    --brand-border:  rgba(101, 163, 13, 0.32);

    --success:       #0f9d58;
    --success-soft:  rgba(15, 157, 88, 0.10);
    --warning:       #b8730a;
    --warning-soft:  rgba(184, 115, 10, 0.12);
    --danger:        #d33a3f;
    --danger-soft:   rgba(211, 58, 63, 0.10);
    --info:          #1a7fc1;
    --info-soft:     rgba(26, 127, 193, 0.10);

    --shadow-sm: 0 1px 2px rgba(19, 26, 40, .06);
    --shadow-md: 0 8px 24px -10px rgba(19, 26, 40, .16);
    --shadow-lg: 0 24px 56px -20px rgba(19, 26, 40, .22);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.014em; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
code, kbd { font-family: var(--mono); font-size: .88em; }
::selection { background: var(--brand-soft); }

:focus-visible {
    outline: 2px solid var(--brand-ink);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --------------------------------------------------------------- utilities */
.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.gap-1 { gap: 4px; }  .gap-2 { gap: 8px; }  .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 22px; } .gap-6 { gap: 30px; }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { justify-content: center; }
.right { justify-content: flex-end; }
.muted { color: var(--muted); }
.soft { color: var(--text-soft); }
.small { font-size: 12.5px; }
.tiny  { font-size: 11.5px; }
.strong { font-weight: 620; }
.mono { font-family: var(--mono); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }

/* ------------------------------------------------------------------- shell */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--bg-soft);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .22s ease;
}
.sidebar__brand {
    display: flex; align-items: center; gap: 11px;
    height: var(--topbar-h); padding: 0 20px; flex: none;
    border-bottom: 1px solid var(--border-soft);
}
.brand-mark {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    display: grid; place-items: center; color: var(--on-brand);
    background: var(--brand);
    box-shadow: 0 6px 16px -8px var(--brand);
}
/* The logo glyph is the brand, not a UI icon: it is drawn bolder and fills
   more of its tile than the icons elsewhere in the interface. */
.brand-mark svg { width: 74%; height: 74%; stroke-width: 2.3; }

.brand-name { font-weight: 680; letter-spacing: -.02em; font-size: 15px; }
.brand-sub  { font-size: 11px; color: var(--muted); letter-spacing: .01em; }

.sidebar__nav { padding: 16px 12px; overflow-y: auto; flex: 1 1 auto; }
.nav-label {
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); padding: 14px 10px 7px;
}
.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; border-radius: var(--radius-pill);
    color: var(--text-soft); font-weight: 520; font-size: 13.6px;
    cursor: pointer; position: relative; border: 0;
    transition: background .14s ease, color .14s ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
/* A filled pill. The accent is carried by the fill and the text together; no
   outline and no edge bar, so the shape itself is the whole signal. */
.nav-item.is-active {
    background: color-mix(in srgb, var(--brand) 15%, transparent);
    color: var(--brand-ink);
    font-weight: 600;
}
.nav-item.is-active svg { color: var(--brand-ink); opacity: 1; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .92; }
.nav-item .pill { margin-left: auto; }

.sidebar__foot { padding: 12px; border-top: 1px solid var(--border-soft); flex: none; }
.user-chip {
    display: flex; align-items: center; gap: 10px; padding: 9px 10px;
    border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border-soft);
}
.avatar {
    width: 32px; height: 32px; border-radius: var(--radius-pill); flex: none;
    display: grid; place-items: center; font-size: 12.5px; font-weight: 680;
    color: var(--on-brand); background: var(--brand);
}

.main { flex: 1 1 auto; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--topbar-h); flex: none;
    display: flex; align-items: center; gap: 14px;
    padding: 0 26px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
}
.topbar h1 { font-size: 18px; }
.topbar .crumb { font-size: 12px; color: var(--muted); }

.content { padding: 26px; max-width: 1360px; width: 100%; }

.icon-btn {
    width: 36px; height: 36px; display: grid; place-items: center;
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text-soft); cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand-border); }
.icon-btn svg { width: 17px; height: 17px; }
/* Chromeless variant used for the theme switch under the sign-in card. */
.icon-btn--bare { border-color: transparent; background: transparent; color: var(--muted); }
.icon-btn--bare:hover { background: transparent; border-color: transparent; color: var(--text); }

.menu-toggle { display: none; }

/* ------------------------------------------------------------------- cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card__head {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 17px 20px; border-bottom: 1px solid var(--border-soft);
}
.card__title { font-size: 15px; font-weight: 640; }
.card__body { padding: 20px; }
.card__body.tight { padding: 14px 20px; }
.card__foot { padding: 14px 20px; border-top: 1px solid var(--border-soft); }
/* Kept so markup can ask for a surface explicitly; identical to .card here. */
.card--boxed { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

.grid { display: grid; gap: 16px; }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }

.stat {
    position: relative;
    padding: 22px; border-radius: var(--radius-lg);
    background: var(--surface); border: 1px solid var(--border);
}
.stat__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stat__label {
    font-size: 11.5px; color: var(--muted); font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
}
.stat__value { font-size: 27px; font-weight: 700; letter-spacing: -.03em; margin-top: 8px; }
/* Dates and other long values read better a size down; at 27px they crowd the
   tile and wrap on narrow columns. */
.stat__value.is-compact { font-size: 19px; letter-spacing: -.01em; margin-top: 10px; }
.stat__meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat__icon {
    width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
    background: var(--surface-2); color: var(--muted); flex: none;
}
.stat__icon svg { width: 17px; height: 17px; }
.stat__icon.is-success { background: var(--success-soft); color: var(--success); }
.stat__icon.is-warning { background: var(--warning-soft); color: var(--warning); }
.stat__icon.is-danger  { background: var(--danger-soft);  color: var(--danger); }
.stat__icon.is-info    { background: var(--info-soft);    color: var(--info); }

/* ----------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 15px;
    border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text);
    font-size: 13.6px; font-weight: 570; cursor: pointer; white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, opacity .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

/* Hover states are written as .btn.btn--x:hover on purpose. A bare
   .btn:hover outranks a single-class .btn--x, which previously let the
   neutral hover background paint over the brand fill. Doubling the class
   keeps every variant in control of its own hover. */
.btn:hover { background: var(--surface-3); border-color: var(--brand-border); }

.btn--primary {
    background: var(--brand); border-color: transparent; color: var(--on-brand);
    box-shadow: 0 6px 18px -10px var(--brand);
}
.btn.btn--primary:hover {
    background: var(--brand-strong); border-color: transparent; color: var(--on-brand);
    box-shadow: 0 9px 22px -10px var(--brand);
}
.btn.btn--primary:active { background: var(--brand); box-shadow: none; }

.btn--ghost { background: transparent; }
.btn.btn--ghost:hover { background: var(--surface-2); border-color: var(--border); }

.btn--danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.btn.btn--danger:hover { background: var(--danger); border-color: transparent; color: #fff; }

.btn--sm { height: 31px; padding: 0 11px; font-size: 12.6px; border-radius: 8px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-loading { opacity: .58; pointer-events: none; }
.btn.is-loading::before {
    content: ""; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* ------------------------------------------------------------------ badges */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--radius-pill);
    font-size: 11.8px; font-weight: 600; letter-spacing: .005em;
    border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--success { background: var(--success-soft); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.badge--info    { background: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge--neutral { background: var(--surface-3); color: var(--text-soft); border-color: var(--border); }
.badge--plain::before { display: none; }

.pill {
    font-size: 11px; font-weight: 640; padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border);
}

/* ------------------------------------------------------------------ tables */
.table-wrap { width: 100%; overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
table.table th {
    text-align: left; font-weight: 580; font-size: 11.5px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted);
    padding: 11px 16px; border-bottom: 1px solid var(--border);
    background: var(--surface-2); white-space: nowrap;
}
table.table th:first-child, table.table td:first-child { padding-left: 20px; }
table.table th:last-child,  table.table td:last-child  { padding-right: 20px; }
table.table td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.table tbody tr:last-child td { border-bottom: 0; }
table.table tbody tr { transition: background .12s ease; }
table.table tbody tr:hover { background: var(--surface-2); }
.cell-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------------ forms */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.6px; font-weight: 570; color: var(--text-soft); }
.field .hint { font-size: 11.8px; color: var(--muted); }
.field .error { font-size: 11.8px; color: var(--danger); }
.input, .select, .textarea {
    width: 100%; height: 40px; padding: 0 12px;
    background: var(--bg-soft); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.select { appearance: none; padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft); background: var(--surface);
}
.input.has-error, .select.has-error { border-color: var(--danger); }
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-radius: 10px 0 0 10px; }
.input-group .suffix {
    display: flex; align-items: center; padding: 0 13px; white-space: nowrap;
    background: var(--surface-3); border: 1px solid var(--border); border-left: 0;
    border-radius: 0 10px 10px 0; color: var(--text-soft); font-size: 13.4px; font-weight: 560;
}
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--brand); }

.option-card {
    display: flex; gap: 12px; padding: 14px; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); transition: border-color .14s ease, background .14s ease;
}
.option-card:hover { border-color: var(--brand-border); }
.option-card.is-selected { border-color: var(--brand); background: var(--brand-soft); }
.option-card input { accent-color: var(--brand); margin-top: 3px; }
.option-card.is-disabled { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------------ modals */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 90;
    background: rgba(6, 9, 15, .68); backdrop-filter: blur(3px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 5vh 18px 24px; overflow-y: auto;
    animation: fade .16s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
    width: 100%; max-width: 560px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: rise .2s cubic-bezier(.2,.8,.3,1);
}
.modal--wide { max-width: 860px; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.modal__title { font-size: 17px; }
.modal__sub { font-size: 12.8px; color: var(--muted); margin-top: 3px; }
.modal__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 15px; }
.modal__foot {
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
    padding: 15px 22px; border-top: 1px solid var(--border-soft);
}

/* ------------------------------------------------------------------ toasts */
.toasts {
    position: fixed; z-index: 120; right: 20px; bottom: 20px;
    display: flex; flex-direction: column; gap: 10px; max-width: min(400px, calc(100vw - 40px));
}
.toast {
    display: flex; gap: 11px; padding: 13px 15px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    animation: slide-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes slide-in { from { opacity: 0; transform: translateX(20px); } }
.toast.is-out { animation: fade-out .2s ease forwards; }
@keyframes fade-out { to { opacity: 0; transform: translateX(20px); } }
.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger); }
.toast--info    { border-left-color: var(--info); }
.toast__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error   .toast__icon { color: var(--danger); }
.toast--info    .toast__icon { color: var(--info); }
.toast__title { font-weight: 620; font-size: 13.4px; }
.toast__text  { font-size: 12.6px; color: var(--text-soft); margin-top: 2px; }
.toast__close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 2px; align-self: flex-start; }

/* ----------------------------------------------------- states & feedback */
.empty { text-align: center; padding: 46px 22px; }
.empty__icon {
    width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 15px;
    display: grid; place-items: center; background: var(--surface-3); color: var(--muted);
}
.empty__icon svg { width: 24px; height: 24px; }
.empty__title { font-size: 15.5px; font-weight: 620; }
.empty__text { color: var(--muted); font-size: 13.2px; margin-top: 5px; max-width: 430px; margin-inline: auto; }
.empty__actions { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: shimmer 1.3s ease infinite;
    border-radius: 7px;
}
@keyframes shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.skeleton-line { height: 12px; margin: 9px 0; }

.notice {
    display: flex; gap: 11px; padding: 13px 15px;
    border-radius: var(--radius); border: 1px solid var(--border);
    background: var(--surface-2); font-size: 13.2px;
}
.notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.notice--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 26%, transparent); color: var(--text); }
.notice--success svg { color: var(--success); }
.notice--error   { background: var(--danger-soft);  border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
.notice--error svg { color: var(--danger); }
.notice--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 26%, transparent); }
.notice--warning svg { color: var(--warning); }
.notice--info    { background: var(--info-soft);    border-color: color-mix(in srgb, var(--info) 26%, transparent); }
.notice--info svg { color: var(--info); }

.meter { height: 6px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 4px; background: var(--brand); transition: width .3s ease; }
.meter__fill.is-warning { background: var(--warning); }
.meter__fill.is-danger  { background: var(--danger); }

/* -------------------------------------------------------------- DNS table */
/* Plain text, not a boxed field: it is a value to read and copy. */
.dns-value-text { font-size: 12.3px; overflow-wrap: anywhere; max-width: 520px; }
.copy-btn {
    flex: none; width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 7px; border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); cursor: pointer; transition: color .14s ease, border-color .14s ease;
}
.copy-btn:hover { color: var(--brand-ink); border-color: var(--brand-border); }
.copy-btn.is-done { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.copy-btn svg { width: 13px; height: 13px; }

.check-row {
    display: flex; gap: 12px; padding: 13px 15px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.check-row__icon { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.check-row.is-pass .check-row__icon { color: var(--success); }
.check-row.is-fail .check-row__icon { color: var(--danger); }
.check-row.is-error .check-row__icon { color: var(--warning); }
.check-row.is-pass  { border-color: color-mix(in srgb, var(--success) 28%, transparent); background: var(--success-soft); }
.check-row.is-fail  { border-color: color-mix(in srgb, var(--danger) 28%, transparent);  background: var(--danger-soft); }
.check-row.is-error { border-color: color-mix(in srgb, var(--warning) 28%, transparent); background: var(--warning-soft); }
.check-row code { display: block; margin-top: 5px; font-size: 11.8px; color: var(--text-soft); overflow-wrap: anywhere; }

/* --------------------------------------------------------------- steps */
.steps { display: flex; gap: 8px; flex-wrap: wrap; }
.step {
    display: flex; align-items: center; gap: 8px; font-size: 12.4px; color: var(--muted);
    padding: 6px 11px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--surface-2);
}
.step__n {
    width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center;
    font-size: 10.6px; font-weight: 700; background: var(--surface-3); color: var(--text-soft);
}
.step.is-active { color: var(--text); border-color: var(--brand-border); background: var(--brand-soft); }
.step.is-active .step__n { background: var(--brand); color: var(--on-brand); }
.step.is-done .step__n { background: var(--success); color: #fff; }
.step.is-done { color: var(--text-soft); }

/* ---------------------------------------------------------------- pricing */
.plan-card {
    display: flex; flex-direction: column; gap: 14px; padding: 22px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: var(--shadow-sm); position: relative;
}
.plan-card.is-featured { border-color: var(--brand-border); box-shadow: var(--shadow-md); }
.plan-card.is-featured::before {
    content: "Most popular"; position: absolute; top: -10px; left: 22px;
    font-size: 10.6px; font-weight: 680; letter-spacing: .05em; text-transform: uppercase;
    padding: 3px 10px; border-radius: var(--radius-pill); color: var(--on-brand);
    background: var(--brand);
}
.plan-card__price { font-size: 30px; font-weight: 720; letter-spacing: -.035em; }
.plan-card__period { font-size: 12.6px; color: var(--muted); font-weight: 500; }
.plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan-features li { display: flex; gap: 8px; font-size: 13px; color: var(--text-soft); }
.plan-features svg { width: 15px; height: 15px; flex: none; color: var(--success); margin-top: 2px; }

/* --------------------------------------------------------------- auth page */
.auth-screen {
    min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
    background: var(--bg);
}
.auth-pane { display: flex; align-items: center; justify-content: center; padding: 48px 30px; }
.auth-card { width: 100%; max-width: 380px; }

.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 42px; }
.auth-brand .brand-mark { width: 40px; height: 40px; border-radius: 11px; }
.auth-brand__name { font-size: 19px; font-weight: 680; letter-spacing: -.02em; }

.auth-head { margin-bottom: 24px; }
.auth-head h1 { font-size: 25px; letter-spacing: -.025em; }
.auth-foot { display: flex; justify-content: center; margin-top: 30px; }
.auth-note { font-size: 13px; color: var(--muted); margin-top: 18px; }

.auth-aside {
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 52px; color: var(--text);
    border-left: 1px solid var(--border);
    background:
        radial-gradient(760px 540px at 86% 2%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 62%),
        linear-gradient(158deg, var(--surface-2), var(--bg-soft));
}
.auth-aside__title {
    font-size: 30px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em;
    max-width: 15ch;
}
.auth-points { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 17px; }
.auth-points li { display: flex; gap: 13px; align-items: flex-start; font-size: 14.6px; }
.auth-points svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--brand-ink); }

@media (max-width: 900px) {
    .auth-screen { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

/* ------------------------------------------------------- admin surface */
/* A quiet visual cue that you are on the staff side of the product, without
   inventing a second design language. */
.sidebar--admin .sidebar__brand { box-shadow: inset 0 -2px 0 0 var(--brand-border); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .sidebar.is-open { transform: none; }
    .main { margin-left: 0; }
    .menu-toggle { display: grid; }
    .content { padding: 18px 16px 40px; }
    .topbar { padding: 0 16px; }
    .sidebar-scrim {
        position: fixed; inset: 0; z-index: 55; background: rgba(6, 9, 15, .6);
        animation: fade .16s ease;
    }
}
@media (max-width: 640px) {
    .stat__value { font-size: 23px; }
    .modal__foot { flex-direction: column-reverse; }
    .modal__foot .btn { width: 100%; }
    .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
    .card__head { padding: 15px 16px; }
    .card__body { padding: 16px; }
    table.table th:first-child, table.table td:first-child { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------- per-record DNS status */
/* A small square beside each record: green tick when the record is published
   as asked, red cross when it is not, neutral dash before anything has been
   checked. The state is per record, so it sits with the record. */
.record-status {
    width: 26px; height: 26px; border-radius: 7px;
    display: inline-grid; place-items: center; flex: none;
    font-size: 12px; font-weight: 700;
}
.record-status svg { width: 14px; height: 14px; }
.record-status.is-pass    { background: var(--success-soft); color: var(--success); }
.record-status.is-fail    { background: var(--danger-soft);  color: var(--danger); }
.record-status.is-error   { background: var(--warning-soft); color: var(--warning); }
.record-status.is-unknown { background: var(--surface-3);    color: var(--muted); }