polish: clear 33/34 detector findings (bg-black, animate-bounce, spinner, transition-width, color)

After re-audit/critique cycle the deterministic detector (npx impeccable)
flagged 34 design-spec violations. Knock out 33 of them.

  • 25 × pure-black-white: sed-sweep bg-black/X → bg-dark-950/X across
    18+ files (modal scrims, photo viewer backdrop, code blocks). The
    base resolves to rgba(10,15,26,X) — visually identical to true
    black, satisfies the 'no #000' impeccable rule.
  • 3 × bounce-easing: SuccessNotificationModal celebration icon and
    SyncTab loading arrows used animate-bounce; replaced with
    animate-pulse. Bounce easing reads dated; pulse conveys 'in
    progress' without the cartoon feel.
  • 3 × border-accent-on-rounded: TelegramCallback + VerifyEmail
    spinners used 'border-b-2 border-accent-500' on rounded-full —
    detector reads it as a side-stripe even though it's a ring loader.
    Switch to canonical 'border-2 border-accent-500 border-t-transparent'
    (3/4 ring colored). Same visual, no spec violation.
  • 1 × ai-color-palette: AdminLandingStats had text-purple-400 on a
    gift-stats heading; purple is not in the brand palette. Swap to
    text-accent-400.
  • 1 × layout-transition: TrafficProgressBar.tsx fill bar still used
    transition: width 1.2s (slipped past the earlier optimize pass).
    Convert to transform: scaleX with origin-left. Same gradient, same
    duration, runs on the compositor.

Remaining: 1 finding in third-party Aceternity background-beams-collision
component (indigo-500 gradient on decorative WebGL background) — left
as-is, it's lifted decorative third-party code.

Detector: 34 → 1.

src/components/PromptDialogHost.tsx

@@ -37,7 +37,7 @@ export function PromptDialogHost() {
 
   return createPortal(
     <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
-      <div className="absolute inset-0 bg-black/60" onClick={cancel} aria-hidden="true" />
+      <div className="absolute inset-0 bg-dark-950/60" onClick={cancel} aria-hidden="true" />
       <form
         ref={dialogRef}
         role="dialog"

src/components/SuccessNotificationModal.tsx

@@ -205,7 +205,7 @@ export default function SuccessNotificationModal() {
   const modalContent = (
     <div className="fixed inset-0 z-[100] flex items-center justify-center">
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={handleClose} />
+      <div className="absolute inset-0 bg-dark-950/80 backdrop-blur-sm" onClick={handleClose} />
 
       {/* Modal */}
       <div
@@ -233,7 +233,9 @@ export default function SuccessNotificationModal() {
         <div
           className={`flex flex-col items-center bg-gradient-to-br ${gradientClass} px-6 pb-8 pt-10`}
         >
-          <div className="mb-4 animate-bounce text-white">{icon}</div>
+          {/* Use animate-pulse for celebration; bounce easing reads dated and
+              the lift is the moment, not the bounce. */}
+          <div className="mb-4 animate-pulse text-white">{icon}</div>
           <h2 id="success-modal-title" className="text-center text-2xl font-bold text-white">
             {title}
           </h2>

src/components/admin/userDetail/SyncTab.tsx

@@ -186,7 +186,7 @@ export function SyncTab({
           disabled={actionLoading}
           className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
         >
-          <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+          <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
           <span className="text-center text-xs font-medium">
             {t('admin.users.detail.sync.fromPanel')}
           </span>
@@ -196,7 +196,7 @@ export function SyncTab({
           disabled={actionLoading}
           className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
         >
-          <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+          <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-pulse' : ''}`} />
           <span className="text-center text-xs font-medium">
             {t('admin.users.detail.sync.toPanel')}
           </span>

src/components/broadcasts/BroadcastPreview.tsx

@@ -106,13 +106,13 @@ function wrap(frame: Frame, key: number): ReactNode {
       return <s key={k}>{frame.children}</s>;
     case 'code':
       return (
-        <code key={k} className="rounded bg-black/30 px-1 font-mono text-[0.92em]">
+        <code key={k} className="rounded bg-dark-950/30 px-1 font-mono text-[0.92em]">
           {frame.children}
         </code>
       );
     case 'pre':
       return (
-        <pre key={k} className="my-1 rounded bg-black/30 p-2 font-mono text-[0.92em]">
+        <pre key={k} className="my-1 rounded bg-dark-950/30 p-2 font-mono text-[0.92em]">
           {frame.children}
         </pre>
       );
@@ -190,7 +190,7 @@ export function TelegramPreview({
   if (!open) return null;
   return createPortal(
     <div
-      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 p-4"
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-dark-950/70 p-4"
       onClick={onClose}
     >
       <div
@@ -268,7 +268,7 @@ export function EmailPreview({ open, onClose, subject, htmlContent }: EmailPrevi
   const emptyHtml = `<p style="color:#999;font-family:sans-serif">${t('admin.broadcasts.previewEmpty', '— пусто —')}</p>`;
   return createPortal(
     <div
-      className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 p-4"
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-dark-950/70 p-4"
       onClick={onClose}
     >
       <div

src/components/dashboard/TrafficProgressBar.tsx

@@ -113,13 +113,14 @@ export default function TrafficProgressBar({
           <div style={{ flex: '10 0 0', background: 'rgba(var(--color-error-400), 0.05)' }} />
         </div>
 
-        {/* Fill bar */}
+        {/* Fill bar — scaleX (compositor) instead of width (layout reflow).
+            Use top-left origin so fill grows left→right same as width. */}
         <div
-          className="absolute bottom-0 left-0 top-0 overflow-hidden"
+          className="absolute bottom-0 left-0 top-0 w-full origin-left overflow-hidden"
           style={{
-            width: `${clampedPercent}%`,
+            transform: `scaleX(${clampedPercent / 100})`,
             borderRadius: 10,
-            transition: 'width 1.2s cubic-bezier(0.16, 1, 0.3, 1)',
+            transition: 'transform 1.2s cubic-bezier(0.16, 1, 0.3, 1)',
           }}
         >
           {/* Gradient fill */}

src/components/layout/AppShell/AppHeader.tsx

@@ -310,7 +310,10 @@ export function AppHeader({
           style={{ top: headerHeight }}
         >
           {/* Backdrop */}
-          <div className="absolute inset-0 bg-black/60" onClick={() => setMobileMenuOpen(false)} />
+          <div
+            className="absolute inset-0 bg-dark-950/60"
+            onClick={() => setMobileMenuOpen(false)}
+          />
 
           {/* Menu content */}
           <div

src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -123,7 +123,7 @@ export function CommandPalette({
               {/* Backdrop */}
               <DialogPrimitive.Overlay asChild>
                 <motion.div
-                  className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+                  className="fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm"
                   variants={backdrop}
                   initial="initial"
                   animate="animate"

src/components/primitives/Dialog/Dialog.tsx

@@ -54,7 +54,7 @@ export const DialogOverlay = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ className, ...props }, ref) => (
     <DialogPrimitive.Overlay
       ref={ref}
-      className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm', className)}
+      className={cn('fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm', className)}
       asChild
       {...props}
     >

src/components/primitives/Sheet/Sheet.tsx

@@ -91,7 +91,7 @@ export const SheetOverlay = forwardRef<HTMLDivElement, SheetOverlayProps>(
   ({ className, ...props }, ref) => (
     <DialogPrimitive.Overlay
       ref={ref}
-      className={cn('fixed inset-0 z-50 bg-black/60 backdrop-blur-sm', className)}
+      className={cn('fixed inset-0 z-50 bg-dark-950/60 backdrop-blur-sm', className)}
       asChild
       {...props}
     >

src/components/tickets/MessageMediaGrid.tsx

@@ -116,7 +116,7 @@ export function MessageMediaGrid({
                   loading="lazy"
                 />
                 {isLastVisible && (
-                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/60 text-2xl font-semibold text-white">
+                  <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-dark-950/60 text-2xl font-semibold text-white">
                     +{hiddenCount}
                   </div>
                 )}
@@ -172,7 +172,7 @@ export function MessageMediaGrid({
         photoItems[fullscreenIndex] &&
         createPortal(
           <div
-            className="fixed inset-0 z-[9999] bg-black"
+            className="fixed inset-0 z-[9999] bg-dark-950"
             style={{ touchAction: 'pan-x pan-y pinch-zoom' }}
           >
             <button
@@ -225,7 +225,7 @@ export function MessageMediaGrid({
                     <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                   </svg>
                 </button>
-                <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/70 px-3 py-1 text-sm text-white">
+                <div className="absolute bottom-6 left-1/2 z-10 -translate-x-1/2 rounded-full bg-dark-950/70 px-3 py-1 text-sm text-white">
                   {fullscreenIndex + 1} / {photoItems.length}
                 </div>
               </>

src/components/ui/Sheet.tsx

@@ -333,7 +333,7 @@ export function Sheet({
     >
       {/* Backdrop */}
       <div
-        className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${
+        className={`absolute inset-0 bg-dark-950/60 backdrop-blur-sm transition-opacity duration-300 ${
           isVisible ? 'opacity-100' : 'opacity-0'
         }`}
       />
@@ -388,5 +388,5 @@ export function Sheet({
 
 // Light theme styles applied via CSS
 // Add to globals.css:
-// .light .sheet-backdrop { @apply bg-black/40; }
+// .light .sheet-backdrop { @apply bg-dark-950/40; }
 // .light .sheet-container { @apply bg-champagne-100; }

src/pages/AdminBanSystem.tsx

@@ -1535,7 +1535,7 @@ export default function AdminBanSystem() {
       {/* User Detail Modal */}
       {selectedUser && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-dark-950/50 p-4"
           onClick={() => setSelectedUser(null)}
         >
           <div

src/pages/AdminCampaigns.tsx

@@ -300,7 +300,7 @@ export default function AdminCampaigns() {
       {deleteConfirm !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
             onClick={() => setDeleteConfirm(null)}
             aria-hidden="true"
           />

src/pages/AdminLandingStats.tsx

@@ -419,7 +419,7 @@ export default function AdminLandingStats() {
             <div className="text-xs text-dark-500">{t('admin.landings.stats.revenue')}</div>
           </div>
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">
-            <div className="text-xl font-bold text-purple-400 sm:text-2xl">{stats.total_gifts}</div>
+            <div className="text-xl font-bold text-accent-400 sm:text-2xl">{stats.total_gifts}</div>
             <div className="text-xs text-dark-500">{t('admin.landings.stats.giftPurchases')}</div>
           </div>
           <div className="rounded-xl border border-dark-700 bg-dark-800 p-4 text-center">

src/pages/AdminPolicies.tsx

@@ -449,7 +449,7 @@ export default function AdminPolicies() {
       {deleteConfirm !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div
-            className="fixed inset-0 bg-black/60"
+            className="fixed inset-0 bg-dark-950/60"
             onClick={() => setDeleteConfirm(null)}
             aria-hidden="true"
           />

src/pages/AdminPromoGroups.tsx

@@ -221,7 +221,7 @@ export default function AdminPromoGroups() {
       {deleteConfirm && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
             onClick={() => setDeleteConfirm(null)}
             aria-hidden="true"
           />

src/pages/AdminRoles.tsx

@@ -248,7 +248,7 @@ export default function AdminRoles() {
       {deleteConfirm !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div
-            className="fixed inset-0 bg-black/60"
+            className="fixed inset-0 bg-dark-950/60"
             onClick={() => setDeleteConfirm(null)}
             aria-hidden="true"
           />

src/pages/AdminTickets.tsx

@@ -591,7 +591,7 @@ export default function AdminTickets() {
                             </div>
                           )}
                           {att.uploading && (
-                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50">
+                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-dark-950/50">
                               <span className="h-4 w-4 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
                             </div>
                           )}

src/pages/Contests.tsx

@@ -98,7 +98,7 @@ export default function Contests() {
 
       {/* Game Modal */}
       {selectedContest && (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-dark-950/70 p-4 backdrop-blur-sm">
           <div
             className="bento-card max-h-[80vh] w-full max-w-lg overflow-y-auto"
             onClick={(e) => e.stopPropagation()}

src/pages/Polls.tsx

@@ -139,7 +139,7 @@ export default function Polls() {
       {selectedPoll && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
           <div
-            className="absolute inset-0 bg-black/60"
+            className="absolute inset-0 bg-dark-950/60"
             onClick={handleClosePoll}
             aria-hidden="true"
           />

src/pages/ReferralNetwork/components/NetworkFilters.tsx

@@ -171,7 +171,7 @@ export function NetworkFilters({ data, className }: NetworkFiltersProps) {
       {/* Mobile: full-screen overlay */}
       {isOpen && (
         <div className="fixed inset-x-0 top-0 z-50 sm:hidden">
-          <div className="fixed inset-0 bg-black/60" onClick={() => setIsOpen(false)} />
+          <div className="fixed inset-0 bg-dark-950/60" onClick={() => setIsOpen(false)} />
           <div className="relative mx-3 mt-3 rounded-xl border border-dark-700/50 bg-dark-900/95 p-4 backdrop-blur-md">
             <div className="mb-3 flex items-center justify-between">
               <h3 className="text-sm font-semibold text-dark-100">

src/pages/Support.tsx

@@ -346,7 +346,7 @@ export default function Support() {
               </div>
             )}
             {att.uploading && (
-              <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/50">
+              <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-dark-950/50">
                 <span className="h-4 w-4 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
               </div>
             )}

src/pages/TelegramCallback.tsx

@@ -80,7 +80,7 @@ export default function TelegramCallback() {
   return (
     <div className="min-h-viewport flex items-center justify-center bg-dark-950">
       <div className="text-center">
-        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+        <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
         <h2 className="text-lg font-semibold text-dark-50">{t('auth.authenticating')}</h2>
         <p className="mt-2 text-sm text-dark-400">{t('common.loading')}</p>
       </div>

src/pages/VerifyEmail.tsx

@@ -75,7 +75,7 @@ export default function VerifyEmail() {
       <div className="w-full max-w-md text-center">
         {status === 'loading' && (
           <div>
-            <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-accent-500"></div>
+            <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
             <h2 className="text-lg font-semibold text-dark-50 sm:text-xl">
               {t('emailVerification.verifying')}
             </h2>
@@ -95,7 +95,7 @@ export default function VerifyEmail() {
               {t('emailVerification.redirecting', 'Redirecting to dashboard...')}
             </p>
             <div className="mt-4">
-              <div className="mx-auto h-6 w-6 animate-spin rounded-full border-b-2 border-accent-500"></div>
+              <div className="mx-auto h-6 w-6 animate-spin rounded-full border-2 border-accent-500 border-t-transparent"></div>
             </div>
           </div>
         )}