.glass-card { background: var(--surface-glass); backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--surface-border); border-radius: var(--card-radius); padding: 1.5rem; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }
.glass-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; }
.glass-card:hover::before { opacity: 1; }
.glass-card:hover { transform: translateY(-3px); border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 229, 255, 0.15); }
.glass-card h3 { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--neon-cyan); }
.glass-card p { font-family: var(--font-body); font-size: 0.85rem; color: var(--text-secondary); }

.btn { background: linear-gradient(135deg, rgba(20, 20, 40, 0.9), rgba(30, 30, 50, 0.9)); border: 1px solid rgba(0, 229, 255, 0.25); color: white; padding: 0.55rem 1.3rem; border-radius: 25px; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.8px; font-family: var(--font-display); cursor: pointer; transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); backdrop-filter: blur(10px); display: inline-flex; align-items: center; gap: 0.4rem; text-transform: uppercase; position: relative; overflow: hidden; text-decoration: none; }
.btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transition: left 0.5s; }
.btn:hover::after { left: 100%; }
.btn:hover { transform: scale(1.05); border-color: var(--neon-pink); box-shadow: 0 0 20px rgba(255, 64, 129, 0.55), 0 6px 18px rgba(0, 0, 0, 0.4); background: linear-gradient(135deg, rgba(30, 30, 55, 0.95), rgba(40, 20, 50, 0.95)); }
.btn-small { padding: 0.35rem 0.8rem; font-size: 0.75rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), rgba(179, 71, 234, 0.3)); border-color: var(--neon-cyan); }
.btn-secondary { background: rgba(30, 30, 50, 0.7); border-color: rgba(255, 255, 255, 0.2); }
.btn-submit { width: 100%; justify-content: center; padding: 0.8rem; font-size: 1rem; background: linear-gradient(135deg, rgba(0, 229, 255, 0.4), rgba(179, 71, 234, 0.4)); }
.btn-connect { width: 100%; justify-content: center; margin-top: 0.5rem; background: linear-gradient(135deg, rgba(76, 255, 76, 0.3), rgba(0, 229, 255, 0.3)); border-color: rgba(76, 255, 76, 0.5); }
.btn-connect:hover { background: linear-gradient(135deg, rgba(76, 255, 76, 0.3), rgba(0, 229, 255, 0.3)); border-color: rgba(76, 255, 76, 0.5); box-shadow: 0 0 20px rgba(76, 255, 76, 0.4); transform: scale(1.02); }
.btn-steam { background: rgba(30, 30, 50, 0.8); border-color: rgba(255, 255, 255, 0.3); }
.admin-panel-btn { background: linear-gradient(135deg, rgba(255,215,64,0.3), rgba(255,64,129,0.3)); border-color: var(--neon-gold); color: var(--neon-gold); }
.admin-panel-btn:hover { box-shadow: 0 0 20px rgba(255,215,64,0.5); }
.btn-pin { background: rgba(255, 215, 64, 0.2); border-color: var(--neon-gold); color: var(--neon-gold); }
.btn-close-btn { background: rgba(255, 64, 129, 0.2); border-color: var(--neon-pink); color: var(--neon-pink); }
.btn-open { background: rgba(76, 255, 76, 0.2); border-color: #4cff4c; color: #4cff4c; }
.btn-delete { background: rgba(139, 46, 46, 0.4); border-color: #8c3a3a; color: #ff6b6b; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }

.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-family: var(--font-display); font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.form-input { width: 100%; padding: 0.7rem 1rem; background: rgba(20, 20, 30, 0.9); border: 1px solid var(--surface-border); border-radius: 10px; color: white; font-family: var(--font-body); font-size: 0.9rem; transition: all 0.3s; resize: vertical; }
.form-input:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 229, 255, 0.2); }
.form-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }

.loading-state { text-align: center; padding: 4rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 300px; }
.loading-state-text { font-family: var(--font-display); font-size: 1.5rem; color: var(--neon-cyan); letter-spacing: 1px; text-shadow: 0 0 15px rgba(0, 229, 255, 0.3); animation: loadingPulse 1.5s ease-in-out infinite; }

.empty-state-card { text-align: center; padding: 3rem 2rem; background: var(--surface-glass); border: 1px solid var(--surface-border); border-radius: var(--card-radius); backdrop-filter: blur(18px) saturate(140%); display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; }
.empty-state-icon { margin-bottom: 0.3rem; }
.empty-state-icon img { width: 64px; height: 64px; opacity: 0.8; }
.empty-state-text { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-secondary); letter-spacing: 0.5px; }

.login-required-card { text-align: center; padding: 3rem; max-width: 500px; margin: 0 auto; background: var(--surface-glass); border: 1px solid var(--surface-border); border-radius: var(--card-radius); backdrop-filter: blur(18px) saturate(140%); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.login-required-card .lock-icon { font-size: 3rem; margin-bottom: 0.3rem; }
.login-required-card h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--neon-cyan); }
.login-required-card p { font-family: var(--font-body); color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; max-width: 400px; }

@media (max-width: 768px) {
    .btn { padding: 0.4rem 1rem; font-size: 0.7rem; }
    .btn-small { padding: 0.3rem 0.6rem; font-size: 0.65rem; }
    .btn-submit { padding: 0.6rem; font-size: 0.85rem; }
    .glass-card { padding: 1rem; }
    .card-grid { grid-template-columns: 1fr; gap: 1rem; }
    .form-input { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
    .form-row { grid-template-columns: 1fr; gap: 0.5rem; }
    .form-group { margin-bottom: 0.8rem; }
    .form-group label { font-size: 0.75rem; }
    .loading-state { padding: 2rem 1rem; min-height: 200px; }
    .loading-state-text { font-size: 1.2rem; }
    .empty-state-card { padding: 2rem 1rem; }
    .empty-state-icon img { width: 48px; height: 48px; }
    .empty-state-text { font-size: 0.9rem; }
    .login-required-card { padding: 2rem 1rem; max-width: 100%; }
    .login-required-card .lock-icon { font-size: 2rem; }
    .login-required-card h3 { font-size: 1.1rem; }
    .login-required-card p { font-size: 0.85rem; }
}