fix: update PurchaseSubscriptionSidebar and AppointmentSettingsPage for pixel-perfect alignment and color consistency

assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx

@@ -78,7 +78,7 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
             display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
             padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
             lineHeight: 1, textAlign: 'right',
-            background: isActive ? '#f17732' : 'transparent',
+            background: isActive ? 'var(--accent)' : 'transparent',
             color: isActive ? '#FFFFFF' : 'var(--text-2)',
             cursor: item.to ? 'pointer' : 'not-allowed',
             transition: 'background .14s',

assets/admin/components/layout/SettingsLayout.tsx

@@ -50,7 +50,10 @@ export function menuForRole(role: string | null | undefined): SettingsMenuItem[]
 export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
   return (
     <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
-      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
+      <div
+        className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5"
+        style={{ marginInlineStart: 'calc(-1 * var(--gap))' }}
+      >
         <PurchaseSubscriptionSidebar active={active} />
         <div style={{ minWidth: 0 }}>{children}</div>
       </div>