/* Shared profile surfaces; account actions remain scoped to the account page. */
body.profile-account-page,
body.public-profile-page {
    --border-radius: 16px;
    --border-radius-sm: 8px;
    --border-color: #cbd5e1;
    --shadow: 0 2px 8px rgba(15, 23, 42, .05);
    background: #f3f4f6;
}

.profile-account-page .profile-card,
.public-profile-page .bio-card,
.public-profile-page .portfolio-section,
.public-profile-page .professional-info,
.public-profile-page .public-contact-section {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.profile-account-page .profile-card:hover {
    transform: none;
    box-shadow: var(--shadow);
}
.profile-account-page .profile-card > .card-header {
    padding: 1rem 1.25rem;
    gap: .75rem;
}
.profile-account-page .card-header-text { min-width: 0; }
.profile-account-page .card-header-text h3 { font-size: 1.1rem; }
.profile-account-page .card-header-icon { width: 40px; height: 40px; flex-shrink: 0; }
.profile-account-page .card-content { padding: 1.25rem; }
.profile-account-page .info-grid { gap: 1rem; }
.profile-account-page .info-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .875rem;
    min-width: 0;
    border-radius: 8px;
    animation: none;
}
.profile-account-page .info-item::before { content: none; }
.profile-account-page .info-item > .info-icon {
    position: static;
    margin: 0;
    order: initial;
}
.profile-account-page .info-item > .info-text {
    max-width: none;
    margin: 0;
    padding: 0;
    order: initial;
}
.profile-account-page .info-item > .info-actions {
    position: static;
    transform: none;
    margin: 0;
    align-items: center;
    gap: .375rem;
    order: initial;
}
.profile-account-page .info-actions .btn,
.profile-account-page .card-header-actions .btn,
.profile-account-page #socialLinksModal .visibility-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.profile-account-page .visibility-toggle[data-visible="true"] {
    background: #ecfdf5 !important;
    border-color: #138275 !important;
    color: #0f6b5f !important;
}
.profile-account-page .visibility-toggle[data-visible="false"] {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #475569 !important;
}
.profile-account-page .visibility-toggle:hover { filter: brightness(.95); }
.profile-account-page .modal-content {
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    background: #fff;
}
.profile-account-page .modal-header { padding: 1rem 1.25rem; }
.profile-account-page .modal-body { padding: 1.25rem; }
.profile-account-page .modal-footer { padding: .875rem 1.25rem; gap: .5rem; }
.profile-account-page .modal .form-control,
.profile-account-page .modal .form-select {
    min-height: 42px;
    border: 1px solid #b8c4d1;
    border-radius: 8px;
}
.profile-account-page .modal .form-control:focus,
.profile-account-page .modal .form-select:focus {
    border-color: #138275;
    box-shadow: 0 0 0 3px rgba(19, 130, 117, .12);
}
.profile-account-page .modal-footer .btn { min-height: 40px; border-radius: 8px; padding: .5rem 1rem; }
.profile-account-page .modal-footer .btn-primary {
    background: #138275;
    border-color: #138275;
    color: #fff;
}
.profile-account-page .modal-footer .btn-primary:hover { background: #0f6b5f; border-color: #0f6b5f; }
.profile-account-page .modal-footer .btn-secondary,
.profile-account-page .modal-footer .btn-outline-secondary {
    background: #fff;
    color: #475569;
    border-color: #94a3b8;
}
.profile-account-page .modal-footer .btn-secondary:hover,
.profile-account-page .modal-footer .btn-outline-secondary:hover { background: #f1f5f9; }

.public-profile-page .bio-section { margin: 1.25rem 0 !important; }
.public-profile-page .bio-header,
.public-profile-page .portfolio-header,
.public-profile-page .professional-header,
.public-profile-page .public-contact-header {
    padding: 1rem 1.25rem !important;
    text-align: start;
    background: linear-gradient(135deg, #dbe3eb, #cbd5e1) !important;
    color: #1f2937 !important;
    border-bottom: 1px solid #94a3b8;
}
.public-profile-page .bio-header h2,
.public-profile-page .portfolio-header h2,
.public-profile-page .professional-header h2,
.public-profile-page .public-contact-header h2 {
    font-size: 1.2rem !important;
    margin: 0;
    color: #1f2937;
}
.public-profile-page .bio-header p,
.public-profile-page .portfolio-header p,
.public-profile-page .professional-header p { margin: .25rem 0 0; font-size: .9rem !important; }
.public-profile-page .bio-content,
.public-profile-page .portfolio-content,
.public-profile-page .professional-content,
.public-profile-page .public-contact-content { padding: 1.25rem !important; margin-top: 0 !important; }
.public-profile-page .bio-text {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 1rem !important;
    text-align: start !important;
    overflow-wrap: anywhere;
}
.public-profile-page .info-cards { gap: 1rem; }
.public-profile-page .info-card,
.public-profile-page .portfolio-card { border-radius: 8px; border: 1px solid #cbd5e1; }
.public-profile-page .info-card:hover { transform: none; }
.public-profile-page .public-contact-content .social-icons-hero {
    margin: 0;
    justify-content: flex-start;
    gap: .75rem;
    flex-wrap: wrap;
}
.public-profile-page .public-contact-section .social-icon-hero { backdrop-filter: none; }
.public-profile-page .hero-center .social-icons-hero { gap: .5rem; }
.public-profile-page .hero-center .social-icon-hero {
    width: 36px;
    height: 36px;
    font-size: 1rem;
    flex-shrink: 0;
}
@media (max-width: 768px) {
    .profile-account-page .profile-card,
    .public-profile-page .bio-card,
    .public-profile-page .portfolio-section,
    .public-profile-page .professional-info,
    .public-profile-page .public-contact-section { margin-bottom: 1rem; }
    .profile-account-page .card-content,
    .profile-account-page .profile-card > .card-header,
    .public-profile-page .bio-content,
    .public-profile-page .portfolio-content,
    .public-profile-page .professional-content,
    .public-profile-page .public-contact-content { padding: 1rem !important; }
    .profile-account-page .info-grid { grid-template-columns: minmax(0, 1fr); }
    .public-profile-page .info-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-profile-page .info-card { padding: 1rem .75rem; min-width: 0; overflow-wrap: anywhere; }
    .public-profile-page .info-card h4 { font-size: .95rem; }
    .public-profile-page .info-card p { font-size: .9rem; }
}
@media (max-width: 380px) {
    .profile-account-page .info-item { grid-template-columns: minmax(0, 1fr) auto; }
    .profile-account-page .info-item > .info-icon { display: none; }
    .public-profile-page .info-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .profile-account-page .profile-card,
    .public-profile-page .info-card,
    .public-profile-page .portfolio-card { animation: none; transition: none; }
}