#app{display:none;height:100vh;flex-direction:column}
#app.visible{display:flex}
.topbar{height:44px;background:var(--c-surface);border-bottom:1px solid var(--c-border);display:flex;align-items:center;padding:0 16px;flex-shrink:0;z-index:100}
.topbar-logo{display:flex;align-items:center;gap:8px;margin-right:28px}
.topbar-logo-mark{width:26px;height:26px;background:var(--c-accent);border-radius:6px;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:11px}
.topbar-logo-text{font-size:15px;font-weight:600;letter-spacing:-0.3px}
.topbar-nav{display:flex;align-items:center;gap:2px;flex:1}
.nav-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border:none;background:transparent;border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:500;color:var(--c-text2);cursor:pointer;transition:all var(--tr)}
.nav-btn:hover{background:var(--c-surface2);color:var(--c-text)}
.nav-btn.active{background:var(--c-surface2);color:var(--c-text)}
.nav-btn svg{width:15px;height:15px}
.topbar-right{display:flex;align-items:center;gap:10px}
.timer-indicator{display:none;align-items:center;gap:6px;padding:5px 10px;background:var(--c-green-bg);border:1px solid #A7F3D0;border-radius:20px;font-size:12px;font-weight:500;color:var(--c-green);cursor:pointer}
.timer-indicator.visible{display:flex}
.timer-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green);animation:pulse 1.2s ease-in-out infinite}
.btn-new{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--c-accent);color:white;border:none;border-radius:var(--radius);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;transition:opacity var(--tr)}
.btn-new:hover{opacity:0.88}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--c-accent);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;cursor:pointer;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}

/* User menu dropdown */
.user-menu-wrap{position:relative}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--c-surface);border:1px solid var(--c-border2);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);min-width:200px;z-index:500;overflow:hidden}
.user-dropdown.open{display:block}
.user-dropdown-info{padding:12px 14px;font-size:13px;color:var(--c-text2);border-bottom:1px solid var(--c-border)}
.user-dropdown-divider{height:1px;background:var(--c-border);margin:4px 0}
.user-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 14px;border:none;background:transparent;font-family:var(--font);font-size:13px;font-weight:500;color:var(--c-text);cursor:pointer;text-align:left;transition:background var(--tr)}
.user-dropdown-item:hover{background:var(--c-surface2)}
.user-dropdown-item.danger{color:var(--c-red)}
.user-dropdown-item.danger:hover{background:#FEF2F2}
.user-dropdown-item svg{width:14px;height:14px;flex-shrink:0;color:var(--c-text3)}
.user-dropdown-item.danger svg{color:var(--c-red)}
.main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex;flex-direction:column}