/* ============================================================================
   Liquid Glass iOS 26 — lapisan tema di atas CSS halaman.
   Dimuat setelah app.css / user.css / admin.css.
   Referensi: /sdcard/Acode/Liquid Glass/index.html

   ── CARA GANTI TEMA ─────────────────────────────────────────────
   Cukup ubah angka --tema di bawah ini:
     1 = hijau LPTECH (default)  → aksen gradasi hijau gelap–terang
     2 = biru Liquid Glass       → warna biru seperti sebelumnya
   Contoh: --tema: 2;
   Simpan file, lalu muat ulang halaman.
   ────────────────────────────────────────────────────────────────
   ========================================================================== */

:root {
  --tema: 1;
  --radius: 20px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

/* ---------- Mode gelap: hijau LPTECH (default) ---------- */
:root {
  color-scheme: dark;
  --bg1: #000000; --bg2: #000000;
  --blob1: #34d399; --blob2: #0b6b4f;
  --text: #f3fbf7; --muted: rgba(240, 255, 248, .65);
  --accent: #34d399; --accent-2: #6ee7b7;
  --on-accent: #04140d;
  --accent-grad: linear-gradient(135deg, #047857, #10b981 55%, #6ee7b7);
  --glow: rgba(16, 185, 129, .35);
  --danger: #ff6961; --warn: #ffb340;
  --glass: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .28);
  --glass-solid: rgba(20, 24, 22, .9);
  --card: rgba(255, 255, 255, .14);
  --field: rgba(255, 255, 255, .1);
  --tint: rgba(16, 120, 80, .35);
  --line: rgba(255, 255, 255, .16);
  --bar: rgba(0, 0, 0, .58);
  --sep: rgba(255, 255, 255, .1);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -1px 0 rgba(255, 255, 255, .08), 0 10px 30px rgba(0, 0, 0, .4);
  --shadow: var(--hl);
}

/* ---------- Mode gelap: biru Liquid Glass ---------- */
html[data-theme="biru"] {
  --bg1: #000000; --bg2: #000000;
  --blob1: #6cb4ff; --blob2: #1b5fc4;
  --text: #ffffff; --muted: rgba(255, 255, 255, .7);
  --accent: #9ccaff; --accent-2: #b7dcff;
  --on-accent: #04122b;
  --accent-grad: linear-gradient(135deg, #2f6fd0, #7fb8ff 60%, #c9e4ff);
  --glow: rgba(127, 184, 255, .35);
  --danger: #ff6961; --warn: #ffb340;
  --glass: rgba(255, 255, 255, .2);
  --glass-hi: rgba(255, 255, 255, .35);
  --glass-solid: rgba(28, 28, 32, .9);
  --card: rgba(255, 255, 255, .18);
  --field: rgba(255, 255, 255, .14);
  --tint: rgba(9, 42, 96, .42);
  --line: rgba(255, 255, 255, .2);
  --bar: rgba(0, 0, 0, .58);
  --sep: rgba(255, 255, 255, .12);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .1), 0 10px 30px rgba(0, 0, 0, .25);
  --shadow: var(--hl);
}

/* ---------- Mode terang: hijau LPTECH (default) ---------- */
html[data-mode="light"] {
  color-scheme: light;
  --bg1: #dff2e8; --bg2: #f7fcf9;
  --blob1: #9fe0c0; --blob2: #63c9a2;
  --text: #10231a; --muted: rgba(10, 45, 30, .6);
  --accent: #0b6b4f; --accent-2: #10b981;
  --on-accent: #ffffff;
  --accent-grad: linear-gradient(135deg, #064e3b, #0b6b4f 50%, #10b981);
  --glow: rgba(11, 107, 79, .3);
  --danger: #c02626; --warn: #a35a00;
  --glass: rgba(255, 255, 255, .5);
  --glass-hi: rgba(255, 255, 255, .75);
  --glass-solid: rgba(255, 255, 255, .94);
  --card: rgba(255, 255, 255, .55);
  --field: rgba(255, 255, 255, .62);
  --tint: rgba(16, 163, 106, .14);
  --line: rgba(12, 70, 45, .16);
  --bar: rgba(255, 255, 255, .62);
  --sep: rgba(0, 0, 0, .08);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 10px 30px rgba(10, 60, 35, .15);
  --shadow: var(--hl);
}

/* ---------- Mode terang: biru Liquid Glass ---------- */
html[data-mode="light"][data-theme="biru"] {
  color-scheme: light;
  --bg1: #dbe7f7; --bg2: #f6f9ff;
  --blob1: #9cc8ff; --blob2: #c9b8ff;
  --text: #1d1d1f; --muted: rgba(0, 0, 0, .55);
  --accent: #0a6cff; --accent-2: #3d8bff;
  --on-accent: #ffffff;
  --accent-grad: linear-gradient(135deg, #0a3d91, #0a6cff 50%, #4a9bff);
  --glow: rgba(10, 108, 255, .3);
  --danger: #d70015; --warn: #b25000;
  --glass: rgba(255, 255, 255, .45);
  --glass-hi: rgba(255, 255, 255, .7);
  --glass-solid: rgba(255, 255, 255, .92);
  --card: rgba(255, 255, 255, .5);
  --field: rgba(255, 255, 255, .55);
  --tint: rgba(10, 108, 255, .12);
  --line: rgba(20, 60, 120, .16);
  --bar: rgba(255, 255, 255, .6);
  --sep: rgba(0, 0, 0, .08);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 10px 30px rgba(20, 60, 120, .15);
  --shadow: var(--hl);
}

/* ---------- Latar: gradient + blob statis (tanpa animasi agar scroll ringan) ---------- */
html {
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  transition: background 1s var(--ease);
}
body {
  position: relative;
  z-index: 0;
  background: transparent;
  color: var(--text);
  transition: color .8s var(--ease);
}
body::before {
  content: "";
  display: none;
  position: fixed;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(circle at 16% 10%, var(--blob1) 0, transparent 38%),
    radial-gradient(circle at 84% 84%, var(--blob2) 0, transparent 40%),
    radial-gradient(circle at 62% 46%, var(--blob1) 0, transparent 30%);
}
html[data-mode="light"] body::before { display: block; }

/* ---------- Permukaan kaca ---------- */
.card, .step, .tpl-card, .stat, .acc, .menu, .preview-card,
.modal-card, .sheet-card {
  background: var(--glass);
  border: 1px solid var(--glass-hi);
  box-shadow: var(--hl);
}
.modal-card, .sheet-card { border-radius: 26px 26px 0 0; }

.btn, .mini, .field, .switch-row, .rep-item, .pick label,
.color-hex, .secret, .codebox, .file-field, .token-chip {
  background: var(--field);
  box-shadow: 0 0 0 1px var(--glass-hi), var(--hl);
}
.btn { border-radius: 16px; color: var(--text); }
.btn.primary {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 10px 26px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn.ghost { box-shadow: 0 0 0 1px var(--glass-hi) inset; }
.field:focus { box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 4px var(--tint); }

.bar, .editor-bar, .ed-bar {
  background: var(--glass-solid);
  border-bottom: 1px solid var(--sep);
}
.tabs, .ed-tabs {
  background: var(--glass-solid);
  border-top: 1px solid var(--sep);
}
.tpl-badge { background: var(--glass-hi); color: var(--text); }
.preview-phone { border: 1px solid var(--glass-hi); box-shadow: var(--hl); }

/* ---------- Tombol tema ---------- */
.bar-actions { display: flex; align-items: center; gap: 4px; }
.bar-link { white-space: nowrap; }
@media (max-width: 380px) {
  .bar .bar-link { padding: 8px 10px; font-size: 12px; }
  .bar .brand small { font-size: 10px; }
}
.theme-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-hi);
  color: var(--text);
  box-shadow: var(--hl);
  cursor: pointer;
  transition: transform .5s var(--spring), background .4s var(--ease);
}
.theme-btn:active { transform: scale(.82); }
.theme-btn .ic {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .8s var(--spring);
}
.theme-ico { display: grid; place-items: center; }
.theme-ico .ic { grid-area: 1 / 1; }
.theme-btn .ic-sun { display: none; }
html[data-mode="light"] .theme-btn .ic-moon { display: none; }
html[data-mode="light"] .theme-btn .ic-sun { display: block; }

.icon-btn, .ed-icon, .ed-back {
  background: var(--glass-hi);
  box-shadow: var(--hl);
  color: var(--text);
  transition: transform .5s var(--spring), background .35s var(--ease), color .35s var(--ease);
}
.icon-btn:active, .ed-icon:active, .ed-back:active { transform: scale(.85); }
.icon-btn.on { color: var(--accent); background: var(--tint); }
.ed-icon.on { background: var(--accent); color: var(--on-accent); }

/* ---------- Indikator tab geser ---------- */
nav.tabs::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8px;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  width: calc((100% - 16px) / var(--tab-n, 3));
  height: calc(100% - 12px - env(safe-area-inset-bottom, 0px));
  border-radius: 10px;
  background: var(--glass-hi);
  box-shadow: var(--hl);
  transform: translateX(calc(var(--tab-i, 0) * 100%));
  transition: transform .55s var(--spring);
  pointer-events: none;
}
nav.tabs > .tab { position: relative; z-index: 1; background: transparent; transition: color .35s var(--ease), transform .5s var(--spring); }
nav.tabs > .tab.on { background: transparent; color: #04122b; }
html[data-mode="light"] nav.tabs > .tab.on { color: var(--accent); }
nav.tabs > .tab:active { transform: scale(.92); }

@media (min-width: 820px) {
  nav.tabs::before {
    left: 8px;
    right: 8px;
    top: 8px;
    bottom: auto;
    width: auto;
    height: calc((100% - 16px - (var(--tab-n, 3) - 1) * 2px) / var(--tab-n, 3));
    transform: translateY(calc(var(--tab-i, 0) * (100% + 2px)));
  }
}
@media (min-width: 820px) {
  .tabs { background: var(--glass); border: 1px solid var(--glass-hi); }
  .ed-tabs { background: var(--glass); }
  .modal-card, .sheet-card { border-radius: 26px; }
}

/* ---------- Animasi masuk & tekan ---------- */
@keyframes glassIn {
  0% { opacity: 0; transform: scale(.96, 1.02) translateY(12px); }
  60% { opacity: 1; transform: scale(1.005, .998) translateY(-1px); }
  100% { opacity: 1; transform: none; }
}
@keyframes paneIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(26px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card, .step, .stat, .acc, .tpl-card, .preview-card, .success {
  animation: glassIn .68s var(--spring) both;
}
.card:nth-child(2), .step:nth-child(2), .acc:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3), .step:nth-child(3), .acc:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4), .acc:nth-child(4) { animation-delay: .18s; }

.hero > *, .section-head {
  animation: glassIn .7s var(--spring) both;
}
.hero > *:nth-child(2) { animation-delay: .05s; }
.hero > *:nth-child(3) { animation-delay: .1s; }
.hero > *:nth-child(4) { animation-delay: .15s; }
.hero > *:nth-child(5) { animation-delay: .2s; }

.panel:not([hidden]),
.view:not([hidden]),
.ed-pane:not([hidden]) {
  animation: paneIn .5s var(--ease) both;
}

.btn, .mini, .tab, .ed-tab, .link-box, .pick label {
  transition: transform .45s var(--spring), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.btn:active, .mini:active { transform: scale(.96); opacity: .92; }
.tab:active, .ed-tab:active { transform: scale(.94); }

.acc[open] > .acc-body { animation: accOpen .36s var(--ease) both; transform-origin: top; }
.photo-prev:not([hidden]), .photo-prev:not([hidden]) .photo-thumb { animation: popIn .4s var(--spring) both; }
.menu:not([hidden]) { animation: popIn .32s var(--spring) both; transform-origin: top right; }
.modal:not([hidden]) { animation: fadeIn .3s var(--ease) both; }
.modal:not([hidden]) .modal-card,
.modal:not([hidden]) .sheet-card { animation: sheetUp .45s var(--spring) both; }

.toast {
  background: var(--glass-solid);
  color: var(--text);
  border: 1px solid var(--glass-hi);
}
.toast:not([hidden]) { animation: toastIn .45s var(--spring) both; }

#spin { background: rgba(0, 0, 0, .25); }
#spin::after { border-color: rgba(255, 255, 255, .3); border-top-color: var(--accent); }

.action-bar {
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 55%, transparent);
}
html[data-mode="light"] .action-bar {
  background: linear-gradient(to top, rgba(219, 231, 247, .92) 55%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover, .step:hover, .tpl-card:hover, .stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--hl), 0 16px 36px rgba(0, 0, 0, .18);
    transition: transform .4s var(--spring), box-shadow .4s var(--ease);
  }
  .btn:hover, .mini:hover, .theme-btn:hover { filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}