.glass {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
}

.glass-sm {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}

.glass-panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%);
    pointer-events: none;
}

.glass-nav {
    background: rgba(11, 16, 35, 0.72);
    border-bottom: 1px solid var(--border);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

[data-bs-theme="light"] .glass-nav {
    background: rgba(255, 255, 255, 0.78);
}

.glass-hover {
    transition: var(--transition);
}

.glass-hover:hover {
    border-color: var(--border-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.frost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: var(--blur-sm);
    -webkit-backdrop-filter: var(--blur-sm);
}