/* =========================================================================
   AI Site Server - design system v2
   Visual language: Linear / Vercel / Stripe Dashboard
   Dark sidebar, warm light content area, shadows for depth, refined type.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ---- Light surfaces (content area) ---- */
    --bg-primary:   #ffffff;
    --bg-secondary: #f8f8f6;
    --bg-tertiary:  #f0efeb;
    --bg-inset:     #f4f3f0;

    /* ---- Dark sidebar ---- */
    --sidebar-bg:       #1a1a1e;
    --sidebar-bg-hover: #28282e;
    --sidebar-bg-active: rgba(15, 110, 86, 0.15);
    --sidebar-text:     #a1a1a6;
    --sidebar-text-active: #ffffff;
    --sidebar-border:   rgba(255,255,255,0.08);

    /* ---- Text ---- */
    --text-primary:   #111110;
    --text-secondary: #555550;
    --text-tertiary:  #8a8a84;
    --text-muted:     #b0b0a8;

    /* ---- Borders ---- */
    --border-light: rgba(0, 0, 0, 0.07);
    --border-mid:   rgba(0, 0, 0, 0.14);

    /* ---- Brand accent ----
       --brand-accent / --brand-accent-dark are injected by BrandProvider.razor
       at runtime based on the incoming hostname. Fallback to the AI Site Server
       teal if the brand hasn't loaded yet or no brand is configured. */
    --teal:       var(--brand-accent, #0F6E56);
    --teal-light: #E1F5EE;
    --teal-mid:   #5DCAA5;
    --teal-dark:  var(--brand-accent-dark, #085041);
    --teal-glow:  rgba(15, 110, 86, 0.10);

    /* ---- Status ---- */
    --warn-bg:     #FEF3E2;
    --warn-border: #F0B040;
    --warn-text:   #7A4A06;
    --error-bg:    #FEF0F0;
    --error-text:  #842020;

    /* ---- Shadows ---- */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:  0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:  0 4px 16px rgba(0,0,0,0.10);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.04);

    /* ---- Radius ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* ---- Type ---- */
    --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-logo: 'Montserrat', 'Figtree', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

    /* ---- Transitions ---- */
    --transition-fast: 120ms ease;
    --transition-med:  200ms ease;
}

html, body { height: 100%; }

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
}

a { color: var(--teal); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--teal-dark); }

h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }

/* ---------- Buttons ---------- */
.btn-primary {
    background: var(--teal);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
    min-height: 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    font-family: var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}
.btn-primary:hover { background: var(--teal-dark); color: #ffffff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.btn-primary:active { transform: translateY(0.5px); }

.btn-outline {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
    min-height: 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* Icon-only buttons (only child is an <i> glyph) get a square footprint
   instead of the wider text-button padding so they line up visually
   with their text-bearing siblings. :has() is supported in every modern
   evergreen browser. */
.btn-primary:has(> i:only-child),
.btn-outline:has(> i:only-child) {
    padding: 9px 12px;
    min-width: 40px;
}
.btn-outline:hover { background: var(--bg-secondary); color: var(--text-primary) !important; border-color: var(--border-mid); box-shadow: var(--shadow-md); }

/* ---------- Reusable overlay / panel / pill ----------
   Used everywhere we previously had inline style attributes for these
   patterns. Centralized so theme tweaks (radius, padding, modal scrim)
   change once instead of in every Razor page. */
.aise-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}
.aise-modal-card {
    background: #fff;
    border-radius: 12px;
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    overflow: auto;
    padding: 24px 28px;
}
.aise-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.aise-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}
.aise-modal-sub {
    font-size: 13px;
    color: #64748b;
}
.aise-inline-panel {
    margin-top: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.aise-inline-panel-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}
.aise-status-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.aise-status-pill.pill-sent      { background: #f1f5f9; color: #475569; }
.aise-status-pill.pill-viewed    { background: #fef3c7; color: #92400e; }
.aise-status-pill.pill-submitted,
.aise-status-pill.pill-processing { background: #dbeafe; color: #1e40af; }
.aise-status-pill.pill-complete  { background: #dcfce7; color: #166534; }
.aise-status-pill.pill-cancelled { background: #fee2e2; color: #991b1b; }
.aise-status-pill.pill-expired   { background: #f3e8ff; color: #6b21a8; }

/* ---------- Modern dropzone (reusable, global) ----------
   Used by every InputFile entry point on the platform. Pair with the
   <Dropzone> Razor component or wrap the input + label directly.   */
.aise-dropzone {
    position: relative;
    border: 2px dashed var(--border-mid, #cbd5e1);
    border-radius: 12px;
    background: var(--bg-inset, #f8fafc);
    padding: 28px 24px;
    text-align: center;
    cursor: pointer;
    display: block;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.aise-dropzone:hover {
    border-color: var(--teal, #0F6E56);
    background: rgba(15, 110, 86, 0.04);
    box-shadow: 0 0 0 4px rgba(15, 110, 86, 0.06);
}
.aise-dropzone.dragover {
    border-color: var(--teal, #0F6E56);
    background: rgba(15, 110, 86, 0.08);
    box-shadow: 0 0 0 6px rgba(15, 110, 86, 0.1);
}
.aise-dropzone.has-file {
    background: #fff;
    border-style: solid;
    border-color: var(--border-light, #e2e8f0);
    text-align: left;
    padding: 16px 18px;
}
.aise-dropzone.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.aise-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.aise-dropzone.disabled .aise-dropzone-input { cursor: not-allowed; }
.aise-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--teal, #0F6E56);
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.aise-dropzone-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.aise-dropzone-sub {
    font-size: 13px;
    color: var(--text-tertiary, #64748b);
    margin-top: 6px;
}
.aise-dropzone-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.aise-dropzone-preview img {
    max-height: 64px;
    max-width: 220px;
    object-fit: contain;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 4px;
}
.aise-dropzone-meta {
    flex: 1;
    min-width: 0;
}
.aise-dropzone-filename {
    font-weight: 600;
    color: #0f172a;
    font-size: 14px;
    word-break: break-all;
}
.aise-dropzone-change {
    font-size: 13px;
    color: var(--teal, #0F6E56);
    margin-top: 4px;
}
.aise-dropzone-remove {
    position: relative;
    z-index: 2;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}
.aise-dropzone-remove:hover {
    border-color: #b91c1c;
    color: #b91c1c;
}
.aise-dropzone-busy {
    font-size: 13px;
    color: var(--text-tertiary, #64748b);
    margin-top: 8px;
}
.aise-dropzone-error {
    font-size: 13px;
    color: #b91c1c;
    margin-top: 8px;
}

/* ---------- Utilities ---------- */
.file-input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* ---------- Shared page layout ---------- */
.topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.page-title {
    font-family: var(--font-logo);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}
.page-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

@media (max-width: 480px) {
    .topbar { margin-bottom: 20px; }
    .page-title { font-size: 18px; }
}

/* =========================================================================
   Sidebar - global styles (NOT scoped CSS - avoids Blazor scoping/caching
   issues that prevented pill styles from rendering)
   ========================================================================= */

.sidebar {
    background: #0c0c0e;
    padding: 28px 0 0;
    display: flex;
    flex-direction: column;
    /* Pin to the left edge of the viewport across the full height so the nav
       is always visible as the main content scrolls. Width matches the grid
       column on .shell (260px). The flyout override below flips this to a
       slide-in panel on narrow screens. !important on the pinning properties
       so scoped or page-level CSS can't accidentally revert us to static. */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 260px;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.10);
    border-radius: 3px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,0.22);
}

.sidebar-logo {
    font-family: var(--font-logo);
    font-size: 15px;
    font-weight: 800;
    padding: 0 28px 28px;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.08em;
}
.sidebar-logo span {
    /* Uses --brand-accent / --brand-accent-dark injected by BrandProvider and the index.html loader script. */
    background: linear-gradient(135deg, var(--brand-accent-dark, #5DCAA5), var(--brand-accent, #0F6E56));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
    margin-bottom: 4px;
}
/* Hairline between sections - skipped on the first group so we don't get
   a stray line right under the logo. */
.nav-group + .nav-group {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 12px;
    padding-top: 4px;
}

.nav-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,0.32);
    padding: 14px 12px 6px;
}

/* Nav items - flat by default, subtle hover fade, brand-tinted active state
   with a thin accent bar on the left edge. */
.sidebar .nav-item,
a.nav-item[href] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.62) !important;
    cursor: pointer;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background 140ms ease, color 140ms ease;
    letter-spacing: -.005em;
}
.sidebar .nav-item:hover,
a.nav-item[href]:hover {
    background: rgba(255,255,255,0.05);
    color: #ffffff !important;
}
.sidebar .nav-item.active,
a.nav-item.active[href] {
    color: #ffffff !important;
    font-weight: 500;
    background: rgba(255,255,255,0.07);
}
/* Brand-colored accent bar on the active item. Sits inside the rounded
   padding so it lines up with the row text rather than the sidebar edge. */
.sidebar .nav-item.active::before,
a.nav-item.active[href]::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-accent-dark, #5DCAA5);
}

.sidebar .nav-item i,
a.nav-item[href] i {
    width: 16px;
    text-align: center;
    font-size: 13px;
    opacity: .55;
    transition: opacity 140ms ease, color 140ms ease;
    flex-shrink: 0;
}
.sidebar .nav-item:hover i,
a.nav-item[href]:hover i { opacity: .9; }
.sidebar .nav-item.active i,
a.nav-item.active[href] i {
    opacity: 1;
    color: var(--brand-accent-dark, #5DCAA5);
}

/* ===== Collapsed mode ===== */
.sidebar-collapse-toggle {
    margin-top: 8px;
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    color: rgba(255,255,255,0.55);
    padding: 8px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    font-size: 12px;
}
.sidebar-collapse-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

/* When body has the collapsed class (manual via toggle) OR the auto class
   (editor page), narrow the sidebar and hide text. Two classes so the
   editor can force collapse without overwriting the user's persisted
   preference - removing the auto class restores whatever they had set. */
body.aise-sidebar-collapsed .sidebar,
body.aise-sidebar-auto-collapsed .sidebar {
    width: 64px !important;
}
body.aise-sidebar-collapsed .main,
body.aise-sidebar-auto-collapsed .main {
    margin-left: 64px;
}
/* The full wordmark is shown by default; the icon is hidden. Collapsed
   mode flips the visibility so the rail shows the brand's favicon/icon
   centered in the narrow column. */
.sidebar-logo-icon { display: none; }
body.aise-sidebar-collapsed .sidebar-logo,
body.aise-sidebar-auto-collapsed .sidebar-logo {
    padding: 4px 0 24px;
    text-align: center;
    letter-spacing: 0;
    display: flex;
    justify-content: center;
}
body.aise-sidebar-collapsed .sidebar-logo-full,
body.aise-sidebar-auto-collapsed .sidebar-logo-full { display: none; }
/* When the brand uses an image wordmark, constrain it so it fits the sidebar
   width without bleeding past the rail edges. */
.sidebar-logo-img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 36px;
}
body.aise-sidebar-collapsed .sidebar-logo-icon,
body.aise-sidebar-auto-collapsed .sidebar-logo-icon {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
}
body.aise-sidebar-collapsed .nav-label,
body.aise-sidebar-auto-collapsed .nav-label { display: none; }
body.aise-sidebar-collapsed .nav-group,
body.aise-sidebar-auto-collapsed .nav-group {
    padding: 0 8px;
    margin-bottom: 8px;
}
body.aise-sidebar-collapsed .nav-group + .nav-group,
body.aise-sidebar-auto-collapsed .nav-group + .nav-group {
    margin-top: 8px;
    padding-top: 8px;
}
body.aise-sidebar-collapsed .sidebar .nav-item,
body.aise-sidebar-collapsed a.nav-item[href],
body.aise-sidebar-auto-collapsed .sidebar .nav-item,
body.aise-sidebar-auto-collapsed a.nav-item[href] {
    justify-content: center;
    padding: 10px 8px;
    gap: 0;
}
body.aise-sidebar-collapsed .nav-text,
body.aise-sidebar-auto-collapsed .nav-text { display: none; }
body.aise-sidebar-collapsed .sidebar .nav-item i,
body.aise-sidebar-collapsed a.nav-item[href] i,
body.aise-sidebar-auto-collapsed .sidebar .nav-item i,
body.aise-sidebar-auto-collapsed a.nav-item[href] i {
    font-size: 15px;
    width: auto;
}
body.aise-sidebar-collapsed .sidebar .nav-item.active::before,
body.aise-sidebar-collapsed a.nav-item.active[href]::before,
body.aise-sidebar-auto-collapsed .sidebar .nav-item.active::before,
body.aise-sidebar-auto-collapsed a.nav-item.active[href]::before {
    left: -8px;
}
/* User card collapses to just the avatar */
body.aise-sidebar-collapsed .user-info,
body.aise-sidebar-auto-collapsed .user-info { display: none; }
body.aise-sidebar-collapsed .user-card,
body.aise-sidebar-auto-collapsed .user-card {
    justify-content: center;
    padding: 8px;
}
body.aise-sidebar-collapsed .sidebar-bottom,
body.aise-sidebar-auto-collapsed .sidebar-bottom {
    padding: 12px 8px 16px;
    margin-left: 8px;
    margin-right: 8px;
}
body.aise-sidebar-collapsed .sidebar-signout .nav-text,
body.aise-sidebar-auto-collapsed .sidebar-signout .nav-text { display: none; }
body.aise-sidebar-collapsed .sidebar-signout,
body.aise-sidebar-auto-collapsed .sidebar-signout {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-signout-icon { display: none; }
body.aise-sidebar-collapsed .sidebar-signout-icon,
body.aise-sidebar-auto-collapsed .sidebar-signout-icon { display: inline; }

/* Hide the toggle button when the editor is forcing the collapse, since
   manually expanding would just look broken against the editor canvas. */
body.aise-sidebar-auto-collapsed .sidebar-collapse-toggle { display: none; }

/* Mobile: collapse toggle hidden, sidebar always full-width when open */
@media (max-width: 900px) {
    .sidebar-collapse-toggle { display: none; }
    body.aise-sidebar-collapsed .main,
    body.aise-sidebar-auto-collapsed .main { margin-left: 0; }
    body.aise-sidebar-collapsed .sidebar,
    body.aise-sidebar-auto-collapsed .sidebar { width: 260px !important; }
}

/* User section at bottom - sticks to bottom even on scroll */
.sidebar-bottom {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: #0c0c0e;
    padding: 20px 16px 20px;
    margin-left: 16px;
    margin-right: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    z-index: 1;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
}

.sidebar .avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--teal) 0%, #085041 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    flex-shrink: 0;
}

.user-info {
    min-width: 0;
    flex: 1;
}
.sidebar .user-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-email {
    font-size: 11px;
    color: rgba(255,255,255,0.30);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.sidebar-signout {
    margin-top: 12px;
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    font-family: inherit;
    transition: all 120ms ease;
}
.sidebar-signout:hover {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.72);
    border-color: rgba(255,255,255,0.12);
}

/* Mobile flyout panel - slides in from the left */
@media (max-width: 900px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        /* !important required to override the base .sidebar rule above which
           uses !important on `left: 0` to beat component-scoped CSS. Without
           it, the mobile flyout stays permanently open and blocks the app. */
        left: -280px !important;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        box-shadow: none;
    }
    .sidebar.sidebar-open {
        left: 0 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.4);
    }

    /* Keep all nav groups vertical in the flyout (not row) */
    .nav-group {
        flex-direction: column;
    }
    .nav-label { display: block; }

    /* Show full user info in flyout */
    .user-info { display: block; }
    .user-card { padding: 10px 12px; }
    .sidebar .avatar { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
    .sidebar-signout { width: 100%; margin-top: 12px; }
    .sidebar-bottom {
        margin-top: auto;
        padding: 0 16px;
        border-top: 1px solid rgba(255,255,255,0.06);
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 20px;
    }
}

/* ---------- Initial loader (pre-Blazor boot) ---------- */
#app > .initial-loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--bg-secondary);
}
.initial-loader-mark {
    font-family: var(--font-logo);
    /* Scales from 24px on the smallest phones up to 45px at ~1100px wide so
       long brand names (e.g. AIARTWEBSITES) never overflow narrow viewports. */
    font-size: clamp(24px, 6vw, 45px);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.06em;
    max-width: 92vw;
    text-align: center;
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 0 16px;
}
.initial-loader-mark span { color: var(--teal); }
/* When the brand uses the sail icon in the loader (default for SiteServer.AI),
   override the wordmark text styles and circle-crop the icon at a size that
   visually matches the text wordmark above the spinner. */
.initial-loader-mark-img {
    width: clamp(72px, 12vw, 96px);
    height: clamp(72px, 12vw, 96px);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    line-height: 0;
    letter-spacing: 0;
}

.loading-progress-wrap {
    position: relative;
    width: 8rem;
    height: 8rem;
}
.loading-progress {
    display: block;
    width: 100%;
    height: 100%;
}
.loading-progress circle {
    fill: none;
    stroke: var(--border-light);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--teal);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 13px;
}
.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

/* ---------- Validation ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--teal-mid); }
.invalid { outline: 1px solid var(--error-text); }
.validation-message { color: var(--error-text); font-size: 12px; }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-border);
    color: var(--warn-text);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 13px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: var(--error-bg);
    color: var(--error-text);
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 13px;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* ---------- Auth pages (shared by SignIn, SignUp, Forgot, Reset) ---------- */
.auth-shell {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    background: var(--bg-secondary);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    box-shadow: var(--shadow-lg);
}
.auth-mark {
    font-family: var(--font-logo);
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    margin-bottom: 20px;
}
.auth-mark span { color: var(--teal); }
.auth-mark-img {
    display: block;
    margin: 0 auto 20px;
    max-width: 220px;
    height: auto;
}
.auth-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--text-primary);
    letter-spacing: -.02em;
}
.auth-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: 14px;
}
.auth-input {
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--bg-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.auth-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-glow);
}
.auth-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.auth-mini-link {
    font-size: 12px;
    color: var(--teal);
    font-weight: 500;
}
.auth-submit {
    margin-top: 20px;
    padding: 12px 20px;
    font-size: 14px;
    width: 100%;
    justify-content: center;
}
.auth-submit:disabled { opacity: .5; cursor: not-allowed; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 16px;
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 0.5px;
    background: var(--border-light);
}
.auth-google {
    display: flex;
    justify-content: center;
    min-height: 40px;
}
.auth-error {
    margin-top: 14px;
    padding: 10px 12px;
    background: var(--error-bg);
    color: var(--error-text);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.auth-success {
    padding: 14px 16px;
    background: var(--teal-light);
    color: var(--teal-dark);
    border: 0.5px solid var(--teal-mid);
    border-radius: var(--radius-md);
    font-size: 13px;
}
.auth-foot {
    margin-top: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}
.auth-foot a { color: var(--teal); }

/* ---------- Billing pages (SelectPlan, BillingSuccess, Billing) ---------- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 880px;
    margin-top: 28px;
}
.plan-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.plan-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--border-mid);
}
.plan-name {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--teal);
    margin-bottom: 10px;
}
.plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 14px; }
.plan-price-amount { font-size: 40px; font-weight: 600; color: var(--text-primary); letter-spacing: -.03em; }
.plan-price-period { font-size: 14px; color: var(--text-tertiary); }
.plan-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.plan-features li {
    padding: 8px 0;
    border-top: 1px solid var(--border-light);
}
.plan-features li:first-child { border-top: none; }
.plan-features li::before {
    content: "✓ ";
    color: var(--teal);
    font-weight: 600;
    margin-right: 8px;
}
.plan-cta {
    margin-top: auto;
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
}
.plan-featured {
    border: 2px solid var(--teal) !important;
    box-shadow: var(--shadow-md), 0 0 0 4px var(--teal-glow) !important;
}
.plan-badge-top {
    display: inline-block;
    background: var(--teal);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

/* Billing interval toggle */
.billing-toggle {
    display: inline-flex;
    background: var(--bg-inset);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
}
.toggle-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-sans);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.toggle-btn:hover { color: var(--text-primary); }
.toggle-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.toggle-save {
    font-size: 10px;
    font-weight: 600;
    color: var(--teal);
    background: var(--teal-light);
    padding: 2px 6px;
    border-radius: 999px;
}

.success-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 48px 36px;
    max-width: 540px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.success-glyph {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--teal-light);
    color: var(--teal);
    font-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.success-title { font-size: 22px; font-weight: 600; margin: 0 0 10px 0; letter-spacing: -.02em; }
.success-detail { font-size: 14px; color: var(--text-secondary); margin: 0 0 28px 0; }
.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.billing-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: var(--shadow-card);
}
.billing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-light);
}
.billing-row:first-child { padding-top: 0; }
.billing-row:last-child { border-bottom: none; padding-bottom: 0; }
.billing-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}
.billing-value { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.billing-sub { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }

/* ---------- Metrics grid (Dashboard + Admin) ---------- */
.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}
.metric {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
}
.metric-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.metric-value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-primary);
}
.metric-value.small { font-size: 16px; padding-top: 4px; }
.metric-sub {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.sites-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .metrics { grid-template-columns: 1fr; gap: 10px; }
    .metric { padding: 14px 16px; }
    .metric-value { font-size: 22px; }
}

/* ---------- Marketing nav logo (global to avoid scoped CSS caching) ---------- */
.logo {
    font-family: var(--font-logo) !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
}
.logo span { color: var(--teal); }
.logo-img { display: inline-flex !important; align-items: center; }
.logo-img img { height: 66px; width: auto; display: block; }

/* ---------- Hero video background ---------- */
.hero,
#hero-section {
    position: relative !important;
    overflow: hidden !important;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0e;
}
.hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.55) 40%,
        rgba(0, 0, 0, 0.75) 100%
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 80px 48px 64px;
    text-align: center;
    max-width: 720px;
}
.hero-cta-outline {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    backdrop-filter: blur(4px);
}
.hero-cta-outline:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}
.eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--teal-mid);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hero h1 {
    font-size: 66px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.03em;
    margin-bottom: 20px;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.hero p {
    font-size: 26px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 40px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.hero-cta {
    padding: 18px 40px;
    font-size: 20px;
    text-decoration: none;
}
@media (max-width: 640px) {
    .hero-content { padding: 56px 24px 48px; }
    .hero h1 { font-size: 42px; }
    .hero p { font-size: 20px; }
    .hero-cta { font-size: 17px; padding: 15px 32px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-cta { text-align: center; }
}
@media (max-width: 480px) {
    .hero-content { padding: 48px 20px 40px; }
    .hero h1 { font-size: 34px; }
    .hero p { font-size: 18px; }
    .hero { min-height: 420px; }
}

/* ---------- Landing page sections ---------- */
.steps { background: var(--bg-secondary); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: 56px 48px; }
.steps-inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-size: 14px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 32px; text-align: center; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.step { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 28px 24px; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-med); }
.step:hover { box-shadow: var(--shadow-md); }
.step { text-align: center; }
.step-num { width: 60px; height: 60px; border-radius: 50%; background: var(--teal-light); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--teal); margin: 0 auto 18px; }
.step h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; letter-spacing: -.01em; }
.step p { font-size: 16px; color: var(--text-secondary); line-height: 1.7; }
.formats { padding: 56px 48px; }
.formats-inner { max-width: 800px; margin: 0 auto; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; justify-content: center; }
.chip { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--text-secondary); box-shadow: var(--shadow-sm); }
.chip.ok { background: var(--teal-light); border-color: transparent; color: var(--teal-dark); }
.chip.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-text); }
.pricing { padding: 56px 48px; border-top: 1px solid var(--border-light); }
.pricing-inner { max-width: 680px; margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.plan { background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 28px 24px; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-med); }
.plan:hover { box-shadow: var(--shadow-md); }
.plan.featured { border: 2px solid var(--teal); box-shadow: var(--shadow-md), 0 0 0 4px var(--teal-glow); }
.plan-badge { display: inline-block; background: var(--teal); color: #ffffff; font-size: 11px; font-weight: 600; padding: 3px 12px; border-radius: 999px; margin-bottom: 14px; }
.plan-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.plan-price { font-size: 32px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.02em; }
.plan-price span { font-size: 14px; font-weight: 400; color: var(--text-tertiary); }
.plan-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
.plan-features { list-style: none; margin-bottom: 22px; }
.plan-features li { font-size: 13px; color: var(--text-secondary); padding: 7px 0; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; gap: 8px; }
.plan-features li:last-child { border-bottom: none; }
.check { color: var(--teal); font-size: 14px; font-weight: 600; }
.plan-cta { width: 100%; text-align: center; display: block; text-decoration: none; }
.cta-section { background: #0c0c0e; padding: 64px 48px; text-align: center; }
.cta-inner { max-width: 540px; margin: 0 auto; }
.cta-section h2 { font-size: 28px; font-weight: 600; color: #ffffff; letter-spacing: -.02em; margin-bottom: 12px; }
.cta-section p { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 28px; }
@media (max-width: 800px) { .steps-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr !important; }
    .cta-section { padding: 48px 20px; }
    .cta-section h2 { font-size: 22px; }
    .steps, .formats, .pricing { padding: 40px 20px; }
}
@media (max-width: 480px) {
    .steps, .formats, .pricing { padding: 32px 16px; }
    .plan { padding: 22px 20px; }
    .plan-price { font-size: 26px; }
}

/* ---------- Legal pages (Privacy, Terms) ---------- */
.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 40px 64px;
}
.legal-page h1 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-bottom: 8px;
}
.legal-updated {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 36px;
}
.legal-page h2 {
    font-size: 18px;
    font-weight: 600;
    margin-top: 32px;
    margin-bottom: 12px;
    letter-spacing: -.01em;
}
.legal-page p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 14px;
}
.legal-page ul {
    padding-left: 20px;
    margin-bottom: 14px;
}
.legal-page li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
@media (max-width: 640px) {
    .legal-page { padding: 32px 20px 48px; }
    .legal-page h1 { font-size: 22px; }
}

/* ---------- Email verification banner ---------- */
.verify-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-lg);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.verify-banner-text {
    font-size: 13px;
    color: var(--warn-text);
}
.verify-banner-text strong { font-weight: 600; }

/* ---------- Support ticket + Admin status pills ---------- */
.status-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.status-open { background: var(--teal-light); color: var(--teal-dark); }
.status-progress { background: #EEF0FF; color: #3B44B0; }
.status-resolved { background: var(--teal-light); color: var(--teal); }
.status-closed { background: var(--bg-inset); color: var(--text-tertiary); }
.priority-urgent { background: var(--error-bg); color: var(--error-text); }
.priority-high { background: var(--warn-bg); color: var(--warn-text); }

.admin-reply {
    border-left: 3px solid var(--teal) !important;
}

/* ---------- Admin tables ---------- */
.admin-table-wrap {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.admin-table thead {
    background: var(--bg-inset);
    border-bottom: 1px solid var(--border-light);
}
.admin-table th {
    text-align: left;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.admin-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
    color: var(--text-primary);
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table-row {
    cursor: pointer;
    transition: background 120ms ease;
}
.admin-table-row:hover {
    background: var(--bg-secondary);
}
.admin-cell-id {
    color: var(--text-tertiary);
    font-size: 12px;
    width: 40px;
}
.admin-cell-subject {
    font-weight: 500;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-cell-sub {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
}
.admin-cell-center {
    text-align: center;
}
.admin-email {
    color: var(--text-tertiary);
    font-size: 11px;
}

/* ---------- Admin filter bar ---------- */
.admin-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-search {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: var(--font-sans);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-search:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-glow);
}
.admin-search::placeholder { color: var(--text-muted); }
.admin-filter-select {
    padding: 10px 14px;
    font-size: 13px;
    font-family: var(--font-sans);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    min-width: 140px;
    transition: border-color var(--transition-fast);
}
.admin-filter-select:focus { border-color: var(--teal); }

/* ---------- Admin pagination ---------- */
.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
    padding: 12px 0;
}
.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 100px;
    text-align: center;
}
.pagination-btn { padding: 8px 16px; font-size: 13px; }
.pagination-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Admin inline controls ---------- */
.admin-inline-select {
    padding: 5px 8px;
    font-size: 12px;
    font-family: var(--font-sans);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
}
.admin-inline-select:focus { border-color: var(--teal); }

.admin-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
}
.admin-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--teal);
    cursor: pointer;
}
.admin-toggle-label { white-space: nowrap; }

/* ---------- Sortable column headers ---------- */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}
.sortable:hover { color: var(--teal); }

@media (max-width: 900px) {
    .admin-table-wrap { overflow-x: auto; }
    .admin-table { min-width: 700px; }
    .admin-filters { flex-direction: column; }
    .admin-search { min-width: 100%; }
}

/* =========================================================================
   Responsive - global rules
   Standardized breakpoints (used throughout the app):
     900px  → app shell drops sidebar to top bar
     640px  → marketing/landing collapses to single column
     480px  → tightest mobile cleanup
   ========================================================================= */

/* iOS Safari auto-zooms any text input whose font-size is < 16px when the
   user taps it. Force 16px on inputs at narrow widths regardless of how
   the per-component CSS sized them. Done with input/textarea selectors so
   it covers .text-input, .auth-input, and any future bare <input>s. */
@media (max-width: 900px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    textarea {
        font-size: 16px !important;
    }
}

/* ---- Auth pages ---- */
@media (max-width: 640px) {
    .auth-shell {
        /* Top-anchor instead of vertically centering - on a short mobile
           viewport the keyboard would push a centered card off-screen. */
        align-items: flex-start;
        padding: 24px 14px;
        min-height: auto;
    }
    .auth-card {
        padding: 28px 20px;
    }
    .auth-title { font-size: 20px; }
    .auth-google { min-height: auto; }
}

/* ---- Billing pages ---- */
@media (max-width: 640px) {
    .plan-grid {
        /* The auto-fit minmax(280px) already collapses, but we want a
           snugger gap and padding when there's only one card visible. */
        gap: 12px;
        margin-top: 16px;
    }
    .plan-card { padding: 22px 20px; }
    .plan-price-amount { font-size: 30px; }

    .success-card { padding: 32px 22px; }
    .success-title { font-size: 18px; }

    .billing-card {
        padding: 18px 20px;
        gap: 16px;
    }
    /* Stack billing rows: label-value column on top, action button below */
    .billing-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 16px;
    }
    .billing-row > .btn-outline,
    .billing-row > .btn-primary,
    .billing-row > a.btn-outline,
    .billing-row > a.btn-primary,
    .billing-row > button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ---- Billing toggle on small screens ---- */
@media (max-width: 480px) {
    .billing-toggle {
        flex-direction: column;
        width: 100%;
    }
    .toggle-btn { width: 100%; justify-content: center; }
    .plan-grid { gap: 14px; }
    .plan-price-amount { font-size: 32px; }
}

/* ---- Verify banner ---- */
@media (max-width: 640px) {
    .verify-banner { flex-direction: column; align-items: stretch; }
}

/* ---- Buttons: comfortable touch targets ---- */
@media (max-width: 640px) {
    .btn-primary,
    .btn-outline {
        /* Apple HIG = 44pt, Google = 48dp. With 14px font + this padding
           we land on ~42-44px which is acceptable. */
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* ===== Site settings page ===== */
.settings-section {
    background: #fff;
    border: 1px solid #e8e7e4;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
    max-width: 720px;
}
.settings-section.danger-zone {
    border-color: #e0c8c8;
    background: #fdf8f8;
}
.settings-heading {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.settings-subheading {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #555;
    margin: 24px 0 8px;
    padding-top: 18px;
    border-top: 1px solid #e8e7e4;
}
.settings-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Domain instructions */
.domain-instructions {
    background: #f9f9f7;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 24px;
}
.instruction-title {
    font-weight: 600;
    font-size: 14px;
    color: #555;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.instruction-hint {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #888;
    line-height: 1.45;
}
.instruction-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}
.instruction-step:last-child { margin-bottom: 0; }
.instruction-step .step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var(--teal, #0F6E56);
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}
.instruction-step code {
    background: #e8e7e4;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    word-break: break-all;
}

/* Domain form */
.domain-form { margin-top: 4px; }
.current-domain {
    background: #f5f9f7;
    border: 1px solid #c5e0d8;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.domain-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin-bottom: 6px;
}
.domain-value {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.domain-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.domain-status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 500;
}
.domain-status.connected {
    background: #e0f5ee;
    color: #0F6E56;
}
.domain-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.domain-input {
    /* Base form-control rhythm: every <input>, <select>, <textarea> using
       this class lands on the same height + padding + box model regardless
       of the surrounding layout. flex:1 is opt-in via the row container. */
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid #d0cfcc;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.2;
    color: var(--text-primary, #0f172a);
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    vertical-align: middle;
}
.domain-input:focus {
    border-color: var(--teal, #0F6E56);
    box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.12);
}
/* Inside the flex row, the input takes the remaining space; outside it
   the base rule above (width:100%) controls layout. */
.domain-input-row > .domain-input { flex: 1; width: auto; }
/* Native selects add their own caret/chrome padding on some browsers -
   trim the right edge so the height matches <input> exactly. */
select.domain-input {
    padding-right: 36px;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                      linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
/* Textareas need their own height story; they shouldn't be locked to the
   single-line min-height that <input>/<select> use. */
textarea.domain-input {
    min-height: 90px;
    line-height: 1.5;
    resize: vertical;
}
.domain-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef0ef;
    color: #b33;
    border-radius: 8px;
    font-size: 14px;
}
.domain-success {
    margin-top: 10px;
    padding: 10px 14px;
    background: #e8f6f0;
    color: #0a5e48;
    border-radius: 8px;
    font-size: 14px;
}

/* Site detail rows */
.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0efed;
    font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #888; }
.detail-value { color: #333; font-weight: 500; }

/* Danger zone */
.btn-danger {
    padding: 8px 18px;
    background: #d44;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-danger:hover { background: #c33; }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }
.confirm-delete {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #555;
}

@media (max-width: 640px) {
    .settings-section { padding: 20px 16px; }
    .domain-input-row { flex-direction: column; }
    .domain-input-row .btn-primary { width: 100%; }
    .confirm-delete { flex-direction: column; align-items: stretch; }
}

/* ===== Editor app-mode layout =====
   When the editor is mounted, body gets .aise-editor-page so the .main
   container goes full-bleed (no padding, no max-width, fills viewport
   height). The sidebar stays visible. Mobile-preview centers in the
   remaining viewport. */
body.aise-editor-page .main {
    padding: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
body.aise-editor-page .editor-mobile-warning {
    display: none !important;
}
body.aise-editor-page .editor-topbar {
    flex: none;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
body.aise-editor-page .editor-frame {
    flex: 1;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none;
}
body.aise-editor-page .editor-frame.editor-frame-mobile {
    align-self: center;
    flex: none;
    width: 390px !important;
    max-width: 390px !important;
    height: calc(100vh - 96px) !important;
    margin: 16px auto !important;
    border-radius: 28px !important;
    box-shadow: 0 0 0 6px #1f2937, 0 0 0 8px #374151, 0 12px 32px rgba(0,0,0,0.18) !important;
}
@media (max-width: 900px) {
    body.aise-editor-page .editor-frame.editor-frame-mobile {
        margin: 8px auto !important;
        height: calc(100vh - 120px) !important;
    }
}

.folder-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 0 18px;
    padding: 4px 0;
}
.folder-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f2ee;
    border: 1px solid #e0ded8;
    border-radius: 999px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.folder-chip:hover {
    background: #ebe9e3;
    border-color: #cfcdc6;
}
.folder-chip.active {
    background: #0F6E56;
    border-color: #0a5a45;
    color: #fff;
}
.folder-chip.active .folder-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
.folder-count {
    background: #e6e4dd;
    color: #777;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.folder-chip-wrap {
    position: relative;
    display: inline-flex;
}
.folder-chip-delete {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #c94b3a;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.folder-chip-wrap:hover .folder-chip-delete { display: flex; }
.folder-chip-add {
    color: #0F6E56;
    background: transparent;
    border-style: dashed;
}
.folder-chip-add:hover {
    background: rgba(15, 110, 86, 0.06);
}
.folder-create-input {
    padding: 6px 12px;
    border: 1px solid #0F6E56;
    border-radius: 999px;
    font-size: 13px;
    outline: none;
    min-width: 160px;
}
.folder-error {
    width: 100%;
    color: #c94b3a;
    font-size: 12px;
    margin-top: 4px;
}

/* ===== Site settings - wide 2-column layout =====
   Body gets .aise-settings-page on mount; .main goes full-bleed (no
   max-width cap) and the settings-grid runs a Pinterest-style 2-column
   masonry where cards pack down each column by real height. Mobile
   collapses to 1 column. The .settings-section-wide class is now a
   no-op since column-count doesn't allow column spanning; it survives
   only because existing markup may still set it. */
body.aise-settings-page .main {
    max-width: none !important;
}
.settings-grid {
    column-count: 2;
    column-gap: 20px;
}
.settings-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
    margin: 0 0 20px;
    width: 100%;
}
@media (max-width: 900px) {
    .settings-grid { column-count: 1; }
}

/* ===== Admin AI usage table ===== */
.usage-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}
.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.usage-table th,
.usage-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
}
.usage-table th {
    font-weight: 600;
    color: var(--text-secondary, #555);
    background: var(--bg-secondary, #fafafa);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.usage-table tbody tr:last-child td { border-bottom: none; }
.usage-table .usage-num {
    text-align: right;
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
}
.usage-table .usage-model {
    color: var(--text-tertiary, #888);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    font-size: 11px;
    margin-left: 6px;
}

/* ===== AI generate-content modal (in editor) ===== */
.ai-modal-large {
    max-width: 920px !important;
}
.ai-modal-lead {
    margin: 0 0 12px;
    color: var(--text-secondary, #555);
    font-size: 14px;
}
.ai-modal-actions {
    margin-top: 14px;
    display: flex;
    justify-content: flex-end;
}
.ai-prompt-textarea {
    width: 100%;
    box-sizing: border-box;
    display: block;
    flex: none;
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
}
.ai-modal-controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}
.ai-modal-control {
    display: flex;
    flex-direction: column;
}
.ai-modal-control .domain-input {
    width: 100%;
    box-sizing: border-box;
    flex: none;
}
.ai-modal-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #555);
    margin-bottom: 4px;
}
@media (max-width: 480px) {
    .ai-modal-controls { grid-template-columns: 1fr; }
}

/* AI diff preview - shown after generation, before user accepts */
.ai-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}
.ai-diff-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ai-diff-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #888);
    margin-bottom: 6px;
}
.ai-diff-label-proposed {
    color: var(--teal-dark, #085041);
}
.ai-diff-frame {
    width: 100%;
    height: 280px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
}
.ai-diff-col:nth-child(2) .ai-diff-frame {
    border-color: var(--teal-mid, #5DCAA5);
    box-shadow: 0 0 0 2px rgba(15, 110, 86, 0.10);
}
.ai-diff-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.ai-usage-info {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 11px;
    color: var(--text-tertiary, #888);
    font-family: var(--font-mono, ui-monospace, Consolas, monospace);
    align-items: center;
}
.ai-usage-model {
    font-weight: 600;
    color: var(--text-secondary, #555);
}
.ai-usage-cost {
    margin-left: auto;
    color: var(--teal-dark, #085041);
    font-weight: 600;
}
@media (max-width: 700px) {
    .ai-diff { grid-template-columns: 1fr; }
    .ai-diff-frame { height: 220px; }
}

/* ===== AI keys page ===== */
.ai-keys-bullets {
    margin: 8px 0 0;
    padding-left: 22px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}
.ai-keys-bullets li { margin-bottom: 6px; }

.ai-keys-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}
.ai-key-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    background: #fff;
}
.ai-key-provider { flex: 1; min-width: 0; }
.ai-key-provider-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}
.ai-key-hint {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}
.ai-key-meta { font-size: 12px; }
.ai-key-valid { color: var(--teal-dark, #085041); }
.ai-key-invalid { color: #c94b3a; }
.btn-danger-sm {
    background: transparent;
    color: #c94b3a;
    border: 1px solid rgba(201, 75, 58, 0.3);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
}
.btn-danger-sm:hover:not(:disabled) {
    background: #fef0ef;
    border-color: #c94b3a;
}
.btn-danger-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-outline-sm {
    background: transparent;
    color: var(--text-secondary, #555);
    border: 1px solid var(--border-light);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
}
.btn-outline-sm:hover:not(:disabled) {
    background: var(--bg-secondary, #f3f2ee);
    border-color: #c8c6bf;
    color: var(--text-primary, #111);
}
.btn-outline-sm:disabled { opacity: 0.5; cursor: not-allowed; }

.ai-key-default-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--teal-light, #E1F5EE);
    color: var(--teal-dark, #085041);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
}

.ai-keys-walkthrough {
    margin: 8px 0 16px;
    padding: 14px 16px;
    background: var(--bg-secondary, #fafafa);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.ai-keys-walkthrough summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-primary);
    margin: -2px 0;
}
.ai-keys-walkthrough summary i { margin-right: 6px; color: var(--teal); }
.ai-keys-walkthrough ol {
    margin: 10px 0 6px;
    padding-left: 22px;
    line-height: 1.55;
}
.ai-keys-walkthrough li { margin-bottom: 4px; }
.ai-keys-hint {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff8e6;
    border: 1px solid #f0d77a;
    border-radius: 6px;
    color: #6b5400;
    font-size: 12px;
    line-height: 1.5;
}

.ai-keys-add-form { margin-top: 8px; }

/* ===== Account mosaic (Pinterest-style 2-column) =====
   aise-wide-page is set by the account page on mount so the mosaic can
   fill the screen instead of the default 1200px reading width.
   column-count gives a true masonry flow (cards pack down each column
   based on height) rather than a row-based grid. Locked at 2 columns
   on desktop per design. */
body.aise-wide-page .main {
    max-width: none;
}
/* Wide-page mode also unlocks the per-section card so dense tables
   (onboarding status, etc) can use the full screen width. */
body.aise-wide-page .settings-section,
body.aise-wide-page .settings-section-wide {
    max-width: none;
}
.account-grid {
    column-count: 2;
    column-gap: 18px;
}
.account-grid > * {
    break-inside: avoid;
    page-break-inside: avoid;   /* legacy fallback for older engines */
    -webkit-column-break-inside: avoid;
    display: block;
    margin: 0 0 18px;
    width: 100%;
}
@media (max-width: 900px) {
    .account-grid { column-count: 1; }
}

/* Full-width banner row above the masonry (used for invite friends). */
.account-banner {
    margin: 0 0 18px;
    width: 100%;
}

/* ===== Account / profile editor ===== */
.profile-card {
    padding: 24px 28px;
}
.profile-header {
    padding-bottom: 18px;
    border-bottom: 1px solid #eee;
    margin-bottom: 22px;
}
.profile-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}
.profile-sub {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    max-width: 920px;
}
.profile-field-wide {
    grid-column: 1 / -1;
}
.profile-section-label {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
}
.profile-grid .seo-field {
    margin-bottom: 0;
}
.seo-req {
    color: #b33;
    font-weight: 400;
    margin-left: 2px;
}
.seo-optional {
    font-weight: 400;
    color: #94a3b8;
    margin-left: 4px;
}
.profile-footer {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee;
}
.profile-feedback {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.profile-feedback-ok { color: var(--teal, #0F6E56); }
.profile-feedback-err { color: #b33; }

@media (max-width: 700px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .profile-card { padding: 18px 18px; }
}

.seo-field {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}
.seo-field .domain-input {
    width: 100%;
    flex: none;
    box-sizing: border-box;
}
.seo-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.seo-hint {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}
textarea.domain-input {
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
}

/* ===== Admin deployment page ===== */
.deploy-env-banner {
    background: #fff;
    border: 1px solid #e8e7e4;
    border-radius: 12px;
    padding: 20px 28px;
    margin-bottom: 20px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}
.deploy-env-row { display: flex; gap: 8px; align-items: center; }
.deploy-env-label { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.deploy-env-value { font-size: 14px; font-weight: 600; color: #333; }
.env-prod { color: #0F6E56; }
.env-dev { color: #c80; }

.deploy-section {
    background: #fff;
    border: 1px solid #e8e7e4;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 20px;
}
.deploy-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.deploy-section-desc {
    font-size: 14px;
    color: #777;
    line-height: 1.5;
    margin-bottom: 20px;
}
.deploy-section-desc a { color: var(--teal, #0F6E56); }

/* Config status groups */
.deploy-config-group {
    margin-bottom: 20px;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}
.deploy-config-group:last-child { margin-bottom: 0; }
.deploy-config-group-title {
    background: #f9f9f7;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}
.deploy-config-group-count {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    background: #f0efed;
    padding: 3px 10px;
    border-radius: 20px;
}
.deploy-config-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 18px;
    border-bottom: 1px solid #f5f4f2;
    transition: background 0.15s;
}
.deploy-config-row:last-child { border-bottom: none; }
.deploy-config-row:hover { background: #fafaf8; }
.deploy-config-row.config-missing { background: #fef8f7; }
.deploy-config-row.config-missing:hover { background: #fdf3f1; }

.config-indicator {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    margin-top: 5px;
}
.indicator-ok { background: #0F6E56; }
.indicator-missing { background: #d44; }

.config-details { flex: 1; min-width: 0; }
.config-key {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
    word-break: break-all;
}
.config-hint {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    margin-top: 2px;
}
.config-value {
    font-size: 12px;
    color: #aaa;
    font-family: 'Courier New', Courier, monospace;
    margin-top: 4px;
    word-break: break-all;
}

/* Deployment steps */
.deploy-step {
    display: flex;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #f0efed;
}
.deploy-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.deploy-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--teal, #0F6E56);
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
}
.deploy-step-content { flex: 1; min-width: 0; }
.deploy-step-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.deploy-step-body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.deploy-step-body p { margin-bottom: 10px; }
.deploy-step-body ul, .deploy-step-body ol {
    margin: 8px 0 10px 20px;
    padding: 0;
}
.deploy-step-body li { margin-bottom: 4px; }
.deploy-step-body pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    margin: 10px 0;
    white-space: pre-wrap;
    word-break: break-all;
}
.deploy-step-body code {
    background: #e8e7e4;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
}
.deploy-step-body pre code {
    background: none;
    padding: 0;
    color: inherit;
}
.deploy-step-body a { color: var(--teal, #0F6E56); }

/* DNS table */
.deploy-dns-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.deploy-dns-table th {
    background: #f5f4f2;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border: 1px solid #e8e7e4;
}
.deploy-dns-table td {
    padding: 8px 12px;
    border: 1px solid #e8e7e4;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
}

@media (max-width: 640px) {
    .deploy-env-banner { flex-direction: column; gap: 10px; padding: 16px 20px; }
    .deploy-section { padding: 20px 16px; }
    .deploy-step { flex-direction: column; gap: 10px; }
    .deploy-dns-table { font-size: 11px; }
    .deploy-dns-table th, .deploy-dns-table td { padding: 6px 8px; }
}

/* ===== Admin brands editor ===== */
.brand-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}
.default-tag {
    display: inline-block;
    background: var(--teal-light);
    color: var(--teal-dark);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    margin-left: 8px;
    vertical-align: middle;
}
.brand-form {
    border-top: 1px solid var(--border-light);
    padding-top: 20px;
    margin-top: 12px;
}
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}
.form-row {
    display: flex;
    gap: 14px;
}
.form-input {
    padding: 9px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: #fff;
    outline: none;
    transition: border-color 0.12s;
    width: 100%;
    box-sizing: border-box;
}
.form-input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 2px rgba(15,110,86,0.1);
}
textarea.form-input { resize: vertical; font-family: inherit; }
.form-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
}
.form-actions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
}
@media (max-width: 640px) {
    .form-row { flex-direction: column; }
    .brand-header { flex-direction: column; }
}

/* ---- Support-article admin editor ---- */
.article-edit-card {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.article-edit-grid {
    display: grid;
    gap: 14px;
}
.article-edit-grid.two-col {
    grid-template-columns: 1fr 1fr;
}
.article-edit-grid.meta-row {
    grid-template-columns: minmax(0, 2fr) 120px minmax(0, 1.2fr) auto;
    align-items: end;
}
.article-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.article-edit-field .billing-label { margin: 0; }
.article-edit-field .auth-input { width: 100%; box-sizing: border-box; }
.article-edit-checkbox { justify-content: flex-end; }
.article-publish-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}
.article-publish-toggle input { margin: 0; }
.article-edit-content {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 260px;
}
.article-edit-actions { margin-top: 4px; }
.article-edit-delete { margin-left: auto; color: #c23232; }
@media (max-width: 820px) {
    .article-edit-grid.two-col { grid-template-columns: 1fr; }
    .article-edit-grid.meta-row {
        grid-template-columns: 1fr 1fr;
    }
    .article-edit-checkbox { justify-content: flex-start; }
}

/* ---- Admin list pager ---- */
.admin-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.admin-pager-info {
    font-size: 13px;
    color: var(--text-secondary);
    display: inline-flex;
    gap: 8px;
    align-items: baseline;
}
.admin-pager-range {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* =========================================================================
   Landing-page conversion sections (hero trust row, before/after, value
   props, FAQ, final CTA). Additive - the existing .hero, .steps, .formats,
   .pricing, .cta-section styles stay in place above.
   ========================================================================= */

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 24px;
    margin-top: 22px;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    justify-content: center;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust i { color: #6DE0B3; font-size: 11px; }

/* Before/After problem section */
.problem {
    padding: 72px 24px;
    background: var(--bg-secondary, #f5f4ef);
}
.problem-inner { max-width: 1100px; margin: 0 auto; }
.problem-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: stretch;
}
.problem-card {
    background: #fff;
    padding: 28px;
    border-radius: 16px;
    border: 1px solid var(--border-mid, #e5e7eb);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.problem-card h3 {
    margin: 12px 0 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.problem-card p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary, #555);
    margin: 0;
}
.problem-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.problem-before .problem-tag { background: #fdecec; color: #b33a3a; }
.problem-after .problem-tag {
    background: var(--teal-light, #e1f5ee);
    color: var(--teal-dark, #0a5a45);
}
.problem-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-accent, #0F6E56);
    font-size: 26px;
}
@media (max-width: 900px) {
    .problem-grid { grid-template-columns: 1fr; }
    .problem-arrow { transform: rotate(90deg); padding: 8px 0; }
}

/* Works with every AI tool - sub text */
.formats-sub {
    max-width: 600px;
    margin: 8px auto 18px;
    text-align: center;
    font-size: 14.5px;
    color: var(--text-secondary);
}

/* Value props grid */
.value-props {
    padding: 72px 24px;
    background: var(--bg-primary, #fff);
}
.value-props-inner { max-width: 1100px; margin: 0 auto; }
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}
.value-card {
    background: var(--bg-secondary, #f8f8f5);
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--border-mid, #e5e7eb);
}
.value-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-accent, #0F6E56);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}
.value-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.value-card p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
}
@media (max-width: 900px) {
    .value-grid { grid-template-columns: 1fr; }
}

/* FAQ */
.faq {
    padding: 72px 24px;
    background: var(--bg-secondary, #f5f4ef);
}
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}
.faq-item {
    background: #fff;
    border: 1px solid var(--border-mid, #e5e7eb);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    transition: box-shadow 150ms ease;
}
.faq-item[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.faq-item summary {
    padding: 16px 20px;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 22px;
    line-height: 1;
    color: var(--text-tertiary, #999);
    margin-left: 12px;
    transition: transform 150ms ease;
}
.faq-item[open] summary::after { content: '-'; }
.faq-item p {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Final CTA sub-text */
.cta-sub {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-tertiary, rgba(255,255,255,0.6));
}

/* =========================================================================
   Landing-page step mockups. Three stylized app-chrome cards that illustrate
   paste -> subdomain -> share flow. Pure HTML + CSS so they stay in sync
   with the brand accent and don't require image assets. Sized to fit above
   the step number in .steps-grid.
   ========================================================================= */
.step-mockup {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 18px;
    border-radius: 10px;
    background: #1f2024;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    text-align: left;
    font-family: var(--font-sans);
}
.mockup-chrome {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #2a2b31;
    border-bottom: 1px solid #14151a;
}
.mockup-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5a5b63;
    flex-shrink: 0;
}
.mockup-chrome .mockup-dot:nth-child(1) { background: #ff6159; }
.mockup-chrome .mockup-dot:nth-child(2) { background: #ffbd2e; }
.mockup-chrome .mockup-dot:nth-child(3) { background: #27c93f; }
.mockup-url {
    margin-left: 10px;
    padding: 3px 10px;
    background: #14151a;
    border-radius: 6px;
    color: #b8b9c0;
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mockup-url i { color: #27c93f; font-size: 9px; }

.mockup-body {
    background: #fff;
    padding: 12px;
    min-height: 140px;
}

/* Step 1 - Paste HTML */
.mockup-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-light, #eee);
    padding-bottom: 6px;
}
.mockup-tab {
    font-size: 10px;
    font-weight: 500;
    color: #888;
    padding: 4px 8px;
    border-radius: 5px;
}
.mockup-tab-active {
    background: var(--teal-light, #e1f5ee);
    color: var(--teal-dark, #0a5a45);
}
.mockup-textarea {
    background: #f7f7f5;
    border: 1px solid var(--border-light, #eee);
    border-radius: 6px;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    line-height: 1.5;
    color: #444;
    min-height: 80px;
    position: relative;
}
.mockup-code-line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mockup-code-caret {
    display: inline-block;
    width: 1px;
    height: 11px;
    background: var(--brand-accent, #0F6E56);
    animation: mockup-caret 1s step-end infinite;
    vertical-align: middle;
}
@keyframes mockup-caret {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Step 2 - Pick subdomain */
.mockup-label {
    font-size: 10px;
    font-weight: 500;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.mockup-input-row {
    display: flex;
    align-items: center;
    border: 2px solid var(--brand-accent, #0F6E56);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: #fff;
}
.mockup-input {
    color: #111;
    font-weight: 500;
}
.mockup-input::after {
    content: '|';
    color: var(--brand-accent, #0F6E56);
    margin-left: 1px;
    animation: mockup-caret 1s step-end infinite;
}
.mockup-suffix { color: #aaa; }
.mockup-available {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 3px 9px;
    background: #e4f7ee;
    color: #0a6b3c;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}
.mockup-available i { font-size: 9px; }
.mockup-btn {
    margin-top: 12px;
    background: var(--brand-accent, #0F6E56);
    color: #fff;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

/* Step 3 - Share */
.mockup-site {
    padding: 20px 14px 24px;
    text-align: center;
    background: linear-gradient(180deg, #fafaf8, #fff);
    min-height: 120px;
}
.mockup-site-hero {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    letter-spacing: -.01em;
    margin-bottom: 4px;
}
.mockup-site-sub {
    font-size: 10px;
    color: #777;
    margin-bottom: 12px;
}
.mockup-site-btn {
    display: inline-block;
    background: var(--brand-accent, #0F6E56);
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
}

@media (max-width: 800px) {
    .step-mockup { max-width: 320px; }
}

/* ===== AI prompt library on the Upload page ===== */
.prompt-library {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-mid, #e5e7eb);
}
.prompt-library-head {
    margin-bottom: 18px;
}
.prompt-library-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-primary);
}
.prompt-library-sub {
    margin-top: 4px;
    font-size: 13.5px;
    color: var(--text-secondary);
}
.prompt-block {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-mid, #e5e7eb);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.prompt-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.prompt-block-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.prompt-block-hint {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.45;
}
.prompt-copy {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 12px;
}
.prompt-code {
    margin: 0;
    padding: 12px 14px;
    background: #1f2024;
    color: #e5e7eb;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    max-height: 260px;
    overflow-y: auto;
}

/* ===== Post-publish celebration banner ===== */
.celebrate-banner {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 48px 20px 22px;
    margin: 0 0 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff9e6, #ffe8cc);
    border: 1px solid #f4d28a;
    box-shadow: 0 4px 14px rgba(201, 151, 50, 0.12);
}
.celebrate-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: #8a6a2e;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.celebrate-close:hover { color: #5a3e0f; }
.celebrate-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #d69e2e;
    font-size: 22px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.celebrate-body { flex: 1; min-width: 0; }
.celebrate-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #4a3713;
}
.celebrate-sub {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #6a4f1e;
}
.celebrate-link-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ===== Referral card (Dashboard) ===== */
.referral-card {
    background: var(--teal-light, #e1f5ee);
    border: 1px solid var(--border-mid, #e5e7eb);
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 20px;
}
.referral-card-lead {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.referral-card-lead > i {
    font-size: 22px;
    color: var(--brand-accent, #0F6E56);
    margin-top: 2px;
    flex-shrink: 0;
}
.referral-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.referral-card-sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.referral-card-link-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.referral-card-link {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--font-mono, monospace);
    border: 1px solid var(--border-mid, #e5e7eb);
    border-radius: 8px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
}
.referral-card-stats {
    display: flex;
    gap: 24px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.referral-card-stats strong {
    color: var(--text-primary);
    margin-right: 4px;
}

/* Banner on sign-up when referral code is prefilled from URL/cookie */
.auth-referral-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--brand-accent-dark, #0a5a45);
    background: rgba(15, 110, 86, 0.08);
    border: 1px solid rgba(15, 110, 86, 0.25);
    border-radius: 8px;
}

/* ===== Error pages (404/500) ===== */
.error-page {
    max-width: 540px;
    margin: 80px auto;
    padding: 40px 24px;
    text-align: center;
}
.error-code {
    font-family: var(--font-logo, sans-serif);
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-accent, #0F6E56);
    opacity: 0.35;
    letter-spacing: -.02em;
}
.error-title {
    margin: 12px 0 8px;
    font-size: 28px;
    font-weight: 600;
}
.error-sub {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
}
.error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== Stripe / billing disclosure ===== */
.stripe-disclosure {
    margin-top: 24px;
    padding: 12px 16px;
    max-width: 640px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid var(--border-mid, #e5e7eb);
    border-radius: 8px;
    text-align: center;
}

/* ===== Support article body ===== */
.article-body {
    line-height: 1.6;
    font-size: 15px;
}
.article-body h1 { font-size: 1.6rem; margin: 1.2rem 0 0.6rem; }
.article-body h2 { font-size: 1.3rem; margin: 1.2rem 0 0.5rem; }
.article-body h3 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
.article-body p { margin: 0 0 0.9rem; }
.article-body ul, .article-body ol { margin: 0 0 0.9rem 1.5rem; }
.article-body code {
    background: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.article-body pre {
    background: rgba(0,0,0,0.05);
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
}
.article-body a { color: var(--brand-accent, #0F6E56); }

/* ===== Finance / KPI ===== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 1.25rem 0;
}
.kpi-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.kpi-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
    margin-bottom: 8px;
}
.kpi-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text, #111827);
    line-height: 1.1;
}
.kpi-sub {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted, #6b7280);
}
.finance-breakdown {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 1.5rem;
}
.finance-breakdown h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
}
/* Finance filter row - every control sized identically to the date inputs */
.finance-filters { align-items: center; }
.finance-filters .admin-filter-select,
.finance-filters .admin-filter-btn {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}
@media (max-width: 768px) {
    .finance-breakdown { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Site Settings: Brand / theme panel
   ========================================================================== */

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.theme-field {
    display: flex;
    align-items: center;
    gap: 8px;
}
.theme-field .seo-label {
    flex: 0 0 90px;
    margin-bottom: 0;
}
.theme-color {
    width: 38px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    flex-shrink: 0;
}
.theme-color-text {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 13px;
}
.theme-fonts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* Header / footer raw-HTML textareas - monospace for code readability */
.chrome-html,
.custom-css-input {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
    overflow-wrap: normal;
    overflow-x: auto;
}
.custom-css-input {
    /* Slight tint to distinguish CSS editing from HTML editing in the
       sibling chrome textareas. */
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}
.custom-css-input::placeholder { color: #64748b; }
.custom-css-input:focus {
    border-color: var(--teal, #0F6E56);
    background: #0f172a;
    color: #e2e8f0;
}

/* ==========================================================================
   Site Assets: per-site image library page
   ========================================================================== */

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.asset-card {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}
.asset-card:hover { box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.06)); }
.asset-thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(45deg, #f1f5f9 25%, transparent 25%, transparent 75%, #f1f5f9 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, #f1f5f9 25%, #fff 25%, #fff 75%, #f1f5f9 75%) 8px 8px / 16px 16px;
    overflow: hidden;
}
.asset-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.asset-info {
    padding: 8px 12px 4px;
    flex: 1;
    min-width: 0;
}
.asset-name {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.asset-meta {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}
.asset-actions {
    display: flex;
    gap: 6px;
    padding: 8px 12px 12px;
}
.asset-actions .btn-outline {
    flex: 1;
    font-size: 12px;
    padding: 6px 8px;
}

/* ==========================================================================
   Editor: AI image generation progress banner
   ========================================================================== */

.aise-ai-progress {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    background: linear-gradient(135deg, #0F6E56, #138a6a);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 110, 86, 0.35);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    min-width: 320px;
    animation: aise-ai-progress-in 0.25s ease-out;
}
.aise-ai-progress i { font-size: 18px; }
@keyframes aise-ai-progress-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   Editor: element attribute side panel
   ========================================================================== */

/* Shell wraps the iframe + the docked panel. When the panel is open the
   shell becomes a flex row; the iframe shrinks via the with-panel modifier. */
.aise-editor-shell { display: contents; }
.aise-editor-shell-with-panel {
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.aise-editor-shell-with-panel .editor-frame {
    width: calc(100% - 334px);    /* 320px panel + 14px gap */
    min-width: 0;
}

.aise-attr-panel {
    width: 320px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.05));
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    overflow: hidden;
}

.aise-attr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    border-radius: var(--radius-lg, 10px) var(--radius-lg, 10px) 0 0;
    flex-shrink: 0;
}
.aise-attr-title { display: flex; align-items: center; min-width: 0; }

.aise-attr-close {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
    line-height: 1;
}
.aise-attr-close:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #e2e8f0;
}
.aise-attr-close:active { background: #e2e8f0; }

.aise-attr-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* "Insert sibling" popover anchored to the + button in the panel header */
.aise-attr-add-menu {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 20;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.aise-attr-add-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    text-align: left;
}
.aise-attr-add-row:hover { background: #f1f5f9; }

/* Brand-color quick-pick swatches under each color picker */
.aise-brand-swatches {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.aise-brand-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: transform 0.12s;
}
.aise-brand-swatch:hover { transform: scale(1.15); }

/* WCAG contrast warning chip */
.aise-contrast-warn {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fef3c7;
    color: #92400e;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}
.aise-tag-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--teal, #0F6E56);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-transform: lowercase;
    font-family: monospace;
}

.aise-attr-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px;
}
.aise-attr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.aise-attr-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.aise-attr-label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.aise-attr-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    font-size: 13px;
    background: #fff;
    box-sizing: border-box;
}
.aise-attr-input:focus {
    outline: 2px solid var(--teal, #0F6E56);
    outline-offset: -1px;
    border-color: var(--teal, #0F6E56);
}
.aise-attr-input[readonly] { background: #f8fafc; color: #64748b; }
.aise-attr-hint {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

.aise-attr-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 18px 0 14px;
}

.aise-color-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* Wrapper around the native color input so we can overlay a checkerboard
   when no inline color is set. Without this, the picker would show a solid
   white swatch and users couldn't tell that the value was actually unset. */
.aise-color-wrap {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 32px;
    flex-shrink: 0;
}
.aise-color-wrap.is-empty::after {
    content: "";
    position: absolute;
    inset: 1px;                  /* sit inside the input's border */
    border-radius: 5px;
    background:
        linear-gradient(45deg, #cbd5e1 25%, transparent 25%, transparent 75%, #cbd5e1 75%) 0 0 / 10px 10px,
        linear-gradient(45deg, #cbd5e1 25%, #fff 25%, #fff 75%, #cbd5e1 75%) 5px 5px / 10px 10px;
    pointer-events: none;        /* let clicks reach the underlying picker */
}

/* Native color input - shrink the chrome so it fits the panel row */
.aise-attr-color {
    width: 44px;
    height: 32px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    background: #fff;
    cursor: pointer;
}
.aise-attr-clear {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    background: #fff;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
}
.aise-attr-clear:hover { background: #f8fafc; }

/* Padding preset toggle group */
.aise-pad-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.aise-pad-btn {
    padding: 7px 6px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    background: #fff;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.aise-pad-btn:hover { background: #f8fafc; }
.aise-pad-btn.active {
    background: var(--teal, #0F6E56);
    border-color: var(--teal, #0F6E56);
    color: #fff;
}

/* Floating pill to reopen the panel after the user closes it. */
.aise-attr-reopen {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-light, #e2e8f0);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
    color: var(--teal, #0F6E56);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}
.aise-attr-reopen:hover { background: #f8fafc; }

@media (max-width: 1100px) {
    /* On narrower viewports the iframe gets too cramped beside a 320px panel;
       collapse the panel into an overlay anchored to the right instead. */
    .aise-editor-shell-with-panel { display: contents; }
    .aise-editor-shell-with-panel .editor-frame { width: 100%; }
    .aise-attr-panel {
        position: fixed;
        right: 14px;
        top: 92px;
        bottom: 24px;
        height: auto;
        z-index: 9;
    }
}

/* ============================================================ */
/* SEO + accessibility audit panel                              */
/* ============================================================ */

.aise-seo-panel .aise-attr-body { padding: 0; }

.aise-seo-empty {
    padding: 32px 20px;
    text-align: center;
    color: #64748b;
}
.aise-seo-empty i {
    font-size: 32px;
    color: #cbd5e1;
    margin-bottom: 12px;
}
.aise-seo-empty p {
    margin: 0 0 16px 0;
    font-size: 13px;
}

.aise-seo-score {
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.aise-seo-score-number {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}
.aise-seo-score-good .aise-seo-score-number { color: #0F6E56; }
.aise-seo-score-fair .aise-seo-score-number { color: #d97706; }
.aise-seo-score-poor .aise-seo-score-number { color: #b91c1c; }
.aise-seo-score-bar {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
}
.aise-seo-score-fill {
    height: 100%;
    transition: width 0.4s ease;
}
.aise-seo-score-good .aise-seo-score-fill { background: #0F6E56; }
.aise-seo-score-fair .aise-seo-score-fill { background: #d97706; }
.aise-seo-score-poor .aise-seo-score-fill { background: #b91c1c; }
.aise-seo-score-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.aise-seo-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.aise-seo-pill-error { background: #fee2e2; color: #b91c1c; }
.aise-seo-pill-warn { background: #fef3c7; color: #b45309; }
.aise-seo-pill-ok { background: #dcfce7; color: #166534; }

.aise-seo-cat {
    border-bottom: 1px solid #e2e8f0;
}
.aise-seo-cat-head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
}
.aise-seo-cat-head:hover { background: #f8fafc; }
.aise-seo-cat-name {
    font-weight: 600;
    color: #1e293b;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.aise-seo-cat-meta {
    font-size: 11px;
    color: #94a3b8;
}

.aise-seo-findings {
    background: #fafbfc;
    border-top: 1px solid #e2e8f0;
}
.aise-seo-finding {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #eef2f6;
}
.aise-seo-finding:last-child { border-bottom: 0; }
.aise-seo-finding-icon {
    flex: 0 0 18px;
    padding-top: 2px;
    font-size: 14px;
}
.aise-seo-error .aise-seo-finding-icon { color: #b91c1c; }
.aise-seo-warn .aise-seo-finding-icon { color: #d97706; }
.aise-seo-ok .aise-seo-finding-icon { color: #16a34a; }
.aise-seo-finding-body { flex: 1; min-width: 0; }
.aise-seo-finding-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
}
.aise-seo-finding-detail {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
    word-break: break-word;
}
.aise-seo-finding-hint {
    font-size: 11.5px;
    color: #475569;
    margin-top: 6px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 6px 8px;
}
.aise-seo-finding-hint i {
    color: #d97706;
    margin-top: 2px;
}
.aise-seo-jump {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--teal, #0F6E56);
    color: var(--teal, #0F6E56);
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.aise-seo-jump:hover { background: var(--teal, #0F6E56); color: #fff; }

.aise-seo-footer {
    padding: 12px 16px;
    font-size: 11.5px;
    color: #94a3b8;
    background: #f8fafc;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.4;
}
.aise-seo-footer i { margin-top: 2px; }

/* ============================================================ */
/* Element attribute panel: Animation picker                    */
/* ============================================================ */

.aise-anim-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
.aise-anim-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md, 6px);
    background: #fff;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    text-align: left;
}
.aise-anim-btn i {
    width: 14px;
    font-size: 12px;
    color: #94a3b8;
}
.aise-anim-btn:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}
.aise-anim-btn.active {
    background: var(--teal, #0F6E56);
    border-color: var(--teal, #0F6E56);
    color: #fff;
}
.aise-anim-btn.active i { color: rgba(255,255,255,0.85); }

.aise-anim-block {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 6px;
}
.aise-anim-target {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12px;
    color: #475569;
}
.aise-anim-target-label {
    font-weight: 600;
    color: #1e293b;
}
.aise-tag-chip-current {
    background: var(--teal, #0F6E56);
    color: #fff;
    font-family: monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.aise-anim-target-up {
    margin-left: auto;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.aise-anim-target-up:hover {
    border-color: var(--teal, #0F6E56);
    color: var(--teal, #0F6E56);
}
.aise-anim-target-up i {
    font-size: 10px;
}

/* ============================================================ */
/* Viewport bar at the top of the element attribute panel       */
/* ============================================================ */

.aise-viewport-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.aise-viewport-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.aise-viewport-pill:hover {
    border-color: #94a3b8;
}
.aise-viewport-pill.active {
    background: var(--teal, #0F6E56);
    border-color: var(--teal, #0F6E56);
    color: #fff;
}
.aise-viewport-pill i { font-size: 11px; }
.aise-viewport-note {
    margin-left: auto;
    font-size: 10.5px;
    color: #64748b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: help;
}

/* On-off switch for "Hide on mobile" + similar toggles. */
.aise-attr-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

/* ============================================================ */
/* Block parts outline                                           */
/* ============================================================ */

.aise-block-parts {
    margin: 0 14px 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    overflow: hidden;
}
.aise-block-parts-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    background: #fff;
    border-bottom: 1px solid transparent;
    -webkit-user-select: none;
    user-select: none;
}
.aise-block-parts-summary:hover { background: #f8fafc; }
.aise-block-parts:has(.aise-block-parts-list) .aise-block-parts-summary {
    border-bottom-color: #e2e8f0;
}
.aise-block-parts-summary > i { width: 12px; font-size: 10px; color: #94a3b8; }
.aise-block-parts-title { flex: 1; font-family: monospace; font-size: 11px; }
.aise-block-parts-count {
    background: #e2e8f0;
    color: #475569;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.aise-block-parts-list {
    display: flex;
    flex-direction: column;
    max-height: 240px;
    overflow-y: auto;
}
.aise-block-part {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef2f6;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s;
}
.aise-block-part:hover { background: #f1f5f9; }
.aise-block-part.is-current {
    background: rgba(15, 110, 86, 0.08);
}
.aise-block-part.is-current::before {
    content: '';
    width: 3px;
    align-self: stretch;
    background: var(--teal, #0F6E56);
    margin: -8px 4px -8px -12px;
    border-radius: 2px;
}
.aise-block-part:last-child { border-bottom: 0; }
.aise-block-part-icon {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.aise-block-part-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.aise-block-part-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}
.aise-block-part-preview {
    font-size: 12px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ============================================================ */
/* AI design audit fixes - shown collapsed under each finding   */
/* ============================================================ */

.aise-ai-fix-details {
    margin-top: 8px;
}
.aise-ai-fix-details > summary {
    cursor: pointer;
    font-size: 11.5px;
    color: var(--teal, #0F6E56);
    font-weight: 600;
}
.aise-ai-fix-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.aise-ai-fix-line {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: #475569;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 4px;
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}
.aise-applied-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
}
.aise-finding-note {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
    line-height: 1.4;
}
.aise-finding-note.is-success {
    background: #dcfce7;
    color: #166534;
}
.aise-finding-note.is-warn {
    background: #fef3c7;
    color: #b45309;
}
.aise-finding-note i { margin-top: 2px; }

/* ============================================================ */
/* Realtime collab: presence avatar row in the editor topbar    */
/* ============================================================ */

.aise-presence {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    cursor: default;
}
.aise-presence-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--teal, #0F6E56);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border: 2px solid #fff;
    margin-left: -8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.12s;
}
.aise-presence-avatar:first-child { margin-left: 0; }
.aise-presence-avatar:hover { transform: translateY(-2px) scale(1.05); }
.aise-presence-more {
    background: #cbd5e1 !important;
    color: #475569;
    font-weight: 600;
}

/* ============================================================ */
/* Admin: eNom connection test result                            */
/* ============================================================ */

.enom-test-result {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.enom-test-result.is-success {
    background: #ecfdf5;
    border-color: #a7f3d0;
}
.enom-test-result.is-error {
    background: #fef2f2;
    border-color: #fecaca;
}

/* ============================================================ */
/* TLD pricing editor                                            */
/* ============================================================ */

.tld-pricing-grid {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}
.tld-pricing-head, .tld-pricing-row {
    display: grid;
    grid-template-columns: 130px 130px 130px 1fr 36px;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
}
.tld-pricing-head {
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
}
.tld-pricing-row {
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}
.tld-pricing-row:last-child { border-bottom: 0; }
.tld-pricing-row .domain-input {
    padding: 4px 8px;
    font-size: 12.5px;
    height: 30px;
}
.tld-pricing-markup {
    font-size: 11px;
    color: #64748b;
    font-family: monospace;
}

/* ============================================================ */
/* Generic modal chrome (extracted from Editor.razor.css so any  */
/* page can render an aise-modal). Editor.razor.css still has    */
/* component-scoped overrides for its picker/AI modals.          */
/* ============================================================ */

.aise-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.aise-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.aise-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.aise-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aise-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.aise-modal-close {
    background: transparent;
    border: 0;
    color: #64748b;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.aise-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ============================================================ */
/* Billing - payment history table                              */
/* ============================================================ */

.billing-history { margin-top: 26px; }
.billing-history-title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}
.billing-history-table {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.billing-history-head,
.billing-history-row {
    display: grid;
    grid-template-columns: 130px 1fr 110px 110px 110px;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
}
.billing-history-head {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.billing-history-row {
    border-bottom: 1px solid #f1f5f9;
}
.billing-history-row:last-child { border-bottom: 0; }
.billing-history-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.billing-history-type {
    font-size: 11px;
    background: #f1f5f9;
    color: #475569;
    padding: 3px 8px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    width: max-content;
}
.billing-history-status {
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.billing-history-status-succeeded { color: #166534; }
.billing-history-status-refunded  { color: #b45309; }
.billing-history-status-failed    { color: #b91c1c; }

/* ============================================================ */
/* "Sell this Website" CTA + listing form                       */
/* ============================================================ */

.btn-sell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0F6E56, #14b88f);
    color: #fff !important;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 110, 86, 0.25);
    transition: transform 0.12s, box-shadow 0.12s;
}
.btn-sell:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 110, 86, 0.35);
    color: #fff !important;
}
.btn-sell i { font-size: 13px; }

.sell-page {
    max-width: 880px;
    margin: 0 auto;
    padding: 20px 24px 60px;
}
.sell-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 18px;
}
.sell-card h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}
.sell-card p.sell-desc {
    margin: 0 0 14px 0;
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.5;
}
.sell-field { margin-bottom: 14px; }
.sell-field label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 5px;
}
.sell-field input,
.sell-field textarea,
.sell-field select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
}
.sell-field textarea { resize: vertical; min-height: 100px; }
.sell-field-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
}
.sell-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 640px) {
    .sell-row-2 { grid-template-columns: 1fr; }
}
.sell-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
}
.sell-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 6px;
}
.sell-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}
.sell-status-pill.is-draft     { background: #f1f5f9; color: #475569; }
.sell-status-pill.is-published { background: #dcfce7; color: #166534; }
.sell-status-pill.is-unlisted  { background: #fef3c7; color: #b45309; }
.sell-status-pill.is-removed   { background: #fee2e2; color: #b91c1c; }

/* ---------- Payouts (Stripe Connect onboarding) ---------- */
.payouts-page { max-width: 720px; padding: 0 0 60px; }
.payouts-loading { padding: 32px 0; color: #64748b; }
.payouts-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px; margin-top: 8px; }
.payouts-card.payouts-ready { border-color: #bbf7d0; background: #f0fdf4; }
.payouts-card.payouts-pending { border-color: #fde68a; background: #fffbeb; }
.payouts-card-head { display: flex; gap: 18px; align-items: flex-start; }
.payouts-icon {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #e0e7ff; color: #4338ca; font-weight: 700; font-size: 20px;
}
.payouts-ready .payouts-icon { background: #bbf7d0; color: #166534; }
.payouts-pending .payouts-icon { background: #fde68a; color: #b45309; }
.payouts-card-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.payouts-card-sub { font-size: 14px; color: #475569; line-height: 1.55; }
.payouts-meta { margin: 18px 0; font-size: 13px; color: #334155; }
.payouts-meta-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.payouts-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 100px; font-size: 12px; font-weight: 600;
}
.payouts-pill-on { background: #dcfce7; color: #166534; }
.payouts-pill-off { background: #fee2e2; color: #991b1b; }
.payouts-breakdown { margin: 18px 0; padding: 16px 18px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; }
.payouts-breakdown-title { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #475569; margin-bottom: 8px; }
.payouts-breakdown ul { margin: 0; padding-left: 18px; color: #334155; font-size: 14px; line-height: 1.7; }
.payouts-actions { display: flex; gap: 10px; margin-top: 4px; }
.payouts-error { margin-top: 16px; padding: 12px 14px; background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; font-size: 14px; }

/* Sell page: Connect prerequisite block */
.sell-connect-gate {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    display: flex; gap: 14px; align-items: flex-start;
}
.sell-connect-gate.is-ready { background: #f0fdf4; border-color: #bbf7d0; }
.sell-connect-gate-icon { font-size: 20px; flex-shrink: 0; }
.sell-connect-gate-title { font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.sell-connect-gate-body { font-size: 14px; color: #475569; line-height: 1.55; }
.sell-connect-gate-cta { margin-top: 8px; }

/* ---------- Public listing buy bar (sticky bottom checkout) ---------- */
.listing-buy-bar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
    z-index: 100;
    padding: 14px 20px;
}
.listing-buy-bar-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.listing-buy-bar-copy { min-width: 0; }
.listing-buy-bar-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.listing-buy-bar-sub { font-size: 13px; color: #64748b; margin-top: 2px; }
.listing-buy-bar-form { display: flex; gap: 8px; align-items: center; }
.listing-buy-bar-form input[type=email] {
    width: 240px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 14px; font-family: inherit;
}
.listing-buy-bar-form input[type=email]:focus { outline: 2px solid #4338ca; outline-offset: -1px; }
.listing-buy-bar-form button { padding: 10px 18px; }
.listing-buy-bar-error { grid-column: 1 / -1; color: #b91c1c; font-size: 13px; }
.listing-buy-bar-maint {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 8px; font-size: 13px; color: #334155;
    cursor: pointer; -webkit-user-select: none; user-select: none;
}
.listing-buy-bar-maint input[type=checkbox] { margin: 0; }

.listing-buy-bar-domain {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
}
.listing-buy-bar-domain-label {
    font-size: 12px; font-weight: 700;
    color: #64748b;
    letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 6px;
}
.listing-buy-bar-domain-row {
    display: flex; gap: 6px; align-items: center;
}
.listing-buy-bar-domain-row input[type=text] {
    flex: 1; max-width: 220px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 13px; font-family: inherit;
}
.listing-buy-bar-domain-check { padding: 8px 14px; font-size: 13px; }
.listing-buy-bar-domain-error { margin-top: 6px; color: #b91c1c; font-size: 12px; }

/* ---------- Welcome page progress steps ---------- */
.welcome-progress {
    display: flex; flex-direction: column; gap: 8px;
    margin: 18px auto;
    max-width: 320px;
    text-align: left;
}
.welcome-step {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px; color: #64748b;
}
.welcome-step.active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.welcome-step.done   { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.welcome-step.failed { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.welcome-step-icon {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 1px solid currentColor;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
    flex-shrink: 0;
}
.welcome-email-fix {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed #e2e8f0;
    text-align: left;
}
.welcome-link-btn {
    background: none; border: 0; padding: 0;
    color: #4338ca; font-size: 13px; cursor: pointer; font-family: inherit;
    text-decoration: underline;
}
.welcome-email-form {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.welcome-email-form input[type=email] {
    flex: 1; min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 14px; font-family: inherit;
}
.welcome-email-form .btn-outline,
.welcome-email-form .btn-primary { padding: 8px 14px; font-size: 13px; }
.welcome-email-error { margin-top: 8px; color: #b91c1c; font-size: 13px; }
.welcome-email-ok { margin-top: 8px; color: #166534; font-size: 13px; }

/* ---------- Upload page framework-apps disclosure ---------- */
.upload-framework-note {
    margin-top: 12px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.upload-framework-note summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    -webkit-user-select: none;
    user-select: none;
}
.upload-framework-note[open] summary { color: #0f172a; margin-bottom: 8px; }
.upload-framework-body { font-size: 13px; color: #475569; line-height: 1.55; }
.upload-framework-body p { margin: 4px 0; }
.upload-framework-body ul { margin: 6px 0 8px; padding-left: 20px; }
.upload-framework-body li { margin: 4px 0; }
.upload-framework-body code {
    background: #e2e8f0; padding: 1px 5px; border-radius: 3px; font-size: 12px;
}
.upload-framework-foot { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #cbd5e1; color: #64748b; }

/* ---------- Admin Articles: AI Doc Agent panel ---------- */
.doc-agent-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.doc-agent-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.doc-agent-title { font-size: 15px; font-weight: 700; color: #0f172a; }
.doc-agent-sub { font-size: 12px; color: #64748b; margin-top: 3px; }
.doc-agent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-agent-actions .btn-outline,
.doc-agent-actions .btn-primary { padding: 6px 12px; font-size: 13px; }
.doc-agent-message {
    margin-top: 10px; padding: 8px 12px;
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
    font-size: 13px; color: #166534;
}
.doc-agent-list {
    margin-top: 12px;
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 8px;
    max-height: 540px; overflow-y: auto;
}
.doc-agent-empty { padding: 20px; text-align: center; color: #94a3b8; font-size: 13px; }
.doc-agent-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
}
.doc-agent-row-kind {
    align-self: start;
    padding: 3px 8px; border-radius: 100px;
    text-align: center; text-transform: uppercase;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.doc-agent-row-kind.kind-new { background: #dbeafe; color: #1e40af; }
.doc-agent-row-kind.kind-improve { background: #ede9fe; color: #6b21a8; }
.doc-agent-row-title { font-weight: 600; color: #0f172a; margin-bottom: 2px; }
.doc-agent-row-meta { font-size: 11px; color: #64748b; }
.doc-agent-row-meta code { background: #e2e8f0; padding: 1px 5px; border-radius: 3px; }
.doc-agent-row-reasoning { font-size: 12px; color: #475569; margin-top: 4px; line-height: 1.5; }
.doc-agent-status { font-weight: 700; }
.doc-agent-status.status-pending { color: #b45309; }
.doc-agent-status.status-drafted { color: #1e40af; }
.doc-agent-status.status-published { color: #166534; }
.doc-agent-status.status-dismissed { color: #6b7280; }
.doc-agent-row-actions { display: flex; gap: 6px; align-items: center; }
.doc-agent-row-actions .btn-outline { padding: 4px 10px; font-size: 12px; }
.doc-agent-dismiss { color: #b91c1c; border-color: #fecaca; }

/* ---------- My purchases cards ---------- */
.purchases-list { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.purchase-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 18px 20px;
}
.purchase-card-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    margin-bottom: 14px;
}
.purchase-card-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.purchase-card-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.purchase-card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    padding: 12px 14px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px;
}
.purchase-meta-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #64748b; margin-bottom: 2px;
}
.purchase-meta-value { font-size: 14px; font-weight: 600; color: #0f172a; }
.purchase-meta-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.purchase-card-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Public marketplace index ---------- */
.marketplace-hero {
    max-width: 720px; margin: 60px auto 24px; text-align: center; padding: 0 20px;
}
.marketplace-hero h1 {
    font-size: clamp(28px, 4vw, 44px); font-weight: 700;
    margin: 0 0 12px; color: #0f172a; letter-spacing: -0.02em;
}
.marketplace-hero p {
    font-size: 16px; color: #64748b; line-height: 1.55; max-width: 540px; margin: 0 auto;
}
.marketplace-grid {
    max-width: 1200px;
    margin: 32px auto 80px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}
.marketplace-card {
    background: #fff;
    border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: flex; flex-direction: column; gap: 10px;
}
.marketplace-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}
.marketplace-card-headline {
    font-size: 17px; font-weight: 700; color: #0f172a; line-height: 1.3;
}
.marketplace-card-audience {
    font-size: 12px; color: #64748b; line-height: 1.5;
}
.marketplace-card-price {
    margin-top: auto;
    font-size: 20px; font-weight: 700; color: #0f172a;
}
.marketplace-card-maint {
    display: block; font-size: 12px; font-weight: 500; color: #64748b; margin-top: 2px;
}
.marketplace-card-cta {
    font-size: 13px; font-weight: 600; color: #4338ca;
}

/* ---------- Admin marketplace pages ---------- */
.purchase-pill {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 100px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: capitalize;
}
.purchase-pill.is-pending  { background: #f1f5f9; color: #475569; }
.purchase-pill.is-paid     { background: #dbeafe; color: #1e40af; }
.purchase-pill.is-cloned   { background: #dcfce7; color: #166534; }
.purchase-pill.is-refunded { background: #fee2e2; color: #991b1b; }
.purchase-pill.is-failed   { background: #fee2e2; color: #b91c1c; }

.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 200;
    padding: 20px;
}
.modal {
    background: #fff; border-radius: 14px;
    padding: 24px; max-width: 520px; width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
}
.modal h3 { margin-top: 0; margin-bottom: 8px; }
.modal p { color: #475569; line-height: 1.55; }
.modal code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 13px; }

/* ---------- Seller marketplace performance metrics ---------- */
.sell-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 8px;
}
.sell-metric {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
}
.sell-metric-value {
    font-size: 28px; font-weight: 700;
    color: #0f172a; line-height: 1.1;
}
.sell-metric-label {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #475569; margin-top: 4px;
}
.sell-metric-sub {
    font-size: 12px; color: #94a3b8; margin-top: 4px;
}
@media (max-width: 640px) {
    .sell-metrics { grid-template-columns: 1fr; }
}
.public-listing-frame { padding-bottom: 90px; } /* push iframe up so buy bar doesn't overlap */
@media (max-width: 640px) {
    .listing-buy-bar-inner { grid-template-columns: 1fr; gap: 10px; }
    .listing-buy-bar-form { flex-direction: column; align-items: stretch; }
    .listing-buy-bar-form input[type=email] { width: 100%; }
}

.sell-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    gap: 12px;
}
.sell-preview-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 12.5px;
    color: #475569;
    font-family: monospace;
}
.sell-preview-frame {
    width: 100%;
    height: calc(100vh - 110px);
    border: 0;
    background: #fff;
    display: block;
}

/* Public marketplace listing page (anonymous) - full viewport iframe. */
.public-listing-frame {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    border: 0;
    background: #fff;
}
.public-listing-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: 24px;
    text-align: center;
    color: #475569;
    gap: 8px;
}
.public-listing-spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #e2e8f0;
    border-top-color: var(--teal, #0F6E56);
    animation: public-listing-spin 0.8s linear infinite;
    margin-bottom: 6px;
}
@keyframes public-listing-spin {
    to { transform: rotate(360deg); }
}



@media (max-width: 720px) {
    .billing-history-head, .billing-history-row {
        grid-template-columns: 1fr 1fr;
    }
    .billing-history-head { display: none; }
    .billing-history-row { padding: 12px 14px; }
}


/* ============================================================ */
/* Domain registration quote + status banners                    */
/* ============================================================ */

.domain-mode-select {
    flex: 0 0 auto;
    width: 180px;
    background: #f8fafc;
}
.domain-quote {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}
.domain-quote.is-available { background: #ecfdf5; border-color: #a7f3d0; }
.domain-quote.is-unavailable { background: #fef2f2; border-color: #fecaca; }
.domain-quote-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    gap: 8px;
    align-items: center;
}
.domain-quote-title i { color: #0F6E56; }
.domain-quote-prices {
    display: flex;
    gap: 24px;
    margin: 12px 0 14px;
    flex-wrap: wrap;
}
.domain-quote-price {
    font-size: 22px;
    font-weight: 700;
    color: #0F6E56;
    margin-right: 6px;
}
.domain-quote-label { font-size: 12px; color: #475569; }
.domain-registration-banner {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.domain-registration-banner.is-registration_failed { background: #fef2f2; color: #b91c1c; }
.domain-registration-banner.is-canceled { background: #f1f5f9; color: #475569; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.contact-grid-full { grid-column: 1 / -1; }
@media (max-width: 600px) {
    .contact-grid { grid-template-columns: 1fr; }
}