:root{
  --ink:#16181D; --ink-2:#1F222A; --ink-3:#2A2E38; --line:#343945;
  --mist:#F4F6FA; --paper:#FFFFFF; --text:#1A1A2E; --muted:#5C6270; --muted-d:#9AA1B0;
  --merah:#EE3124; --jingga:#FF8200; --kuning:#FFD500; --hijau:#00A651; --biru:#2F6FD6; --putih:#FFFFFF;
  --hijau-bg:#0E2B1D; --merah-bg:#33150F; --biru-bg:#14243F;
  --r-s:8px; --r-m:14px; --r-l:22px;
  --turn:cubic-bezier(.2,.85,.3,1); /* quarter-turn easing */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{font-family:'Rubik',sans-serif;background:var(--ink);color:#EDEFF4;line-height:1.55;min-height:100dvh}
::selection{background:var(--kuning);color:var(--ink)}

.btn:focus-visible,button:focus-visible{outline:3px solid var(--biru);outline-offset:2px}
.app-body{flex:1;overflow-y:auto;scrollbar-width:none;position:relative}
.app-body::-webkit-scrollbar{display:none}
.view{display:none;padding:14px 16px 90px;min-height:100%}
.view.show{display:block}
.tabbar{position:absolute;bottom:0;left:0;right:0;background:rgba(22,24,29,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;padding:8px 6px 14px}
.tabbar button{flex:1;background:none;border:none;color:var(--muted-d);font-family:'Rubik',sans-serif;font-size:10.5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 0;transition:color .15s}
.tabbar button .ic{width:22px;height:22px;border-radius:6px;border:2px solid currentColor;display:grid;place-items:center;font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:11px;transition:transform .18s var(--turn)}
.tabbar button.on{color:var(--kuning)}
.tabbar button.on .ic{transform:rotate(90deg)}