/* ══════════════════════════════════════════════════════════
   base.css
   Variáveis (:root), reset, body, topbar, bottom nav
   Extraído de index.html — cascata preservada na ordem:
   base.css → layout.css → modals.css → catalog.css
   ══════════════════════════════════════════════════════════ */

:root{--bg:#0f1923;--surface:#19242f;--surface2:#1f2f3d;--border:#2a3d50;--accent:#00d4aa;--accent3:#7c5cbf;--text:#e8f0f7;--text2:#8ba3b8;--text3:#4a6478;--green:#00d4aa;--yellow:#ffc947;--red:#ff4757;--purple:#7c5cbf;--radius:14px;--rsm:8px;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
/* TOPBAR */
.topbar{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:10px 16px;gap:12px;}
.topbar-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--accent);display:flex;align-items:center;gap:6px;}
.topbar-logo span{color:var(--text2);font-weight:400;}
.topbar-title{font-size:12px;color:var(--text3);font-family:'DM Sans',sans-serif;}
/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--bg);border-top:1px solid var(--border);display:flex;padding:6px 0 max(6px,env(safe-area-inset-bottom));backdrop-filter:blur(12px);}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:color .2s;min-width:0;}
.bnav-btn svg{width:20px;height:20px;flex-shrink:0;}
.bnav-btn span{font-family:'DM Sans',sans-serif;font-size:9px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;padding:0 2px;}
.bnav-btn.active{color:var(--accent);}
.bnav-btn.active svg{filter:drop-shadow(0 0 4px var(--accent));}