:root {
    --bg: #0b1220;
    --card: rgba(255,255,255,.06);
    --card2: rgba(255,255,255,.10);
    --border: rgba(255,255,255,.12);
    --text: #eaf0ff;
    --muted: rgba(234,240,255,.72);
    --primary: #5b8cff;
    --good: #35d07f;
    --bad: #ff5a6a;
}

* {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

body {
    background: radial-gradient(1200px 700px at 20% -10%, rgba(91,140,255,.25), transparent 60%), radial-gradient(1000px 600px at 110% 10%, rgba(53,208,127,.18), transparent 55%), radial-gradient(800px 500px at 50% 120%, rgba(255,90,106,.10), transparent 55%), var(--bg);
    color: var(--text);
}

.text-muted {
    color: var(--muted) !important;
}

.glass-nav {
    background: rgba(10,16,30,.65);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.brand-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--good));
    box-shadow: 0 0 16px rgba(91,140,255,.5);
}

.hero {
    border-bottom: 1px solid var(--border);
}

.badge-soft {
    display: inline-flex;
    align-items: center;
    padding: .5rem .75rem;
    border-radius: 999px;
    background: rgba(91,140,255,.12);
    border: 1px solid rgba(91,140,255,.25);
    color: var(--text);
}

.glass-card {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 18px;
}

.shadow-soft {
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.status-pill {
    font-size: .85rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(53,208,127,.35);
    background: rgba(53,208,127,.10);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

    .status-pill .dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--good);
        box-shadow: 0 0 14px rgba(53,208,127,.65);
    }

.form-control {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.08);
    color: var(--text);
}

    .form-control::placeholder {
        color: rgba(234,240,255,.55);
    }

    .form-control:focus {
        background: rgba(255,255,255,.10);
        border-color: rgba(91,140,255,.55);
        box-shadow: 0 0 0 .25rem rgba(91,140,255,.20);
        color: var(--text);
    }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #7aa2ff);
    border: 0;
    border-radius: 14px;
}

.btn-outline-light, .btn-outline-secondary {
    border-radius: 14px;
}

.result-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
}

.result-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(91,140,255,.12);
    border: 1px solid rgba(91,140,255,.25);
}

.result-label {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: .2px;
}

.score-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: conic-gradient(var(--primary) 0deg, rgba(255,255,255,.10) 0deg);
    border: 1px solid var(--border);
}

    .score-ring span {
        font-variant-numeric: tabular-nums;
    }

.chart-wrap {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
}

.preview-box {
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    min-height: 80px;
    color: rgba(234,240,255,.90);
}

.api-box {
    background: rgba(0,0,0,.25);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    color: rgba(234,240,255,.85);
    overflow: auto;
}

.history-item {
    border: 1px solid var(--border);
    background: rgba(255,255,255,.04);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

    .history-item .meta {
        font-size: .85rem;
        color: var(--muted);
    }

    .history-item .tag {
        font-size: .78rem;
        padding: .15rem .45rem;
        border-radius: 999px;
        border: 1px solid var(--border);
    }

.tag.good {
    border-color: rgba(53,208,127,.45);
    background: rgba(53,208,127,.10);
}

.tag.bad {
    border-color: rgba(255,90,106,.45);
    background: rgba(255,90,106,.10);
}