/* =================================================================
   LIGAHOSTING — UNIFIED DESIGN SYSTEM
   Cyberpunk-tech vibe: gradient purple→cyan→red, JetBrains Mono on
   numbers/codes, grid mask backgrounds, status pills, glitch accents.
   Single source of truth — replaces all previous CSS files.

   Layout strategy: full-width fluid container with responsive padding.
   On wide screens (1920px+) content fills the screen with ~64px padding.
   On mobile, padding shrinks to 16px. Text-heavy pages (terms/privacy/
   article body) opt-in to .container-text (max 720px) for readability.
   ================================================================= */


/* =================================================================
   1.  RESET
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body  {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a    { color: var(--purple-3); text-decoration: none; transition: color .15s; }
a:hover { color: var(--cyan); }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: transparent; }
table { border-collapse: collapse; width: 100%; }


/* =================================================================
   2.  DESIGN TOKENS
   ================================================================= */

:root {
    /* Backgrounds */
    --bg:           #0a0a14;
    --bg-2:         #0e0e1c;
    --bg-card:      #11112a;
    --bg-elev:      #161634;
    --bg-input:     #0c0c20;

    /* Borders */
    --border:        rgba(139, 92, 246, 0.14);
    --border-strong: rgba(139, 92, 246, 0.28);
    --border-soft:   rgba(255, 255, 255, 0.06);

    /* Brand */
    --purple-1:  #6c5ce7;
    --purple-2:  #7c3aed;
    --purple-3:  #8b5cf6;
    --purple-4:  #a78bfa;
    --cyan:      #22d3ee;
    --cyan-2:    #06b6d4;
    --red:       #ef4444;
    --green:     #10b981;
    --orange:    #f59e0b;
    --yellow:    #fbbf24;

    /* Tinted backgrounds (for soft pills + ghost states) */
    --purple-soft:  rgba(139, 92, 246, 0.10);
    --cyan-soft:    rgba(34, 211, 238, 0.10);
    --green-soft:   rgba(16, 185, 129, 0.10);
    --red-soft:     rgba(239, 68, 68, 0.10);
    --orange-soft:  rgba(245, 158, 11, 0.10);

    /* Text */
    --text:        #ffffff;
    --text-2:      rgba(255, 255, 255, 0.72);
    --text-muted:  rgba(255, 255, 255, 0.45);
    --text-dim:    rgba(255, 255, 255, 0.28);

    /* Gradient (the signature) */
    --grad-brand:    linear-gradient(135deg, #8b5cf6 0%, #22d3ee 50%, #ef4444 100%);
    --grad-purple:   linear-gradient(135deg, #6c5ce7 0%, #8b5cf6 100%);
    --grad-cyan:     linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
    --grad-card:     linear-gradient(135deg, rgba(139,92,246,0.06), rgba(34,211,238,0.03));
    --grad-card-hover: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(34,211,238,0.05));

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:   0 4px 14px rgba(0,0,0,0.4);
    --shadow-lg:   0 12px 40px rgba(0,0,0,0.5);
    --glow-purple: 0 0 22px rgba(139, 92, 246, 0.32);
    --glow-cyan:   0 0 22px rgba(34, 211, 238, 0.28);
    --glow-red:    0 0 22px rgba(239, 68, 68, 0.28);

    /* Radius */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Layout — responsive horizontal padding via clamp(min, fluid, max).
       Mobile: 16px. Desktop ~1080px: ~40px. Wide ~1920px: ~64px. */
    --pad-x: clamp(1rem, 4vw, 4rem);
    --header-h: 64px;
    --sidebar-w: 252px;

    /* Type stacks */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}


/* =================================================================
   3.  TYPOGRAPHY
   ================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text);
}
h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.05rem; }
p  { color: var(--text-2); }

code, kbd, pre, .mono { font-family: var(--font-mono); }

/* Brand gradient text — used on numbers, hero lines, hero titles */
.gradient-text,
.text-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.code-display {
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}

.eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--purple-4);
}


/* =================================================================
   4.  GLOBAL BACKGROUND (cyberpunk grid + gradient mask)
   ================================================================= */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 20% 0%,   rgba(139, 92, 246, 0.15), transparent 50%),
        radial-gradient(ellipse 60% 50% at 80% 100%, rgba(34, 211, 238, 0.10), transparent 50%),
        radial-gradient(ellipse 50% 50% at 50% 50%,  rgba(239, 68, 68, 0.04), transparent 50%);
}
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}


/* =================================================================
   5.  LAYOUT — fluid full-width container + utility grids
   ================================================================= */

/* THE container: fluid full-width with responsive horizontal padding.
   No max-width — content fills the screen edge to edge. */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* Narrow variant for forms / centered cards (auth pages, profile editor). */
.container-narrow {
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* Text-heavy reading width for legal/article body (terms, privacy, article).
   Caps at 720px because long-line prose hurts readability. */
.container-text {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

.section          { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.section-tight    { padding: clamp(1.5rem, 3vw, 2.5rem) 0; }

/* "Banded" full-bleed sections that get a different background colour.
   Use as <section class="section-band"><div class="container">…</div></section>
   The band itself is full-width, the inner container handles the padding. */
.section-band {
    background: rgba(255, 255, 255, 0.015);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.section-header   { margin-bottom: 2.5rem; text-align: center; }
.section-header h2 { margin-bottom: 0.5rem; }
.section-header p  { max-width: 600px; margin: 0 auto; color: var(--text-muted); }

/* utility grids */
.u-stack       { display: flex; flex-direction: column; gap: 1rem; }
.u-stack-sm    { display: flex; flex-direction: column; gap: 0.5rem; }
.u-stack-lg    { display: flex; flex-direction: column; gap: 1.5rem; }
.u-row         { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.u-row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.u-grid-2      { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.u-grid-3      { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.u-grid-4      { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.u-grid-auto   { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

@media (max-width: 880px) {
    .u-grid-2, .u-grid-3, .u-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 880px) {
    .u-grid-3, .u-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.u-text-center  { text-align: center; }
.u-text-right   { text-align: right; }
.u-text-muted   { color: var(--text-muted); }
.u-text-dim     { color: var(--text-dim); }
.u-text-2       { color: var(--text-2); }
.u-text-mono    { font-family: var(--font-mono); }
.u-text-sm      { font-size: 0.875rem; }
.u-text-xs      { font-size: 0.78rem; }

.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-1 { margin-bottom: 0.5rem; }
.u-mb-2 { margin-bottom: 1rem; }
.u-mb-3 { margin-bottom: 1.5rem; }
.u-mb-4 { margin-bottom: 2rem; }
.u-mt-3 { margin-top: 1.5rem; }
.u-mt-4 { margin-top: 2rem; }

.u-flex-1 { flex: 1; }


/* =================================================================
   6.  HEADER / NAVBAR (public + client share this)
   ================================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(10, 10, 20, 0.7);
    border-bottom: 1px solid var(--border-soft);
}

.nav {
    display: flex;
    align-items: center;
    height: var(--header-h);
    gap: 1.5rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}
.nav-brand img { height: 28px; width: auto; }
.nav-brand:hover { color: var(--text); }

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    color: var(--text-2);
    font-size: 0.92rem;
    font-weight: 500;
    transition: all .15s;
}
.nav-link:hover    { color: var(--text); background: var(--purple-soft); }
.nav-link.active   { color: var(--purple-4); background: var(--purple-soft); }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    color: var(--text-2);
    transition: all .15s;
}
.nav-bell:hover { color: var(--text); background: var(--purple-soft); }
.nav-bell-dot {
    position: absolute;
    top: 6px; right: 8px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--bg);
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--r-pill);
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
    transition: all .15s;
    position: relative;
}
.nav-user:hover { color: var(--text); border-color: var(--border-strong); }
.nav-user-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--grad-cyan);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.nav-user-caret { opacity: 0.6; }

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .15s;
    z-index: 60;
}
.nav-user-wrap:hover .nav-dropdown,
.nav-user-wrap:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a, .nav-dropdown button {
    display: block;
    padding: 8px 12px;
    width: 100%;
    text-align: left;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: 0.88rem;
    font-weight: 500;
    transition: all .12s;
}
.nav-dropdown a:hover, .nav-dropdown button:hover {
    color: var(--text);
    background: var(--purple-soft);
}
.nav-dropdown hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
    margin: 4px 0;
}

.lang-switch {
    display: inline-flex;
    gap: 2px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-pill);
    padding: 3px;
}
.lang-switch a {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
    transition: all .15s;
}
.lang-switch a:hover  { color: var(--text); }
.lang-switch a.active { background: var(--purple-soft); color: var(--purple-4); }

.nav-burger {
    display: none;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    color: var(--text);
    align-items: center; justify-content: center;
}
.nav-burger:hover { background: var(--purple-soft); }

@media (max-width: 880px) {
    .nav-links {
        display: none;
        position: absolute;
        top: var(--header-h);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--bg-card);
        border-top: 1px solid var(--border-soft);
        padding: 1rem;
        gap: 0;
    }
    .nav-links.open { display: flex; }
    .nav-link { padding: 12px 14px; border-radius: var(--r-md); }
    .nav-burger { display: inline-flex; }
}
@media (max-width: 480px) {
    .nav {
        gap: 0.5rem;
    }
    .nav-brand img {
        height: 20px;
        max-width: 170px;
    }
    .nav-actions {
        gap: 0.25rem;
    }
}


/* =================================================================
   7.  FOOTER
   ================================================================= */

.site-footer {
    margin-top: 4rem;
    padding: 3rem 0 1.5rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(10, 10, 20, 0.4);
    backdrop-filter: blur(8px);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}
.footer-col h5 {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a {
    color: var(--text-2);
    font-size: 0.92rem;
    transition: color .15s;
}
.footer-col a:hover { color: var(--purple-4); }
.footer-tagline {
    color: var(--text-2);
    margin: 0.75rem 0 1rem;
    line-height: 1.6;
}
.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    background: var(--green-soft);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-mono);
}
.footer-bottom {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.footer-bottom-links { display: flex; gap: 1rem; }
.footer-bottom-links a { color: var(--text-muted); }
.footer-bottom-links a:hover { color: var(--purple-4); }
.footer-company-block {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    .footer-grid > *:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; }
}


/* =================================================================
   8.  STATUS PILLS  ("HTTP 200 · OK", "Active", etc.)
   ================================================================= */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--purple-soft);
    border: 1px solid var(--border-strong);
    color: var(--purple-4);
}
.pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--purple-4);
    box-shadow: 0 0 0 4px var(--purple-soft);
    animation: pulse 2s infinite;
}
.pill.is-success { background: var(--green-soft); border-color: rgba(16,185,129,0.3);  color: #6ee7b7; }
.pill.is-success .pill-dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.pill.is-warn    { background: var(--orange-soft); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
.pill.is-warn    .pill-dot { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.pill.is-error   { background: var(--red-soft);  border-color: rgba(239,68,68,0.3);   color: #fca5a5; }
.pill.is-error   .pill-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }
.pill.is-cyan    { background: var(--cyan-soft); border-color: rgba(34,211,238,0.3);  color: #67e8f9; }
.pill.is-cyan    .pill-dot { background: var(--cyan); box-shadow: 0 0 0 4px var(--cyan-soft); }
.pill.is-muted   { background: rgba(255,255,255,0.04); border-color: var(--border-soft); color: var(--text-muted); }
.pill.is-muted   .pill-dot { background: var(--text-muted); box-shadow: 0 0 0 4px rgba(255,255,255,0.04); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--purple-soft);
    color: var(--purple-4);
    white-space: nowrap;
}
.badge-active, .badge-paid, .badge-completed, .badge-approved
                { background: var(--green-soft); color: #6ee7b7; }
.badge-pending, .badge-unpaid, .badge-on-hold, .badge-pending_register, .badge-pending_transfer
                { background: var(--orange-soft); color: #fcd34d; }
.badge-suspended, .badge-failed, .badge-rejected, .badge-cancelled, .badge-expired, .badge-banned, .badge-fraud, .badge-terminated, .badge-transferred_out, .badge-refunded
                { background: var(--red-soft); color: #fca5a5; }
.badge-in_progress, .badge-open
                { background: var(--cyan-soft); color: #67e8f9; }
.badge-closed   { background: rgba(255,255,255,0.06); color: var(--text-muted); }


/* =================================================================
   9.  BUTTONS
   ================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--r-md);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: all .18s;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1;
    cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: var(--grad-cyan);
    color: #fff;
    box-shadow: 0 8px 22px rgba(139, 92, 246, 0.28);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(139, 92, 246, 0.4);
    color: #fff;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-soft);
    color: var(--text);
}
.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--purple-4);
}
.btn-outline:hover:not(:disabled) {
    background: var(--purple-soft);
    color: var(--text);
}

.btn-danger {
    background: var(--red-soft);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}
.btn-danger:hover:not(:disabled) {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.btn-success {
    background: var(--green);
    color: #fff;
}
.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.4);
    color: #fff;
}

.btn-sm { padding: 7px 14px; font-size: 0.85rem; }
.btn-lg { padding: 14px 28px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 38px; height: 38px; }


/* =================================================================
   10.  CARDS
   ================================================================= */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.card.is-elev   { background: var(--bg-elev); }
.card.is-grad   { background-image: var(--grad-card), linear-gradient(var(--bg-card), var(--bg-card)); }
.card.is-flush  { padding: 0; }
.card.is-clickable { cursor: pointer; }
.card.is-clickable:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.card.has-accent::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-brand);
    opacity: 0.8;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-soft);
    flex-wrap: wrap;
}
.card-head h3 { margin: 0; font-size: 1rem; }
.card-body  { padding: 1.5rem; }
.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.02);
}


/* =================================================================
   11.  STAT TILE
   ================================================================= */

.stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: all .2s;
}
.stat::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40px; height: 2px;
    background: var(--grad-brand);
    opacity: 0.7;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.stat-value {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
}
.stat-value.is-gradient {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-value.is-success { color: #6ee7b7; }
.stat-value.is-warn    { color: #fcd34d; }
.stat-value.is-error   { color: #fca5a5; }
.stat-sub {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.stat-icon {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 24px; height: 24px;
    color: var(--purple-4);
    opacity: 0.5;
}


/* =================================================================
   12.  KEY-VALUE LIST
   ================================================================= */

.kv {
    list-style: none;
    margin: 0; padding: 0;
}
.kv > li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.92rem;
}
.kv > li:last-child { border-bottom: 0; }
.kv .kv-k {
    color: var(--text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.kv .kv-v {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}
.kv .kv-v.is-mono { font-family: var(--font-mono); }


/* =================================================================
   13.  TABLE
   ================================================================= */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-card);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.table thead th {
    padding: 12px 16px;
    text-align: left;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}
.table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-2);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: rgba(139, 92, 246, 0.04); }
.table .num { font-family: var(--font-mono); }
.table .text-right { text-align: right; }

.table-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}


/* =================================================================
   14.  FORMS
   ================================================================= */

.form-row { margin-bottom: 1.25rem; }
.form-row > label,
.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-2);
}

.form-control,
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=tel], input[type=url], input[type=date], input[type=datetime-local],
textarea, select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: 0.95rem;
    transition: all .15s;
    font-family: inherit;
}
.form-control:focus,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=number]:focus, input[type=tel]:focus, input[type=url]:focus,
input[type=date]:focus, input[type=datetime-local]:focus,
textarea:focus, select:focus {
    outline: 0;
    border-color: var(--purple-3);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}
textarea { min-height: 100px; resize: vertical; line-height: 1.5; }
.form-control.is-mono { font-family: var(--font-mono); font-size: 0.88rem; }

.form-help  { margin-top: 6px; font-size: 0.78rem; color: var(--text-muted); }
.form-error { margin-top: 6px; font-size: 0.85rem; color: #fca5a5; }

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.form-check input[type="checkbox"], .form-check input[type="radio"] {
    width: 16px; height: 16px;
    accent-color: var(--purple-3);
    cursor: pointer;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 36px;
}

.input-group { display: flex; gap: 0; }
.input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* =================================================================
   15.  FLASH
   ================================================================= */

.flash {
    margin: 0;
    padding: 0.78rem 0.85rem;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(34,211,238,0.055), transparent 55%),
        rgba(17,17,42,0.96);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-2);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    box-shadow: 0 18px 48px rgba(0,0,0,0.34);
}
.flash-stack {
    position: fixed;
    top: calc(var(--header-h) + 14px);
    right: 18px;
    z-index: 1200;
    width: min(390px, calc(100vw - 24px));
    display: grid;
    gap: 0.55rem;
    pointer-events: none;
}
.flash-stack .flash {
    pointer-events: auto;
}
.flash-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: rgba(255,255,255,0.035);
}
.flash-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.flash-copy {
    flex: 1;
    color: inherit;
    line-height: 1.4;
}
.flash.is-success { color: #6ee7b7; }
.flash.is-error   { color: #fca5a5; }
.flash.is-warn    { color: #fcd34d; }
.flash.is-info    { color: #67e8f9; }
@media (max-width: 640px) {
    .flash-stack {
        top: calc(var(--header-h) + 8px);
        right: 12px;
    }
}


/* =================================================================
   16.  EMPTY STATE
   ================================================================= */

.empty {
    text-align: center;
    padding: 3.5rem 1.5rem;
    color: var(--text-muted);
}
.empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 1rem;
    color: var(--purple-3);
    opacity: 0.5;
}
.empty h3 {
    margin-bottom: 0.5rem;
    color: var(--text-2);
}


/* =================================================================
   17.  PAGE HEADER
   ================================================================= */

.page-header {
    margin-bottom: 1.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.page-header h1 {
    margin: 0 0 4px;
    font-size: clamp(1.5rem, 2.6vw, 1.85rem);
}
.page-header p { margin: 0; color: var(--text-muted); }
.page-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }


/* =================================================================
   18.  HERO
   ================================================================= */

.hero {
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
    position: relative;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: center;
}
.hero h1 {
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    margin: 0.75rem 0;
}
.hero p {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-2);
    max-width: 540px;
    margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 880px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
}


/* =================================================================
   19.  TERMINAL
   ================================================================= */

.terminal {
    background: #050514;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--glow-purple);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.6;
}
.terminal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-soft);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.is-r { background: #ef4444; }
.terminal-dot.is-y { background: #f59e0b; }
.terminal-dot.is-g { background: #10b981; }
.terminal-title {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.terminal-body { padding: 1.25rem; color: #d1d5db; }
.terminal-body .t-line { white-space: pre; overflow: hidden; }
.terminal-body .t-prompt { color: var(--cyan); margin-right: 8px; }
.terminal-body .t-out    { color: var(--text-muted); }
.terminal-body .t-ok     { color: #6ee7b7; }
.terminal-body .t-warn   { color: #fcd34d; }
.terminal-body .t-cursor { display: inline-block; width: 8px; height: 1em; background: var(--cyan); animation: blink 1s steps(2) infinite; vertical-align: text-bottom; }
@keyframes blink { 50% { opacity: 0; } }


/* =================================================================
   20.  PAGINATION
   ================================================================= */

.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    color: var(--text-2);
    font-size: 0.88rem;
    font-family: var(--font-mono);
    transition: all .15s;
}
.pagination a:hover  { border-color: var(--border-strong); color: var(--text); }
.pagination .active  { background: var(--purple-soft); border-color: var(--purple-3); color: var(--purple-4); }
.pagination .disabled { opacity: 0.4; pointer-events: none; }


/* =================================================================
   21.  ADMIN SHELL
   ================================================================= */

.admin-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

.admin-side {
    background: var(--bg-2);
    border-right: 1px solid var(--border-soft);
    padding: 0.9rem 0;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    z-index: 40;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.admin-side::-webkit-scrollbar { width: 6px; }
.admin-side::-webkit-scrollbar-track { background: transparent; }
.admin-side::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 999px;
}
.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 1.1rem 0.9rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 0.45rem;
    color: var(--text);
}
.admin-brand img { height: 26px; }
.admin-brand-tag {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cyan);
    padding: 2px 7px;
    background: var(--cyan-soft);
    border-radius: var(--r-sm);
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.admin-nav { display: flex; flex-direction: column; padding: 0 0.7rem; }
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--text-2);
    border-radius: var(--r-sm);
    margin-bottom: 2px;
    transition: all .12s;
}
.admin-nav a:hover  { color: var(--text); background: var(--purple-soft); }
.admin-nav a.active { color: var(--purple-4); background: var(--purple-soft); }
.admin-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.88; }
.admin-nav-section {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 10px 11px 5px;
}

/* Admin main: full-width fluid padding so dashboard tables/stats can stretch. */
.admin-main { padding: 1.5rem var(--pad-x) 3rem; min-width: 0; }

.admin-topbar {
    display: none;
    height: var(--header-h);
    padding: 0 1rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.admin-topbar .nav-burger { display: inline-flex; }

@media (max-width: 880px) {
    .admin-shell { grid-template-columns: 1fr; }
    .admin-topbar { display: flex; }
    .admin-side {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        transition: transform .25s;
        box-shadow: var(--shadow-lg);
    }
    .admin-side.open { transform: translateX(0); }
    .admin-side-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 39;
        display: none;
    }
    .admin-side.open + .admin-side-overlay { display: block; }
    .admin-main { padding: 1rem 1.25rem 2rem; }

    /* Prevent any wide child (long tables, code blocks, very long URLs in
       form fields) from blowing past the viewport and dragging the whole
       layout sideways. Children that legitimately need horizontal scroll
       (.table-wrap, <pre>) already opt in via overflow-x:auto so they keep
       their own scrollbar instead of inheriting this clip. */
    .admin-main { min-width: 0; max-width: 100vw; overflow-x: hidden; }
    .admin-shell { max-width: 100vw; overflow-x: hidden; }

    /* Force the shell to lay out as a normal block stack on mobile rather
       than as a CSS grid. With grid + min-height:100vh + the (fixed-out-of-
       flow) sidebar/overlay items, some browsers were placing the <main>
       in an auto row that ended up far below the topbar — producing the
       big empty band between LIGAHOSTING and the page title on admin/
       affiliates and admin/reviews. Block stacking sidesteps the whole
       grid-row computation. */
    .admin-shell { display: block; min-height: 0; }
    .admin-main { display: block; }

    /* Tables: many admin lists have 8-10 columns and were getting cut off
       at the right edge with no scroll affordance because the parent was
       clipping. We need .table-wrap to be clamped to the viewport width so
       that overflow-x:auto actually triggers (without an explicit width it
       just stretches to whatever its child table demands, which exceeds
       the viewport — then admin-main's overflow-x:hidden clips it without
       scroll).

       The `width: 100%` + `min-width: 0` combo lets it shrink past the
       intrinsic table width; `display: block` ensures it doesn't get
       table-anonymous-box behaviour from any ancestor; and the min-width
       on the inner table forces a horizontal scroll once the column
       content needs more than ~720px. */
    .admin-main .table-wrap {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-main .table-wrap .table { min-width: 720px; }

    /* When a .table-wrap is nested inside a .card (e.g. the Services /
       Invoices / Domains tables on the admin user-detail page), the card's
       `overflow: hidden` clips the wrapper's horizontal scrollbar so the
       table just looks truncated. Drop the horizontal clip; vertical clip
       (needed for the rounded corners) is preserved by browsers since
       overflow-y stays implicit. The card itself is now the scroll
       container instead of the table-wrap inside it. */
    .admin-main .card:has(.table-wrap) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Page header on mobile: stack vertically so the action buttons (bell,
       View site, Logout) don't wrap awkwardly to the right of the title. */
    .admin-main .page-header { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: 0; margin-bottom: 1.25rem; }
    .admin-main .page-header-actions { justify-content: flex-start; }

    /* ----- Client layout (.container instead of .admin-main) -----
       The client pages (affiliate dashboard, invoice detail, etc.) use
       <main class="container"> rather than the admin shell, so the
       admin-scoped fixes above don't reach them. Re-apply the same
       viewport-clamping + table-scroll behaviour here so client pages
       behave consistently on mobile. */
    main.container { max-width: 100vw; overflow-x: hidden; min-width: 0; }
    main.container .table-wrap { overflow-x: auto; max-width: 100%; }
    main.container .table-wrap .table { min-width: 640px; }
    main.container .card:has(.table-wrap) { overflow-x: auto; }
    main.container .page-header { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 1.25rem; }
    main.container .page-header-actions { justify-content: flex-start; }

    /* ----- Two-column "main + sidebar" page layouts -----
       Several detail pages use a custom CSS grid named like *-admin-grid
       or user-grid (admin user detail, admin service detail, admin invoice
       detail, client invoice detail, etc.). On mobile the @media at the
       end of each page already collapses them to 1fr, but they were
       missing `min-width: 0` on the children, so wide content (action
       buttons, foreign-script text like 账户充值, long invoice numbers) was
       pushing the column out of the viewport.

       We use attribute selectors to catch the common naming patterns:
         - `[class$="-grid"]` covers *-grid (invoice-admin-grid, user-grid)
         - `[class*="aff-"]` covers aff-bottom, aff-link-grid, aff-stats
           (the client affiliate dashboard uses these without -grid suffix)

       Note: "u-stack-lg" is a vertical flex utility used as a single
       child of these grids; without min-width:0 on IT, table content
       inside it can still force its grid cell to expand. Targeting it
       directly is safer than relying solely on `> *`. */
    [class$="-grid"],
    [class*="aff-"] { min-width: 0; }
    [class$="-grid"] > *,
    [class*="aff-"] > * { min-width: 0; max-width: 100%; }
    [class$="-grid"] aside,
    [class*="aff-"] aside { width: 100%; }
    .u-stack-lg { min-width: 0; }

    /* Action button stacks in sidebars on mobile: make every button
       full-width so the wider labels ("Mark as paid", "View customer",
       "Print / PDF") don't run off the right edge. */
    .admin-main aside .btn,
    main.container aside .btn { width: 100%; }
}


/* =================================================================
   22.  AUTH PAGES
   ================================================================= */

.auth-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.016) 1px, transparent 1px),
        radial-gradient(circle at 50% 28%, rgba(139,92,246,.1), transparent 32%),
        var(--bg);
    background-size: 40px 40px, 40px 40px, auto, auto;
}
.auth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem var(--pad-x);
    border-bottom: 1px solid var(--border-soft);
    backdrop-filter: blur(8px);
    background: rgba(10, 10, 20, 0.5);
}
.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem var(--pad-x);
}
.auth-main-inner { width: 100%; max-width: 520px; }
.auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: rgba(16,16,42,.86);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 28px 80px rgba(0,0,0,.3);
    backdrop-filter: blur(12px);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-brand);
}
.auth-card h1 {
    font-size: 1.45rem;
    margin-bottom: 0.5rem;
}
.auth-card .auth-subtitle {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}
.auth-footer {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.auth-card .form-control { min-height: 44px; }
.auth-card .btn-lg { min-height: 46px; }
.auth-header {
    background: rgba(10,10,20,.68);
    backdrop-filter: blur(12px);
}
@media (max-width: 560px) {
    .auth-main { align-items: flex-start; padding-top: 2rem; }
    .auth-card { padding: 1.1rem; }
}


/* =================================================================
   23.  PRODUCT CARDS
   ================================================================= */

.product-card {
    background:
        linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(145deg, rgba(34,211,238,0.035), transparent 42%),
        var(--bg-card);
    background-size: 30px 30px, 30px 30px, auto, auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.35rem;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,211,238,0.28);
    box-shadow: 0 22px 52px rgba(0,0,0,0.26);
}
.product-card.is-performance-plan {
    background:
        linear-gradient(rgba(139,92,246,0.026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139,92,246,0.026) 1px, transparent 1px),
        linear-gradient(145deg, rgba(139,92,246,0.085), transparent 46%),
        var(--bg-card);
    background-size: 30px 30px, 30px 30px, auto, auto;
    border-color: rgba(139,92,246,0.22);
}
.product-card.is-web-plan {
    background:
        linear-gradient(rgba(34,211,238,0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,211,238,0.022) 1px, transparent 1px),
        linear-gradient(145deg, rgba(16,185,129,0.055), transparent 46%),
        var(--bg-card);
    background-size: 30px 30px, 30px 30px, auto, auto;
}
.product-card-head {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}
.product-card-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 7px;
    background: rgba(34,211,238,0.07);
    color: var(--cyan);
}
.is-performance-plan .product-card-icon {
    border-color: rgba(139,92,246,0.25);
    background: rgba(139,92,246,0.1);
    color: var(--purple-4);
}
.product-family {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
}
.product-card.is-featured::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-brand);
}
.product-name { font-size: 1.15rem; margin-bottom: 0.5rem; }
.product-tagline { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.5rem; min-height: 2.2em; }
.product-price {
    display: flex; align-items: baseline; gap: 6px;
    margin: 0.15rem 0 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}
.product-price .amount {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 2.2rem;
    line-height: 1;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-price .cycle { color: var(--text-muted); font-size: 0.88rem; }
.product-features {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    flex: 1;
}
.product-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--text-2);
    font-size: 0.9rem;
}
.product-features li::before {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}
.product-badge {
    position: absolute;
    top: 1rem; right: 1rem;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--grad-cyan);
    color: #fff;
}
.product-card-cta {
    min-height: 42px;
    margin-top: auto;
}

.country-flag {
    width: 22px;
    height: 15px;
    display: inline-block;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.24);
    vertical-align: middle;
}
.country-flag--ro {
    background: linear-gradient(90deg, #002b7f 0 33.333%, #fcd116 33.333% 66.666%, #ce1126 66.666%);
}
.country-flag--de {
    background: linear-gradient(180deg, #111 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666%);
}
.country-flag--nl {
    background: linear-gradient(180deg, #ae1c28 0 33.333%, #fff 33.333% 66.666%, #21468b 66.666%);
}
.country-flag--us {
    background: repeating-linear-gradient(180deg, #b22234 0 1.15px, #fff 1.15px 2.3px);
}


/* =================================================================
   24.  WORLD MAP (datacenters)
   ================================================================= */

.world-map {
    position: relative;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-lg);
    padding: 1rem;
    overflow: hidden;
}
.world-map svg { width: 100%; height: 100%; }
.world-map .dc-dot {
    fill: var(--cyan);
    transition: r .2s;
}
.world-map .dc-dot-glow {
    fill: var(--cyan);
    opacity: 0.3;
    animation: dcPulse 2.5s ease-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes dcPulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(3.5); opacity: 0; }
}
.world-map .dc-label {
    fill: var(--text);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    text-anchor: middle;
}
.world-map .dc-region {
    fill: rgba(139, 92, 246, 0.05);
    stroke: rgba(139, 92, 246, 0.15);
    stroke-width: 0.5;
}


/* =================================================================
   25.  MISC
   ================================================================= */

hr {
    border: 0;
    border-top: 1px solid var(--border-soft);
    margin: 1.5rem 0;
}

.divider-with-text {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.divider-with-text::before,
.divider-with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-soft);
}

@media print {
    body::before, body::after { display: none; }
    .site-header, .site-footer, .nav-actions, .page-header-actions, .admin-side, .admin-topbar { display: none !important; }
    body, .card, .table-wrap { background: #fff !important; color: #000 !important; border-color: #ddd !important; }
    .card, .stat { border-color: #ddd !important; }
}

html { scrollbar-gutter: stable; }


/* =================================================================
   26.  CLIENT COLLECTION PAGES
   ================================================================= */

.client-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.client-page-head h1 { margin: 0.2rem 0; }
.client-page-head p { margin: 0; color: var(--text-muted); }
.client-page-head .btn { display: inline-flex; align-items: center; gap: 0.42rem; }
.client-page-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    margin-bottom: 0.75rem;
    padding: 0.48rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(16,16,42,0.62);
}
.client-filter-tabs {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
}
.client-filter-tabs button {
    min-height: 34px;
    padding: 0.45rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.client-filter-tabs button:hover { color: var(--text); background: rgba(255,255,255,0.025); }
.client-filter-tabs button.is-active {
    border-color: rgba(139,92,246,0.24);
    background: rgba(139,92,246,0.12);
    color: var(--purple-4);
}
.client-result-count {
    padding-right: 0.35rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    white-space: nowrap;
}
.client-object-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}
.client-object-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 176px;
    flex-direction: column;
    padding: 0.82rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 8px;
    background:
        linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px),
        linear-gradient(145deg, rgba(34,211,238,0.035), transparent 45%),
        rgba(14,14,38,0.76);
    background-size: 32px 32px, 32px 32px, auto, auto;
    color: inherit;
    transition: border-color .15s, transform .15s, opacity .15s;
}
.client-object-card:hover { transform: translateY(-1px); border-color: rgba(34,211,238,0.28); }
.client-object-card.is-history { opacity: 0.64; }
.client-object-card.is-history:hover { opacity: 0.9; }
.client-object-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}
.client-object-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34,211,238,0.18);
    border-radius: 8px;
    background: rgba(34,211,238,0.075);
    color: var(--cyan);
}
.client-object-icon.is-web,
.client-object-icon.is-domain {
    border-color: rgba(139,92,246,0.2);
    background: rgba(139,92,246,0.09);
    color: var(--purple-4);
}
.client-object-title { min-width: 0; }
.client-object-title strong,
.client-object-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-object-title strong { color: var(--text); font-size: 0.88rem; }
.client-object-title small { margin-top: 0.16rem; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem; }
.client-object-identity {
    min-height: 41px;
    margin-top: 0.75rem;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}
.client-object-identity strong,
.client-object-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-object-identity small { margin-top: 0.17rem; color: var(--text-muted); font-size: 0.62rem; }
.client-domain-renew { color: var(--text-muted); }
.client-domain-renew.is-on { color: var(--green); }
.client-object-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: auto;
    padding-top: 0.68rem;
    border-top: 1px solid rgba(255,255,255,0.055);
}
.client-object-meta span { min-width: 0; }
.client-object-meta small,
.client-object-meta b { display: block; }
.client-object-meta small { color: var(--text-muted); font-size: 0.6rem; }
.client-object-meta b {
    overflow: hidden;
    margin-top: 0.16rem;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-object-arrow,
.client-row-arrow { color: var(--purple-4); opacity: 0.62; transition: transform .15s, opacity .15s; }
.client-object-card:hover .client-object-arrow,
.client-collection-row:hover .client-row-arrow { transform: translateX(2px); opacity: 1; }
.client-collection-panel {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(16,16,42,0.68);
}
.client-collection-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(110px, 0.36fr) minmax(105px, 0.32fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 76px;
    padding: 0.68rem 0.82rem;
    border-bottom: 1px solid rgba(255,255,255,0.052);
    color: inherit;
    transition: background .15s;
}
.client-collection-row:last-child { border-bottom: 0; }
.client-collection-row:hover { background: rgba(255,255,255,0.024); }
.client-row-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--purple-4);
    background: rgba(139,92,246,0.09);
}
.client-row-icon.is-invoice { color: #fcd34d; background: rgba(252,211,77,0.07); }
.client-row-icon.is-ticket { color: #60a5fa; background: rgba(96,165,250,0.08); }
.client-row-icon.is-transaction { color: #34d399; background: rgba(52,211,153,0.08); }
.client-row-main,
.client-row-meta { min-width: 0; }
.client-row-main strong,
.client-row-main small,
.client-row-meta small,
.client-row-meta b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-row-main strong { color: var(--text); font-size: 0.8rem; }
.client-row-main small { margin-top: 0.18rem; color: var(--text-muted); font-size: 0.64rem; }
.client-row-meta small { color: var(--text-muted); font-size: 0.59rem; text-transform: uppercase; }
.client-row-meta b { margin-top: 0.17rem; color: var(--text-2); font-family: var(--font-mono); font-size: 0.66rem; }
.client-collection-row[hidden],
.client-object-card[hidden] { display: none !important; }
.client-collection-empty {
    display: none;
    padding: 2rem;
    color: var(--text-muted);
    text-align: center;
}
.client-collection-empty.is-visible { display: block; }
.client-billing-hero {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.client-balance-panel,
.client-topup-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(16,16,42,0.72);
}
.client-balance-panel {
    background:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(145deg, rgba(139,92,246,0.12), transparent 58%),
        rgba(16,16,42,0.76);
    background-size: 34px 34px, 34px 34px, auto, auto;
}
.client-balance-panel .stat-label { margin-bottom: 0.55rem; }
.client-balance-amount {
    color: var(--purple-4);
    font-family: var(--font-mono);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1;
}
.client-balance-panel p { max-width: 460px; margin: 0.8rem 0 0; color: var(--text-muted); font-size: 0.75rem; }
.client-topup-panel h2 { margin: 0 0 0.7rem; font-size: 0.95rem; }
.client-topup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.6rem;
}
.client-topup-form .form-row { margin: 0; }
.client-topup-form .btn { min-height: 43px; }
.client-subsection-head { margin-top: 1.5rem; }
.client-subsection-head h2 { margin: 0; font-size: 1rem; }
.client-subsection-head p { margin-top: 0.2rem; font-size: 0.75rem; }

@media (max-width: 1100px) {
    .client-object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .client-collection-row { grid-template-columns: auto minmax(0, 1fr) minmax(105px, .35fr) auto auto; }
    .client-collection-row .client-row-meta.is-secondary { display: none; }
}
@media (max-width: 700px) {
    .client-page-head { align-items: flex-start; flex-direction: column; }
    .client-page-head .btn { width: 100%; justify-content: center; }
    .client-page-tools { align-items: flex-start; flex-direction: column; overflow-x: auto; }
    .client-filter-tabs { width: max-content; }
    .client-result-count { padding: 0 0.3rem 0.15rem; }
    .client-object-grid,
    .client-billing-hero { grid-template-columns: 1fr; }
    .client-collection-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 72px;
        padding: 0.62rem;
    }
    .client-collection-row .client-row-meta,
    .client-collection-row > .badge { display: none; }
    .client-topup-form { grid-template-columns: 1fr; }
}


/* Client forms and detail workspaces */
.client-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.client-back-link:hover { color: var(--purple-4); }
.support-create-shell { max-width: 1220px; margin: 0 auto; }
.support-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .68fr);
    gap: 0.85rem;
    align-items: start;
}
.support-create-form,
.support-info-panel,
.support-discord-link {
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: rgba(16,16,42,0.72);
}
.support-form-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 66px;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
}
.support-form-body { padding: 0.95rem; }
.support-message { min-height: 230px; resize: vertical; }
.support-submit-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255,255,255,0.055);
}
.support-submit-row .btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.support-create-aside { display: grid; gap: 0.7rem; }
.support-info-panel { padding: 0.9rem; }
.support-info-panel h2 { margin: 0 0 0.72rem; font-size: 0.9rem; }
.support-info-panel ul { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.support-info-panel li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.55;
}
.support-info-panel li span { color: var(--green); font-weight: 800; }
.support-response {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding-top: 0.72rem;
    border-top: 1px solid var(--border-soft);
}
.support-response span { color: var(--text-muted); font-size: 0.65rem; }
.support-response strong { color: var(--cyan); font-family: var(--font-mono); font-size: 0.65rem; }
.support-discord-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    color: inherit;
    transition: border-color .15s, background .15s;
}
.support-discord-link:hover { border-color: rgba(139,92,246,0.32); background: rgba(139,92,246,0.07); }
.support-discord-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #5865f2;
    color: #fff;
}
.support-discord-link strong,
.support-discord-link small { display: block; }
.support-discord-link strong { font-size: 0.75rem; }
.support-discord-link small { margin-top: 0.15rem; color: var(--text-muted); font-size: 0.62rem; }
.support-discord-link > svg { color: var(--purple-4); }

@media (max-width: 880px) {
    .support-create-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .support-form-body { padding: 0.75rem; }
    .support-message { min-height: 190px; }
    .support-submit-row .btn { width: 100%; justify-content: center; }
}