:root{--anim-fast: .2s;--anim-normal: .3s;--anim-slow: .4s;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.55, .055, .675, .19);--ease-spring: cubic-bezier(.32, .72, 0, 1)}@keyframes tab-underline-slide{0%{transform:translate(var(--tab-from-x, 0));width:var(--tab-from-width, 0)}to{transform:translate(var(--tab-to-x, 0));width:var(--tab-to-width, 100%)}}@keyframes tab-bg-fade-in{0%{background-color:transparent}to{background-color:var(--tab-active-bg, rgba(255, 255, 255, .1))}}@keyframes tab-bg-fade-out{0%{background-color:var(--tab-active-bg, rgba(255, 255, 255, .1))}to{background-color:transparent}}@keyframes tab-dot-scale{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes segmented-pill-slide{0%{transform:translate(var(--pill-from-x, 0))}to{transform:translate(var(--pill-to-x, 0))}}@keyframes menu-item-fade{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}@keyframes toast-slide-from-top{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-slide-to-top{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.tab-bar{position:relative;display:flex;gap:4px}.tab{position:relative;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:color var(--anim-fast) var(--ease-out),background-color var(--anim-fast) var(--ease-out);will-change:transform,background-color}.tab--active{background-color:var(--surface-base, #1a1a1a);color:var(--text-primary, #fff);animation:tab-bg-fade-in var(--anim-fast) var(--ease-out) forwards}.tab--inactive{background-color:var(--surface-2, #2a2a2a);color:var(--text-secondary, #999)}.tab--inactive:hover{background-color:var(--surface-3, #333);color:var(--text-primary, #fff)}.tab__icon{flex-shrink:0;transition:color var(--anim-fast) var(--ease-out)}.tab--active .tab__icon{color:var(--accent, #3B82F6)}.tab__indicator-dots{position:absolute;top:-2px;right:-2px;display:flex;flex-direction:column;gap:2px}.tab__indicator-dot{width:8px;height:8px;border-radius:50%;animation:tab-dot-scale var(--anim-fast) var(--ease-out) forwards}.tab__indicator-dot--main{background-color:var(--accent, #3B82F6)}.tab__indicator-dot--stream{background-color:var(--purple-500, #A855F7)}.tab-bar__underline{position:absolute;bottom:0;left:0;height:2px;background-color:var(--accent, #3B82F6);transition:transform var(--anim-normal) var(--ease-spring),width var(--anim-normal) var(--ease-spring);will-change:transform,width}.segmented-control{position:relative;display:inline-flex;align-items:center;padding:4px;background-color:var(--surface-2, #2a2a2a);border:1px solid rgba(255,255,255,.1);border-radius:8px}.segmented-control--compact{padding:2px;border-radius:6px}.segmented-control__indicator{position:absolute;top:4px;bottom:4px;left:4px;background-color:var(--accent, #3B82F6);border-radius:4px;transition:transform var(--anim-normal) var(--ease-spring),width var(--anim-normal) var(--ease-spring);will-change:transform,width}.segmented-control--compact .segmented-control__indicator{top:2px;bottom:2px;left:2px}.segmented-control__button{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;border-radius:4px;font-size:14px;font-weight:500;color:var(--text-secondary, #999);cursor:pointer;transition:color var(--anim-fast) var(--ease-out)}.segmented-control--compact .segmented-control__button{padding:8px}.segmented-control__button--active{color:#fff}.segmented-control__button--inactive:hover{color:var(--text-primary, #fff)}.segmented-control__button--disabled{opacity:.5;cursor:not-allowed}.segmented-control__status-dot{width:6px;height:6px;border-radius:50%}.segmented-control__status-dot--pulse{animation:status-pulse 2s ease-in-out infinite}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.5}}.menu-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--text-primary, #fff);cursor:pointer;transition:background-color var(--anim-fast) var(--ease-out),color var(--anim-fast) var(--ease-out)}.menu-item:hover{background-color:var(--surface-1, rgba(255, 255, 255, .05))}.menu-item--active{background-color:var(--surface-1, rgba(255, 255, 255, .05));color:var(--accent, #3B82F6)}.menu-item--destructive{color:var(--status-danger, #EF4444)}.menu-item--destructive:hover{background-color:#ef44441a}.menu-item--disabled{opacity:.5;cursor:not-allowed}.menu-item--disabled:hover{background-color:transparent}.menu-item__icon{flex-shrink:0;width:16px;height:16px}.menu-item__shortcut{margin-left:auto;font-size:12px;color:var(--text-tertiary, #666)}.category-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color var(--anim-fast) var(--ease-out),color var(--anim-fast) var(--ease-out)}.category-tab--active{background-color:var(--accent, #3B82F6);color:#fff}.category-tab--inactive{color:var(--text-secondary, #999)}.category-tab--inactive:hover{color:#fff;background-color:#ffffff0d}.mode-tabs{display:flex;align-items:center;padding:2px;background-color:var(--surface-2, #2a2a2a);border-radius:8px}.mode-tab{flex:1;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;text-align:center;cursor:pointer;transition:background-color var(--anim-fast) var(--ease-out),color var(--anim-fast) var(--ease-out)}.mode-tab--active{background-color:var(--accent, #3B82F6);color:#000}.mode-tab--inactive{color:var(--text-secondary, #999)}.mode-tab--inactive:hover{color:var(--text-primary, #fff)}.drawer-backdrop{position:absolute;inset:0;background:#00000080;z-index:10;opacity:0;pointer-events:none;transition:opacity var(--anim-normal, .3s) var(--ease-out, ease-out)}.drawer-backdrop--open{opacity:1;pointer-events:auto}.drawer-panel{position:absolute;top:0;right:0;bottom:0;z-index:11;transform:translate(100%);transition:transform var(--anim-normal, .3s) cubic-bezier(.32,.72,0,1)}.drawer-panel--open{transform:translate(0)}.category-chips-scroll::-webkit-scrollbar{display:none}.category-chips-scroll{-ms-overflow-style:none;scrollbar-width:none}@media(prefers-reduced-motion:reduce){.tab,.tab--active,.tab--inactive,.tab__indicator-dot,.tab-bar__underline,.segmented-control__indicator,.segmented-control__button,.menu-item,.category-tab,.mode-tab{animation:none!important;transition:none!important}}
