/* Pengaturan Akun — permukaan 3D yang mengikuti tema aplikasi */
.account-settings-card {
  max-width: 920px;
  margin: 18px auto 0;
  padding: 30px 34px 34px;
  border: 1px solid var(--account-border, #e4ebf5);
  border-radius: 22px;
  background: linear-gradient(145deg, var(--account-card-top, rgba(255,255,255,.98)), var(--account-card-bottom, rgba(248,251,255,.96)));
  box-shadow: var(--account-card-shadow, 0 18px 40px rgba(43,75,126,.12), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -2px 0 rgba(43,75,126,.05));
  transform: translateZ(0);
}
.account-settings-heading, .account-settings-section-head { display: flex; align-items: flex-start; gap: 16px; }
.account-settings-heading { margin-bottom: 28px; }
.account-settings-icon, .account-settings-mini-icon {
  display: grid; place-items: center; flex: 0 0 auto; color: #1765d1;
  background: linear-gradient(145deg, #eef6ff, #dcecff); border: 1px solid #d2e5ff;
  box-shadow: 0 8px 16px rgba(50,105,183,.14), inset 0 1px 0 #fff;
}
.account-settings-icon { width: 54px; height: 54px; border-radius: 15px; }
.account-settings-mini-icon { width: 38px; height: 38px; border-radius: 12px; }
.account-settings-icon .ico { width: 27px; height: 27px; }
.account-settings-mini-icon .ico { width: 19px; height: 19px; }
.account-settings-heading h2 { margin: 2px 0 5px; color: #10234a; font-size: 25px; letter-spacing: -.025em; }
.account-settings-heading p, .account-settings-section-head p { margin: 0; color: #697991; font-size: 13px; line-height: 1.45; }
.account-settings-section { padding: 24px 20px 20px; border: 1px solid var(--account-section-border, #e5ecf6); border-radius: 18px; background: var(--account-section-bg, rgba(255,255,255,.82)); box-shadow: var(--account-section-shadow, 0 8px 22px rgba(46,79,128,.06), inset 0 1px 0 rgba(255,255,255,.72), inset 0 -2px 0 rgba(46,79,128,.04)); }
.account-settings-section-head { margin-bottom: 21px; }
.account-settings-section-head h3 { margin: 1px 0 4px; color: var(--account-title, #142746); font-size: 17px; }
.account-field { margin: 0 0 16px; }
.account-field label { display: block; margin: 0 0 7px; color: #243653; font-size: 13px; font-weight: 800; }
.account-password-wrap { position: relative; }
.account-password-wrap input { width: 100%; height: 45px; padding: 0 46px 0 14px; border: 1px solid #dbe5f2; border-radius: 10px; background: #fbfdff; color: #182d4f; font-size: 14px; box-shadow: inset 0 2px 5px rgba(50,85,130,.04), 0 2px 6px rgba(50,85,130,.04); }
.account-password-wrap input:focus { outline: none; border-color: #5c9bf0; box-shadow: 0 0 0 3px rgba(58,133,237,.13); }
.account-password-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 7px; color: #8190a6; background: transparent; cursor: pointer; }
.account-password-toggle:hover { color: #1765d1; background: #edf5ff; }
.account-green-button, .account-google-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 43px; padding: 0 20px; border-radius: 9px; color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.account-green-button { border: 1px solid #42c58a; background: linear-gradient(180deg, #31c77c, #15995a); box-shadow: 0 8px 14px rgba(17,157,88,.22), inset 0 2px 0 rgba(255,255,255,.38); }
.account-google-button { border: 1px solid #4f8ff2; background: linear-gradient(180deg, #3989f3, #1761d2); box-shadow: 0 8px 14px rgba(31,99,211,.22), inset 0 2px 0 rgba(255,255,255,.35); }
.account-green-button:hover, .account-google-button:hover { transform: translateY(-1px); }
.account-google-status { margin-top: 13px; padding: 10px 13px; border: 1px solid #bde7cd; border-radius: 9px; background: #effbf3; color: #17613b; font-size: 12px; font-weight: 700; }
.account-google-status::before { content: '✓ '; font-weight: 900; }
.account-settings-divider { height: 1px; margin: 26px 0; background: #e6edf6; }
.account-google-icon, .google-glyph { display: grid; place-items: center; flex: 0 0 auto; color: #4285f4; font-family: Arial, sans-serif; font-weight: 900; }
.account-google-icon { width: 38px; height: 38px; border-radius: 12px; border: 1px solid #e5ecf6; background: #fff; font-size: 22px; box-shadow: 0 5px 12px rgba(70,96,136,.1); }
.google-glyph { width: 19px; height: 19px; border-radius: 50%; background: #fff; font-size: 14px; }
/* Kontrol sesi — daftar perangkat aktif. Hanya metadata aman yang ditampilkan. */
.session-control-section .account-settings-section-head { margin-bottom: 16px; }
.session-control-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.session-control-toolbar > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.session-control-toolbar strong { color: var(--account-title, #142746); font-size: 14px; }
.session-control-status { color: var(--account-muted, #5b6b86); font-size: 12px; font-weight: 700; }
.session-control-refresh { height: 34px; padding: 0 14px; border: 1px solid var(--account-control-border, #cfdcf3); border-radius: 9px; background: linear-gradient(180deg, var(--account-control-top, #f7fbff), var(--account-control-bottom, #eaf2ff)); color: var(--account-accent, #1d4b91); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--account-control-shadow, rgba(29,75,145,.16)), inset 0 1px 0 rgba(255,255,255,.72); }
.session-control-refresh:hover { background: #edf5ff; border-color: #a9c8f4; }
.session-control-refresh[disabled] { color: #8a97ab; background: #f4f7fb; border-color: #dbe4f0; cursor: default; }
.session-control-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; }
.session-control-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--account-row-border, #e5ecf6); border-radius: 14px; background: linear-gradient(145deg, var(--account-row-top, #fff), var(--account-row-bottom, #f5f9ff)); box-shadow: var(--account-row-shadow, 0 7px 0 rgba(46,79,128,.07), 0 12px 18px rgba(46,79,128,.08), inset 0 1px 0 rgba(255,255,255,.92)); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.session-control-row:hover { transform: translateY(-2px); border-color: var(--account-row-hover-border, #9fc1ef); box-shadow: var(--account-row-hover-shadow, 0 9px 0 rgba(46,79,128,.08), 0 16px 24px rgba(46,79,128,.13), inset 0 1px 0 rgba(255,255,255,.94)); }
.session-control-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--account-title, #16264c); font-size: 13px; }
.session-control-account { min-width: 0; }
.session-control-title .ico-sm { color: #1765d1; }
.session-control-title b { font-weight: 800; overflow-wrap: anywhere; }
.session-control-badge { padding: 3px 9px; border: 1px solid #d6e4fb; border-radius: 999px; background: #eef4ff; color: #125bd3; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.session-control-badge.current { border-color: #bfe6cd; background: #e7f6ec; color: #0b5c2e; }
.session-control-badge.other { border-color: #f1d8aa; background: #fff7e5; color: #8a5a05; }
.session-control-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; color: var(--account-muted, #697991); font-size: 11.5px; line-height: 1.5; }
.session-control-account-location { flex-basis: 100%; color: var(--account-accent, #294d80); font-weight: 700; }
.session-control-revoke { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--account-danger-border, #f3c2bf); border-radius: 9px; background: linear-gradient(180deg, var(--account-danger-top, #fff7f6), var(--account-danger-bottom, #fdecea)); color: var(--account-danger, #b42318); font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 var(--account-danger-shadow, rgba(180,35,24,.14)), inset 0 1px 0 rgba(255,255,255,.72); }
.session-control-revoke:hover { background: #fdecea; border-color: #e9a6a1; }
.session-control-revoke[disabled] { color: #b9a4a2; background: #fbf6f5; border-color: #eee1df; cursor: default; }
.session-control-empty, .session-control-loading { padding: 14px; border: 1px dashed #dbe5f2; border-radius: 12px; color: #697991; font-size: 12.5px; text-align: center; }
.session-control-note { margin: 12px 0 0; color: #5b6b86; font-size: 12px; font-weight: 700; }
.session-control-note.error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #fecdc9; border-radius: 10px; background: #fef3f2; color: #b42318; }
/* Tema gelap: tetap 3D, tetapi memakai permukaan navy dan bayangan dalam. */
@media screen {
  body[data-theme="dark"] {
    --account-border: #2a3d5e; --account-card-top: #172640; --account-card-bottom: #0f1b31;
    --account-card-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(143,177,230,.12), inset 0 -3px 0 rgba(0,0,0,.24);
    --account-section-border: #2a3d5e; --account-section-bg: rgba(20,33,58,.82);
    --account-section-shadow: 0 9px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(143,177,230,.09), inset 0 -2px 0 rgba(0,0,0,.18);
    --account-row-border: #35527c; --account-row-top: #1b3151; --account-row-bottom: #122039;
    --account-row-shadow: 0 7px 0 rgba(0,0,0,.22), 0 13px 22px rgba(0,0,0,.25), inset 0 1px 0 rgba(143,177,230,.12);
    --account-row-hover-border: #5b8ed2; --account-row-hover-shadow: 0 9px 0 rgba(0,0,0,.24), 0 17px 26px rgba(0,0,0,.33), inset 0 1px 0 rgba(143,177,230,.16);
    --account-title: #eef4ff; --account-muted: #91a2bd; --account-accent: #9fc0ff;
    --account-control-border: #416aa4; --account-control-top: #1d3a67; --account-control-bottom: #142849; --account-control-shadow: rgba(0,0,0,.28);
    --account-danger-border: #7d4c55; --account-danger-top: #3b2029; --account-danger-bottom: #2b1820; --account-danger: #ffb5b5; --account-danger-shadow: rgba(0,0,0,.3);
  }
  body[data-theme="dark"] .account-settings-heading h2,
  body[data-theme="dark"] .account-field label { color: var(--account-title); }
  body[data-theme="dark"] .account-settings-heading p,
  body[data-theme="dark"] .account-settings-section-head p { color: var(--account-muted); }
  body[data-theme="dark"] .session-control-badge { background: #223a63; border-color: #416aa4; color: #b9d2ff; }
  body[data-theme="dark"] .session-control-badge.current { background: #173e36; border-color: #3d8b70; color: #9fe1c5; }
  body[data-theme="dark"] .session-control-badge.other { background: #44351a; border-color: #806328; color: #f1d58d; }
  body[data-theme="dark"] .session-control-account-location { color: #b9d2ff; }
}
/* System theme saat OS memilih gelap tetap menggunakan kulit gelap. */
@media (prefers-color-scheme: dark) {
  html[data-theme-choice="system"] body:not([data-theme="light"]) {
    --account-border: #2a3d5e; --account-card-top: #172640; --account-card-bottom: #0f1b31;
    --account-card-shadow: 0 18px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(143,177,230,.12), inset 0 -3px 0 rgba(0,0,0,.24);
    --account-section-border: #2a3d5e; --account-section-bg: rgba(20,33,58,.82); --account-row-border: #35527c; --account-row-top: #1b3151; --account-row-bottom: #122039; --account-title: #eef4ff; --account-muted: #91a2bd; --account-accent: #9fc0ff;
  }
}
@media (max-width: 640px) { .session-control-row { flex-direction: column; } .session-control-revoke { align-self: flex-end; } }
@media (max-width: 640px) { .account-settings-card { margin-top: 8px; padding: 22px 16px; border-radius: 16px; } .account-settings-heading h2 { font-size: 21px; } .account-settings-section { padding: 18px 14px; } }