/* ===== СТЕКЛЯННЫЙ ЭФФЕКТ ===== */

.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Светящиеся карточки */
.glass-card.glow-purple {
    box-shadow: 
        0 8px 32px rgba(108,99,255,0.2),
        0 0 80px rgba(108,99,255,0.1),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

.glass-card.glow-green {
    box-shadow: 
        0 8px 32px rgba(46,204,113,0.2),
        inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Неоморфизм (мягкие тени) */
.neumorphic {
    background: var(--bg-2);
    box-shadow: 
        6px 6px 12px rgba(0,0,0,0.3),
        -6px -6px 12px rgba(255,255,255,0.03);
    border-radius: var(--radius);
    border: none;
}

/* Градиентные карточки */
.gradient-card {
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    padding: var(--gap);
}

.gradient-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.1) 0%,
        rgba(255,255,255,0.05) 50%,
        rgba(255,255,255,0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.gradient-card > * { position: relative; z-index: 2; }

/* Блёстки */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    pointer-events: none;
}

/* Обёртка для карточки с позицией */
.glass-card {
    position: relative;
}

/* Цветные акцентные полоски */
.card-accent {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}