/* Profil menggunakan latar, header, dan lebar konten bersama. */
[data-screen="profil"] .profile-page-title h1 { margin: 0; color: #e0fdff; font: 700 26px/34px 'Space Grotesk', sans-serif; }
[data-screen="profil"] .profile-page-title p { margin: 4px 0 0; color: var(--nx-on-surface-variant); font-size: 13px; line-height: 20px; }
[data-screen="profil"] .profile-card { padding: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(28,31,41,.75); }
[data-screen="profil"] .profile-card h2 { margin: 0; color: #e0fdff; font: 600 18px/26px 'Space Grotesk', sans-serif; }
[data-screen="profil"] .profile-identity { display: flex; align-items: center; gap: 14px; }
[data-screen="profil"] .profile-avatar { display: grid; place-items: center; flex-shrink: 0; width: 58px; height: 58px; border: 1px solid rgba(0,242,254,.4); border-radius: 18px; background: rgba(0,242,254,.1); color: var(--nx-cyan); font: 700 22px/1 'Space Grotesk', sans-serif; box-shadow: 0 0 18px rgba(0,242,254,.08); }
[data-screen="profil"] .profile-identity-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
[data-screen="profil"] .profile-identity-copy p { margin: 3px 0 0; color: var(--nx-on-surface-variant); font-size: 12px; line-height: 18px; }
[data-screen="profil"] .profile-eyebrow { display: block; color: var(--nx-on-surface-variant); font: 500 10px/16px 'Space Grotesk', sans-serif; letter-spacing: 1px; }
[data-screen="profil"] .profile-icon-button { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(0,242,254,.15); border-radius: 10px; background: rgba(0,242,254,.06); color: var(--nx-cyan); cursor: pointer; }
[data-screen="profil"] .profile-icon-button .material-symbols-outlined { font-size: 18px; }
[data-screen="profil"] .profile-account-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }
[data-screen="profil"] .profile-status { display: flex; align-items: center; gap: 5px; color: var(--nx-emerald); font-size: 11px; }
[data-screen="profil"] .profile-status .material-symbols-outlined { font-size: 15px; }
[data-screen="profil"] .profile-caption { margin: 0; color: var(--nx-on-surface-variant); font-size: 11px; line-height: 18px; }
[data-screen="profil"] .profile-actions { display: flex; gap: 10px; }
[data-screen="profil"] .profile-actions > * { flex: 1; }
[data-screen="profil"] .profile-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(185,202,203,.18); border-radius: 10px; color: var(--nx-on-surface); background: rgba(38,42,52,.6); font: 600 12px/18px 'Space Grotesk', sans-serif; cursor: pointer; }
[data-screen="profil"] .profile-button .material-symbols-outlined { font-size: 18px; }
[data-screen="profil"] .profile-button-primary { border-color: rgba(0,242,254,.45); color: var(--nx-cyan); background: rgba(0,242,254,.12); }
[data-screen="profil"] .profile-button-danger { color: var(--nx-error); border-color: rgba(255,180,171,.22); background: rgba(255,180,171,.04); }
[data-screen="profil"] .profile-button:hover { filter: brightness(1.2); }
[data-screen="profil"] .profile-form { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); }
[data-screen="profil"] .profile-form label { margin-top: 5px; font-size: 12px; color: var(--nx-on-surface); }
[data-screen="profil"] .profile-form input, [data-screen="profil"] .profile-form select { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid var(--nx-outline); border-radius: 9px; background: var(--nx-void); color: var(--nx-on-surface); font-size: 14px; line-height: 20px; }
[data-screen="profil"] .profile-form input[aria-invalid="true"] { border-color: var(--nx-error); }
[data-screen="profil"] .profile-form .profile-actions { margin-top: 5px; }
[data-screen="profil"] .profile-menu-row { display: flex; align-items: center; width: 100%; gap: 11px; color: inherit; text-decoration: none; text-align: left; cursor: pointer; }
[data-screen="profil"] .profile-menu-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: rgba(0,242,254,.07); color: var(--nx-cyan); }
[data-screen="profil"] .profile-menu-icon .material-symbols-outlined { font-size: 20px; }
[data-screen="profil"] .profile-menu-copy { flex: 1; min-width: 0; overflow-wrap: anywhere; }
[data-screen="profil"] .profile-menu-copy strong { display: block; font: 600 13px/20px 'Space Grotesk', sans-serif; color: var(--nx-on-surface); }
[data-screen="profil"] .profile-menu-copy > span { display: block; color: var(--nx-on-surface-variant); font-size: 11px; line-height: 17px; }
[data-screen="profil"] .profile-chevron { flex-shrink: 0; font-size: 20px; color: var(--nx-on-surface-variant); }
[data-screen="profil"] .profile-details > summary { list-style: none; }
[data-screen="profil"] .profile-details > summary::-webkit-details-marker { display: none; }
[data-screen="profil"] .profile-details[open] > summary > .profile-chevron { transform: rotate(180deg); }
[data-screen="profil"] .profile-setting { padding: 15px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); background: transparent; }
[data-screen="profil"] .profile-setting:last-child { border-bottom: 0; padding-bottom: 0; }
[data-screen="profil"] .profile-switch { appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 40px; height: 24px; border-radius: 99px; border: 1px solid rgba(185,202,203,.3); background: var(--nx-surface-container); background-image: none !important; cursor: pointer; }
[data-screen="profil"] .profile-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-on-surface-variant); transition: transform .18s ease; }
[data-screen="profil"] .profile-switch:checked { background-color: rgba(0,242,254,.16); border-color: var(--nx-cyan); }
[data-screen="profil"] .profile-switch:checked::before { transform: translateX(16px); background: var(--nx-cyan); }
[data-screen="profil"] .profile-empty { padding: 25px 0 5px; text-align: center; }
[data-screen="profil"] .profile-empty h3 { margin: 0; font: 600 13px/20px 'Space Grotesk', sans-serif; }
[data-screen="profil"] .profile-empty p { margin: 4px 0 0; color: var(--nx-on-surface-variant); font-size: 12px; line-height: 19px; }
[data-screen="profil"] .profile-empty > .material-symbols-outlined { margin-bottom: 8px; color: var(--nx-outline); font-size: 30px; }
[data-screen="profil"] .profile-signout { min-height: 46px; }
[data-screen="profil"] .profile-footnote { margin: 0; color: var(--nx-outline); text-align: center; font-size: 10px; }
@media (max-width: 360px) {
  [data-screen="profil"] .profile-card { padding: 16px; }
  [data-screen="profil"] .profile-avatar { width: 48px; height: 48px; font-size: 19px; }
  [data-screen="profil"] .profile-identity { gap: 10px; }
  [data-screen="profil"] .profile-menu-row { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-screen="profil"] .profile-switch::before { transition: none; }
}