/* ========== الثيمات: كل ثيم يعرّف المتغيرات فقط ========== */
[data-theme=neon]{--bg:radial-gradient(circle at 15% 10%,#2a0b52 0,transparent 42%),radial-gradient(circle at 85% 85%,#003a4a 0,transparent 45%),#05050c;--panel:rgba(16,14,34,.66);--panel-solid:#100e22;--line:rgba(0,240,255,.2);--ink:#eaf8ff;--mute:#8d93b8;--acc:#00f0ff;--acc2:#ff2bd6;--glow:0 0 6px rgba(0,240,255,.55),0 0 22px rgba(255,43,214,.3);--tglow:0 0 10px rgba(0,240,255,.7),0 0 24px rgba(255,43,214,.45)}
[data-theme=kitty]{--bg:radial-gradient(#ffd3e8 2px,transparent 2.6px) 0 0/26px 26px,linear-gradient(160deg,#ffeaf4,#ffc6df 60%,#ffb3d4);--panel:rgba(255,255,255,.78);--panel-solid:#fff3f9;--line:rgba(255,79,163,.25);--ink:#5c1f42;--mute:#a0587e;--acc:#ff4fa3;--acc2:#ff8cc6;--on-acc:#fff;--glow:0 0 0 2px rgba(255,79,163,.2),0 6px 18px rgba(255,79,163,.35);--tglow:0 2px 0 #fff,0 0 14px rgba(255,79,163,.5);--font-h:"Marhey";--radius:22px;--field:rgba(255,255,255,.75);--shadow:0 8px 24px rgba(255,79,163,.18)}
[data-theme=lilac]{--bg:radial-gradient(circle at 80% 20%,#fbcfe8 0,transparent 40%),linear-gradient(160deg,#f5edff,#e3d1ff 55%,#d8c2f5);--panel:rgba(255,255,255,.72);--panel-solid:#faf5ff;--line:rgba(147,51,234,.2);--ink:#3b1a5c;--mute:#7c5e9c;--acc:#9333ea;--acc2:#db2777;--on-acc:#fff;--glow:0 6px 20px rgba(147,51,234,.3);--tglow:0 0 16px rgba(219,39,119,.35);--font-h:"Aref Ruqaa";--radius:20px;--field:rgba(255,255,255,.7);--shadow:0 8px 26px rgba(91,33,182,.14)}
[data-theme=hiphop]{--bg:radial-gradient(circle at 10% 20%,rgba(255,212,0,.16),transparent 32%),radial-gradient(circle at 90% 75%,rgba(255,31,75,.18),transparent 32%),repeating-linear-gradient(45deg,#121212 0 2px,#0b0b0b 2px 14px);--panel:rgba(18,18,18,.86);--panel-solid:#141414;--line:rgba(255,212,0,.35);--ink:#fff;--mute:#b8b0a0;--acc:#ffd400;--acc2:#ff1f4b;--glow:4px 4px 0 #ff1f4b;--tglow:3px 3px 0 #ff1f4b;--font-h:"Lalezar";--radius:6px;--shadow:6px 6px 0 rgba(0,0,0,.6)}
[data-theme=formal]{--bg:linear-gradient(180deg,#eef1f6,#f7f8fb);--panel:#fff;--panel-solid:#fff;--line:#e2e6ee;--ink:#111827;--mute:#6b7280;--acc:#1e3a8a;--acc2:#2563eb;--on-acc:#fff;--glow:0 0 0 3px rgba(37,99,235,.15);--tglow:none;--font-h:"IBM Plex Sans Arabic";--radius:12px;--field:#f5f7fb;--shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.04)}
[data-theme=forest]{--bg:radial-gradient(ellipse at top,#1d5c34 0,transparent 60%),linear-gradient(180deg,#0e2e1a,#0a2214 60%,#06170d);--panel:rgba(10,32,18,.7);--panel-solid:#0d2817;--line:rgba(125,220,107,.22);--ink:#e8f6e9;--mute:#94b89a;--acc:#7ddc6b;--acc2:#f4c430;--glow:0 0 14px rgba(125,220,107,.35);--tglow:0 0 14px rgba(244,196,48,.4)}
[data-theme=ocean]{--bg:radial-gradient(ellipse at top,#1272a8 0,transparent 55%),linear-gradient(180deg,#0a4a75,#063256 45%,#021626);--panel:rgba(4,34,62,.62);--panel-solid:#05253f;--line:rgba(79,209,255,.25);--ink:#e6f7ff;--mute:#8fb8d0;--acc:#4fd1ff;--acc2:#7cf5d0;--glow:0 0 16px rgba(79,209,255,.4);--tglow:0 0 14px rgba(79,209,255,.6);--font-h:"Changa"}
[data-theme=aqua]{--bg:radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.7),transparent 50%),linear-gradient(180deg,#a8eeff 0%,#55cdf0 50%,#2aa3cc 84%,#e8d7a6 84.5%,#d4bb85 100%);--panel:rgba(255,255,255,.6);--panel-solid:#effbff;--line:rgba(0,119,182,.22);--ink:#06324a;--mute:#3f6f86;--acc:#0077b6;--acc2:#ff7b00;--on-acc:#fff;--glow:0 6px 18px rgba(0,119,182,.3);--tglow:0 2px 0 rgba(255,255,255,.7);--font-h:"Marhey";--field:rgba(255,255,255,.65);--shadow:0 8px 24px rgba(0,60,100,.18)}
@property --h{syntax:"<number>";inherits:true;initial-value:0}
[data-theme=rgb]{--bg:#050507;--panel:rgba(14,14,18,.8);--panel-solid:#0e0e12;--line:hsl(var(--h) 100% 55% / .45);--ink:#f2f2f2;--mute:#9a9aa6;--acc:hsl(var(--h) 100% 60%);--acc2:hsl(calc(var(--h) + 140) 100% 60%);--glow:0 0 14px hsl(var(--h) 100% 55% / .7);--tglow:0 0 14px hsl(var(--h) 100% 60%);--font-h:"Changa"}
html[data-theme=rgb]{animation:hue 6s linear infinite}
@keyframes hue{to{--h:360}}
[data-theme=solar]{--bg:radial-gradient(ellipse at bottom left,#1b2840 0,#07080f 70%);--panel:rgba(12,14,28,.7);--panel-solid:#0c0e1c;--line:rgba(255,183,3,.22);--ink:#f2f4ff;--mute:#8e95b5;--acc:#ffb703;--acc2:#8ecae6;--glow:0 0 16px rgba(255,183,3,.4);--tglow:0 0 16px rgba(255,183,3,.6);--font-h:"Changa"}
[data-theme=alien]{--bg:radial-gradient(circle at 70% 25%,#124d26 0,transparent 45%),radial-gradient(circle at 20% 90%,#0a3a2c 0,transparent 40%),#020d07;--panel:rgba(6,26,14,.7);--panel-solid:#061a0e;--line:rgba(57,255,20,.25);--ink:#e8ffe0;--mute:#86b77a;--acc:#39ff14;--acc2:#b3ff00;--glow:0 0 8px rgba(57,255,20,.6),0 0 24px rgba(57,255,20,.25);--tglow:0 0 12px #39ff14;--font-h:"Changa"}
[data-theme=mario]{--bg:linear-gradient(180deg,#5c94fc,#7fb0ff);--panel:#fff;--panel-solid:#fff;--line:#000;--ink:#1a1a1a;--mute:#555;--acc:#e52521;--acc2:#049cd8;--on-acc:#fff;--glow:4px 4px 0 #000;--tglow:3px 3px 0 #000;--font-h:"Lalezar";--radius:6px;--field:#fff8e1;--shadow:5px 5px 0 rgba(0,0,0,.85)}
[data-theme=sonic]{--bg:linear-gradient(180deg,#1f63e6,#0c2d8f 70%,#071c5c);--panel:rgba(10,30,100,.6);--panel-solid:#0c2470;--line:rgba(255,215,0,.35);--ink:#fff;--mute:#b9c8f0;--acc:#ffd700;--acc2:#ff3b30;--glow:0 0 14px rgba(255,215,0,.55);--tglow:3px 3px 0 #ff3b30,0 0 16px rgba(255,215,0,.6);--font-h:"Lalezar";--radius:18px}
[data-theme=retro]{--bg:linear-gradient(180deg,#14002e,#2d0052 55%,#4a0060);--panel:rgba(20,0,46,.78);--panel-solid:#1a0038;--line:#ff00c8;--ink:#fffbe0;--mute:#c39ad8;--acc:#00f6ff;--acc2:#ff00c8;--glow:4px 4px 0 #ff00c8;--tglow:3px 3px 0 #ff00c8,-2px -2px 0 #00f6ff;--font-h:"Press Start 2P","Lalezar";--radius:0;--shadow:6px 6px 0 #000}
[data-theme=custom]{--bg:linear-gradient(rgba(5,5,12,.45),rgba(5,5,12,.55)),var(--custom-bg,none) center/cover,#15151f;--panel:rgba(14,14,22,.62);--panel-solid:#14141e;--line:rgba(255,255,255,.18);--ink:#fff;--mute:#c4c4d4;--acc:#a78bfa;--acc2:#f472b6;--glow:0 0 16px rgba(167,139,250,.45);--tglow:0 2px 10px rgba(0,0,0,.8)}

html:is([data-theme=kitty],[data-theme=lilac],[data-theme=formal],[data-theme=aqua],[data-theme=mario]){color-scheme:light}
html:is([data-theme=kitty],[data-theme=lilac],[data-theme=formal],[data-theme=aqua],[data-theme=mario]) select option{background:#fff;color:#222}
html[data-theme=retro] h1,html[data-theme=retro] .kpi b{letter-spacing:1px}
html[data-theme=retro] .kpi b,html[data-theme=retro] .lb-s b,html[data-theme=retro] .pts{font-size:20px}
html[data-theme=mario] .panel,html[data-theme=mario] .tcard{border-width:3px}
html[data-theme=hiphop] .top h1,html[data-theme=hiphop] .brand b{transform:rotate(-2deg);display:inline-block}

/* ========== جزيئات الحركة ========== */
#fx span{position:absolute;font-size:var(--s);line-height:1;animation-duration:var(--d);animation-delay:var(--dl);animation-iteration-count:infinite;animation-timing-function:linear;opacity:.55;will-change:transform;user-select:none}
.fx-up{left:var(--x);top:0;animation-name:fxUp}
.fx-down{left:var(--x);top:0;animation-name:fxDown}
.fx-twinkle{left:var(--x);top:var(--y);animation-name:twinkle!important;animation-timing-function:ease-in-out!important}
.fx-bounce{left:var(--x);top:var(--y);animation-name:bob;animation-timing-function:ease-in-out!important;animation-direction:alternate}
.fx-swim{top:var(--y);left:0;animation-name:swimL}
.fx-swim.rev{animation-name:swimR}
.fx-fly{top:var(--y);left:0;animation-name:fly}
.fx-dash{top:var(--y);left:0;animation-name:dashX;opacity:.75!important}
@keyframes fxUp{from{transform:translate(0,108vh) rotate(0)}50%{transform:translate(28px,50vh) rotate(18deg)}to{transform:translate(-12px,-12vh) rotate(-10deg)}}
@keyframes fxDown{from{transform:translate(0,-10vh) rotate(0)}50%{transform:translate(42px,50vh) rotate(180deg)}to{transform:translate(-22px,108vh) rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1)}}
@keyframes bob{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-34px) rotate(8deg)}}
@keyframes swimL{from{transform:translate(108vw,0)}25%{transform:translate(78vw,-16px)}50%{transform:translate(50vw,0)}75%{transform:translate(22vw,16px)}to{transform:translate(-12vw,0)}}
@keyframes swimR{from{transform:translate(-12vw,0) scaleX(-1)}25%{transform:translate(22vw,14px) scaleX(-1)}50%{transform:translate(50vw,0) scaleX(-1)}75%{transform:translate(78vw,-14px) scaleX(-1)}to{transform:translate(108vw,0) scaleX(-1)}}
@keyframes fly{from{transform:translate(-15vw,8vh) rotate(-10deg)}30%{transform:translate(30vw,-4vh) rotate(8deg)}60%{transform:translate(65vw,6vh) rotate(-6deg)}to{transform:translate(118vw,-6vh) rotate(10deg)}}
@keyframes dashX{from{transform:translateX(112vw)}to{transform:translateX(-22vw)}}
.star{color:var(--acc);text-shadow:0 0 8px var(--acc)}
.sparkle{filter:drop-shadow(0 0 6px #fff)}
.firefly{color:#f6ff8a;text-shadow:0 0 8px #f6ff8a,0 0 18px #d4ff3a;opacity:1!important}
.bubble{color:#d8f6ff;text-shadow:0 0 6px #fff;opacity:.6!important}
.ufo{filter:drop-shadow(0 0 12px #39ff14);opacity:.85!important}
.ring{width:var(--s);height:var(--s);border-radius:50%;border:4px solid #ffd700;box-shadow:0 0 12px #ffd700,inset 0 0 6px #fff59d}
.pixel{image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #ff00c8)}

/* ========== زخارف خاصة بكل ثيم ========== */
.neon-grid{position:absolute;left:-50%;right:-50%;bottom:-10vh;height:55vh;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--acc2) 45%,transparent) 0 2px,transparent 2px 70px),repeating-linear-gradient(0deg,color-mix(in srgb,var(--acc) 40%,transparent) 0 2px,transparent 2px 70px);transform:perspective(320px) rotateX(62deg);transform-origin:bottom;mask-image:linear-gradient(transparent,#000 70%);-webkit-mask-image:linear-gradient(transparent,#000 70%);animation:gridMove 2.5s linear infinite;opacity:.45}
@keyframes gridMove{to{background-position:0 70px,0 70px}}
.retro-sun{position:absolute;left:50%;bottom:32vh;width:300px;height:300px;margin-left:-150px;border-radius:50%;background:linear-gradient(#ffe600,#ff7b00 45%,#ff00c8);mask-image:repeating-linear-gradient(180deg,#000 0 22px,transparent 22px 30px);-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 22px,transparent 22px 30px);box-shadow:0 0 80px #ff00c8;opacity:.55}
.scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);animation:flicker 4s infinite}
@keyframes flicker{50%{opacity:.85}}
.marquee{position:absolute;bottom:0;left:0;right:0;height:46px;overflow:hidden;background:#ffd400;transform:rotate(-1.5deg) translateY(6px);box-shadow:0 -4px 0 #ff1f4b}
.marquee span{display:inline-block;white-space:nowrap;font-family:"Lalezar";font-size:28px;color:#111;line-height:46px;animation:marq 22s linear infinite;direction:ltr}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trees{position:absolute;bottom:-8px;left:0;right:0;font-size:90px;line-height:1;white-space:nowrap;overflow:hidden;opacity:.35;filter:saturate(.7) brightness(.6);letter-spacing:-20px}
.waves{position:absolute;top:0;left:0;right:0;height:120px;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.25),transparent 70%);animation:light 6s ease-in-out infinite alternate}
@keyframes light{to{opacity:.4;transform:scaleX(1.3)}}
.seabed{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;font-size:46px;line-height:1}
.seabed span{transform-origin:bottom;animation:sway calc(2.5s + var(--i)*.2s) ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.rgb-glow{position:absolute;inset:-30%;background:conic-gradient(from 0deg,#ff0040,#ffb000,#3dff00,#00e5ff,#7c4dff,#ff00c8,#ff0040);filter:blur(90px);opacity:.28;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.solar{position:absolute;left:12vw;top:78vh;opacity:.75}
.sun{position:absolute;width:76px;height:76px;margin:-38px;border-radius:50%;background:radial-gradient(#fff6c2,#ffb703 45%,#fb8500);box-shadow:0 0 60px 18px rgba(255,183,3,.55);animation:pulse 3s infinite}
.orbit{position:absolute;width:calc(var(--r)*2);height:calc(var(--r)*2);margin:calc(var(--r)*-1);border:1px solid rgba(255,255,255,.09);border-radius:50%;animation:spin var(--d) linear infinite}
.planet{position:absolute;top:calc(var(--ps)/-2);left:50%;width:var(--ps);height:var(--ps);margin-left:calc(var(--ps)/-2);border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.7),var(--c) 55%);box-shadow:0 0 12px var(--c)}
.planet.ring::after{content:"";position:absolute;inset:35% -45%;border:2px solid rgba(232,213,160,.7);border-radius:50%;transform:rotate(-20deg)}
.m-ground{position:absolute;bottom:0;left:0;right:0;height:56px;background:linear-gradient(#000 0 3px,transparent 3px) 0 0/28px 28px,linear-gradient(90deg,#000 0 3px,transparent 3px) 0 0/56px 28px,linear-gradient(90deg,transparent 28px,#000 28px 31px,transparent 31px) 0 28px/56px 28px no-repeat,#c84c0c;border-top:4px solid #000;box-shadow:0 -8px 0 #00a800}
.qblocks{position:absolute;top:22vh;left:8vw;display:flex;gap:0}
.qblocks i,.qblocks b{width:40px;height:40px;display:grid;place-items:center;font:700 22px "Press Start 2P",monospace;color:#fff;background:#f8b800;border:3px solid #000;box-shadow:inset -4px -4px 0 #c07000;text-shadow:2px 2px 0 #000;animation:qbump 2.4s infinite}
.qblocks b{background:#c84c0c;box-shadow:inset -4px -4px 0 #7a2e06}
.qblocks i:nth-child(2){animation-delay:.6s}.qblocks i:nth-child(4){animation-delay:1.2s}
@keyframes qbump{0%,85%,100%{transform:none}90%{transform:translateY(-10px)}}
.speedlines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 38px,rgba(255,255,255,.08) 38px 40px,transparent 40px 90px);mask-image:repeating-linear-gradient(90deg,#000 0 120px,transparent 120px 300px);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 120px,transparent 120px 300px);mask-size:300px 100%;-webkit-mask-size:300px 100%;animation:speed .5s linear infinite}
@keyframes speed{to{mask-position:-300px 0;-webkit-mask-position:-300px 0}}

/* الثيمات الفاتحة: حواف المودال */
html[data-theme=mario] .modal form,html[data-theme=mario] .toast{border:3px solid #000;box-shadow:6px 6px 0 #000}
html[data-theme=retro] .modal form{border:2px solid #ff00c8}