/* =====================================================================
   Lingkar — gaya tampilan
   ===================================================================== */

:root {
  --bg: #F5F6F2;
  --surface: #FFFFFF;
  --surface-2: #EEF0EB;
  --ink: #1C2321;
  --ink-2: #3E4845;
  --ink-3: #5E6864;
  --line: #E4E7E1;
  --line-2: #D3D8D0;
  --accent: #D9472B;
  --accent-ink: #FFFFFF;
  --accent-soft: #FBE7E2;
  --accent-glow: rgba(217, 71, 43, 0.33);
  --green: #1F4D45;
  --ok: #2E7D5B;
  --ok-bg: #E3F1EA;
  --ok-line: #9CCBB3;
  --danger: #B3261E;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(28, 35, 33, 0.05), 0 8px 24px rgba(28, 35, 33, 0.06);
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --tabbar-h: 72px;
  --on-ink: #FFFFFF;
  --overlay: rgba(15, 20, 18, 0.42);
  --card-hi: #FFFFFF;
  color-scheme: light;
  font-size: 16px;
}

/* ---------------------------------------------------------------- tema gelap
   Netral gelap berwarna hijau tua (selaras dengan hijau Lingkar), aksen bata dibuat
   sedikit lebih terang supaya tetap terbaca di atas latar gelap. */
html[data-theme="dark"] {
  --bg: #111513;
  --surface: #1A1F1D;
  --surface-2: #232A27;
  --ink: #E9EEEA;
  --ink-2: #C3CCC6;
  --ink-3: #94A09A;
  --line: #29312E;
  --line-2: #36403C;
  --accent: #E8603F;
  --accent-ink: #FFFFFF;
  --accent-soft: #3B221B;
  --accent-glow: rgba(232, 96, 63, 0.35);
  --green: #2D6A5E;
  --ok: #5BBF91;
  --ok-bg: #16302A;
  --ok-line: #2F6B52;
  --danger: #FF7A6E;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px rgba(0, 0, 0, 0.4);
  --on-ink: #111513;
  --overlay: rgba(0, 0, 0, 0.6);
  --card-hi: #222927;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg: #111513; --surface: #1A1F1D; --surface-2: #232A27; --ink: #E9EEEA; --ink-2: #C3CCC6; --ink-3: #94A09A;
    --line: #29312E; --line-2: #36403C; --accent: #E8603F; --accent-soft: #3B221B; --on-ink: #111513; color-scheme: dark;
  }
}

html.simple { font-size: 19px; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
}
body.no-scroll { overflow: hidden; }

a { color: #B83A22; }
a:hover { color: #8F2C18; }
button { font: inherit; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.strong { font-weight: 600; }
.ink { color: var(--ink); }
.block { display: block; }
.center { text-align: center; }
.grow { flex: 1 1 auto; min-width: 0; text-align: left; }
.accent { color: var(--accent); }
.emoji { font-size: 1.15em; line-height: 1; }

.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.stack-lg { display: flex; flex-direction: column; gap: 22px; }
.row-end { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.row-gap { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ------------------------------------------------------------------ kerangka */

.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}
.boot { display: grid; place-items: center; min-height: 100vh; }

.demo-banner {
  background: #FFF4D6;
  color: #6B4E00;
  font-size: 0.8rem;
  text-align: center;
  padding: 6px 12px;
  border-bottom: 1px solid #F1DFA8;
}

.screen { padding: 0 16px 24px; }

.screen-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 0 12px;
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  background: var(--bg);
  z-index: 5;
}
.screen-header-text { flex: 1; min-width: 0; }
.screen-sub { font-size: 0.875rem; color: var(--ink-3); }
.screen-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.screen-actions { display: flex; gap: 6px; align-items: center; }
.screen-header .icon-btn + .screen-header-text .screen-title { font-size: 1.35rem; }

.icon-btn {
  position: relative;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn.small-icon { width: 36px; height: 36px; background: transparent; color: var(--ink-3); }
.icon-btn-spacer { width: 44px; height: 44px; }
.badge {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.badge-inline {
  display: inline-block; margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px;
}

/* ------------------------------------------------------------------ tab bar */

.tabbar {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 100%; max-width: 520px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-around;
  z-index: 20;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--ink-3);
  font-size: 0.72rem; font-weight: 500;
  padding: 6px 0;
  min-height: 48px;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 700; }
.tab-icon { position: relative; display: inline-flex; }
.tab-icon .badge { top: -6px; right: -10px; }
.tab-plus { flex: 0 0 auto; padding: 0 6px; }
.plus-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px var(--accent-glow);
}

/* ------------------------------------------------------------------ tombol & isian */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  font-weight: 600; font-size: 1rem;
  cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.btn-block { width: 100%; }
.btn-small { min-height: 38px; padding: 0 14px; font-size: 0.875rem; border-radius: 12px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #C23D23; color: var(--accent-ink); }
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-dark:hover { background: var(--ink-2); color: var(--on-ink); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: var(--surface-2); color: var(--ink); }
.btn-danger { background: var(--danger); color: #FFFFFF; }
.btn-ghost-danger { background: transparent; color: var(--danger); }

.link-plain {
  background: none; border: none; padding: 4px 0; cursor: pointer;
  color: #B83A22; font-weight: 600; text-align: left;
}
.link-plain.strong { color: var(--ink); font-weight: 700; padding: 0; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.field-hint { font-size: 0.8rem; color: var(--ink-3); }
.field input, .field textarea, .inline-form input, input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  outline: none;
}
.field textarea { resize: vertical; min-height: 72px; }
.field input:focus, .field textarea:focus, .inline-form input:focus, input[type="search"]:focus { border-color: var(--ink); }
.code-input { letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; }
.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--ink-2); }
.check-row input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); }

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

.auth { padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 18px; min-height: 100vh; }
.auth-top { display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.logo-mark { flex: none; border-radius: 9px; box-shadow: 0 4px 10px -6px rgba(31, 77, 69, .6); }
.wordmark { color: var(--ink); font-size: 1.65rem; letter-spacing: -0.03em; line-height: 1; }
.display { font-family: var(--display); font-weight: 700; font-size: 2.1rem; line-height: 1.08; letter-spacing: -0.03em; }
.display.small { font-size: 1.7rem; }
.lead { font-size: 1.05rem; color: var(--ink-2); }
.welcome { justify-content: flex-end; }
.welcome-art { flex: 1; display: grid; place-items: center; min-height: 300px; }
.demo-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: #FFF4D6; color: #5B4300; border-radius: 12px; padding: 10px 12px; font-size: 0.875rem;
}
.demo-note svg { flex-shrink: 0; margin-top: 1px; }
.prose h2 { font-size: 1.05rem; margin-top: 8px; }
.prose p { color: var(--ink-2); }

.ring-art { position: relative; width: 300px; height: 300px; }
.ring-art-outer { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--line-2); }
.ring-art-inner { position: absolute; inset: 60px; border-radius: 50%; border: 1.5px solid var(--line); }
.ring-art-me {
  position: absolute; left: 118px; top: 118px; width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF; display: grid; place-items: center; font-weight: 700;
}
.ring-art-dot {
  position: absolute; border-radius: 50%; display: grid; place-items: center;
  color: #FFFFFF; font-weight: 700; font-size: 0.85rem;
  animation: float 6s ease-in-out infinite;
}
.ring-art-dot.is-light { color: var(--ink-2); border: 1.5px solid var(--line-2); font-size: 0.75rem; }
.ring-art-dot:nth-child(5) { animation-delay: -1s; }
.ring-art-dot:nth-child(6) { animation-delay: -2s; }
.ring-art-dot:nth-child(7) { animation-delay: -3s; }
.ring-art-dot:nth-child(8) { animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------------ avatar */

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; flex-shrink: 0;
  font-weight: 700; letter-spacing: 0.02em;
  transition: box-shadow .25s ease;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Kabar */

.ring-wrap { display: flex; justify-content: center; padding: 4px 0 8px; }
.ring { position: relative; width: min(340px, 100%); aspect-ratio: 1; }
.ring-track { position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed var(--line-2); }
.ring-me {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border-radius: 50%; box-shadow: 0 0 0 6px var(--bg), 0 0 0 7px var(--line-2);
  transition: box-shadow .3s ease;
}
.ring-me.is-ok { box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px var(--ok); }
.ring-me.is-quiet { box-shadow: 0 0 0 6px var(--bg), 0 0 0 9px #8A8FB8; }
.face {
  position: absolute; transform: translate(-50%, -28px);
  width: 76px; border: none; background: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
}
.face-avatar { position: relative; display: inline-flex; border-radius: 50%; }
.face.status-news .face-avatar { animation: glow 2.6s ease-in-out infinite; }
.face.status-none .avatar { opacity: 0.42; }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.face-name {
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
  max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.face.status-none .face-name { color: var(--ink-3); font-weight: 500; }
.face-badge {
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
}
.face-badge.kind-ok { color: var(--ok); }
.face-badge.kind-wake { color: #C47F14; }
.face-badge.kind-quiet, .face-badge.kind-sleep { color: #5E6488; }
.rest-row {
  display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 14px;
  scrollbar-width: thin;
}
.mini-face { border: none; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; flex-shrink: 0; }
.mini-face.status-none .avatar { opacity: 0.42; }
.mini-face .face-name { max-width: 64px; }
.kabar-detail { scroll-margin-top: 90px; }
.hint-card { background: var(--surface); border-radius: var(--radius); padding: 16px; color: var(--ink-2); }
.detail-card { background: var(--surface); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.detail-head { display: flex; align-items: center; gap: 10px; }
.detail-head strong { flex: 1; }
.detail-list { display: flex; flex-direction: column; gap: 12px; }
.progress-line { text-align: center; margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-3); display: flex; align-items: center; justify-content: center; gap: 6px; }
.progress-line.is-done { color: var(--ok); font-weight: 700; }

.status-bar { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.status-btn {
  width: 100%; min-height: 60px; border-radius: 16px;
  background: var(--ink); color: var(--on-ink); border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.status-btn.is-on { background: var(--ok-bg); color: #1F5E43; border-color: var(--ok-line); }
.status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiet-btn {
  min-height: 48px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface);
  display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  padding: 0 10px;
}
.quiet-btn.is-on { background: #ECEDF7; border-color: #B9BCD9; color: #3F4470; }

/* ------------------------------------------------------------------ momen */

.feed { display: flex; flex-direction: column; gap: 12px; }
.moment-card {
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.moment-card.is-unseen { box-shadow: inset 3px 0 0 var(--accent); }
.moment-head { display: flex; gap: 10px; align-items: center; }
.moment-author { border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.moment-meta { flex: 1; min-width: 0; }
.moment-line { font-size: 0.95rem; line-height: 1.3; }
.moment-time { font-size: 0.8rem; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.audience { display: inline-flex; gap: 4px; align-items: center; }
.kind-dot {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem;
}
.kind-dot.kind-ok { background: var(--ok-bg); color: var(--ok); }
.kind-dot.kind-wake { background: #FDF1D8; color: #C47F14; }
.kind-dot.kind-sleep, .kind-dot.kind-quiet { background: #ECEDF7; color: #5E6488; }
.kind-dot.kind-place { background: #E5EEFA; color: #2F5DA8; }
.moment-content { display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.moment-body { font-size: 1rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.moment-body.clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tagged { font-size: 0.85rem; color: var(--ink-3); }
.memory-card { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.memory-card img { width: 100%; max-height: 520px; object-fit: cover; }
.memory-chips {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip-glass {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(20, 24, 22, 0.62); color: #FFFFFF;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 5px 10px; font-size: 0.78rem; font-weight: 600;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-2); border-radius: 14px; padding: 10px 12px;
}
.music-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.music-text { flex: 1; min-width: 0; }
.music-text > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-foot { display: flex; align-items: center; gap: 4px; }
.foot-btn {
  min-height: 40px; padding: 0 12px; border-radius: 20px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.moment-foot > .foot-btn { border-color: transparent; }
.foot-btn.is-active { border-color: var(--accent); background: var(--accent-soft); color: #8F2C18; font-weight: 700; }
.reaction-summary { margin-left: auto; font-size: 0.85rem; color: var(--ink-3); }
.reaction-wrap { position: relative; }
.reaction-picker {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 10;
  display: flex; gap: 2px; padding: 6px;
  background: var(--surface); border-radius: 999px; box-shadow: 0 8px 28px rgba(28, 35, 33, 0.18);
  animation: pop .14s ease-out;
}
.reaction-picker[hidden] { display: none; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.reaction-opt {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
  transition: transform .1s ease;
}
.reaction-opt:hover, .reaction-opt:focus-visible { transform: scale(1.18); background: var(--surface-2); }
.reaction-opt.is-active { background: var(--accent-soft); }
.end-note { text-align: center; color: var(--ink-3); font-size: 0.9rem; padding: 12px 0; }

/* ------------------------------------------------------------------ detail momen & komentar */

.detail-wrap { display: flex; flex-direction: column; gap: 18px; padding-bottom: 80px; }
.section-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.section-label .small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.comments { display: flex; flex-direction: column; gap: 12px; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.comment-bubble { flex: 1; min-width: 0; background: var(--surface); border-radius: 4px 16px 16px 16px; padding: 10px 12px; }
.comment-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.comment-bubble p { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.comment-form {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  width: 100%; max-width: 520px; z-index: 15;
  display: flex; gap: 8px; align-items: flex-end;
  padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--line);
}
.comment-form textarea {
  flex: 1; resize: none; min-height: 44px; max-height: 140px;
  padding: 11px 14px; border-radius: 22px; border: 1.5px solid var(--line-2); background: var(--surface); outline: none;
}
.comment-form textarea:focus { border-color: var(--ink); }
.send-btn { background: var(--accent); color: #FFFFFF; }
.send-btn:hover { background: #C23D23; }

/* ------------------------------------------------------------------ chips & segmented */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 14px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.chip {
  flex-shrink: 0; min-height: 38px; padding: 0 14px; border-radius: 19px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 500; cursor: pointer;
}
.chip.is-active { background: var(--ink); color: var(--on-ink); border-color: var(--ink); font-weight: 600; }
.chip.static { cursor: default; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.segmented { display: flex; background: var(--surface-2); border-radius: 14px; padding: 4px; gap: 2px; margin-bottom: 16px; overflow-x: auto; }
.segmented button {
  flex: 1; min-height: 40px; border: none; background: none; border-radius: 10px;
  font-size: 0.85rem; font-weight: 600; color: var(--ink-3); cursor: pointer; white-space: nowrap; padding: 0 8px;
}
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ------------------------------------------------------------------ bagikan momen */

.compose-body { padding-bottom: 20px; }
.compose-me { display: flex; gap: 12px; align-items: flex-start; }
.compose-text {
  flex: 1; border: none; background: transparent; resize: none; outline: none;
  font-size: 1.2rem; line-height: 1.4; padding: 8px 0; min-height: 80px;
}
.kind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kind-opt {
  min-height: 72px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.kind-opt.is-active { border: 2px solid var(--accent); color: #8F2C18; background: var(--accent-soft); }
.photo-drop {
  display: block; border-radius: 16px; border: 1.5px dashed var(--line-2); background: var(--surface);
  overflow: hidden; cursor: pointer; min-height: 180px;
}
.photo-drop.has-photo { border-style: solid; }
.photo-drop img { width: 100%; max-height: 420px; object-fit: cover; }
.photo-drop-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-3); font-size: 0.9rem; padding: 16px; text-align: center; }
.mood-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mood-opt {
  min-height: 70px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 0.8rem; cursor: pointer;
}
.mood-opt .emoji { font-size: 1.5rem; }
.mood-opt.is-active { border: 2px solid var(--accent); background: var(--accent-soft); font-weight: 700; }

.settings-list, .card {
  background: var(--surface); border-radius: var(--radius); padding: 6px 16px;
}
.card { padding: 16px; margin-bottom: 14px; }
.settings-item {
  width: 100%; min-height: 56px; border: none; background: none; padding: 0;
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.settings-item:last-child { border-bottom: none; }
.settings-item .value { max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 0.9rem; }
.settings-item .value.accent { color: var(--accent); font-weight: 600; }
.settings-item.danger { color: var(--danger); }
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice {
  min-height: 56px; width: 100%; padding: 10px 14px; border-radius: 14px;
  border: 1.5px solid var(--line-2); background: var(--surface);
  display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left;
}
.choice.is-active { border-color: var(--accent); background: var(--accent-soft); }
.choice.danger { color: var(--danger); }
.check-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; }
.check-item { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-item input { width: 22px; height: 22px; accent-color: var(--accent); }

/* ------------------------------------------------------------------ profil */

.profile-head { display: flex; gap: 16px; align-items: center; padding: 6px 0 12px; }
.profile-id { flex: 1; min-width: 0; }
.profile-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; }
.profile-bio { margin-top: 6px; color: var(--ink-2); }
.profile-actions { display: flex; gap: 10px; margin-bottom: 14px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border-radius: 19px; background: var(--surface); border: 1.5px solid var(--line-2); font-size: 0.9rem; font-weight: 600;
}
.pill-ok { background: var(--ok-bg); border-color: var(--ok-line); color: #1F5E43; }
.meter { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 10px 0 6px; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.memory-banner { background: var(--green); color: #FFFFFF; border-radius: var(--radius); padding: 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.memory-label { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #CFE0DA; }
.memory-item { display: flex; gap: 12px; align-items: center; border: none; background: rgba(255,255,255,.08); border-radius: 12px; padding: 8px; cursor: pointer; color: #FFFFFF; text-align: left; }
.memory-item img, .memory-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.memory-thumb { background: #3C6B61; display: inline-flex; align-items: center; justify-content: center; }
.memory-text { display: flex; flex-direction: column; gap: 2px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.memory-year { font-family: var(--font); font-size: 0.8rem; font-weight: 500; color: #CFE0DA; }

.calendar { padding: 12px 12px 16px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: 1.05rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.cal-dow { font-size: 0.75rem; color: var(--ink-3); padding: 4px 0; }
.cal-cell {
  height: 2.5rem; border-radius: 10px; border: none; background: none;
  font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
}
.cal-cell[disabled] { cursor: default; }
.cal-cell.has { background: var(--accent); color: #FFFFFF; font-weight: 700; cursor: pointer; }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; }
.cal-cell.selected { background: var(--ink); color: var(--on-ink); }

/* ------------------------------------------------------------------ teman */

.person-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); padding: 0 12px; margin-bottom: 16px; }
.person-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; width: 100%;
  border: none; background: none; padding: 8px 0; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left;
}
.person-row:last-child { border-bottom: none; }
.person-row.static { cursor: default; }
.circle-dots { display: flex; gap: 4px; }
.find-card { display: flex; flex-direction: column; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form .at { font-weight: 700; color: var(--ink-3); }
.inline-form input { flex: 1; }
input[type="search"] { margin-bottom: 12px; }
.code-badge { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; letter-spacing: 0.12em; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.invite-explain h2 { font-family: var(--display); font-size: 1.25rem; margin-bottom: 6px; }
.invite-explain p { margin-bottom: 14px; }
.circle-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 16px; }
.circle-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px;
  background: var(--surface); border: none; border-radius: var(--radius); cursor: pointer; width: 100%;
}
.circle-swatch { width: 14px; height: 40px; border-radius: 7px; flex-shrink: 0; }
.avatar-stack { display: flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; }
.swatch.is-active { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink); }

/* ------------------------------------------------------------------ notifikasi & pengaturan */

.notif-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.notif {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 14px;
  border: none; background: none; border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; width: 100%;
}
.notif:last-child { border-bottom: none; }
.notif.is-unread { background: #FFF8F5; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.avatar-edit { display: flex; align-items: center; gap: 16px; }
.switch-row { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.switch-row input {
  appearance: none; -webkit-appearance: none; width: 52px; height: 32px; border-radius: 16px;
  background: var(--line-2); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s;
}
.switch-row input::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s;
}
.switch-row input:checked { background: var(--ok); }
.switch-row input:checked::after { transform: translateX(20px); }
.version { padding: 8px 0 16px; }

/* ------------------------------------------------------------------ status: memuat, kosong */

.loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--ink-3); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); }
.empty h2 { font-family: var(--display); font-size: 1.2rem; }
.empty p { color: var(--ink-3); max-width: 340px; }

/* ------------------------------------------------------------------ toast & sheet */

.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  width: min(480px, calc(100% - 32px)); z-index: 100;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--on-ink); padding: 12px 16px; border-radius: 14px; font-size: 0.92rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: none; }
.toast-error { background: var(--danger); }

.sheet-backdrop {
  position: fixed; inset: 0; z-index: 90; background: rgba(15, 20, 18, 0);
  display: flex; align-items: flex-end; justify-content: center; transition: background .2s;
}
.sheet-backdrop.open { background: rgba(15, 20, 18, 0.42); }
.sheet {
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--bg); border-radius: 22px 22px 0 0; padding: 8px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .22s ease-out;
}
.sheet-backdrop.open .sheet { transform: none; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 4px auto 6px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sheet-head h2 { font-family: var(--display); font-size: 1.25rem; }

/* ------------------------------------------------------------------ layar lebar */

@media (min-width: 760px) {
  body { background: #E9ECE6; }
  .app { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ obrolan */

.foot-label { display: inline; }
@media (max-width: 380px) { .foot-label { display: none; } }

.conv-list { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.conv-row {
  display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.conv-row:last-child { border-bottom: none; }
.conv-row:hover { background: var(--surface-2); color: var(--ink); }
.conv-text { display: flex; flex-direction: column; gap: 3px; }
.conv-top, .conv-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
.conv-title { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 0.78rem; color: var(--ink-3); flex-shrink: 0; }
.conv-preview { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-row.is-unread .conv-preview { color: var(--ink); font-weight: 600; }
.conv-row.is-unread .conv-time { color: var(--accent); font-weight: 600; }
.group-avatar { border-radius: 16px; }

.app.in-room { display: flex; flex-direction: column; min-height: 0; height: 100vh; height: 100dvh; height: var(--vvh, 100dvh); padding-bottom: 0; overflow: hidden; }
.app.in-room .view { flex: 1; min-height: 0; display: flex; }
.chat-room { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }
.chat-header {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.chat-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: none; background: none; padding: 4px; border-radius: 12px; cursor: pointer; text-align: left; }
.chat-who:hover { background: var(--surface-2); }
.chat-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sub { display: block; font-size: 0.8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 4px; overscroll-behavior: contain; }
.chat-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; color: var(--ink-2); }
.older-btn { margin: 4px auto 8px; }
.day-sep { display: flex; justify-content: center; margin: 12px 0 6px; }
.day-sep span { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; }

.msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.msg.mine { justify-content: flex-end; }
.msg-avatar-space { width: 30px; flex-shrink: 0; }
.msg-col { display: flex; flex-direction: column; gap: 2px; max-width: min(78%, 420px); min-width: 0; }
.msg.mine .msg-col { align-items: flex-end; }
.msg-sender { font-size: 0.75rem; font-weight: 700; margin: 6px 0 0 10px; }
.msg-bubble {
  position: relative; padding: 8px 12px 6px; border-radius: 18px; background: var(--surface);
  display: flex; flex-direction: column; gap: 6px; min-width: 64px; max-width: 100%;
  box-shadow: 0 1px 1px rgba(28, 35, 33, 0.06); user-select: text; -webkit-touch-callout: none;
}
.msg.theirs .msg-bubble { border-bottom-left-radius: 6px; }
.msg.mine .msg-bubble { background: var(--accent); color: #FFFFFF; border-bottom-right-radius: 6px; }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.38; }
.msg-time { align-self: flex-end; font-size: 0.68rem; color: var(--ink-3); line-height: 1; margin-top: -2px; }
.msg.mine .msg-time { color: rgba(255, 255, 255, 0.82); }
.msg-deleted { display: flex; align-items: center; gap: 6px; font-style: italic; color: var(--ink-3); font-size: 0.9rem; }
.msg.mine .msg-deleted { color: rgba(255, 255, 255, 0.85); }
.msg-photo { border: none; padding: 0; background: none; cursor: zoom-in; border-radius: 12px; overflow: hidden; margin: 0 -6px; }
.msg-photo img { width: 100%; max-height: 320px; object-fit: cover; }
.msg-moment {
  display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink);
  background: var(--surface-2); border-radius: 12px; padding: 6px; margin: 0 -6px; min-width: 0;
}
.msg.mine .msg-moment { background: rgba(255, 255, 255, 0.92); }
.msg-moment img, .msg-moment-icon { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.msg-moment-icon { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: #8F2C18; }
.msg-moment-author { display: block; font-size: 0.75rem; font-weight: 700; color: var(--ink-3); }
.msg-moment-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; }
.msg-moment.unavailable { gap: 6px; font-size: 0.85rem; color: var(--ink-3); padding: 8px 10px; }

.composer-wrap { background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat-composer { display: flex; align-items: flex-end; gap: 6px; padding: 8px 10px; }
.chat-composer textarea {
  flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 140px; padding: 11px 14px;
  border-radius: 22px; border: 1.5px solid var(--line-2); background: var(--bg); outline: none; line-height: 1.35;
}
.chat-composer textarea:focus { border-color: var(--ink); }
.attach-btn { background: transparent; color: var(--ink-2); cursor: pointer; }
.attach-preview { display: flex; align-items: center; gap: 10px; padding: 8px 12px 0; }
.attach-preview[hidden] { display: none; }
.attach-preview img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.chat-readonly {
  display: flex; align-items: center; gap: 8px; justify-content: center; text-align: center;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--surface-2); color: var(--ink-2); font-size: 0.88rem;
}
.photo-view img { width: 100%; border-radius: 12px; }
.share-preview { display: flex; gap: 10px; align-items: center; background: var(--surface); border-radius: 14px; padding: 8px; }
.share-preview img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; }
.sheet input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line-2); border-radius: 12px; background: var(--surface); outline: none;
}
.sheet input:focus { border-color: var(--ink); }

/* ------------------------------------------------------------------ cerita 24 jam */

.stories-bar {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px; margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px;
  scrollbar-width: none; align-items: flex-start;
}
.stories-bar::-webkit-scrollbar { display: none; }
.story-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 72px; }
.story-bubble { border: none; background: none; padding: 5px; border-radius: 50%; cursor: pointer; }
.story-add {
  position: absolute; top: 48px; right: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF; border: 2.5px solid var(--bg);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.story-name { font-size: 0.75rem; font-weight: 600; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stories-empty { align-self: center; padding: 0 4px 18px; max-width: 220px; }

.story-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-face.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-face.is-text { padding: 12%; }
.story-text {
  font-family: var(--display); font-weight: 700; line-height: 1.18; text-align: center; letter-spacing: -0.01em;
  white-space: pre-wrap; overflow-wrap: anywhere; text-wrap: balance;
}
.story-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 92px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent); color: #FFFFFF; font-size: 1.05rem; text-align: center;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.story-viewer {
  position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 9, 0.96);
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s ease;
}
.story-viewer.open { opacity: 1; }
.story-frame {
  position: relative; width: min(100vw, calc(100vh * 9 / 16), 520px); height: min(100vh, calc(100vw * 16 / 9));
  max-height: 100dvh; overflow: hidden; background: #000; color: #FFFFFF;
}
@media (min-width: 560px) { .story-frame { border-radius: 18px; height: min(92vh, 900px); width: min(calc(92vh * 9 / 16), 506px); } }
.story-stage { position: absolute; inset: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; }
.story-bars { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 3; }
.story-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.story-bar-fill { display: block; height: 100%; background: #FFFFFF; }
.story-top {
  position: absolute; top: calc(20px + env(safe-area-inset-top, 0px)); left: 6px; right: 6px; z-index: 3;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.story-author { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; background: none; border: none; color: #FFFFFF; padding: 6px; cursor: pointer; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.story-author strong { display: block; font-size: 0.92rem; }
.story-time { display: block; font-size: 0.75rem; opacity: .85; }
.story-icon { background: rgba(0,0,0,.25); color: #FFFFFF; }
.story-icon:hover { background: rgba(0,0,0,.45); }
.story-music-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 60%;
  background: rgba(0,0,0,.42); color: #FFFFFF; border: none; border-radius: 999px; padding: 6px 12px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.story-music-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-music-chip .muted-x { opacity: .75; font-weight: 500; }
.story-music-chip.static { position: absolute; top: 14px; left: 14px; z-index: 2; cursor: default; }
.story-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.story-reply-form { display: flex; gap: 8px; align-items: center; }
.story-reply {
  flex: 1; min-width: 0; min-height: 46px; border-radius: 23px; border: 1.5px solid rgba(255,255,255,.6);
  background: rgba(0,0,0,.25); color: #FFFFFF; padding: 0 16px; outline: none;
}
.story-reply::placeholder { color: rgba(255,255,255,.8); }
.story-reply:focus { border-color: #FFFFFF; background: rgba(0,0,0,.45); }
.story-send { background: rgba(255,255,255,.18); color: #FFFFFF; }
.story-own-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.8rem; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

.story-editor-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-bottom: 20px; }
@media (min-width: 480px) { .story-editor-body { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.story-preview {
  position: relative; width: min(100%, 260px); aspect-ratio: 9 / 16; max-width: 100%; justify-self: center;
  border-radius: 18px; overflow: hidden; background: #111; color: #FFFFFF; font-size: 13px; box-shadow: var(--shadow);
}
.story-preview .story-caption { padding: 30px 12px 16px; font-size: 0.95rem; }
.story-preview.is-placeholder .story-text { opacity: .6; }
.story-pick-photo {
  position: absolute; inset: 0; z-index: 2; border: none; background: rgba(0,0,0,.35); color: #FFFFFF;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 600; cursor: pointer;
}
.bg-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bg-swatch { width: 42px; height: 42px; border-radius: 12px; border: none; cursor: pointer; }
.bg-swatch.is-active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }
.story-editor .field textarea { font-size: 1.05rem; }
.story-cta {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); text-decoration: none; color: var(--ink); border: 1.5px dashed var(--line-2);
}
.story-cta:hover { color: var(--ink); border-color: var(--accent); }
.story-cta-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: #8F2C18; display: inline-flex; align-items: center; justify-content: center; }

.track-list { display: flex; flex-direction: column; gap: 10px; }
.track-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1.5px solid transparent; }
.track-row.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.track-play { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--ink); color: var(--on-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.license-note { margin-top: 4px; }

.msg-quote {
  display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; opacity: .85;
  border-left: 3px solid currentColor; padding-left: 8px; margin: 2px 0 0;
}

/* ---------- Penyimpanan di HP & mode offline ---------- */
.offline-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 12px; font-size: 0.85rem; font-weight: 600;
  background: #3A3F3D; color: #F4F1EA;
}
.offline-banner[hidden] { display: none; }
.storage-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.storage-stats div { background: var(--surface-2, rgba(0,0,0,0.04)); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.storage-stats dt { font-size: 0.78rem; color: var(--ink-3); }
.storage-stats dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.storage-meter { height: 8px; border-radius: 99px; background: var(--line, rgba(0,0,0,0.08)); overflow: hidden; }
.storage-meter span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.ok-line { display: flex; gap: 8px; align-items: center; color: var(--ok); }
.tip { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2, rgba(0,0,0,0.04)); margin: 0; }
.tip svg { flex: none; margin-top: 2px; }
.device-storage .choice-list { border-top: 1px solid var(--line, rgba(0,0,0,0.08)); padding-top: 4px; }

/* ---------- Video ---------- */
.video-box { position: relative; background: #111; display: flex; align-items: center; justify-content: center; }
.video-box video { width: 100%; max-height: 560px; object-fit: contain; display: block; background: #111; }
.memory-card.is-video .video-box video { aspect-ratio: 9 / 12; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: rgba(20, 22, 21, 0.55); color: #fff; backdrop-filter: blur(6px);
}
.video-play svg { margin-left: 4px; }
.video-sound {
  position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; border: none; cursor: pointer;
  background: rgba(20, 22, 21, 0.6); color: #fff;
}
.video-chips { position: absolute; left: 10px; bottom: 10px; right: 56px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.video-time { font-size: 0.75rem; font-weight: 600; color: #fff; background: rgba(20, 22, 21, 0.55); border-radius: 99px; padding: 3px 8px; }
.memory-chips.top { top: 10px; bottom: auto; }
.music-chip-btn { cursor: pointer; border: none; font: inherit; pointer-events: auto; }
.video-preview video { width: 100%; max-height: 420px; border-radius: 14px; background: #111; display: block; }
.video-preview p { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }
.story-face.is-video video { width: 100%; height: 100%; object-fit: cover; }
.story-pick-photo .small { font-size: 0.8rem; opacity: 0.8; }
.card-row { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; }
.comment-off { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 14px 16px; color: var(--ink-3); font-size: 0.9rem; border-top: 1px solid var(--line); background: var(--surface); margin: 0; }
button.photo-drop { width: 100%; font: inherit; color: inherit; }

/* ---------- Pengaturan Lingkar ---------- */
html.text-large { font-size: 18px; }
html.text-xlarge { font-size: 20px; }
html.simple.text-large, html.simple.text-xlarge { font-size: 20px; }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.settings-body { padding: 8px 16px 32px; display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.settings-body > .card { margin-bottom: 0; }
.settings-search {
  width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235E6864' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center;
  padding: 0 14px 0 38px; font: inherit; color: var(--ink);
}
.settings-group { display: flex; flex-direction: column; gap: 6px; }
.settings-group .section-label { margin: 6px 4px 0; }
.settings-groups { display: flex; flex-direction: column; gap: 14px; }
.card-list { padding: 2px 16px; }
.settings-item.static { cursor: default; }
.settings-item.tall { min-height: 68px; padding: 8px 0; }
.settings-item svg:first-child { flex: none; color: var(--ink-2); }
.settings-item.danger svg:first-child { color: var(--danger); }
.account-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
}
.account-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 4px; text-align: center; }
.account-head strong { font-size: 1.15rem; margin-top: 6px; }
.radio-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-2); flex: none; }
.chip.removable { display: inline-flex; align-items: center; gap: 6px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }
.mute-opts { display: flex; gap: 14px; font-size: 0.85rem; color: var(--ink-2); margin-top: 4px; }
.mute-opts label { display: inline-flex; align-items: center; gap: 6px; }
.person-row.wrap { align-items: flex-start; }
.empty-note { text-align: center; color: var(--ink-3); padding: 24px 8px; background: var(--surface); border-radius: var(--radius); margin: 0; }
.dot.big { width: 14px; height: 14px; }
.time-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.time-range input { min-height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; font: inherit; background: var(--surface); color: var(--ink); }
.switch-row select { min-height: 40px; border-radius: 10px; border: 1px solid var(--line-2); padding: 0 10px; font: inherit; background: var(--surface); color: var(--ink); max-width: 48%; }
.preview-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.checklist li { display: flex; gap: 8px; align-items: flex-start; }
.checklist li svg { flex: none; margin-top: 3px; color: var(--ok); }
.checklist.danger li svg { color: var(--danger); }
.usage-avg { font-size: 1.6rem; font-family: var(--display); }
.usage-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 140px; align-items: end; }
.usage-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.usage-bar { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: var(--line-2); }
.usage-col.is-today .usage-bar { background: var(--accent); }
.usage-day { font-size: 0.72rem; color: var(--ink-3); }
.privacy-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.privacy-card > svg { color: var(--green); flex: none; }
.status-ok { align-items: center; text-align: center; }
.status-badge { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.faq details:last-child { border-bottom: none; }
.faq summary { cursor: pointer; font-weight: 600; list-style-position: outside; }
.faq details p { margin: 8px 0 0; color: var(--ink-2); }
.about .display.small { font-size: 1.4rem; }

/* ---------- Kebijakan ---------- */
.policy-body { padding: 8px 16px 40px; max-width: 680px; margin: 0 auto; box-sizing: border-box; width: 100%; }
.policy-body section { margin-top: 18px; }
.policy-body h2 { font-family: var(--display); font-size: 1.12rem; margin: 0 0 6px; }
.policy-body p, .policy-body li { line-height: 1.6; color: var(--ink-2); }
.policy-body ul { padding-left: 20px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.policy-note { display: flex; gap: 8px; align-items: flex-start; background: #FFF5DD; color: #5B4512 !important; border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; }
.policy-note svg { flex: none; margin-top: 3px; }
.policy-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.policy-toc a { font-size: 0.8rem; padding: 5px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.policy-foot { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px; }
a.settings-item, a.settings-item:visited, a.privacy-card, a.privacy-card:visited, a.account-card, a.account-card:visited { color: var(--ink); }
a.settings-item:hover, a.privacy-card:hover, a.account-card:hover { color: var(--ink); background-color: transparent; }
a.privacy-card:hover, a.account-card:hover { box-shadow: 0 0 0 2px var(--line-2); }
.time-range input { width: 128px; }

/* Ruang-ruang pengaturan: ubin berwarna, bukan daftar panjang. */
.lingkar-settings .settings-body { gap: 16px; }
.me-card {
  display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 22px; text-decoration: none;
  background: linear-gradient(135deg, #1F4D45 0%, #2B6B5F 100%); color: #F4F1EA;
}
a.me-card, a.me-card:visited, a.me-card:hover { color: #F4F1EA; }
.me-card .muted { color: rgba(244, 241, 234, 0.75); }
.me-avatar { position: relative; width: 84px; height: 84px; display: grid; place-items: center; flex: none; }
.me-avatar > .avatar, .me-avatar > img, .me-avatar > span:not(.me-ring) { position: relative; z-index: 1; }
.me-ring { position: absolute; inset: 0; width: 84px; height: 84px; transform: rotate(-90deg); }
.me-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 6; }
.me-ring-fill { fill: none; stroke: #F2A65A; stroke-width: 6; stroke-linecap: round; }
.me-name { font-family: var(--display); font-size: 1.2rem; }
.me-count { display: block; margin-top: 6px; font-size: 0.8rem; color: #F7D9B5; }
.me-link { display: inline-flex; align-items: center; gap: 2px; font-size: 0.85rem; font-weight: 600; align-self: flex-start; white-space: nowrap; }
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.glance-item {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; text-decoration: none;
  background: var(--surface); border: 1px dashed var(--line-2); color: var(--ink); min-width: 0;
}
a.glance-item:visited, a.glance-item:hover { color: var(--ink); }
.glance-item strong { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms { display: flex; flex-direction: column; gap: 18px; }
.room-head h2 { font-family: var(--display); font-size: 1.1rem; margin: 0; display: flex; align-items: center; gap: 8px; }
.room-head h2::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--room); }
.room-head p { margin: 2px 0 0; font-size: 0.85rem; color: var(--ink-3); }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.settings-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 18px; min-height: 104px; box-sizing: border-box;
  background: var(--surface); color: var(--ink); text-decoration: none; border: 1px solid var(--line);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
a.settings-tile:visited { color: var(--ink); }
.settings-tile:hover { border-color: var(--room); color: var(--ink); }
.settings-tile:active { transform: scale(0.98); }
.tile-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--room-soft); color: var(--room); }
.tile-label { font-weight: 650; line-height: 1.25; }
.tile-value { font-size: 0.8rem; color: var(--room); font-weight: 600; margin-top: auto; }
.tone-green { --room: #1F4D45; --room-soft: #E2EFEA; }
.tone-blue { --room: #2F5DA8; --room-soft: #E3EAF7; }
.tone-clay { --room: #B5562F; --room-soft: #F8E6DD; }
.tone-violet { --room: #7A4AA0; --room-soft: #EFE5F6; }
.tone-gold { --room: #8F6A1F; --room-soft: #F6EDD6; }
.settings-exit { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.danger-text { color: var(--danger) !important; }
@media (max-width: 340px) { .tile-grid, .glance { grid-template-columns: 1fr; } }
.glance-item strong { white-space: normal; line-height: 1.25; }
.glance-item .small { font-size: 0.75rem; }
.me-card { position: relative; }
.me-link { position: absolute; top: 14px; right: 16px; }
.me-card .grow { padding-right: 4px; }
.me-name { padding-right: 64px; }

/* ---------- Latar profil beranimasi ---------- */
.banner { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--profile, #1F4D45); isolation: isolate; }
.banner .pt { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.banner-polos { background: linear-gradient(135deg, var(--profile, #1F4D45), color-mix(in srgb, var(--profile, #1F4D45) 70%, #000)); }
.banner-photo { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translate(-1%, 1%); } }

.banner-senja { background: linear-gradient(120deg, #F7B267, #F25C54, #8E3B60, #F79D65, #F7B267); background-size: 300% 300%; animation: drift 16s ease-in-out infinite; }
@keyframes drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.banner-laut { background: linear-gradient(180deg, #8FD3E8 0%, #3E8FC2 55%, #1D4E89 100%); }
.banner-laut .wave {
  position: absolute; left: -50%; width: 200%; height: 60%; bottom: -30%;
  border-radius: 45%; background: rgba(255, 255, 255, 0.18); animation: wave 9s linear infinite;
}
.banner-laut .w2 { bottom: -36%; background: rgba(255, 255, 255, 0.12); animation-duration: 13s; animation-direction: reverse; }
.banner-laut .w3 { bottom: -42%; background: rgba(15, 50, 100, 0.35); animation-duration: 17s; }
@keyframes wave { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.banner-malam { background: radial-gradient(ellipse at 70% 120%, #3B3A78 0%, #17163A 55%, #0B0A1F 100%); }
.banner-malam .moon { position: absolute; right: 12%; top: 18%; width: 34px; height: 34px; border-radius: 50%; box-shadow: -8px 4px 0 0 #F7E7B4; transform: rotate(-20deg); }
.pt-star { width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: #FFF6D8; animation: twinkle var(--d) ease-in-out var(--delay) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; transform: scale(1.4); } }

.banner-hujan { background: linear-gradient(180deg, #5D6D7E 0%, #34495E 100%); }
.pt-drop { top: -20%; width: 1.5px; height: calc(18px * var(--s)); background: linear-gradient(transparent, rgba(220, 235, 255, 0.85)); animation: rain calc(var(--d) / 4) linear var(--delay) infinite; }
@keyframes rain { to { transform: translateY(260px) translateX(-24px); } }

.banner-aurora { background: #0E1F2F; }
.banner-aurora .glow { position: absolute; width: 70%; height: 140%; top: -20%; border-radius: 50%; filter: blur(30px); opacity: 0.7; mix-blend-mode: screen; animation: aurora 12s ease-in-out infinite alternate; }
.banner-aurora .g1 { left: -10%; background: #3DDC97; }
.banner-aurora .g2 { left: 30%; background: #4C6EF5; animation-duration: 15s; animation-delay: -4s; }
.banner-aurora .g3 { left: 55%; background: #C77DFF; animation-duration: 18s; animation-delay: -8s; }
@keyframes aurora { from { transform: translateX(-12%) skewX(-10deg); } to { transform: translateX(12%) skewX(10deg); } }

.banner-batik {
  background-color: #6B3E1D;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(251, 235, 211, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 75% 25%, rgba(251, 235, 211, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 25% 75%, rgba(251, 235, 211, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 75% 75%, rgba(251, 235, 211, 0.22) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(232, 168, 88, 0.35) 0 8%, transparent 9%);
  background-size: 64px 64px; animation: batik 30s linear infinite;
}
@keyframes batik { to { background-position: 64px 64px; } }

.banner-kelopak { background: linear-gradient(160deg, #FFE3EC 0%, #F7A8C3 100%); }
.pt-petal {
  top: -15%; width: calc(12px * var(--s)); height: calc(9px * var(--s)); border-radius: 80% 0 80% 0;
  background: #FFFFFF; opacity: 0.9; box-shadow: inset -2px -2px 0 rgba(233, 120, 160, 0.35);
  animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall {
  0% { transform: translateY(0) translateX(0) rotate(var(--r)); }
  50% { transform: translateY(130px) translateX(24px) rotate(calc(var(--r) + 180deg)); }
  100% { transform: translateY(260px) translateX(-10px) rotate(calc(var(--r) + 360deg)); }
}

.banner-kunang { background: radial-gradient(ellipse at 50% 120%, #2E4A36 0%, #142318 60%, #0A130C 100%); }
.pt-firefly { width: calc(5px * var(--s)); height: calc(5px * var(--s)); border-radius: 50%; background: #F5F28A; box-shadow: 0 0 10px 3px rgba(245, 242, 138, 0.7); animation: firefly var(--d) ease-in-out var(--delay) infinite alternate; }
@keyframes firefly { 0% { transform: translate(0, 0); opacity: 0.2; } 50% { opacity: 1; } 100% { transform: translate(28px, -22px); opacity: 0.3; } }

/* Efek profil (di atas kepala profil) */
.profile-effect { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.profile-effect .pt { position: absolute; left: var(--x); top: var(--y); }
.pt-spark { width: calc(10px * var(--s)); height: calc(10px * var(--s)); background: #FFE08A;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: spark var(--d) ease-in-out var(--delay) infinite; }
@keyframes spark { 0%, 70%, 100% { opacity: 0; transform: scale(0.2) rotate(0); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }
.pt-confetti { top: -10%; width: calc(6px * var(--s)); height: calc(10px * var(--s)); background: hsl(var(--h) 85% 60%); border-radius: 2px; animation: confetti var(--d) linear var(--delay) infinite; }
@keyframes confetti { to { transform: translateY(420px) rotate(calc(var(--r) + 720deg)); } }
.fx-kelopak .pt-petal { background: #F7A8C3; }
.pt-bubble { top: auto; bottom: -10%; width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.12); animation: bubble var(--d) ease-in var(--delay) infinite; }
@keyframes bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-380px) translateX(18px); opacity: 0; } }
.pt-snow { top: -10%; width: calc(6px * var(--s)); height: calc(6px * var(--s)); border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 4px rgba(255, 255, 255, 0.8); animation: fall calc(var(--d) * 1.6) linear var(--delay) infinite; }

html.reduce-motion .banner *, html.reduce-motion .banner, html.reduce-motion .profile-effect * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .banner, .banner *, .profile-effect * { animation: none !important; } }

/* ---------- Kepala profil bergaya kartu ---------- */
.profile-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); margin-bottom: 14px; }
.profile-hero .hero-banner { height: 148px; position: relative; }
.hero-edit { position: absolute; top: 10px; right: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; background: rgba(15, 18, 17, 0.55); color: #fff; backdrop-filter: blur(6px); }
.hero-body { position: relative; padding: 0 18px 18px; }
.hero-avatar { position: relative; z-index: 2; margin-top: -48px; width: max-content; border-radius: 50%; padding: 5px; background: var(--surface); }
.hero-name { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin: 8px 0 0; }
.hero-status {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; max-width: 100%;
  padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); border: none; font: inherit; color: var(--ink); text-align: left;
}
button.hero-status { cursor: pointer; }
.hero-status .emoji { font-size: 1.15rem; }
.hero-status .st-text { overflow: hidden; text-overflow: ellipsis; }
.hero-status .st-left { font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; }
.hero-status.is-empty { color: var(--ink-3); border: 1.5px dashed var(--line-2); background: transparent; }
.hero-status-row { position: absolute; top: 12px; left: 118px; right: 14px; }
.profile-hero .profile-bio { margin-top: 8px; }

/* Editor tampilan */
.look-preview { height: 132px; border-radius: 18px; overflow: hidden; position: relative; }
.banner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.banner-opt { border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; background: none; display: flex; flex-direction: column; font: inherit; color: var(--ink); }
.banner-opt .banner { height: 58px; }
.banner-opt span.opt-label { font-size: 0.75rem; padding: 4px 6px; text-align: center; }
.banner-opt.is-active { border-color: var(--accent); }
.effect-row { display: flex; flex-wrap: wrap; gap: 8px; }
.status-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.status-emojis button { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 1.3rem; cursor: pointer; }
.status-emojis button.is-active { border-color: var(--accent); background: var(--accent-soft); }
.friend-status { display: block; font-size: 0.8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.photo-pick { height: 58px; display: grid; place-items: center; color: #fff; }

/* ---------- Status sosial ---------- */
.hero-top { display: flex; align-items: flex-end; gap: 10px; }
.hero-thought { flex: 1; min-width: 0; padding-bottom: 6px; position: relative; z-index: 2; }
.hero-thought .hero-status { margin-top: 0; box-shadow: 0 2px 10px rgba(28, 35, 33, 0.08); background: var(--surface); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; position: relative; }
.hero-thought .hero-status::before { content: ''; position: absolute; left: -9px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); }
.hero-thought .hero-status.is-empty { box-shadow: none; background: transparent; }
.hero-thought .hero-status.is-empty::before { display: none; }
.hero-status .st-main { display: flex; flex-direction: column; min-width: 0; }
.hero-status .st-text { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.hero-status .st-left { font-size: 0.74rem; color: var(--ink-3); white-space: normal; }
.hero-status.is-ghost .st-text { color: var(--ink-3); font-weight: 500; }
.status-card { display: flex; flex-direction: column; gap: 6px; }
.echo-line { margin: 0; font-size: 0.8rem; color: var(--ink-2); padding-left: 4px; }
.status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.status-actions .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; }
.echo-btn.is-active { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.status-sheet .status-input { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 6px 10px 6px 6px; background: var(--surface); }
.status-sheet .status-input input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; color: var(--ink); min-height: 40px; }
.status-sheet .status-input:focus-within { border-color: var(--accent); }
.emoji-btn { width: 42px; height: 42px; border-radius: 12px; border: none; background: var(--surface-2); font-size: 1.35rem; cursor: pointer; flex: none; }
.st-count { font-size: 0.75rem; color: var(--ink-3); }
.status-emojis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.status-emojis button { width: 100%; aspect-ratio: 1; height: auto; }
.status-emojis .no-emoji { grid-column: span 2; aspect-ratio: auto; font-size: 0.8rem; border-radius: 12px; border: 1.5px dashed var(--line-2); background: none; cursor: pointer; }
.status-preview { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.preview-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 700; }
.status-preview .hero-status { margin-top: 0; background: var(--surface); border: 1px solid var(--line); }
.preset-chips .chip { font-size: 0.85rem; }
.face-avatar { position: relative; display: inline-block; }
.face-status {
  position: absolute; left: -4px; top: -4px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.85rem; background: var(--surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); z-index: 2;
}
.face-status.is-quiet::after { content: '🔕'; position: absolute; right: -8px; bottom: -6px; font-size: 0.6rem; }
.kabar-status .status-card { margin-top: 10px; }
.partner-status { display: flex; gap: 8px; align-items: center; margin: 0 12px 6px; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); font-size: 0.85rem; color: var(--ink-2); }
.partner-status.is-quiet { background: #EEF0F6; }
.hero-thought .status-actions { flex-wrap: nowrap; }
.hero-thought .status-actions .chip { padding: 5px 10px; min-height: 32px; font-size: 0.78rem; white-space: nowrap; }
.hero-thought .echo-line { margin: 4px 0 6px 4px; }
/* Pemeriksaan langsung di formulir pendaftaran */
.field-status { font-size: 0.82rem; line-height: 1.35; color: var(--ink-3); }
.field-status:empty { display: none; }
.field-status.is-ok { color: var(--ok); }
.field-status.is-ok::before { content: '✓ '; }
.field-status.is-error { color: var(--danger, #B42318); }
.field input[aria-invalid="true"] { border-color: var(--danger, #B42318); }

/* ---------- Latar & efek khusus Lingkar Plus ---------- */
.banner-emas { background: linear-gradient(115deg, #7A4E12 0%, #C99A3B 30%, #F6DE9A 48%, #C99A3B 62%, #6B4210 100%); background-size: 220% 220%; animation: drift 14s ease-in-out infinite; }
.banner-emas .sheen { position: absolute; inset: -40% -60%; background: linear-gradient(100deg, transparent 40%, rgba(255, 249, 225, 0.55) 50%, transparent 60%); animation: sheen 6s ease-in-out infinite; }
@keyframes sheen { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.pt-glint { width: calc(7px * var(--s)); height: calc(7px * var(--s)); background: #FFF6D0; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: spark var(--d) ease-in-out var(--delay) infinite; }
.banner-galaksi { background: radial-gradient(ellipse at 30% 40%, #2B1B5A 0%, #0D0A24 55%, #05040F 100%); }
.banner-galaksi .nebula { position: absolute; inset: -30%; background:
  radial-gradient(ellipse at 35% 45%, rgba(214, 86, 160, 0.45), transparent 45%),
  radial-gradient(ellipse at 65% 55%, rgba(76, 110, 245, 0.45), transparent 45%);
  filter: blur(18px); animation: nebula 30s linear infinite; }
@keyframes nebula { to { transform: rotate(360deg); } }
.banner-lentera { background: linear-gradient(180deg, #1B1237 0%, #3A1F45 60%, #6A2E3A 100%); }
.pt-lantern { top: auto; bottom: -20%; width: calc(12px * var(--s)); height: calc(16px * var(--s)); border-radius: 40% 40% 45% 45%;
  background: radial-gradient(circle at 50% 60%, #FFE6A0, #F29A3E 70%); box-shadow: 0 0 14px 4px rgba(255, 170, 70, 0.55);
  animation: lantern calc(var(--d) * 2.2) ease-in var(--delay) infinite; }
@keyframes lantern { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-300px) translateX(30px); opacity: 0; } }
.pt-meteor { top: -10%; width: calc(70px * var(--s)); height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #FFFFFF); border-radius: 2px;
  transform: rotate(-35deg); animation: meteor calc(var(--d) * 1.2) linear var(--delay) infinite; opacity: 0; }
@keyframes meteor { 0% { opacity: 0; transform: rotate(-35deg) translateX(0); } 5% { opacity: 1; } 30% { opacity: 0; transform: rotate(-35deg) translateX(-260px); } 100% { opacity: 0; transform: rotate(-35deg) translateX(-260px); } }
.pt-burst { width: 4px; height: 4px; border-radius: 50%; color: hsl(var(--h) 90% 65%); background: currentColor;
  box-shadow: 0 -22px 0 currentColor, 0 22px 0 currentColor, -22px 0 0 currentColor, 22px 0 0 currentColor,
    16px 16px 0 currentColor, -16px 16px 0 currentColor, 16px -16px 0 currentColor, -16px -16px 0 currentColor;
  animation: burst calc(var(--d) * 0.6) ease-out var(--delay) infinite; }
@keyframes burst { 0% { transform: scale(0.1); opacity: 0; } 15% { opacity: 1; } 60% { transform: scale(var(--s)); opacity: 0.9; } 100% { transform: scale(calc(var(--s) * 1.3)); opacity: 0; } }
.plus-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 99px; color: #5B3A08; background: linear-gradient(120deg, #F6DE9A, #E3B65A); }

/* ---------- Lencana bergaya Lingkar ---------- */
.badge-icons { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; vertical-align: -2px; }
.badge-icons svg { flex: none; }
.hero-name .badge-icons { vertical-align: -1px; }
.known-line { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 0.86rem; color: var(--ink-3); }
.known-line svg { flex: none; margin-top: 1px; opacity: 0.55; }
.known-line.is-known { color: var(--ok); }
.known-line.is-known svg { opacity: 1; }
.known-box { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.vouch-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; }
.vouch-btn.is-active { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }

/* ---------- Linimasa: Lingkaran | Serambi ---------- */
.feed-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 4px 0 14px; border-radius: 14px; background: var(--surface-2); }
.feed-switch-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: 11px; font-weight: 600; font-size: 0.92rem; color: var(--ink-3); text-decoration: none; }
.feed-switch-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(28, 35, 33, 0.12); }

/* ---------- Serambi ---------- */
.serambi-mine { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; background: linear-gradient(120deg, var(--accent-soft), var(--surface)); border: 1px solid var(--line); border-radius: var(--radius); }
.serambi-mine.is-closed { background: var(--surface); border-style: dashed; }
.serambi-mine strong svg { margin-left: 6px; vertical-align: -3px; }
.serambi-owner { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; flex: 1; }
.serambi-title { font-weight: 700; display: inline-flex; align-items: center; flex-wrap: wrap; }
.serambi-post { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.serambi-post-head { display: flex; align-items: center; gap: 8px; }
.serambi-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.serambi-photo { width: 100%; border-radius: 14px; display: block; max-height: 520px; object-fit: cover; background: var(--surface-2); }
.serambi-post-foot { display: flex; gap: 8px; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; }
.like-btn.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.like-btn.is-active svg { fill: currentColor; }
.serambi-tile { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.serambi-tile-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.86rem; color: var(--ink-3); margin-top: 2px; }
.serambi-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 22px; }
.serambi-hero-title { font-family: var(--display); font-size: 1.45rem; letter-spacing: -0.02em; margin: 6px 0 0; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.serambi-hero-bio { margin: 4px 0; max-width: 34ch; }
.serambi-hero p { margin: 0; }
.verified-note { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 600; color: var(--accent); }
.serambi-composer textarea { width: 100%; resize: vertical; }
.serambi-preview img { width: 100%; border-radius: 12px; max-height: 300px; object-fit: cover; }

/* ---------- Lingkar Plus ---------- */
.plus-hero { border: 1px solid #EAD08F; background: linear-gradient(160deg, #FFF8E6, var(--surface) 55%); }
.plus-hero.is-active { border-color: #D9A93E; }
.plus-title { font-family: var(--display); font-size: 1.25rem; }
.plus-previews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plus-previews figure { margin: 0; }
.plus-previews .banner { height: 64px; border-radius: 10px; }
.plus-previews figcaption { font-size: 0.74rem; color: var(--ink-3); margin-top: 4px; text-align: center; }
.opt-label .plus-tag, .chip .plus-tag { margin-left: 4px; font-size: 0.6rem; padding: 1px 5px; }
.tip .plus-tag { flex: none; }
.code-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.code-list li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.code-list li.is-used { opacity: 0.6; }
.code-list code { font-weight: 700; letter-spacing: 0.04em; }
.row-gap input[type="number"] { width: 72px; }

/* ---------- Penyusun momen (tampilan baru) ---------- */
[hidden] { display: none !important; }
.compose-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 24px; }
.kind-bar { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-snap-type: x proximity; }
.kind-bar::-webkit-scrollbar { display: none; }
.kind-pill {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 99px; scroll-snap-align: start;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.kind-pill.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.compose-card { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.compose-author { display: flex; align-items: center; gap: 12px; }
.compose-author-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.compose-author-text strong { font-size: 0.98rem; }
.audience-pill {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  border: none; background: var(--accent-soft); color: #8F2C18; font: inherit; font-size: 0.78rem; font-weight: 600;
}
.audience-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-card .compose-text {
  width: 100%; border: none; outline: none; resize: none; background: transparent; padding: 0; min-height: 72px;
  font: inherit; font-size: 1.12rem; line-height: 1.45; color: var(--ink);
}
.compose-card .compose-text::placeholder { color: #9AA39F; }
.media-drop {
  width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  border: 1.5px dashed var(--line-2); border-radius: 18px; font: inherit; color: var(--ink-2); padding: 20px;
  background: linear-gradient(160deg, #FAFBF8 0%, #F0F2ED 100%); transition: border-color .15s, background .15s;
}
.media-drop:hover { border-color: var(--accent); }
.media-drop-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent); box-shadow: 0 2px 10px rgba(28,35,33,.08); margin-bottom: 4px; }
.media-drop-title { font-weight: 700; font-size: 1rem; color: var(--ink); }
.media-drop-hint { font-size: 0.82rem; color: var(--ink-3); }
.media-drop.is-loading { cursor: default; }
.media-frame { position: relative; border-radius: 18px; overflow: hidden; background: #111; }
.media-frame img { display: block; width: 100%; max-height: 460px; object-fit: cover; }
.media-frame.video-preview video { border-radius: 0; max-height: 460px; }
.media-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.media-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; border: none; cursor: pointer;
  background: rgba(15, 18, 17, 0.62); color: #fff; font: inherit; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(8px);
}
.media-btn.icon-only { padding: 7px; }
.media-meta { position: absolute; left: 10px; top: 10px; margin: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 99px; background: rgba(15,18,17,.6); color: #fff; font-size: 0.75rem; font-weight: 600; }
.extras-panel { background: var(--surface-2); border-radius: 16px; padding: 12px; }
.tool-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); }
.tool-row > svg { flex: none; color: var(--ink-2); }
.compose-tools { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.compose-tools-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.compose-tools-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 13px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 0.86rem; font-weight: 600;
}
.tool-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.tool-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: #8F2C18; }
.compose-body .story-cta { margin: 0; }

/* Editor cerita: alat yang sama */
.story-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.story-editor .story-preview { box-shadow: 0 10px 30px rgba(28,35,33,.18); }

/* ---------- Video: tombol putar hilang saat diputar ---------- */
.video-play[hidden] { display: none !important; }
.video-box.is-playing .video-play { display: none; }

/* ---------- Efek profil tetap di dalam bingkai latar ---------- */
.profile-hero .hero-banner { overflow: hidden; isolation: isolate; }

/* ---------- Kata sandi: lihat / sembunyikan ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; border: none; background: transparent; color: var(--ink-3); cursor: pointer;
}
.pw-toggle:hover { color: var(--ink); background: var(--surface-2); }
.extras-panel input, .extras-panel textarea { width: 100%; }

/* ---------- Centang pesan ala WhatsApp ---------- */
.msg-time { display: inline-flex; align-items: center; gap: 3px; }
.msg-ticks { display: inline-flex; line-height: 0; }
.msg.mine .msg-ticks { color: rgba(255, 255, 255, 0.78); }
.msg.mine .msg-ticks.is-read { color: #A6E6FF; }
.conv-preview .msg-ticks { color: var(--ink-3); vertical-align: -1px; margin-right: 3px; }
.conv-preview .msg-ticks.is-read { color: #2B9FD8; }
.tick-blue { color: #2B9FD8; font-weight: 700; }

/* ---------- Konfirmasi email ---------- */
.confirm-wait { display: flex; flex-direction: column; gap: 14px; }
.confirm-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.confirm-help { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.confirm-help p { margin: 0; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.video-error { position: absolute; inset: auto 12px 50% 12px; transform: translateY(50%); margin: 0; display: flex; gap: 8px; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 0.88rem; background: rgba(15,18,17,.7); padding: 10px 12px; border-radius: 12px; }

/* ---------- Hemat baterai: animasi latar berhenti saat tak terlihat ---------- */
html.is-hidden .banner, html.is-hidden .banner *, html.is-hidden .profile-effect * { animation-play-state: paused !important; }
.banner-opt:not(.is-active) .banner, .banner-opt:not(.is-active) .banner * { animation: none !important; }

/* ---------- Video layar penuh (gaya Instagram) ---------- */
.vv-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #000; color: #fff;
  display: flex; flex-direction: column; opacity: 0; transition: opacity .2s ease;
  touch-action: none;
}
.vv-overlay.open { opacity: 1; }
.vv-stage { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .15s ease-out; }
.vv-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vv-top {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 30px;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); pointer-events: none;
}
.vv-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 36px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.6));
}
.vv-bottom .chip-glass { align-self: flex-start; }
.vv-btn {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  display: grid; place-items: center; background: rgba(30,30,30,.55); color: #fff; backdrop-filter: blur(8px);
}
.vv-progress { display: flex; align-items: center; gap: 10px; }
.vv-bar { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; position: relative; touch-action: none; }
.vv-bar::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.vv-fill { position: relative; height: 3px; border-radius: 3px; background: #fff; width: 0; }
.vv-fill::after { content: ""; position: absolute; right: -6px; top: -4.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.vv-time { font-size: 0.78rem; font-variant-numeric: tabular-nums; opacity: .9; min-width: 34px; text-align: right; }
.vv-flash {
  position: absolute; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
}
.vv-flash svg { margin-left: 3px; }
.vv-flash.show { animation: vvflash .7s ease-out; }
@keyframes vvflash { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }
.video-box video { cursor: zoom-in; }

/* Notifikasi push */
.push-card { display: flex; flex-direction: column; gap: 12px; }
.push-card.is-invite { margin: 0 16px 12px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.push-head { display: flex; gap: 12px; align-items: flex-start; }
.push-head p { margin: 2px 0 0; }
.push-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2, rgba(0,0,0,.05)); color: var(--ink); }
.push-icon.is-on { background: var(--accent); color: #fff; }
.push-close { flex: none; margin: -6px -6px 0 0; }

/* Obrolan hidup: balas, reaksi, pesan suara, sedang mengetik */
.chat-sub.is-typing { color: var(--accent); font-style: italic; }
.chat-sub.is-online { color: #2E7D4F; }
.msg { transition: transform .18s ease; }
.msg-bubble { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.msg-bubble .msg-text { -webkit-user-select: text; user-select: text; }
.msg.swipe-ready .msg-bubble { box-shadow: 0 0 0 2px var(--accent-soft); }
.msg.flash .msg-bubble { animation: msg-flash 1.2s ease; }
@keyframes msg-flash { 0%, 40% { box-shadow: 0 0 0 4px var(--accent-soft); } 100% { box-shadow: none; } }
.msg-reply {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  border: none; border-left: 3px solid var(--accent); background: rgba(0, 0, 0, 0.05); border-radius: 8px;
  padding: 5px 9px; margin: 0 -4px 2px; font: inherit; color: inherit; cursor: pointer; min-width: 0;
}
.msg.mine .msg-reply { background: rgba(255, 255, 255, 0.18); border-left-color: rgba(255, 255, 255, 0.85); }
.msg-reply.is-mine { border-left-color: #2E7D4F; }
.msg-reply-name { font-size: 0.75rem; font-weight: 700; }
.msg-reply-text { font-size: 0.82rem; opacity: .85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msg-reacts {
  display: inline-flex; align-items: center; gap: 1px; margin-top: -8px; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.08);
  font-size: 0.85rem; line-height: 1.3; cursor: pointer; position: relative; z-index: 1; color: var(--ink);
}
.msg.theirs .msg-reacts { align-self: flex-start; margin-left: 8px; }
.msg.mine .msg-reacts { align-self: flex-end; margin-right: 8px; }
.msg-reacts.has-mine { border-color: var(--accent); }
.msg-reacts-n { font-size: 0.72rem; font-weight: 700; margin-left: 3px; color: var(--ink-3); }
.react-bar { display: flex; justify-content: space-between; gap: 4px; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.react-pick { font-size: 1.6rem; line-height: 1; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--surface-2, rgba(0,0,0,.04)); cursor: pointer; transition: transform .12s ease; }
.react-pick:active { transform: scale(1.2); }
.react-pick.is-mine { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.react-list { display: flex; flex-direction: column; gap: 10px; }
.react-row { display: flex; align-items: center; gap: 12px; }
.react-emoji { font-size: 1.5rem; }
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 8px 0 12px; }
.reply-bar[hidden] { display: none; }
.reply-bar-icon { color: var(--accent); display: inline-flex; }
.reply-bar-text { min-width: 0; border-left: 3px solid var(--accent); padding-left: 9px; }
.reply-bar-text .block { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mic-btn { background: var(--accent); color: #FFFFFF; }
.mic-btn:hover { background: #C23D23; }
.mic-btn[hidden], .send-btn[hidden] { display: none; }
.chat-composer.is-recording { display: none; }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
.rec-bar[hidden] { display: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #D33; animation: rec-pulse 1s ease-in-out infinite; }
@keyframes rec-pulse { 50% { opacity: .25; } }
.rec-label { font-variant-numeric: tabular-nums; color: var(--ink-2, var(--ink)); }
.voice-note { display: flex; align-items: center; gap: 9px; min-width: 200px; padding: 2px 0; }
.voice-btn {
  flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: #FFFFFF;
}
.msg.mine .voice-btn { background: #FFFFFF; color: var(--accent); }
.voice-bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(0,0,0,.14); cursor: pointer; }
.voice-bar::before { content: ''; position: absolute; inset: -10px 0; }
.msg.mine .voice-bar { background: rgba(255,255,255,.35); }
.voice-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--accent); }
.msg.mine .voice-fill { background: #FFFFFF; }
.voice-time { flex: none; font-size: 0.75rem; font-variant-numeric: tabular-nums; opacity: .85; }
.voice-note.is-error .voice-time { font-size: 0.72rem; white-space: normal; max-width: 120px; }

/* ------------------------------------------------------------------ Kafe Lingkar */
.cafe { position: relative; }
.cafe-body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 24px; }
.cafe-scene {
  position: relative; height: 236px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFE7C2 0%, #FFD6A8 58%, #E9C29A 58%, #DDB48A 100%);
  box-shadow: var(--shadow); -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.cafe-scene.is-tappable { cursor: pointer; }
.cafe-scene.is-tappable:active .cafe-shop { transform: scale(0.985); }
.cafe-awning {
  position: absolute; left: 14px; right: 14px; top: 18px; height: 34px; border-radius: 10px 10px 0 0; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--accent) 0 26px, #FFF4E6 26px 52px);
  box-shadow: 0 6px 0 -2px rgba(0,0,0,.06);
}
.cafe-awning::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px;
  background: radial-gradient(circle at 13px 0, var(--accent) 12px, transparent 13px) 0 0 / 52px 12px repeat-x,
              radial-gradient(circle at 39px 0, #FFF4E6 12px, transparent 13px) 0 0 / 52px 12px repeat-x;
}
.cafe-sign {
  position: absolute; z-index: 3; left: 50%; top: 4px; transform: translateX(-50%); max-width: 78%;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 10px; border: none;
  background: #5B3A29; color: #FFF4E6; font: 700 0.92rem var(--display); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 0 #3E271B;
}
button.cafe-sign { cursor: pointer; }
.has-neon .cafe-sign { color: #FFE9FF; text-shadow: 0 0 6px #FF7AE0, 0 0 14px #FF3DBF; }
.cafe-shop {
  position: absolute; left: 22px; right: 22px; top: 52px; height: 118px; z-index: 1; transition: transform .08s ease;
  background: #FFF8EE; border: 3px solid #7A5238; border-top: none; border-radius: 0 0 8px 8px;
}
.cafe-shelf { position: absolute; left: 12px; right: 12px; top: 10px; display: flex; flex-wrap: wrap; gap: 4px; font-size: 1.3rem;
  border-bottom: 4px solid #B88458; padding-bottom: 2px; min-height: 30px; }
.cafe-counter { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: #B88458; border-top: 4px solid #8E6140; }
.cafe-barista { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 1.9rem; }
.cafe-decor span { position: absolute; font-size: 1.35rem; filter: drop-shadow(0 2px 1px rgba(0,0,0,.15)); }
.cafe-decor .decor-0 { left: 6px; bottom: 40px; }
.cafe-decor .decor-1 { right: 10px; top: 46px; }
.cafe-decor .decor-2 { left: 34px; bottom: 40px; }
.cafe-decor .decor-3 { right: 40px; top: 46px; }
.cafe-decor .decor-4 { right: 6px; bottom: 40px; }
.cafe-decor .decor-5 { left: 64px; bottom: 40px; }
.cafe-decor .decor-6 { right: 36px; bottom: 40px; }
.cafe-decor .decor-7 { left: 50%; top: 46px; transform: translateX(-120%); }
.cafe-street { position: absolute; left: 0; right: 0; bottom: 8px; height: 50px; z-index: 2; overflow: hidden; }
.cafe-guest { position: absolute; bottom: 4px; left: -40px; font-size: 1.8rem; animation: guest-walk 10s linear infinite; }
@keyframes guest-walk {
  0% { left: -40px; }
  42% { left: 44%; transform: translateY(0); }
  46% { transform: translateY(-4px); }
  58% { left: 46%; transform: translateY(0); }
  100% { left: calc(100% + 10px); }
}
@media (prefers-reduced-motion: reduce) { .cafe-guest { animation: none; position: static; display: inline-block; } .cafe-street { display: flex; justify-content: center; gap: 8px; } }
.cafe-hint { text-align: center; margin: -6px 0 0; }
.cafe-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
.cafe-stats > div { background: var(--surface); border-radius: var(--radius-sm); padding: 10px 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cafe-coins { flex-direction: row !important; align-items: baseline; gap: 6px; }
.coin-icon { font-size: 1.15rem; }
.cafe-coins-n { font: 800 1.45rem var(--display); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.cafe-stat strong { font: 700 1.05rem var(--display); }
.drawer { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.drawer-bar { height: 10px; border-radius: 10px; background: var(--surface-2, #EEF0EB); overflow: hidden; }
.drawer-fill { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, #F2B33D, #E8892B); transition: width .9s linear; }
.drawer-fill.is-full { background: linear-gradient(90deg, #E8892B, var(--accent)); animation: rec-pulse 1.4s ease-in-out infinite; }
.drawer-row { display: flex; align-items: center; gap: 10px; }
.drawer-text { flex: 1; font-size: 0.85rem; color: var(--ink-3); }
.cafe-tips p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 12px; border-radius: 12px; background: #FFF4E0; font-size: 0.88rem; }
.cafe-list { display: flex; flex-direction: column; gap: 8px; }
.cafe-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.cafe-row.is-locked { opacity: .55; }
.cafe-row-emoji { font-size: 1.7rem; width: 40px; text-align: center; flex: none; }
.cafe-buy { flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 0; min-width: 86px; line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
.cafe-buy .cost { font-size: 0.75rem; font-weight: 600; opacity: .9; }
.cafe-buy.is-affordable { background: var(--accent); color: #FFF; border-color: var(--accent); }
.cafe-buy:disabled { opacity: .55; }
.tag-x2 { display: inline-block; margin-top: 3px; font-size: 0.7rem; font-weight: 700; color: #8F2C18; background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; }
.decor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.decor-card { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 8px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.decor-card.is-owned { background: var(--ok-bg); }
.decor-emoji { font-size: 2rem; }
.cafe-board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.board-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.board-row.is-me { box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.board-rank { width: 26px; text-align: center; font-weight: 800; font-size: 1.05rem; flex: none; }
.board-row .grow { min-width: 0; }
.board-row .block { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cafe-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; }
.coin-pop { position: absolute; transform: translate(-50%, 0); font: 800 1rem var(--display); color: #B7791F; text-shadow: 0 1px 0 #FFF, 0 0 6px #FFF; animation: coin-up .9s ease-out forwards; white-space: nowrap; }
.coin-pop.big { font-size: 1.8rem; animation-duration: 1.2s; }
@keyframes coin-up { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -60px) scale(1.15); } }
.visit-menu { padding: 12px 14px; }
.visit-items { display: flex; flex-wrap: wrap; gap: 6px; }
.visit-item { padding: 4px 10px; border-radius: 999px; background: var(--surface-2, #EEF0EB); font-size: 0.85rem; }
.cafe-entry { color: #8E6140; }

/* ------------------------------------------------------------ Penanda memuat (logo Lingkar) */
.loading { flex-direction: column; gap: 14px; padding: 56px 0; }
.loading-label { font-size: 0.9rem; color: var(--ink-3); animation: lk-fade 1.6s ease-in-out infinite; }
.lk-loader { position: relative; display: inline-block; flex: none; }
.lk-loader svg { width: 100%; height: 100%; overflow: visible; }
.lk-track { fill: none; stroke: var(--accent-soft); stroke-width: 7; }
.lk-ring {
  fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 132; stroke-dashoffset: 132; transform-origin: 32px 32px;
  animation: lk-draw 1.8s cubic-bezier(.6, .1, .3, 1) infinite;
}
.lk-core { fill: var(--accent); transform-origin: 32px 32px; animation: lk-beat 1.8s ease-in-out infinite; }
.lk-orbit { position: absolute; inset: 0; animation: lk-spin 3.6s linear infinite; }
.lk-orbit i {
  position: absolute; left: 50%; top: 50%; width: 13%; height: 13%; margin: -6.5% 0 0 -6.5%; border-radius: 50%;
  transform: rotate(var(--a)) translateY(-300%) scale(0); animation: lk-join 1.8s ease-in-out infinite;
}
.lk-orbit i:nth-child(1) { --a: 0deg; background: #2E7D5B; animation-delay: .15s; }
.lk-orbit i:nth-child(2) { --a: 120deg; background: #E8A33D; animation-delay: .35s; }
.lk-orbit i:nth-child(3) { --a: 240deg; background: #4F7FC4; animation-delay: .55s; }
@keyframes lk-draw {
  0% { stroke-dashoffset: 132; transform: rotate(-90deg); }
  50% { stroke-dashoffset: 0; transform: rotate(90deg); }
  100% { stroke-dashoffset: -132; transform: rotate(270deg); }
}
@keyframes lk-beat { 0%, 100% { transform: scale(.82); } 45% { transform: scale(1.12); } 60% { transform: scale(.96); } }
@keyframes lk-spin { to { transform: rotate(360deg); } }
@keyframes lk-join {
  0%, 100% { transform: rotate(var(--a)) translateY(-300%) scale(0); opacity: 0; }
  30%, 70% { transform: rotate(var(--a)) translateY(-300%) scale(1); opacity: 1; }
}
@keyframes lk-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lk-ring { animation: none; stroke-dashoffset: 0; }
  .lk-core, .lk-orbit, .lk-orbit i, .loading-label { animation: none; }
  .lk-orbit i { transform: rotate(var(--a)) translateY(-300%) scale(1); opacity: 1; }
}

/* Kafe: level, gelar, perayaan */
.cafe-stars { position: absolute; z-index: 3; left: 50%; top: 36px; transform: translateX(-50%); font-size: 0.7rem; letter-spacing: 1px; color: #F2B33D; text-shadow: 0 1px 0 #5B3A29; }
.cafe-scene.tier-1 .cafe-awning { background: repeating-linear-gradient(90deg, #8E6140 0 26px, #FFF4E6 26px 52px); }
.cafe-scene.tier-1 .cafe-awning::after { background: radial-gradient(circle at 13px 0, #8E6140 12px, transparent 13px) 0 0 / 52px 12px repeat-x, radial-gradient(circle at 39px 0, #FFF4E6 12px, transparent 13px) 0 0 / 52px 12px repeat-x; }
.cafe-scene.tier-1 .cafe-shop { left: 70px; right: 70px; }
.cafe-scene.tier-3 .cafe-awning { background: repeating-linear-gradient(90deg, #2E7D5B 0 26px, #FFF4E6 26px 52px); }
.cafe-scene.tier-3 .cafe-awning::after { background: radial-gradient(circle at 13px 0, #2E7D5B 12px, transparent 13px) 0 0 / 52px 12px repeat-x, radial-gradient(circle at 39px 0, #FFF4E6 12px, transparent 13px) 0 0 / 52px 12px repeat-x; }
.cafe-scene.tier-4 { background: linear-gradient(180deg, #FFE1D6 0%, #FFC9B5 58%, #D9B08C 58%, #C99B74 100%); }
.cafe-scene.tier-5 { background: linear-gradient(180deg, #D9E8FF 0%, #BCD3F5 58%, #D4B596 58%, #C6A27E 100%); }
.cafe-scene.tier-5 .cafe-awning, .cafe-scene.tier-6 .cafe-awning, .cafe-scene.tier-7 .cafe-awning { background: repeating-linear-gradient(90deg, #1F4D45 0 26px, #F2E3C6 26px 52px); }
.cafe-scene.tier-5 .cafe-awning::after, .cafe-scene.tier-6 .cafe-awning::after, .cafe-scene.tier-7 .cafe-awning::after { background: radial-gradient(circle at 13px 0, #1F4D45 12px, transparent 13px) 0 0 / 52px 12px repeat-x, radial-gradient(circle at 39px 0, #F2E3C6 12px, transparent 13px) 0 0 / 52px 12px repeat-x; }
.cafe-scene.tier-6 { background: linear-gradient(180deg, #2B2D52 0%, #4A3F7A 58%, #6B4E3D 58%, #5A4032 100%); }
.cafe-scene.tier-7 { background: linear-gradient(180deg, #1B1F3B 0%, #3D2A63 58%, #4E3A2E 58%, #3C2C22 100%); }
.cafe-scene.tier-6 .cafe-shop, .cafe-scene.tier-7 .cafe-shop { box-shadow: 0 0 24px rgba(255, 214, 140, 0.55); }
.level-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.level-top { display: flex; align-items: center; gap: 12px; }
.level-badge, .levelup-badge {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: conic-gradient(from 200deg, #F2C94C, #E8892B, #D9472B, #F2C94C); box-shadow: 0 2px 6px rgba(217, 71, 43, .35);
}
.level-badge span, .levelup-badge span { display: grid; place-items: center; width: 80%; height: 80%; border-radius: 50%; background: #FFF8EE; font: 800 1rem var(--display); color: #8E3A1B; }
.level-bar { height: 8px; border-radius: 8px; background: var(--accent-soft); overflow: hidden; }
.level-bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #F2B33D, var(--accent)); transition: width .6s ease; }
.level-hint { margin: 0; color: var(--ink-3); }
.decor-card.is-locked { opacity: .6; }
.cafe-sound { display: inline-flex; gap: 2px; }
.cafe-sound .is-off { opacity: .45; }
.levelup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: rgba(20, 16, 12, .55); animation: lu-in .2s ease; }
.levelup.is-closing { animation: lu-out .22s ease forwards; }
.levelup-card {
  position: relative; z-index: 1; width: min(340px, 100%); padding: 26px 22px 20px; border-radius: 24px; text-align: center;
  background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.3); animation: lu-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}
.levelup-badge { width: 84px; height: 84px; margin: -64px auto 8px; animation: lu-spin 1.2s ease-out; }
.levelup-badge span { font-size: 2rem; }
.levelup-card h2 { margin: 4px 0 2px; font: 800 1.6rem var(--display); }
.levelup-title { margin: 0 0 10px; color: #8E3A1B; font-weight: 700; }
.levelup-reward { margin: 0 0 12px; font-weight: 700; font-size: 1.05rem; }
.levelup-list { list-style: none; padding: 10px 12px; margin: 0 0 14px; border-radius: 12px; background: #FFF4E0; text-align: left; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.levelup-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.levelup-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: lu-fall 2s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes lu-in { from { opacity: 0; } }
@keyframes lu-out { to { opacity: 0; } }
@keyframes lu-pop { from { transform: scale(.6) translateY(30px); opacity: 0; } }
@keyframes lu-spin { from { transform: rotate(-200deg) scale(.4); } }
@keyframes lu-fall { to { transform: translateY(105vh) rotate(720deg); } }
@media (prefers-reduced-motion: reduce) { .levelup-confetti { display: none; } .levelup-card, .levelup-badge { animation: none; } }

/* ------------------------------------------------------------ Kebun Lingkar */
.garden { position: relative; }
.garden-body { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 24px; }
.garden-body .card { margin: 0; }
.garden-entry { color: #2E7D5B; }
.garden-scene-wrap { position: relative; }
.garden-coins { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 6px 12px 6px 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.garden-coins .cafe-coins-n { font-size: 1.15rem; }
.sky-card .btn { flex: none; }
.sky-card, .clock-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; line-height: 1.3; }
.sky-card > svg { color: #2E7D5B; flex: none; }
.clock-card > svg { color: #1F4D45; flex: none; }
.sky-card strong.block { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streak-text { color: #2E7D5B; margin-top: 2px; }
.level-badge.garden { background: #2E7D5B; }

.garden-scene {
  --sky: linear-gradient(180deg, #6EC1F0 0%, #A8DCF8 22%, #DDF3FF 36%);
  --grass: linear-gradient(180deg, #9ED38A, #86C273); --hill: #86C878; --fence: #C99B6D;
  --sun: #F6C445; --halo: rgba(246,196,69,.25);
  position: relative; overflow: hidden; border-radius: 26px; background: var(--sky);
  padding: 196px 10px 14px; min-height: 360px; isolation: isolate;
}
.garden-scene.phase-pagi { --sky: linear-gradient(180deg, #FFC9A3 0px, #FFE3C4 100px, #CFEFFF 170px); --grass: linear-gradient(180deg, #A6D98E, #8FC777); --hill: #8CC97A; --sun: #FFB347; --halo: rgba(255,179,71,.28); }
.garden-scene.phase-siang { --sky: linear-gradient(180deg, #6EC1F0 0px, #A8DCF8 100px, #DDF3FF 170px); }
.garden-scene.phase-sore { --sky: linear-gradient(180deg, #F27A54 0px, #F9A86A 100px, #FFD9A0 170px); --grass: linear-gradient(180deg, #A4BF6A, #8EAA58); --hill: #93B263; --fence: #B4865C; --sun: #F26B3A; --halo: rgba(242,107,58,.28); }
.garden-scene.phase-malam { --sky: linear-gradient(180deg, #0D1736 0px, #1B2A55 100px, #2D3E72 170px); --grass: linear-gradient(180deg, #2E5A3C, #24492F); --hill: #2B5236; --fence: #5E4A3A; }
.garden-scene.weather-hujan:not(.phase-malam) { --sky: linear-gradient(180deg, #7D8DA3 0px, #9DABBD 100px, #C3CDD8 170px); }
.gs-sun { position: absolute; top: 18px; left: calc(50% - 29px); z-index: 0; }
.phase-pagi .gs-sun { left: 26px; top: 96px; }
.phase-sore .gs-sun { left: auto; right: 26px; top: 100px; }
.gs-halo { fill: var(--halo); }
.gs-core { fill: var(--sun); }
.gs-moon { position: absolute; right: 54px; top: 30px; }
.gs-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #FFF; animation: gs-twinkle 2.4s ease-in-out infinite; }
.gs-cloud { position: absolute; left: 0; animation: gs-drift linear infinite; z-index: 0; }
.gs-grass { position: absolute; left: 0; right: 0; top: 168px; bottom: 0; background: var(--grass); z-index: 0; }
.gs-hill { position: absolute; left: 0; top: 150px; width: 100%; height: 40px; z-index: 0; }
.gs-hill path { fill: var(--hill); }
.gs-fence { position: absolute; left: 0; right: 0; top: 176px; height: 12px; background: repeating-linear-gradient(90deg, var(--fence) 0 6px, transparent 6px 30px); z-index: 0; }
.gs-fence::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 4px; background: var(--fence); }
.gs-lamp { position: absolute; right: 22px; top: 120px; width: 6px; height: 64px; background: #3B3B4F; border-radius: 3px; z-index: 0; }
.gs-lamp span { position: absolute; left: -9px; top: -12px; width: 24px; height: 18px; border-radius: 6px; background: #FFE9A8; box-shadow: 0 0 30px 14px rgba(255,214,120,.45); }
.gs-fly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFE680; box-shadow: 0 0 8px 3px rgba(255,230,128,.7); animation: gs-glow 3s ease-in-out infinite; z-index: 2; pointer-events: none; }
.gs-plots { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gs-slot { position: relative; height: 158px; border: none; padding: 0; background: transparent; border-radius: 18px; color: inherit; font: inherit; }
button.gs-slot { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.gs-slot:disabled { cursor: default; opacity: 1; }
.gs-slot:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.gs-tree .tree-art { position: absolute; left: 0; top: 0; width: 100%; height: 122px; }
.gs-tree:active:not(:disabled) .tree-art { transform: scale(.96); }
.tree-soil { fill: #9A6644; transition: fill .4s; }
.gs-tree.is-wet .tree-soil { fill: #6E4529; }
.tree-sway { transform-origin: 60px 132px; animation: gs-sway 4.2s ease-in-out infinite; }
.gs-slot:nth-child(2n) .tree-sway { animation-delay: -1.3s; }
.gs-slot:nth-child(3n) .tree-sway { animation-delay: -2.4s; }
.weather-hujan .tree-sway { animation-duration: 2.6s; }
.gs-empty, .gs-locked {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed rgba(255,255,255,.85); color: #FFFFFF; font-weight: 700; font-size: 0.8rem; background: rgba(255,255,255,.14);
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.gs-empty:hover { background: rgba(255,255,255,.24); }
.gs-empty.is-static { opacity: .6; }
.gs-locked { opacity: .7; border-style: dotted; }
.gs-caption {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); max-width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 8px 5px; border-radius: 10px;
  background: rgba(255,255,255,.92); color: #1F3B1C; font-size: 0.72rem; font-weight: 700; white-space: nowrap;
}
.gs-name { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gs-care { display: flex; align-items: center; gap: 3px; font-size: 0.64rem; color: #46534E; font-variant-numeric: tabular-nums; }
.gs-care svg path { fill: var(--care); }
.gs-care-bar { width: 38px; height: 5px; border-radius: 5px; background: #E4E7E1; overflow: hidden; }
.gs-care-bar span { display: block; height: 100%; background: var(--care); border-radius: 5px; transition: width .6s; }
.gs-badge { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; white-space: nowrap; z-index: 2; }
.gs-badge.is-ready { background: #FFF6C9; color: #8A5A00; animation: gs-bob 1.4s ease-in-out infinite; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gs-badge.is-thirsty { background: rgba(255,255,255,.9); color: #2C6CB0; }
.gs-spark { position: absolute; width: 12px; height: 12px; animation: gs-spark 1.4s ease-in-out infinite; z-index: 2; }
.gs-drops { position: absolute; inset: 0; pointer-events: none; display: none; }
.gs-tree.is-wet .gs-drops { display: block; }
.gs-drops i { position: absolute; width: 6px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #5BA4E6; animation: gs-drop .9s ease-in infinite; }
.gs-drops i:nth-child(1) { left: 40%; top: 30px; }
.gs-drops i:nth-child(2) { left: 56%; top: 22px; animation-delay: .25s; }
.gs-drops i:nth-child(3) { left: 30%; top: 44px; animation-delay: .5s; }
.gs-tree.is-ready .tree-art { filter: drop-shadow(0 0 8px rgba(255,236,150,.8)); }
.gs-rain { position: absolute; inset: 0; background: rgba(40,60,90,.16); pointer-events: none; z-index: 3; overflow: hidden; }
.gs-rain span { position: absolute; top: 0; width: 2px; height: 14px; border-radius: 2px; background: rgba(170,205,240,.85); animation: gs-rain .7s linear infinite; }
.gs-night { position: absolute; inset: 0; background: rgba(10,20,50,.2); pointer-events: none; z-index: 3; }
.coin-pop.water { color: #2C6CB0; }
@keyframes gs-sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes gs-drift { from { transform: translateX(-120px); } to { transform: translateX(min(110vw, 520px)); } }
@keyframes gs-rain { from { transform: translate(0, -30px); } to { transform: translate(-14px, 760px); } }
@keyframes gs-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes gs-glow { 0%, 100% { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(6px, -8px); } }
@keyframes gs-drop { 0% { transform: translateY(-24px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes gs-spark { 0%, 100% { transform: scale(.4); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes gs-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -3px); } }
@media (prefers-reduced-motion: reduce) {
  .tree-sway, .gs-cloud, .gs-star, .gs-fly, .gs-spark, .gs-badge, .gs-drops i { animation: none !important; }
  .gs-rain span { animation: none; top: auto; }
}
.garden-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.garden-actions .act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px;
  border: none; border-radius: 16px; background: var(--surface); color: var(--ink); font-family: inherit; font-weight: 700;
  box-shadow: 0 2px 0 rgba(31,77,69,.18); cursor: pointer; font-size: 0.8rem;
}
.garden-actions .act:first-child svg { color: #2C6CB0; }
.garden-actions .act:nth-child(2) { font-size: 0.8rem; }
.garden-actions .act:nth-child(2) > :first-child { font-size: 1.25rem; line-height: 1; }
.garden-actions .act:nth-child(3) svg { color: #8B5A3C; }
.garden-actions .act:nth-child(4) svg { color: #2C6CB0; }
.garden-actions .act:active { transform: translateY(2px); box-shadow: none; }
.garden-actions .act:disabled { opacity: .6; }
.garden-board { display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 70px; }
.garden-board .section-label { margin: 6px 0 0; }

.tree-sheet-top { display: flex; gap: 12px; align-items: flex-start; }
.tree-sheet-top .tree-art { flex: none; background: linear-gradient(180deg, #DDF3FF, #CFEFDF); border-radius: 14px; }
.tree-sheet-top p { margin: 0 0 4px; }
.season-cal { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.season-head { display: flex; justify-content: space-between; gap: 8px; }
.season-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.season-m { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.66rem; color: var(--ink-3); font-weight: 600; }
.season-m i { display: block; width: 100%; height: 10px; border-radius: 3px; }
.season-m.is-rain i, .season-legend i.is-rain { background: #5BA4E6; }
.season-m.is-dry i, .season-legend i.is-dry { background: #F2B33D; }
.season-m.is-now { color: var(--ink); font-weight: 800; }
.season-m.is-now i { outline: 2px solid var(--ink); outline-offset: 1px; }
.season-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.season-legend span { display: inline-flex; align-items: center; gap: 4px; }
.season-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.plant-list { display: flex; flex-direction: column; gap: 6px; }
.plant-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--surface-2); border-radius: 14px; }
.plant-row .tree-art { flex: none; }
.plant-row .grow { min-width: 0; line-height: 1.3; }
.plant-row.is-locked { opacity: .6; }
.plant-row .btn { flex: none; min-width: 78px; }
.tag-season { margin-left: 6px; font-size: 0.66rem; font-weight: 700; color: #8E3A1B; background: #FBE7E2; border-radius: 999px; padding: 1px 7px; vertical-align: 2px; }

/* ======================================================================
   TOKO LINGKAR — latar, efek, bingkai, wallpaper & gelembung baru
   ====================================================================== */

/* ---------- Latar baru ---------- */
.banner-fajar { background: linear-gradient(180deg, #FFB48C 0%, #FFD9A8 38%, #CDEBFA 80%); }
.banner-fajar .sun { position: absolute; left: 58%; top: 70%; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%;
  background: radial-gradient(circle, #FFF2B8 0 40%, #FFC25C 60%, rgba(255, 194, 92, 0) 72%); animation: sunrise 14s ease-in-out infinite alternate; }
@keyframes sunrise { from { transform: translateY(26px) scale(.9); } to { transform: translateY(-40px) scale(1.05); } }
.banner-fajar .mt { position: absolute; left: -5%; right: -5%; bottom: 0; }
.banner-fajar .mt1 { height: 46%; background: #3E6B57; clip-path: polygon(0 60%, 14% 30%, 26% 55%, 40% 18%, 55% 52%, 70% 26%, 84% 50%, 100% 32%, 100% 100%, 0 100%); }
.banner-fajar .mt2 { height: 60%; background: #6F9C80; clip-path: polygon(0 50%, 18% 22%, 32% 44%, 50% 8%, 66% 40%, 82% 18%, 100% 46%, 100% 100%, 0 100%); }
.banner-fajar .mt3 { height: 72%; background: #A9C7B4; opacity: .75; clip-path: polygon(0 40%, 22% 14%, 38% 36%, 58% 4%, 76% 30%, 100% 12%, 100% 100%, 0 100%); }
.pt-bird { width: calc(14px * var(--s)); height: calc(5px * var(--s)); top: calc(var(--y) * .4);
  border-top: 2px solid #4A3A3A; border-radius: 50% 50% 0 0; animation: bird calc(var(--d) * 3) linear var(--delay) infinite; }
.pt-bird::after { content: ''; position: absolute; left: 50%; top: -2px; width: 100%; height: 100%; border-top: 2px solid #4A3A3A; border-radius: 50% 50% 0 0; }
@keyframes bird { from { transform: translateX(-120px); } to { transform: translateX(520px); } }

.banner-pelangi { background: linear-gradient(180deg, #7FC8F2 0%, #BFE6FB 70%, #E8F7FF 100%); }
.banner-pelangi .arc { position: absolute; left: 50%; bottom: -70%; width: 150%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, transparent 54%, #8E5BD0 54% 57%, #4F7FE0 57% 60%, #3DBF7A 60% 63%, #F4D03F 63% 66%, #F39C33 66% 69%, #E74C3C 69% 72%, transparent 72%);
  opacity: .85; animation: arc-glow 6s ease-in-out infinite alternate; }
@keyframes arc-glow { from { opacity: .65; } to { opacity: .95; } }
.banner .cl { position: absolute; height: 22px; border-radius: 22px; background: #FFFFFF; opacity: .95; animation: cloud-move linear infinite; }
.banner .cl::before, .banner .cl::after { content: ''; position: absolute; background: inherit; border-radius: 50%; }
.banner .cl::before { width: 26px; height: 26px; left: 10px; top: -13px; }
.banner .cl::after { width: 34px; height: 34px; left: 28px; top: -18px; }
.banner .c1 { width: 80px; top: 22%; animation-duration: 28s; }
.banner .c2 { width: 64px; top: 52%; animation-duration: 36s; animation-delay: -14s; transform: scale(.8); }
.banner .c3 { width: 96px; top: 70%; animation-duration: 44s; animation-delay: -30s; opacity: .8; }
@keyframes cloud-move { from { left: -30%; } to { left: 110%; } }

.banner-padang { background: linear-gradient(180deg, #9ED7F5 0%, #D6F0FF 46%, #9ED38A 46%, #6FB15C 100%); }
.banner-padang .hill { position: absolute; left: -10%; right: -10%; top: 38%; height: 30%; border-radius: 50% 50% 0 0; background: #8CC97A; }
.pt-flower { top: calc(52% + var(--y) * .42); width: calc(9px * var(--s)); height: calc(9px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle, #FFE07A 0 28%, hsl(var(--h) 80% 70%) 30%); transform-origin: 50% 160%;
  animation: flower-sway calc(var(--d) * .6) ease-in-out var(--delay) infinite alternate; }
.pt-flower::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 10px; margin-left: -.75px; background: #3E8A3A; }
@keyframes flower-sway { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }

.banner-kebunku { background: linear-gradient(180deg, #8ED0F2 0%, #CFEFFF 52%, #9ED38A 52%, #7DBB69 100%); }
.banner-kebunku .hill { position: absolute; left: -10%; right: -10%; top: 44%; height: 20%; border-radius: 50% 50% 0 0; background: #8CC97A; }
.banner-kebunku .tr { position: absolute; bottom: 14%; width: 15%; aspect-ratio: 1 / 1.25; transform-origin: 50% 100%; animation: tree-sway 4s ease-in-out infinite alternate; }
.banner-kebunku .tr::before { content: ''; position: absolute; left: 44%; bottom: 0; width: 12%; height: 42%; background: #7A5236; border-radius: 2px; }
.banner-kebunku .tr i { position: absolute; left: 0; right: 0; top: 0; height: 72%; border-radius: 50%; background: #4E9A43;
  box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .08); }
.banner-kebunku .tr i::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 35%, var(--f) 0 7%, transparent 8%), radial-gradient(circle at 64% 30%, var(--f) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 62%, var(--f) 0 7%, transparent 8%), radial-gradient(circle at 76% 58%, var(--f) 0 7%, transparent 8%); }
.banner-kebunku .tr0 { --f: #D9342B; }
.banner-kebunku .tr1 { --f: #F39A1E; animation-delay: -1.5s; }
.banner-kebunku .tr2 { --f: #E7C23A; animation-delay: -3s; }
@keyframes tree-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

.banner-kota { background: linear-gradient(180deg, #0B1230 0%, #1C2A5C 60%, #3C3F7A 100%); }
.banner-kota .moon, .banner-tahun_baru .moon { position: absolute; right: 10%; top: 14%; width: 30px; height: 30px; border-radius: 50%; box-shadow: -7px 4px 0 0 #F7E7B4; transform: rotate(-20deg); }
.banner-kota .bd, .banner-tahun_baru .bd { position: absolute; bottom: 0; width: 10.5%; background: #121833; border-radius: 2px 2px 0 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 220, 120, .0) 7px 8px),
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 214, 110, .75) 4px 8px, transparent 8px 12px);
  background-size: 12px 12px; -webkit-mask: repeating-linear-gradient(0deg, #000 0 6px, transparent 6px 12px); mask: repeating-linear-gradient(0deg, #000 0 6px, transparent 6px 12px);
  animation: windows 3s steps(2) infinite; animation-delay: calc(var(--i) * -0.7s); }
.banner-kota .bd::before, .banner-tahun_baru .bd::before { content: ''; }
@keyframes windows { 0% { filter: brightness(1); } 50% { filter: brightness(.55); } 100% { filter: brightness(1.1); } }

.banner-awan { background: linear-gradient(180deg, #4FA8E6 0%, #8FCBF2 55%, #D5EEFC 100%); }
.banner-awan .plane { position: absolute; width: 64px; height: 28px; top: 34%; animation: plane-fly 16s linear infinite; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .15)); }
@keyframes plane-fly { 0% { left: -20%; transform: translateY(10px) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(-6deg); } 100% { left: 115%; transform: translateY(-20px) rotate(-4deg); } }

.banner-bawah_laut { background: linear-gradient(180deg, #2BA3C9 0%, #136B95 55%, #0A3C5E 100%); }
.banner-bawah_laut .ray { position: absolute; top: -20%; width: 18%; height: 140%; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 70%);
  transform-origin: 50% 0; animation: ray 7s ease-in-out infinite alternate; }
.banner-bawah_laut .r1 { left: 12%; transform: rotate(14deg); }
.banner-bawah_laut .r2 { left: 46%; transform: rotate(6deg); animation-delay: -2s; width: 12%; }
.banner-bawah_laut .r3 { left: 74%; transform: rotate(-4deg); animation-delay: -4s; }
@keyframes ray { from { opacity: .35; } to { opacity: .9; } }
.banner-bawah_laut .sand { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: #D9C08C; border-radius: 40% 60% 0 0 / 40% 40% 0 0; }
.banner-bawah_laut .pt-bubble { top: auto; bottom: -10%; }
.pt-fish { top: calc(14% + var(--y) * .6); width: calc(22px * var(--s)); height: calc(11px * var(--s)); border-radius: 50%;
  background: hsl(calc(var(--h) * .2 + 10) 90% 62%); animation: fish calc(var(--d) * 2.4) linear var(--delay) infinite; }
.pt-fish::after { content: ''; position: absolute; left: 92%; top: 15%; width: 45%; height: 70%; background: inherit; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.pt-fish::before { content: ''; position: absolute; left: 18%; top: 28%; width: 3px; height: 3px; border-radius: 50%; background: #1C2321; }
@keyframes fish { from { left: 110%; } to { left: -20%; } }

.banner-neon { background: linear-gradient(180deg, #12002B 0%, #3A0B57 48%, #12002B 48.5%, #0A0018 100%); perspective: 160px; }
.banner-neon .sun { position: absolute; left: 50%; top: 10%; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%;
  background: linear-gradient(180deg, #FFE76A 0%, #FF6FB5 70%); box-shadow: 0 0 40px rgba(255, 111, 181, .6);
  -webkit-mask: linear-gradient(180deg, #000 52%, transparent 52% 58%, #000 58% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 82%, #000 82% 88%, transparent 88%);
  mask: linear-gradient(180deg, #000 52%, transparent 52% 58%, #000 58% 66%, transparent 66% 71%, #000 71% 78%, transparent 78% 82%, #000 82% 88%, transparent 88%); }
.banner-neon .grid { position: absolute; left: -50%; right: -50%; top: 48%; height: 120%; transform: rotateX(68deg); transform-origin: 50% 0;
  background-image: linear-gradient(90deg, rgba(0, 240, 255, .7) 1.5px, transparent 1.5px), linear-gradient(0deg, rgba(255, 80, 200, .7) 1.5px, transparent 1.5px);
  background-size: 34px 34px; animation: grid-run 1.6s linear infinite; }
@keyframes grid-run { to { background-position: 0 34px; } }

.banner-rintik { background: linear-gradient(180deg, #5E7387 0%, #7C93A8 60%, #A6B7C6 100%); }
.banner-rintik .umbrella { position: absolute; left: 58%; bottom: 18%; width: 64px; height: 34px; margin-left: -32px; border-radius: 64px 64px 0 0;
  background: radial-gradient(circle at 50% 100%, #F05A4A 0 60%, #C93A2E 61%); animation: umbrella 3.4s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.banner-rintik .umbrella::before { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px;
  background: radial-gradient(circle at 8px 0, transparent 8px, #A6B7C6 8px) 0 0 / 16px 8px repeat-x; }
.banner-rintik .umbrella i { position: absolute; left: 50%; top: 100%; width: 2px; height: 30px; background: #3A2A26; }
.banner-rintik .umbrella i::after { content: ''; position: absolute; left: 0; bottom: 0; width: 8px; height: 6px; border: 2px solid #3A2A26; border-top: none; border-radius: 0 0 8px 8px; }
@keyframes umbrella { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.banner-rintik .puddle { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .05)); }

.banner-tahun_baru { background: linear-gradient(180deg, #080C24 0%, #1A1F4A 70%, #2E2A5E 100%); }
.banner-tahun_baru .pt-burst { top: calc(var(--y) * .5); }

/* ---------- Efek baru ---------- */
.pt-heart { top: auto; bottom: -10%; width: calc(14px * var(--s)); height: calc(13px * var(--s));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S1 14 1 7a5.5 5.5 0 0 1 11-1 5.5 5.5 0 0 1 11 1c0 7-11 14-11 14z' fill='%23FF5C8A'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: float-up calc(var(--d) * 1.2) ease-in var(--delay) infinite; }
@keyframes float-up { 0% { transform: translateY(0) translateX(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateY(-160px) translateX(14px) scale(1); } 100% { transform: translateY(-330px) translateX(-10px) scale(1.1); opacity: 0; } }
.pt-leaf { top: -12%; width: calc(14px * var(--s)); height: calc(9px * var(--s)); border-radius: 0 80% 0 80%;
  background: hsl(calc(20 + var(--h) * .25) 80% 52%); animation: fall var(--d) linear var(--delay) infinite; }
.pt-note { top: auto; bottom: -10%; width: calc(14px * var(--s)); height: calc(18px * var(--s));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M8 20V3l11-2v15' fill='none' stroke='%237C4DFF' stroke-width='2.4'/%3E%3Ccircle cx='5' cy='20' r='4' fill='%237C4DFF'/%3E%3Ccircle cx='16' cy='17' r='3.6' fill='%237C4DFF'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: note-up calc(var(--d) * 1.3) ease-in-out var(--delay) infinite; }
@keyframes note-up { 0% { transform: translateY(0) rotate(-10deg); opacity: 0; } 15% { opacity: 1; } 50% { transform: translateY(-150px) rotate(12deg); } 100% { transform: translateY(-320px) rotate(-8deg); opacity: 0; } }
.pt-butterfly { width: calc(22px * var(--s)); height: calc(18px * var(--s)); animation: flutter-path calc(var(--d) * 1.6) ease-in-out var(--delay) infinite alternate; }
.pt-butterfly::before { content: ''; position: absolute; inset: 0; filter: hue-rotate(calc(var(--h) * 1deg));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M12 10C9 2 2 0 1.5 4.5 1 8 6 10 11 10.5 6 11 3 15 6 18c3 2 6-3 6-7.5 0 4.5 3 9.5 6 7.5 3-3 0-7-5-7.5C18 10 23 8 22.5 4.5 22 0 15 2 12 10z' fill='%23FF7A45'/%3E%3Cpath d='M12 4v14' stroke='%233A2A26' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: flap .3s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes flutter-path { 0% { transform: translate(0, 0); } 33% { transform: translate(40px, -24px); } 66% { transform: translate(-10px, -50px); } 100% { transform: translate(30px, -10px); } }
.pt-coin { top: -12%; width: calc(14px * var(--s)); height: calc(14px * var(--s)); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF3B0 0 18%, #F2C94C 20% 62%, #C99A1E 64%); box-shadow: 0 0 6px rgba(242, 201, 76, .6);
  animation: coin-fall calc(var(--d) * .9) linear var(--delay) infinite; }
@keyframes coin-fall { 0% { transform: translateY(0) rotateY(0); } 100% { transform: translateY(380px) rotateY(1080deg); } }
.fx-lampion .pt-lantern { background: radial-gradient(circle at 50% 60%, #FFD58A, #E0402E 72%); box-shadow: 0 0 14px 4px rgba(240, 90, 60, .5); }

/* ---------- Bingkai foto ---------- */
.avatar-frame { position: relative; display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.avatar-frame > .avatar { width: 100% !important; height: 100% !important; }
.fr-ring { position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; z-index: 1;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); }
.avatar-frame.is-small .fr-ring { inset: -2.5px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); }
.fr-daun .fr-ring { background: repeating-conic-gradient(#3E8A3A 0 14deg, #7DBB55 14deg 26deg, #A9D87A 26deg 30deg); animation: ring-spin 14s linear infinite; }
.fr-bunga .fr-ring { background: repeating-conic-gradient(#F7A8C3 0 12deg, #FFFFFF 12deg 18deg, #E5679A 18deg 30deg); animation: ring-spin 18s linear infinite reverse; }
.fr-pelangi .fr-ring { background: conic-gradient(#E74C3C, #F39C33, #F4D03F, #3DBF7A, #4F7FE0, #8E5BD0, #E74C3C); animation: ring-spin 4s linear infinite; }
.fr-emas .fr-ring { background: conic-gradient(#C99A1E, #F2C94C, #FFF6C9, #F2C94C, #C99A1E, #E8B23A, #FFF6C9, #C99A1E); animation: ring-spin 6s linear infinite; }
.fr-emas::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 10px rgba(242, 201, 76, .55); pointer-events: none; }
.fr-neon .fr-ring { background: conic-gradient(#FF4FD8, #3DE0FF, #FF4FD8); animation: ring-spin 3s linear infinite; }
.fr-neon::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: neon-pulse 1.8s ease-in-out infinite alternate; }
@keyframes neon-pulse { from { box-shadow: 0 0 6px 1px rgba(255, 79, 216, .55); } to { box-shadow: 0 0 14px 3px rgba(61, 224, 255, .65); } }
.fr-bintang .fr-ring { background: conic-gradient(#2B2D6E, #6A5ACD, #2B2D6E); }
.fr-bintang::after { content: ''; position: absolute; left: 50%; top: -9px; width: 14px; height: 14px; margin-left: -7px; z-index: 2; pointer-events: none;
  background: #FFD54A; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform-origin: 50% calc(9px + var(--sz, 44px) / 2); animation: orbit 5s linear infinite; filter: drop-shadow(0 0 3px rgba(255, 213, 74, .9)); }
.avatar-frame.is-small.fr-bintang::after { width: 9px; height: 9px; margin-left: -4.5px; top: -6px; transform-origin: 50% calc(6px + var(--sz, 32px) / 2); }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
html.reduce-motion .fr-ring, html.reduce-motion .avatar-frame::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fr-ring, .avatar-frame::after { animation: none !important; } }

/* ---------- Gelembung pesan ---------- */
.msg .msg-bubble.bb, .msg-bubble.bb { color: #FFFFFF; }
.msg .msg-bubble.bb .msg-time { color: rgba(255, 255, 255, .85); }
.msg-bubble.bb .msg-deleted { color: rgba(255, 255, 255, .85); }
.msg .msg-bubble.bb-permen, .msg-bubble.bb-permen { background: linear-gradient(135deg, #D64C93, #8E44C4); }
.msg .msg-bubble.bb-laut, .msg-bubble.bb-laut { background: linear-gradient(135deg, #1F78C2, #13879A); }
.msg .msg-bubble.bb-hutan, .msg-bubble.bb-hutan { background: linear-gradient(135deg, #24704F, #3E8A3A); }
.msg .msg-bubble.bb-senja, .msg-bubble.bb-senja { background: linear-gradient(135deg, #D2552F, #B5174F); }
.msg .msg-bubble.bb-emas, .msg-bubble.bb-emas { color: #3A2A08; background: linear-gradient(120deg, #F2C94C 0%, #FFF0B3 45%, #E8B23A 55%, #F7D774 100%); background-size: 240% 100%; animation: gold-sheen 4s ease-in-out infinite; }
.msg .msg-bubble.bb-emas .msg-time { color: rgba(58, 42, 8, .7); }
@keyframes gold-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ---------- Wallpaper obrolan ---------- */
.chat-room[class*="wall-"] .chat-scroll { background-attachment: local; }
.wall-kertas .chat-scroll, .mini-chat.wall-kertas { background: #FBF6EA radial-gradient(#E6DAC0 1.2px, transparent 1.4px) 0 0 / 18px 18px; }
.wall-kebun .chat-scroll, .mini-chat.wall-kebun { background-color: #EAF5E2;
  background-image: radial-gradient(ellipse 9px 5px at 25% 30%, #BFE0A9 98%, transparent 100%), radial-gradient(ellipse 9px 5px at 75% 70%, #CBE7B8 98%, transparent 100%);
  background-size: 46px 46px; }
.wall-batik .chat-scroll, .mini-chat.wall-batik { background-color: #F4E9D8;
  background-image: radial-gradient(circle at 25% 25%, rgba(139, 90, 60, .14) 0 14%, transparent 15%), radial-gradient(circle at 75% 75%, rgba(139, 90, 60, .14) 0 14%, transparent 15%),
    radial-gradient(circle at 50% 50%, rgba(201, 135, 26, .18) 0 7%, transparent 8%), radial-gradient(circle at 0 0, rgba(201, 135, 26, .18) 0 7%, transparent 8%);
  background-size: 56px 56px; }
.wall-malam .chat-scroll, .mini-chat.wall-malam { background-color: #151B3A;
  background-image: radial-gradient(1.4px 1.4px at 20% 30%, #FFFFFF 99%, transparent), radial-gradient(1px 1px at 70% 60%, #FFF6D8 99%, transparent),
    radial-gradient(1.6px 1.6px at 45% 85%, #FFFFFF 99%, transparent), radial-gradient(1px 1px at 85% 15%, #FFFFFF 99%, transparent);
  background-size: 90px 90px; }
.wall-malam .day-sep span { background: rgba(255, 255, 255, .14); color: #DDE3FF; }
.wall-malam .chat-empty { color: #DDE3FF; }
.wall-pantai .chat-scroll, .mini-chat.wall-pantai { background: linear-gradient(180deg, #BFE6FB 0%, #DFF3FB 40%, #9FD8E8 40%, #7CC6DA 60%, #F3E3B8 60%, #EAD39A 100%); background-attachment: local; }

/* Obrolan mini (pratinjau toko) */
.mini-chat { display: flex; flex-direction: column; gap: 5px; padding: 10px 8px; height: 100%; box-sizing: border-box; background: var(--bg); justify-content: center; }
.mini-chat .mc-msg { display: flex; }
.mini-chat .mc-msg.mine { justify-content: flex-end; }
.mini-chat .msg-bubble { font-size: 0.66rem; padding: 5px 8px; min-width: 0; border-radius: 12px; line-height: 1.3; gap: 0; }
.mini-chat .mc-msg.theirs .msg-bubble { border-bottom-left-radius: 4px; }
.mini-chat .mc-msg.mine .msg-bubble { background: var(--accent); color: #FFFFFF; border-bottom-right-radius: 4px; }
.mini-chat .mc-msg.mine .msg-bubble.bb-emas { color: #3A2A08; }
.mini-chat .mc-msg.mine .msg-bubble.bb-permen { background: linear-gradient(135deg, #D64C93, #8E44C4); }
.mini-chat .mc-msg.mine .msg-bubble.bb-laut { background: linear-gradient(135deg, #1F78C2, #13879A); }
.mini-chat .mc-msg.mine .msg-bubble.bb-hutan { background: linear-gradient(135deg, #24704F, #3E8A3A); }
.mini-chat .mc-msg.mine .msg-bubble.bb-senja { background: linear-gradient(135deg, #D2552F, #B5174F); }
.mini-chat .mc-msg.mine .msg-bubble.bb-emas { background: linear-gradient(120deg, #F2C94C 0%, #FFF0B3 45%, #E8B23A 55%, #F7D774 100%); background-size: 240% 100%; }
.mini-chat.is-big { padding: 16px 14px; gap: 8px; }
.mini-chat.is-big .msg-bubble { font-size: 0.85rem; padding: 8px 12px; border-radius: 16px; }

/* ---------- Layar toko ---------- */
.shop { position: relative; }
.shop-entry { color: #C9871A; }
.shop-body { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 28px; }
.shop-body .card { margin: 0; }
.kilau-icon { flex: none; vertical-align: -3px; }
.kilau-card { position: relative; overflow: hidden; border-radius: 22px; padding: 16px; color: #FFFFFF;
  background: linear-gradient(135deg, #2B1B5A 0%, #5B2A86 55%, #B4479A 100%); box-shadow: 0 10px 30px rgba(91, 42, 134, .35); }
.kilau-glow { position: absolute; inset: 0; pointer-events: none; }
.kilau-glow i { position: absolute; width: 10px; height: 10px; background: #FFE9A8; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: spark 3.2s ease-in-out infinite; }
.kilau-glow i:nth-child(1) { left: 70%; top: 18%; }
.kilau-glow i:nth-child(2) { left: 86%; top: 52%; animation-delay: -.8s; width: 14px; height: 14px; }
.kilau-glow i:nth-child(3) { left: 58%; top: 70%; animation-delay: -1.6s; }
.kilau-glow i:nth-child(4) { left: 92%; top: 12%; animation-delay: -2.2s; width: 7px; height: 7px; }
.kilau-glow i:nth-child(5) { left: 44%; top: 20%; animation-delay: -2.8s; width: 6px; height: 6px; }
.kilau-top { position: relative; display: flex; align-items: center; gap: 12px; }
.kilau-top .kilau-icon { filter: drop-shadow(0 0 8px rgba(255, 214, 110, .8)); animation: kilau-bob 2.4s ease-in-out infinite; }
@keyframes kilau-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(8deg); } }
.kilau-n { display: block; font: 800 2rem/1 var(--display); font-variant-numeric: tabular-nums; }
.kilau-sub { display: block; font-size: 0.8rem; opacity: .85; margin-top: 4px; }
.kilau-daily-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.streak-dots { display: inline-flex; gap: 5px; align-items: center; }
.streak-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.streak-dots i.is-big { width: 14px; height: 14px; background: rgba(255, 233, 168, .35); box-shadow: 0 0 0 2px rgba(255, 233, 168, .5); }
.streak-dots i.is-on { background: #FFE9A8; box-shadow: 0 0 8px rgba(255, 233, 168, .8); }
.kilau-daily { background: #FFE9A8; color: #4A2A00; border: none; }
.kilau-daily:hover { background: #FFF2C8; color: #4A2A00; }
.kilau-daily:disabled { background: rgba(255, 255, 255, .2); color: #FFFFFF; opacity: 1; }
.kilau-pop { color: #8E44C4; }
.levelup-kilau { color: #8E44C4; font-weight: 800; }
.shop-section .section-label { margin: 0 0 8px; }
.shop-row { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.shop-row > * { scroll-snap-align: start; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.shop-card { position: relative; display: flex; flex-direction: column; border: none; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: var(--surface); box-shadow: var(--shadow); text-align: left; font: inherit; color: var(--ink); transition: transform .15s ease; }
.shop-card:active { transform: scale(.97); }
.shop-card.is-on { box-shadow: 0 0 0 2.5px #8E44C4, var(--shadow); }
.shop-card .shop-prev, .shop-card .mini-chat { height: 104px; }
.shop-card-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.shop-card-body strong { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: #5B2A86; }
.price-chip b { font-weight: 800; }
.price-chip .was { color: var(--ink-3); font-size: 0.74rem; }
.price-chip.is-deal b { color: #C2185B; }
.owned-tag { display: inline-flex; align-items: center; gap: 3px; width: max-content; font-size: 0.72rem; font-weight: 700; color: #1F4D45; background: #E3F2DC; border-radius: 999px; padding: 2px 8px; }
.owned-tag.is-on { color: #FFFFFF; background: #8E44C4; }
.deal-tag, .limited-tag { position: absolute; top: 8px; left: 8px; z-index: 5; font-size: 0.68rem; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.deal-tag { background: #C2185B; color: #FFFFFF; }
.limited-tag { left: auto; right: 8px; background: #FFE9A8; color: #4A2A00; }
.shop-prev { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.shop-prev .banner { position: absolute; inset: 0; }
.shop-prev.kind-frame .banner { opacity: .55; }
.shop-prev-avatar { position: relative; z-index: 4; }
.shop-prev.is-big { height: 190px; border-radius: 18px; flex-direction: column; justify-content: flex-end; padding-bottom: 14px; }
.shop-prev.is-big .shop-prev-avatar { margin-bottom: 4px; }
.shop-prev.is-big .shop-prev-avatar .avatar { box-shadow: 0 0 0 3px #FFFFFF; }
.shop-prev-name { position: relative; z-index: 4; font: 700 0.95rem var(--display); color: #FFFFFF; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.shop-sheet .mini-chat.is-big { border-radius: 18px; min-height: 190px; }
.shop-desc { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--ink-2); }
.kind-pill { font-size: 0.72rem; font-weight: 700; background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: 3px 9px; }
.limited-note { margin: 0; color: #8E3A1B; font-weight: 600; }
.owned-note { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 12px; border-radius: 14px; background: #F3EAFB; color: #5B2A86; font-weight: 700; }
.shop-buy { background: linear-gradient(135deg, #5B2A86, #B4479A); border: none; }
.shop-buy:hover { background: linear-gradient(135deg, #4A2270, #9C3B85); }
.gift-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.earn-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.earn-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; }
.earn-list b { color: #5B2A86; white-space: nowrap; }
.earn-links { display: flex; gap: 8px; margin-bottom: 8px; }
.ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ledger li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9rem; }
.ledger b.pos { color: #2E7D5B; }
.ledger b.neg { color: #C2185B; }
.shop-tip { width: 100%; border: none; cursor: pointer; text-align: left; font: inherit; }

/* ---------- Bedeng sayur & gudang ---------- */
.gs-beds { position: relative; z-index: 1; margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 8px; border-radius: 16px; background: rgba(110, 69, 41, .18); }
.gs-bed { position: relative; height: 74px; border: none; padding: 0; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; color: inherit; }
.gs-bed:disabled { cursor: default; }
.gs-bed .veg-art { position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 56px; }
.veg-soil { fill: #8A5A3B; transition: fill .4s; }
.gs-bed.is-wet .veg-soil { fill: #5E3A22; }
.gs-bed.is-wet .gs-drops { display: block; }
.gs-bed .gs-drops i:nth-child(1) { top: 6px; }
.gs-bed .gs-drops i:nth-child(2) { top: 0; }
.gs-bed .gs-drops i:nth-child(3) { top: 12px; }
.gs-bed.is-empty { border: 2px dashed rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.gs-bed.is-empty.is-static { opacity: .6; }
.gs-bed-plus { position: absolute; left: 0; right: 0; top: 10px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: .72rem; font-weight: 700; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.gs-bed-name { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: .66rem; font-weight: 700; background: rgba(255, 255, 255, .92); color: #1F3B1C; border-radius: 8px; padding: 1px 7px; white-space: nowrap; }
.gs-bed .gs-badge { top: -4px; }
.gs-bed.is-ready .veg-art { filter: drop-shadow(0 0 6px rgba(255, 236, 150, .9)); }
.gs-bed:not(:disabled):active .veg-art { transform: scale(.96); }
.veg-thumb { width: 54px; height: 32px; flex: none; display: inline-flex; }
.veg-thumb .veg-art { width: 100%; height: 100%; }
.stock-card { display: flex; flex-direction: column; gap: 10px; }
.stock-head { display: flex; align-items: center; gap: 10px; }
.stock-ico { width: 40px; height: 40px; border-radius: 12px; background: #1F4D45; display: flex; align-items: center; justify-content: center; flex: none; }
.stock-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stock-row { display: flex; align-items: center; gap: 10px; }
.stock-row .grow { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.stock-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); }
.stock-fresh { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--ink-3); }
.stock-fresh .bar { width: 64px; height: 5px; border-radius: 5px; background: #E4E7E1; overflow: hidden; }
.stock-fresh .bar i { display: block; height: 100%; background: var(--c); border-radius: 5px; }
.stock-val { font-weight: 700; font-size: .85rem; white-space: nowrap; }
.stock-empty { margin: 0; }
.stock-soon { margin: 0; padding: 8px 10px; border-radius: 10px; background: #EEF5FB; color: #24557F; }

/* ---------- Bandara ---------- */
.airport { position: relative; }
.stock-fly { display: flex; align-items: center; gap: 8px; width: 100%; border: none; cursor: pointer; text-align: left; font: inherit; }
.stock-fly svg { flex: none; color: #2C6CB0; }
.air-stats { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.garden-coins.static { position: static; }
.air-pax { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: var(--ink-2); background: var(--surface); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow); }
.air-pax svg { color: #2C6CB0; }
.air-scene { --sky: linear-gradient(180deg, #6EC1F0 0%, #A8DCF8 55%, #DDF3FF 75%); --grass: linear-gradient(180deg, #9ED38A, #86C273);
  position: relative; height: 270px; border-radius: 24px; overflow: hidden; background: var(--sky); isolation: isolate; }
.air-scene.phase-pagi { --sky: linear-gradient(180deg, #FFC9A3 0%, #FFE3C4 45%, #CFEFFF 75%); }
.air-scene.phase-sore { --sky: linear-gradient(180deg, #F27A54 0%, #F9A86A 45%, #FFD9A0 75%); --grass: linear-gradient(180deg, #A4BF6A, #8EAA58); }
.air-scene.phase-malam { --sky: linear-gradient(180deg, #0D1736 0%, #1B2A55 55%, #2D3E72 75%); --grass: linear-gradient(180deg, #2E5A3C, #24492F); }
.air-scene.weather-hujan:not(.phase-malam) { --sky: linear-gradient(180deg, #7D8DA3 0%, #9DABBD 55%, #C3CDD8 75%); }
.air-sun { position: absolute; right: 30px; top: 18px; width: 40px; height: 40px; border-radius: 50%; background: #F6C445; box-shadow: 0 0 0 10px rgba(246, 196, 69, .25); }
.phase-sore .air-sun { background: #F26B3A; box-shadow: 0 0 0 10px rgba(242, 107, 58, .25); top: 60px; }
.air-moon { position: absolute; right: 36px; top: 18px; width: 30px; height: 30px; border-radius: 50%; box-shadow: -7px 4px 0 0 #F4EFD6; transform: rotate(-20deg); }
.air-cloud { position: absolute; height: 18px; border-radius: 18px; background: rgba(255, 255, 255, .9); animation: cloud-move linear infinite; }
.air-cloud::before { content: ''; position: absolute; left: 12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; background: inherit; }
.air-cloud.c1 { width: 70px; top: 30px; animation-duration: 40s; }
.air-cloud.c2 { width: 54px; top: 74px; animation-duration: 55s; animation-delay: -25s; }
.phase-malam .air-cloud { background: rgba(74, 85, 120, .8); }
.air-flying { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: left 4s linear; }
.air-flying .plane-art { transform: rotate(-4deg); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .15)); }
.air-flying-tag { font-size: .62rem; font-weight: 700; background: rgba(255, 255, 255, .9); color: #1F3B1C; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }
.air-ground { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; background: var(--grass); }
.air-tower { position: absolute; left: 16px; top: 66px; width: 22px; height: 86px; background: #E9ECEF; border: 2px solid #B8C0C6; border-radius: 4px 4px 0 0; box-sizing: border-box; z-index: 1; }
.air-tower .cab { position: absolute; left: -9px; top: -16px; width: 36px; height: 20px; border-radius: 6px; background: #2D3E52; display: flex; gap: 2px; padding: 4px; box-sizing: border-box; }
.air-tower .cab i { flex: 1; background: #8FD3FF; border-radius: 2px; }
.phase-malam .air-tower .cab i { background: #FFE9A8; box-shadow: 0 0 6px #FFE9A8; }
.air-tower .beacon { position: absolute; left: 6px; top: -24px; width: 6px; height: 6px; border-radius: 50%; background: #D9342B; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.air-terminal { position: absolute; left: 50px; right: 12px; top: 110px; height: 40px; background: #F4F1EA; border-radius: 10px 10px 0 0; border-bottom: 4px solid #C9C2B4;
  display: flex; align-items: flex-end; gap: 6px; padding: 0 8px; box-sizing: border-box; z-index: 1; overflow: hidden; }
.air-terminal .win { flex: 1; height: 22px; background: #8FBFE0; border-radius: 4px 4px 0 0; }
.phase-malam .air-terminal .win { background: #FFE3A0; box-shadow: 0 0 10px rgba(255, 227, 160, .7); }
.air-terminal b { font: 800 .62rem var(--display); color: #1F4D45; padding-bottom: 6px; letter-spacing: .04em; }
.air-terminal .pax { position: absolute; bottom: 4px; left: 12px; width: 5px; height: 10px; border-radius: 3px 3px 1px 1px; background: #D9472B; animation: walk 4s linear infinite; }
.air-terminal .pax:nth-of-type(2n) { background: #2E7D5B; }
.air-terminal .pax:nth-of-type(3n) { background: #E8A33D; }
@keyframes walk { from { transform: translateX(0); } to { transform: translateX(240px); } }
.air-gates { position: absolute; left: 10px; right: 10px; top: 156px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; z-index: 2; }
.air-gate { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; font: inherit; }
.air-gate-empty { font-size: .62rem; font-weight: 700; color: rgba(255, 255, 255, .85); border: 1.5px dashed rgba(255, 255, 255, .7); border-radius: 8px; padding: 6px 8px; }
button.air-gate { cursor: pointer; }
.air-gate.has-arrival .plane-art { animation: bob 1.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(255, 236, 150, .9)); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.air-gate-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: .6rem; font-weight: 800; background: #FFF6C9; color: #8A5A00; border-radius: 999px; padding: 1px 7px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.air-gate.is-late .air-gate-tag { background: #FBE7E2; color: #8E3A1B; }
.air-runway { position: absolute; left: 0; right: 0; bottom: 14px; height: 50px; background: #4A5058; z-index: 1; }
.air-runway .stripe { position: absolute; left: 0; right: 0; top: 24px; height: 2px; background: repeating-linear-gradient(90deg, #FFFFFF 0 18px, transparent 18px 34px); }
.air-runway .lights { position: absolute; left: 6px; right: 6px; top: 4px; display: flex; justify-content: space-between; }
.air-runway .lights i { width: 4px; height: 4px; border-radius: 50%; background: #FFE680; box-shadow: 0 0 6px 2px rgba(255, 230, 128, .5); }
.phase-malam .air-runway .lights i { box-shadow: 0 0 10px 4px rgba(255, 230, 128, .8); animation: blink 1.6s ease-in-out infinite; }
.air-takeoff { position: absolute; left: 10px; bottom: 6px; animation: takeoff 2.6s cubic-bezier(.5, 0, .6, 1) forwards; z-index: 4; }
@keyframes takeoff { 0% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(150px, 0) rotate(0); } 100% { transform: translate(420px, -190px) rotate(-14deg); opacity: .6; } }
.plane-art .prop { transform-origin: 93.7px 22px; animation: prop .15s linear infinite; }
@keyframes prop { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.2); } }
html.reduce-motion .air-scene *, html.reduce-motion .plane-art * { animation: none !important; }
.air-serve-all { animation: pulse-glow 1.6s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 71, 43, .35); } 50% { box-shadow: 0 0 0 8px rgba(217, 71, 43, 0); } }
.flip-board { background: #1B2026; border-radius: 16px; padding: 10px 12px; font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; color: #FFD866; font-size: .78rem; display: flex; flex-direction: column; gap: 5px; }
.fb-row { display: grid; grid-template-columns: 58px 1fr 44px 70px; gap: 6px; align-items: center; animation: flip-in .35s ease-out both; }
.fb-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-head { color: #8A949F; font-size: .64rem; letter-spacing: .05em; animation: none; }
.fb-city { color: #FFFFFF; }
.st-fly { color: #FFD866; }
.st-arrived { color: #7CE38B; animation: blink 1.2s ease-in-out infinite; }
.st-late { color: #FF8A7A; }
.fb-empty { grid-template-columns: 1fr; color: #C9D1D8; font-family: Figtree, system-ui, sans-serif; font-size: .78rem; white-space: normal; }
.fb-empty span { white-space: normal; }
@keyframes flip-in { from { transform: rotateX(90deg); opacity: 0; } to { transform: rotateX(0); opacity: 1; } }
.hangar-row { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 16px; padding: 8px 12px; box-shadow: var(--shadow); }
.hangar-row .grow { min-width: 0; line-height: 1.3; }
.hangar-row.is-locked { opacity: .6; }
.hangar-row .btn { flex: none; min-width: 84px; }
.hangar-row .plane-art { flex: none; }
.pips { display: flex; gap: 3px; margin-top: 5px; max-width: 160px; }
.pips i { flex: 1; height: 4px; border-radius: 3px; background: #E4E7E1; }
.pips i.is-on { background: #2C6CB0; }
.up-ico { width: 40px; height: 40px; border-radius: 12px; flex: none; background: #E1ECFA center / 24px no-repeat; }
.up-runway { background-color: #EEF0EB; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346534E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 20L10 4h4l6 16M12 8v2M12 13v2M12 18v1'/%3E%3C/svg%3E"); }
.up-gates { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C6CB0' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 20V8h16v12M8 20v-6h8v6M4 8l8-4 8 4'/%3E%3C/svg%3E"); }
.up-terminal { background-color: #FBE7E2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D9472B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 20h18M5 20V9h14v11M9 13h2M13 13h2M9 16h2M13 16h2'/%3E%3C/svg%3E"); }
.up-cold { background-color: #DFF3F2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A75' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 3v18M5 7l14 10M19 7L5 17'/%3E%3C/svg%3E"); }
.level-badge.air { background: #2C6CB0; }
.orders-card .orders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.orders-card li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
/* Peta & perencana terbang */
.route-map { position: relative; height: 0; padding-bottom: 60%; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #CFE8F7, #B7DCF2); }
.route-islands { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-islands path, .route-islands ellipse { fill: #9FCF8B; stroke: #7DB06A; stroke-width: 1.5; }
.route-islands .route-line { fill: none; stroke: rgba(31, 77, 69, .4); stroke-width: 1.5; stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; }
.route-islands .route-line.is-on { stroke: #D9472B; stroke-width: 2.5; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.route-pin { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: none; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.route-pin i { width: 12px; height: 12px; border-radius: 50%; background: #D9472B; border: 2.5px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.route-pin.is-home { pointer-events: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #1F4D45; border: 2.5px solid #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.route-pin.is-locked i { background: #A8B0AB; }
.route-pin.has-order i { box-shadow: 0 0 0 4px rgba(217, 71, 43, .25); }
.route-pin.is-on i { width: 16px; height: 16px; background: #2C6CB0; }
.route-name { position: absolute; top: 28px; font-size: .58rem; font-weight: 700; color: #1F4D45; white-space: nowrap; text-shadow: 0 0 3px #FFFFFF, 0 0 3px #FFFFFF; pointer-events: none; }
.route-pin.is-locked .route-name { color: #7A857F; }
.planner-plane { display: flex; align-items: center; gap: 10px; }
.planner-h { margin: 4px 0 0; font: 700 .95rem var(--display); }
.city-list { display: flex; flex-direction: column; gap: 6px; }
.city-row { display: flex; align-items: center; gap: 8px; border: 2px solid transparent; background: var(--surface-2); border-radius: 12px; padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.city-row.is-on { border-color: #2C6CB0; background: #EEF5FB; }
.city-row:disabled { opacity: .55; cursor: default; }
.order-chip { flex: none; font-size: .7rem; font-weight: 700; color: #8E3A1B; background: #FBE7E2; border-radius: 999px; padding: 2px 8px; }
.order-card { display: flex; align-items: center; gap: 10px; border: 2px dashed #E8A33D; background: #FFF8EC; border-radius: 14px; padding: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.order-card.is-on { border-style: solid; border-color: #2E7D5B; background: #F1FAF4; }
.order-card:disabled { opacity: .6; cursor: default; }
.order-ico { font-size: 1.4rem; }
.load-bar { height: 10px; border-radius: 10px; background: #E4E7E1; overflow: hidden; }
.load-bar i { display: block; height: 100%; background: linear-gradient(90deg, #E8A33D, #D9472B); border-radius: 10px; transition: width .3s; }
.load-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.load-row { display: flex; align-items: center; gap: 6px; }
.load-row .grow { min-width: 0; line-height: 1.25; }
.step { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface); font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; color: var(--ink); }
.step:disabled { opacity: .4; cursor: default; }
.step-max { width: auto; padding: 0 8px; font-size: .72rem; }
.load-q { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }
.planner-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: #EEF5FB; border-radius: 14px; padding: 10px 12px; font-size: .85rem; }
.planner-sum .est { grid-column: 1 / -1; font-size: 1rem; color: #1F4D45; }
.air-go { background: #2C6CB0; border-color: #2C6CB0; }
.air-go:hover { background: #24598F; }

/* ---------- Pelabuhan ---------- */
.harbor { position: relative; }
.port-entry { display: flex; align-items: center; gap: 12px; width: 100%; border: none; cursor: pointer; text-align: left; font: inherit; color: #FFFFFF;
  background: linear-gradient(135deg, #1F5F8B, #13879A); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); }
.port-entry .muted { color: rgba(255, 255, 255, .85); }
.port-entry.is-locked { background: linear-gradient(135deg, #5D6B76, #7C8B96); }
.port-ico { font-size: 1.6rem; }
.sea-scene { position: relative; height: 260px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #6EC1F0 0%, #A8DCF8 40%, #DDF3FF 52%); }
.sea-scene.phase-pagi { background: linear-gradient(180deg, #FFC9A3 0%, #FFE3C4 40%, #CFEFFF 52%); }
.sea-scene.phase-sore { background: linear-gradient(180deg, #F27A54 0%, #F9A86A 40%, #FFD9A0 52%); }
.sea-scene.phase-malam { background: linear-gradient(180deg, #0D1736 0%, #1B2A55 40%, #2D3E72 52%); }
.sea-scene.weather-hujan:not(.phase-malam) { background: linear-gradient(180deg, #7D8DA3 0%, #9DABBD 40%, #C3CDD8 52%); }
.sea-scene .air-sun { right: auto; left: 30px; top: 40px; }
.gull { position: absolute; width: 18px; height: 8px; border-top: 2px solid #46534E; border-radius: 50% 50% 0 0; animation: gull 6s ease-in-out infinite; z-index: 2; }
.gull::after { content: ''; position: absolute; left: 90%; top: -2px; width: 100%; height: 100%; border-top: 2px solid #46534E; border-radius: 50% 50% 0 0; }
.gull.g1 { left: 30%; top: 26px; }
.gull.g2 { left: 52%; top: 44px; transform: scale(.7); animation-delay: -3s; }
@keyframes gull { 0%, 100% { translate: 0 0; } 50% { translate: 30px -8px; } }
.sea-water { position: absolute; left: 0; right: 0; top: 132px; bottom: 0; background: linear-gradient(180deg, #3E8FC2, #1F5F8B 70%, #174A6E); overflow: hidden; }
.phase-malam .sea-water { background: linear-gradient(180deg, #1D3D63, #102A45); }
.sea-water .wave { position: absolute; left: -60px; right: -60px; height: 10px; background: radial-gradient(circle at 15px -4px, transparent 12px, rgba(255, 255, 255, .25) 13px, transparent 15px) 0 0 / 30px 10px repeat-x; animation: waves 3s linear infinite; }
.sea-water .w1 { top: 6px; }
.sea-water .w2 { top: 46px; opacity: .6; animation-duration: 4.5s; animation-direction: reverse; }
@keyframes waves { to { transform: translateX(30px); } }
.sea-dock { position: absolute; right: 0; top: 150px; bottom: 0; width: 108px; background: #8C7B6B; border-top: 6px solid #6E5F51; z-index: 1; }
.sea-dock .crane { position: absolute; right: 64px; top: -112px; width: 8px; height: 112px; background: #E8A33D; }
.sea-dock .crane .arm { position: absolute; right: 0; top: 0; width: 150px; height: 8px; background: #E8A33D; }
.sea-dock .crane .cable { position: absolute; right: 120px; top: 8px; width: 2px; height: 36px; background: #46534E; transform-origin: top; animation: cable 3s ease-in-out infinite; }
.sea-dock .crane .hook { position: absolute; right: 112px; top: 42px; width: 18px; height: 11px; border-radius: 2px; background: #2C6CB0; animation: hook 3s ease-in-out infinite; }
@keyframes cable { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.7); } }
@keyframes hook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(25px); } }
.sea-dock .stack { position: absolute; right: 8px; top: -26px; display: grid; grid-template-columns: repeat(3, 22px); gap: 2px; }
.sea-dock .stack i { height: 11px; border-radius: 2px; }
.sea-berths { position: absolute; left: 8px; right: 112px; top: 118px; display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.sea-berth { position: relative; display: inline-flex; animation: ship-bob 3s ease-in-out infinite; width: max-content; }
.sea-berth:nth-child(2) { animation-delay: -1s; margin-left: 24px; }
.sea-berth:nth-child(3) { animation-delay: -2s; }
.sea-berth.has-arrival .ship-art { filter: drop-shadow(0 0 6px rgba(255, 236, 150, .9)); }
.sea-berth .air-gate-tag { top: -8px; }
.sea-berth.is-sailing { animation: sail 2.6s ease-in forwards; }
@keyframes ship-bob { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(3px) rotate(.6deg); } }
@keyframes sail { to { transform: translateX(-420px); opacity: .3; } }
.sea-away { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1px; transition: left 6s linear; }
.sea-locked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 16px; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); }
.sea-locked h2 { margin: 0; font: 700 1.2rem var(--display); }
.sea-locked .level-bar { width: 100%; }
.sea-go { background: #1F5F8B; border-color: #1F5F8B; }
.load-bar.crates { display: flex; gap: 2px; height: 14px; background: transparent; }
.load-bar.crates i { flex: 1; height: 100%; background: #E4E7E1; border-radius: 2px; }
.full-tag { color: #2E7D5B; }
html.reduce-motion .sea-scene * { animation: none !important; }

/* ------------------------------------------------------------ Kabar: tampilan profesional (v17) */
.kabar .screen-title { font-size: 1.75rem; }
.kabar-shortcuts { display: flex; gap: 8px; margin: 2px 0 14px; overflow-x: auto; scrollbar-width: none; }
.kabar-shortcuts::-webkit-scrollbar { display: none; }
.shortcut {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 0.92rem var(--font);
  cursor: pointer; transition: transform .15s ease, border-color .15s ease;
}
.shortcut span { color: var(--ink-2); }
.shortcut:hover { border-color: var(--line-2); transform: translateY(-1px); }
.shortcut:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.kabar-summary {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center;
  padding: 16px 18px; border-radius: var(--radius); margin-bottom: 14px;
  background: linear-gradient(135deg, #1F4D45 0%, #2A6457 100%); color: #F4F1EA; box-shadow: var(--shadow);
}
.summary-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #F2B544; }
.summary-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.summary-text strong { font: 700 1.08rem var(--display); letter-spacing: -0.01em; }
.kabar-summary .progress-line { display: block; margin: 0; text-align: left; font-size: 0.88rem; color: rgba(244, 241, 234, .78); font-weight: 500; }
.kabar-summary.is-done .progress-line { color: #BFE3CF; font-weight: 600; }
.kabar-summary.is-done .summary-icon { color: #8FD7AE; }
.summary-bar { grid-column: 2; display: flex; gap: 4px; margin-top: 8px; }
.summary-bar i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.summary-bar i.is-on { background: #F2B544; }

.ring-card {
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #FBFAF6 60%, #F6F4EE 100%);
  border: 1px solid var(--line); border-radius: 26px; padding: 10px 12px 14px; margin-bottom: 14px;
}
.ring-card .ring-wrap { padding: 2px 0 30px; }
.ring-card .ring-track { border-color: #E2E5DE; }
.ring-card .face-name { font-weight: 600; }
.ring-card .face.status-news .face-avatar { animation: none; }
.ring-card .face-badge { transform: scale(.9); }
.rest-block { border-top: 1px solid var(--line); margin: 6px 4px 0; padding-top: 12px; }
.rest-title { font-size: 0.78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 4px 8px; }
.rest-block .rest-row { margin: 0; }
.ring-hint { margin: 10px 0 0; text-align: center; font-size: 0.86rem; color: var(--ink-3); }
.kabar-detail:empty { display: none; }
.kabar-detail { margin-bottom: 14px; }

.kabar .status-bar {
  margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; gap: 10px;
}
.status-bar-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
.status-bar-head h2 { margin: 0; font: 700 1.05rem var(--display); }
.status-bar-head span { font-size: 0.88rem; color: var(--ink-3); }
.kabar .status-btn { background: var(--green); border-color: var(--green); color: #FFFFFF; box-shadow: 0 8px 18px -12px rgba(31, 77, 69, .9); }
.kabar .status-btn:hover { background: #18403A; }
.kabar .status-btn.is-on { background: var(--ok-bg); color: #1F5E43; border-color: var(--ok-line); box-shadow: none; }
.kabar .quiet-btn { background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .shortcut { transition: none; } }
.kabar .quiet-btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; gap: 8px; }
.track-tags { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.track-tags .chip { flex: none; }

/* Penyimpanan di HP: rincian seperti "Kelola penyimpanan" WhatsApp */
.storage-breakdown { display: flex; flex-direction: column; gap: 12px; }
.storage-bar { display: flex; gap: 3px; height: 12px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.storage-bar .seg { display: block; height: 100%; border-radius: 3px; }
.storage-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.storage-legend li { display: flex; align-items: center; gap: 10px; }
.storage-legend .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.storage-legend .size { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seg-teks { background: #1F4D45; }
.seg-chat { background: #D9472B; }
.seg-media { background: #E3A33A; }
.seg-lain { background: #B9C0BB; }

/* ------------------------------------------------------------ Pasang di layar utama */
.install-appicon { display: inline-block; flex: none; border-radius: 24%; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(31, 77, 69, .7); }
.install-appicon svg { display: block; }
.install-card {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center;
  padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: #FBF6EC; border: 1px solid #EFE2C8;
}
.install-card[hidden] { display: none; }
.install-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.install-card-text strong { font: 700 1rem var(--display); }
.install-card-text span { font-size: 0.86rem; color: var(--ink-3); }
.install-card-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.install-card-actions .btn { min-width: 120px; background: var(--green); border-color: var(--green); }
.install-guide { display: flex; flex-direction: column; gap: 14px; }
.install-lead { margin: 0; font-size: 0.98rem; }
.install-quick, .install-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 0; }
.install-go { min-height: 54px; font-size: 1.05rem; background: var(--green); border-color: var(--green); }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.install-step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.install-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #FFF; font-weight: 800; }
.install-step-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.install-step-body strong { font-size: 1rem; }
.install-step-body p { margin: 0; font-size: 0.9rem; color: var(--ink-3); }
.ig-safari { border-radius: 14px; background: #F2F2F5; border: 1px solid #E1E1E6; padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.ig-url { background: #FFF; border-radius: 9px; padding: 6px 10px; font-size: 0.8rem; color: #555; text-align: center; }
.ig-safari-icons { display: flex; justify-content: space-between; color: #1E6FD9; padding: 0 4px; }
.ig-safari-icons span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; }
.ig-hot { position: relative; background: #FFF3C8; outline: 2.5px solid #E3A33A; outline-offset: 1px; animation: ig-pulse 1.6s ease-in-out infinite; }
@keyframes ig-pulse { 0%, 100% { outline-color: #E3A33A; } 50% { outline-color: rgba(227, 163, 58, .25); } }
.ig-sheet { border-radius: 14px; background: #FFF; border: 1px solid var(--line); overflow: hidden; max-width: 300px; }
.ig-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 0.88rem; border-top: 1px solid var(--line); }
.ig-row:first-child { border-top: none; }
.ig-row.ig-hot { font-weight: 700; outline-offset: -3px; border-radius: 10px; }
.ig-home { display: grid; grid-template-columns: repeat(4, 44px); gap: 10px 14px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #3B6E8F, #7B5C8F 60%, #C9837A); width: max-content; }
.ig-blank { width: 44px; height: 44px; border-radius: 11px; background: rgba(255, 255, 255, .25); }
.ig-app { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #FFF; font-size: 0.62rem; font-weight: 600; }
.install-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; color: var(--green); font-weight: 600; }
.install-screen .card { margin-top: 4px; }
.install-share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.install-share-actions .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .ig-hot { animation: none; } }

/* ---------- Toko: tingkat kelangkaan ---------- */
.tier-tag { position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 0.66rem; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 2px 8px; color: #FFFFFF; }
.tier-biasa { background: #6B7C74; }
.tier-langka { background: #2F6FD0; }
.tier-epik { background: linear-gradient(90deg, #7A2BFF, #C13FD6); }
.tier-legendaris { background: linear-gradient(90deg, #E2902B, #F2C94C, #E2902B); background-size: 200% 100%; color: #3A2400; animation: tier-shine 2.4s linear infinite; }
@keyframes tier-shine { to { background-position: 200% 0; } }

/* ---------- 20 bingkai baru: Biasa → Langka → Epik → Legendaris ----------
   Lapisan: .fr-ring = cincin utama (pita 4px); ::before = lapisan luar/belakang; ::after = hiasan depan / orbit. */
.avatar-frame::before { pointer-events: none; }
.fr-band { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); }
@keyframes fr-flicker { 0% { box-shadow: 0 -2px 8px 1px rgba(255,120,30,.55), 0 0 3px rgba(255,220,90,.6); } 50% { box-shadow: 0 -6px 14px 3px rgba(255,80,20,.6), 0 0 6px rgba(255,200,60,.7); } 100% { box-shadow: 0 -3px 10px 2px rgba(255,150,40,.5), 0 0 4px rgba(255,230,120,.6); } }
@keyframes fr-flame { from { transform: scaleY(.85) translateY(6%); opacity: .75; } to { transform: scaleY(1.15) translateY(-4%); opacity: 1; } }
@keyframes fr-twinkle { from { opacity: .35; transform: scale(.7) rotate(0deg); } to { opacity: 1; transform: scale(1.1) rotate(45deg); } }
@keyframes fr-rock { from { transform: rotate(-25deg); } to { transform: rotate(25deg); } }
@keyframes fr-hue { to { filter: hue-rotate(360deg); } }
@keyframes fr-flash { 0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(255,228,90,0); } 88% { box-shadow: 0 0 16px 5px rgba(255,236,120,.95); } 90% { box-shadow: 0 0 2px 0 rgba(255,228,90,.2); } 93% { box-shadow: 0 0 20px 6px rgba(190,150,255,.95); } }
@keyframes fr-pulse-red { from { box-shadow: 0 0 6px 1px rgba(255,60,20,.45); } to { box-shadow: 0 0 18px 5px rgba(255,140,30,.75); } }
@keyframes fr-pulse-gold { from { box-shadow: 0 0 8px 1px rgba(242,201,76,.5); } to { box-shadow: 0 0 22px 6px rgba(255,246,201,.85); } }
@keyframes fr-aura { from { transform: scale(.94); opacity: .55; } to { transform: scale(1.12); opacity: 1; } }
@keyframes fr-shock { from { transform: scale(1); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
@keyframes fr-glint { 0%, 70%, 100% { filter: brightness(1); } 80% { filter: brightness(1.6) drop-shadow(0 0 4px #FFF6C9); } }

/* Biasa */
.fr-api .fr-ring { background: conic-gradient(#FF3B1F, #FF9A1F, #FFE15A, #FF6A1F, #FF3B1F); animation: ring-spin 2.2s linear infinite; }
.fr-api::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: fr-flicker .9s ease-in-out infinite alternate; }
.fr-api::before { content: ''; position: absolute; left: 12%; right: 12%; top: -22%; height: 45%; border-radius: 50% 50% 40% 40%; z-index: 0; filter: blur(1.5px);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,226,90,.95), rgba(255,110,30,.75) 45%, transparent 72%); transform-origin: 50% 100%; animation: fr-flame .55s ease-in-out infinite alternate; }
.fr-es .fr-ring { background: conic-gradient(#E8F7FF, #9FD8FF, #FFFFFF, #6EC1F0, #E8F7FF); animation: ring-spin 9s linear infinite; }
.fr-es::after { content: ''; position: absolute; right: -2px; top: 2px; width: 26%; height: 26%; max-width: 16px; max-height: 16px; z-index: 2; pointer-events: none; background: #FFFFFF;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px #9FD8FF); animation: fr-twinkle 1.3s ease-in-out infinite alternate; }
.fr-laut .fr-ring { background: repeating-conic-gradient(#1E6FB8 0 10deg, #4FB3E8 10deg 20deg, #BFE9FF 20deg 24deg); animation: fr-rock 2.6s ease-in-out infinite alternate; }
.fr-sakura .fr-ring { background: repeating-conic-gradient(#F9B8CF 0 10deg, #FFFFFF 10deg 15deg, #F27BA6 15deg 22.5deg); animation: ring-spin 16s linear infinite; }
.fr-sakura::after { content: ''; position: absolute; left: 50%; top: -8px; width: 12px; height: 12px; margin-left: -6px; z-index: 2; pointer-events: none; background: #F9A8C6;
  border-radius: 0 100% 0 100%; transform-origin: 50% calc(8px + var(--sz, 44px) / 2); animation: orbit 6s linear infinite; }
.fr-kopi .fr-ring { background: conic-gradient(#5B3418, #C8A27A, #F3E3CC, #8B5A2B, #5B3418); animation: ring-spin 12s linear infinite; }

/* Langka */
.fr-petir .fr-ring { background: conic-gradient(#2B1B5A, #7A4DFF, #FFE45A, #7A4DFF, #2B1B5A); animation: ring-spin 3s linear infinite; }
.fr-petir::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: fr-flash 2.6s linear infinite; }
.fr-galaksi .fr-ring { background: conic-gradient(#0B0A2A, #3B2A8A, #C04BD6, #3B6BDB, #0B0A2A); animation: ring-spin 10s linear infinite; }
.fr-galaksi::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 18% 14%, #FFF 0 1.2px, transparent 2px), radial-gradient(circle at 86% 26%, #FFF 0 1px, transparent 1.8px), radial-gradient(circle at 74% 92%, #E7D6FF 0 1.5px, transparent 2.4px), radial-gradient(circle at 8% 72%, #FFF 0 1px, transparent 1.8px), radial-gradient(circle at 50% 2%, #CFE0FF 0 1.2px, transparent 2px);
  animation: ring-spin 24s linear infinite, fr-twinkle 1.6s ease-in-out infinite alternate; }
.fr-batik .fr-ring { background: repeating-conic-gradient(#5A3518 0 8deg, #C8902E 8deg 12deg, #F3D9A4 12deg 16deg, #5A3518 16deg 22.5deg); animation: ring-spin 30s linear infinite; }
.fr-permen .fr-ring { background: repeating-conic-gradient(#FF4F8B 0 15deg, #FFFFFF 15deg 30deg); animation: ring-spin 1.6s linear infinite; }
.fr-aurora .fr-ring { background: conic-gradient(#2EE6A8, #2EC4E6, #8E5BFF, #2EE6A8); animation: ring-spin 6s linear infinite, fr-hue 5s linear infinite; }
.fr-aurora::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 12px 2px rgba(46,230,168,.45); animation: fr-hue 5s linear infinite; }

/* Epik */
.fr-naga .fr-ring { background: conic-gradient(#8B0000, #FF3B1F, #FFD24A, #8B0000, #FF6A00, #FFD24A, #8B0000); animation: ring-spin 2.4s linear infinite; }
.fr-naga::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; animation: fr-pulse-red 1.1s ease-in-out infinite alternate; }
.fr-naga::after { content: ''; position: absolute; left: 50%; top: -10px; width: 16px; height: 16px; margin-left: -8px; z-index: 2; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #FFF7C2 0 18%, #FFC23A 35%, #FF4A12 70%, transparent 72%); filter: drop-shadow(0 0 4px #FF6A00);
  transform-origin: 50% calc(10px + var(--sz, 44px) / 2); animation: orbit 2.4s linear infinite; }
.fr-mentari .fr-ring { background: conic-gradient(#E89B12, #FFD34D, #FFF4B8, #FFD34D, #E89B12); animation: ring-spin 7s linear infinite; }
.fr-mentari::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; z-index: 0; background: repeating-conic-gradient(rgba(255,196,60,.95) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 8px)); animation: ring-spin 14s linear infinite; }
.fr-hologram .fr-ring { background: conic-gradient(#FF9AE6, #9AD8FF, #B9FFCF, #FFF3A0, #FF9AE6); animation: ring-spin 3s linear infinite, fr-hue 4s linear infinite; }
.fr-hologram::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: conic-gradient(transparent 0 78%, rgba(255,255,255,.95) 88%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px)); animation: ring-spin 1.7s linear infinite; }
.fr-plasma .fr-ring { background: conic-gradient(#FF2BD6, #7A2BFF, #2BE4FF, #FF2BD6); animation: ring-spin 2s linear infinite; }
.fr-plasma::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed #2BE4FF; box-shadow: 0 0 10px rgba(43,228,255,.5); animation: ring-spin 5s linear infinite reverse; }
.fr-mahkota .fr-ring { background: conic-gradient(#C99A1E, #F2C94C, #FFF6C9, #F2C94C, #C99A1E); animation: ring-spin 6s linear infinite; }
.fr-mahkota::after { content: ''; position: absolute; left: 50%; top: -30%; width: 56%; height: 32%; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #FFF0A8, #F2C94C 50%, #C99A1E);
  clip-path: polygon(0 100%, 0 30%, 20% 62%, 33% 10%, 50% 55%, 67% 10%, 80% 62%, 100% 30%, 100% 100%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); animation: fr-glint 2.8s ease-in-out infinite; }

/* Legendaris */
.fr-phoenix .fr-ring { background: conic-gradient(#FF2D00, #FF8A00, #FFE066, #FF2D00, #FFB000, #FF2D00); animation: ring-spin 1.8s linear infinite; }
.fr-phoenix::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, transparent 58%, rgba(255,140,0,.65) 64%, rgba(255,60,0,.35) 70%, transparent 76%); animation: fr-aura 1.3s ease-in-out infinite alternate; }
.fr-phoenix::after { content: ''; position: absolute; left: 50%; top: -8px; width: 10px; height: 10px; margin-left: -5px; z-index: 2; pointer-events: none; border-radius: 50%;
  background: #FFF4B0; box-shadow: 0 0 8px 3px #FF8A00; transform-origin: 50% calc(8px + var(--sz, 44px) / 2); animation: orbit 1.5s linear infinite; }
.fr-komet .fr-ring { background: conic-gradient(#0E1A3A, #1E3366, #0E1A3A); }
.fr-komet::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; z-index: 2; pointer-events: none;
  background: conic-gradient(transparent 0 62%, rgba(120,200,255,.15) 72%, rgba(170,225,255,.7) 90%, #FFFFFF 99%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  filter: drop-shadow(0 0 4px #9FD8FF); animation: ring-spin 2s linear infinite; }
.fr-pusaran .fr-ring { background: conic-gradient(#FF2B6A, #FFB02B, #2BFF9C, #2BB6FF, #8E2BFF, #FF2B6A); animation: ring-spin .9s linear infinite; }
.fr-pusaran::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: 0; background: repeating-conic-gradient(#8E2BFF 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: ring-spin 3s linear infinite reverse; }
.fr-pusaran::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; animation: neon-pulse 1.2s ease-in-out infinite alternate; }
.fr-legenda { animation: fr-pulse-gold 1.8s ease-in-out infinite alternate; }
.fr-legenda .fr-ring { background: conic-gradient(#FFF6C9, #F2C94C, #FFFFFF, #C99A1E, #FFF6C9); animation: ring-spin 3s linear infinite; }
.fr-legenda::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: 0; background: repeating-conic-gradient(#F2C94C 0 6deg, transparent 6deg 14deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: ring-spin 8s linear infinite reverse; }
.fr-legenda::after { content: ''; position: absolute; left: 50%; top: -15px; width: 14px; height: 14px; margin-left: -7px; z-index: 2; pointer-events: none; background: #FFFFFF;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 4px #F2C94C);
  transform-origin: 50% calc(15px + var(--sz, 44px) / 2); animation: orbit 3s linear infinite; }
.fr-supernova { animation: fr-pulse-gold 1s ease-in-out infinite alternate; }
.fr-supernova .fr-ring { background: conic-gradient(#FFFFFF, #FFE7A0, #FF9F40, #FF4FD8, #7A5CFF, #FFFFFF); animation: ring-spin 1.5s linear infinite; }
.fr-supernova::before, .fr-supernova::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; border: 3px solid rgba(255,230,160,.95); animation: fr-shock 1.6s ease-out infinite; }
.fr-supernova::after { border-color: rgba(255,79,216,.9); animation-delay: .8s; }

/* Ukuran kecil: hiasan luar dirapatkan */
.avatar-frame.is-small:not(.fr-api)::before { inset: -6px; }
.avatar-frame.is-small.fr-mahkota::after { top: -26%; }
html.reduce-motion .avatar-frame, html.reduce-motion .avatar-frame::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .avatar-frame, .avatar-frame::before { animation: none !important; } }

/* ---------- Hiasan bingkai bergambar (gaya dekorasi avatar) ---------- */
.avatar-frame.has-deco { overflow: visible; }
.deco-art { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; pointer-events: none; z-index: 2; }
.deco-art svg { width: 100%; height: 100%; overflow: visible; display: block; }
.deco-art .dk-spin, .deco-art .dk-spin-slow, .deco-art .dk-spin-rev, .deco-art .dk-spin-fast { transform-box: view-box; transform-origin: 60px 60px; }
.deco-art .dk-spin { animation: ring-spin 6s linear infinite; }
.deco-art .dk-spin-slow { animation: ring-spin 16s linear infinite; }
.deco-art .dk-spin-rev { animation: ring-spin 9s linear infinite reverse; }
.deco-art .dk-spin-fast { animation: ring-spin 2.2s linear infinite; }
.deco-art .dk-flick { transform-box: fill-box; transform-origin: 50% 100%; animation: fr-flame .5s ease-in-out infinite alternate; }
.deco-art .dk-twinkle { transform-box: fill-box; transform-origin: center; animation: fr-twinkle 1.4s ease-in-out infinite alternate; }
.deco-art .dk-glow { animation: dk-glow 1.4s ease-in-out infinite alternate; }
.deco-art .dk-float { transform-box: fill-box; animation: dk-float 2.2s ease-in-out infinite alternate; }
.deco-art .dk-fall { transform-box: fill-box; animation: dk-fall 3.2s linear infinite; }
.deco-art .dk-rise { transform-box: fill-box; animation: dk-rise 2.6s ease-in infinite; }
.deco-art .dk-wave { animation: dk-wave 2.4s ease-in-out infinite alternate; }
.deco-art .dk-flash { animation: dk-flash 2.4s linear infinite; }
.deco-art .dk-hue { animation: fr-hue 5s linear infinite; }
.deco-art .dk-pulse { transform-box: view-box; transform-origin: 60px 60px; animation: dk-pulse 1.4s ease-in-out infinite alternate; }
.deco-art .dk-shock { transform-box: view-box; transform-origin: 60px 60px; animation: dk-shock 1.6s ease-out infinite; }
.deco-art .dk-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: dk-sway 2s ease-in-out infinite alternate; }
.deco-art .dk-flapL { transform-box: view-box; transform-origin: 34px 46px; animation: dk-flap 1.6s ease-in-out infinite alternate; }
.deco-art .dk-spin.dk-hue, .deco-art .dk-float.dk-hue, .deco-art .dk-wave.dk-hue { animation-name: ring-spin, fr-hue; }
.deco-art .dk-wave.dk-hue { animation: dk-wave 2.4s ease-in-out infinite alternate, fr-hue 5s linear infinite; }
.deco-art .dk-float.dk-hue { animation: dk-float 2.2s ease-in-out infinite alternate, fr-hue 5s linear infinite; }
.deco-art .dk-spin.dk-hue { animation: ring-spin 6s linear infinite, fr-hue 5s linear infinite; }
.deco-art .dk-float.dk-glow { animation: dk-float 2.2s ease-in-out infinite alternate, dk-glow 1.4s ease-in-out infinite alternate; }
@keyframes dk-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes dk-float { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes dk-fall { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(26px) rotate(160deg); opacity: 0; } }
@keyframes dk-rise { 0% { transform: translateY(6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes dk-wave { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes dk-flash { 0%, 80%, 100% { opacity: 0; } 82%, 88% { opacity: 1; } 85% { opacity: .2; } }
@keyframes dk-pulse { from { transform: scale(.96); opacity: .4; } to { transform: scale(1.05); opacity: .9; } }
@keyframes dk-shock { from { transform: scale(1); opacity: .95; } to { transform: scale(1.38); opacity: 0; } }
@keyframes dk-sway { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes dk-flap { from { transform: rotate(0deg); } to { transform: rotate(-9deg); } }
html.reduce-motion .deco-art * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .deco-art * { animation: none !important; } }

/* Cincin sederhana untuk foto kecil (hiasan lucu) */
.fr-kucing .fr-ring { background: #3A3A3A; }
.fr-kelinci .fr-ring { background: conic-gradient(#FFFFFF, #F9B8CF, #FFFFFF); }
.fr-tanduk .fr-ring { background: conic-gradient(#8B0F1F, #C8102E, #8B0F1F); }
.fr-malaikat .fr-ring { background: conic-gradient(#FFFFFF, #FFE58A, #FFFFFF); animation: ring-spin 6s linear infinite; }
.fr-headphone .fr-ring { background: conic-gradient(#2B2D42 0 50%, #D9472B 50%); }
.fr-ultah .fr-ring { background: repeating-conic-gradient(#7FB6E8 0 20deg, #F2B544 20deg 40deg, #D9472B 40deg 60deg); animation: ring-spin 8s linear infinite; }
.fr-mahkota_bunga .fr-ring { background: repeating-conic-gradient(#F9B8CF 0 15deg, #7DB862 15deg 30deg); }
.face-avatar .face-badge, .face-avatar .face-status { z-index: 3; }

/* ---------- Pengumuman pengelola (di Kabar) ---------- */
.ann-box { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.ann-box:empty { display: none; }
.ann-card { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 44px 14px 14px; border-radius: var(--radius);
  background: #E8EEF6; border: 1px solid #C9D7EA; color: var(--ink); }
.ann-card.tone-penting { background: #FDF1D8; border-color: #EBD29A; }
.ann-card.tone-peringatan { background: var(--accent-soft); border-color: #F0B7A8; }
.ann-icon { width: 36px; height: 36px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.75); color: #2F5DA8; }
.tone-penting .ann-icon { color: #9A6A0C; }
.tone-peringatan .ann-icon { color: var(--accent); }
.ann-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ann-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ann-text strong { font-size: 1rem; }
.ann-text p { margin: 2px 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.ann-close { position: absolute; top: 6px; right: 6px; }

/* ---------- Ruang Kendali ---------- */
.kendali .kd-body { padding-bottom: 24px; }
.kd-gate { max-width: 460px; margin: 8px auto 0; }
.kd-gate h2 { margin: 0; font-family: var(--display); font-size: 1.4rem; }
.kd-gate-icon { width: 56px; height: 56px; border-radius: 18px; background: var(--ok-bg); color: var(--green); display: flex; align-items: center; justify-content: center; }
.form-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--danger); font-size: 0.9rem; line-height: 1.4; }
.kd-privacy { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--green); }
.kd-privacy svg { flex: none; margin-top: 2px; }
.kd-privacy p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: var(--ink-2); }
.kd-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kd-tabs::-webkit-scrollbar { display: none; }
.kd-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.kd-tab.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.kd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .kd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kd-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); min-width: 0; }
.kd-stat strong { font-family: var(--display); font-size: 1.7rem; line-height: 1.1; }
.kd-stat-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-3); }
.kd-stat.is-alert { background: var(--accent-soft); border-color: #F0B7A8; }
.kd-stat.is-alert strong { color: var(--accent); }
.kd-stat.is-warn { background: #FDF1D8; border-color: #EBD29A; }
.kd-stat.is-ok strong { color: var(--ok); }
.kd-bars { margin: 0; }
.kd-bars-row { display: flex; align-items: flex-end; gap: 3px; height: 96px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.kd-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.kd-bar i { display: block; width: 100%; height: calc(var(--v) * 100%); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--green); opacity: .85; }
.kd-bars figcaption { margin-top: 6px; }
.kd-row { display: flex; align-items: center; gap: 12px; }
.kd-row .grow { min-width: 0; }
.kd-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.kd-facts div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.kd-facts dt { font-size: 0.78rem; color: var(--ink-3); font-weight: 600; }
.kd-facts dd { margin: 2px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.kd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-empty { padding: 16px 4px; }
.kd-member { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.kd-member:hover { border-color: var(--line-2); }
.kd-member-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kd-member-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kd-badges:empty { display: none; }
.kd-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.kd-badge.is-green { background: var(--ok-bg); color: var(--ok); }
.kd-badge.is-warn { background: #FDF1D8; color: #8A5A00; }
.kd-badge.is-red { background: var(--accent-soft); color: var(--danger); }
.kd-member-head { display: flex; gap: 14px; align-items: center; }
.kd-member-head strong { font-size: 1.15rem; }
.kd-alert { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 0.9rem; line-height: 1.4; }
.kd-alert.is-red { background: var(--accent-soft); color: var(--danger); }
.kd-alert.is-warn { background: #FDF1D8; color: #6E4A00; }
.kd-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kd-action { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--line-2);
  background: var(--surface); font: inherit; font-weight: 600; font-size: 0.88rem; color: var(--ink); text-align: left; cursor: pointer; }
.kd-action svg { flex: none; color: var(--green); }
.kd-action.is-danger { color: var(--danger); }
.kd-action.is-danger svg { color: var(--danger); }
.kd-people { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-person { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--surface-2); font-size: 0.82rem; font-weight: 600; }
.kd-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kd-log li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; overflow-wrap: anywhere; }
.kd-log li:last-child { border-bottom: 0; }
.kd-log li.is-bad strong { color: var(--danger); }
.kd-report .kd-caption { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.kd-media { display: block; width: 100%; max-height: 360px; object-fit: contain; border-radius: 14px; background: #111; }
.kd-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kd-reasons li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.kd-tree, .kd-tree-sub { list-style: none; margin: 0; padding: 0; }
.kd-tree-sub { margin-left: 14px; padding-left: 12px; border-left: 2px solid var(--line); }
.kd-tree-node { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.kd-tree-node .small { word-break: break-word; }
.kd-codes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kd-codes li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.kd-codes li:last-child { border-bottom: 0; }
.kd-codes code { font-weight: 700; letter-spacing: .04em; }
.kd-ann { padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid #2F5DA8; }
.kd-ann.tone-penting { border-left-color: #C9871A; }
.kd-ann.tone-peringatan { border-left-color: var(--accent); }
.kd-ann p { margin: 6px 0 0; overflow-wrap: anywhere; }
.kd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); }
.kd-checks li svg { flex: none; margin-top: 2px; color: var(--ok); }
.kd-checks li.is-bad { background: #FDF1D8; }
.kd-checks li.is-bad svg { color: #9A6A0C; }
.kd-details summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.kd-details form { margin-top: 10px; }
.kendali .field select, .kd-member-sheet select, .sheet .field select { min-height: 46px; border-radius: 12px; border: 1px solid var(--line-2); padding: 0 12px; background: var(--surface); color: var(--ink); }
.sheet .field textarea, .sheet .field input { width: 100%; box-sizing: border-box; }
@media (max-width: 380px) { .kd-actions, .kd-facts { grid-template-columns: 1fr; } }

/* Game Legenda Sisik Naga: layar penuh, menutupi bilah navigasi */
.game-entry { color: #6B4FA0; }
.game-screen { position: fixed; inset: 0; z-index: 60; background: #07060f; display: flex; flex-direction: column; }
.game-screen .game-bar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 4px) 8px 4px; background: #07060f; color: #cfc8e8; }
.game-screen .game-bar .icon-btn { color: #cfc8e8; }
.game-screen .game-bar span { font-size: 14px; opacity: .8; }
.game-screen iframe { flex: 1; width: 100%; border: 0; background: #07060f; }

/* ================================================================ v10: stiker, album, editor foto, suka status */
.attach-preview { flex-direction: column; align-items: stretch; gap: 6px; }
.attach-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; }
.attach-strip::-webkit-scrollbar { display: none; }
.attach-item { position: relative; flex: none; }
.attach-thumb { display: block; padding: 0; border: none; background: none; cursor: pointer; border-radius: 12px; overflow: hidden; position: relative; }
.attach-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.attach-edit { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; }
.attach-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); color: var(--on-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.attach-more { flex: none; width: 64px; height: 64px; border-radius: 12px; border: 1.5px dashed var(--line-2); background: var(--surface-2); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.attach-foot { display: flex; align-items: center; gap: 8px; }

.sticker-btn.is-on { color: var(--accent); background: var(--accent-soft); }
.sticker-panel { border-top: 1px solid var(--line); background: var(--surface); }
.sticker-panel[hidden] { display: none; }
.sticker-tabs { display: flex; gap: 4px; padding: 6px 10px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.sticker-tab { flex: none; width: 44px; height: 40px; border-radius: 10px; border: none; background: none; display: grid; place-items: center; cursor: pointer; color: var(--ink-3); }
.sticker-tab img { width: 30px; height: 30px; }
.sticker-tab.is-on { background: var(--surface-2); color: var(--ink); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; padding: 8px 10px 10px; max-height: 236px; overflow-y: auto; }
.sticker-pick { border: none; background: none; padding: 4px; border-radius: 14px; cursor: pointer; transition: transform .12s, background .12s; }
.sticker-pick:hover, .sticker-pick:focus-visible { background: var(--surface-2); transform: scale(1.06); }
.sticker-pick img { width: 100%; aspect-ratio: 1; display: block; }

.msg-bubble.is-sticker { background: none !important; padding: 0; box-shadow: none; border: none; }
.msg-sticker-img { width: 132px; height: 132px; display: block; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.msg-bubble.is-sticker .msg-time { background: var(--surface); color: var(--ink-3); border-radius: 99px; padding: 1px 7px; align-self: flex-end; }
.msg.mine .msg-bubble.is-sticker { color: var(--ink-3); }

.msg-album { display: grid; gap: 3px; margin: 0 -6px 2px; border-radius: 14px; overflow: hidden; width: min(268px, 66vw); }
.msg-album.n2 { grid-template-columns: 1fr 1fr; }
.msg-album.n3 { grid-template-columns: 1fr 1fr; }
.msg-album.n3 .msg-album-cell:first-child { grid-column: span 2; aspect-ratio: 2 / 1; }
.msg-album.n4 { grid-template-columns: 1fr 1fr; }
.msg-album-cell { position: relative; border: none; padding: 0; background: var(--surface-2); cursor: zoom-in; aspect-ratio: 1; overflow: hidden; }
.msg-album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-album-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); }
.msg-album-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .5); color: #fff; font: 800 1.5rem var(--display); }

.photo-view { position: relative; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.photo-nav.prev { left: 8px; }
.photo-nav.next { right: 8px; }
.photo-count { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .5); color: #fff; font-size: .78rem; font-weight: 700; border-radius: 99px; padding: 2px 10px; }
.photo-count:empty { display: none; }

.like-btn svg { transition: transform .2s; }
.like-btn.is-active { color: #E0354F; border-color: color-mix(in srgb, #E0354F 40%, var(--line)); background: color-mix(in srgb, #E0354F 10%, var(--surface)); }
.like-btn.pop svg { animation: heart-pop .45s ease-out; }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.like-line { color: #C42E46; }
html[data-theme="dark"] .like-line { color: #FF8A9C; }

/* Editor foto */
.pe-root { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; background: #0D0F0E; color: #F2F4F2; opacity: 0; transition: opacity .18s;
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.pe-root.open { opacity: 1; }
.pe-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; }
.pe-top strong { font-family: var(--display); font-size: 1.05rem; }
.pe-cancel { color: #F2F4F2; }
.pe-stage { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px; overflow: hidden; touch-action: none; }
.pe-canvas { max-width: 100%; max-height: 100%; object-fit: contain; display: block; border-radius: 4px; }
.pe-crop { position: absolute; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); border: 2px solid #fff; cursor: move; touch-action: none; }
.pe-crop[hidden] { display: none; }
.pe-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -1px -1px; }
.pe-h { position: absolute; width: 26px; height: 26px; border: 4px solid #fff; }
.pe-h.tl { left: -4px; top: -4px; border-right: none; border-bottom: none; cursor: nwse-resize; }
.pe-h.tr { right: -4px; top: -4px; border-left: none; border-bottom: none; cursor: nesw-resize; }
.pe-h.bl { left: -4px; bottom: -4px; border-right: none; border-top: none; cursor: nesw-resize; }
.pe-h.br { right: -4px; bottom: -4px; border-left: none; border-top: none; cursor: nwse-resize; }
.pe-bottom { background: #161917; border-top: 1px solid #262B28; }
.pe-panel { min-height: 118px; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.pe-tabs { display: flex; justify-content: space-around; padding: 4px 8px 8px; }
.pe-tab { display: flex; flex-direction: column; align-items: center; gap: 2px; border: none; background: none; color: #9AA59F; font: 600 .78rem var(--font); padding: 6px 18px; border-radius: 12px; cursor: pointer; }
.pe-tab.is-on { color: #fff; background: #242926; }
.pe-chips { display: flex; gap: 6px; overflow-x: auto; }
.pe-chips .chip { background: #242926; color: #E6EAE7; border-color: #343A37; }
.pe-chips .chip.is-active { background: #fff; color: #111; border-color: #fff; }
.pe-acts { display: flex; gap: 8px; justify-content: center; }
.pe-act { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: #242926; color: #E6EAE7; font: 600 .76rem var(--font); padding: 8px 16px; border-radius: 12px; cursor: pointer; }
.pe-sliders { display: grid; gap: 6px; }
.pe-slider { display: grid; grid-template-columns: 86px 1fr 34px; align-items: center; gap: 10px; font-size: .82rem; }
.pe-slider input { width: 100%; accent-color: #fff; }
.pe-val { text-align: right; font-variant-numeric: tabular-nums; color: #9AA59F; }
.pe-filters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pe-filter { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; color: #C9D0CB; font: 600 .74rem var(--font); cursor: pointer; padding: 0; }
.pe-filter canvas { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid transparent; }
.pe-filter.is-on { color: #fff; }
.pe-filter.is-on canvas { border-color: #fff; }

/* Pilihan tema & bahasa */
.theme-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.theme-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: 600 .88rem var(--font); }
.theme-pick.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-swatch { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; display: grid; grid-template-rows: 22% 1fr 18%; border: 1px solid var(--line); }
.theme-swatch i { display: block; }
.lang-pick .flag { font-size: 1.4rem; }

/* Menu ikon di profil */
.icon-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 8px 10px; margin-bottom: 14px; box-shadow: var(--shadow); }
.icon-menu.is-friend { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.im-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border: none; background: none; color: var(--ink); text-decoration: none; cursor: pointer; border-radius: 14px; font: inherit; min-width: 0; }
.im-tile:hover, .im-tile:focus-visible { background: var(--surface-2); }
.im-ic { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--tone-bg); color: var(--tone-ink); transition: transform .15s; }
.im-tile:active .im-ic { transform: scale(.92); }
.im-ic .badge { position: absolute; top: -4px; right: -6px; }
.im-label { font-size: .74rem; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-tile.tone-green { --tone-bg: #E3F1EA; --tone-ink: #1F6B52; }
.im-tile.tone-blue { --tone-bg: #E2EDF8; --tone-ink: #2C6CB0; }
.im-tile.tone-clay { --tone-bg: #FBE7E2; --tone-ink: #B83A20; }
.im-tile.tone-violet { --tone-bg: #EEE6F8; --tone-ink: #6B4FA0; }
.im-tile.tone-gold { --tone-bg: #FBF0D6; --tone-ink: #9A6A0B; }
.im-tile.tone-ink { --tone-bg: var(--surface-2); --tone-ink: var(--ink); }
html[data-theme="dark"] .im-tile.tone-green { --tone-bg: #17352B; --tone-ink: #7FD6AE; }
html[data-theme="dark"] .im-tile.tone-blue { --tone-bg: #182A3D; --tone-ink: #8EC0F2; }
html[data-theme="dark"] .im-tile.tone-clay { --tone-bg: #3A211B; --tone-ink: #FF9C82; }
html[data-theme="dark"] .im-tile.tone-violet { --tone-bg: #2B2240; --tone-ink: #C3A9F2; }
html[data-theme="dark"] .im-tile.tone-gold { --tone-bg: #352B14; --tone-ink: #F2C760; }
@media (min-width: 560px) { .icon-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pe-cancel { background: transparent; border: 1.5px solid #3A403D; color: #F2F4F2; }
.chat-composer .icon-btn, .chat-composer .attach-btn { flex: none; }
@media (min-width: 760px) { html[data-theme="dark"] body { background: #0B0E0D; } }
html[data-theme="dark"] .like-line { color: #FF8A9B; }

/* ---- Profil v2: angka ringkas, tombol, dan deret tempat ---- */
.pf-stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 16px -4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pf-stats.n1 { --n: 1; } .pf-stats.n2 { --n: 2; } .pf-stats.n3 { --n: 3; } .pf-stats.n4 { --n: 4; }
.pf-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 11px 4px; color: var(--ink); text-decoration: none; min-width: 0; }
a.pf-stat:visited { color: var(--ink); }
a.pf-stat:active { background: var(--surface-2); }
.pf-stat strong { font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pf-stats.n1 .pf-stat { flex-direction: row; justify-content: center; gap: 6px; }
.profile-hero .profile-actions { margin: 14px 0 0; }
.profile-hero .profile-actions .btn { flex: 1; min-width: 0; justify-content: center; }
.profile-actions .pf-icon-btn { flex: 0 0 44px !important; padding: 0; }
.pf-places { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px 6px; scrollbar-width: none; }
.pf-places::-webkit-scrollbar { display: none; }
.pf-place { flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); }
a.pf-place:visited { color: var(--ink-2); }
.pf-place-ic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); transition: transform .15s; }
.pf-place:active .pf-place-ic { transform: scale(.93); }
.pf-place-label { font-size: 0.75rem; font-weight: 600; }

/* ---- Pengaturan v2: daftar berkelompok ala aplikasi bawaan HP ---- */
.lingkar-settings .settings-search { margin-bottom: 14px; }
.set-me { display: flex; align-items: center; gap: 14px; padding: 14px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; color: var(--ink); text-decoration: none; margin-bottom: 22px; }
a.set-me:visited { color: var(--ink); }
.set-me:active { background: var(--surface-2); }
.set-me-name { font-size: 1.08rem; font-weight: 700; }
.set-group { margin-bottom: 22px; }
.set-group-title { font-family: var(--font); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 8px 14px; }
.set-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 13px; min-height: 52px; padding: 0 12px 0 14px; color: var(--ink); text-decoration: none; position: relative; }
a.set-row:visited { color: var(--ink); }
.set-row + .set-row::before { content: ''; position: absolute; top: 0; left: 57px; right: 0; border-top: 1px solid var(--line); }
.set-row:active, .set-row:hover { background: var(--surface-2); }
.set-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--set-c, #6B7672); }
.set-row.tone-green .set-ic { --set-c: #2F9E6E; }
.set-row.tone-blue .set-ic { --set-c: #3B82D6; }
.set-row.tone-violet .set-ic { --set-c: #8B5CF6; }
.set-row.tone-gold .set-ic { --set-c: #E0A100; }
.set-row.tone-clay .set-ic { --set-c: #EA6A3A; }
.set-row.tone-red .set-ic { --set-c: #E5484D; }
.set-row.tone-ink .set-ic { --set-c: #7A8580; }
.set-label { flex: 1; min-width: 0; font-weight: 500; font-size: 0.97rem; padding: 14px 0; line-height: 1.25; }
.set-value { flex: none; max-width: 42%; color: var(--ink-3); font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-chev { flex: none; color: var(--ink-3); opacity: .7; display: inline-flex; }
.lingkar-settings .settings-exit { display: flex; flex-direction: column; gap: 10px; }
.lingkar-settings .settings-exit .btn { width: 100%; justify-content: center; }

/* ---- Pilihan game ---- */
.game-picker > .muted { margin: 0 0 14px; }
.game-card { display: block; border-radius: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; margin-bottom: 14px; }
a.game-card:visited { color: var(--ink); }
.game-card:active { transform: scale(.99); }
.game-card-art { display: block; height: 150px; image-rendering: pixelated; background-size: cover; background-position: center; }
.art-desa .game-card-art { background-image: url(media/games/desa.png); background-color: #6cba48; }
.art-naga .game-card-art { background-image: url(media/games/naga.png); background-color: #120f26; }
.game-card-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.game-card-tag { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.game-card-body strong { font-size: 1.2rem; font-family: var(--display); }
.game-card-blurb { color: var(--ink-2); font-size: .9rem; line-height: 1.45; }
.game-card-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 700; color: var(--accent); }
.game-screen.game-desa, .game-screen.game-desa .game-bar, .game-screen.game-desa iframe { background: #1d2b1e; }
.game-screen.game-desa .game-bar { color: #f4ecd8; }
.game-screen.game-desa .game-bar .icon-btn { color: #f4ecd8; }

/* Dibuat oleh scripts/dark-css.py: panel terang di tema gelap. Jangan diubah langsung. */
html[data-theme="dark"] .demo-note { background: #3F3418; color: #EED9A0; }
html[data-theme="dark"] .quiet-btn.is-on { background: #1E2421; color: #B7BAD7; border-color: #36403C; }
html[data-theme="dark"] .kind-dot.kind-wake { background: #3F3218; }
html[data-theme="dark"] .kind-dot.kind-sleep, html[data-theme="dark"] .kind-dot.kind-quiet { background: #1E2421; color: #BDC0D1; }
html[data-theme="dark"] .kind-dot.kind-place { background: #18293F; color: #A7BFE6; }
html[data-theme="dark"] .foot-btn.is-active { color: #EEADA0; }
html[data-theme="dark"] .kind-opt.is-active { color: #EEADA0; }
html[data-theme="dark"] .notif.is-unread { background: #3F2418; }
html[data-theme="dark"] .switch-row input::after { background: #1E2421; }
html[data-theme="dark"] .msg-moment-icon { color: #EEADA0; }
html[data-theme="dark"] .policy-note { background: #3F3318; color: #ECD6A1; }
html[data-theme="dark"] .partner-status.is-quiet { background: #1E2421; }
html[data-theme="dark"] .plus-tag { background: linear-gradient(120deg, #4E411D, #E3B65A); color: #EECFA0; }
html[data-theme="dark"] .plus-hero { background: linear-gradient(160deg, #3F3418, var(--surface) 55%); }
html[data-theme="dark"] .audience-pill { color: #EEADA0; }
html[data-theme="dark"] .media-drop { background: linear-gradient(160deg, #1E2421 0%, #1E2421 100%); }
html[data-theme="dark"] .tool-chip.is-on { color: #EEADA0; }
html[data-theme="dark"] .cafe-awning { background: repeating-linear-gradient(90deg, var(--accent) 0 26px, #3F2E18 26px 52px); }
html[data-theme="dark"] .cafe-awning::after { background: radial-gradient(circle at 13px 0, var(--accent) 12px, transparent 13px) 0 0 / 52px 12px repeat-x,
              radial-gradient(circle at 39px 0, #3F2E18 12px, transparent 13px) 0 0 / 52px 12px repeat-x; }
html[data-theme="dark"] .cafe-shop { background: #3F2F18; }
html[data-theme="dark"] .drawer-bar { background: var(--surface-2, #1E2421); }
html[data-theme="dark"] .cafe-tips p { background: #3F3118; }
html[data-theme="dark"] .tag-x2 { color: #EEADA0; }
html[data-theme="dark"] .visit-item { background: var(--surface-2, #1E2421); }
html[data-theme="dark"] .levelup-list { background: #3F3118; }
html[data-theme="dark"] .streak-dots i.is-on { background: #4E411D; }
html[data-theme="dark"] .owned-tag { background: #253C1A; color: #AFDFD6; }
html[data-theme="dark"] .limited-tag { background: #4E411D; color: #EECCA0; }
html[data-theme="dark"] .owned-note { background: #2C183F; color: #C9AAE4; }
html[data-theme="dark"] .stock-fresh .bar { background: #36402C; }
html[data-theme="dark"] .stock-soon { background: #182D3F; color: #A8C9E6; }
html[data-theme="dark"] .pips i { background: #36402C; }
html[data-theme="dark"] .up-ico { background: #18293F center / 24px no-repeat; }
html[data-theme="dark"] .up-cold { background: #1A3C3B; }
html[data-theme="dark"] .city-row.is-on { background: #182D3F; }
html[data-theme="dark"] .order-chip { background: #3F2018; color: #EDB5A1; }
html[data-theme="dark"] .order-card { background: #3F3018; }
html[data-theme="dark"] .order-card.is-on { background: #1E2421; }
html[data-theme="dark"] .load-bar { background: #36402C; }
html[data-theme="dark"] .planner-sum { background: #182D3F; }
html[data-theme="dark"] .ring-card { background: radial-gradient(120% 90% at 50% 0%, #1E2421 0%, #1E2421 60%, #1E2421 100%); }
html[data-theme="dark"] .install-card { background: #3F3218; }
html[data-theme="dark"] .ig-safari { background: #1E2421; }
html[data-theme="dark"] .ig-url { background: #1E2421; color: #C7C7C7; }
html[data-theme="dark"] .ig-hot { background: #4E431D; }
html[data-theme="dark"] .ig-sheet { background: #1E2421; }
html[data-theme="dark"] .tier-legendaris { background: linear-gradient(90deg, #E2902B, #4E421D, #E2902B); color: #EED0A0; }
html[data-theme="dark"] .ann-card { background: #1E2421; }
html[data-theme="dark"] .ann-card.tone-penting { background: #3F3218; border-color: #36403C; }
html[data-theme="dark"] .kd-stat.is-warn { background: #3F3218; border-color: #36403C; }
html[data-theme="dark"] .kd-badge.is-warn { background: #3F3218; color: #EED3A0; }
html[data-theme="dark"] .kd-alert.is-warn { background: #3F3218; color: #EED4A0; }
html[data-theme="dark"] .kd-checks li.is-bad { background: #3F3218; }