/* account.css — profile, edit, register */
.profile-hero {
    position: relative; background-size: cover; background-position: center; padding: 24px;
}
.profile-hero::before {
    content: ''; position: absolute; inset: 0; border-radius: var(--radius) var(--radius) 0 0;
    background: linear-gradient(to bottom, rgba(43,42,41,0.55), rgba(43,42,41,0.92));
}
.profile-hero > * { position: relative; z-index: 1; }
.profile-avatar {
    width: 72px; height: 72px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.2);
    object-fit: cover; background: var(--dark-soft); flex-shrink: 0;
}
.profile-hero-row { display: flex; align-items: center; gap: 18px; }
.profile-name { font-size: 26px; font-weight: 800; margin: 0; color: #fff; }
.profile-slug { font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.45); margin-top: 2px; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.profile-stat {
    display: block; text-decoration: none; background: var(--subtle);
    border-radius: 8px; padding: 12px 14px; text-align: center; transition: background 0.15s;
}
.profile-stat:hover { background: var(--border); text-decoration: none; }
.profile-stat__value { font-size: 22px; font-weight: 800; color: var(--text-1); display: block; }
.profile-stat__label { font-size: 12px; color: var(--text-3); display: block; margin-top: 2px; }

/* Edit */
.edit-avatar-wrap { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.edit-avatar-preview {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; background: var(--subtle); border: 2px solid var(--border);
}
.edit-cover-preview {
    width: 100%; height: 80px; border-radius: 8px; object-fit: cover;
    background: var(--subtle); border: 1px solid var(--border); margin-bottom: 8px;
}
.edit-field-group { margin-bottom: 14px; }
.edit-field-group label {
    display: block; font-size: 12px; font-weight: 500; color: var(--text-3);
    margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* <a> ds-btn — override Bootstrap blue hover */
a.ds-btn--danger, a.ds-btn--danger:hover, a.ds-btn--danger:focus { color: var(--danger); text-decoration: none; }
a.ds-btn--dark:hover, a.ds-btn--dark:focus { text-decoration: none; }
a.ds-btn--ghost:hover, a.ds-btn--ghost:focus { color: var(--dark); text-decoration-color: var(--dark); }

/* JS notifications — plain inline text */
#is_un_available { font-size: 13px; color: var(--text-2); margin-top: 6px; }
#code_status { font-size: 13px; color: var(--text-2); display: block; margin-top: 6px; }

/* ─── Register page: override ALL Bootstrap colors ─── */
.register-page .btn.btn-outline-danger, .register-page .btn.btn-danger,
.register-page .btn.btn-outline-warning, .register-page .btn-outline-danger, .register-page .btn {
    background: var(--dark) !important; color: #fff !important;
    border: 0 !important; border-color: transparent !important;
    border-radius: 8px !important; box-shadow: none !important;
    font-weight: 700; font-size: 14px; padding: 10px 24px;
}
.register-page .btn:hover, .register-page .btn:focus, .register-page .btn:active {
    background: var(--dark-soft) !important; color: #fff !important;
    border: 0 !important; box-shadow: none !important;
}
.register-page .alert {
    background: var(--subtle) !important; color: var(--text-2) !important;
    border: 1px solid var(--border) !important; border-radius: 8px !important;
    font-size: 13px; box-shadow: none !important;
}
.register-page .text-danger { color: var(--danger) !important; font-size: 13px; }
.register-page .text-secondary, .register-page .form-check label, .register-page .form-check small {
    font-size: 13px; color: var(--text-3) !important;
}
.register-page .form-check a { color: var(--text-2); }
.register-page .form-check a:hover { color: var(--text-1); }

@media (max-width: 640px) {
    .profile-hero { padding: 18px 16px; }
    .profile-avatar { width: 56px; height: 56px; }
    .profile-name { font-size: 22px; }
}