/* Hide mini topbar permanently */
#mini-topbar{ display:none !important; }
/* Reset & dasar */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Mode Dark - default */
html[data-theme='dark'] body {
  background: #121212; /* warna gelap nyaman mata */
  color: #eee; /* teks terang */
}

/* Mode Light */
html[data-theme='light'] body {
  background: #fff; /* putih cerah */
  color: #222; /* teks gelap agar mudah dibaca */
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* === Mini Topbar (Back only) === */
#mini-topbar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:8px;height:44px;min-height:44px;padding:calc(env(safe-area-inset-top,0px)+4px) 12px 4px 12px;background:var(--card);color:var(--text);border-bottom:1px solid var(--border);}
#mini-topbar .back-btn{
  background: none;
  border: none;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: inherit;
}
#mini-topbar .title{
  font-size: 14px;
  opacity: .85;
}


/* === Icon primitives === */
.icon { width: 24px; height: 24px; display: inline-block; vertical-align: middle; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Footer nav icon-only adjustments */
.bottom-nav .bottom-link { display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; }
.bottom-nav .bottom-link img.icon { width:24px; height:24px; }
.bottom-nav .bottom-link:not(.active) { opacity:.8; }
.bottom-nav .bottom-link.active { opacity:1; }

/* Topbar back icon */
#mini-topbar .back-btn { display:flex; align-items:center; gap:8px; padding:6px 8px; }
#mini-topbar .back-btn img.icon { width:22px; height:22px; }


/* === Footer icon + small label === */
.bottom-nav .bottom-link { 
  display:flex; 
  flex-direction: column; 
  align-items:center; 
  justify-content:center; 
  gap:4px; 
  padding:8px 6px; 
  min-width: 60px;
}
.bottom-nav .bottom-link .label {
  font-size: 11px;
  line-height: 1;
  opacity: .9;
}
.bottom-nav .bottom-link.active .label { opacity: 1; font-weight: 600; }

/* Topbar back label */
#mini-topbar .back-btn .label {
  font-size: 14px;
  line-height: 1;
}


/* === Icon coloring via currentColor === */
.bottom-nav { color: var(--muted); }
.bottom-nav .bottom-link { color: inherit; }
.bottom-nav .bottom-link.active { color: var(--accent); font-weight: 600; }
.bottom-nav .bottom-link .label { color: currentColor; }
#mini-topbar .back-btn { color: var(--text); } /* kept for compatibility */
/* Inline <svg> sizing (after inlining) */
.icon svg { width: 24px; height: 24px; display: block; }