:root {
    --c1: #6366f1;
    --c2: #8b5cf6;
    --c3: #22c55e;
    --bgA: rgba(99, 102, 241, 0.12);
    --bgB: rgba(139, 92, 246, 0.12);
    --card: rgba(255,255,255,0.04);
    --card2: rgba(255,255,255,0.07);
    --stroke: rgba(255,255,255,0.12);
    --stroke2: rgba(255,255,255,0.20);
    --textDim: rgba(255,255,255,0.70);
}

.theme-candy {
    --c1:#ff4fd8; --c2:#38bdf8; --c3:#a3e635;
    --bgA: rgba(255, 79, 216, 0.12);
    --bgB: rgba(56, 189, 248, 0.12);
}

.glass {
    background: var(--card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--stroke);
}

.glass-hover {
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-hover:hover {
    background: var(--card2);
    border-color: var(--stroke2);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

.gradient-text {
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.float-animation { animation: float 3s ease-in-out infinite; }

.input {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 12px 12px;
    outline: none;
    color: white;
}

.input:focus { 
    border-color: rgba(168, 85, 247, 0.70); 
    box-shadow: 0 0 0 4px rgba(168,85,247,0.12); 
}

.btn {
    border-radius: 12px;
    padding: 10px 14px;
    transition: 0.2s ease;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.btn:hover { 
    background: rgba(255,255,255,0.10); 
    border-color: rgba(255,255,255,0.22); 
}

.btn-primary {
    border: none;
    background: linear-gradient(90deg, var(--c1), var(--c2));
    color: white;
}

.btn-primary:hover { filter: brightness(1.08); }

/* Hide scrollbar for cleaner UI */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--stroke); border-radius: 10px; }