*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{--bg:#0a0a0a;--bg2:#141414;--bg3:#1e1e1e;--border:#2a2a2a;--accent:#c8f04a;--accent2:#4af0c8;--text:#e8e4dc;--muted:#666;--danger:#f04a4a;--warn:#f0a84a;--mono:'DM Mono',monospace;--display:'Bebas Neue',sans-serif;--body:'DM Sans',sans-serif;}
html,body{background:var(--bg);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;}
body{min-height:100vh;padding-bottom:80px;}
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:.875rem 1.25rem;display:flex;align-items:center;justify-content:space-between;}
.topbar-logo{font-family:var(--display);font-size:28px;color:var(--accent);letter-spacing:.04em;line-height:1;}
.month-selector{display:flex;align-items:center;gap:.5rem;}
.month-btn{background:transparent;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}
.month-btn:hover{border-color:var(--accent);color:var(--accent);}
.month-label{font-family:var(--mono);font-size:11px;color:var(--text);min-width:64px;text-align:center;}
.main{padding:1.25rem;max-width:600px;margin:0 auto;}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:rgba(10,10,10,.95);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;justify-content:space-around;padding:.625rem 0 calc(.625rem + env(safe-area-inset-bottom));}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:.25rem .75rem;border-radius:8px;transition:color .15s;}
.nav-item.active{color:var(--accent);}
.nav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.skeleton{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:8px;}
.empty{text-align:center;padding:3rem 1rem;color:var(--muted);font-size:13px;}
.error-banner{background:rgba(240,74,74,.1);border:1px solid rgba(240,74,74,.3);border-radius:10px;color:var(--danger);font-size:12px;padding:.875rem 1rem;margin-bottom:1rem;display:none;}
.error-banner.show{display:block;}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}