@layer components{.tabs-wrapper{width:100%;padding:0}.pill-tabs{background:var(--color-primary);padding:var(--space-1);border-radius:var(--radius-full);border:var(--border-width) solid var(--color-primary);gap:0;display:flex;position:relative;overflow:hidden}.tabs-indicator{top:var(--space-1);bottom:var(--space-1);background:var(--bg-card);border-radius:var(--radius-full);transition:transform var(--transition-slow) var(--ease-standard), width var(--transition-slow) var(--ease-standard);z-index:1;position:absolute;left:0;box-shadow:0 1px 3px oklch(0% 0 0/.15)}.pill-tab{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);color:color-mix(in oklch, var(--color-primary-text) 70%, transparent);cursor:pointer;transition:color var(--transition-base) ease;border-radius:var(--radius-md);z-index:2;min-height:var(--space-10);white-space:nowrap;background:0 0;border:none;flex:1;display:flex;position:relative}@media (width<=379px){.pill-tab{gap:var(--space-1);padding-inline:var(--space-1)}}@media (hover:hover){.pill-tab:hover{color:var(--color-primary-text)}}.pill-tab-active{color:var(--color-primary)}@media (hover:hover){.pill-tab-active:hover{color:var(--color-primary)}}.tab-badge{background:var(--color-primary);color:var(--color-primary-text);border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-bold);justify-content:center;align-items:center;padding:1px 6px;display:flex}.pill-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}.underline-tabs{--active-tab-color:var(--color-primary);border-bottom:var(--rule-section);padding:0 var(--space-1);margin:0 calc(var(--space-1) * -1);scrollbar-width:thin;scrollbar-color:var(--border-default) transparent;gap:2px;display:flex;position:relative;overflow:auto hidden}.underline-tabs::-webkit-scrollbar{height:2px}.underline-tabs::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:3px}.underline-tabs::-webkit-scrollbar-track{background:0 0}.underline-tabs.tabs-scrollable{scroll-snap-type:x proximity;touch-action:pan-x pan-y;cursor:grab;-webkit-user-select:none;user-select:none}.underline-tabs.tabs-scrollable:active{cursor:grabbing}.underline-tab{--tab-color:var(--text-primary);padding:var(--space-3) 14px;min-height:44px;color:var(--text-muted);font:inherit;font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;white-space:nowrap;scroll-snap-align:start;transition:color var(--transition-fast) ease, background var(--transition-fast) ease;background:0 0;border:0;flex-shrink:0;align-items:center;gap:6px;display:inline-flex;position:relative}@media (hover:hover){.underline-tab:hover:not(.underline-tab-active){color:var(--text-primary);background:color-mix(in oklch, var(--tab-color) 8%, transparent);border-radius:var(--radius-sm) var(--radius-sm) 0 0}}.underline-tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px;border-radius:var(--radius-sm)}.underline-tab-active{color:var(--tab-color);font-weight:var(--font-semibold)}.underline-tab-dimmed{opacity:.5}.underline-tab .tab-badge{background:var(--bg-muted);color:var(--text-muted);min-width:20px;height:18px;font-size:var(--text-xs);font-variant-numeric:tabular-nums;border-radius:var(--radius-full);transition:background var(--transition-fast) ease, color var(--transition-fast) ease;padding:0 6px}.underline-tab-active .tab-badge{background:color-mix(in oklch, var(--tab-color) 15%, transparent);color:var(--tab-color)}.underline-tabs-indicator{background:var(--active-tab-color);height:2.5px;transition:transform .28s var(--ease-soft-bounce), width .28s var(--ease-soft-bounce), background-color var(--transition-base) ease;pointer-events:none;border-radius:2px 2px 0 0;position:absolute;bottom:-1px;left:0}@media (width<=639px){.pill-tab{font-size:calc(var(--text-xs) + 1px);padding-block:6px}.underline-tab{font-size:calc(var(--text-sm) + 1px);padding:10px}.underline-tab>span:not(.tab-badge){text-overflow:ellipsis;max-width:120px;overflow:hidden}}@media (prefers-reduced-motion:reduce){.underline-tab,.underline-tabs-indicator{transition:none}}}
