/* Inter — self-hosted (v20, variable font) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-greek-ext.woff2') format('woff2');
    unicode-range: U+1F00-1FFF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('./fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ── Design tokens — direkt aus dem Template theme.css übersetzt ── */
:root {
    /* from template: --background: #ffffff */
    --bg:        #ffffff;
    --surface:   #ffffff;
    /* from template: --muted: #ececf0 */
    --surface-2: #ececf0;
    /* from template: --border: rgba(0,0,0,.1) */
    --border:    rgba(0,0,0,.1);
    --border-2:  rgba(0,0,0,.18);

    /* from template: --foreground: oklch(0.145 0 0) ≈ #111 */
    --text-1: #111111;
    --text-2: #3f3f46;
    /* from template: --muted-foreground: #717182 */
    --text-3: #717182;
    --text-4: #a1a1aa;

    /* from template: --destructive: #d4183d */
    --red:        #d4183d;
    --red-dark:   #b01530;
    --red-deeper: #7f1d1d;
    --red-subtle: rgba(212,24,61,.1);

    /* astendo brand blue (from logo) */
    --blue:        #2d60b0;
    --blue-dark:   #1e4a8f;
    --blue-subtle: rgba(45,96,176,.1);
    --blue-ring:   rgba(45,96,176,.18);

    /* Nav: sticky top-0 bg-background/95 backdrop-blur border-b border-border/40 */
    --nav-bg:     rgba(255,255,255,.95);
    /* border-border/40: rgba(0,0,0,.1) at 40% opacity = rgba(0,0,0,.04) */
    --nav-border: rgba(0,0,0,.04);
    --nav-text:   #111111;
    --nav-muted:  #717182;
    --nav-hover:  rgba(0,0,0,.05);
    --nav-active: rgba(0,0,0,.09);

    /* Hero text: text-foreground in light = dark text */
    --hero-title: #111111;
    /* text-muted-foreground in light */
    --hero-muted: #717182;

    /* from template: --secondary: oklch(0.95 ...) ≈ #f0f0f5 — used for pill bg */
    --pill-bg:     #ececf0;
    --pill-border: rgba(0,0,0,.08);
    --pill-color:  #111111;
    --pill-dot:    #16a34a;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.05);

    /* from template: --radius: 0.625rem */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 10px;
    --r-xl: 16px;

    --ease: .2s ease;

    --input-bg:    #ffffff;
    --input-ring:  var(--blue-ring);
}

/* from template: .dark { --background: oklch(0.145 0 0) } ≈ #1a1a1a neutral dark */
[data-theme="dark"] {
    --bg:        #1a1a1a;
    --surface:   #1a1a1a;
    /* from template: --muted: oklch(0.269 0 0) ≈ #3a3a3a */
    --surface-2: #2e2e2e;
    /* from template: --border: oklch(0.269 0 0) ≈ #3a3a3a */
    --border:    #313131;
    --border-2:  #3d3d3d;

    /* from template: --foreground: oklch(0.985 0 0) ≈ #f8f8f8 */
    --text-1: #f8f8f8;
    --text-2: #c0c0c0;
    /* from template: --muted-foreground: oklch(0.708 0 0) ≈ #9b9b9b */
    --text-3: #9b9b9b;
    --text-4: #6b6b6b;

    --nav-bg:     rgba(26,26,26,.95);
    --nav-border: rgba(255,255,255,.06);
    --nav-text:   #f8f8f8;
    --nav-muted:  #9b9b9b;
    --nav-hover:  rgba(255,255,255,.07);
    --nav-active: rgba(255,255,255,.1);

    --hero-title: #f8f8f8;
    --hero-muted: #9b9b9b;

    --pill-bg:     rgba(255,255,255,.08);
    --pill-border: rgba(255,255,255,.1);
    --pill-color:  #f8f8f8;
    --pill-dot:    #4ade80;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg: 0 10px 40px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);

    /* from template: dark:bg-input/30 */
    --input-bg:   rgba(255,255,255,.06);
    --input-ring: rgba(80,140,220,.28);
}

/* ── Base ───────────────────────────────────────────────── */
/* html carries the background so sticky nav doesn't leave gaps */
html {
    background: var(--bg);
    color-scheme: light;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
[data-theme="dark"] { color-scheme: dark; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    background: transparent;
    color: var(--text-1);
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    transition: color var(--ease);
    animation: pageIn .25s ease both;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.page-leaving { opacity: 0; transition: opacity .18s ease; pointer-events: none; }

body.auth-page {
    background: #050008;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: none;
}

/* ── Header — template: sticky top-0 z-50 border-b border-border/40 bg-background/95 backdrop-blur ── */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nav-border);
    transition: background var(--ease), border-color var(--ease);
}
body { padding-top: 64px; }
body.auth-page { padding-top: 0; }
.topnav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Brand */
.topnav-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    flex-shrink: 0;
}
.topnav-logo { width: 24px; height: 24px; object-fit: contain; color: var(--red); }
/* Center nav links */
.topnav-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.topnav-navlink {
    font-size: 13.5px;
    font-weight: 500;
    /* template: text-foreground/80 */
    color: color-mix(in srgb, var(--nav-text) 80%, transparent);
    text-decoration: none;
    transition: color var(--ease);
}
.topnav-navlink:hover,
.topnav-navlink.active { color: var(--nav-text); }

/* Right controls */
.topnav-right {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.topnav-theme {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-3);
    transition: background var(--ease), color var(--ease);
    flex-shrink: 0;
}
.topnav-theme:hover { background: var(--surface-2); color: var(--text-1); }
.topnav-theme svg { width: 16px; height: 16px; }

.topnav-logout {
    height: 36px;
    padding: 0 .9rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}
.topnav-logout:hover { background: var(--surface-2); color: var(--text-1); }

/* Legacy wrappers */
.topnav-sep     { display: none; }
.topnav-company { display: none; }
.topnav-user    { display: none; }

.topnav-name {
    display: flex;
    align-items: center;
}
.topnav-product {
    font-size: 15px;
    font-weight: 700;
    color: var(--nav-text);
    letter-spacing: -.02em;
    white-space: nowrap;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 34px;
    padding: 0 .9rem;
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn-download:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-2); }
.btn-download svg { width: 13px; height: 13px; flex-shrink: 0; }

.icon-sun  { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun  { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

/* ── Hero — template: relative overflow-hidden + absolute bg image + gradient overlay ── */
/*
 * Template gradient (Hero.tsx):
 *   from-background/80 via-background/60 to-background
 *   dark: from-background/90 dark:via-background/70 dark:to-background
 *
 * Light: rgba(255,255,255,.80) → rgba(255,255,255,.60) → #ffffff
 * Dark:  rgba(26,26,26,.90)   → rgba(26,26,26,.70)   → #1a1a1a
 */
.hero-new {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* template: py-16 md:py-24 */
    padding: 4rem 0 6rem;
    min-height: 380px;
}
.hero-new::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('./hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
.hero-new::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(255,255,255,.80) 0%,
        rgba(255,255,255,.60) 50%,
        #ffffff 100%);
    z-index: 1;
}
[data-theme="dark"] .hero-new::after {
    background: linear-gradient(to bottom,
        rgba(26,26,26,.90) 0%,
        rgba(26,26,26,.70) 50%,
        #1a1a1a 100%);
}

.hero-new--compact { padding: 4rem 0 6rem; min-height: 380px; }

/* Inner container sits above the gradient overlay */
.hero-inner {
    position: relative;
    z-index: 10;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}
.hero-inner--full { /* full-width, no extra modifier needed */ }

/* template: flex flex-col items-start gap-4 max-w-3xl */
.hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 768px;
}

/* Status pill — template: Badge variant="secondary" */
.hero-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    border-radius: 99px;
    padding: .25rem .75rem;
    font-size: 12px;
    font-weight: 500;
    color: var(--pill-color);
    letter-spacing: .01em;
}
.hero-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pill-dot);
    animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Title — template: text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    color: var(--hero-title);
    letter-spacing: -.04em;
    line-height: 1.1;
}
/* template: <span className="text-muted-foreground"> */
.hero-title em {
    font-style: normal;
    color: var(--hero-muted);
}

/* Description — template: text-lg text-muted-foreground max-w-2xl */
.hero-desc {
    font-size: 16px;
    color: var(--hero-muted);
    line-height: 1.65;
    max-width: 640px;
}

/* Stats row — template: flex items-center gap-8 mt-4 */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
}
.hero-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
/* template: text-3xl font-bold */
.hero-stat-num {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--hero-title);
    letter-spacing: -.04em;
    line-height: 1;
}
.hero-stat-num--warn { color: #d97706; }
[data-theme="dark"] .hero-stat-num--warn { color: #fbbf24; }
/* template: text-sm text-muted-foreground */
.hero-stat-lbl {
    font-size: 13px;
    color: var(--hero-muted);
}
.hero-stat-sep { display: none; }

/* Compact hero subtitle (account / subdomains pages) */
.hero-subtitle {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--hero-muted);
}
.hero-plan, .hero-plan-text {
    font-size: 13px;
    color: var(--hero-muted);
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ── Content layout ─────────────────────────────────────── */
.page-veil { /* no-op */ }
.content-area {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── Cards — template: bg-card border rounded-xl shadow-sm ── */
.section-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: background var(--ease), border-color var(--ease);
}
[data-theme="dark"] .section-card {
    border-color: var(--border);
}
.section-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
}
.section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
}
.section-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 99px;
    padding: 1px 10px;
}

/* ── Table ──────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--surface-2); }
th {
    text-align: left;
    padding: .6rem 1.5rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
td {
    padding: .85rem 1.5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text-1);
    font-size: 13.5px;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--surface-2); }

.empty-state {
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--text-4);
    font-size: 13px;
}
.empty-state-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto .75rem;
    color: var(--border-2);
}

/* ── Agent table ─────────────────────────────────────── */
.agent-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.agent-table th { text-align: left; padding: .55rem 1rem; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.agent-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
.agent-table tr:last-child td { border-bottom: none; }
.agent-table .col-muted { color: var(--text-3); font-size: .85rem; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.badge-green { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.badge-amber { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.badge-red   { background: #fee2e2; color: #dc2626; border-color: #fecaca; }
.badge-gray  { background: var(--surface-2); color: var(--text-3); border-color: var(--border); }

[data-theme="dark"] .badge-green { background: rgba(21,128,61,.2);  color: #4ade80; border-color: rgba(74,222,128,.25); }
[data-theme="dark"] .badge-amber { background: rgba(161,98,7,.2);   color: #fbbf24; border-color: rgba(251,191,36,.25); }
[data-theme="dark"] .badge-red   { background: rgba(220,38,38,.2);  color: #f87171; border-color: rgba(248,113,113,.25); }

/* ── Helpers ─────────────────────────────────────────────── */
.mono {
    font-family: 'SFMono-Regular', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12.5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
}
.text-muted  { color: var(--text-4); font-size: 12px; }
.text-danger { color: #dc2626; }
.sans-list   { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes heroBgLoad {
    from { opacity: 0; filter: blur(6px); }
    to   { opacity: 1; filter: blur(0); }
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Auth — full screen split layout ────────────────────── */
.auth-split {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background: #050008;
}
.auth-hero {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #050008;
}
.auth-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 30%;
    pointer-events: none;
    user-select: none;
    animation: heroBgLoad 1.4s ease-out both;
}
.auth-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(4,2,8,.88) 0%,
        rgba(4,2,8,.65) 55%,
        rgba(4,2,8,.45) 100%);
    z-index: 1;
}
.auth-hero-inner {
    position: relative;
    z-index: 2;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    max-width: 520px;
    color: #fff;
}
.auth-hero-brand {
    display: flex; flex-direction: column; margin-bottom: 3rem;
    animation: heroFadeUp .55s ease both; animation-delay: .3s;
}
.auth-hero-logo    { width: 44px; height: 44px; object-fit: contain; opacity: .9; margin-bottom: .85rem; }
.auth-hero-company { font-size: 12px; font-weight: 600; letter-spacing: .02em; opacity: .6; }
.auth-hero-product { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.auth-hero-tagline {
    font-size: 15px; line-height: 1.7; opacity: .75; max-width: 360px; margin-bottom: 3rem;
    animation: heroFadeUp .55s ease both; animation-delay: .5s;
}
.auth-hero-features {
    list-style: none; display: flex; flex-direction: column; gap: 1rem;
    animation: heroFadeUp .55s ease both; animation-delay: .65s;
}
.auth-hero-features li { display: flex; align-items: center; gap: .7rem; font-size: 14px; opacity: .85; }
.auth-hero-features svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .7; }
.auth-hero-footer { font-size: 12px; opacity: .4; }

.auth-form-side {
    width: 480px;
    flex-shrink: 0;
    margin-left: auto;
    background: rgba(244,246,249,.80);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(255,255,255,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    position: relative;
    z-index: 1;
    transition: background var(--ease);
    min-height: 100vh;
}
[data-theme="dark"] .auth-form-side {
    background: rgba(26,26,26,.82);
    border-left-color: rgba(255,255,255,.06);
}
.auth-theme-btn {
    position: absolute;
    top: 1.25rem; right: 1.25rem;
    width: 36px; height: 36px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-3);
    transition: border-color var(--ease), color var(--ease);
}
.auth-theme-btn:hover { color: var(--red); border-color: var(--red-subtle); }
.auth-theme-btn svg { width: 16px; height: 16px; }

.login-box { width: 100%; max-width: 380px; }
.login-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 2rem;
}
.login-logo img { width: 38px; height: 38px; object-fit: contain; margin-bottom: .5rem; }
.login-logo-company { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: var(--text-4); }
.login-logo-product { font-size: 20px; font-weight: 800; color: var(--red); letter-spacing: -.02em; }

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.75rem;
    transition: background var(--ease), border-color var(--ease);
}
.login-card-title    { font-size: 17px; font-weight: 700; color: var(--text-1); margin-bottom: 1.5rem; }
.login-card-subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 1.5rem; margin-top: -.75rem; }

/* ── Forms ───────────────────────────────────────────────── */
label {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-1);
    margin-bottom: 6px;
}
input[type=email],
input[type=password] {
    width: 100%;
    height: 36px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--input-bg);
    transition: border-color var(--ease), box-shadow var(--ease);
    margin-bottom: 1rem;
    outline: none;
}
input[type=email]::placeholder,
input[type=password]::placeholder { color: var(--text-3); }
input[type=email]:focus,
input[type=password]:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--input-ring);
}

.btn-primary {
    display: block;
    width: 100%;
    height: 36px;
    background: var(--text-1);
    color: var(--bg);
    border: none;
    border-radius: var(--r-sm);
    padding: 0 1rem;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity var(--ease);
    margin-top: .35rem;
}
.btn-primary:hover { opacity: .8; }

.alert-error {
    background: rgba(212,24,61,.08);
    color: #b91c1c;
    border: 1px solid rgba(212,24,61,.2);
    border-radius: var(--r-sm);
    padding: .7rem .9rem;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .alert-error { background: rgba(212,24,61,.15); color: #f87171; }

/* ── Account / Info grid ─────────────────────────────────── */
.info-grid { padding: .25rem 0; }
.info-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.info-row:last-child { border-bottom: none; }
.info-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    min-width: 180px;
    flex-shrink: 0;
}
.info-value { font-size: 13.5px; color: var(--text-1); }
.info-value-highlight { font-size: 15px; font-weight: 700; color: var(--red); }

/* ── Key display ─────────────────────────────────────────── */
.key-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.key-code {
    font-family: 'SFMono-Regular', 'Cascadia Code', 'Consolas', monospace;
    font-size: 13px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: .3rem .65rem;
    color: var(--text-1);
}
.key-masked { letter-spacing: .04em; }

.copy-btn {
    height: 28px;
    padding: 0 .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ease), color var(--ease);
    white-space: nowrap;
}
.copy-btn:hover { background: var(--border); color: var(--text-1); }
.copy-btn-done { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
[data-theme="dark"] .copy-btn-done { background: rgba(21,128,61,.2); color: #4ade80; border-color: rgba(74,222,128,.25); }

.btn-reveal, .btn-generate {
    height: 30px;
    padding: 0 .9rem;
    background: transparent;
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    white-space: nowrap;
}
.btn-reveal:hover  { background: var(--surface-2); color: var(--text-1); }
.btn-generate:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── Alert success ───────────────────────────────────────── */
.alert-success {
    background: rgba(16,185,129,.08);
    color: #065f46;
    border: 1px solid rgba(16,185,129,.25);
    border-radius: var(--r);
    padding: 1rem 1.25rem;
    font-size: 13px;
    font-weight: 500;
}
[data-theme="dark"] .alert-success { background: rgba(16,185,129,.12); color: #6ee7b7; border-color: rgba(16,185,129,.3); }

.key-reveal-box {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-top: .75rem;
    flex-wrap: wrap;
}
.key-reveal-box code {
    font-family: 'SFMono-Regular', 'Cascadia Code', 'Consolas', monospace;
    font-size: 13.5px;
    background: rgba(0,0,0,.06);
    border-radius: 4px;
    padding: .3rem .65rem;
    word-break: break-all;
}
[data-theme="dark"] .key-reveal-box code { background: rgba(255,255,255,.08); }

/* ── Form controls (subdomains, etc.) ───────────────────── */
.form-group { margin-bottom: .85rem; }
.form-label {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-1);
    margin-bottom: .4rem;
}
.form-input {
    height: 36px;
    padding: 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--input-bg);
    outline: none;
    width: 100%;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-input::placeholder { color: var(--text-3); }
.form-input.mono { font-family: 'SFMono-Regular', 'Cascadia Code', 'Consolas', monospace; }
.form-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--input-ring); }
.form-input:disabled { opacity: .5; cursor: not-allowed; }

.form-select-wrap { position: relative; display: inline-block; }
.form-select {
    appearance: none;
    -webkit-appearance: none;
    height: 36px;
    padding: 0 2.2rem 0 .85rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--input-bg);
    cursor: pointer;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--input-ring); }
.form-select-wrap::after {
    content: '';
    position: absolute;
    right: .7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 14px; height: 14px;
    pointer-events: none;
    background-color: var(--text-4);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.form-row { display: flex; gap: .65rem; align-items: flex-end; flex-wrap: wrap; }
.form-row .form-group { flex: 1 1 0; min-width: 120px; margin-bottom: 0; }
.form-row .form-group--spacer { flex: 1 1 0; min-width: 0; pointer-events: none; }
.form-group--type { flex: 0 0 110px !important; min-width: 110px !important; }
.form-group--type .form-select-wrap { display: block; }
.form-group--type .form-select { width: 100%; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
}
.double-fields { display: flex; flex-direction: column; gap: 1rem; }
.form-hint  { font-size: 12px; color: var(--text-3); margin-top: .35rem; }
.form-error { font-size: 12px; color: var(--red); margin-top: .35rem; }
.form-label--optional span { font-weight: 400; color: var(--text-3); font-size: 12px; margin-left: .25rem; }

.sub-edit-section {
    padding: 1.1rem 1.5rem;
    border-top: 1px solid var(--border);
}
.form-action-row {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: wrap;
    padding: .85rem 1.5rem;
    border-top: 1px solid var(--border);
    background: transparent;
}
.btn-save {
    height: 36px;
    padding: 0 1.1rem;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ease), box-shadow var(--ease);
    white-space: nowrap;
}
.btn-save:hover { background: var(--red-dark); box-shadow: 0 2px 10px rgba(212,24,61,.3); }

.btn-outline-danger {
    height: 36px;
    padding: 0 .9rem;
    background: transparent;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
    white-space: nowrap;
    margin-left: auto;
}
.btn-outline-danger:hover { background: rgba(212,24,61,.06); border-color: rgba(212,24,61,.5); color: var(--red); }

/* ── Toasts ──────────────────────────────────────────────── */
.toast-wrap {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 9000;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-size: .875rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    pointer-events: auto;
    animation: toastIn .22s ease forwards;
    max-width: 340px;
    line-height: 1.4;
}
.toast--ok  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.toast--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast--leaving { animation: toastOut .25s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-6px); } }
[data-theme="dark"] .toast--ok  { background: #052e16; color: #86efac; border-color: #166534; }
[data-theme="dark"] .toast--err { background: #450a0a; color: #fca5a5; border-color: #991b1b; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) { .content-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px)  {
    .hero-new { padding: 3rem 0 4rem; }
    .form-grid { grid-template-columns: 1fr; }
    .topnav-inner { padding: 0 1rem; }
    .content-area { padding: 1.5rem 1rem 3rem; }
    .hero-inner { padding: 0 1rem; }
}
@media (max-width: 840px) {
    .auth-split     { flex-direction: column; }
    .auth-hero-product { font-size: 28px; }
    .auth-hero-tagline, .auth-hero-features { display: none; }
    .auth-form-side { width: 100%; padding: 2rem 1.25rem; }
}

/* ── Quick Actions — template: grid grid-cols-4 gap-4 ───── */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.qa-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    cursor: pointer;
    transition: box-shadow var(--ease), border-color var(--ease);
    text-decoration: none;
    color: inherit;
}
.qa-card:hover { box-shadow: var(--shadow-md); }
/* template: p-3 rounded-full bg-primary/10 — primary is #030213 in light */
.qa-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(3,2,19,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-1);
    flex-shrink: 0;
}
[data-theme="dark"] .qa-icon { background: rgba(255,255,255,.08); color: var(--text-1); }
.qa-icon svg { width: 24px; height: 24px; }
.qa-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-1);
}
.qa-desc {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.4;
}

/* ── Section heading — template: flex items-center justify-between ── */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.section-head-text h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -.02em;
    line-height: 1.3;
}
.section-head-text p {
    font-size: 13.5px;
    color: var(--text-3);
    margin-top: .2rem;
}
/* template: Button variant="default" — dark filled button */
.btn-new {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    height: 38px;
    padding: 0 1.1rem;
    background: var(--text-1);
    color: var(--bg);
    border: none;
    border-radius: var(--r);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--ease);
    text-decoration: none;
}
.btn-new:hover { opacity: .85; }

/* ── Filter Tabs — template: TabsList + TabsTrigger ─────── */
/* template: inline-flex h-10 rounded-md bg-muted p-1 */
.tab-list {
    display: inline-flex;
    align-items: center;
    background: var(--surface-2);
    border-radius: var(--r);
    padding: 4px;
    gap: 2px;
}
/* template: inline-flex px-3 py-1.5 text-sm font-medium rounded-sm */
.tab-btn {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    border: none;
    background: transparent;
    border-radius: calc(var(--r) - 2px);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--ease), color var(--ease), box-shadow var(--ease);
    white-space: nowrap;
}
/* template: active = bg-background shadow */
.tab-btn.active {
    background: var(--surface);
    color: var(--text-1);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.tab-btn:hover:not(.active) { color: var(--text-2); }

.tab-content { display: none; margin-top: 1.5rem; }
.tab-content.active { display: block; }

/* ── Certificate cards — template: CertificateCard ──────── */
/* template: grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.cert-grid--demo { opacity: .55; pointer-events: none; user-select: none; }
.cert-card--demo { filter: blur(.4px); }
.cert-demo-hint {
    margin-top: 1rem;
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
}
/* template: Card hover:shadow-lg transition-shadow */
.cert-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    transition: box-shadow var(--ease);
    overflow: hidden;
}
.cert-card:hover { box-shadow: var(--shadow-lg); }

/* CardHeader: p-6 pb-3 */
.cert-card-header {
    padding: 1.25rem 1.25rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.cert-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
}
.cert-card-name-wrap {
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* Shield icon */
.cert-card-icon { width: 20px; height: 20px; color: var(--text-1); flex-shrink: 0; }
/* CardTitle text-lg */
.cert-card-domain {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-1);
}
/* CardDescription text-muted-foreground flex items-center gap-2 mt-2 */
.cert-card-issuer {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 12.5px;
    color: var(--text-3);
}
.cert-card-issuer svg { width: 12px; height: 12px; }

/* CardContent: p-6 pt-0 */
.cert-card-body {
    padding: 0 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cert-card-meta { display: flex; flex-direction: column; gap: .3rem; }
.cert-card-meta-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 12.5px;
    color: var(--text-3);
}
.cert-card-meta-row svg { width: 12px; height: 12px; flex-shrink: 0; }

/* cert-more button (⋮) */
.cert-more {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--ease), color var(--ease);
}
.cert-more:hover { background: var(--surface-2); color: var(--text-1); }
.cert-more svg { width: 16px; height: 16px; }

/* cert status badges — matching template exactly */
.badge-cert-active   { background: rgba(34,197,94,.1);  color: #16a34a; border: 1px solid transparent; }
.badge-cert-expiring { background: rgba(234,179,8,.1);  color: #a16207; border: 1px solid transparent; }
.badge-cert-expired  { background: rgba(212,24,61,.12); color: var(--red); border: 1px solid transparent; }
[data-theme="dark"] .badge-cert-active   { background: rgba(34,197,94,.15);  color: #4ade80; }
[data-theme="dark"] .badge-cert-expiring { background: rgba(234,179,8,.15);  color: #fbbf24; }
[data-theme="dark"] .badge-cert-expired  { background: rgba(212,24,61,.18);  color: #f87171; }

/* empty tab state */
.tab-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-4);
    font-size: 14px;
}

/* Domains + Servers — kept as section-cards below certs */
.aux-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
}

/* ── Legacy class aliases ──────────────────────────────── */
.dash-hero { display: none; }
.kpi-row   { display: none; }
.hero-ring-wrap { display: none; }
.hero-stat-sep { display: none; }

@media (max-width: 1024px) {
    .qa-grid { grid-template-columns: repeat(2, 1fr); }
    .cert-grid { grid-template-columns: repeat(2, 1fr); }
    .aux-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .qa-grid { grid-template-columns: repeat(2, 1fr); }
    .cert-grid { grid-template-columns: 1fr; }
}