/* ═══════════════════════════════════════════════════════════════════════
   MEMBER · KOMPONEN — kulit v2 untuk komponen bersama + aturan tata letak halaman member
   ═══════════════════════════════════════════════════════════════════════
   Menggantikan member-sage.css (diarsipkan). Dua bagian:
   A. Kulit komponen bersama (.st-card, .st-btn, .st-chip, input) — hanya token, tanpa warna tertulis.
   B. Tata letak per-fitur yang dulu menumpang di member-sage: filter Signal ponsel, pengaturan
      profil, tindakan akun. Strukturnya disalin apa adanya; hanya warnanya diganti token.
   Komponen khusus Beranda ada di pages/dashboard.css, bukan di sini.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── A. Kulit komponen bersama ───────── */
.st-card{background:var(--st-panel);border-color:var(--st-hair);box-shadow:0 3px 12px rgba(69,75,47,.04)}
.st-card-h{border-bottom-color:var(--st-hair)}
.st-card-h h2{color:var(--st-ink)}

.st-btn{background:var(--st-accent);color:var(--st-on-accent);border-radius:13px;font-weight:700;box-shadow:0 4px 0 rgba(76,99,38,.12)}
.st-btn:hover{color:var(--st-on-accent)}
.st-btn.ghost{background:var(--st-panel-2);color:var(--st-ink);border:1px solid var(--st-hair-2);box-shadow:none}
.st-btn.ghost:hover{color:var(--st-ink)}
.st-btn:active{transform:translateY(1px)}

.st-chip{border-color:var(--st-hair-2);color:var(--st-ink-2)}

:is(input,select,textarea):where(.st-card *,.st-wrap *){background:var(--st-surface);border-color:var(--st-hair-2);color:var(--st-ink)}
:is(input,textarea)::placeholder{color:var(--st-muted);opacity:1}
:is(a,button):focus-visible{outline-color:var(--st-accent)}

/* Transisi halus pada kontrol interaktif (hormati preferensi gerak) */
.st-btn,.st-chip,.st-tabs .st-tab,.st-luar-tabs>a{transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 130ms ease}
@media(prefers-reduced-motion:reduce){.st-btn,.st-chip,.st-tabs .st-tab,.st-luar-tabs>a{transition:none}}

/* ───────── B1. Filter & kartu Signal di ponsel ───────── */
.tema-hijau .sg-urut{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;width:100%!important;max-width:100%!important;padding:6px 10px!important;overflow:hidden!important;scrollbar-width:none!important}
.tema-hijau .sg-urut::-webkit-scrollbar{display:none!important}
.tema-hijau .sg-urut-i{display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:36px!important;padding:0 6px!important;margin:0!important;white-space:nowrap!important}
@media(max-width:480px){
  .tema-hijau .sg-urut{gap:5px!important;padding:5px 10px!important}
  .tema-hijau .sg-urut-i{height:34px!important;padding:0 3px!important;font-size:12px!important}

  /* Feed analisa: empat metrik dalam satu baris */
  .tema-hijau.sg-feed .an{margin:0 10px 8px!important;padding:12px 13px!important;border-radius:15px!important}
  .tema-hijau.sg-feed .an-h{gap:6px!important}
  .tema-hijau.sg-feed .an-meta{margin-top:6px!important;line-height:1.4!important}
  .tema-hijau.sg-feed .an-lv{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:0!important;margin-top:9px!important;padding-top:9px!important}
  .tema-hijau.sg-feed .an-lv>span{gap:3px!important;padding:0 5px!important;border-left:1px solid var(--st-hair)!important}
  .tema-hijau.sg-feed .an-lv>span:first-child{padding-left:0!important;border-left:0!important}
  .tema-hijau.sg-feed .an-lv>span:last-child{padding-right:0!important}
  .tema-hijau.sg-feed .an-lv em{font-size:9px!important;white-space:nowrap!important}
  .tema-hijau.sg-feed .an-lv b{font-size:12px!important;white-space:nowrap!important}

  /* Kartu penyedia: selaras dengan feed */
  .tema-hijau.sg-simple .pn-daftar{padding:8px 10px 10px!important;gap:8px!important}
  .tema-hijau.sg-simple .pn{padding:12px 13px!important;border-radius:15px!important}
  .tema-hijau.sg-simple .pn-kepala{grid-template-columns:28px minmax(0,1fr) auto!important;gap:8px!important}
  .tema-hijau.sg-simple .pn-sub{margin-top:2px!important;line-height:1.35!important}
  .tema-hijau.sg-simple .pn-utama{padding-left:4px!important}
  .tema-hijau.sg-simple .pn-utama>b{font-size:17px!important}
  .tema-hijau.sg-simple .pn-utama small{margin-top:2px!important;font-size:9px!important}
  .tema-hijau.sg-simple .pn-angka{grid-template-columns:repeat(4,minmax(0,1fr))!important;row-gap:0!important;margin-top:9px!important;padding-top:9px!important}
  .tema-hijau.sg-simple .pn-a{gap:3px!important;padding:0 5px!important;border-left:1px solid var(--st-hair)!important}
  .tema-hijau.sg-simple .pn-a:first-child{padding-left:0!important;border-left:0!important}
  .tema-hijau.sg-simple .pn-a:last-child{padding-right:0!important}
  .tema-hijau.sg-simple .pn-a b{font-size:12px!important;white-space:nowrap!important}
  .tema-hijau.sg-simple .pn-a :is(small,span){font-size:9px!important;line-height:1.25!important}

  /* Lima kontrol urut penyedia dalam satu baris */
  .tema-hijau.sg-simple .sg-urut{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:5px 8px!important}
  .tema-hijau.sg-simple .sg-urut-i{height:32px!important;padding:0 2px!important;font-size:10.5px!important;line-height:1!important;border-radius:10px!important}
}

/* ───────── B2. Pengaturan profil & tindakan akun (user/profile/*) ───────── */
.profile-settings{margin-bottom:24px;color:var(--st-ink);background:var(--st-panel)!important;border-color:var(--st-hair)!important}
.profile-settings-kicker{color:var(--st-muted)!important}
.profile-setting-row,.profile-install{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--st-hair);border-radius:16px;background:var(--st-panel-2);color:var(--st-ink)}
.profile-theme-switch button[aria-pressed="true"]{background:var(--st-accent);color:var(--st-on-accent)}
@media(max-width:520px){.profile-setting-row{align-items:stretch;flex-direction:column}.profile-theme-switch{flex-basis:auto;width:100%}}

.account-settings{padding:20px;border-radius:24px}
.account-settings-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.account-settings-links a{display:flex;align-items:center;min-height:44px;padding:10px 12px;border:1px solid var(--st-hair);border-radius:12px;font-size:12px;font-weight:600;color:inherit;text-decoration:none}
.account-settings-links a:hover{background:var(--st-accent-soft)}
.account-logout{margin-top:16px;padding-top:16px;border-top:1px solid var(--st-hair)}
.account-logout button{min-height:44px;width:100%;border:1px solid var(--st-down);border-radius:12px;background:var(--st-down-soft);color:var(--st-down);font-size:13px;font-weight:700;cursor:pointer}
.account-logout button:hover{filter:brightness(.97)}
.account-settings a:focus-visible,.account-logout button:focus-visible,a.st-akun-hp:focus-visible{outline:2px solid var(--st-accent);outline-offset:3px}
a.st-akun-hp{text-decoration:none;color:inherit}
#pengaturan-tema,#keamanan-akun{scroll-margin-top:70px}

/* Tab aktif Jurnal/Signal: aksen v2 datar (menimpa gradien hijau lama di member-hijau.css) */
.tema-hijau :is(.jr-tab-i.on,.sg-tab-i.on){background:var(--st-accent)!important;color:var(--st-on-accent)!important;border-color:var(--st-accent)!important;box-shadow:none!important}
.tema-hijau :is(.jr-tab,.sg-tab){background:var(--st-accent-soft)!important;border-color:var(--st-hair)!important;box-shadow:none!important}

/* ───────── Buddy (maskot + kalimat), dari desain v2 ───────── */
.st-mascot{display:block;flex-shrink:0;width:92px;aspect-ratio:1;background:url('/assets/member-v2/mascot-sheet.jpg') 0 0/300% 300% no-repeat;mix-blend-mode:multiply}
.st-pose-wave{background-position:0 0}.st-pose-point{background-position:50% 0}.st-pose-calm{background-position:0 100%}
.st-pose-happy{background-position:50% 100%}.st-pose-welcome{background-position:100% 100%}
.st-buddy{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 1px;margin:17px 0 20px;background:var(--st-hero-bg);color:var(--st-hero-ink);border-radius:22px;overflow:hidden}
.st-buddy p{margin:0;font-size:12px;line-height:1.6;padding-right:3px}
body.tema-gelap .st-mascot{mix-blend-mode:normal;opacity:.92;border-radius:14px}