fix: darker background, brighter borders, px-7 margins for real inset

Background darkened to #06060E, surface-1 bumped to #141420 for
visible card contrast. Borders brightened to #32324E. All pages
use px-7 (28px) side margins. Cards use full border opacity.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/Card.tsx

@@ -11,7 +11,7 @@ interface CardProps {
 export function Card({ children, className = '', glow = false, onClick }: CardProps) {
   return (
     <motion.div
-      className={`rounded-2xl bg-surface-1 border border-border/80 p-5 ${glow ? 'border-gold/50 shadow-[0_0_20px_rgba(212,168,67,0.12)]' : ''} ${onClick ? 'cursor-pointer active:scale-[0.98]' : ''} ${className}`}
+      className={`rounded-2xl bg-surface-1 border border-border p-5 ${glow ? 'border-gold/50 shadow-[0_0_20px_rgba(212,168,67,0.15)]' : ''} ${onClick ? 'cursor-pointer active:scale-[0.98]' : ''} ${className}`}
       whileHover={onClick ? { y: -2, boxShadow: '0 8px 30px rgba(212,168,67,0.12)' } : undefined}
       whileTap={onClick ? { scale: 0.98 } : undefined}
       onClick={onClick}

src/index.css

 @import "tailwindcss";
 
 @theme {
-  --color-background: #0A0A14;
-  --color-surface-1: #12121F;
-  --color-surface-2: #1A1A2E;
-  --color-surface-3: #242438;
-  --color-border: #2A2A4A;
-  --color-border-gold: rgba(212, 168, 67, 0.2);
+  --color-background: #06060E;
+  --color-surface-1: #141420;
+  --color-surface-2: #1C1C30;
+  --color-surface-3: #26263C;
+  --color-border: #32324E;
+  --color-border-gold: rgba(212, 168, 67, 0.25);
 
   --color-gold: #D4A843;
   --color-gold-light: #E8C55A;

src/pages/BotSelectPage.tsx

@@ -47,7 +47,7 @@ export function BotSelectPage() {
   }
 
   return (
-    <PageTransition className="px-6 py-7 flex flex-col gap-6 pb-36">
+    <PageTransition className="px-7 py-7 flex flex-col gap-6 pb-36">
       {/* Header */}
       <div className="flex items-center gap-4">
         <motion.button

src/pages/HomePage.tsx

@@ -20,7 +20,7 @@ export function HomePage() {
   const todayTip = dailyTips[new Date().getDay()]
 
   return (
-    <PageTransition className="px-6 py-7 flex flex-col gap-8">
+    <PageTransition className="px-7 py-7 flex flex-col gap-8">
       {profile && (
         <motion.div
           className="flex items-center gap-4"
@@ -71,7 +71,7 @@ export function HomePage() {
       <div className="grid grid-cols-2 gap-3">
         <motion.button
           onClick={() => navigate('/bot-select')}
-          className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border/60"
+          className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.3 }}
@@ -88,7 +88,7 @@ export function HomePage() {
 
         <motion.button
           onClick={() => navigate('/friends')}
-          className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border/60"
+          className="flex flex-col items-center gap-3 p-6 rounded-2xl bg-surface-1 border border-border"
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.4 }}
@@ -106,7 +106,7 @@ export function HomePage() {
 
       <div>
         <h3 className="text-sm font-bold mb-4 text-text-muted">اخر المباريات</h3>
-        <div className="flex flex-col items-center py-10 gap-4 rounded-2xl bg-surface-1 border border-border/60">
+        <div className="flex flex-col items-center py-10 gap-4 rounded-2xl bg-surface-1 border border-border">
           <motion.div
             className="w-14 h-14 rounded-2xl bg-surface-3/60 flex items-center justify-center"
             animate={{ rotate: [0, 3, -3, 0] }}
@@ -128,7 +128,7 @@ export function HomePage() {
         </div>
       </div>
 
-      <div className="p-5 rounded-2xl bg-surface-1 border border-border/60 relative overflow-hidden">
+      <div className="p-5 rounded-2xl bg-surface-1 border border-border relative overflow-hidden">
         <div className="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-gold/6 to-transparent rounded-bl-full" />
         <div className="flex items-start gap-4">
           <div className="w-10 h-10 rounded-xl bg-gold/10 flex items-center justify-center flex-shrink-0">
@@ -151,7 +151,7 @@ function StatCard({ icon, value, label, delay, accent }: { icon: React.ReactNode
   const borderMap: Record<string, string> = { cyan: 'border-cyan/20', gold: 'border-gold/20', coral: 'border-coral/20' }
   return (
     <motion.div
-      className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border ${borderMap[accent] || 'border-border/60'}`}
+      className={`flex flex-col items-center gap-2 p-4 rounded-2xl bg-surface-1 border ${borderMap[accent] || 'border-border'}`}
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ delay }}

src/pages/PlayPage.tsx

@@ -28,7 +28,7 @@ export function PlayPage() {
   const otherGames = GAMES.filter((g) => g.key !== 'chess')
 
   return (
-    <PageTransition className="px-6 py-7 flex flex-col gap-7">
+    <PageTransition className="px-7 py-7 flex flex-col gap-7">
       <h1 className="text-xl font-bold">اختر اللعبة</h1>
 
       {/* Chess Hero Card */}

src/pages/ProfilePage.tsx

@@ -26,7 +26,7 @@ export function ProfilePage() {
     : 0
 
   return (
-    <PageTransition className="px-6 py-7 flex flex-col gap-6">
+    <PageTransition className="px-7 py-7 flex flex-col gap-6">
       {/* Avatar + Name */}
       <div className="flex items-start justify-between">
         <div className="flex items-center gap-4">