/* ===================================================================
   Vista Brain Dashboard — Classic Theme CSS
   Scoped under .home-classic to prevent style leakage
   =================================================================== */

.home-classic {
    font-family: 'DM Sans', system-ui, sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    transition: all .4s ease;
}

/* ── Cards ── */
.home-classic .cl-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 18px;
    transition: all .3s ease;
    backdrop-filter: blur(12px);
}
.home-classic .cl-card:hover {
    border-color: rgba(255,255,255,.09);
    box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* ── Buttons ── */
.home-classic .cl-btn {
    background: #fff;
    color: #111827;
    border: none;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}
.home-classic .cl-btn:hover {
    background: #f3f4f6;
    box-shadow: 0 4px 14px rgba(255,255,255,.1);
    transform: translateY(-1px);
}

/* ── Section label ── */
.home-classic .cl-sec-label {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.1);
    letter-spacing: 2.5px;
}

/* ── Tab buttons ── */
.home-classic .cl-tab {
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
    background: transparent;
    color: rgba(255,255,255,.2);
}
.home-classic .cl-tab.active {
    background: rgba(255,255,255,.06);
    color: #fff;
}

/* ── Keyframe Animations ── */
@keyframes classic-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes classic-popIn { from { opacity: 0; transform: scale(.93); } to { opacity: 1; transform: scale(1); } }
@keyframes classic-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes classic-slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes classic-barIn { from { width: 0; } to { width: var(--w); } }
@keyframes classic-colIn { from { height: 0; } to { height: var(--h); } }
@keyframes classic-ripple { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes classic-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }