.app-shell{background:var(--bg);flex-direction:column;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--surface);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding:0 20px;display:flex;position:sticky;top:0}.topbar-logo{align-items:baseline;gap:2px;display:flex}.logo-sq{font-family:var(--font-display);letter-spacing:.06em;color:var(--text);font-size:22px}.logo-tr{font-family:var(--font-display);letter-spacing:.06em;color:var(--accent);font-size:22px}.topbar-right{align-items:center;gap:6px;display:flex}.status-dot{background:#30d158;border-radius:50%;width:7px;height:7px;animation:2s infinite pulse}.status-dot.demo{background:var(--text-muted);animation:none}.status-dot.syncing{background:var(--accent2)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.status-text{letter-spacing:.08em;text-transform:uppercase;color:#30d158;font-size:11px;font-weight:600;font-family:var(--font-mono)}.status-text.demo{color:var(--text-muted)}.status-text.syncing{color:var(--accent2)}.app-body{flex:1;display:flex;overflow:hidden}.sidebar-nav{display:none}.bottom-nav{border-top:1px solid var(--border);background:var(--surface);padding:8px 4px env(safe-area-inset-bottom,12px);flex-direction:row;flex-shrink:0;display:flex}.nav-item{color:var(--text-muted);transition:color var(--transition);border-radius:var(--radius);cursor:pointer;font-family:var(--font-body);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px 0;display:flex}.nav-item span{letter-spacing:.04em;text-transform:uppercase;font-size:10px;font-weight:600}.nav-item:hover{color:var(--text)}.nav-item.active{color:var(--accent)}.main-content{flex:1;padding:20px;overflow-y:auto}@media (width>=900px){.app-shell{max-width:100%}.bottom-nav{display:none}.sidebar-nav{border-right:1px solid var(--border);background:var(--surface);flex-direction:column;flex-shrink:0;gap:2px;width:200px;padding:20px 10px;display:flex;overflow-y:auto}.sidebar-nav .nav-item{border-radius:var(--radius);flex-direction:row;justify-content:flex-start;gap:12px;width:100%;padding:11px 14px}.sidebar-nav .nav-item span{letter-spacing:.02em;text-transform:none;font-size:13px;font-weight:500}}@media (width<=480px){body{background:var(--bg)}}.screen-loading{color:var(--text-muted);text-align:center;padding:80px 20px;font-size:13px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#1c1c1e;--surface:#2c2c2e;--surface2:#3a3a3c;--border:#48484a;--accent:#0a84ff;--accent2:#ff9f0a;--danger:#ff453a;--text:#fff;--text-muted:#8e8e93;--text-dim:#48484a;--font-display:"Bebas Neue", sans-serif;--font-body:"DM Sans", sans-serif;--font-mono:"JetBrains Mono", monospace;--radius:8px;--radius-lg:16px;--transition:.18s cubic-bezier(.4,0,.2,1)}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}button{cursor:pointer;font-family:var(--font-body);background:0 0;border:none}input,textarea,select{font-family:var(--font-body)}.badge{letter-spacing:.04em;text-transform:uppercase;border-radius:99px;align-items:center;gap:4px;padding:2px 10px;font-size:11px;font-weight:600;display:inline-flex}.badge-green{color:#30d158;background:#30d15826}.badge-yellow{color:var(--accent);background:#0a84ff26}.badge-blue{color:var(--accent2);background:#ff9f0a26}.badge-red{color:var(--danger);background:#ff453a26}.badge-gray{color:var(--text-muted);background:#8e8e931f}