fix(ui): refine settings and surface styling

src/components/DownloadItem.tsx

@@ -279,7 +279,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
             >
               {(download.status === 'queued' || download.status === 'staged') && queueIndex !== -1 ? (
                 <>
-                  <Clock size={12} className={download.status === 'queued' ? 'animate-pulse shrink-0' : 'shrink-0'} />
+                  <Clock size={12} className={download.status === 'queued' ? 'animate-pulse motion-reduce:animate-none shrink-0' : 'shrink-0'} />
                   <span className="truncate">
                     {downloadStatusLabel} #{queueIndex + 1}
                   </span>

src/components/DownloadTable.tsx

@@ -2307,13 +2307,17 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
 
               {itemsToQueue.length > 0 && (
                 <div className="group relative">
-                  <button className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center">
+                  <button
+                    type="button"
+                    aria-haspopup="menu"
+                    className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center"
+                  >
                     {t($ => $.downloadTable.addToQueue)}
                     <ChevronRight size={14} className="download-context-menu-chevron" />
                   </button>
-                  <div className="download-context-submenu absolute top-0 hidden group-hover:block min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50">
+                  <div className="download-context-submenu absolute top-0 min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50" role="menu">
                     {queues.map(q => (
-                      <button key={q.id} onClick={() => {
+                      <button key={q.id} role="menuitem" onClick={() => {
                         setContextMenu(null);
                         void assignToQueue(itemsToQueue.map(item => item.id), q.id).catch(error => {
                           showInteractionError(t($ => $.downloadTable.moveManyFailed), error);
@@ -2426,13 +2430,17 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
 
               {contextItem.status !== 'completed' && (
                 <div className="group relative">
-                  <button className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center">
+                  <button
+                    type="button"
+                    aria-haspopup="menu"
+                    className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors flex justify-between items-center"
+                  >
                     {t($ => $.downloadTable.addToQueue)}
                     <ChevronRight size={14} className="download-context-menu-chevron" />
                   </button>
-                  <div className="download-context-submenu absolute top-0 hidden group-hover:block min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50">
+                  <div className="download-context-submenu absolute top-0 min-w-[150px] bg-bg-modal border border-border-modal rounded-lg shadow-lg py-1.5 z-50" role="menu">
                     {queues.map(q => (
-                      <button key={q.id} onClick={() => {
+                      <button key={q.id} role="menuitem" onClick={() => {
                         setContextMenu(null);
                         void assignToQueue([contextItem.id], q.id).catch(error => {
                           showInteractionError(t($ => $.downloadTable.moveOneFailed), error);

src/components/KeychainPermissionModal.tsx

@@ -207,7 +207,7 @@ export const KeychainPermissionModal: React.FC<KeychainPermissionModalProps> = (
           <button
             onClick={handleGrant}
             disabled={isGranting || grantRequestPending}
-            className="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-white hover:bg-accent/90 disabled:opacity-50"
+            className="px-4 py-2 rounded-lg text-sm font-medium transition-colors bg-accent text-accent-foreground hover:bg-accent/90 disabled:opacity-50"
           >
             {isGranting || grantRequestPending ? t($ => $.keychain.enabling) : grantLabel}
           </button>

src/components/SchedulerView.tsx

@@ -342,7 +342,7 @@ export default function SchedulerView() {
                       disabled={!draft.enabled}
                       onClick={() => toggleDay(day.value)}
                       className={`h-8 w-8 rounded-full text-[12px] font-semibold ${
-                        selected ? 'bg-accent text-white' : 'bg-bg-input text-text-primary hover:bg-item-hover'
+                        selected ? 'bg-accent text-accent-foreground' : 'bg-bg-input text-text-primary hover:bg-item-hover'
                       }`}
                     >
                       {t($ => $.scheduler.days[day.key])}

src/components/SettingsView.tsx

@@ -725,10 +725,11 @@ runEngineChecks(false);
       <button
         type="button"
         data-active={active}
+        aria-current={active ? 'page' : undefined}
         onClick={() => settings.setActiveSettingsTab(type)}
-        className={`settings-tab-button flex min-w-0 flex-1 flex-col items-center justify-center px-1 text-center cursor-default ${
+        className={`settings-tab-button flex min-w-0 flex-1 flex-col items-center justify-center px-1 text-center cursor-pointer ${
           active
-            ? 'text-white'
+            ? 'text-accent-foreground'
             : 'text-text-primary hover:bg-item-hover'
         }`}
       >
@@ -755,6 +756,7 @@ runEngineChecks(false);
         {/* Content Area */}
         <div className="settings-scroll flex-1 overflow-y-auto">
           <div className="settings-content-shell w-full">
+            <div key={activeTab} className="settings-page-transition">
             <h1 className="settings-title text-text-primary">{activeTabLabel}</h1>
             <div className="settings-content max-w-[720px]">
 
@@ -1448,7 +1450,7 @@ runEngineChecks(false);
                     type="button"
                     onClick={handleAddLogin}
                     disabled={isSavingLogin}
-                    className="bg-accent hover:bg-accent text-white px-4 py-1.5 rounded-lg text-xs font-semibold shadow flex items-center gap-1.5"
+                    className="bg-accent hover:bg-accent text-accent-foreground px-4 py-1.5 rounded-lg text-xs font-semibold shadow flex items-center gap-1.5"
                   >
                     <Plus size={14} /> {isSavingLogin ? t($ => $.settings.siteLogins.saving) : t($ => $.settings.siteLogins.addLogin)}
                   </button>
@@ -1611,7 +1613,7 @@ className="app-button px-3 py-1.5 text-[12px] flex items-center gap-1.5 disabled
                     </p>
                     <button 
                       onClick={() => settings.setShowKeychainModal(true)}
-                      className="px-4 py-1.5 rounded-md text-xs font-medium transition-colors bg-accent text-white hover:bg-accent/90 shadow-sm"
+                      className="px-4 py-1.5 rounded-md text-xs font-medium transition-colors bg-accent text-accent-foreground hover:bg-accent/90 shadow-sm"
                     >
                     {platform.portable ? t($ => $.settings.integrations.reviewPortablePairing) : t($ => $.settings.integrations.grantCredentialAccess)}
                     </button>
@@ -1635,7 +1637,7 @@ className="app-button px-3 py-1.5 text-[12px] flex items-center gap-1.5 disabled
                   <div className="space-y-2">
                     <button
                       onClick={() => void copyToken()}
-                      className="w-full bg-accent hover:bg-accent text-white font-medium py-1 px-2 rounded text-[11px] flex items-center justify-center gap-1 shadow transition-colors"
+                      className="w-full bg-accent hover:bg-accent text-accent-foreground font-medium py-1 px-2 rounded text-[11px] flex items-center justify-center gap-1 shadow transition-colors"
                     >
                       <Copy size={11} /> {t($ => $.settings.integrations.copyToken)}
                     </button>
@@ -1798,7 +1800,7 @@ className="app-button px-3 py-1.5 text-[12px] flex items-center gap-1.5 disabled
                       role="switch"
                       aria-checked={settings.autoCheckUpdates}
                       onClick={() => settings.setAutoCheckUpdates(!settings.autoCheckUpdates)}
-                      className={`relative inline-flex h-5 w-9 shrink-0 cursor-default items-center rounded-full transition-colors duration-200 ease-in-out border border-transparent ${settings.autoCheckUpdates ? 'bg-accent' : 'bg-border-color'}`}
+                      className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out border border-transparent ${settings.autoCheckUpdates ? 'bg-accent' : 'bg-border-color'}`}
                     >
                       <span className={`pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow transition duration-200 ease-in-out ${settings.autoCheckUpdates ? 'translate-x-4' : 'translate-x-0'}`} />
                     </button>
@@ -1829,6 +1831,7 @@ className="app-button px-3 py-1.5 text-[12px] flex items-center gap-1.5 disabled
           )}
 
             </div>
+            </div>
           </div>
         </div>
 

src/components/Sidebar.tsx

@@ -426,7 +426,7 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           onClick={() => setActiveView('settings')}
           className="sidebar-nav-item sidebar-settings-button group flex w-full items-center text-[13px] text-start cursor-default font-medium transition-colors"
         >
-          <Settings className={`w-[18px] h-[18px] me-3 shrink-0 ${activeView === 'settings' ? 'text-white' : 'text-text-muted'}`} strokeWidth={activeView === 'settings' ? 2.5 : 2} />
+          <Settings className={`w-[18px] h-[18px] me-3 shrink-0 ${activeView === 'settings' ? 'text-accent-foreground' : 'text-text-muted'}`} strokeWidth={activeView === 'settings' ? 2.5 : 2} />
           <span className="sidebar-nav-label">{t($ => $.navigation.settings)}</span>
         </button>
       </div>

src/components/SpeedLimiterView.tsx

@@ -250,7 +250,7 @@ export default function SpeedLimiterView() {
                   disabled={!enabled || isSaving}
                   onClick={() => changeUnit(option)}
                   className={`rounded px-3 py-1.5 text-[12px] font-medium ${
-                    unit === option ? 'bg-accent text-white' : 'text-text-secondary hover:bg-item-hover'
+                    unit === option ? 'bg-accent text-accent-foreground' : 'text-text-secondary hover:bg-item-hover'
                   }`}
                 >
                   {option}