/* =========================================================
   NeonPlay — user.css
   Dark styling for CloudArcade system pages
   (login, register, profile, favorites) that reuse the
   generic "user" markup.
   ========================================================= */

/* Login / Register */
.login-container,
.register-container,
.user-page-container{
	max-width:520px;margin:40px auto 60px;padding:30px;
	background:var(--np-panel);border:1px solid var(--np-border);border-radius:var(--np-radius);
}
.login-container .form-control,
.register-container .form-control,
.user-page-container .form-control{
	background:rgba(255,255,255,.05);border:1px solid var(--np-border);color:var(--np-text);
	border-radius:10px;
}
.login-container .form-control:focus,
.register-container .form-control:focus,
.user-page-container .form-control:focus{
	border-color:rgba(45,212,191,.6);box-shadow:0 0 0 3px rgba(45,212,191,.14);
	background:rgba(255,255,255,.07);color:var(--np-text);
}
.login-container label,
.register-container label,
.user-page-container label{color:var(--np-muted);font-size:13px;font-weight:600}
.btn-login,
.btn-register,
.btn-save-profile{
	background:var(--np-grad);border:none;color:#0b0d20;font-weight:800;border-radius:11px;
	padding:11px 22px;
}
.btn-login:hover,.btn-register:hover,.btn-save-profile:hover{filter:brightness(1.1)}

/* Profile header */
.user-header,
.profile-header{
	display:flex;align-items:center;gap:18px;flex-wrap:wrap;
	padding:22px;background:var(--np-panel);border:1px solid var(--np-border);
	border-radius:var(--np-radius);margin-top:24px;
}
.user-header img,
.profile-avatar{width:76px;height:76px;border-radius:16px;object-fit:cover;border:2px solid rgba(45,212,191,.4)}
.user-header h2,
.profile-name{margin:0;font-size:22px;font-weight:800}
.label-xp{
	display:inline-block;margin-top:6px;padding:3px 12px;border-radius:999px;
	background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.4);
	color:#c4b5fd;font-size:12px;font-weight:700;
}
.rank-badge{font-size:12px;color:var(--np-muted);margin-top:4px;display:block}

/* Profile tabs & lists */
.user-links{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.user-links a{color:inherit}
.user-links li{
	padding:9px 18px;border-radius:10px;font-size:13px;font-weight:700;
	background:rgba(255,255,255,.05);border:1px solid var(--np-border);color:var(--np-muted);
	transition:.16s;cursor:pointer;
}
.user-links li:hover{color:var(--np-text);border-color:rgba(45,212,191,.55)}
.text-danger{color:#fb7185 !important}

/* Favorites grid reuses np-grid through theme markup */
.favorite-list{margin-top:18px}

/* Alerts on system pages */
.alert{border-radius:11px;font-size:13.5px}
.alert-success{background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.4);color:#99f6e4}
.alert-danger{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.4);color:#fda4af}
.alert-warning{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.4);color:#fde68a}
.alert-info{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4);color:#c4b5fd}

/* Tables (leaderboard etc.) */
.table-responsive{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--np-border);color:#c3cae8;text-align:left}
.table th{color:var(--np-muted);font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.table tr:hover td{background:rgba(255,255,255,.03)}

/* Comments (jquery-comments dark overrides) */
.jquery-comments{color:var(--np-text);font-size:13.5px}
.jquery-comments .comment-list .comment .wrapper{background:transparent}
.jquery-comments textarea,
.jquery-comments input[type=text]{
	background:rgba(255,255,255,.05);border:1px solid var(--np-border);color:var(--np-text);
	border-radius:10px;padding:10px 12px;
}
.jquery-comments textarea:focus{outline:none;border-color:rgba(45,212,191,.6)}
.jquery-comments .comment .content{color:#c3cae8}
.jquery-comments .comment .name,
.jquery-comments .comment .actions li{color:var(--np-muted)}
.jquery-comments .highlight-background{background:rgba(45,212,191,.06) !important}
.jquery-comments .reply{border-left:2px solid var(--np-border);margin-left:14px;padding-left:14px}
.jquery-comments textarea::placeholder{color:#5d6590}