/* Explain: Glassmorphism components and dashboard UI styling */
.glass-card {
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.42));
    box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(22px);
}

.glass-panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(18px);
}

.gradient-text {
    background: linear-gradient(90deg, var(--text-color), var(--primary-color) 48%, var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.btn-primary-glow {
    border: 1px solid rgba(56, 189, 248, 0.72);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #03111F;
    box-shadow: 0 14px 42px rgba(56, 189, 248, 0.26);
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.btn-primary-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 54px rgba(56, 189, 248, 0.34);
    filter: saturate(1.08);
}

.btn-ghost-glass {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(248, 250, 252, 0.04);
    color: var(--text-color);
    transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.btn-ghost-glass:hover {
    border-color: rgba(56, 189, 248, 0.54);
    background: rgba(56, 189, 248, 0.08);
    transform: translateY(-1px);
}

.metric-pill {
    border: 1px solid rgba(56, 189, 248, 0.24);
    background: rgba(56, 189, 248, 0.08);
    color: var(--primary-color);
}

.dashboard-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(7, 17, 31, 0.9));
    box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(248, 250, 252, 0.06);
}

.dashboard-shell::before {
    content: '';
    position: absolute;
    inset: -40% 18% auto auto;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.26), transparent 68%);
    pointer-events: none;
}

.chart-bar {
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.95), rgba(139, 92, 246, 0.72));
    box-shadow: 0 0 28px rgba(56, 189, 248, 0.22);
}

.integration-tile {
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.52);
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.integration-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(15, 23, 42, 0.72);
}

.form-field {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(7, 17, 31, 0.78);
    color: var(--text-color);
}

.form-field::placeholder {
    color: rgba(148, 163, 184, 0.72);
}

.form-field:focus {
    border-color: rgba(56, 189, 248, 0.72);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
}

.status-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--success-color);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.7);
}