:root{--bg-base:#f7f6f3;--bg-card:#fff;--border:#00000012;--shadow-sm:0 1px 3px #0000000f, 0 1px 2px #0000000a;--shadow-md:0 4px 12px #00000014, 0 2px 4px #0000000a;--shadow-lg:0 8px 24px #0000001a, 0 4px 8px #0000000d;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-pill:999px;--font-display:"Fredoka One", cursive;--font-body:"Inter", system-ui, sans-serif;--text-primary:#1a1a1a;--text-secondary:#6b7280;--text-muted:#9ca3af;--sidebar-w:224px;--tab-bar-h:62px}*,:before,:after{box-sizing:border-box}body{background:var(--bg-base);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);margin:0;padding:0;font-size:15px}#root{max-width:none;box-shadow:none;border-radius:0;min-height:100svh;padding-inline:0}h1,h2,h3{font-family:var(--font-display);color:var(--text-primary);margin:0}p{margin:0}.app-shell{min-height:100svh;display:flex}.sidebar{width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);z-index:50;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;flex-direction:column;display:none;position:fixed;top:0;bottom:0;left:0;overflow-y:auto}@media (width>=768px){.sidebar{display:flex}}.sidebar-logo{border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;padding:20px 16px 16px;display:flex}.sidebar-logo-icon{font-size:1.6rem;line-height:1}.sidebar-logo-title{font-family:var(--font-display);color:var(--text-primary);font-size:1rem;line-height:1.2}.sidebar-logo-sub{color:var(--text-muted);margin-top:2px;font-size:.66rem;line-height:1}.sidebar-user{color:var(--text-secondary);border-bottom:1px solid var(--border);flex-shrink:0;padding:8px 16px;font-size:.72rem}.sidebar-nav{flex:1;padding:8px 8px 24px;overflow-y:auto}.sidebar-group{margin-bottom:2px}.sidebar-group-label{text-transform:uppercase;letter-spacing:.9px;color:var(--text-muted);padding:12px 10px 4px;font-size:.59rem;font-weight:700;line-height:1}.sidebar-item{cursor:pointer;width:100%;font-family:var(--font-body);color:var(--text-secondary);text-align:left;border-radius:var(--radius-sm);background:0 0;border:none;align-items:center;gap:8px;padding:7px 10px;font-size:.8rem;line-height:1.2;transition:background .12s,color .12s;display:flex}.sidebar-item:hover{color:var(--text-primary);background:#0000000d}.sidebar-item.active{font-weight:600}.sidebar-item-emoji{text-align:center;flex-shrink:0;width:18px;font-size:.88rem}.sidebar-item-label{flex:1}.main-area{min-width:0;padding-bottom:var(--tab-bar-h);flex-direction:column;flex:1;display:flex}@media (width>=768px){.main-area{margin-left:var(--sidebar-w);padding-bottom:0}}.header-mobile{padding:16px 16px 14px;transition:background .4s}.header-desktop{background:var(--bg-card);border-bottom:1px solid var(--border);z-index:30;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:13px 24px;display:none;position:sticky;top:0}@media (width>=768px){.header-mobile{display:none}.header-desktop{display:flex}}.header-title-row{align-items:center;gap:10px;margin-bottom:12px;display:flex}.header-icon{font-size:1.5rem;line-height:1}.header-title{font-family:var(--font-display);color:#fff;font-size:1.45rem;line-height:1.1}.header-sub{color:#ffffff9e;margin-top:3px;font-size:.68rem}.stats-grid{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.stat-chip{border-radius:var(--radius-sm);cursor:pointer;text-align:left;background:#ffffff24;border:1px solid #fff3;flex-direction:column;gap:2px;padding:8px 9px 7px;display:flex}.stat-chip:hover{background:#ffffff38}.stat-chip:active{transform:scale(.96)}.stat-emoji{font-size:.95rem;line-height:1}.stat-num{font-family:var(--font-display);color:#fff;font-size:.88rem;line-height:1.1}.stat-label{color:#ffffffa6;font-size:.6rem;font-weight:500;line-height:1}.header-breadcrumb{font-family:var(--font-display);color:var(--text-primary);align-items:center;gap:8px;font-size:1.05rem;display:flex}.header-welcome{color:var(--text-secondary);background:var(--bg-base);border-radius:var(--radius-pill);padding:5px 12px;font-size:.74rem;font-weight:500}.subnav{background:var(--bg-card);border-bottom:1px solid var(--border);scrollbar-width:none;z-index:20;flex-shrink:0;gap:6px;padding:9px 12px;display:flex;position:sticky;top:0;overflow-x:auto}.subnav::-webkit-scrollbar{display:none}@media (width>=768px){.subnav{display:none}}.subnav-group-label{color:var(--text-muted);white-space:nowrap;flex-shrink:0;align-self:center;padding:0 4px;font-size:.68rem;font-weight:700}.subnav-divider{background:var(--border);flex-shrink:0;align-self:center;width:1px;height:20px;margin:0 2px}.subnav-item{border-radius:var(--radius-pill);border:1.5px solid var(--border);background:var(--bg-base);color:var(--text-secondary);font-family:var(--font-display);cursor:pointer;white-space:nowrap;flex-shrink:0;min-height:32px;padding:6px 12px;font-size:.76rem}.subnav-item:hover{color:var(--text-primary);background:#00000012;border-color:#0000}.content-area{flex:1;width:100%;max-width:820px;margin:0 auto;padding:16px 14px 24px}@media (width>=768px){.content-area{padding:24px 28px 32px}}.tab-bar{height:var(--tab-bar-h);background:var(--bg-card);border-top:2px solid var(--border);z-index:50;padding-bottom:env(safe-area-inset-bottom,0px);display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 16px #00000014}@media (width>=768px){.tab-bar{display:none}}.tab-item{cursor:pointer;color:#bbb;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:0 2px;transition:color .15s;display:flex;position:relative}.tab-item.active{color:var(--tab-color,#6bcb77)}.tab-item.active:before{content:"";background:var(--tab-color,#6bcb77);border-radius:0 0 3px 3px;height:3px;position:absolute;top:0;left:10%;right:10%}.tab-emoji{font-size:1.1rem;line-height:1}.tab-label{font-size:.6rem;font-weight:700;font-family:var(--font-body);letter-spacing:.3px;text-transform:uppercase;line-height:1}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}button{cursor:pointer}button:active{transform:scale(.97)}