/* ============================================================
   RankPlus · New Design · Unified theme.css
   Editorial shell + Sites / Reco page patterns + widget set.
   Native CSS only. Overrides existing rp-* visuals in place.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────
   1. Design tokens (new design)
   ───────────────────────────────────────────── */
:root {
    --nd-font-sans: 'Heebo', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
    --nd-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

    --nd-accent:      #965215;
    --nd-accent-ink:  #ffffff;

    --nd-sx-a: oklch(0.75 0.14 160);
    --nd-sx-b: oklch(0.70 0.14 250);
    --nd-sx-c: oklch(0.70 0.14 310);

    --nd-ok:   oklch(0.72 0.13 160);
    --nd-info: #965215;
    --nd-warn: oklch(0.74 0.14 55);
    --nd-err:  oklch(0.64 0.18 20);

    --nd-pad: 22px;
    --nd-gap: 18px;
    --nd-pad-card: 22px;

    --nd-sb-w: 240px;
    --nd-tb-h: 60px;
}

/* Dark (default) */
:root {
    color-scheme: dark;
    --nd-bg:      #0d0d0d;
    --nd-bg-1:    #111116;
    --nd-bg-2:    #15151b;
    --nd-bg-3:    #1a1a22;
    --nd-ink:     #f1eee5;
    --nd-ink-2:   #c3c3c9;
    --nd-muted:   #8a8a93;
    --nd-muted-2: #5c5c66;
    --nd-line:    #24242c;
    --nd-line-2:  #2f2f3a;
    --nd-hover:   #1d1d26;
    --nd-card-bg: var(--nd-bg-1);
}

html.light {
    color-scheme: light;
    --nd-bg:      #faf9f5;
    --nd-bg-1:    #ffffff;
    --nd-bg-2:    #f4f3ee;
    --nd-bg-3:    #edece5;
    --nd-ink:     #1a1a1f;
    --nd-ink-2:   #434349;
    --nd-muted:   #7a7a82;
    --nd-muted-2: #a5a5ad;
    --nd-line:    #e5e3db;
    --nd-line-2:  #d7d5cc;
    --nd-hover:   #f6f5ef;
    --nd-card-bg: var(--nd-bg-1);
}

/* ─────────────────────────────────────────────
   2. Map legacy rp-* tokens to new design tokens.
   This lets the existing templates keep working
   while picking up the new visual language.
   ───────────────────────────────────────────── */
:root {
    --rp-bg:       var(--nd-bg);
    --rp-surf:     var(--nd-bg-1);
    --rp-raise:    var(--nd-bg-2);
    --rp-lift:     var(--nd-bg-3);
    --rp-line:     var(--nd-line);
    --rp-line2:    var(--nd-line-2);
    --rp-t1:       var(--nd-ink);
    --rp-t2:       var(--nd-muted);
    --rp-t3:       var(--nd-muted-2);
    --rp-sky:      var(--nd-info);
    --rp-sky-d:    var(--nd-info);
    --rp-sky-bg:   color-mix(in srgb, var(--nd-info) 16%, transparent);
    --rp-sky-glow: color-mix(in srgb, var(--nd-info) 30%, transparent);
    --rp-green:    var(--nd-ok);
    --rp-red:      var(--nd-err);
    --rp-amber:    var(--nd-warn);
    --rp-purple:   oklch(0.70 0.14 290);
    --rp-green-bg: color-mix(in srgb, var(--nd-ok) 16%, transparent);
    --rp-red-bg:   color-mix(in srgb, var(--nd-err) 16%, transparent);
    --rp-amber-bg: color-mix(in srgb, var(--nd-warn) 16%, transparent);
    --rp-sb-w:     var(--nd-sb-w);
    --rp-tb-h:     var(--nd-tb-h);
    --rp-r:        10px;
    --rp-r2:       12px;
}

/* ─────────────────────────────────────────────
   3. Base
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.rp-app,
body.rp-login {
    font-family: var(--nd-font-sans);
    background: var(--nd-bg);
    color: var(--nd-ink);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01", "cv11";
    font-size: 14px;
    line-height: 1.5;
}
body.rp-app { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
hr { border: 0; }

.nd-mono { font-family: var(--nd-font-mono); font-feature-settings: "tnum"; }

/* ─────────────────────────────────────────────
   4. App shell layout (#rp-shell main grid)
   ───────────────────────────────────────────── */
#rp-shell {
    margin-right: var(--rp-sb-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--nd-bg);
}

#rp-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--nd-bg);
}

#rp-page {
    padding: 0;
    min-height: calc(100vh - var(--rp-tb-h));
}

.rp-page-inner {
    padding: 40px 48px 60px;
    max-width: none;
    margin: 0;
    width: 100%;
}

/* Scrollbar (subtle) */
#rp-main::-webkit-scrollbar { width: 8px; }
#rp-main::-webkit-scrollbar-thumb {
    background: var(--nd-line-2);
    border-radius: 6px;
}
#rp-main::-webkit-scrollbar-thumb:hover { background: var(--nd-muted-2); }

/* ─────────────────────────────────────────────
   5. Sidebar — editorial style
   ───────────────────────────────────────────── */
#rp-sidebar {
    width: var(--rp-sb-w);
    position: fixed;
    right: 0; top: 0; bottom: 0;
    background: var(--nd-bg);
    border-left: 1px solid var(--nd-line);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow: hidden;
    /* logo section owns the top; nav owns the rest */
    padding: 0 18px 16px;
}

/* Logo row matches topbar height and has a divider underneath */
.rp-sb-logo {
    height: var(--nd-tb-h);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* span the full sidebar width for the divider */
    margin-inline: -18px;
    padding: 0 24px;
    border-bottom: 1px solid var(--nd-line);
    flex-shrink: 0;
}
.rp-sb-logo a { display: inline-flex; align-items: center; }
.rp-sb-logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Scrollable nav list — subtle scrollbar + top/bottom fade hints */
.rp-sb-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* push the scrollbar flush with the sidebar's outer edge, and keep
       content well clear of the scrollbar so it doesn't feel crowded */
    margin-inline-end: -18px;
    padding-inline-end: 22px;
    padding-inline-start: 2px;
    padding-top: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--nd-line-2) transparent;
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 14px,
        black calc(100% - 14px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black 14px,
        black calc(100% - 14px),
        transparent 100%
    );
}
.rp-sb-nav::-webkit-scrollbar { width: 6px; }
.rp-sb-nav::-webkit-scrollbar-track { background: transparent; }
.rp-sb-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
    transition: background .15s;
}
.rp-sb-nav:hover::-webkit-scrollbar-thumb {
    background: var(--nd-line-2);
}
.rp-sb-nav:hover::-webkit-scrollbar-thumb:hover {
    background: var(--nd-muted-2);
}

.rp-nav-group-label {
    font-family: var(--nd-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nd-muted);
    padding: 16px 10px 6px;
    white-space: nowrap;
    overflow: hidden;
}

.rp-nav-sep {
    height: 1px;
    background: var(--nd-line);
    margin: 12px 4px;
}

.rp-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--nd-ink-2);
    font-size: 13.5px;
    font-weight: 400;
    text-decoration: none;
    user-select: none;
    margin-bottom: 2px;
    white-space: nowrap;
    transition: color .12s, background .12s;
}
.rp-nav-item:hover {
    color: var(--nd-ink);
    background: var(--nd-hover);
}
.rp-nav-item.rp-active {
    color: var(--nd-ink);
    background: transparent;
    font-weight: 600;
}
.rp-nav-item.rp-active::before {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px;
    background: var(--nd-accent);
    border-radius: 2px;
}
.rp-nav-item.rp-active::after { display: none; }

.rp-nav-ic {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    color: currentColor;
    flex-shrink: 0;
}
.rp-nav-ic svg,
.rp-nav-ic .lucide {
    width: 15px; height: 15px;
    stroke-width: 1.6;
}

.rp-nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .2s;
}

.rp-nav-badge {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
    flex-shrink: 0;
}
.rp-nav-badge.warn   { background: var(--rp-amber-bg); color: var(--nd-warn); }
.rp-nav-badge.danger { background: var(--rp-red-bg);   color: var(--nd-err); }

.rp-nav-chev {
    color: var(--nd-muted-2);
    flex-shrink: 0;
    transition: transform .2s;
}
.rp-nav-chev svg,
.rp-nav-chev .lucide {
    width: 13px; height: 13px;
    stroke-width: 2;
}
.rp-nav-item.rp-open .rp-nav-chev { transform: rotate(-90deg); }

/* Collapsible subnav */
.rp-nav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}
.rp-nav-sub.rp-open { max-height: 500px; }

.rp-nav-sub-inner {
    padding: 4px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    position: relative;
}
.rp-nav-sub-inner::before { display: none; }

.rp-nav-sub-item {
    position: relative;
    display: block;
    padding: 7px 10px;
    padding-inline-start: 30px;
    border-radius: 8px;
    color: var(--nd-muted);
    font-size: 13px;
    text-decoration: none;
    transition: color .12s, background .12s;
}
.rp-nav-sub-item:hover {
    color: var(--nd-ink);
    background: var(--nd-hover);
}
.rp-nav-sub-item.rp-active {
    color: var(--nd-ink);
    font-weight: 600;
    background: transparent;
}
.rp-nav-sub-item::before { display: none; }
.rp-nav-sub-item.rp-active::after {
    content: "";
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: var(--nd-accent);
    border-radius: 2px;
}

/* Sidebar foot (optional legacy) */
.rp-sb-foot {
    margin-top: auto;
    padding: 14px 4px 4px;
    border-top: 1px solid var(--nd-line);
    display: flex; align-items: center; gap: 10px;
}
.rp-sb-user {
    display: flex; align-items: center; gap: 10px;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}
.rp-sb-user:hover { background: var(--nd-hover); }
.rp-sb-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    display: grid; place-items: center;
    font-weight: 700;
    flex-shrink: 0;
}
.rp-sb-user-info { flex: 1; min-width: 0; overflow: hidden; }
.rp-sb-user-name { font-size: 13px; color: var(--nd-ink); font-weight: 600; }
.rp-sb-user-role { font-size: 11.5px; color: var(--nd-muted); }
.rp-sb-user-menu { color: var(--nd-muted-2); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   6. Topbar
   ───────────────────────────────────────────── */
#rp-topbar {
    height: var(--rp-tb-h);
    border-bottom: 1px solid var(--nd-line);
    padding: 0 40px;
    display: flex; align-items: center;
    gap: 18px;
    position: sticky; top: 0;
    background: color-mix(in srgb, var(--nd-bg) 92%, transparent);
    backdrop-filter: blur(10px);
    z-index: 10;
    flex-shrink: 0;
}

.rp-tb-breadcrumb {
    font-size: 13px;
    color: var(--nd-muted);
    display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
}
.rp-tb-breadcrumb a {
    color: var(--nd-muted);
    transition: color .12s;
    white-space: nowrap;
}
.rp-tb-breadcrumb a:hover { color: var(--nd-ink); }
.rp-tb-breadcrumb .rp-sep {
    color: var(--nd-muted-2);
    font-size: 12px;
    opacity: .6;
}
.rp-tb-breadcrumb .rp-cur {
    color: var(--nd-ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rp-tb-space { flex: 1; }

.rp-tb-search {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    min-width: 260px;
    color: var(--nd-muted);
    cursor: pointer;
    transition: border-color .12s;
}
.rp-tb-search:hover { border-color: var(--nd-line-2); }
.rp-tb-search svg,
.rp-tb-search .lucide {
    width: 14px; height: 14px;
    color: var(--nd-muted);
}
.rp-tb-search span {
    font-size: 12.5px;
    color: var(--nd-muted);
    flex: 1;
}
.rp-tb-search kbd {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    color: var(--nd-muted);
}

.rp-tb-actions {
    display: flex; align-items: center; gap: 6px;
}

.rp-tb-btn,
.rp-tb-theme {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid var(--nd-line);
    background: transparent;
    color: var(--nd-ink-2);
    position: relative;
    transition: background .12s, color .12s;
}
.rp-tb-btn:hover,
.rp-tb-theme:hover {
    background: var(--nd-hover);
    color: var(--nd-ink);
}
.rp-tb-btn svg, .rp-tb-btn .lucide,
.rp-tb-theme svg, .rp-tb-theme .lucide {
    width: 15px; height: 15px;
    stroke-width: 1.8;
}

.rp-tb-greeting {
    font-size: 13px;
    color: var(--nd-ink-2);
}
.rp-tb-greeting strong {
    color: var(--nd-ink);
    font-weight: 600;
}

/* Mobile topbar */
.rp-topbar-mobile {
    display: none;
    background: var(--nd-bg);
    border-bottom: 1px solid var(--nd-line);
}

.rp-breadcrumb-mobile {
    display: none;
    padding: 10px 16px;
    font-size: 12px;
    color: var(--nd-muted);
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg);
    gap: 8px;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
}
.rp-breadcrumb-mobile .rp-sep { color: var(--nd-muted-2); opacity: .5; }
.rp-breadcrumb-mobile .rp-cur { color: var(--nd-ink); font-weight: 500; }

.rp-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 180;
    animation: nd-fade .15s ease;
}
@keyframes nd-fade { from { opacity: 0; } to { opacity: 1; } }

.rp-skip-link {
    position: absolute; top: -50px; right: 10px;
    padding: 8px 16px;
    background: var(--nd-accent); color: var(--nd-accent-ink);
    border-radius: 8px; font-weight: 600;
    z-index: 999;
}
.rp-skip-link:focus { top: 10px; }

/* ─────────────────────────────────────────────
   7. Page header (v1-hero / rp-ph)
   ───────────────────────────────────────────── */
.rp-ph,
.v1-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.rp-ph > div:first-child,
.v1-hero > div:first-child { min-width: 0; flex: 1; }

.v1-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    margin-bottom: 12px;
}

.rp-ph-title,
.v1-title {
    margin: 0;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--nd-ink);
}

.rp-ph-sub,
.v1-sub {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--nd-muted);
    max-width: 560px;
    line-height: 1.55;
}

.rp-ph-actions {
    display: flex; gap: 10px;
    flex-shrink: 0;
    align-items: center;
    flex-wrap: wrap;
}

.v1-hero-meta {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 13px; min-width: 220px;
}
.v1-meta-row {
    display: flex; justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid var(--nd-line);
}
.v1-meta-row span { color: var(--nd-muted); }
.v1-meta-row strong { color: var(--nd-ink); font-weight: 600; }

.v1-rule {
    height: 1px;
    background: var(--nd-line);
    margin: 0 0 32px;
}

/* ─────────────────────────────────────────────
   8. Buttons
   ───────────────────────────────────────────── */
.rp-btn,
.v1-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--nd-ink);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s, filter .12s;
    white-space: nowrap;
}
.rp-btn svg, .rp-btn .lucide {
    width: 14px; height: 14px;
    stroke-width: 1.8;
}

.rp-btn-primary,
.v1-cta {
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    border-color: var(--nd-accent);
    font-weight: 600;
}
.rp-btn-primary:hover,
.v1-cta:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--nd-accent) 30%, transparent);
}

.rp-btn-info {
    background: var(--nd-info);
    color: #f1eee5;
    border-color: var(--nd-info);
    font-weight: 600;
}
.rp-btn-info:hover { filter: brightness(1.1); }

.rp-btn-outline {
    background: transparent;
    border-color: var(--nd-line);
    color: var(--nd-ink-2);
}
.rp-btn-outline:hover {
    background: var(--nd-hover);
    color: var(--nd-ink);
}

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

.rp-btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }

.rp-btn-danger {
    background: var(--rp-red-bg);
    color: var(--nd-err);
    border-color: transparent;
}
.rp-btn-danger:hover {
    background: var(--nd-err);
    color: #f1eee5;
}

/* Icon button square (v1-iconbtn) */
.v1-iconbtn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    border: 1px solid var(--nd-line);
    background: transparent;
    color: var(--nd-ink-2);
    position: relative;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.v1-iconbtn:hover { background: var(--nd-hover); color: var(--nd-ink); }
.v1-iconbtn svg, .v1-iconbtn .lucide {
    width: 15px; height: 15px;
    stroke-width: 1.8;
}

/* ─────────────────────────────────────────────
   9. Cards / panels
   ───────────────────────────────────────────── */
.rp-card,
.v1-panel {
    background: var(--nd-card-bg);
    border: 1px solid var(--nd-line);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    min-width: 0;
}
.v1-panel { padding: var(--nd-pad-card); }

.rp-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nd-line);
}
.rp-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nd-ink);
    margin: 0;
}
.rp-card-title svg,
.rp-card-title .lucide {
    width: 15px; height: 15px;
    color: var(--nd-muted);
}
.rp-card-link {
    font-size: 12.5px;
    color: var(--nd-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color .12s;
}
.rp-card-link:hover { color: var(--nd-accent); }
.rp-card-body { padding: 18px 20px; }

.v1-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}
.v1-panel-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    margin-bottom: 6px;
}
.v1-panel-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nd-ink);
    display: flex; align-items: center; gap: 10px;
}
.v1-link {
    font-size: 12.5px;
    color: var(--nd-muted);
    cursor: pointer;
    transition: color .12s;
}
.v1-link:hover { color: var(--nd-accent); }

.v1-chips {
    display: inline-flex;
    gap: 4px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    padding: 3px;
    border-radius: 9px;
}
.v1-chip {
    padding: 6px 12px;
    font-size: 12px;
    background: transparent;
    border: 0;
    color: var(--nd-ink-2);
    border-radius: 6px;
    font-family: inherit;
    cursor: pointer;
}
.v1-chip.is-active {
    background: var(--nd-bg-1);
    color: var(--nd-ink);
    box-shadow: 0 0 0 1px var(--nd-line);
    font-weight: 600;
}

.v1-legend {
    display: flex; gap: 20px;
    padding: 4px 0 14px;
    flex-wrap: wrap;
}
.v1-legend-item {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--nd-ink-2);
}
.v1-legend-item i {
    width: 8px; height: 8px;
    border-radius: 50%; display: block;
}

/* ─────────────────────────────────────────────
   10. KPIs strip (dashboard top)
   ───────────────────────────────────────────── */
.dash-kpi-strip,
.v1-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding: 12px 0 36px;
    margin-bottom: 0;
}
.dash-kpi-strip.dash-kpi-4 { grid-template-columns: repeat(4, 1fr); }
.dash-kpi-strip.dash-kpi-5 { grid-template-columns: repeat(5, 1fr); }

.v1-kpi,
.dash-kpi-strip > * {
    padding: 0 24px;
    border-inline-start: 1px solid var(--nd-line);
    min-width: 0;
}
.v1-kpi:first-child,
.dash-kpi-strip > *:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}
.v1-kpi:last-child,
.dash-kpi-strip > *:last-child {
    padding-inline-end: 0;
}
.v1-kpi-label { font-size: 12px; color: var(--nd-muted); margin-bottom: 16px; }
.v1-kpi-value {
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--nd-ink);
    font-feature-settings: "tnum";
}
.v1-kpi-delta {
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--nd-font-mono);
    font-size: 11.5px;
    color: var(--nd-muted);
}
.v1-kpi-delta.t-up   { color: var(--nd-ok); }
.v1-kpi-delta.t-warn { color: var(--nd-warn); }
.v1-kpi-delta.t-flat { color: var(--nd-muted); }
.v1-kpi-delta.t-down { color: var(--nd-err); }

/* ─────────────────────────────────────────────
   11. Tables (sites-table pattern via rp-table)
   This preserves <table> semantics while matching
   the editorial sites-table look.
   ───────────────────────────────────────────── */
.rp-table-wrap,
.sites-table {
    background: var(--nd-card-bg);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    overflow: hidden;
}

.rp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.rp-table thead th {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    text-align: start;
    padding: 14px 20px;
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
    white-space: nowrap;
}
.rp-table tbody tr {
    border-bottom: 1px solid var(--nd-line);
    transition: background .12s ease;
}
.rp-table tbody tr:last-child { border-bottom: 0; }
.rp-table tbody tr:hover { background: var(--nd-hover); cursor: pointer; }
.rp-table tbody td {
    padding: 14px 20px;
    color: var(--nd-ink);
    vertical-align: middle;
}
.rp-table a { color: var(--nd-info); }
.rp-table a:hover { text-decoration: underline; }

.rp-row-chevron { color: var(--nd-muted-2); width: 24px; text-align: center; }
.rp-row-chevron svg,
.rp-row-chevron .lucide { width: 14px; height: 14px; }

/* Sites page hero + actions */
.sites-hero { margin-bottom: 24px; align-items: flex-end; }
.sites-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.sites-hero-actions > * { flex-shrink: 0; }

/* Search input inside the hero actions — constrained width */
.sites-hero-actions .sites-search {
    width: 280px;
    max-width: 320px;
    min-width: 0;
    margin: 0;
}
.sites-hero-actions .sites-search input { width: 100%; min-width: 0; }

/* Tabs row */
.sites-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--nd-line);
    padding-bottom: 0;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Pagination / footer bar */
.sites-foot {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--nd-muted);
    flex-wrap: wrap;
    gap: 12px;
}
.sites-pager { display: inline-flex; gap: 4px; align-items: center; }
.sites-pg {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--nd-line);
    background: var(--nd-card-bg);
    color: var(--nd-ink-2);
    border-radius: 8px;
    font-size: 12.5px;
    font-family: var(--nd-font-mono);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.sites-pg:hover { background: var(--nd-hover); color: var(--nd-ink); }
.sites-pg.is-active,
.sites-pg[aria-current="page"] {
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    border-color: var(--nd-accent);
    font-weight: 700;
}
.sites-pg[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.sites-pg svg, .sites-pg .lucide { width: 14px; height: 14px; }
.sites-total { font-family: var(--nd-font-mono); }

/* Split-button (used on sites-updates: main action + dropdown toggle) */
.nd-split-btn {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}
.nd-split-btn > .v1-iconbtn,
.nd-split-btn > .v1-cta,
.nd-split-btn > button {
    border-radius: 0;
    height: 36px;
}
.nd-split-btn > :first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.nd-split-btn > :last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.nd-split-btn > .v1-iconbtn:not(:first-child),
.nd-split-btn > .v1-cta:not(:first-child) {
    margin-inline-start: -1px;
}
.nd-split-btn-main {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    width: auto !important;
    gap: 7px !important;
    white-space: nowrap;
}
/* Chevron half of the split — narrow fixed width, shares seam with main */
.nd-split-btn-chev {
    width: 32px !important;
    padding: 0 !important;
}

/* Sites-updates: table on desktop, cards on mobile (the template renders
   both; responsive CSS decides which one is visible) */
.rp-sites-updates-cards { display: none; }
.rp-sites-updates-table { display: block; }
@media (max-width: 860px) {
    .rp-sites-updates-table { display: none; }
    .rp-sites-updates-cards { display: flex; flex-direction: column; gap: 10px; }
}

/* Settings 2-column layout (form + info sidebar) */
.nd-settings-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1100px) {
    .nd-settings-layout { grid-template-columns: 1fr; }
}
.nd-settings-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.nd-info-card {
    padding: 16px 18px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-bg-2);
}
.nd-info-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--nd-bg-3);
    color: var(--nd-accent);
    margin-bottom: 10px;
}
.nd-info-icon svg, .nd-info-icon .lucide { width: 16px; height: 16px; }
.nd-info-title {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nd-ink);
    letter-spacing: -.01em;
}
.nd-info-body {
    margin: 0;
    font-size: 12.5px;
    color: var(--nd-muted);
    line-height: 1.55;
}

/* Tool buttons (varied per-action tones) */
.nd-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: filter .12s, transform .12s;
    white-space: nowrap;
}
.nd-tool-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.nd-tool-btn:active { transform: translateY(0); }

/* Hero-level "add" buttons (alias for v1-cta) */
.sites-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.sites-add-btn:hover { filter: brightness(1.08); }

/* Reset a few form / select oddities inside hero actions */
.sites-hero-actions select.v1-iconbtn {
    width: auto;
    padding: 0 12px;
    font-size: 13px;
    background: transparent;
    color: var(--nd-ink-2);
}

/* Grid-style sites-table (for new-design pages) */
.sites-thead, .sites-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 130px 180px 130px;
    gap: 16px;
    align-items: center;
    padding: 14px 20px;
}
.sites-thead {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
}
.sites-row {
    border-bottom: 1px solid var(--nd-line);
    font-size: 13.5px;
    transition: background .12s ease;
    background: transparent;
}
.sites-row:hover { background: var(--nd-hover); }
.sites-row:last-child { border-bottom: 0; }

.sites-name { font-weight: 600; color: var(--nd-ink); margin-bottom: 3px; }
.sites-url {
    font-family: var(--nd-font-mono);
    font-size: 11.5px;
    color: var(--nd-info);
    display: inline-flex; align-items: center; gap: 4px;
}
.sites-url:hover { text-decoration: underline; }
.sites-user-cell { display: flex; align-items: center; gap: 10px; }
.sites-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
    color: #0a0a0b;
    font-family: var(--nd-font-mono);
    text-transform: uppercase;
    background: var(--nd-info);
}

.sites-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
}
.sites-status.ok   { background: color-mix(in srgb, var(--nd-ok) 16%, transparent);   color: var(--nd-ok); }
.sites-status.warn { background: color-mix(in srgb, var(--nd-warn) 16%, transparent); color: var(--nd-warn); }
.sites-status.err  { background: color-mix(in srgb, var(--nd-err) 16%, transparent);  color: var(--nd-err); }
.sites-status.info { background: color-mix(in srgb, var(--nd-info) 16%, transparent); color: var(--nd-info); }
.sites-status.muted{ background: var(--nd-bg-2); color: var(--nd-muted); }
.sites-dot { width: 6px; height: 6px; border-radius: 50%; }
.sites-dot.ok   { background: var(--nd-ok); }
.sites-dot.warn { background: var(--nd-warn); }
.sites-dot.err  { background: var(--nd-err); }
.sites-dot.info { background: var(--nd-info); }

.sites-date {
    font-family: var(--nd-font-mono);
    font-size: 12px;
    color: var(--nd-muted);
}

.sites-actions { display: flex; gap: 4px; justify-content: flex-end; }
.sites-act {
    width: 30px; height: 30px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--nd-muted);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.sites-act:hover { background: var(--nd-hover); color: var(--nd-ink); }
.sites-act.danger:hover {
    color: var(--nd-err);
    background: color-mix(in srgb, var(--nd-err) 12%, transparent);
}

.sites-empty {
    padding: 80px 20px;
    text-align: center;
    color: var(--nd-muted);
    font-size: 13px;
    display: flex; flex-direction: column;
    align-items: center; gap: 10px;
}

.sites-foot {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--nd-muted);
    flex-wrap: wrap;
    gap: 12px;
}
.sites-pager { display: flex; gap: 4px; }
.sites-pg {
    min-width: 30px; height: 30px;
    padding: 0 10px;
    border: 1px solid var(--nd-line);
    background: var(--nd-card-bg);
    color: var(--nd-ink-2);
    border-radius: 7px;
    font-size: 12.5px;
    font-family: var(--nd-font-mono);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.sites-pg:hover { background: var(--nd-hover); color: var(--nd-ink); }
.sites-pg.is-active,
.sites-pg[aria-current="page"] {
    background: var(--nd-info);
    color: #f1eee5;
    border-color: var(--nd-info);
}
.sites-pg[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.sites-total { font-family: var(--nd-font-mono); }

/* ─────────────────────────────────────────────
   12. Chips / pills
   ───────────────────────────────────────────── */
.rp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: inherit;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
    border: 0;
}
.rp-chip::before { display: none; }
.rp-chip svg, .rp-chip .lucide {
    width: 12px; height: 12px;
    stroke-width: 2;
}
.rp-chip-green  { background: var(--rp-green-bg);  color: var(--nd-ok); }
.rp-chip-amber  { background: var(--rp-amber-bg);  color: var(--nd-warn); }
.rp-chip-red    { background: var(--rp-red-bg);    color: var(--nd-err); }
.rp-chip-sky    { background: color-mix(in srgb, var(--nd-info) 16%, transparent); color: var(--nd-info); }
.rp-chip-purple { background: color-mix(in srgb, var(--rp-purple) 16%, transparent); color: var(--rp-purple); }

/* ─────────────────────────────────────────────
   13. Tabs & filter bar
   ───────────────────────────────────────────── */
.rp-tab,
.sites-tab {
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--nd-muted);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s, border-color .12s;
}
.rp-tab:hover,
.sites-tab:hover { color: var(--nd-ink-2); background: transparent; }
.rp-tab.rp-active,
.sites-tab.is-active {
    color: var(--nd-ink);
    font-weight: 600;
    border-bottom-color: var(--nd-accent);
    background: transparent;
}
.rp-tab em,
.sites-tab em {
    font-style: normal;
    font-family: var(--nd-font-mono);
    color: var(--nd-muted-2);
    font-size: 12px;
    margin-inline-start: 4px;
}
.rp-tab.rp-active em,
.sites-tab.is-active em { color: var(--nd-accent); }

.sites-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--nd-line);
    padding-bottom: 0;
    flex-wrap: wrap;
}

.rp-tbl-sep {
    width: 1px;
    height: 18px;
    background: var(--nd-line);
    margin: 0 4px;
}

/* Filter bar (legacy structure inside rp-card) */
.rp-card > div:first-child { /* first row typically filter bar */ }

/* Search inputs */
.rp-tbl-search,
.sites-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    min-width: 260px;
    color: var(--nd-muted);
}
.rp-tbl-search:focus-within,
.sites-search:focus-within {
    border-color: var(--nd-line-2);
}
.rp-tbl-search svg, .rp-tbl-search .lucide,
.sites-search svg, .sites-search .lucide {
    width: 13px; height: 13px;
    color: var(--nd-muted);
    stroke-width: 2;
}
.rp-tbl-search input,
.sites-search input {
    flex: 1;
    border: 0; background: transparent;
    outline: none;
    color: var(--nd-ink);
    font-family: inherit;
    font-size: 13px;
}
.rp-tbl-search input::placeholder,
.sites-search input::placeholder { color: var(--nd-muted-2); }

/* ─────────────────────────────────────────────
   14. Dashboard masonry layout
   ───────────────────────────────────────────── */
.dash-masonry {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--nd-gap);
}
.dash-item { grid-column: span 3; }
.dash-item-wide { grid-column: span 6; }

@keyframes dash-pulse {
    50% { opacity: .4; }
}

/* ─────────────────────────────────────────────
   15. Recommendations summary (dashboard)
   ───────────────────────────────────────────── */
.recs-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 18px 20px;
}
.recs-summary-item {
    display: flex; align-items: center; gap: 12px;
    padding: 16px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-bg-2);
}
.recs-summary-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: grid; place-items: center;
    color: var(--nd-muted);
    background: var(--nd-bg-3);
    flex-shrink: 0;
}
.recs-summary-icon.icon-total    { background: color-mix(in srgb, var(--nd-info) 14%, transparent); color: var(--nd-info); }
.recs-summary-icon.icon-critical { background: color-mix(in srgb, var(--nd-err) 14%, transparent);  color: var(--nd-err); }
.recs-summary-icon.icon-warning  { background: color-mix(in srgb, var(--nd-warn) 14%, transparent); color: var(--nd-warn); }
.recs-summary-icon.icon-fixable  { background: color-mix(in srgb, var(--nd-ok) 14%, transparent);   color: var(--nd-ok); }
.recs-summary-icon svg, .recs-summary-icon .lucide {
    width: 18px; height: 18px;
}
.recs-summary-value {
    font-family: var(--nd-font-mono);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--nd-ink);
    line-height: 1;
}
.recs-summary-label {
    font-size: 12px;
    color: var(--nd-muted);
    margin-top: 4px;
}

/* ─────────────────────────────────────────────
   15b. Recommendations page (legacy recs-*)
   ───────────────────────────────────────────── */
.recs-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
}
.recs-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.recs-toolbar-label {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nd-muted);
    margin-inline-end: 2px;
}
.recs-toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--nd-line);
    margin: 0 4px;
}
.recs-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px;
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    background: var(--nd-card-bg);
    color: var(--nd-ink-2);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.recs-pill:hover {
    background: var(--nd-hover);
    color: var(--nd-ink);
}
.recs-pill.active {
    background: var(--nd-bg-3);
    color: var(--nd-ink);
    border-color: var(--nd-line-2);
    font-weight: 600;
}
.pill-count,
.recs-pill .pill-count {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
    margin-inline-start: 4px;
}
.recs-pill.active .pill-count {
    background: color-mix(in srgb, var(--nd-accent) 20%, transparent);
    color: var(--nd-accent);
}
.recs-site-select {
    padding: 7px 10px;
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    background: var(--nd-card-bg);
    color: var(--nd-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
    cursor: pointer;
}

.recs-empty {
    padding: 60px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--nd-muted);
}
.recs-empty-icon {
    width: 54px; height: 54px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--nd-ok) 14%, transparent);
    color: var(--nd-ok);
    margin-bottom: 4px;
}

/* ─────────────────────────────────────────────
   16. AI recommendations page (reco-*)
   ───────────────────────────────────────────── */
.reco-hero { margin-bottom: 28px; }
.reco-hero-actions { display: flex; align-items: center; gap: 10px; }
.reco-run-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    border-radius: 10px; border: 0;
    background: var(--nd-info);
    color: #f1eee5;
    font-weight: 600; font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.reco-run-btn:hover { filter: brightness(1.1); }

.reco-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.reco-sum-cell {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-card-bg);
    color: var(--nd-ink);
    text-align: start;
    cursor: pointer;
    font-family: inherit;
    transition: transform .12s ease, border-color .12s ease;
}
.reco-sum-cell:hover { transform: translateY(-1px); }
.reco-sum-cell.is-active {
    border-color: var(--nd-accent);
    box-shadow: 0 0 0 1px var(--nd-accent) inset;
}
.reco-sum-cell.tone-ok   .reco-sum-num { color: var(--nd-ok); }
.reco-sum-cell.tone-warn .reco-sum-num { color: var(--nd-warn); }
.reco-sum-cell.tone-err  .reco-sum-num { color: var(--nd-err); }
.reco-sum-cell.tone-ok   svg { color: var(--nd-ok); }
.reco-sum-cell.tone-warn svg { color: var(--nd-warn); }
.reco-sum-cell.tone-err  svg { color: var(--nd-err); }
.reco-sum-cell.tone-muted svg { color: var(--nd-muted); }
.reco-sum-num {
    font-family: var(--nd-font-mono);
    font-size: 34px; font-weight: 500;
    letter-spacing: -.03em; line-height: 1;
}
.reco-sum-lab { font-size: 13px; color: var(--nd-muted); }

.reco-toolbar {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 10px;
    background: var(--nd-card-bg);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
}
.reco-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.reco-chip-label {
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nd-muted);
    font-family: var(--nd-font-mono);
    margin-inline-end: 4px;
}
.reco-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 11px;
    border-radius: 8px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    color: var(--nd-ink-2);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
}
.reco-chip:hover { background: var(--nd-hover); color: var(--nd-ink); }
.reco-chip.is-active,
.reco-chip.active {
    background: var(--nd-bg-3);
    color: var(--nd-ink);
    border-color: var(--nd-line-2);
    font-weight: 600;
}
.reco-chip i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.reco-chip em {
    font-family: var(--nd-font-mono);
    font-style: normal;
    color: var(--nd-muted);
    font-size: 11px;
}

.reco-search {
    margin-inline-start: auto;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 9px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    color: var(--nd-muted);
    font-size: 12.5px;
}
.reco-search select {
    background: transparent;
    border: 0;
    color: var(--nd-ink-2);
    font-family: inherit;
    font-size: 12.5px;
    outline: none;
}

.reco-table {
    background: var(--nd-card-bg);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    overflow: hidden;
}
.reco-thead, .reco-row {
    display: grid;
    grid-template-columns: 100px 1.5fr 2fr 140px 110px 70px 90px;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
}
.reco-thead {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
}
.reco-row {
    border-bottom: 1px solid var(--nd-line);
    background: transparent;
    border-inline: 0;
    border-top: 0;
    color: var(--nd-ink);
    text-align: start;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    transition: background .12s ease;
}
.reco-row:hover { background: var(--nd-hover); }
.reco-row:last-child { border-bottom: 0; }
.reco-title { font-weight: 600; color: var(--nd-ink); }
.reco-details {
    color: var(--nd-muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reco-type-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: var(--nd-font-mono);
    letter-spacing: .02em;
}
.reco-type-pill.tone-info  { background: color-mix(in srgb, var(--nd-info) 15%, transparent); color: var(--nd-info); }
.reco-type-pill.tone-err   { background: color-mix(in srgb, var(--nd-err) 15%, transparent);  color: var(--nd-err); }
.reco-type-pill.tone-warn  { background: color-mix(in srgb, var(--nd-warn) 15%, transparent); color: var(--nd-warn); }
.reco-type-pill.tone-muted { background: var(--nd-bg-2); color: var(--nd-muted); }

.reco-site-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    font-size: 11.5px;
    color: var(--nd-ink-2);
}

.reco-sev-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 500;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
}
.reco-sev-pill.tone-err  { color: var(--nd-err); }
.reco-sev-pill.tone-warn { color: var(--nd-warn); }
.reco-sev-pill.tone-info { color: var(--nd-info); }
.reco-sev-dot { width: 6px; height: 6px; border-radius: 50%; }

.reco-prio {
    font-family: var(--nd-font-mono);
    font-size: 13px;
    color: var(--nd-ink);
    font-weight: 600;
}

.reco-action-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 600;
}
.reco-action-pill.ok    { background: color-mix(in srgb, var(--nd-ok) 18%, transparent); color: var(--nd-ok); }
.reco-action-pill.muted { background: var(--nd-bg-2); color: var(--nd-muted); border: 1px solid var(--nd-line); }

.reco-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--nd-muted);
    font-size: 13px;
}

/* ─────────────────────────────────────────────
   17. Off-canvas panel (shared)
   ───────────────────────────────────────────── */
.oc-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 80;
    animation: oc-fade .15s ease;
}
@keyframes oc-fade { from { opacity: 0; } to { opacity: 1; } }

.oc-panel {
    position: fixed; top: 0; inset-inline-end: 0;
    height: 100vh;
    width: 480px; max-width: 94vw;
    z-index: 81;
    background: var(--nd-bg-1);
    border-inline-start: 1px solid var(--nd-line);
    box-shadow: -20px 0 60px rgba(0,0,0,.4);
    padding: 28px 28px 24px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 18px;
    animation: oc-slide-rtl .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes oc-slide-rtl { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.oc-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: flex-start;
}
.oc-head-icon {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--nd-info); color: #f1eee5;
    display: grid; place-items: center;
}
.oc-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.oc-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.oc-close {
    width: 30px; height: 30px;
    border: 0; background: transparent;
    color: var(--nd-muted);
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
}
.oc-close:hover { background: var(--nd-hover); color: var(--nd-ink); }

.oc-section { padding-top: 4px; }
.oc-section-label {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    margin-bottom: 8px;
}
.oc-problem {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    font-size: 13.5px;
    color: var(--nd-ink);
    line-height: 1.55;
}

.oc-tabs {
    display: inline-flex; gap: 4px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    padding: 3px;
    border-radius: 9px;
    width: fit-content;
}
.oc-tabs button {
    padding: 7px 14px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: var(--nd-ink-2);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
}
.oc-tabs button.is-active {
    background: var(--nd-bg-1);
    color: var(--nd-ink);
    box-shadow: 0 0 0 1px var(--nd-line);
    font-weight: 600;
}

.oc-solution {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
    border-inline-start: 3px solid var(--nd-info);
}
.oc-solution-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.oc-sites-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.oc-sites-list li {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: var(--nd-muted);
}
.oc-sites-list li span { color: var(--nd-ink-2); }

.oc-status-empty {
    padding: 18px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    color: var(--nd-muted);
    font-size: 13px;
}

.oc-foot {
    margin-top: auto;
    display: flex; gap: 10px;
    padding-top: 12px;
}
.oc-primary {
    flex: 1;
    padding: 12px;
    border: 0; border-radius: 10px;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    font-family: inherit;
}
.oc-secondary {
    padding: 12px 16px;
    border: 1px solid var(--nd-line);
    background: transparent;
    color: var(--nd-ink-2);
    border-radius: 10px;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
}
.oc-secondary:hover { background: var(--nd-hover); color: var(--nd-ink); }

/* ─────────────────────────────────────────────
   18. V4 widget set (dashboard internals)
   ───────────────────────────────────────────── */
.v4-title-tag {
    font-size: .35em;
    font-weight: 400;
    color: var(--nd-muted);
    letter-spacing: 0;
    margin-inline-start: 8px;
    vertical-align: middle;
}

.v4-kv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.v4-kv-grid.v4-kv-3 { grid-template-columns: repeat(3, 1fr); }
.v4-kv {
    padding: 18px 14px;
    text-align: center;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-bg-2);
}
.v4-kv-n {
    font-size: 30px;
    font-weight: 300;
    color: var(--nd-ink);
    letter-spacing: -.03em;
    line-height: 1;
    font-family: var(--nd-font-mono);
}
.v4-kv-n.t-err  { color: var(--nd-err); }
.v4-kv-n.t-warn { color: var(--nd-warn); }
.v4-kv-n.t-ok   { color: var(--nd-ok); }
.v4-kv-l {
    font-size: 12px;
    color: var(--nd-muted);
    margin-top: 8px;
}

.v4-alert-row {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--nd-bg-2);
    border-radius: 10px;
    border: 1px solid var(--nd-line);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.v4-alert-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nd-muted);
}
.v4-alert-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--nd-ok);
}
.v4-alert-meta {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    color: var(--nd-muted);
}

.v4-live {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--nd-ok);
    font-weight: 600;
}
.v4-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--nd-ok);
    box-shadow: 0 0 8px var(--nd-ok);
    animation: v4pulse 2s ease-in-out infinite;
}
@keyframes v4pulse { 50% { opacity: .4; } }

.v4-ai-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.v4-ai-cell {
    padding: 18px;
    border-radius: 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    display: flex; flex-direction: column; gap: 6px;
}
.v4-ai-cell.tone-ok   { border-color: color-mix(in srgb, var(--nd-ok) 40%, var(--nd-line)); }
.v4-ai-cell.tone-warn { border-color: color-mix(in srgb, var(--nd-warn) 45%, var(--nd-line)); }
.v4-ai-cell.tone-err  { border-color: color-mix(in srgb, var(--nd-err) 45%, var(--nd-line)); }
.v4-ai-num {
    font-family: var(--nd-font-mono);
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1;
}
.v4-ai-cell.tone-ok    .v4-ai-num { color: var(--nd-ok); }
.v4-ai-cell.tone-warn  .v4-ai-num { color: var(--nd-warn); }
.v4-ai-cell.tone-err   .v4-ai-num { color: var(--nd-err); }
.v4-ai-cell.tone-muted .v4-ai-num { color: var(--nd-ink); }
.v4-ai-lab { font-size: 12.5px; color: var(--nd-muted); }

.v4-leads {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    overflow: hidden;
}
.v4-lead-stage {
    padding: 16px;
    border-inline-start: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
}
.v4-lead-stage:first-child { border-inline-start: 0; }
.v4-lead-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.v4-lead-dot { width: 8px; height: 8px; border-radius: 50%; }
.v4-lead-label { font-size: 12px; color: var(--nd-muted); }
.v4-lead-num {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1;
    font-family: var(--nd-font-mono);
}
.v4-leads-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 10px 14px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--nd-muted);
}
.v4-leads-foot strong {
    color: var(--nd-ink);
    font-weight: 600;
    font-family: var(--nd-font-mono);
    margin: 0 3px;
}
.v4-sep { opacity: .4; margin: 0 6px; }

.v4-health-list { list-style: none; padding: 0; margin: 0; }
.v4-health-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--nd-line);
}
.v4-health-list li:last-child { border: 0; padding-bottom: 0; }
.v4-health-list li:first-child { padding-top: 0; }
.v4-health-ring {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    border: 1.5px solid var(--nd-line);
    color: var(--nd-muted);
}
.v4-health-ring.ok   { border-color: color-mix(in srgb, var(--nd-ok) 60%, var(--nd-line));   background: color-mix(in srgb, var(--nd-ok) 12%, transparent);   color: var(--nd-ok); }
.v4-health-ring.warn { border-color: color-mix(in srgb, var(--nd-warn) 60%, var(--nd-line)); background: color-mix(in srgb, var(--nd-warn) 12%, transparent); color: var(--nd-warn); }
.v4-health-ring.err  { border-color: color-mix(in srgb, var(--nd-err) 60%, var(--nd-line));  background: color-mix(in srgb, var(--nd-err) 12%, transparent);  color: var(--nd-err); }
.v4-h-label { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.v4-h-detail { font-size: 12px; color: var(--nd-muted); line-height: 1.5; }
.v4-health-pill {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--nd-font-mono);
    letter-spacing: .04em;
}
.v4-health-pill.ok   { background: color-mix(in srgb, var(--nd-ok) 14%, transparent);   color: var(--nd-ok); }
.v4-health-pill.warn { background: color-mix(in srgb, var(--nd-warn) 14%, transparent); color: var(--nd-warn); }
.v4-health-pill.err  { background: color-mix(in srgb, var(--nd-err) 14%, transparent);  color: var(--nd-err); }
.v4-health-val {
    font-family: var(--nd-font-mono);
    font-size: 18px;
    font-weight: 700;
}
.v4-health-val.warn { color: var(--nd-warn); }
.v4-health-val.err  { color: var(--nd-err); }

.v4-count-badge {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--nd-warn) 18%, transparent);
    color: var(--nd-warn);
}

.v4-upd-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.v4-upd-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 8px;
    font-size: 13px;
    color: var(--nd-ink-2);
}
.v4-upd-label { color: var(--nd-ink); font-weight: 500; }
.v4-upd-num {
    font-family: var(--nd-font-mono);
    font-weight: 600;
    color: var(--nd-warn);
}

.v4-upd-sub {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nd-muted);
    margin-bottom: 8px;
    font-family: var(--nd-font-mono);
}
.v4-upd-sites { list-style: none; padding: 0; margin: 0 0 14px; }
.v4-upd-sites li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--nd-line);
    font-size: 13px;
}
.v4-upd-sites li:last-child { border: 0; }
.v4-upd-site-dot { width: 8px; height: 8px; border-radius: 50%; }
.v4-upd-site-meta {
    font-family: var(--nd-font-mono);
    font-size: 11.5px;
    color: var(--nd-muted);
}
.v4-upd-btn {
    width: 100%;
    padding: 12px;
    background: var(--nd-info);
    color: #f1eee5;
    border: 0;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.v4-upd-btn:hover { filter: brightness(1.1); }

.v4-support-empty {
    margin-top: 14px;
    padding: 14px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--nd-muted);
    justify-content: center;
}

/* ─────────────────────────────────────────────
   19. Forms
   ───────────────────────────────────────────── */
.nd-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.nd-field label,
.nd-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nd-ink-2);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="tel"],
input[type="search"], input[type="date"], input[type="time"],
select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--nd-line);
    border-radius: 9px;
    background: var(--nd-bg-2);
    color: var(--nd-ink);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, background .12s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus,
input[type="search"]:focus, input[type="date"]:focus, input[type="time"]:focus,
select:focus, textarea:focus {
    border-color: var(--nd-line-2);
    background: var(--nd-bg-1);
}
textarea { resize: vertical; min-height: 88px; }

/* Undo inputs inside search bars (they inherit .rp-tbl-search which already strips borders) */
.rp-tbl-search input,
.sites-search input,
.reco-search input,
.reco-search select,
.v1-search input {
    padding: 0;
    border: 0;
    background: transparent;
}

/* ─────────────────────────────────────────────
   20. Dropdowns & modals
   ───────────────────────────────────────────── */
.rp-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
    padding: 6px;
    min-width: 220px;
    z-index: 300;
    display: none;
    font-size: 13px;
}
.rp-dropdown.rp-open { display: block; }
.rp-dropdown-head {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-muted);
    padding: 8px 12px 6px;
}
.rp-dropdown-item {
    display: flex; align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--nd-ink-2);
    text-decoration: none;
    cursor: pointer;
    font-size: 13px;
    transition: background .12s, color .12s;
}
.rp-dropdown-item:hover {
    background: var(--nd-hover);
    color: var(--nd-ink);
}
.rp-dropdown-item.danger { color: var(--nd-err); }
.rp-dropdown-item.danger:hover { background: color-mix(in srgb, var(--nd-err) 12%, transparent); color: var(--nd-err); }
.rp-dropdown-item svg, .rp-dropdown-item .lucide { width: 14px; height: 14px; }
.rp-dropdown-sep { height: 1px; background: var(--nd-line); margin: 6px 4px; }

.rp-acc-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--nd-ink-2);
}
.rp-acc-label { color: var(--nd-ink-2); }
.rp-acc-toggle-btn {
    width: 34px; height: 20px;
    border-radius: 20px;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    position: relative;
    cursor: pointer;
    transition: background .12s;
}
.rp-acc-toggle-btn::before {
    content: "";
    position: absolute;
    right: 2px; top: 1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--nd-muted);
    transition: transform .18s;
}
.rp-acc-toggle-btn.active {
    background: color-mix(in srgb, var(--nd-accent) 30%, transparent);
    border-color: var(--nd-accent);
}
.rp-acc-toggle-btn.active::before {
    transform: translateX(-14px);
    background: var(--nd-accent);
}

.rp-font-size-ctrl {
    display: inline-flex;
    gap: 2px;
    background: var(--nd-bg-2);
    padding: 2px;
    border-radius: 7px;
    border: 1px solid var(--nd-line);
}
.rp-font-size-ctrl button {
    padding: 4px 10px;
    font-size: 11.5px;
    border: 0; background: transparent;
    border-radius: 5px;
    color: var(--nd-ink-2);
    cursor: pointer;
    font-family: inherit;
}
.rp-font-size-ctrl button:hover { background: var(--nd-hover); color: var(--nd-ink); }

/* ─────────────────────────────────────────────
   21. Command palette
   ───────────────────────────────────────────── */
.rp-cmd {
    position: fixed; inset: 0;
    z-index: 400;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.rp-cmd.rp-open { display: flex; }
.rp-cmd-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}
.rp-cmd-dialog {
    position: relative;
    width: 92%; max-width: 640px;
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    overflow: hidden;
}
.rp-cmd-header {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--nd-line);
}
.rp-cmd-header svg, .rp-cmd-header .lucide {
    width: 15px; height: 15px;
    color: var(--nd-muted);
}
.rp-cmd-input {
    flex: 1;
    border: 0; background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    color: var(--nd-ink);
}
.rp-cmd-input::placeholder { color: var(--nd-muted-2); }
.rp-cmd-esc {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    color: var(--nd-muted);
}
.rp-cmd-close {
    width: 26px; height: 26px;
    border: 0; background: transparent;
    color: var(--nd-muted);
    border-radius: 6px;
    cursor: pointer;
}
.rp-cmd-close:hover { background: var(--nd-hover); color: var(--nd-ink); }
.rp-cmd-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
}
.rp-cmd-footer {
    display: flex; gap: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--nd-line);
    font-size: 11.5px;
    color: var(--nd-muted);
    background: var(--nd-bg-2);
}
.rp-cmd-footer kbd {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    color: var(--nd-muted);
    margin: 0 3px;
}

/* ─────────────────────────────────────────────
   22. Utilities (legacy)
   ───────────────────────────────────────────── */
.fade-in { animation: nd-fade-in .22s ease; }
@keyframes nd-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hidden { display: none !important; }

.animate-spin  { animation: nd-spin 1s linear infinite; }
@keyframes nd-spin { to { transform: rotate(360deg); } }
.animate-fade-in { animation: nd-fade-in .5s ease-out both; }
@keyframes dash-fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--nd-line-2);
    border-radius: 20px;
}

/* Chart filter buttons (dashboard) */
.chart-filter-btn {
    padding: 5px 12px;
    font-size: 11.5px;
    border: 0;
    background: transparent;
    color: var(--nd-ink-2);
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: background .12s, color .12s;
    white-space: nowrap;
}
.chart-filter-btn:hover { color: var(--nd-ink); background: var(--nd-hover); }
.chart-filter-btn.dash-active {
    background: var(--nd-info) !important;
    color: #f1eee5 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--nd-info) 30%, transparent);
}

/* ApexCharts dark-mode tuning */
.apexcharts-canvas text { fill: var(--nd-muted) !important; }
.apexcharts-gridline { stroke: var(--nd-line) !important; }
.apexcharts-tooltip {
    background: var(--nd-bg-1) !important;
    border-color: var(--nd-line) !important;
    color: var(--nd-ink) !important;
}
.apexcharts-tooltip-title {
    background: var(--nd-bg-2) !important;
    border-color: var(--nd-line) !important;
    color: var(--nd-muted) !important;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--nd-bg-2) !important;
    border-color: var(--nd-line) !important;
    color: var(--nd-ink) !important;
}

/* Extra legacy chip variants */
.rp-chip-gray   { background: var(--nd-bg-2); color: var(--nd-muted); }
.rp-chip-yellow { background: color-mix(in srgb, var(--nd-warn) 16%, transparent); color: var(--nd-warn); }

/* Legacy form helpers not otherwise overridden */
.rp-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--nd-line);
    border-radius: 9px;
    background: var(--nd-bg-2);
    color: var(--nd-ink);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .12s, background .12s;
}
.rp-input:focus {
    border-color: var(--nd-line-2);
    background: var(--nd-bg-1);
}
.rp-input::placeholder { color: var(--nd-muted-2); }
.rp-input:disabled { opacity: .55; cursor: not-allowed; }

.rp-field-label {
    display: block;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nd-ink-2);
    margin-bottom: 6px;
}
.rp-field-hint {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--nd-muted);
}

/* Toggle switch */
.rp-toggle {
    position: relative;
    display: inline-block;
    width: 36px; height: 20px;
    cursor: pointer;
}
.rp-toggle input { opacity: 0; width: 0; height: 0; }
.rp-toggle-track {
    position: absolute; inset: 0;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    border-radius: 20px;
    transition: background .14s;
}
.rp-toggle-track::before {
    content: "";
    position: absolute;
    right: 2px; top: 1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--nd-muted);
    transition: transform .18s, background .18s;
}
.rp-toggle input:checked + .rp-toggle-track {
    background: color-mix(in srgb, var(--nd-accent) 30%, transparent);
    border-color: var(--nd-accent);
}
.rp-toggle input:checked + .rp-toggle-track::before {
    transform: translateX(-14px);
    background: var(--nd-accent);
}

/* Empty state card */
.rp-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--nd-muted);
    font-size: 13px;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
}
.rp-empty svg, .rp-empty .lucide {
    width: 24px; height: 24px;
    color: var(--nd-muted-2);
}

/* Sheet modal / drawer */
.rp-sheet {
    position: fixed; inset: 0;
    z-index: 300;
    background: rgba(0,0,0,.5);
    display: none;
    align-items: center; justify-content: center;
    padding: 16px;
    animation: nd-fade .15s ease;
}
.rp-sheet.rp-open { display: flex; }
.rp-sheet > .rp-sheet-inner,
.rp-sheet > div {
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: 100%; max-width: 480px;
    overflow: hidden;
}

/* Sites-updates cards (visibility is controlled by the responsive
   rule near .nd-split-btn — this just defines the inner layout props) */
.rp-sites-updates-cards { flex-direction: column; gap: 10px; }
.rp-update-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-card-bg);
    align-items: center;
}
.rp-update-chip {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
    letter-spacing: .04em;
}
.rp-update-chip--core   { background: color-mix(in srgb, var(--nd-info) 16%, transparent); color: var(--nd-info); }
.rp-update-chip--plugin { background: color-mix(in srgb, var(--nd-ok) 16%, transparent);   color: var(--nd-ok); }
.rp-update-chip--theme  { background: color-mix(in srgb, var(--nd-warn) 16%, transparent); color: var(--nd-warn); }

/* Tag pill (blog tags) */
.rp-tag-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    border-radius: 20px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    color: var(--nd-ink-2);
    font-size: 12px;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.rp-tag-pill:hover { background: var(--nd-hover); color: var(--nd-ink); }
.rp-tag-pill.active {
    background: color-mix(in srgb, var(--nd-accent) 14%, transparent);
    border-color: var(--nd-accent);
    color: var(--nd-accent);
}

/* HTTP code badge */
.rp-http-code {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
}

/* Slug editor */
.rp-slug-group {
    display: flex;
    align-items: center;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 9px;
    overflow: hidden;
}
.rp-slug-prefix {
    padding: 9px 10px;
    font-family: var(--nd-font-mono);
    font-size: 12px;
    color: var(--nd-muted);
    background: var(--nd-bg-3);
    border-inline-end: 1px solid var(--nd-line);
}
.rp-slug-group input {
    border: 0;
    background: transparent;
    padding: 9px 10px;
    flex: 1;
    color: var(--nd-ink);
    font-family: var(--nd-font-mono);
    font-size: 12.5px;
    outline: none;
}

/* Radio cards */
.rp-radio-card {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-bg-2);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.rp-radio-card:hover { background: var(--nd-hover); }
.rp-radio-card.selected,
.rp-radio-card:has(input:checked) {
    border-color: var(--nd-accent);
    background: color-mix(in srgb, var(--nd-accent) 8%, transparent);
}

/* Site-details article author label */
.rp-article-site {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    color: var(--nd-muted);
    letter-spacing: .04em;
}

/* Image preview */
.rp-img-preview {
    border: 1px dashed var(--nd-line);
    border-radius: 10px;
    padding: 14px;
    background: var(--nd-bg-2);
    color: var(--nd-muted);
    font-size: 12.5px;
    text-align: center;
}

/* Editor layout (blog post edit) */
.rp-editor-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    align-items: start;
}
.rp-editor-main,
.rp-editor-sidebar {
    display: flex; flex-direction: column; gap: 16px;
}
.rp-editor-title-input {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--nd-line);
    background: transparent;
    color: var(--nd-ink);
    font-family: inherit;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    outline: none;
}
.rp-editor-title-input:focus { border-bottom-color: var(--nd-accent); }
.rp-editor-title-input::placeholder { color: var(--nd-muted-2); }

.rp-editor-actions {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--nd-line);
}

.rp-sidebar-card .rp-card-head { padding: 12px 16px; }
.rp-sidebar-card .rp-card-body { padding: 14px 16px; }

@media (max-width: 1024px) {
    .rp-editor-layout { grid-template-columns: 1fr; }
}

/* Category grid */
.rp-grid-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

/* Separators used in forms */
.rp-sep-opt,
.rp-sep-radio {
    height: 1px;
    background: var(--nd-line);
    margin: 16px 0;
}

/* ─────────────────────────────────────────────
   23. Responsive
   ───────────────────────────────────────────── */
@media (max-width: 1200px) {
    .rp-page-inner { padding: 32px 32px 48px; }
    .dash-kpi-strip,
    .v1-kpis {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }
    .v1-kpi,
    .dash-kpi-strip > * {
        border-inline-start: 0;
        padding: 0;
    }
    .dash-masonry { grid-template-columns: repeat(2, 1fr); }
    .dash-item { grid-column: span 1; }
    .dash-item-wide { grid-column: span 2; }

    .v4-kv-grid { grid-template-columns: repeat(2, 1fr); }
    .v4-leads { grid-template-columns: repeat(2, 1fr); }
    .v4-lead-stage:nth-child(3) { border-inline-start: 0; }
    .v4-ai-grid { grid-template-columns: repeat(2, 1fr); }

    .recs-summary { grid-template-columns: repeat(2, 1fr); }
    .reco-summary { grid-template-columns: repeat(2, 1fr); }

    .reco-thead, .reco-row {
        grid-template-columns: 90px 1.5fr 1.5fr 110px 90px 60px 80px;
    }
}

@media (max-width: 1024px) {
    body.rp-app { overflow: auto; }
    #rp-sidebar {
        transform: translateX(100%);
        transition: transform .28s ease;
    }
    #rp-sidebar.rp-open { transform: translateX(0); }
    #rp-shell {
        margin-right: 0;
        height: auto;
        min-height: 100vh;
    }
    #rp-main {
        overflow: visible;
        height: auto;
    }
    .rp-topbar-mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px;
        gap: 12px;
        position: sticky; top: 0;
        z-index: 150;
    }
    .rp-topbar-mobile__logo img { height: 26px; }
    .rp-topbar-mobile__btn {
        width: 34px; height: 34px;
        display: grid; place-items: center;
        background: transparent;
        border: 1px solid var(--nd-line);
        border-radius: 9px;
        color: var(--nd-ink-2);
        cursor: pointer;
    }
    .rp-topbar-mobile__btn svg, .rp-topbar-mobile__btn .lucide {
        width: 16px; height: 16px;
    }
    .rp-topbar-mobile__actions { display: flex; gap: 6px; }

    #rp-topbar { display: none; }
    .rp-breadcrumb-mobile { display: flex; }

    .rp-page-inner { padding: 20px 18px 48px; }
    .rp-ph, .v1-hero { flex-direction: column; align-items: stretch; gap: 14px; }
    .rp-ph-title, .v1-title { font-size: 32px; }
    .v1-hero-meta { min-width: 0; }

    .rp-tb-search { display: none; }
}

@media (max-width: 760px) {
    .dash-kpi-strip,
    .v1-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .dash-masonry { grid-template-columns: 1fr; }
    .dash-item, .dash-item-wide { grid-column: span 1; }

    .v4-kv-grid,
    .v4-ai-grid,
    .v4-leads {
        grid-template-columns: repeat(2, 1fr);
    }
    .v4-lead-stage:nth-child(n+2) { border-inline-start: 0; }
    .v4-lead-stage:nth-child(n+3) { border-top: 1px solid var(--nd-line); }

    .recs-summary,
    .reco-summary {
        grid-template-columns: 1fr 1fr;
    }

    .sites-thead { display: none; }
    .sites-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Legacy rp-table → stacked cards on small screens */
    .rp-table thead { display: none; }
    .rp-table, .rp-table tbody, .rp-table tr, .rp-table td { display: block; width: 100%; }
    .rp-table tbody tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--nd-line);
    }
    .rp-table tbody td {
        padding: 4px 0;
        border: 0;
    }
    .rp-row-chevron { display: none; }

    .reco-thead { display: none; }
    .reco-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* ============================================================
   24. Single Site Manager — Calm Editorial (sd4-*)
   Main audit page: score + findings + meta
   ============================================================ */

.sd4 {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 0 80px;
}

/* Breadcrumb chip in page body */
.sd4-crumb {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 4px 0;
    color: var(--nd-muted); font-size: 12px;
    margin-bottom: 28px;
    font-family: inherit; cursor: pointer;
}
.sd4-crumb:hover { color: var(--nd-ink-2); }
.sd4-crumb svg, .sd4-crumb .lucide { transform: scaleX(-1); width: 12px; height: 12px; }
.sd4-crumb-sep { color: var(--nd-muted-2); margin: 0 4px; }
.sd4-crumb-current { color: var(--nd-ink); font-weight: 500; }

/* Hero (used on site-audit main page) */
.sd4-hero { margin-bottom: 32px; }
.sd4-hero-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px; flex-wrap: wrap;
}
.sd4-hero-id { display: flex; align-items: center; gap: 14px; }
.sd4-brand {
    width: 56px; height: 56px; border-radius: 14px;
    display: grid; place-items: center;
    font-family: var(--nd-font-mono); font-size: 26px; font-weight: 700;
    letter-spacing: -.03em; flex-shrink: 0;
}
.sd4-name {
    margin: 0 0 4px;
    font-size: 34px; font-weight: 700;
    letter-spacing: -.025em; line-height: 1;
    color: var(--nd-ink);
}
.sd4-url-row {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--nd-muted); font-size: 13px;
}
.sd4-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--nd-ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-ok) 22%, transparent);
}
.sd4-url { font-size: 13px; }

.sd4-hero-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sd4-action-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 8px;
    background: transparent; border: 1px solid var(--nd-line);
    color: var(--nd-ink-2); font-size: 12.5px;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}
.sd4-action-ghost:hover { border-color: var(--nd-line-2); color: var(--nd-ink); }
.sd4-action-ghost.sm { padding: 7px 12px; font-size: 12px; }
.sd4-action-ghost svg, .sd4-action-ghost .lucide { width: 13px; height: 13px; transform: scaleX(-1); }

.sd4-action-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px 9px 10px; border-radius: 8px;
    background: var(--nd-accent); color: var(--nd-accent-ink);
    border: 0;
    font-size: 12.5px; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: filter .12s;
    white-space: nowrap;
}
.sd4-action-primary:hover { filter: brightness(1.08); }
.sd4-action-count {
    padding: 2px 7px; border-radius: 5px;
    background: color-mix(in srgb, var(--nd-accent-ink) 22%, transparent);
    color: var(--nd-accent-ink);
    font-family: var(--nd-font-mono);
    font-size: 11px; font-weight: 600;
}

/* Sections & rules */
.sd4-section { margin-bottom: 44px; }
.sd4-rule {
    border: 0; height: 1px;
    background: var(--nd-line);
    margin: 8px 0 44px;
}
.sd4-kicker {
    font-size: 11px; font-weight: 600;
    color: var(--nd-muted);
    text-transform: uppercase; letter-spacing: .14em;
    margin-bottom: 10px;
    font-family: var(--nd-font-mono);
}

/* Score block */
.sd4-score-lead {
    display: flex; align-items: flex-end; gap: 20px;
    margin-bottom: 28px;
}
.sd4-score-num {
    font-size: 112px; font-weight: 700;
    letter-spacing: -.055em; line-height: .85;
    color: var(--nd-ink);
    font-family: var(--nd-font-mono);
}
.sd4-score-text { padding-bottom: 10px; }
.sd4-score-verdict {
    font-size: 18px; font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nd-ink);
    margin-bottom: 4px;
}
.sd4-score-delta {
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 12.5px; color: var(--nd-muted);
}
.sd4-score-delta .mono,
.sd4-score-delta .nd-mono { color: var(--nd-ok); font-weight: 600; font-family: var(--nd-font-mono); }
.sd4-score-delta.is-down .mono,
.sd4-score-delta.is-down .nd-mono { color: var(--nd-err); }
.sd4-arrow { color: var(--nd-ok); font-size: 13px; line-height: 1; }
.sd4-score-delta.is-down .sd4-arrow { color: var(--nd-err); }

.sd4-score-segs {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; margin-bottom: 28px;
}
.sd4-seg-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.sd4-seg-head span:first-child { color: var(--nd-ink-2); font-size: 12.5px; }
.sd4-seg-head .mono,
.sd4-seg-head .nd-mono {
    color: var(--nd-ink); font-size: 13px; font-weight: 600;
    font-family: var(--nd-font-mono);
}
.sd4-seg-track {
    height: 3px; background: var(--nd-line);
    border-radius: 2px; overflow: hidden;
}
.sd4-seg-fill {
    height: 100%;
    background: var(--nd-accent);
    border-radius: 2px;
}

/* Trend sparkline */
.sd4-score-trend {
    padding-top: 12px;
    border-top: 1px dashed var(--nd-line);
}
.sd4-trend-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.sd4-trend-label { font-size: 12px; color: var(--nd-muted); }
.sd4-trend-range {
    font-size: 11.5px; color: var(--nd-ink-2);
    font-family: var(--nd-font-mono);
}

/* Findings list */
.sd4-find-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.sd4-find-h {
    margin: 0 0 4px;
    font-size: 24px; font-weight: 700;
    letter-spacing: -.02em; color: var(--nd-ink);
}
.sd4-find-meta {
    font-size: 11.5px; color: var(--nd-muted-2);
    font-family: var(--nd-font-mono);
}

.sd4-filter-row {
    display: flex; gap: 22px;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nd-line);
    flex-wrap: wrap;
}
.sd4-filter {
    padding: 4px 0;
    background: transparent; border: 0;
    color: var(--nd-muted); font-size: 13px;
    font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: baseline; gap: 6px;
    border-bottom: 1.5px solid transparent;
    margin-bottom: -13px; padding-bottom: 10px;
}
.sd4-filter em {
    font-style: normal; font-size: 11px; color: var(--nd-muted-2);
    font-family: var(--nd-font-mono);
}
.sd4-filter:hover { color: var(--nd-ink-2); }
.sd4-filter.is-active {
    color: var(--nd-ink);
    font-weight: 600;
    border-bottom-color: var(--nd-ink);
}
.sd4-filter.is-active em { color: var(--nd-ink-2); }

.sd4-find-list { display: flex; flex-direction: column; }
.sd4-find { border-bottom: 1px solid var(--nd-line); }
.sd4-find:last-child { border-bottom: 0; }

.sd4-find .sd4-find-head,
.sd4-find-row {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto auto auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 16px 4px;
    background: transparent; border: 0;
    text-align: start; cursor: pointer;
    font-family: inherit;
    margin-bottom: 0;
    transition: background .12s;
    color: inherit;
}
.sd4-find .sd4-find-head:hover,
.sd4-find-row:hover { background: color-mix(in srgb, var(--nd-ink) 3%, transparent); }

.sd4-dot {
    width: 8px; height: 8px; border-radius: 50%;
    flex-shrink: 0;
}
.sd4-dot.sev-critical { background: var(--nd-err); }
.sd4-dot.sev-warning  { background: var(--nd-warn); }
.sd4-dot.sev-low      { background: var(--nd-muted-2); }
.sd4-dot.sev-info     { background: var(--nd-info); }

.sd4-find-title {
    font-size: 14.5px; font-weight: 500;
    color: var(--nd-ink);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sd4-find-cat {
    font-size: 11.5px;
    color: var(--nd-muted);
    white-space: nowrap;
}
.sd4-find-time {
    font-size: 11.5px;
    color: var(--nd-muted-2);
    white-space: nowrap;
    font-family: var(--nd-font-mono);
}
.sd4-find-fix {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid color-mix(in srgb, var(--nd-ok) 35%, transparent);
    background: color-mix(in srgb, var(--nd-ok) 12%, transparent);
    color: var(--nd-ok);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .12s, transform .08s;
    white-space: nowrap;
}
.sd4-find-fix:hover  { background: color-mix(in srgb, var(--nd-ok) 20%, transparent); }
.sd4-find-fix:active { transform: translateY(1px); }
.sd4-find-fix[disabled] { opacity: .55; cursor: default; }
.sd4-find-chev {
    width: 24px; height: 24px;
    display: grid; place-items: center;
    color: var(--nd-muted);
    font-family: var(--nd-font-mono);
    font-size: 14px;
}
.sd4-find-chev svg, .sd4-find-chev .lucide {
    width: 13px; height: 13px;
    transform: rotate(-90deg);
}

.sd4-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 40px; color: var(--nd-muted); text-align: center;
}
.sd4-empty-check {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--nd-ok) 14%, transparent);
    color: var(--nd-ok); font-weight: 700;
}

/* Meta list */
.sd4-meta-list {
    margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
}
.sd4-meta-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--nd-line);
    font-size: 12.5px;
}
.sd4-meta-row dt { color: var(--nd-muted); margin: 0; }
.sd4-meta-row dd {
    color: var(--nd-ink); margin: 0; font-weight: 500;
    font-family: var(--nd-font-mono);
}

@media (max-width: 720px) {
    .sd4-score-lead { flex-direction: column; align-items: flex-start; gap: 8px; }
    .sd4-score-num { font-size: 80px; }
    .sd4-score-segs { grid-template-columns: repeat(2, 1fr); }
    .sd4-meta-list { grid-template-columns: 1fr; }
    .sd4 { max-width: 100%; }
    .sd4-hero-top { flex-direction: column; align-items: flex-start; }
    .sd4-find .sd4-find-head,
    .sd4-find-row {
        grid-template-columns: auto minmax(0,1fr) auto;
    }
    .sd4-find-cat, .sd4-find-time { display: none; }
}

/* ============================================================
   25. Single Site Manager — Sub-page primitives (sds-*)
   Health, updates, posts, crawl, connections, privacy, seo, ai,
   keywords, competitors, links, backups, settings, credentials
   ============================================================ */

/* Page head (replaces hero in site sub-pages) */
.sds-page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 24px; flex-wrap: wrap;
    margin-bottom: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nd-line);
}
.sds-h1 {
    margin: 4px 0 0;
    font-size: 32px; font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nd-ink); line-height: 1.1;
}
.sds-h2 {
    margin: 4px 0 0;
    font-size: 24px; font-weight: 600;
    letter-spacing: -.02em;
    color: var(--nd-ink); line-height: 1.15;
}

.sds-section { margin-bottom: 44px; }
.sds-section-head { margin-bottom: 18px; }
.sds-section-head.sds-flex {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
}
.sds-section-sub {
    font-size: 14px; font-weight: 600;
    color: var(--nd-ink);
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--nd-line);
    letter-spacing: -.005em;
}
.sds-section-meta {
    font-size: 11.5px; color: var(--nd-muted);
    font-family: var(--nd-font-mono);
}

/* KPI row — minimal, no boxes */
.sds-kpi-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    padding: 4px 0 36px;
}
.sds-kpi {
    padding: 0 22px;
    border-inline-start: 1px solid var(--nd-line);
}
.sds-kpi:first-child { border-inline-start: 0; padding-inline-start: 0; }
.sds-kpi:last-child  { padding-inline-end: 0; }
.sds-kpi-label {
    font-size: 11.5px; color: var(--nd-muted);
    margin-bottom: 14px; letter-spacing: .04em;
}
.sds-kpi-value {
    font-size: 38px; font-weight: 300;
    letter-spacing: -.035em; line-height: 1;
    color: var(--nd-ink);
    font-feature-settings: "tnum";
    font-family: var(--nd-font-mono);
}
.sds-kpi.tone-ok   .sds-kpi-value { color: var(--nd-ok); }
.sds-kpi.tone-warn .sds-kpi-value { color: var(--nd-warn); }
.sds-kpi.tone-err  .sds-kpi-value { color: var(--nd-err); }
.sds-kpi.tone-info .sds-kpi-value { color: var(--nd-info); }

/* Core Web Vitals row */
.sds-cwv-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    border-top: 1px dashed var(--nd-line);
    border-bottom: 1px dashed var(--nd-line);
}
.sds-cwv {
    padding: 22px 18px;
    border-inline-start: 1px solid var(--nd-line);
}
.sds-cwv:first-child { border-inline-start: 0; padding-inline-start: 0; }
.sds-cwv-label {
    font-size: 11px; color: var(--nd-muted);
    letter-spacing: .08em; margin-bottom: 12px;
}
.sds-cwv-value {
    font-size: 26px; font-weight: 400;
    letter-spacing: -.025em;
    color: var(--nd-ink);
    font-feature-settings: "tnum";
    font-family: var(--nd-font-mono);
}
.sds-cwv.tone-ok   .sds-cwv-value { color: var(--nd-ok); }
.sds-cwv.tone-warn .sds-cwv-value { color: var(--nd-warn); }
.sds-cwv.tone-err  .sds-cwv-value { color: var(--nd-err); }

/* Callout */
.sds-callout {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; gap: 24px;
    border-top: 1px dashed var(--nd-line);
}
.sds-callout-title { font-size: 13.5px; font-weight: 600; color: var(--nd-ink); }
.sds-callout-sub { font-size: 12px; color: var(--nd-muted); margin-top: 4px; }
.sds-callout-meta {
    font-size: 11px; color: var(--nd-muted);
    font-family: var(--nd-font-mono);
}

/* Table */
.sds-table {
    width: 100%; border-collapse: collapse;
    font-size: 13.5px;
}
.sds-table thead th {
    font-size: 11px; font-weight: 600;
    color: var(--nd-muted);
    letter-spacing: .08em; text-transform: uppercase;
    text-align: start;
    padding: 0 14px 12px;
    border-bottom: 1px solid var(--nd-line);
    font-family: var(--nd-font-mono);
}
.sds-table tbody td {
    padding: 16px 14px;
    border-bottom: 1px dashed var(--nd-line);
    color: var(--nd-ink-2);
    vertical-align: middle;
}
.sds-table tbody tr:hover td { background: var(--nd-hover); }
.sds-cell-strong { color: var(--nd-ink); font-weight: 500; }
.sds-muted { color: var(--nd-muted); }

.sds-pill {
    display: inline-block;
    padding: 2px 8px; border-radius: 4px;
    background: var(--nd-bg-2); color: var(--nd-muted);
    font-size: 10.5px; letter-spacing: .04em;
    font-family: var(--nd-font-mono);
}
.sds-status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 5px;
    font-size: 11px; font-weight: 600;
    background: var(--nd-bg-2); color: var(--nd-ink-2);
}
.sds-status-pill.ok       { background: color-mix(in srgb, var(--nd-ok) 14%, transparent); color: var(--nd-ok); }
.sds-status-pill.ok-soft  { background: var(--nd-bg-2); color: var(--nd-ok); }
.sds-status-pill.warn     { background: color-mix(in srgb, var(--nd-warn) 14%, transparent); color: var(--nd-warn); }
.sds-status-pill.err      { background: color-mix(in srgb, var(--nd-err) 14%, transparent); color: var(--nd-err); }
.sds-status-pill.info     { background: color-mix(in srgb, var(--nd-info) 14%, transparent); color: var(--nd-info); }
.sds-status-pill.muted    { background: var(--nd-bg-2); color: var(--nd-muted); }

/* Sub-tabs (text only) */
.sds-subtabs {
    display: flex; gap: 24px;
    margin-bottom: 22px;
    font-size: 12.5px;
    border-bottom: 1px solid var(--nd-line);
    flex-wrap: wrap;
}
.sds-subtab {
    background: transparent; border: 0;
    padding: 8px 0; margin-bottom: -1px;
    color: var(--nd-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    font-family: inherit; font-size: inherit;
    text-decoration: none;
}
.sds-subtab:hover { color: var(--nd-ink-2); }
.sds-subtab.is-active {
    color: var(--nd-ink);
    border-bottom-color: var(--nd-accent);
    font-weight: 600;
}

/* Row of small actions above content */
.sds-row-actions {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 22px; flex-wrap: wrap;
}
.sds-row-actions.sds-row-between { justify-content: space-between; }

/* Empty state */
.sds-empty {
    padding: 80px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    border-top: 1px dashed var(--nd-line);
    border-bottom: 1px dashed var(--nd-line);
}
.sds-empty.sm { padding: 40px 24px; }
.sds-empty-icon { color: var(--nd-muted-2); }
.sds-empty-icon svg, .sds-empty-icon .lucide { width: 32px; height: 32px; }
.sds-empty-check { font-size: 28px; color: var(--nd-ok); }
.sds-empty-title {
    font-size: 15px; font-weight: 500;
    color: var(--nd-ink); text-align: center;
}
.sds-empty-sub {
    font-size: 13px; color: var(--nd-muted);
    text-align: center; max-width: 380px; line-height: 1.55;
}

/* Toggle list (crawl optimization) */
.sds-toggle-list { display: flex; flex-direction: column; gap: 0; }
.sds-toggle-card {
    padding: 22px 0;
    border-top: 1px dashed var(--nd-line);
}
.sds-toggle-card:last-child { border-bottom: 1px dashed var(--nd-line); }
.sds-toggle-row {
    display: flex; gap: 16px; align-items: flex-start;
}
.sds-toggle-row.sds-toggle-inline {
    padding: 14px 0;
    border-bottom: 1px dashed var(--nd-line);
}
.sds-toggle-row.sds-toggle-inline:last-of-type { border-bottom: 0; }

.sds-toggle {
    flex-shrink: 0; margin-top: 2px;
    width: 32px; height: 18px; border-radius: 99px;
    background: var(--nd-bg-3);
    border: 1px solid var(--nd-line);
    position: relative; padding: 0; cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.sds-toggle .sds-toggle-dot {
    position: absolute; top: 1px; inset-inline-end: 1px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--nd-muted-2);
    transition: inset-inline-end .18s, background .18s, transform .18s;
}
.sds-toggle.is-on {
    background: color-mix(in srgb, var(--nd-accent) 22%, transparent);
    border-color: var(--nd-accent);
}
.sds-toggle.is-on .sds-toggle-dot {
    inset-inline-end: calc(100% - 16px);
    background: var(--nd-accent);
}

.sds-toggle-text { flex: 1; min-width: 0; }
.sds-toggle-title {
    font-size: 13.5px; font-weight: 500;
    color: var(--nd-ink); margin-bottom: 4px;
}
.sds-toggle-desc {
    font-size: 12.5px; color: var(--nd-muted);
    line-height: 1.55;
}

.sds-code {
    margin: 14px 0 0;
    padding: 12px 14px; padding-inline-start: calc(32px + 16px);
    font-family: var(--nd-font-mono);
    font-size: 11.5px; color: var(--nd-ink-2);
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 6px;
    overflow-x: auto; direction: ltr; text-align: left;
    white-space: pre;
}

/* Form elements */
.sds-form-list { display: flex; flex-direction: column; gap: 22px; }
.sds-form-row { display: flex; flex-direction: column; gap: 8px; }
.sds-form-label {
    display: block;
    font-size: 11.5px; font-weight: 500;
    color: var(--nd-muted);
    letter-spacing: .04em;
    margin: 18px 0 8px;
    font-family: var(--nd-font-mono);
    text-transform: uppercase;
}
.sds-form-row .sds-form-label { margin: 0; }

.sds-input,
.sds-textarea,
select.sds-input {
    width: 100%;
    padding: 11px 14px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 7px;
    color: var(--nd-ink);
    font-size: 13px; font-family: inherit;
    outline: none;
    transition: border-color .12s, background .12s;
}
.sds-input.mono,
.sds-input.nd-mono {
    font-family: var(--nd-font-mono);
    font-size: 12.5px;
}
.sds-input:focus,
.sds-textarea:focus,
select.sds-input:focus {
    border-color: var(--nd-line-2);
    background: var(--nd-bg-1);
}
.sds-textarea { resize: vertical; line-height: 1.5; min-height: 88px; }
select.sds-input { appearance: none; cursor: pointer; }

.sds-input-affix {
    display: flex; gap: 6px; align-items: center;
}
.sds-input-affix .sds-input { flex: 1; }

.sds-form-help {
    font-size: 11.5px; color: var(--nd-accent);
    text-decoration: none; align-self: flex-start;
}
.sds-form-help:hover { text-decoration: underline; }
.sds-form-help-text {
    font-size: 11.5px;
    color: var(--nd-muted);
    margin-top: 6px; line-height: 1.55;
}

.sds-icon-btn {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: 1px solid var(--nd-line);
    border-radius: 7px;
    background: transparent; color: var(--nd-muted);
    cursor: pointer; font-family: inherit;
}
.sds-icon-btn:hover {
    color: var(--nd-ink);
    border-color: var(--nd-line-2);
}
.sds-icon-btn svg, .sds-icon-btn .lucide { width: 14px; height: 14px; }

.sds-radio-row {
    display: flex; gap: 18px; align-items: center;
    margin: 14px 0;
    font-size: 12.5px; flex-wrap: wrap;
}
.sds-radio {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; color: var(--nd-ink-2);
}
.sds-radio input { accent-color: var(--nd-accent); margin: 0; }

/* Separator picker (SEO) */
.sds-sep-row { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.sds-sep {
    width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--nd-line);
    border-radius: 7px;
    background: var(--nd-bg-2);
    color: var(--nd-ink-2);
    font-family: var(--nd-font-mono);
    font-size: 14px; cursor: pointer;
}
.sds-sep:hover { border-color: var(--nd-line-2); color: var(--nd-ink); }
.sds-sep.is-active {
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    border-color: var(--nd-accent);
}

/* Save row */
.sds-save-row {
    display: flex; justify-content: flex-end;
    margin-top: 24px; gap: 10px;
}
.sds-save-row.centered { justify-content: center; }
.sds-save-row.split { justify-content: space-between; }

/* Primary / ghost buttons (reusable inside sds pages) */
.sds-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 8px;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    border: 0;
    font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: filter .12s;
}
.sds-btn-primary:hover { filter: brightness(1.08); }
.sds-btn-ghost {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 8px;
    background: transparent;
    border: 1px solid var(--nd-line);
    color: var(--nd-ink-2);
    font-size: 13px;
    font-family: inherit; cursor: pointer; text-decoration: none;
    transition: border-color .12s, color .12s;
}
.sds-btn-ghost:hover {
    border-color: var(--nd-line-2);
    color: var(--nd-ink);
}
.sds-btn-danger {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 16px; border-radius: 8px;
    background: color-mix(in srgb, var(--nd-err) 12%, transparent);
    color: var(--nd-err); border: 0;
    font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: background .12s;
}
.sds-btn-danger:hover { background: color-mix(in srgb, var(--nd-err) 22%, transparent); }

/* Segmented (keywords) */
.sds-segm {
    display: inline-flex; gap: 0;
    border: 1px solid var(--nd-line);
    border-radius: 7px; overflow: hidden;
}
.sds-segm-btn {
    padding: 7px 14px;
    background: transparent; border: 0;
    border-inline-start: 1px solid var(--nd-line);
    color: var(--nd-muted);
    font-size: 12px; font-family: inherit;
    cursor: pointer;
}
.sds-segm-btn:first-child { border-inline-start: 0; }
.sds-segm-btn.is-active {
    background: var(--nd-bg-2);
    color: var(--nd-ink);
    font-weight: 600;
}

.sds-vol {
    display: inline-block;
    padding: 3px 9px; border-radius: 5px;
    background: color-mix(in srgb, var(--nd-info) 14%, transparent);
    color: var(--nd-info); font-size: 12px;
    font-family: var(--nd-font-mono);
}

/* Info bar (competitors / backups) */
.sds-info-bar {
    display: flex; gap: 24px; justify-content: space-between;
    padding: 22px 0;
    border-top: 1px dashed var(--nd-line);
    border-bottom: 1px dashed var(--nd-line);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.sds-info-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--nd-ink);
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 6px;
}
.sds-info-title::before {
    content: "";
    width: 4px; height: 14px;
    background: var(--nd-accent);
    border-radius: 2px;
}
.sds-info-text {
    font-size: 12.5px; color: var(--nd-muted);
    line-height: 1.65; max-width: 720px;
}
.sds-info-meta {
    font-size: 11px; color: var(--nd-muted-2);
    margin-top: 12px; letter-spacing: .04em;
    text-transform: uppercase;
    font-family: var(--nd-font-mono);
}

.sds-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    align-content: flex-start; max-width: 240px;
}
.sds-chip-static {
    font-size: 11px; padding: 4px 9px;
    border: 1px solid var(--nd-line);
    border-radius: 99px;
    color: var(--nd-ink-2);
    background: var(--nd-bg-2);
}

/* Input row (competitors) */
.sds-input-row {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
}
.sds-input-row .flex,
.sds-input-row .sds-flex1 { flex: 1; min-width: 180px; }

/* Meta row (links) */
.sds-meta-row {
    display: flex; gap: 12px; align-items: center;
    font-size: 12px; color: var(--nd-muted);
    flex-wrap: wrap;
}
.sds-meta-row .sds-sep {
    width: auto; height: auto;
    border: 0; background: none; padding: 0;
    color: var(--nd-muted-2);
    font-family: inherit; font-size: inherit;
}

@media (max-width: 900px) {
    .sds-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .sds-kpi { padding: 0; border-inline-start: 0; }
    .sds-cwv-grid { grid-template-columns: repeat(2, 1fr); }
    .sds-cwv { border-inline-start: 0; }
    .sds-info-bar { flex-direction: column; }
    .sds-chip-row { max-width: 100%; }
}

/* ============================================================
   26. Site-scoped sidebar (replaces main sidebar on site-detail
   pages — back link, site card, grouped tab nav)
   ============================================================ */

.v1-side-scoped,
#rp-sidebar.rp-side-scoped {
    padding-top: 0;
}
.v1-side-scoped .v1-brand,
#rp-sidebar.rp-side-scoped .rp-sb-logo {
    margin-bottom: 0;
}
#rp-sidebar.rp-side-scoped .rp-sb-nav {
    padding-top: 12px;
}

.rp-side-scoped .rp-back,
.v1-back {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0;
    color: var(--nd-muted);
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer; font-family: inherit;
    margin: 0 0 14px;
    text-decoration: none;
}
.rp-side-scoped .rp-back:hover,
.v1-back:hover {
    color: var(--nd-ink);
    background: var(--nd-hover);
}
.rp-side-scoped .rp-back svg, .rp-side-scoped .rp-back .lucide,
.v1-back svg, .v1-back .lucide {
    width: 12px; height: 12px;
    transform: scaleX(-1);
}

.rp-site-card,
.v1-site-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--nd-line);
    padding-bottom: 16px;
}
.rp-site-brand,
.v1-site-brand {
    width: 32px; height: 32px; border-radius: 8px;
    display: grid; place-items: center;
    font-weight: 700; font-size: 13px; flex-shrink: 0;
    font-family: var(--nd-font-mono);
}
.rp-site-name,
.v1-site-name {
    font-size: 13.5px; font-weight: 600;
    color: var(--nd-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-site-url,
.v1-site-url {
    font-size: 11px; color: var(--nd-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--nd-font-mono);
    direction: ltr; text-align: start;
}

/* ============================================================
   27. Login / 2FA / Set-password / Forgot-password pages
   Editorial two-column shell ported from newdesign/components/login.jsx
   ============================================================ */

body.rp-login {
    overflow: auto;
    min-height: 100vh;
}
.login-page-bg { min-height: 100vh; background: var(--nd-bg); }
.login-page-wrapper { min-height: 100vh; display: flex; align-items: stretch; }
.login-page-wrapper > * { flex: 1; }

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--nd-bg);
    width: 100%;
}

/* Left column — brand + card + legal */
.login-left {
    padding: 48px 56px;
    display: flex; flex-direction: column;
    min-height: 100vh;
}
.login-brand {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 60px;
}
.login-brand .v1-brand-mark {
    font-family: var(--nd-font-mono);
    font-size: 22px; font-weight: 700;
    color: var(--nd-accent); letter-spacing: -.02em;
}
.login-brand .v1-brand-mark sup { font-size: 14px; }
.login-brand .v1-brand-name {
    font-size: 13px; letter-spacing: .22em;
    color: var(--nd-ink-2);
}
.login-brand .v1-brand-name strong { color: var(--nd-ink); font-weight: 700; }
.login-logo-wrap {
    margin-bottom: 28px;
    display: flex; align-items: center; gap: 10px;
}
.login-logo { height: 28px; width: auto; object-fit: contain; display: block; }

.login-card {
    max-width: 420px;
    margin: auto 0;
    width: 100%;
}
.login-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 11px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--nd-muted);
    margin-bottom: 14px;
}
.login-title,
.login-heading {
    margin: 0;
    font-size: 40px; font-weight: 700;
    letter-spacing: -.025em; line-height: 1.05;
    color: var(--nd-ink);
}
.login-sub,
.login-subheading {
    margin: 14px 0 32px;
    font-size: 15px; color: var(--nd-muted);
    line-height: 1.55; max-width: 400px;
}

.login-2fa-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--nd-accent) 14%, transparent);
    color: var(--nd-accent);
    margin-bottom: 18px;
}

.login-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--nd-err) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--nd-err) 40%, var(--nd-line));
    color: var(--nd-err);
    font-size: 13.5px;
}
.login-alert[hidden] { display: none; }
.login-alert.ok {
    background: color-mix(in srgb, var(--nd-ok) 12%, transparent);
    border-color: color-mix(in srgb, var(--nd-ok) 40%, var(--nd-line));
    color: var(--nd-ok);
}

.login-form { display: flex; flex-direction: column; gap: 18px; }
.login-field {
    display: flex; flex-direction: column; gap: 7px;
    font-size: 13px; color: var(--nd-ink-2);
}
.login-field-row {
    display: flex; justify-content: space-between;
    align-items: center;
}
.login-label {
    display: block;
    font-size: 13px; color: var(--nd-ink-2);
    margin-bottom: 2px;
}
.login-link-btn,
.login-link-sm {
    background: transparent; border: 0;
    color: var(--nd-info);
    font-size: 12.5px; padding: 0;
    font-family: inherit; cursor: pointer;
    text-decoration: none;
}
.login-link-btn:hover,
.login-link-sm:hover { text-decoration: underline; }

.login-input-wrap {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    color: var(--nd-muted);
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.login-input-wrap:focus-within {
    border-color: var(--nd-accent);
    background: var(--nd-bg-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-accent) 14%, transparent);
}
.login-input-wrap input,
.login-input-wrap .login-input {
    flex: 1;
    border: 0; background: transparent; outline: none;
    font-family: var(--nd-font-mono);
    font-size: 14px; color: var(--nd-ink);
    letter-spacing: .01em;
    min-width: 0;
}
.login-input-wrap input::placeholder,
.login-input-wrap .login-input::placeholder { color: var(--nd-muted-2); }
.login-input-icon { color: var(--nd-muted); width: 14px; height: 14px; }

.login-eye {
    background: transparent; border: 0;
    color: var(--nd-muted);
    width: 26px; height: 26px; border-radius: 6px;
    display: grid; place-items: center;
    cursor: pointer;
}
.login-eye:hover { background: var(--nd-hover); color: var(--nd-ink); }

.login-remember {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--nd-ink-2);
    user-select: none; cursor: pointer;
}
.login-remember input { accent-color: var(--nd-accent); margin: 0; }

.login-options {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: -4px;
}

.login-submit,
.login-btn {
    margin-top: 4px;
    padding: 14px 16px;
    border: 0; border-radius: 10px;
    background: var(--nd-accent); color: var(--nd-accent-ink);
    font-weight: 700; font-size: 14px;
    font-family: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: filter .12s ease, transform .12s ease;
    width: 100%;
}
.login-submit:hover:not(:disabled),
.login-btn:hover:not(:disabled) { filter: brightness(1.05); }
.login-submit:active,
.login-btn:active { transform: translateY(1px); }
.login-submit:disabled,
.login-btn:disabled { opacity: .7; cursor: wait; }

.login-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--nd-accent-ink) 30%, transparent);
    border-top-color: var(--nd-accent-ink);
    animation: sp .7s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }

.login-divider {
    height: 1px;
    background: var(--nd-line);
    margin: 18px 0 4px;
}

.login-foot,
.login-signup {
    font-size: 13px; color: var(--nd-muted);
    margin-top: 10px; text-align: center;
}
.login-foot a,
.login-foot .login-link-btn,
.login-signup .login-link {
    color: var(--nd-accent); font-weight: 600;
    text-decoration: none;
}
.login-foot a:hover,
.login-signup .login-link:hover { text-decoration: underline; }

.login-legal,
.login-footer {
    margin-top: auto; padding-top: 40px;
    display: flex; gap: 18px; align-items: center;
    font-size: 12px; color: var(--nd-muted);
    flex-wrap: wrap;
}
.login-legal a,
.login-footer a {
    color: var(--nd-muted); text-decoration: none;
    transition: color .12s;
}
.login-legal a:hover,
.login-footer a:hover { color: var(--nd-ink); }
.login-footer-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--nd-muted-2); display: inline-block;
}

/* OTP cells (2FA) */
.login-otp {
    width: 46px; height: 52px;
    padding: 0;
    border-radius: 10px;
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    color: var(--nd-ink);
    font-family: var(--nd-font-mono);
    font-size: 22px; font-weight: 600;
    text-align: center;
    outline: none;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.login-otp:focus {
    border-color: var(--nd-accent);
    background: var(--nd-bg-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-accent) 14%, transparent);
}
.login-otp-sep {
    display: inline-flex; align-items: center;
    color: var(--nd-muted-2);
    font-family: var(--nd-font-mono);
    font-size: 20px;
    padding: 0 4px;
    user-select: none;
}

/* Right column — decorative stage with mini-dashboard preview */
.login-right {
    background: var(--nd-bg-2);
    border-inline-start: 1px solid var(--nd-line);
    padding: 56px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    min-height: 100vh;
}
.login-right::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(var(--nd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nd-line) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .35; pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.login-stage { max-width: 480px; position: relative; z-index: 1; width: 100%; }
.login-right-eyebrow { color: var(--nd-ink-2); }
.login-right-title {
    margin: 0 0 14px;
    font-size: 38px; font-weight: 700;
    letter-spacing: -.025em; line-height: 1.1;
    color: var(--nd-ink);
}
.login-right-sub {
    margin: 0 0 32px;
    font-size: 15px; line-height: 1.55;
    color: var(--nd-muted);
}

.login-preview {
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}
.login-preview-head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: var(--nd-bg-2);
    border-bottom: 1px solid var(--nd-line);
    font-size: 12px; color: var(--nd-muted);
}
.login-preview-dots { display: inline-flex; gap: 5px; }
.login-preview-dots i {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--nd-line-2);
    display: block;
}
.login-preview-title {
    font-family: var(--nd-font-mono);
    font-size: 11.5px;
}
.login-preview-body {
    padding: 18px;
    display: flex; flex-direction: column; gap: 16px;
}

.login-mini-kpis {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.login-mini-kpis > div {
    padding: 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
}
.login-mini-kpis span {
    display: block;
    font-size: 11px; color: var(--nd-muted);
    margin-bottom: 4px;
}
.login-mini-kpis strong {
    font-family: var(--nd-font-mono);
    font-size: 22px; font-weight: 500;
    letter-spacing: -.02em;
    color: var(--nd-ink);
}

.login-mini-chart {
    padding: 10px 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
}

.login-mini-list { display: flex; flex-direction: column; gap: 6px; }
.login-mini-row {
    display: grid;
    grid-template-columns: auto 1fr auto; gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    font-size: 12.5px;
    color: var(--nd-ink-2);
}
.login-mini-dot { width: 7px; height: 7px; border-radius: 50%; }
.login-mini-row em {
    font-family: var(--nd-font-mono);
    font-size: 10.5px; font-style: normal;
    color: var(--nd-muted);
    letter-spacing: .05em;
}

/* Theme toggle floating in the top-left corner (inline-end in RTL) */
.login-theme-toggle-wrap {
    position: fixed;
    top: 18px;
    inset-inline-end: 18px;
    z-index: 40;
}
.login-theme-toggle {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--nd-line);
    background: var(--nd-bg-1);
    color: var(--nd-ink-2);
    border-radius: 10px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.login-theme-toggle:hover {
    background: var(--nd-hover);
    color: var(--nd-ink);
    border-color: var(--nd-line-2);
}
.login-theme-icon { width: 16px; height: 16px; }

/* Privacy consent banner */
.login-privacy-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    background: var(--nd-bg-1);
    border-top: 1px solid var(--nd-line);
    box-shadow: 0 -6px 20px rgba(0,0,0,.18);
    font-size: 13px;
    color: var(--nd-ink-2);
}
.login-privacy-accept {
    padding: 8px 16px;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    border: 0; border-radius: 8px;
    font-weight: 600; font-size: 12.5px;
    font-family: inherit; cursor: pointer;
    white-space: nowrap;
    transition: filter .12s;
}
.login-privacy-accept:hover { filter: brightness(1.05); }

/* Responsive: collapse to single column, hide the right preview */
@media (max-width: 980px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-right { display: none; }
    .login-left { padding: 32px 24px; }
    .login-brand { margin-bottom: 32px; }
    .login-title, .login-heading { font-size: 32px; }
    .login-theme-toggle-wrap { top: 12px; inset-inline-end: 12px; }
}

/* Tight mobile — compact OTP row */
@media (max-width: 480px) {
    .login-otp { width: 40px; height: 46px; font-size: 20px; }
    .login-legal, .login-footer { gap: 12px; }
}

/* ============================================================
   28. Signup / Register page
   Two-column editorial shell — mirrors login page. Native CSS only.
   ============================================================ */
.reg-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--nd-bg);
    color: var(--nd-ink);
    font-family: var(--nd-font-sans);
}

.reg-col-form {
    padding: 40px 56px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.reg-brand {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
    flex-shrink: 0;
}
.reg-logo-link { display: inline-flex; align-items: center; }
.reg-logo { height: 28px; width: auto; object-fit: contain; display: block; }

.reg-form-stage {
    max-width: 520px;
    width: 100%;
    margin: auto 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.reg-intro { margin-bottom: 22px; }
.reg-intro-title {
    margin: 0 0 6px;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--nd-ink);
}
.reg-intro-sub {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--nd-muted);
    line-height: 1.55;
}
.reg-have-account {
    margin: 0;
    font-size: 13px;
    color: var(--nd-muted);
}
.reg-have-account a { color: var(--nd-accent); font-weight: 600; }
.reg-have-account a:hover { text-decoration: underline; }

.reg-step-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 18px;
}
.reg-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nd-muted);
    white-space: nowrap;
}
.reg-step-progress {
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: var(--nd-line);
    overflow: hidden;
    min-width: 60px;
}
.reg-step-progress-fill {
    display: block;
    height: 100%;
    background: var(--nd-accent);
    transition: width .45s cubic-bezier(.4,0,.2,1);
}

.reg-h1 {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--nd-ink);
}
.reg-sub {
    margin: 0 0 22px;
    font-size: 13.5px;
    color: var(--nd-muted);
    line-height: 1.55;
    max-width: 440px;
}

.reg-form-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    animation: reg-fade .35s cubic-bezier(.4,0,.2,1) both;
}
@keyframes reg-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reg-shell .step { display: none; }
.reg-shell .step.active { display: block; animation: reg-fade .35s cubic-bezier(.4,0,.2,1) both; }
.reg-shell .hidden { display: none !important; }

.reg-fields { display: flex; flex-direction: column; gap: 16px; }
.reg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.reg-field { display: flex; flex-direction: column; gap: 7px; position: relative; }
.reg-field-label { font-size: 12.5px; color: var(--nd-ink-2); font-weight: 500; }
.reg-req { color: var(--nd-err); margin-inline-start: 2px; }

.reg-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.reg-input:focus-within {
    border-color: var(--nd-accent);
    background: var(--nd-bg-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-accent) 14%, transparent);
}
.reg-input > svg { color: var(--nd-muted); flex-shrink: 0; width: 15px; height: 15px; }
.reg-input input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    color: var(--nd-ink);
    font-family: inherit;
    font-size: 14px;
}
.reg-input input::placeholder { color: var(--nd-muted-2); }
.reg-hint { font-size: 11.5px; color: var(--nd-muted); margin-top: 2px; }

.reg-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--nd-ink-2);
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
}
.reg-check input {
    margin-top: 3px;
    accent-color: var(--nd-accent);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.reg-check a {
    color: var(--nd-accent);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--nd-accent) 40%, transparent);
    text-underline-offset: 2px;
}

/* Plan rows — editorial, not cards */
.reg-plan-list { display: flex; flex-direction: column; gap: 10px; }
.reg-plan-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: var(--nd-bg-2);
    border: 1.5px solid var(--nd-line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    font-family: inherit;
    color: var(--nd-ink);
    text-align: start;
    width: 100%;
    position: relative;
}
.reg-plan-row:hover { border-color: var(--nd-line-2); }
.reg-plan-row.is-selected {
    border-color: var(--nd-accent);
    background: color-mix(in srgb, var(--nd-accent) 7%, var(--nd-bg-2));
}
.reg-plan-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--nd-line-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color .15s ease, background .15s ease;
}
.reg-plan-row.is-selected .reg-plan-radio {
    border-color: var(--nd-accent);
    background: var(--nd-accent);
}
.reg-plan-radio-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nd-accent-ink); display: none; }
.reg-plan-row.is-selected .reg-plan-radio-dot { display: block; }
.reg-plan-row-body { flex: 1; min-width: 0; }
.reg-plan-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reg-plan-row-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--nd-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.reg-plan-tag {
    font-family: var(--nd-font-mono);
    font-size: 9.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nd-accent-ink);
    background: var(--nd-accent);
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
}
.reg-plan-row-cadence { font-size: 12px; color: var(--nd-muted); margin-top: 2px; }
.reg-plan-row-price { text-align: end; white-space: nowrap; }
.reg-plan-row-price strong {
    font-family: var(--nd-font-mono);
    font-size: 20px;
    font-weight: 600;
    color: var(--nd-ink);
    letter-spacing: -.01em;
}
.reg-plan-row-price span { display: block; font-size: 11px; color: var(--nd-muted); margin-top: 2px; }
.reg-plan-features {
    list-style: none;
    padding: 10px 0 0;
    margin: 10px 0 0;
    border-top: 1px dashed var(--nd-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.reg-plan-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--nd-ink-2);
}
.reg-plan-features svg { color: var(--nd-ok); flex-shrink: 0; width: 14px; height: 14px; }

/* Actions — prev/next row */
.reg-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--nd-line);
}
.reg-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .12s ease, transform .1s ease, opacity .12s ease;
}
.reg-btn-primary:hover:not(:disabled) { filter: brightness(1.05); }
.reg-btn-primary:active:not(:disabled) { transform: translateY(1px); }
.reg-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.reg-btn-primary svg { width: 14px; height: 14px; }

.reg-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    background: var(--nd-bg-2);
    color: var(--nd-ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.reg-btn-secondary:hover:not(:disabled) {
    background: var(--nd-bg-3);
    color: var(--nd-ink);
    border-color: var(--nd-line-2);
}
.reg-btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.reg-btn-secondary svg { width: 14px; height: 14px; }

.reg-error {
    background: color-mix(in srgb, var(--nd-err) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nd-err) 40%, transparent);
    color: var(--nd-err);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin: 0 0 14px;
    text-align: center;
}

.reg-legal {
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    gap: 18px;
    font-size: 12px;
    color: var(--nd-muted);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
}
.reg-legal a { color: var(--nd-muted); transition: color .12s ease; }
.reg-legal a:hover { color: var(--nd-ink); }
.reg-legal-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--nd-muted-2); display: inline-block; }

/* RIGHT column */
.reg-col-side {
    background: var(--nd-bg-2);
    border-inline-start: 1px solid var(--nd-line);
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}
.reg-col-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--nd-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--nd-line) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .35;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.reg-side-stage {
    max-width: 560px;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}
.reg-side-eyebrow { display: block; margin-bottom: 12px; color: var(--nd-ink-2); }
.reg-side-title {
    margin: 0 0 10px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: var(--nd-ink);
}
.reg-side-sub {
    margin: 0 0 28px;
    font-size: 13.5px;
    color: var(--nd-muted);
    line-height: 1.6;
}

/* Horizontal timeline */
.reg-timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
}
.reg-tl-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
    min-width: 0;
}
.reg-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 13px;
    inset-inline-start: calc(50% + 18px);
    inset-inline-end: calc(-50% + 18px);
    height: 2px;
    background: var(--nd-line);
}
.reg-tl-item.is-done:not(:last-child)::before { background: var(--nd-accent); }
.reg-tl-dot {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nd-bg-1);
    border: 1.5px solid var(--nd-line);
    color: var(--nd-muted);
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}
.reg-tl-dot svg { width: 12px; height: 12px; display: none; }
.reg-tl-num { line-height: 1; }
.reg-tl-item.is-done .reg-tl-dot {
    background: var(--nd-accent);
    border-color: var(--nd-accent);
    color: var(--nd-accent-ink);
}
.reg-tl-item.is-done .reg-tl-dot svg { display: block; }
.reg-tl-item.is-done .reg-tl-num { display: none; }
.reg-tl-item.is-current .reg-tl-dot {
    background: var(--nd-bg-1);
    border-color: var(--nd-accent);
    color: var(--nd-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nd-accent) 18%, transparent);
}
.reg-tl-text { min-width: 0; width: 100%; }
.reg-tl-label {
    font-size: 12px;
    color: var(--nd-ink-2);
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reg-tl-item.is-current .reg-tl-label { color: var(--nd-ink); font-weight: 600; }
.reg-tl-item.is-done .reg-tl-label { color: var(--nd-muted); }

/* Per-step contextual preview cards on the right column.
   Only one is visible at a time (switched via .is-active on data-preview). */
.reg-preview {
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.2);
}
.reg-preview[data-preview] { display: none; }
.reg-preview[data-preview].is-active {
    display: block;
    animation: reg-fade .35s cubic-bezier(.4,0,.2,1) both;
}

/* ── Preview: scan (step 1) ── */
.reg-pv-scan { display: flex; flex-direction: column; gap: 14px; }
.reg-pv-url {
    font-family: var(--nd-font-mono); font-size: 12px; color: var(--nd-ink-2);
    background: var(--nd-bg-2); border: 1px solid var(--nd-line);
    border-radius: 8px; padding: 8px 10px;
    direction: ltr; text-align: start;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-pv-bars { display: flex; flex-direction: column; gap: 8px; }
.reg-pv-bar {
    display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 10px;
}
.reg-pv-bar-label {
    font-family: var(--nd-font-mono); font-size: 10.5px; color: var(--nd-muted);
    letter-spacing: .08em;
}
.reg-pv-bar-track {
    height: 6px; border-radius: 4px; background: var(--nd-bg-2);
    overflow: hidden;
}
.reg-pv-bar-fill {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--nd-accent), color-mix(in srgb, var(--nd-accent) 70%, var(--nd-ok)));
    border-radius: 4px;
}
.reg-pv-bar-val {
    font-family: var(--nd-font-mono); font-size: 11px; color: var(--nd-ink-2);
    text-align: end;
}
.reg-pv-scan-foot {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--nd-muted);
    border-top: 1px solid var(--nd-line); padding-top: 12px;
}
.reg-pv-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }

/* ── Preview: plan summary (step 2) ── */
.reg-pv-plan { display: flex; flex-direction: column; gap: 14px; }
.reg-pv-plan-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.reg-pv-plan-name { font-size: 17px; font-weight: 700; color: var(--nd-ink); }
.reg-pv-plan-cadence { font-size: 12px; color: var(--nd-muted); margin-top: 2px; }
.reg-pv-plan-price { text-align: end; white-space: nowrap; }
.reg-pv-plan-price strong {
    font-family: var(--nd-font-mono); font-size: 22px; font-weight: 600;
    color: var(--nd-accent); letter-spacing: -.01em;
}
.reg-pv-plan-price span {
    display: block; font-size: 11px; color: var(--nd-muted); margin-top: 2px;
}
.reg-pv-plan-features {
    list-style: none; padding: 12px 0 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid var(--nd-line);
}
.reg-pv-plan-features li {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; color: var(--nd-ink-2);
}
.reg-pv-plan-features svg {
    color: var(--nd-ok); flex-shrink: 0; width: 14px; height: 14px;
}

/* ── Preview: account (step 3) ── */
.reg-pv-account { display: flex; gap: 14px; align-items: center; }
.reg-pv-avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--nd-accent); color: var(--nd-accent-ink);
    display: grid; place-items: center;
    font-weight: 700; font-size: 16px;
    flex-shrink: 0;
}
.reg-pv-account-text { min-width: 0; flex: 1; }
.reg-pv-account-name { font-size: 14px; font-weight: 600; color: var(--nd-ink); }
.reg-pv-account-email {
    font-family: var(--nd-font-mono); font-size: 11.5px; color: var(--nd-muted);
    margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    direction: ltr; text-align: start;
}
.reg-pv-account-phone {
    font-family: var(--nd-font-mono); font-size: 11.5px; color: var(--nd-muted);
    margin-top: 2px;
}
.reg-pv-note {
    display: flex; align-items: center; gap: 8px;
    font-size: 11.5px; color: var(--nd-muted);
    border-top: 1px solid var(--nd-line);
    padding-top: 12px; margin-top: 12px;
}
.reg-pv-note svg {
    color: var(--nd-ok); flex-shrink: 0; width: 13px; height: 13px;
}

/* ── Preview: invoice (step 4) ── */
.reg-pv-invoice { display: flex; flex-direction: column; gap: 10px; }
.reg-pv-inv-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 12.5px;
}
.reg-pv-inv-row span { color: var(--nd-muted); }
.reg-pv-inv-row strong {
    font-weight: 600; color: var(--nd-ink-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 60%;
}
.reg-pv-inv-sep { height: 1px; background: var(--nd-line); margin: 4px 0; }

/* ── Preview: order (step 5) ── */
.reg-pv-order { display: flex; flex-direction: column; gap: 12px; }
.reg-pv-order-line {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; color: var(--nd-ink-2);
}
.reg-pv-order-line strong { font-family: var(--nd-font-mono); font-weight: 600; }
.reg-pv-order-line-muted { color: var(--nd-muted); }
.reg-pv-order-line-muted strong { color: var(--nd-muted); }
.reg-pv-order-total {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 14px; color: var(--nd-ink); font-weight: 600;
}
.reg-pv-order-total strong {
    font-family: var(--nd-font-mono); font-size: 22px; color: var(--nd-accent);
    letter-spacing: -.01em;
}
.reg-preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--nd-line);
    background: var(--nd-bg-2);
    font-size: 11.5px;
    color: var(--nd-muted);
    font-family: var(--nd-font-mono);
}
.reg-preview-dots { display: inline-flex; gap: 5px; }
.reg-preview-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--nd-line-2); display: block; }
.reg-preview-body { padding: 16px; }
.reg-preview-list { display: flex; flex-direction: column; gap: 10px; }
.reg-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--nd-ink-2);
}
.reg-preview-row svg { color: var(--nd-ok); width: 14px; height: 14px; flex-shrink: 0; }

/* Payment step — PayPlus hosted fields.
   PayPlus copies the <span>'s classes onto the iframe it creates, so the same
   .reg-hosted-field rule styles both the pre-init span and the final iframe.
   Iframe html + body are made transparent via SetHostedFieldsStyles, so the
   iframe element's dark background paints behind the input. */
.reg-hosted-field {
    display: block;
    width: 100%;
    height: 44px;
    padding: 10px 14px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.reg-hosted-field:focus-within {
    border-color: var(--nd-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-accent) 14%, transparent);
}

.hosted-fld-feidl_ctrl .hf-inp-name-cc {
    background: var(--nd-bg-2);
}

.reg-pay-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.reg-pay-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--nd-font-mono);
    font-size: 10.5px;
    color: var(--nd-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 8px;
    flex-wrap: wrap;
}
.reg-pay-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.reg-pay-trust-item svg { color: var(--nd-ok); width: 13px; height: 13px; }
.reg-pay-trust-sep { color: var(--nd-muted-2); }

/* Thank-you state */
.reg-thankyou {
    text-align: center;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.reg-thankyou-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--nd-ok) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--nd-ok) 40%, transparent);
    display: grid;
    place-items: center;
    color: var(--nd-ok);
}
.reg-thankyou-icon svg { width: 32px; height: 32px; }
.reg-thankyou-box {
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--nd-ink-2);
    font-size: 13.5px;
    max-width: 440px;
}
.reg-thankyou-box strong { color: var(--nd-ink); }

/* Google Places autocomplete dropdown */
.reg-autocomplete-dropdown {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--nd-bg-1);
    border: 1px solid var(--nd-line);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
    max-height: 240px;
    overflow-y: auto;
    z-index: 50;
    text-align: right;
}
.reg-autocomplete-item {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--nd-ink);
    font-size: 13px;
    border-bottom: 1px solid var(--nd-line);
    transition: background .1s ease;
}
.reg-autocomplete-item:last-child { border-bottom: none; }
.reg-autocomplete-item:hover { background: var(--nd-hover); }

/* Skip link */
.reg-skip-link {
    position: absolute;
    top: -40px;
    inset-inline-start: 0;
    background: var(--nd-accent);
    color: var(--nd-accent-ink);
    padding: 8px 16px;
    z-index: 100;
    transition: top .3s;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
}
.reg-skip-link:focus { top: 0; }

/* Spinner */
@keyframes reg-spin { to { transform: rotate(360deg); } }
.reg-spin { animation: reg-spin .6s linear infinite; }
.reg-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--nd-accent-ink) 30%, transparent);
    border-top-color: var(--nd-accent-ink);
    animation: reg-spin .6s linear infinite;
    display: inline-block;
}

@media (max-width: 980px) {
    .reg-shell { grid-template-columns: 1fr; }
    .reg-col-side { display: none; }
    .reg-col-form { padding: 28px 20px; min-height: 100vh; }
    .reg-intro-title { font-size: 28px; }
    .reg-pay-row { grid-template-columns: 1fr; }
    .reg-grid-2 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────
   Latest Articles widget (dashboard)
   ───────────────────────────────────────────── */
.rp-hidden { display: none !important; }

.rp-articles-widget { margin-top: 4px; }

.rp-articles-skeleton { display: flex; flex-direction: column; gap: 10px; }
.rp-skeleton-item {
    display: flex; gap: 12px; padding: 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    animation: rp-skel-pulse 1.5s ease-in-out infinite;
}
.rp-skeleton-image {
    width: 64px; height: 48px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(90deg, var(--nd-bg-3) 25%, var(--nd-line) 50%, var(--nd-bg-3) 75%);
    background-size: 200% 100%;
    animation: rp-skel-shimmer 1.5s infinite;
}
.rp-skeleton-content { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.rp-skeleton-title, .rp-skeleton-date {
    height: 14px; border-radius: 4px; width: 85%;
    background: linear-gradient(90deg, var(--nd-bg-3) 25%, var(--nd-line) 50%, var(--nd-bg-3) 75%);
    background-size: 200% 100%;
    animation: rp-skel-shimmer 1.5s infinite;
}
.rp-skeleton-date { height: 10px; width: 40%; }

@keyframes rp-skel-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes rp-skel-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.rp-articles-list { display: flex; flex-direction: column; gap: 8px; }

.rp-article-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    animation: rp-fade-up .3s ease forwards;
    opacity: 0;
}
.rp-article-card:hover {
    border-color: var(--nd-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
}

@keyframes rp-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rp-article-image {
    width: 64px; height: 48px;
    border-radius: 8px; overflow: hidden; flex-shrink: 0;
    background: linear-gradient(135deg, #0d4f6e 0%, #0a6b8a 100%);
}
.rp-article-image img { width: 100%; height: 100%; object-fit: cover; }
.rp-article-image.rp-no-image {
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}
.rp-article-image.rp-no-image svg { width: 20px; height: 20px; }

.rp-article-info { flex: 1; min-width: 0; }
.rp-article-title {
    font-size: 13px; font-weight: 600;
    color: var(--nd-ink);
    margin: 0 0 4px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rp-article-card:hover .rp-article-title { color: var(--nd-accent); }
.rp-article-date {
    font-size: 11px;
    color: var(--nd-muted);
    display: flex; align-items: center; gap: 4px;
}
.rp-article-date svg { width: 12px; height: 12px; }

.rp-article-arrow { color: var(--nd-muted-2); transition: color .2s, transform .2s; }
.rp-article-arrow svg { width: 16px; height: 16px; }
.rp-article-card:hover .rp-article-arrow {
    color: var(--nd-accent);
    transform: translateX(-4px);
}

.rp-view-all-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px;
    padding: 12px;
    background: var(--nd-ink);
    color: var(--nd-bg) !important;
    border-radius: 10px;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.rp-view-all-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.rp-view-all-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.rp-view-all-btn:hover svg { transform: translateX(-4px); }

.rp-articles-error { text-align: center; padding: 32px 16px; }
.rp-error-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    background: color-mix(in srgb, var(--nd-err) 18%, transparent);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--nd-err);
}
.rp-error-icon svg { width: 24px; height: 24px; }
.rp-error-title { font-size: 14px; font-weight: 600; color: var(--nd-ink); margin: 0 0 4px 0; }
.rp-error-subtitle { font-size: 12px; color: var(--nd-muted); margin: 0 0 16px 0; }

.rp-retry-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: var(--nd-ink);
    color: var(--nd-bg);
    border: none;
    border-radius: 8px;
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.rp-retry-btn:hover {
    filter: brightness(0.9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.rp-retry-btn svg { width: 14px; height: 14px; }
.rp-retry-btn.rp-spinning svg { animation: rp-spin .5s linear infinite; }
@keyframes rp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ───────────────────────────────────────────────────
   Saved payment methods (rp-pm-*)
   ─────────────────────────────────────────────────── */
.rp-pm-list { display: flex; flex-direction: column; gap: 12px; }
.rp-pm-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    background: var(--rp-bg);
    transition: border-color .15s ease;
}
.rp-pm-row:hover { border-color: var(--rp-line-2, var(--rp-line)); }
.rp-pm-row.is-default { border-color: var(--rp-sky, #965215); background: var(--rp-sky-bg, transparent); }

.rp-pm-brand {
    width: 48px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: var(--rp-raise);
    font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: var(--rp-t1);
    text-transform: uppercase;
}
.rp-pm-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rp-pm-card-line { font-weight: 600; color: var(--rp-t1); font-size: 14px; direction: ltr; text-align: left; }
.rp-pm-card-line strong { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; }
.rp-pm-meta { font-size: 12px; color: var(--rp-t2); }

.rp-pm-actions { display: flex; gap: 8px; align-items: center; }
.rp-pm-default-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px;
    background: var(--rp-sky-bg);
    color: var(--rp-sky);
    font-size: 11px; font-weight: 700;
    border-radius: 999px;
    border: 1px solid var(--rp-sky);
}

.rp-pm-empty {
    padding: 32px;
    text-align: center;
    border: 1px dashed var(--rp-line);
    border-radius: 12px;
    color: var(--rp-t2);
}
.rp-pm-empty strong { color: var(--rp-t1); display: block; margin-bottom: 4px; font-size: 15px; }

/* Modal — used by both saved-card add and the add-site payment step */
.rp-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.rp-modal-backdrop[hidden] { display: none; }
.rp-modal {
    background: var(--rp-bg);
    border: 1px solid var(--rp-line);
    border-radius: 16px;
    width: 100%; max-width: 460px;
    max-height: 90vh; overflow: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.rp-modal-head {
    padding: 18px 22px;
    border-bottom: 1px solid var(--rp-line);
    display: flex; align-items: center; justify-content: space-between;
}
.rp-modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--rp-t1); }
.rp-modal-close {
    background: transparent; border: 0; color: var(--rp-t2);
    cursor: pointer; padding: 4px; border-radius: 6px;
}
.rp-modal-close:hover { background: var(--rp-raise); color: var(--rp-t1); }
.rp-modal-body { padding: 20px 22px; }
.rp-modal-foot {
    padding: 14px 22px; border-top: 1px solid var(--rp-line);
    display: flex; gap: 10px; justify-content: flex-end;
}

/* ───────────────────────────────────────────────────
   Wizard stepper + plan picker (rp-wiz-* / rp-plan-*)
   Dashboard-native version of the marketing reg-* flow.
   ─────────────────────────────────────────────────── */
.rp-wiz-card { padding: 0; overflow: hidden; }
.rp-wiz-stepper {
    display: grid;
    grid-template-columns: repeat(var(--rp-wiz-steps, 3), 1fr);
    border-bottom: 1px solid var(--rp-line);
    background: var(--rp-raise);
}
.rp-wiz-step {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-inline-end: 1px solid var(--rp-line);
    color: var(--nd-muted);
    font-size: 12.5px;
}
.rp-wiz-step:last-child { border-inline-end: 0; }
.rp-wiz-step-num {
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--rp-bg);
    border: 1px solid var(--rp-line);
    color: var(--nd-muted);
    font-size: 12px; font-weight: 700;
}
.rp-wiz-step.is-current { color: var(--nd-ink); }
.rp-wiz-step.is-current .rp-wiz-step-num {
    background: var(--rp-sky, #965215);
    border-color: var(--rp-sky, #965215);
    color: #f1eee5;
}
.rp-wiz-step.is-done { color: var(--nd-ink-2); }
.rp-wiz-step.is-done .rp-wiz-step-num {
    background: color-mix(in srgb, var(--rp-sky, #965215) 18%, transparent);
    border-color: color-mix(in srgb, var(--rp-sky, #965215) 35%, transparent);
    color: var(--rp-sky, #965215);
}
.rp-wiz-step-label { font-weight: 600; }
.rp-wiz-body { padding: 24px; min-height: 280px; }
.rp-wiz-body .step { display: none; }
.rp-wiz-body .step.is-active { display: block; animation: rp-wiz-fade .25s ease both; }
@keyframes rp-wiz-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.rp-wiz-step-title {
    font-size: 17px; font-weight: 700; color: var(--nd-ink); margin: 0 0 4px;
}
.rp-wiz-step-sub {
    font-size: 13px; color: var(--nd-muted); margin: 0 0 18px;
}
.rp-wiz-foot {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 14px 24px; border-top: 1px solid var(--rp-line);
    background: var(--rp-raise);
}
.rp-wiz-foot-right { display: flex; gap: 8px; }

/* Form rows used inside the wizard */
.rp-form-grid { display: grid; gap: 14px; }
.rp-form-grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .rp-form-grid-2 { grid-template-columns: 1fr; } }
.rp-form-row { display: flex; flex-direction: column; gap: 6px; }

/* Plan picker — dashboard-style cards instead of the marketing reg-plan-row */
.rp-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.rp-plan-card {
    text-align: right;
    padding: 16px;
    border: 1px solid var(--rp-line);
    border-radius: 12px;
    background: var(--rp-bg);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color .12s, transform .12s;
    position: relative;
}
.rp-plan-card:hover { border-color: var(--nd-line-2, var(--rp-line)); }
.rp-plan-card.is-selected {
    border-color: var(--rp-sky, #965215);
    box-shadow: 0 0 0 1px var(--rp-sky, #965215) inset;
}
.rp-plan-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.rp-plan-card-name { font-weight: 700; color: var(--nd-ink); font-size: 15px; }
.rp-plan-card-tag {
    display: inline-block; margin-inline-start: 6px;
    padding: 2px 8px; border-radius: 999px;
    background: var(--rp-sky-bg, transparent); color: var(--rp-sky, #965215);
    font-size: 10.5px; font-weight: 700;
}
.rp-plan-card-price { display: flex; flex-direction: column; align-items: flex-end; }
.rp-plan-card-price strong { font-size: 18px; color: var(--nd-ink); font-weight: 700; }
.rp-plan-card-price span  { font-size: 11px; color: var(--nd-muted); }
.rp-plan-card-cadence { font-size: 12px; color: var(--nd-muted); }
.rp-plan-card-features {
    list-style: none; padding: 0; margin: 6px 0 0;
    display: flex; flex-direction: column; gap: 4px;
}
.rp-plan-card-features li {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--nd-ink-2);
}
.rp-plan-card-features li svg { width: 12px; height: 12px; color: var(--rp-sky, #965215); flex-shrink: 0; }

/* Full-viewport wizard layout — used by /sites/add/. The page itself never
   scrolls; only the form column scrolls internally when a step's content
   overflows. The 2-column reg-shell is reused so the visuals match the
   public /signup/ wizard, but it's embedded inside the dashboard chrome
   (sidebar + topbar) instead of taking over the full window. */
body:has(#page-add-site.rp-wiz-page) #rp-main { overflow: hidden; }
body:has(#page-add-site.rp-wiz-page) #rp-page { min-height: 0; }
body:has(#page-add-site.rp-wiz-page) .rp-page-inner {
    padding: 0;
    height: calc(100vh - var(--rp-tb-h, 60px));
    display: flex;
    min-height: 0;
}
.rp-wiz-page { flex: 1; display: flex; min-height: 0; }

/* Reuse the marketing 2-column shell, but adapted to fit the embed. */
.rp-wiz-page .reg-shell.reg-shell--embedded {
    flex: 1;
    min-height: 0;
    height: 100%;
    /* override the default `min-height: 100vh` from .reg-shell */
}
.rp-wiz-page .reg-shell.reg-shell--embedded .reg-col-form {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding: 32px 40px;
}
.rp-wiz-page .reg-shell.reg-shell--embedded .reg-col-side {
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Mobile / older browsers without :has — fall back to a sensible viewport
   height on the wizard wrapper directly. */
@supports not selector(html:has(*)) {
    .rp-wiz-page { height: calc(100vh - var(--rp-tb-h, 60px)); }
}
@media (max-width: 1024px) {
    body:has(#page-add-site.rp-wiz-page) #rp-main { overflow: auto; }
    body:has(#page-add-site.rp-wiz-page) .rp-page-inner { height: auto; }
    .rp-wiz-page .reg-shell.reg-shell--embedded .reg-col-form { overflow: visible; }
}

/* ───────────────────────────────────────────────────
   Compact plan grid for the add-site wizard.
   The marketing reg-plan-row stretches vertically when squeezed into the
   embedded form column; this auto-fit grid keeps cards readable side-by-side.
   ─────────────────────────────────────────────────── */
.reg-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    align-items: stretch;
}
.reg-plan-card {
    position: relative;
    text-align: right;
    padding: 16px;
    border: 1px solid var(--nd-line);
    border-radius: 12px;
    background: var(--nd-bg-2);
    color: var(--nd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.reg-plan-card:hover {
    border-color: var(--nd-line-2, var(--nd-line));
}
.reg-plan-card.is-selected {
    border-color: var(--nd-accent, #965215);
    box-shadow: 0 0 0 1px var(--nd-accent, #965215) inset;
}
.reg-plan-card-flag {
    position: absolute;
    inset-block-start: -10px;
    inset-inline-start: 12px;
    background: var(--nd-accent, #965215);
    color: #f1eee5;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.reg-plan-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--nd-ink);
}
.reg-plan-card-cadence {
    font-size: 12px;
    color: var(--nd-muted);
}
.reg-plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-block: 2px 4px;
}
.reg-plan-card-price strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--nd-ink);
    line-height: 1;
}
.reg-plan-card-price span {
    font-size: 12px;
    color: var(--nd-muted);
}
.reg-plan-card-features {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.reg-plan-card-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--nd-ink-2, var(--nd-ink));
}
.reg-plan-card-features li svg {
    width: 12px;
    height: 12px;
    color: var(--nd-accent, #965215);
    flex-shrink: 0;
}
.reg-plan-card-features li.reg-plan-card-more {
    color: var(--nd-muted);
    font-size: 11.5px;
    margin-top: 2px;
}

/* ============================================================
   Add-site wizard — centered single-column layout (/sites/add/)
   Top eyebrow row + horizontal stepper, centered stage, sticky
   footer actions. Step 3 splits the stage into summary + form.
   ============================================================ */
.rp-wiz-page--center {
    flex: 1;
    display: flex;
    min-height: 0;
    background: var(--nd-bg);
    color: var(--nd-ink);
}

.addsite-shell {
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 28px clamp(16px, 2.5vw, 40px) 0;
    box-sizing: border-box;
}

.addsite-top {
    flex-shrink: 0;
    width: 100%;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--nd-line);
}

.addsite-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 30px;
}
.addsite-eyebrow {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--nd-muted);
}
.addsite-step-counter {
    font-family: var(--nd-font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--nd-muted);
}

/* Horizontal stepper */
.addsite-stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.addsite-stepper:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, 1fr);
}

.addsite-admin-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 24px;
    border-radius: 12px;
    border: 1px solid var(--nd-line);
    background: color-mix(in srgb, var(--nd-accent, #ffb13a) 12%, transparent);
    color: var(--nd-ink);
    font-size: 13px;
    font-weight: 500;
}
.addsite-admin-banner svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.addsite-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 12px;
    min-width: 0;
    color: var(--nd-muted);
    font-size: 13.5px;
    font-weight: 500;
    transition: color .2s ease;
}

.addsite-step-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}
.addsite-step.is-current .addsite-step-label { color: var(--nd-ink); font-weight: 600; }
.addsite-step.is-done .addsite-step-label { color: var(--nd-ink-2); }

.addsite-step-dot {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--nd-bg);
    border: 1.5px solid var(--nd-line);
    color: var(--nd-muted);
    font-family: var(--nd-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    position: relative;
    z-index: 1;
}
.addsite-step-dot svg { width: 13px; height: 13px; display: none; }
.addsite-step-num { line-height: 1; }
.addsite-step.is-done .addsite-step-dot {
    background: var(--nd-accent);
    border-color: var(--nd-accent);
    color: var(--nd-accent-ink);
}
.addsite-step.is-done .addsite-step-dot svg { display: block; }
.addsite-step.is-done .addsite-step-num { display: none; }
.addsite-step.is-current .addsite-step-dot {
    background: var(--nd-bg);
    border-color: var(--nd-accent);
    color: var(--nd-accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--nd-accent) 18%, transparent);
}

/* Centered stage — title/subtitle/fields centered in a narrower column,
   while stepper and footer actions stretch to the shell's full width. */
.addsite-stage {
    flex: 1;
    display: block;
    padding: 36px 0 24px;
    min-height: 0;
}
.addsite-form-stage {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: block;
}
/* Per-step width overrides: plan cards need more room, payment split
   needs full width for the summary + form columns. */
.addsite-form-stage:has(#addStep2.active) { max-width: 1000px; }
.addsite-form-stage:has(#addStep3.active) { max-width: none; }
.addsite-form-stage .step { display: none; }
.addsite-form-stage .step.active {
    display: block;
    animation: reg-fade .35s cubic-bezier(.4,0,.2,1) both;
}
.addsite-form-stage .hidden { display: none !important; }

.addsite-h1 {
    margin: 0 0 8px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--nd-ink);
    text-align: center;
}
.addsite-sub {
    margin: 0 auto 28px;
    font-size: 14px;
    color: var(--nd-muted);
    line-height: 1.55;
    max-width: 540px;
    text-align: center;
}

.addsite-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Plan grid — 2 large cards side by side */
.addsite-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    width: 100%;
    margin: 8px 0 0;
    align-items: stretch;
}
.addsite-plan-card {
    position: relative;
    text-align: right;
    padding: 22px 22px 20px;
    border: 1.5px solid var(--nd-line);
    border-radius: 14px;
    background: var(--nd-bg-2);
    color: var(--nd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.addsite-plan-card:hover {
    border-color: var(--nd-line-2, var(--nd-line));
}
.addsite-plan-card.is-selected {
    border-color: var(--nd-accent);
    box-shadow: 0 0 0 1px var(--nd-accent) inset, 0 0 0 4px color-mix(in srgb, var(--nd-accent) 14%, transparent);
}
.addsite-plan-check {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--nd-line-2, var(--nd-line));
    background: var(--nd-bg);
    display: grid;
    place-items: center;
    color: transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.addsite-plan-check svg { width: 12px; height: 12px; }
.addsite-plan-card.is-selected .addsite-plan-check {
    background: var(--nd-accent);
    border-color: var(--nd-accent);
    color: var(--nd-accent-ink);
}
.addsite-plan-flag {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 48px;
    background: color-mix(in srgb, var(--nd-accent) 22%, transparent);
    color: var(--nd-accent);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.addsite-plan-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-inline-end: 36px;
}
.addsite-plan-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--nd-ink);
}
.addsite-plan-card-cadence {
    font-size: 12.5px;
    color: var(--nd-muted);
}
.addsite-plan-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nd-line);
}
.addsite-plan-card-price strong {
    font-size: 30px;
    font-weight: 700;
    color: var(--nd-ink);
    line-height: 1;
    letter-spacing: -.02em;
}
.addsite-plan-card-price span {
    font-size: 13px;
    color: var(--nd-muted);
}
.addsite-plan-card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.addsite-plan-card-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--nd-ink-2, var(--nd-ink));
}
.addsite-plan-card-features li svg {
    width: 14px;
    height: 14px;
    color: var(--nd-accent);
    flex-shrink: 0;
}

/* Step 3: split — summary aside (visually left in RTL) + form (right) */
.addsite-pay-split {
    display: grid;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
    gap: 32px;
    width: 100%;
    margin: 0;
    align-items: start;
}
/* In RTL, the source-first child renders on the visual right. We want the
   summary on the visual left and the form on the visual right, so the form
   comes first in source. Override here by explicit ordering. */
.addsite-pay-split .addsite-summary { order: 2; }
.addsite-pay-split .addsite-pay-form { order: 1; }

.addsite-summary {
    background: var(--nd-bg-2);
    border: 1px solid var(--nd-line);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 8px;
}
.addsite-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--nd-ink-2, var(--nd-ink));
    letter-spacing: .02em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nd-line);
}
.addsite-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13.5px;
    color: var(--nd-ink-2, var(--nd-ink));
}
.addsite-summary-row strong {
    font-weight: 600;
    color: var(--nd-ink);
}
.addsite-summary-row--muted { color: var(--nd-muted); }
.addsite-summary-row--muted strong { color: var(--nd-muted); }
.addsite-summary-sep { height: 1px; background: var(--nd-line); }
.addsite-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.addsite-summary-total span {
    font-size: 13px;
    color: var(--nd-muted);
}
.addsite-summary-total strong {
    font-family: var(--nd-font-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--nd-ink);
    letter-spacing: -.01em;
}
.addsite-summary-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--nd-muted);
    border-top: 1px solid var(--nd-line);
    padding-top: 12px;
}
.addsite-summary-note svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--nd-muted); }

.addsite-pay-form .addsite-fields { max-width: none; }
.addsite-pay-form .reg-pay-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 480px) {
    .addsite-pay-form .reg-pay-row { grid-template-columns: 1fr; }
}
.addsite-savecard { padding-top: 4px; }

/* Footer actions — primary on the inline-end (visual left in RTL),
   cancel/back on the inline-start (visual right in RTL). */
.addsite-actions {
    flex-shrink: 0;
    width: 100%;
    padding: 18px 0 24px;
    border-top: 1px solid var(--nd-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--nd-bg);
    position: sticky;
    bottom: 0;
}
.addsite-actions .reg-btn-primary,
.addsite-actions .reg-btn-secondary { min-height: 42px; }

@media (max-width: 820px) {
    .addsite-pay-split { grid-template-columns: 1fr; }
    .addsite-pay-split .addsite-summary { order: 0; position: static; }
    .addsite-pay-split .addsite-pay-form { order: 1; }
    .addsite-step-label { display: none; }
    .addsite-step { gap: 0; }
    .addsite-stepper { gap: 6px; }
}
@media (max-width: 560px) {
    .addsite-shell { padding: 20px 16px 0; }
    .addsite-h1 { font-size: 24px; }
    .addsite-actions { padding-bottom: 16px; }
}