:root {
    --bg-main: #050b18;
    --bg-card: rgba(12, 21, 39, 0.82);
    --border: rgba(255,255,255,.08);
    --text-main: #f8fafc;
    --text-muted: #8fa3bf;
    --u-blue: #3b82f6;
    --u-red: #ef4444;
    --u-orange: #f59e0b;
    --u-purple: #a855f7;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: 
        radial-gradient(circle at 20% 20%, rgba(59,130,246,.15), transparent 30%),
        linear-gradient(180deg, #050b18 0%, #07111f 55%, #050b18 100%);
    color: var(--text-main);
    min-height: 100vh;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 85%);
    pointer-events: none;
    z-index: 0;
}

.unele-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 24px 15px;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.unele-card:active { transform: scale(0.95); }
.border-blue { border-bottom: 3px solid var(--u-blue); }
.border-orange { border-bottom: 3px solid var(--u-orange); }
.border-red { border-bottom: 3px solid var(--u-red); }
.border-purple { border-bottom: 3px solid var(--u-purple); }

.bubble-user { background: #3b82f6; border-radius: 18px 18px 0 18px; }
.bubble-ai { background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 18px 18px 18px 0; }