.ui-switch{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-default);background:var(--bg-card-elevated);cursor:pointer;text-align:left;transition:var(--transition-all);min-height:var(--tap-target-min)}@media (hover:hover){.ui-switch:hover:not(.ui-switch--disabled){border-color:var(--border-hover)}}.ui-switch--on{border-color:var(--border-accent);background:var(--bg-card-elevated-hi)}.ui-switch--disabled{opacity:.45;cursor:not-allowed}.ui-switch:focus-visible{outline:2px solid var(--brand-cyan);outline-offset:2px}.ui-switch--compact{padding:var(--space-2) 0;border:none;background:transparent}.ui-switch__icon{flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--bg-void);color:var(--text-accent);transition:var(--transition-colors)}.ui-switch--on .ui-switch__icon{background:var(--bg-card);box-shadow:var(--shadow-cyan-glow)}.ui-switch__text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.ui-switch__label{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.ui-switch__hint{font-size:var(--text-caption);color:var(--text-muted);line-height:1.4}.ui-switch__track{flex:none;position:relative;width:44px;height:26px;border-radius:var(--radius-full);background:var(--bg-void);border:1px solid var(--border-strong);transition:var(--transition-colors)}.ui-switch__track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text-muted);transition:var(--transition-transform)}.ui-switch--on .ui-switch__track{background:var(--brand-cyan);border-color:var(--brand-cyan)}.ui-switch--on .ui-switch__track:after{transform:translateX(18px);background:var(--text-on-brand)}@media (max-width:480px){.ui-switch{padding:var(--space-3);gap:var(--space-2)}.ui-switch__icon{width:32px;height:32px}.ui-switch__label{font-size:var(--text-md)}.ui-switch__hint{font-size:var(--text-xs)}}@media (max-width:380px){.ui-switch__icon{width:28px;height:28px}.ui-switch__label{font-size:var(--text-ms)}}@media (prefers-reduced-motion:reduce){.ui-switch,.ui-switch__icon,.ui-switch__track,.ui-switch__track:after{transition:none}}