/* kfbeta16 — auth (from page-auth.php) */
    body { background-color: #0f0f0f; color: #e0e0e0; font-family: 'Segoe UI', 'Roboto', sans-serif; } 
    .auth-wrapper { max-width: 420px; margin: 50px auto; padding: 0 15px; }
    .auth-box, .profile-box { background: #1e1e1e; border-radius: 12px; border: 1px solid #333; box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden; }
    .profile-box { padding: 30px; }
    .forms-container { padding: 30px; }
    .auth-tabs { display: flex; background: #181818; border-bottom: 1px solid #333; }
    .tab-item { flex: 1; padding: 15px; background: transparent; border: none; color: #888; font-size: 16px; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; transition: 0.2s; }
    .tab-item:hover { color: #fff; background: #252525; }
    .tab-item.active { color: #fff; border-bottom-color: #0073aa; background: #1e1e1e; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 8px; color: #aaa; font-size: 14px; }
    .form-group input { width: 100%; padding: 12px; background: #252525; border: 1px solid #444; color: #fff; border-radius: 6px; box-sizing: border-box; outline: none; }
    .form-group input:focus { border-color: #0073aa; background: #2a2a2a; }
    .auth-btn { width: 100%; padding: 12px; background: #0073aa; color: #fff; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 16px; margin-top: 10px; }
    .auth-btn:hover { background: #005a87; }
    .auth-btn:disabled { opacity: 0.7; cursor: not-allowed; }
    .profile-header { text-align: center; border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 20px; }
    .profile-avatar-wrapper { width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; border: 3px solid #0073aa; overflow: hidden; background: #2a2a2a; position: relative; }
    .profile-avatar { width: 100%; height: 100%; object-fit: cover; }
    .avatar-letter { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; font-size: 3em; text-transform: uppercase; }
    .profile-name { margin: 5px 0; color: #fff; }
    .role-badge { background: #333; padding: 4px 10px; border-radius: 12px; font-size: 12px; color: #aaa; text-transform: uppercase; }
    .detail-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #333; }
    .detail-row .value { color: #fff; font-weight: 500; }
    .detail-row .coin { color: #ffd700; font-weight: bold; }
    .profile-actions { display: grid; gap: 10px; margin-top: 20px; }
    .action-btn { display: block; text-align: center; padding: 12px; background: #2a2a2a; color: #ddd; text-decoration: none; border-radius: 6px; border: 1px solid #444; transition: 0.2s; }
    .action-btn:hover { background: #333; color: #fff; }
    .action-btn.logout { border-color: #d32f2f; color: #ff5252; background: rgba(211, 47, 47, 0.1); }
    .action-btn.logout:hover { background: #d32f2f; color: #fff; }
    .auth-notify { margin-top: 20px; text-align: center; font-size: 14px; min-height: 20px; }
    .auth-notify.error { color: #ff5252; }
    .auth-notify.success { color: #4caf50; }
    .fade-in { animation: fadeIn 0.4s ease-in-out; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }