/* أسلوب الملف: «مجرة التعلّم»؛ خلفية مدارية واضحة وبطاقات اختيار كبيرة ملوّنة، مع الحفاظ على محتوى الحاسبة وسلوكها بالكامل. */
:root{
  --bg:#060814; --bg2:#0b0e1e; --card:#121628; --card2:#181d32;
  --border:#2b3150; --border-soft:#202641; --txt:#f5f7ff; --muted:#9ca5be; --muted2:#626d89;
  --gold:#f0b93d; --gold2:#d89a1f; --violet:#8b7cf6; --cyan:#34d3c9;
  --red:#f1685e; --pink:#ef5da8; --green:#34d399;
  --r-lg:22px; --r-md:16px; --r-sm:10px;
  --shadow:0 24px 56px -26px rgba(0,0,0,.72);
  --glass:rgba(15,19,39,.72);
  --glow:0 18px 48px -26px rgba(91,83,216,.7);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;width:100vw;max-width:100vw;overflow-x:hidden;}
html{direction:ltr;}
body{direction:ltr;}
.wrap{direction:rtl;}
html[dir="ltr"] .wrap{direction:ltr;}
body{background:
  radial-gradient(900px 540px at 50% -18%,rgba(139,124,246,.26),transparent 62%),
  radial-gradient(620px 520px at -12% 100%,rgba(52,211,201,.13),transparent 64%),
  radial-gradient(580px 480px at 112% 82%,rgba(239,93,168,.10),transparent 64%),
  linear-gradient(155deg,#070917 0%,#060814 48%,#0a0b1a 100%);
  background-attachment:fixed; color:var(--txt); font-family:'Tajawal',sans-serif; min-height:100vh; position:relative; overflow-x:hidden;}
html[dir="ltr"] body{font-family:'Poppins','Tajawal',sans-serif;}
.num{font-family:'Space Grotesk',sans-serif;}
.disp{font-family:'Cairo',sans-serif;}
html[dir="ltr"] .disp{font-family:'Poppins',sans-serif;}

.stars{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background-image:
    radial-gradient(1.4px 1.4px at 20px 30px,rgba(255,255,255,.92),transparent),
    radial-gradient(1.4px 1.4px at 90px 120px,rgba(210,224,255,.8),transparent),
    radial-gradient(1px 1px at 160px 60px,rgba(255,255,255,.78),transparent),
    radial-gradient(1.4px 1.4px at 210px 190px,rgba(185,174,255,.78),transparent),
    radial-gradient(1px 1px at 260px 40px,rgba(255,255,255,.7),transparent),
    radial-gradient(1.4px 1.4px at 310px 150px,rgba(158,234,255,.72),transparent),
    radial-gradient(1px 1px at 40px 200px,rgba(255,255,255,.66),transparent),
    radial-gradient(1px 1px at 130px 240px,rgba(243,204,255,.62),transparent);
  background-repeat:repeat; background-size:340px 260px; opacity:.68;
}
.stars::before{content:''; position:absolute; width:820px; height:820px; border-radius:50%; top:-470px; left:50%; transform:translateX(-50%);
  border:1px solid rgba(166,154,255,.17); box-shadow:0 0 0 95px rgba(126,113,246,.026),0 0 0 190px rgba(52,211,201,.018),0 0 80px 16px rgba(139,124,246,.15);}
.stars::after{content:'';position:absolute; inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 34%),
             radial-gradient(620px 400px at 13% -10%, rgba(139,124,246,.19), transparent 62%),
             radial-gradient(520px 380px at 110% 10%, rgba(52,211,201,.15), transparent 62%),
             radial-gradient(720px 500px at 50% 120%, rgba(240,185,61,.10), transparent 64%);
}
.wrap{position:relative; z-index:1; isolation:isolate; width:calc(100% - 24px); max-width:520px; margin-left:auto; margin-right:auto; padding:14px 16px 60px;}
.wrap::before{content:''; position:absolute; width:720px; height:720px; top:82px; left:50%; z-index:-1; transform:translateX(-50%) rotate(-16deg); border-radius:50%; pointer-events:none;
  border:1px solid rgba(139,124,246,.10); box-shadow:0 0 0 78px rgba(139,124,246,.018),0 0 0 156px rgba(52,211,201,.012),0 0 72px 8px rgba(139,124,246,.09);}
.wrap::after{content:''; position:absolute; width:540px; height:300px; top:164px; left:50%; z-index:-1; transform:translateX(-50%) rotate(11deg); border-radius:50%; pointer-events:none; border:1px solid rgba(52,211,201,.09);}
.hidden{display:none !important;}
.fadein{animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* navbar */
.navbar{display:flex; align-items:center; justify-content:space-between; padding:8px 6px; position:sticky; top:8px; z-index:20;
  background:linear-gradient(120deg,rgba(27,32,59,.82),rgba(13,17,34,.74)); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); border:1px solid rgba(170,181,255,.16); border-radius:18px; margin-bottom:10px; box-shadow:0 16px 34px -24px rgba(0,0,0,.9),inset 0 1px rgba(255,255,255,.06);}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; padding-inline-start:4px;}
.mark{width:40px; height:40px; border-radius:50%; position:relative; flex:none;
  background:conic-gradient(from 200deg, var(--violet), var(--cyan), var(--gold), var(--violet));
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 22px rgba(139,124,246,.62),inset 0 1px rgba(255,255,255,.32);}
.mark::before{content:'';position:absolute; width:60px; height:21px; border:1.5px solid rgba(255,255,255,.6); border-radius:50%; transform:rotate(-25deg); box-shadow:0 0 8px rgba(52,211,201,.28);}
.mark span{font-size:15px; position:relative;}
.brand-name{font-family:'Cairo',sans-serif; font-weight:900; font-size:17.5px; letter-spacing:-.35px; text-shadow:0 2px 16px rgba(136,126,255,.16);}
html[dir="ltr"] .brand-name{font-family:'Poppins',sans-serif;}
.brand-name b{color:var(--gold); font-weight:900; text-shadow:0 0 12px rgba(240,185,61,.34);}
.navctrls{display:flex; flex-direction:row; direction:ltr; align-items:center; gap:6px; padding-inline-end:4px; min-width:0;}
.modepills{display:flex; gap:3px; background:rgba(8,11,26,.76); border:1px solid rgba(162,173,255,.14); border-radius:99px; padding:3px; box-shadow:inset 0 1px rgba(255,255,255,.03);}
.modepill{border:none; background:transparent; color:var(--muted); font-family:inherit; font-size:15px; padding:6px 8px; border-radius:99px; cursor:pointer; transition:transform .18s cubic-bezier(.23,1,.32,1),background .18s,color .18s,box-shadow .18s;}
.modepill:hover{color:var(--txt); transform:translateY(-1px);}
.modepill.active{background:linear-gradient(135deg,rgba(139,124,246,.34),rgba(52,211,201,.18)); color:var(--txt); box-shadow:inset 0 1px rgba(255,255,255,.13),0 6px 15px -11px rgba(98,87,231,.9);}
.langtoggle{display:flex; flex-direction:row; direction:ltr; background:rgba(8,11,26,.76); border:1px solid rgba(162,173,255,.14); border-radius:99px; padding:2px; position:relative; font-family:'Space Grotesk'; box-shadow:inset 0 1px rgba(255,255,255,.03);}
.langtoggle button{border:none; background:transparent; color:var(--muted); font-size:11px; font-weight:700; padding:6px 9px; border-radius:99px; cursor:pointer; position:relative; z-index:1;}
.langtoggle button.active{color:#1a1200;}
.langthumb{position:absolute; top:2px; bottom:2px; width:calc(50% - 2px); background:linear-gradient(90deg,var(--gold),var(--pink)); border-radius:99px; transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:0;}
.settings-btn{width:34px; height:34px; border:1px solid rgba(162,173,255,.17); background:linear-gradient(135deg,rgba(35,42,75,.88),rgba(12,16,33,.9)); color:var(--muted); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; box-shadow:inset 0 1px rgba(255,255,255,.06),0 7px 14px -12px rgba(0,0,0,.9); transition:transform .18s cubic-bezier(.23,1,.32,1), color .18s, border-color .18s, box-shadow .18s;}
.settings-btn:hover{border-color:rgba(240,185,61,.65); color:var(--gold); transform:translateY(-1px) rotate(25deg); box-shadow:0 10px 18px -12px rgba(240,185,61,.8),inset 0 1px rgba(255,255,255,.09);}
.settings-btn:active{transform:scale(.94) rotate(25deg);}

/* home */
.hero{padding:26px 4px 8px; text-align:center;}
.hero .eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--cyan); background:rgba(52,211,201,.09);
  border:1px solid rgba(52,211,201,.25); padding:5px 12px; border-radius:99px; margin-bottom:14px;}
.hero h1{font-family:'Cairo',sans-serif; font-weight:900; font-size:29px; letter-spacing:-.7px; line-height:1.28; margin:0 0 9px; text-shadow:0 8px 30px rgba(0,0,0,.35);}
html[dir="ltr"] .hero h1{font-family:'Poppins',sans-serif;}
.hero h1 .accent{background:linear-gradient(90deg,var(--gold),var(--pink),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{color:var(--muted); font-size:14px; line-height:1.7; margin:0 auto; max-width:340px;}

.cards{display:flex; flex-direction:column; gap:12px; margin-top:20px;}
.mcard{background:linear-gradient(128deg,rgba(33,39,72,.9),rgba(13,18,38,.94)); border:1px solid rgba(177,187,255,.22); border-radius:var(--r-lg);
  padding:17px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:transform .22s cubic-bezier(.23,1,.32,1),border-color .22s,box-shadow .22s,background .22s; text-align:right; position:relative; overflow:hidden; isolation:isolate; box-shadow:inset 0 1px rgba(255,255,255,.075),inset 0 -14px 30px -28px rgba(7,9,27,.76),0 16px 34px -30px rgba(0,0,0,.95);}
.mcard::before{content:''; position:absolute; inset:0; z-index:-1; opacity:0; background:linear-gradient(112deg,transparent 15%,rgba(255,255,255,.10) 48%,transparent 76%); transform:translateX(68%); transition:transform .55s cubic-bezier(.23,1,.32,1),opacity .22s;}
html[dir="ltr"] .mcard{text-align:left;}
.mcard:active{transform:scale(.97);}
.mcard:hover{border-color:rgba(180,173,255,.66); background:linear-gradient(128deg,rgba(50,55,97,.96),rgba(17,22,47,.97)); box-shadow:0 22px 45px -28px rgba(94,82,235,.82),inset 0 1px rgba(255,255,255,.11); transform:translateY(-4px);}
.mcard:hover::before{opacity:1; transform:translateX(-66%);}
.mcard .micon{width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:24px; flex:none; border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 20px -17px rgba(0,0,0,.95);}
.mcard .mbody{flex:1;}
.mcard .mbody h3{margin:0 0 3px; font-family:'Cairo',sans-serif; font-size:15.5px; font-weight:800;}
html[dir="ltr"] .mcard .mbody h3{font-family:'Poppins',sans-serif;}
.mcard .mbody p{margin:0; font-size:12px; color:var(--muted); line-height:1.5;}
.mcard .arrow{color:var(--muted2); font-size:18px;}
.mcard.sec{border-color:rgba(151,140,255,.27);}
.mcard.basic{border-color:rgba(72,216,207,.25);}
.mcard.bac{border-color:rgba(240,185,61,.25);}
.mcard.sec .micon{background:linear-gradient(145deg,rgba(139,124,246,.28),rgba(139,124,246,.10)); color:var(--violet); box-shadow:0 12px 24px -18px rgba(139,124,246,.98),inset 0 1px rgba(255,255,255,.13);}
.mcard.basic .micon{background:linear-gradient(145deg,rgba(52,211,201,.26),rgba(52,211,201,.09)); color:var(--cyan); box-shadow:0 12px 24px -18px rgba(52,211,201,.94),inset 0 1px rgba(255,255,255,.13);}
.mcard.bac .micon{background:linear-gradient(145deg,rgba(240,185,61,.27),rgba(240,185,61,.09)); color:var(--gold); box-shadow:0 12px 24px -18px rgba(240,185,61,.88),inset 0 1px rgba(255,255,255,.13);}

/* wizard shell */
.panel{background:linear-gradient(180deg,var(--card),var(--card2)); border:1px solid var(--border); border-radius:var(--r-lg); padding:18px; margin-top:12px; box-shadow:var(--shadow);}
.backrow{display:flex; align-items:center; gap:10px; margin:10px 2px 4px;}
.backbtn{background:linear-gradient(135deg,rgba(35,42,75,.9),rgba(13,17,35,.92)); border:1px solid rgba(162,173,255,.17); color:var(--txt); width:34px; height:34px; border-radius:11px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px rgba(255,255,255,.06); transition:transform .18s cubic-bezier(.23,1,.32,1),border-color .18s,box-shadow .18s;}
.backbtn:hover{border-color:rgba(52,211,201,.5); box-shadow:0 9px 18px -13px rgba(52,211,201,.8),inset 0 1px rgba(255,255,255,.09); transform:translateY(-1px);}
.backbtn:active{transform:scale(.9);}
html[dir="ltr"] .backbtn{transform:scaleX(-1);}
.wtitle{font-family:'Cairo',sans-serif; font-weight:800; font-size:15.5px;}
html[dir="ltr"] .wtitle{font-family:'Poppins',sans-serif;}

.steps{display:flex; align-items:center; justify-content:center; gap:6px; margin:14px 0 16px;}
.step-node{width:25px; height:25px; border-radius:50%; background:var(--card2); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10.5px; color:var(--muted2); font-family:'Space Grotesk'; transition:.2s;}
.step-node.done{background:var(--green); border-color:var(--green); color:#062018;}
.step-node.active{background:conic-gradient(var(--gold),var(--pink),var(--violet)); border-color:transparent; color:#1a1200; box-shadow:0 0 0 4px rgba(240,185,61,.16);}
.step-line{width:20px; height:2px; background:var(--border);}
.step-line.done{background:var(--green);}

.sectitle{font-family:'Cairo',sans-serif; font-weight:800; font-size:14.5px; margin:0 0 12px; text-align:center; color:var(--muted);}
html[dir="ltr"] .sectitle{font-family:'Poppins',sans-serif;}
.icon-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
.igrid3{grid-template-columns:1fr 1fr 1fr;}
.ic-btn{background:linear-gradient(145deg,rgba(31,37,66,.84),rgba(16,20,41,.9)); border:1.5px solid rgba(162,173,255,.14); border-radius:var(--r-md); padding:15px 8px; text-align:center; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.045); transition:transform .18s cubic-bezier(.23,1,.32,1),border-color .18s,box-shadow .18s,background .18s;}
.ic-btn:hover{border-color:rgba(139,124,246,.52); background:linear-gradient(145deg,rgba(49,52,91,.9),rgba(18,22,47,.94)); box-shadow:0 12px 24px -20px rgba(97,85,230,.85),inset 0 1px rgba(255,255,255,.07); transform:translateY(-2px);}
.ic-btn:active{transform:scale(.96);}
.ic-btn .em{font-size:24px; display:block; margin-bottom:6px;}
.ic-btn .lb{font-size:12px; font-weight:700;}
.ic-btn.sel{border-color:var(--gold); background:rgba(240,185,61,.10); box-shadow:0 0 0 1px var(--gold) inset, 0 8px 20px -10px rgba(240,185,61,.5);}

.subj-row{background:var(--bg2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:12px; margin-bottom:9px; transition:.2s;}
.subj-row.rowcanceled{opacity:.55;}
.subj-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px;}
.subj-lb{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px;}
.subj-lb .se{font-size:17px;}
.subj-right{display:flex; align-items:center; gap:6px;}
.coef-badge{font-size:10.5px; color:var(--gold); background:rgba(240,185,61,.12); border:1px solid rgba(240,185,61,.3); border-radius:99px; padding:2px 8px; font-family:'Space Grotesk';}
.cancel-btn{width:26px; height:26px; border-radius:8px; border:1.5px solid var(--border-soft); background:var(--card); color:var(--muted); font-size:12px; cursor:pointer;}
.cancel-btn.on{background:rgba(241,104,94,.15); border-color:var(--red); color:var(--red);}
.fields-row{display:flex; gap:7px; flex-wrap:wrap;}
.field-in{flex:1; min-width:88px;}
.field-in label{display:block; font-size:10.5px; color:var(--muted); margin-bottom:4px; white-space:nowrap;}
.field-in label .wt{color:var(--gold2); font-family:'Space Grotesk';}
.field-in input{width:100%; background:var(--card); border:1.5px solid var(--border-soft); color:var(--txt); border-radius:9px; padding:9px 6px; font-size:14px; font-family:'Space Grotesk'; text-align:center; transition:.15s;}
.field-in input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,124,246,.15);}
.field-in input.bad{border-color:var(--red); background:rgba(241,104,94,.08);}
.field-in input.missing{border-color:var(--gold); background:rgba(240,185,61,.10); box-shadow:0 0 0 3px rgba(240,185,61,.12);}
.field-in input.absentmark{border-color:var(--muted2); color:var(--muted); font-style:italic;}
.field-in input:disabled{opacity:.3;}
.absent-hint{font-size:10.5px; color:var(--muted2); text-align:center; margin-top:2px;}
.subj-row.needs-input,.bac-row.needs-input{border-color:rgba(240,185,61,.7); box-shadow:0 0 0 1px rgba(240,185,61,.24), 0 14px 28px -22px rgba(240,185,61,.8);}

.invalid-banner{background:rgba(241,104,94,.10); border:1px solid rgba(241,104,94,.35); color:var(--red); font-size:12px; padding:9px 12px; border-radius:11px; margin-bottom:12px; text-align:center;}

.primary-btn{width:100%; border:1px solid rgba(255,255,255,.19); border-radius:15px; padding:15px; font-family:'Cairo',sans-serif; font-weight:800; font-size:15px; cursor:pointer; margin-top:14px;
  background:linear-gradient(112deg,var(--gold) 0%,#f5ad55 37%,var(--pink) 71%,var(--violet) 100%); background-size:160% 100%; color:#170d17; box-shadow:0 17px 36px -15px rgba(240,185,61,.55),inset 0 1px rgba(255,255,255,.38); position:sticky; bottom:10px; z-index:5;
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .2s,background-position .3s;}
.primary-btn:hover{background-position:100% 0; box-shadow:0 22px 40px -16px rgba(239,93,168,.55),inset 0 1px rgba(255,255,255,.48); transform:translateY(-2px);}
html[dir="ltr"] .primary-btn{font-family:'Poppins',sans-serif;}
.primary-btn:active{transform:scale(.97); box-shadow:0 6px 18px -10px rgba(240,185,61,.5);}

/* result */
.result-box{margin-top:16px; text-align:center; animation:pop .35s ease;}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);}}
.ring{width:148px; height:148px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; position:relative; transition:background 1s ease;}
.ring .inner{width:120px; height:120px; border-radius:50%; background:var(--bg2); display:flex; flex-direction:column; align-items:center; justify-content:center;}
.ring .inner .avgnum{font-size:33px; font-weight:700; font-family:'Space Grotesk';}
.ring .inner .avgmax{font-size:11px; color:var(--muted);}
.verdict-txt{font-family:'Cairo',sans-serif; font-weight:800; font-size:15.5px; margin:6px 0 2px;}
html[dir="ltr"] .verdict-txt{font-family:'Poppins',sans-serif;}
.verdict-sub{color:var(--muted); font-size:12.5px; margin-bottom:14px;}
.bacmsg{background:linear-gradient(90deg, rgba(240,185,61,.14), rgba(239,93,168,.14)); border:1px solid rgba(240,185,61,.35); border-radius:14px; padding:12px; font-family:'Cairo'; font-weight:800; font-size:13.5px; margin-bottom:12px;}
html[dir="ltr"] .bacmsg{font-family:'Poppins',sans-serif;}
.weakbox{background:rgba(241,104,94,.08); border:1px solid rgba(241,104,94,.28); border-radius:14px; padding:12px 14px; text-align:right; margin-bottom:10px;}
html[dir="ltr"] .weakbox{text-align:left;}
.weakbox h4{margin:0 0 6px; font-size:12.5px; color:var(--red); font-family:'Cairo';}
.weakbox ul{margin:0; padding-inline-start:18px; font-size:12px; color:var(--txt); line-height:1.9;}
.goodbox{background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.28); border-radius:14px; padding:12px 14px; text-align:center; font-size:12.5px; color:var(--green); font-weight:700; margin-bottom:10px;}
.subject-avgs{background:rgba(10,12,24,.72); border:1px solid var(--border-soft); border-radius:14px; padding:12px; margin-top:12px; text-align:right;}
html[dir="ltr"] .subject-avgs{text-align:left;}
.subject-avgs-title{color:var(--muted); font-family:'Cairo',sans-serif; font-size:12px; font-weight:800; margin:0 0 9px;}
html[dir="ltr"] .subject-avgs-title{font-family:'Poppins',sans-serif;}
.subject-avgs-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
.subject-avg{display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:8px 9px; background:var(--card); border:1px solid var(--border-soft); border-radius:10px;}
.subject-avg-name{font-size:10.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.subject-avg-value{font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; color:var(--cyan); flex:none;}
.subject-avg-value.na{color:var(--muted2);}

.bac-row{display:flex; align-items:center; justify-content:space-between; background:var(--bg2); border:1px solid var(--border-soft); border-radius:12px; padding:10px 12px; margin-bottom:8px;}
.bac-row .lb{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;}
.bac-row .lb .we{font-size:10.5px; color:var(--gold); font-family:'Space Grotesk';}
.bac-row input{width:72px; background:var(--card); border:1.5px solid var(--border-soft); color:var(--txt); border-radius:9px; padding:8px; font-size:14px; font-family:'Space Grotesk'; text-align:center;}
.bac-row input:focus{outline:none; border-color:var(--violet);}

/* settings: compact, informational panels that reuse the calculator's glass-and-orbit language */
.settings-intro{color:var(--muted); text-align:center; font-size:13px; line-height:1.7; margin:2px 0 14px;}
.settings-options{display:flex; flex-direction:column; gap:9px;}
.setting-option{display:flex; align-items:center; gap:11px; width:100%; padding:14px; border:1px solid rgba(162,173,255,.14); border-radius:15px; background:linear-gradient(135deg,rgba(28,33,60,.78),rgba(12,16,34,.84)); color:var(--txt); text-align:right; font-family:inherit; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.04); transition:transform .18s cubic-bezier(.23,1,.32,1), border-color .18s, background .18s, box-shadow .18s;}
html[dir="ltr"] .setting-option{text-align:left;}
.setting-option:hover{border-color:rgba(139,124,246,.65); background:linear-gradient(135deg,rgba(62,58,111,.48),rgba(15,24,49,.88)); box-shadow:0 14px 24px -22px rgba(98,87,231,.85),inset 0 1px rgba(255,255,255,.07); transform:translateY(-2px);}
.setting-option:active{transform:scale(.98);}
.setting-option-icon{width:40px; height:40px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:rgba(139,124,246,.14); color:var(--violet); font-size:20px; flex:none;}
.setting-option.other .setting-option-icon{background:rgba(52,211,201,.12); color:var(--cyan);}
.setting-option-copy{flex:1; min-width:0;}
.setting-option-copy strong{display:block; font-family:'Cairo',sans-serif; font-size:13.5px; margin-bottom:2px;}
html[dir="ltr"] .setting-option-copy strong{font-family:'Poppins',sans-serif;}
.setting-option-copy span{display:block; color:var(--muted); font-size:11.5px; line-height:1.45;}
.settings-back{width:100%; border:1px solid rgba(162,173,255,.14); border-radius:12px; padding:10px; margin-top:14px; background:linear-gradient(135deg,rgba(35,42,75,.7),rgba(13,17,35,.82)); color:var(--muted); font-family:inherit; font-weight:700; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.04); transition:background .18s, color .18s, transform .18s, border-color .18s;}
.settings-back:hover{background:linear-gradient(135deg,rgba(56,62,105,.78),rgba(19,24,48,.88)); color:var(--txt); border-color:rgba(52,211,201,.4);}
.settings-back:active{transform:scale(.98);}
.info-hero{background:linear-gradient(135deg,rgba(139,124,246,.17),rgba(52,211,201,.08)); border:1px solid rgba(139,124,246,.28); border-radius:16px; padding:15px; margin-bottom:11px; text-align:right;}
html[dir="ltr"] .info-hero{text-align:left;}
.info-hero h3{margin:0 0 5px; font-family:'Cairo',sans-serif; font-size:16px;}
html[dir="ltr"] .info-hero h3{font-family:'Poppins',sans-serif;}
.info-hero p{margin:0; color:var(--muted); font-size:12px; line-height:1.7;}
.benefits-title{font-family:'Cairo',sans-serif; font-weight:800; font-size:13px; margin:14px 0 8px; color:var(--muted);}
html[dir="ltr"] .benefits-title{font-family:'Poppins',sans-serif;}
.benefits-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.benefit{border:1px solid var(--border-soft); background:var(--bg2); border-radius:13px; padding:10px;}
.benefit span{display:block; font-size:16px; margin-bottom:4px;}
.benefit strong{display:block; font-size:11.5px; line-height:1.45;}
.developer-card{display:flex; align-items:center; gap:11px; margin-top:12px; padding:12px; border:1px solid rgba(240,185,61,.28); background:rgba(240,185,61,.06); border-radius:15px;}
.developer-mark{width:37px; height:37px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--gold),var(--pink)); color:#1a0f05; font-size:18px; flex:none;}
.developer-card p{margin:0; min-width:0;}
.developer-card .dev-label{display:block; color:var(--muted); font-size:10.5px; margin-bottom:3px;}
.developer-card .dev-names{display:block; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.1px;}
.partner-card{display:block; position:relative; overflow:hidden; border:1px solid rgba(52,211,201,.32); background:linear-gradient(145deg,rgba(52,211,201,.16),rgba(139,124,246,.15)); border-radius:16px; padding:16px; color:var(--txt); text-decoration:none; box-shadow:inset 0 1px rgba(255,255,255,.07); transition:transform .18s cubic-bezier(.23,1,.32,1), box-shadow .18s, border-color .18s;}
.partner-card::after{content:'↗'; position:absolute; top:11px; inset-inline-end:13px; color:var(--cyan); font-family:'Space Grotesk',sans-serif; font-size:18px;}
.partner-card:hover{transform:translateY(-2px); box-shadow:0 16px 34px -24px rgba(52,211,201,.7);}
.partner-card h3{margin:0 28px 5px 0; font-family:'Cairo',sans-serif; font-size:15px;}
html[dir="ltr"] .partner-card h3{font-family:'Poppins',sans-serif; margin:0 0 5px 28px;}
.partner-card p{margin:0; color:var(--muted); font-size:12px; line-height:1.7;}
.partner-card .partner-link{display:inline-block; margin-top:10px; color:var(--cyan); font-size:11px; font-family:'Space Grotesk',sans-serif; direction:ltr;}

.footer-note{text-align:center; color:var(--muted2); font-size:11px; margin-top:24px; line-height:1.8;}

/* تصحيح مرئي واضح: خلفية مجرية وأزرار اختيار أكثر حضورًا */
body{background:radial-gradient(720px 440px at 50% 18%,rgba(111,91,240,.34),transparent 67%),radial-gradient(640px 540px at -12% 86%,rgba(27,196,216,.19),transparent 66%),radial-gradient(600px 520px at 112% 70%,rgba(238,95,171,.17),transparent 67%),linear-gradient(155deg,#0d0b29 0%,#070b1b 42%,#070a18 100%);}
.stars::before{width:940px;height:660px;top:-210px;transform:translateX(-50%) rotate(-10deg);border-color:rgba(183,171,255,.28);box-shadow:0 0 0 56px rgba(126,113,246,.045),0 0 0 122px rgba(52,211,201,.028),0 0 84px 20px rgba(139,124,246,.23);}
.wrap{max-width:560px;}
.wrap::before{width:760px;height:610px;top:96px;border-color:rgba(155,142,255,.23);box-shadow:0 0 0 56px rgba(139,124,246,.042),0 0 0 118px rgba(52,211,201,.026),0 0 72px 16px rgba(139,124,246,.14);}
.wrap::after{width:610px;height:340px;border-color:rgba(52,211,201,.20);box-shadow:0 0 42px rgba(52,211,201,.05);}
.cosmic-orbits{position:fixed;z-index:0;pointer-events:none;width:min(1120px,124vw);height:660px;left:50%;top:88px;transform:translateX(-50%);overflow:hidden;opacity:.95;}
.cosmic-orbits span{position:absolute;display:block;border-radius:50%;border:1px solid rgba(176,164,255,.17);}
.cosmic-orbits span:nth-child(1){width:920px;height:370px;top:105px;left:50%;transform:translateX(-50%) rotate(-13deg);box-shadow:0 0 38px rgba(139,124,246,.08);}
.cosmic-orbits span:nth-child(2){width:760px;height:300px;top:172px;left:50%;transform:translateX(-50%) rotate(13deg);border-color:rgba(52,211,201,.20);}
.cosmic-orbits span:nth-child(3){width:430px;height:170px;top:272px;left:50%;transform:translateX(-50%) rotate(-20deg);border-color:rgba(240,185,61,.18);}
.modepill{width:36px;height:36px;padding:0;border-radius:12px;font-size:16px;}
.modepill.active{background:linear-gradient(135deg,#887af3,#5d57c8);color:#fff;box-shadow:0 10px 20px -10px rgba(109,92,238,.92),inset 0 1px rgba(255,255,255,.25);}
.hero{padding:34px 4px 15px;}
.hero .eyebrow{color:#a9fff8;background:linear-gradient(90deg,rgba(52,211,201,.20),rgba(139,124,246,.18));border-color:rgba(91,234,223,.38);padding:7px 14px;box-shadow:0 8px 22px -15px rgba(52,211,201,.8),inset 0 1px rgba(255,255,255,.12);}
.hero h1{font-size:33px;letter-spacing:-1px;line-height:1.25;margin-bottom:11px;}
.hero p{color:#bdc4d7;font-size:14px;line-height:1.75;max-width:365px;}
.cards{gap:15px;margin-top:23px;}
.mcard{min-height:104px;padding:21px 20px;gap:16px;border-radius:24px;background:linear-gradient(125deg,rgba(37,42,84,.96),rgba(16,21,48,.98));border-color:rgba(190,198,255,.26);box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -18px 36px -28px rgba(5,7,25,.92),0 20px 38px -30px rgba(0,0,0,.98);}
.mcard::before{opacity:.44;transform:translateX(55%);}
.mcard::after{content:'';position:absolute;inset-inline-start:0;top:17px;bottom:17px;width:5px;border-radius:99px;box-shadow:0 0 16px currentColor;}
.mcard:hover{border-color:rgba(214,219,255,.58);box-shadow:0 26px 50px -29px rgba(79,69,213,.95),inset 0 1px rgba(255,255,255,.16);transform:translateY(-5px) scale(1.012);}
.mcard .micon{width:60px;height:60px;border-radius:19px;font-size:29px;border-color:rgba(255,255,255,.17);box-shadow:inset 0 1px rgba(255,255,255,.17),0 14px 24px -17px rgba(0,0,0,.95);}
.mcard .mbody h3{margin-bottom:5px;font-size:17px;font-weight:900;}
.mcard .mbody p{font-size:12.5px;color:#b7c0d5;line-height:1.55;}
.mcard .arrow{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:14px;color:#fff;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px rgba(255,255,255,.10);transition:transform .2s cubic-bezier(.23,1,.32,1),background .2s;}
.mcard:hover .arrow{transform:translateX(-4px);background:rgba(255,255,255,.15);}
html[dir="ltr"] .mcard:hover .arrow{transform:translateX(4px);}
.mcard.sec{color:#9d90ff;border-color:rgba(158,146,255,.53);background:linear-gradient(125deg,rgba(79,66,165,.55),rgba(18,22,55,.98));}
.mcard.basic{color:#50e6db;border-color:rgba(76,228,216,.50);background:linear-gradient(125deg,rgba(16,124,133,.48),rgba(14,28,54,.98));}
.mcard.bac{color:#ffc95c;border-color:rgba(255,199,79,.49);background:linear-gradient(125deg,rgba(154,98,24,.46),rgba(39,27,35,.98));}
.mcard.sec .micon{background:linear-gradient(145deg,#8071f0,rgba(76,58,175,.68));color:#fff;box-shadow:0 14px 28px -18px rgba(139,124,246,1),inset 0 1px rgba(255,255,255,.25);}
.mcard.basic .micon{background:linear-gradient(145deg,#2cc5bf,rgba(19,123,139,.71));color:#fff;box-shadow:0 14px 28px -18px rgba(52,211,201,1),inset 0 1px rgba(255,255,255,.25);}
.mcard.bac .micon{background:linear-gradient(145deg,#f1ba41,rgba(182,90,35,.70));color:#281204;box-shadow:0 14px 28px -18px rgba(240,185,61,1),inset 0 1px rgba(255,255,255,.28);}
.mcard .micon{position:relative;overflow:visible;}
.mcard .micon::after{content:'';position:absolute;width:78%;height:32%;border:1px solid rgba(255,255,255,.42);border-radius:50%;transform:rotate(-24deg);pointer-events:none;}
.mcard .micon svg{width:30px;height:30px;position:relative;z-index:1;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));}
.brand{gap:12px;}
.mark{width:44px;height:44px;box-shadow:0 0 28px rgba(139,124,246,.76),inset 0 1px rgba(255,255,255,.36);}
.mark::before{width:66px;height:23px;}
.mark::after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;top:7px;inset-inline-end:9px;box-shadow:0 0 10px 2px rgba(255,255,255,.8);}
.brand-name{font-size:19px;letter-spacing:-.5px;}

@media (max-width:560px){
  html,body{width:100%;min-width:0;overflow-x:hidden;}
  body{display:block;overflow-x:hidden;}
  .wrap{display:block;width:100%;max-width:560px;margin-left:0;margin-right:0;left:50%;transform:translateX(-50%);padding-inline:12px;overflow:hidden;box-sizing:border-box;}
  .navbar{width:100%;min-width:0;gap:4px;padding-inline:5px;}
  .brand{min-width:0;gap:7px;}
  .brand-name{font-size:14px;white-space:nowrap;}
  .mark{width:34px;height:34px;}
  .mark::before{width:52px;height:18px;}
  .navctrls{min-width:0;gap:3px;}
  .modepills{gap:1px;padding:2px;}
  .modepill{width:28px;height:30px;font-size:14px;border-radius:10px;}
  .langtoggle button{padding:5px 7px;font-size:10px;}
  .settings-btn{width:30px;height:30px;font-size:14px;}
  .hero{padding-top:25px;}
  .hero h1{font-size:clamp(24px,7.4vw,33px);letter-spacing:-.5px;}
  .hero p{font-size:13px;}
  .mcard{width:100%;min-width:0;min-height:94px;padding:16px 13px;gap:10px;}
  .mcard .micon{width:50px;height:50px;font-size:23px;}
  .mcard .micon svg{width:25px;height:25px;}
  .mcard .mbody{min-width:0;}
  .mcard .mbody h3{font-size:15px;}
  .mcard .mbody p{font-size:11px;overflow-wrap:anywhere;}
  .mcard .arrow{width:32px;height:32px;border-radius:11px;font-size:16px;}
  .cosmic-orbits,.stars::before,.wrap::before,.wrap::after{display:none;}
  body{background:radial-gradient(520px 360px at 50% 10%,rgba(111,91,240,.36),transparent 68%),radial-gradient(420px 320px at 50% 88%,rgba(27,196,216,.14),transparent 72%),linear-gradient(180deg,#121034 0%,#0a0d20 54%,#080b18 100%);}
  .stars::after{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),radial-gradient(260px 180px at 50% 82%,rgba(238,95,171,.10),transparent 70%);}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important;}
}