:root {
    --tailux-bg: #01030A;
    --tailux-card: rgba(15, 23, 42, 0.8);
    --tailux-border: rgba(255, 255, 255, 0.05);
    --tailux-green: #22c55e;
}

body {
    background-color: var(--tailux-bg);
    font-family: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
}

.blur-card {
    background: var(--tailux-card);
    border: 1px solid var(--tailux-border);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.8);
}

.gradient-ring {
    position: relative;
}

.gradient-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(120deg, #22c55e, #14b8a6, #a855f7);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

[data-lock-screen] {
    background: rgba(1, 3, 10, 0.92);
    backdrop-filter: blur(8px);
}

.tlx-chip {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}