:root {
    --bg: #07111f;
    --panel: rgba(255,255,255,.08);
    --panel2: rgba(255,255,255,.12);
    --text: #eef6ff;
    --muted: #9fb2c8;
    --accent: #48d6ff;
    --accent2: #7c5cff;
    --ok: #36d399;
    --danger: #ff6b6b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(72,214,255,.22), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(124,92,255,.24), transparent 30%),
        linear-gradient(135deg, #07111f 0%, #0d1b2f 50%, #050914 100%);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
}

.sl-shell {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.sl-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent);
    pointer-events: none;
}

.sl-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(72,214,255,.25), transparent 65%);
    right: -160px;
    top: -120px;
    filter: blur(4px);
}

.navbar {
    backdrop-filter: blur(18px);
    background: rgba(4, 12, 24, .72) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand-dot {
    width: 11px;
    height: 11px;
    background: var(--accent);
    display: inline-block;
    border-radius: 99px;
    box-shadow: 0 0 28px var(--accent);
    margin-right: 8px;
}

.hero-card,
.sl-card {
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.065));
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 28px 90px rgba(0,0,0,.34);
    border-radius: 28px;
    backdrop-filter: blur(18px);
}

.hero-title {
    font-weight: 850;
    letter-spacing: -0.055em;
    font-size: clamp(2.4rem, 6vw, 5.4rem);
    line-height: .95;
}

.hero-title span {
    background: linear-gradient(90deg, #fff, #75e3ff, #a897ff);
    -webkit-background-clip: text;
    color: transparent;
}

.hero-sub {
    color: var(--muted);
    font-size: 1.15rem;
    max-width: 760px;
}

.metric {
    border-radius: 22px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.10);
    padding: 18px;
}

.metric b {
    font-size: 1.5rem;
}

.badge-soft {
    background: rgba(72,214,255,.13);
    border: 1px solid rgba(72,214,255,.22);
    color: #aeefff;
}

.btn-sl {
    border: 0;
    color: #04101e;
    background: linear-gradient(90deg, #48d6ff, #8fffe0);
    font-weight: 800;
    box-shadow: 0 12px 40px rgba(72,214,255,.22);
}

.btn-sl:hover {
    color: #04101e;
    filter: brightness(1.06);
}

.form-control,
.form-select {
    background: rgba(255,255,255,.09);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
}

.form-control:focus,
.form-select:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: rgba(72,214,255,.75);
    box-shadow: 0 0 0 .25rem rgba(72,214,255,.16);
}

.form-control::placeholder {
    color: rgba(255,255,255,.45);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #eef6ff;
    --bs-table-border-color: rgba(255,255,255,.10);
}

.table thead th {
    color: #9fb2c8;
    font-weight: 700;
}

.small-muted {
    color: var(--muted);
}

.visual-box {
    min-height: 360px;
    position: relative;
}

.node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 99px;
    background: #48d6ff;
    box-shadow: 0 0 24px #48d6ff;
}

.node.n1 { left: 16%; top: 22%; }
.node.n2 { left: 66%; top: 18%; background:#7c5cff; box-shadow:0 0 24px #7c5cff; }
.node.n3 { left: 80%; top: 58%; }
.node.n4 { left: 28%; top: 72%; background:#36d399; box-shadow:0 0 24px #36d399; }

.connection {
    position: absolute;
    inset: 50px;
    border: 1px solid rgba(72,214,255,.22);
    border-radius: 32px;
    background:
        linear-gradient(90deg, transparent 48%, rgba(72,214,255,.45) 50%, transparent 52%),
        linear-gradient(0deg, transparent 48%, rgba(124,92,255,.36) 50%, transparent 52%);
}

.login-wrap {
    max-width: 460px;
    margin: 0 auto;
}