/* =====================================================================
   Vinzz Piano Tiles v2 - Akun & Profil (tema pastel kartun)
   Halaman: login, register, forgot, reset, logout, profile.
   Hanya memakai token & komponen dari app.css. Mobile first.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Kontras teks (WCAG AA 4.5:1) untuk halaman ini.
   Token tinta gelap untuk teks di atas latar lembut & tombol berwarna.
   ------------------------------------------------------------------- */

:root {
  --text-sub: #5d568a;
  --grape-ink: #5536cc;
  --sky-ink: #0b69a8;
  --pink-ink: #b02a68;
  --mint-ink: #0b7453;
  --orange-ink: #9c4d05;
  --red-ink: #b0202f;
}
.mode-song { --mode-ink: var(--pink-ink); }
.mode-arcade { --mode-ink: var(--sky-ink); }
.mode-zen { --mode-ink: var(--mint-ink); }
.mode-rush { --mode-ink: var(--orange-ink); }

.muted, .song-card-artist, .field-hint, .empty-state p, .stat-label, .stat-sub, .dropzone-meta,
.switch-desc, .modal-subtitle, .pagination-info, .loading-state { color: var(--text-sub); }
.eyebrow { color: var(--grape-ink); }
.badge-success { color: var(--mint-ink); }
.badge-warning { color: var(--orange-ink); }
.badge-info { color: var(--sky-ink); }
.badge-danger { color: var(--red-ink); }
.badge-pink { color: var(--pink-ink); }
.badge-accent { color: var(--grape-ink); }
.diff-badge { color: var(--ink); }
.diff-level { border-left-color: rgba(43, 35, 86, 0.28); }
.btn-grape { --btn-bg: var(--grape-deep); --btn-edge: #4f33c4; --btn-border: var(--grape-deep); }
.btn-sky, .btn-mint, .btn-success, .btn-orange, .btn-pink { --btn-fg: var(--ink); }
.btn-danger { --btn-bg: var(--red-deep); --btn-edge: #b0202f; --btn-border: var(--red-deep); }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--grape-deep); border-color: var(--grape-deep); box-shadow: 0 3px 0 #4f33c4; }
.nav-link.is-active { background: var(--grape-deep); box-shadow: 0 4px 0 #4f33c4; }
.pagination .is-current { --btn-bg: var(--grape-deep); --btn-edge: #4f33c4; --btn-border: var(--grape-deep); }

/* Atribut hidden harus menang atas display milik komponen (.notice, .tab-panel, dll) */
.page-auth [hidden],
.page-profile [hidden] { display: none !important; }

.panel {
  position: relative;
  background: #fff;
  border: 3px solid #fff;
  border-radius: 28px;
  box-shadow: 0 6px 0 rgba(98, 76, 196, 0.12), var(--shadow);
}
.panel-title-icon {
  --tint: var(--grape);
  --tint-soft: var(--grape-soft);
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--tint-soft);
  color: var(--tint);
}

.tint-yellow { --tint: #9a6c00; --tint-soft: var(--yellow-soft); }
.tint-pink { --tint: var(--pink-deep); --tint-soft: var(--pink-soft); }
.tint-sky { --tint: var(--sky-deep); --tint-soft: var(--sky-soft); }
.tint-mint { --tint: var(--mint-deep); --tint-soft: var(--mint-soft); }
.tint-orange { --tint: var(--orange-deep); --tint-soft: var(--orange-soft); }

.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-link { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--grape-deep); }
.field-link:hover { color: var(--pink-deep); }

/* Tombol lihat kata sandi */
.input.has-action { padding-right: 54px; }
.input-group-plain .input { padding-left: 16px; }
.password-toggle { width: 40px; color: var(--text-sub); }
.password-toggle:hover { color: var(--ink); }
.password-toggle .password-toggle-hide { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-show { display: none; }
.password-toggle[aria-pressed="true"] .password-toggle-hide { display: inline-flex; }
.password-toggle span { display: inline-flex; }

/* Meter kekuatan kata sandi */
.strength { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.strength-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; width: 120px; }
.strength-bars span { height: 8px; border-radius: 999px; background: var(--surface-3); transition: background-color 0.2s var(--ease); }
.strength-label { font-size: 13px; font-weight: 700; color: var(--text-sub); }
.strength[data-level="1"] .strength-bars span:nth-child(-n+1) { background: var(--red); }
.strength[data-level="2"] .strength-bars span:nth-child(-n+2) { background: var(--orange); }
.strength[data-level="3"] .strength-bars span:nth-child(-n+3) { background: var(--sky); }
.strength[data-level="4"] .strength-bars span { background: var(--mint); }
.strength[data-level="1"] .strength-label { color: var(--red-ink); }
.strength[data-level="2"] .strength-label { color: var(--orange-ink); }
.strength[data-level="3"] .strength-label { color: var(--sky-ink); }
.strength[data-level="4"] .strength-label { color: var(--mint-ink); }

/* ---------------------------------------------------------------------
   Halaman autentikasi
   ------------------------------------------------------------------- */

.page-auth .auth-shell { position: relative; padding: clamp(40px, 7vw, 80px) var(--gutter) clamp(32px, 6vw, 64px); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: clamp(28px, 5vw, 72px); width: 100%; max-width: 980px; margin: 0 auto; }
.auth-shell-single .auth-card { margin: 0 auto; }
.auth-card { width: 100%; max-width: 440px; }

.auth-aside { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-left: 12px; }
.auth-aside-mascot { width: 150px; animation: mascot-bounce 2.6s var(--ease) infinite; filter: drop-shadow(0 12px 14px rgba(43, 35, 86, 0.18)); }
.auth-aside h2 { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; line-height: 1.08; max-width: 380px; }
.auth-perks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-perks li { display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-weight: 700; font-size: 15.5px; color: var(--ink-2); }
.auth-perk-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--tint-soft); color: var(--tint); }
.auth-perk-icon.tint-yellow { color: var(--yellow); background: #fff; box-shadow: inset 0 0 0 2px var(--yellow-soft); }
.auth-perk-icon.tint-yellow .icon { filter: drop-shadow(0 1.5px 0 var(--yellow-deep)); }

.auth-panel { padding: 64px clamp(20px, 5vw, 34px) clamp(22px, 5vw, 30px); border-radius: 34px; box-shadow: 0 8px 0 rgba(98, 76, 196, 0.14), var(--shadow-lg); }
.auth-mascot { position: absolute; left: 50%; top: -58px; width: 96px; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(43, 35, 86, 0.16)); }
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-head h1 { font-size: clamp(30px, 6vw, 36px); font-weight: 700; }
.auth-head p { margin: 8px auto 0; max-width: 340px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.auth-head-icon { display: none; }
.auth-username { color: var(--ink); font-weight: 800; }

.auth-notice { margin-bottom: 16px; }
.auth-notice span { line-height: 1.45; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .input-group > .icon { color: var(--grape); }
.auth-submit { margin-top: 4px; }
.auth-legal { font-size: 12.5px; line-height: 1.5; text-align: center; color: var(--text-sub); }
.auth-switch { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 2px dashed var(--line); font-weight: 700; color: var(--ink-2); }
.auth-foot { margin-top: 18px; text-align: center; font-size: 15px; color: var(--ink-2); }
.auth-foot a { font-family: var(--font-display); font-weight: 600; }

.auth-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 70px; text-align: center; }
.auth-state-mascot { position: absolute; left: 50%; top: -62px; width: 104px; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(43, 35, 86, 0.16)); }
.auth-state h1 { font-size: clamp(26px, 5vw, 32px); font-weight: 700; }
.auth-state > p { max-width: 360px; font-size: 15.5px; color: var(--ink-2); }
.auth-state-note { font-size: 14px !important; color: var(--text-sub) !important; }
.auth-state-help { width: 100%; margin: 6px 0 0; text-align: left; }
.auth-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 10px; }
.auth-state-actions .btn { flex: 1 1 160px; }
.auth-logout-user { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface-2); font-weight: 700; color: var(--ink-2); }

@media (max-width: 860px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .auth-aside { display: none; }
}

@media (max-width: 480px) {
  .page-auth .auth-shell { padding-top: 72px; }
  .auth-panel { padding: 56px 18px 22px; border-radius: 30px; }
  .auth-mascot { width: 84px; top: -52px; }
  .auth-state { padding-top: 60px; }
  .auth-state-mascot { width: 92px; top: -56px; }
  .strength-bars { width: 96px; }
}

/* ---------------------------------------------------------------------
   Profil
   ------------------------------------------------------------------- */

.profile-hero { overflow: hidden; margin-bottom: 20px; padding: 0; }
.profile-banner {
  --h: var(--profile-hue, 260);
  position: relative;
  height: 118px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 255, 255, 0.55) 0 38px, transparent 39px),
    radial-gradient(circle at 86% 80%, rgba(255, 255, 255, 0.4) 0 60px, transparent 61px),
    linear-gradient(120deg, hsl(var(--h) 90% 86%), hsl(calc(var(--h) + 60) 90% 88%));
}
.banner-note { position: absolute; color: rgba(255, 255, 255, 0.95); filter: drop-shadow(0 3px 0 rgba(43, 35, 86, 0.12)); }
.banner-note.n1 { left: 30%; top: 22px; transform: rotate(-12deg); }
.banner-note.n2 { left: 52%; top: 60px; color: var(--yellow); filter: drop-shadow(0 2px 0 var(--yellow-deep)); }
.banner-note.n3 { right: 26%; top: 18px; }
.banner-tiles { position: absolute; right: 24px; bottom: -8px; display: flex; gap: 5px; }
.banner-tiles i { display: block; width: 22px; height: 58px; border-radius: 7px; background: rgba(255, 255, 255, 0.9); }
.banner-tiles i:nth-child(2) { background: var(--ink); height: 70px; }
.banner-tiles i:nth-child(4) { background: var(--ink); height: 46px; }

.profile-identity { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 22px; padding: 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 24px); }
.profile-avatar { margin-top: -56px; }
.profile-avatar .avatar { border-width: 6px; box-shadow: 0 6px 0 rgba(98, 76, 196, 0.18), 0 12px 24px rgba(43, 35, 86, 0.14); }
.profile-info { min-width: 0; flex: 1 1 260px; padding-top: 12px; }
.profile-info .eyebrow { margin-bottom: 2px; }
.profile-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.profile-name { font-size: clamp(28px, 4.4vw, 40px); font-weight: 700; overflow-wrap: anywhere; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 14.5px; font-weight: 700; color: var(--ink-2); }
.profile-meta > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.profile-meta .icon { color: var(--grape); }
.profile-email span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.profile-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.profile-stat { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 24px; box-shadow: 0 5px 0 rgba(98, 76, 196, 0.1), var(--shadow); }
.profile-stat::before { display: none; }
.profile-stat-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--stat-color); color: #fff; box-shadow: 0 4px 0 rgba(43, 35, 86, 0.15); }
.profile-stat-text { min-width: 0; }
.profile-stat .stat-label { font-size: 13.5px; }
.profile-stat .stat-value { margin-top: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.profile-stat .stat-sub { font-size: 12.5px; }

.profile-tabs .tabs { margin-bottom: 18px; background: rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 5px; }
.profile-tabs .tab { height: 48px; padding: 0 16px; font-size: 16px; border-radius: 15px; }
.profile-tabs .tab .icon { color: var(--grape); }
.tab-count { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-3); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.tab.is-active .tab-count { background: var(--grape-deep); color: #fff; }
.label-short { display: none; }
.tab-panel:focus { outline: none; }
.tab-panel:focus-visible { outline: 3px solid var(--grape); outline-offset: 6px; border-radius: 20px; }

.panel-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.7); }
.panel-toolbar p { max-width: 560px; font-size: 14px; color: var(--ink-2); }
.panel-more { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ink-2); }

.score-list { display: grid; gap: 10px; }
.score-row {
  display: grid;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 4px 0 rgba(98, 76, 196, 0.1);
  transition: transform 0.22s var(--bounce), box-shadow 0.2s var(--ease);
}
.score-row:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 rgba(98, 76, 196, 0.14); }
.score-row-best { grid-template-columns: 60px minmax(0, 1fr) auto minmax(90px, auto); }
.score-row-recent { grid-template-columns: 50px minmax(0, 1fr) auto 20px; }
.score-cover { position: relative; display: block; width: 60px; height: 60px; overflow: hidden; border-radius: 16px; background: var(--surface-3); }
.score-cover img { width: 100%; height: 100%; object-fit: cover; }
.score-cover .cover-placeholder .icon { width: 50%; height: 50%; }
.score-song { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.score-title { font-family: var(--font-display); font-weight: 650; font-size: 17px; }
.score-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.score-sub .diff-badge { height: 24px; font-size: 12px; padding: 0 10px; }
.score-sub .mode-pill { height: 24px; font-size: 12.5px; }
.score-medals .medals { gap: 4px; }
.score-medals .stars, .score-medals .crowns { gap: 1px; }
.score-value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1.15; }
.score-value small { font-size: 12.5px; font-weight: 700; color: var(--text-sub); }
.score-value b { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); white-space: nowrap; }
.score-extra .medals { gap: 2px; }
.score-extra .stars, .score-extra .crowns { gap: 0; }
.score-mode { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--mode); color: #fff; box-shadow: 0 4px 0 var(--mode-deep); }
.score-go { color: var(--text-sub); }

/* Pengaturan akun */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.account-card-wide { grid-column: 1 / -1; }
.account-card-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 0; }
.account-card-title { font-size: 20px; font-weight: 650; }
.account-card-desc { margin-top: 2px; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.account-card-desc strong { color: var(--ink); }
.account-card-body { padding: 16px 22px 22px; }
.account-form-actions { display: flex; justify-content: flex-end; }

.avatar-editor { display: flex; align-items: center; gap: 20px; }
.avatar-preview { flex: none; }
.avatar-preview .avatar { border-width: 5px; box-shadow: 0 5px 0 var(--line-strong); }
.avatar-preview-image img { width: 100%; height: 100%; object-fit: cover; }
.avatar-editor-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.avatar-dropzone-text { display: flex; flex-direction: column; min-width: 0; }
.avatar-dropzone .dropzone-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-dropzone:focus-within { outline: 3px solid var(--grape); outline-offset: 3px; }
.avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.avatar-remove { color: var(--red-deep); }
.avatar-remove:hover { color: var(--red-deep); background: var(--red-soft); }

.account-session-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 18px 22px; }
.account-session-text { flex: 1 1 240px; }

@media (max-width: 1080px) {
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .profile-banner { height: 92px; }
  .banner-tiles { right: 14px; }
  .banner-tiles i { width: 16px; height: 44px; }
  .banner-tiles i:nth-child(2) { height: 54px; }
  .banner-tiles i:nth-child(4) { height: 36px; }
  .profile-identity { flex-direction: column; align-items: flex-start; gap: 10px; }
  .profile-avatar { margin-top: -48px; }
  .profile-avatar .avatar { width: 96px !important; height: 96px !important; border-width: 5px; }
  .profile-info { padding-top: 0; flex-basis: auto; width: 100%; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1; }
  .profile-email span { max-width: 240px; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .profile-stat { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 22px; }
  .profile-stat:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .profile-stat-icon { width: 40px; height: 40px; border-radius: 13px; }
  .profile-stat-icon .icon { width: 20px; height: 20px; }
  .profile-tabs .tabs { gap: 4px; padding: 4px; border-radius: 18px; }
  .profile-tabs .tab { flex: 1 1 0; flex-direction: column; gap: 2px; height: 58px; padding: 4px 2px; font-size: 13.5px; border-radius: 14px; }
  .profile-tabs .tab .tab-count { display: none; }
  .label-full { display: none; }
  .label-short { display: inline; }
  .score-row { gap: 10px; padding: 8px 12px 8px 8px; border-radius: 20px; }
  .score-row-best { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .score-row-best .score-medals { grid-column: 2; grid-row: 2; }
  .score-row-best .score-value { grid-column: 3; grid-row: 1 / span 2; }
  .score-row-best .score-cover { grid-row: 1 / span 2; }
  .score-cover { width: 52px; height: 52px; border-radius: 14px; }
  .score-row-recent { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .score-row-recent .score-go { display: none; }
  .score-mode { width: 42px; height: 42px; border-radius: 14px; }
  .score-title { font-size: 15.5px; }
  .score-value b { font-size: 17px; }
  .score-medals .icon { width: 17px; height: 17px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .account-card-head { padding: 16px 16px 0; }
  .account-card-body { padding: 14px 16px 18px; }
  .avatar-editor { flex-direction: column; align-items: stretch; }
  .avatar-preview { align-self: center; }
  .account-form-actions .btn { width: 100%; }
  .panel-toolbar .row-wrap { width: 100%; }
  .panel-toolbar .row-wrap .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-aside-mascot { animation: none; }
}