*{margin:0;padding:0;box-sizing:border-box;}
/* ═══════════════════════════════════════════════════════════════
نظام الألوان الموحد — هوية منصة الملهم البصرية
استخدم هذه المتغيرات في كل مكان معني للحفاظ على الاتساق.
═══════════════════════════════════════════════════════════════ */
:root{
/* الأخضر الزيتي — اللون الأساسي للهوية */
--hh-green-darkest: #050f0c;
--hh-green-darker: #3D0918;
--hh-green-dark: #5E0E26;
--hh-green: #8A1538;
--hh-green-mid: #4a2e18;
--hh-green-light: #3D6B53;
--hh-green-soft: rgba(138,21,56,.08);
/* الذهبي الملكي — اللون المكمل */
--hh-gold-light: #D4BC85;
--hh-gold: #B8924A;
--hh-gold-mid: #b59021;
--hh-gold-dark: #8A6D2E;
--hh-gold-darkest: #5a4a12;
--hh-gold-soft: rgba(184,146,74,.10);
/* البني الترابي — للأيقونات الترابية */
--hh-brown-light: #8b5a2b;
--hh-brown: #8A1538;
--hh-brown-dark: #5E0E26;
--hh-brown-soft: rgba(138,21,56,.10);
/* الكريمي — الخلفية الناعمة */
--hh-cream: #FAFAF8;
--hh-cream-warm: #F8F8F6;
--hh-cream-deep: #fdf3d6;
--hh-cream-gold: #f5ebd4;
/* العنابي — للتنبيهات الراقية */
--hh-maroon: #8A1538;
--hh-maroon-dark: #5c0e25;
/* الأبيض والرمادي */
--hh-white: #ffffff;
--hh-text-dark: #3D0918;
--hh-text-mid: #5a6a5e;
--hh-text-light: #7a8a82;
/* تدرجات جاهزة للاستخدام (الهوية المعتمدة) */
--hh-grad-green: linear-gradient(135deg, #8A1538 0%, #5E0E26 100%);
--hh-grad-green-deep: linear-gradient(135deg, #3D0918 0%, #050f0c 100%);
--hh-grad-gold: linear-gradient(135deg, #B8924A 0%, #8A6D2E 100%);
--hh-grad-gold-light: linear-gradient(135deg, #D4BC85 0%, #B8924A 100%);
--hh-grad-brown: linear-gradient(135deg, #8A1538 0%, #5E0E26 100%);
--hh-grad-cream: linear-gradient(135deg, #F8F8F6 0%, #fdf3d6 100%);
--hh-grad-maroon: linear-gradient(135deg, #8A1538 0%, #5c0e25 100%);
/* الظلال المعتمدة */
--hh-shadow-green: 0 4px 12px rgba(138,21,56,.18);
--hh-shadow-gold: 0 4px 12px rgba(184,146,74,.20);
--hh-shadow-brown: 0 4px 12px rgba(138,21,56,.20);
--hh-shadow-soft: 0 2px 6px rgba(0,0,0,.06);
--hh-shadow-card: 0 6px 18px rgba(42,26,12,.10);
--hh-shadow-deep: 0 10px 28px rgba(42,26,12,.18);
/* الحدود الذهبية القياسية */
--hh-border-gold-soft: 1.5px solid rgba(184,146,74,.30);
--hh-border-gold: 1.5px solid rgba(184,146,74,.45);
--hh-border-gold-strong: 2px solid #B8924A;
}
body{
font-family:"Tajawal","Cairo",sans-serif;
color:#2c3e50;
min-height:100vh;
background-color:#fbf9f2;
background-image:
radial-gradient(circle at 10% 10%, rgba(138,21,56,.035) 0%, transparent 40%),
radial-gradient(circle at 90% 90%, rgba(138,21,56,.03) 0%, transparent 40%),
radial-gradient(circle at 50% 50%, rgba(184,146,74,.025) 0%, transparent 60%),
repeating-linear-gradient(
45deg,
transparent 0,
transparent 60px,
rgba(184,146,74,.012) 60px,
rgba(184,146,74,.012) 61px
);
background-attachment:fixed;
}
.screen{display:none;min-height:100vh;}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;}
/* شاشة اللعب: أطراف كاملة — حشوة أفقية شبه معدومة مع محافظة كل المكونات على تحاذيها */
#screen-board.active{padding:6px 6px 10px;}
#screen-board.active{position:fixed;inset:0;overflow:hidden;touch-action:manipulation;display:flex;flex-direction:column;z-index:1;}
@media(orientation:landscape){
#screen-board.active{padding-top:0 !important;padding-bottom:0;}
.top-bar{padding:5px 10px;}
.sbox{min-width:56px;padding:4px 8px;}
.sbox .sp{font-size:1.1rem;}
.sbox .sn{font-size:.55rem;}
.powerups-bar{margin-top:50px !important;margin-bottom:2px !important;}
.pu-btn{padding:4px 10px;font-size:.72rem;}
.turn-badge{font-size:.68rem;padding:3px 8px;}
}
@media(orientation:landscape) and (max-height:500px){
.powerups-bar{display:none !important;}
#screen-board.active{padding-top:0 !important;}
}
.top-bar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#f8f8fc;border-bottom:1.5px solid #ddd8f0;}
/* داخل شاشة اللعبة: الـtop-bar يصير relative ليأخذ مساحته في flex */
#screen-board.active .top-bar{
position:relative !important;
flex-shrink:0 !important;
width:100% !important;
}
#screen-board.active #board-bottom-bar{
position:relative !important;
flex-shrink:0 !important;
width:100% !important;
}
/* ── زر القائمة الرئيسية — مع زاوية ذهبية مقطوعة ── */
.btn-home-lux{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
padding:6px 14px;
background:linear-gradient(135deg, #8A1538 0%, #6b1530 50%, #4a0e22 100%);
color:#fff;
border:1.5px solid #B8924A;
border-radius:10px;
font-family:Cairo,sans-serif;
font-weight:900;
font-size:.74rem;
letter-spacing:0;
cursor:pointer;
overflow:hidden;
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 2px 6px rgba(141, 27, 61, .22);
white-space:nowrap;
text-shadow:0 1px 1px rgba(0, 0, 0, .25);
height:30px;
}
/* الزاوية الذهبية المقطوعة (أعلى يمين) */
.btn-home-lux::before{
content:'';
position:absolute;
top:-1.5px;
right:-1.5px;
width:14px;
height:14px;
background:linear-gradient(225deg, #D4BC85 0%, #B8924A 50%, transparent 50%);
border-top-right-radius:10px;
pointer-events:none;
transition:width .3s ease, height .3s ease;
}
/* لمعة ذهبية انعكاسية فوق الزر عند hover */
.btn-home-lux::after{
content:'';
position:absolute;
top:0; left:-100%;
width:60%; height:100%;
background:linear-gradient(90deg, transparent, rgba(245, 215, 110, .25), transparent);
transform:skewX(-20deg);
transition:left .6s ease;
pointer-events:none;
}
.btn-home-lux:hover{
transform:translateY(-1px);
border-color:#D4BC85;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .12),
0 4px 12px rgba(141, 27, 61, .32);
}
.btn-home-lux:hover::before{ width:18px; height:18px; }
.btn-home-lux:hover::after{ left:120%; }
.btn-home-lux:active{ transform:translateY(0) scale(.97); }
.btn-home-lux svg{
width:11px; height:11px;
color:#D4BC85;
flex-shrink:0;
transition:transform .3s ease;
}
.btn-home-lux:hover svg{ transform:scale(1.08); }
.btn-home-lux-label{
display:inline-block;
line-height:1;
background:linear-gradient(180deg, #D4BC85 0%, #B8924A 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:900;
}
@media (max-width:480px){
.btn-home-lux{ padding:5px 11px; font-size:.7rem; gap:4px; height:28px; }
.btn-home-lux svg{ width:10px; height:10px; }
.btn-home-lux::before{ width:12px; height:12px; }
}
/* على الموبايل: تبقى الأيقونة + النص (مع تصغير لطيف) */
@media (max-width:420px){
.btn-home-lux{ padding:8px 14px; font-size:.74rem; gap:6px; }
.btn-home-lux svg{ width:13px; height:13px; }
}
/* دعم الوضع الليلي */
body.dark-mode .btn-home-lux{
background:linear-gradient(135deg, #1a2840 0%, #16324f 50%, #0e1d30 100%);
}
body.dark-mode .btn-home-lux::before{
background:linear-gradient(135deg, #D4BC85 0%, #B8924A 50%, #8A6D2E 100%);
}
body.dark-mode .btn-home-lux:hover{
box-shadow:
inset 0 0 0 1px rgba(245, 215, 110, .55),
inset 0 1px 0 rgba(255, 255, 255, .18),
0 8px 22px rgba(0, 0, 0, .55),
0 0 18px rgba(245, 215, 110, .3);
}
#board-top-bar{padding:4px 10px;flex-shrink:0;z-index:10;}
#board-grid{flex:1;overflow:hidden;position:relative;min-height:0;background:#f8f8fc;}
#screen-board.active #board-grid{display:block;}
/* ════════════════════════════════════════════════════════════════
شعار "الملهم" — العنوان الرئيسي (فخم راق احترافي)
════════════════════════════════════════════════════════════════ */
.logo-title{
font-size:clamp(3.5rem, 12vw, 6.5rem);
font-weight:900;
text-align:center;
line-height:.95;
color:#8A1538;
font-family:'Cairo', sans-serif;
letter-spacing:0;
margin:0;
position:relative;
display:inline-block;
background:linear-gradient(180deg,
#c23a61 0%,
#a21b42 16%,
#8A1538 46%,
#5E0E26 84%,
#6f1230 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:
0 2px 4px rgba(61,38,20,.12),
0 4px 12px rgba(138,21,56,.18);
padding:0 8px 4px;
}
/* خط ذهبي تحت الكلمة — لمسة ملكية */
.logo-title::after{
content:'';
position:absolute;
bottom:6px;
right:8%;
left:8%;
height:2.5px;
background:linear-gradient(90deg,
transparent 0%,
rgba(212,188,133,.35) 12%,
#D4BC85 38%,
#B8924A 50%,
#D4BC85 62%,
rgba(212,188,133,.35) 88%,
transparent 100%
);
border-radius:3px;
box-shadow:0 3px 0 -1.2px rgba(184,146,74,.35), 0 1px 5px rgba(184,146,74,.45);
}
/* تتويج بنجيمتين ذهبيتين (ولكنهما مخفيتان لمن يظهر زخرفة فقط) */
.logo-title::before{
content:'✦';
position:absolute;
top:-12px;
right:-8px;
color:#B8924A;
font-size:.28em;
text-shadow:0 2px 6px rgba(184,146,74,.4);
-webkit-text-fill-color:#B8924A;
background:none;
-webkit-background-clip:initial;
font-weight:400;
animation:logoSparkle 2.4s ease-in-out infinite;
}
@keyframes logoSparkle{
0%, 100%{ opacity:.5; transform:rotate(0); }
50%{ opacity:1; transform:rotate(15deg) scale(1.15); }
}
.logo-sub{
font-size:1.35rem;
color:#8A6D2E;
margin-top:6px;
letter-spacing:normal;
word-spacing:4px;
text-align:center;
font-family:'Amiri','Cairo', serif;
font-weight:700;
text-transform:none;
position:relative;
display:inline-block;
padding:4px 22px;
}
/* خطان جانبيان حول الـ subtitle */
.logo-sub::before, .logo-sub::after{
content:'';
position:absolute;
top:50%;
width:14px;
height:1.5px;
background:linear-gradient(90deg, transparent, #B8924A);
transform:translateY(-50%);
}
.logo-sub::before{ right:0; }
.logo-sub::after{ left:0; transform:translateY(-50%) rotate(180deg); }
/* مساحة حول الشعار */
.logo-wrap{
text-align:center;
margin:18px 0 26px;
padding:8px 0;
position:relative;
}
.logo-wrap::before{
content:'';
position:absolute;
top:50%; left:50%;
width:min(560px, 90%);
height:190px;
transform:translate(-50%,-58%);
background:radial-gradient(ellipse, rgba(212,188,133,.22) 0%, rgba(212,188,133,.08) 45%, transparent 70%);
pointer-events:none;
z-index:0;
}
.logo-wrap > *{ position:relative; z-index:1; }
@media (max-width:480px){
.logo-title{ font-size:clamp(3rem, 14vw, 4.8rem); letter-spacing:-1.5px; }
.logo-sub{ font-size:1.12rem; letter-spacing:normal; word-spacing:3px; }
}
.logo-wrap{margin-bottom:24px;}
.card{background:#fff;border:2px solid #8A1538;border-radius:16px;padding:24px 28px;width:100%;max-width:480px;box-shadow:6px 6px 0 #8A1538;}
.card-title{font-size:1.3rem;font-weight:900;text-align:center;margin-bottom:16px;border-bottom:2px solid #8A1538;padding-bottom:10px;}
.ig{margin-bottom:12px;}
.ig label{display:block;font-size:.85rem;color:#333;margin-bottom:4px;font-weight:700;}
.ig input{width:100%;padding:10px 14px;background:#fff;border:2px solid #8A1538;border-radius:8px;color:#8A1538;font-family:"Tajawal",sans-serif;font-size:1rem;direction:rtl;outline:none;}
.ig input:focus{box-shadow:3px 3px 0 #8A1538;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 22px;border:2px solid #8A1538;border-radius:10px;font-family:"Cairo",sans-serif;font-size:.95rem;font-weight:900;cursor:pointer;transition:all .15s;width:100%;margin-top:5px;background:#8A1538;color:#fff;}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 #555;}
.btn-outline{background:#fff;color:#8A1538;}
.btn-outline:hover{background:#f5f5f5;}
.btn-sm{padding:6px 12px;font-size:.82rem;width:auto;}
.err-msg{color:#c00;font-size:.82rem;text-align:center;margin-top:7px;min-height:16px;}
.link-row{text-align:center;margin-top:10px;font-size:.85rem;color:#555;}
.link-row a{color:#8A1538;cursor:pointer;font-weight:700;text-decoration:underline;}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0;}
/* ═══ بطاقات الفئات - تصميم احترافي ═══ */
.cat-btn{
position:relative;
padding:0;
border-radius:16px;
border:1.5px solid #e8f2ec;
background:linear-gradient(135deg,#8A1538 0%,#5E0E26 100%);
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.2,.64,1);
color:#fff;
user-select:none;
width:100%;
aspect-ratio:1;
overflow:hidden;
display:block;
box-shadow:0 3px 10px rgba(138,21,56,.15);
}
.cat-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 22px rgba(138,21,56,.25);
border-color:#B8924A;
}
.cat-btn.active{
border-color:#B8924A;
border-width:2.5px;
transform:translateY(-2px);
box-shadow:0 0 0 3px rgba(184,146,74,.2),0 10px 22px rgba(184,146,74,.35);
}
/* علامة ✓ فقط عند التحديد */
.cat-btn.active::before{
content:"";position:absolute;top:8px;left:8px;z-index:5;
width:24px;height:24px;border-radius:50%;
background:linear-gradient(135deg,#B8924A,#a68820);
background-image:url("data:image/svg+xml;utf8,");
background-size:16px 16px;background-repeat:no-repeat;background-position:center;
box-shadow:0 3px 10px rgba(184,146,74,.6);
border:2px solid #fff;
}
/* الصورة المرفوعة تغطي المربع */
.cat-btn .ci-img{
position:absolute;inset:0;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
}
.cat-btn .ci-img img{
width:100%;height:100%;
object-fit:cover;
display:block;
}
.cat-btn .ci-img-logo{background:#fff;}
.cat-btn .ci-svg-logo{background:#fff;}
.cat-btn .ci-svg-logo svg{width:100%;height:100%;}
.cat-btn .ci-img-logo img{
object-fit:contain !important;
padding:10px;box-sizing:border-box;
}
/* ═══ الخيار ①: بطاقة شعار — خلفية بيضاء + الشعار يملأ + شريط اسم ملوّن صلب ═══ */
.cat-btn.cat-btn-logo{background:#fff !important;}
.cat-btn.cat-btn-logo .ci-img-logo{
position:absolute;inset:0;bottom:38px;
background:#fff;
}
.cat-btn.cat-btn-logo .ci-img-logo img{
width:100%;height:100%;object-fit:contain !important;
padding:8px;box-sizing:border-box;
}
.cat-btn.cat-btn-logo .ci-lbl{
background:#8A1538;
padding:9px 6px;
text-shadow:none;
height:38px;
display:flex;align-items:center;justify-content:center;
-webkit-line-clamp:2;
}
/* الأيقونة SVG الافتراضية (لما مافي صورة) — بالوسط مع خلفية جميلة */
.cat-btn .ci-svg{
position:absolute;inset:0;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:radial-gradient(circle at 50% 35%,rgba(184,146,74,.25) 0%,transparent 55%);
}
.cat-btn .ci-svg svg{
width:48%;height:48%;
filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
margin-bottom:14px;
opacity:.95;
}
/* تلوين أي SVG داخل الخلفية الداكنة */
.cat-btn .ci-svg svg path,
.cat-btn .ci-svg svg rect,
.cat-btn .ci-svg svg circle,
.cat-btn .ci-svg svg polygon,
.cat-btn .ci-svg svg ellipse{
stroke:#e8c968 !important;
fill:rgba(232,201,104,.15) !important;
opacity:1 !important;
}
/* اسم الفئة — شريط علوي واضح وأنيق */
.cat-btn .ci-lbl{
position:absolute;bottom:0;left:0;right:0;
padding:8px 6px 7px;
background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 50%,rgba(0,0,0,0) 100%);
color:#fff;
font-size:.72rem;font-weight:900;line-height:1.2;
text-align:center;
text-shadow:0 1px 3px rgba(0,0,0,.8);
z-index:3;
letter-spacing:-.1px;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
word-break:break-word;
min-height:32px;
}
/* زر تعديل الصورة (يظهر فقط للأدمن في وضع التعديل) */
.cat-btn .cat-edit-btn{
position:absolute;top:8px;right:8px;z-index:4;
width:26px;height:26px;border-radius:50%;
background:rgba(138,21,56,.92);color:#fff;
display:none;
align-items:center;justify-content:center;
cursor:pointer;border:2px solid #fff;
box-shadow:0 2px 8px rgba(0,0,0,.3);
transition:all .15s;
padding:0;
}
.cat-btn .cat-edit-btn:hover{background:#B8924A;transform:scale(1.1);}
.cat-btn .cat-edit-btn svg{width:13px;height:13px;fill:currentColor;}
body.admin-edit-mode .cat-btn .cat-edit-btn{display:flex;}
/* أزرار الأدمن السريعة (إخفاء/حذف/لون) — تظهر للأدمن في وضع التحرير */
.cat-btn .cat-admin-tools{
position:absolute;top:8px;left:8px;z-index:4;
display:none;
flex-direction:column;gap:5px;
}
body.admin-edit-mode .cat-btn .cat-admin-tools{display:flex;}
.cat-btn .cat-admin-btn{
width:26px;height:26px;border-radius:50%;
background:rgba(138,21,56,.92);color:#fff;
display:flex;align-items:center;justify-content:center;
cursor:pointer;border:2px solid #fff;
box-shadow:0 2px 8px rgba(0,0,0,.3);
transition:all .15s;
padding:0;
}
.cat-btn .cat-admin-btn svg{width:13px;height:13px;fill:currentColor;pointer-events:none;}
.cat-btn .cat-admin-btn.cab-hide:hover{background:#7a5c2e;transform:scale(1.1);}
.cat-btn .cat-admin-btn.cab-color:hover{background:#B8924A;transform:scale(1.1);}
.cat-btn .cat-admin-btn.cab-delete:hover{background:#c0392b;transform:scale(1.1);}
.cat-btn .cat-admin-btn input[type="color"]{
position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;
}
/* الفئة المخفية — تظهر للأدمن فقط بشكل شفاف */
.cat-btn.cat-hidden-by-admin{
opacity:.42;
filter:grayscale(.6);
}
.cat-btn.cat-hidden-by-admin::after{
content:"مخفية";
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
background:rgba(192,57,43,.95);color:#fff;
padding:4px 12px;border-radius:14px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.72rem;
z-index:5;letter-spacing:0;
box-shadow:0 3px 10px rgba(0,0,0,.4);
border:1.5px solid #fff;
}
/* الفئات الخاصة المقفلة */
.cat-btn.locked{
border-color:#B8924A;
cursor:not-allowed;
background:linear-gradient(135deg,#1a1a1a 0%,#3D0918 60%,#1a1a1a 100%);
opacity:.88;
}
.cat-btn.locked:hover{
transform:none;
opacity:1;
box-shadow:0 6px 18px rgba(184,146,74,.25);
}
.cat-btn.locked .ci-svg,
.cat-btn.locked .ci-img{
opacity:.45;
filter:grayscale(.5) brightness(.85);
}
.cat-btn.locked .ci-lbl{
color:#e8c968;
background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.85) 50%,rgba(0,0,0,0) 100%);
}
.cat-btn.locked::before{display:none;}
.cat-btn.locked::after{
content:"";position:absolute;top:8px;right:8px;
width:28px;height:28px;border-radius:50%;
background:linear-gradient(135deg,#B8924A,#a68820);
background-image:url("data:image/svg+xml;utf8,");
background-size:16px;background-repeat:no-repeat;background-position:center;
box-shadow:0 3px 10px rgba(184,146,74,.7);
border:2px solid #fff;z-index:3;
}
.cat-btn .ci{display:none;}
.teams-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.team-box{padding:10px;border-radius:10px;text-align:center;border:2px solid #8A1538;}
.team-box label{font-size:.75rem;color:#555;display:block;margin-bottom:4px;font-weight:700;}
.team-box input{width:100%;background:#fff;border:2px solid #ddd;border-radius:6px;padding:7px;color:#8A1538;font-family:"Tajawal",sans-serif;font-size:.88rem;text-align:center;outline:none;}
.team-box input:focus{border-color:#8A1538;}
.scores-row{display:flex;align-items:center;gap:8px;}
.sbox{padding:3px 10px;border-radius:8px;text-align:center;border:1.5px solid #8A1538;background:#fff;transition:all .3s;min-width:60px;max-width:100px;}
.sbox.active-t{background:#8A1538;color:#fff;}
.sbox .sn{font-size:.55rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;}
.sbox .sp{font-size:1.15rem;font-weight:900;line-height:1.2;}
.vs-d{font-weight:900;font-size:.85rem;}
.turn-badge{padding:0;border-radius:10px;font-weight:700;background:#8A1538;border:1.5px solid rgba(255,255,255,.15);display:inline-flex;flex-direction:column;overflow:hidden;min-width:190px;}
.board-grid{display:flex;flex-direction:column;gap:0;width:100%;max-width:none;margin:0 auto;padding:0;}
.cat-row{display:grid;align-items:stretch;}
.cat-col{display:flex;flex-direction:column;}
/* بطاقة الفئة المركزية — صورة + شريط الاسم */
.cat-center{
border-radius:16px;overflow:hidden;
display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
position:relative;background:#e8f2ec;
box-shadow:0 3px 12px rgba(0,0,0,.12);
border:1.5px solid rgba(184,146,74,.2);
box-sizing:border-box;
}
.cat-center .cc-img-wrap{
flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;
padding:4px;
width:100%;
}
.cat-center .cc-img-wrap img{
width:96%;height:96%;object-fit:contain;
border-radius:10px;
}
.cat-center .cc-img-wrap svg{width:88%;height:88%;object-fit:contain;}
.cat-center .cc-img-wrap .cc-emoji{font-size:3.4rem;line-height:1;}
.cat-center .cc-label-bar{
padding:6px 8px;margin:0;
text-align:center;font-weight:900;color:#fff;
font-family:'Cairo',sans-serif;line-height:1.25;
word-break:break-word;white-space:normal;letter-spacing:-.1px;
display:flex;align-items:center;justify-content:center;
width:100%;
overflow:hidden;
border-radius:0;
text-shadow:0 1px 3px rgba(0,0,0,.4);
min-height:32px;
}
/* خلية السؤال — تصميم أنيق ومتوازن */
.qcell{
border-radius:14px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .2s cubic-bezier(.34,1.2,.64,1);
box-sizing:border-box;
background:#e0e6ee;
box-shadow:0 2px 5px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.4);
border:1.5px solid rgba(0,0,0,.04);
position:relative;
overflow:hidden;
}
.qcell::before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,transparent 50%);
pointer-events:none;
}
.qcell:hover:not(.used){
transform:translateY(-2px) scale(1.03);
box-shadow:0 8px 20px rgba(0,0,0,.18);
z-index:2;
}
.qcell.used{opacity:.18;cursor:not-allowed;transform:none!important;box-shadow:none;}
.qcell:active:not(.used){transform:translateY(0) scale(.95)!important;transition:transform .08s;}
@keyframes cellPop{0%{transform:scale(1);}40%{transform:scale(.88);}70%{transform:scale(1.06);}100%{transform:scale(1);}}
.qcell.popping{animation:cellPop .3s ease forwards;}
.qcell .qpts{
font-weight:900;line-height:1;
position:relative;z-index:2;
letter-spacing:-.5px;
}
/* ألوان الخلايا تحدد inline من makeQCell حسب لون الفئة */
.qcell.easy{}
.qcell.easy .qpts{}
.qcell.med{}
.qcell.med .qpts{}
.qcell.hard{}
.qcell.hard .qpts{}
.powerups-bar{width:100%;max-width:1100px;margin:0 auto 4px;display:flex;gap:6px;justify-content:center;flex-wrap:nowrap;}
/* ── وسائل المساعدة — الخيار 4 ── */
.pu-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;}
.pu-btn{
position:relative;width:46px;height:46px;border-radius:12px;
border:2.5px solid;cursor:pointer;background:#fff;
display:flex;align-items:center;justify-content:center;
font-size:20px;transition:transform .15s,box-shadow .15s;
font-family:"Cairo",sans-serif;padding:0;
}
.pu-btn:hover:not(:disabled):not(.used-pu){transform:translateY(-2px);}
.pu-btn.hafra-btn{border-color:#c0392b;box-shadow:0 3px 0 #c0392b;}
.pu-btn.dagf-btn{border-color:#B8924A;box-shadow:0 3px 0 #B8924A;}
.pu-btn.eskot-btn{border-color:#95a5a6;box-shadow:0 3px 0 #95a5a6;}
.pu-btn.two-ans-btn{border-color:#3D6B53;box-shadow:0 3px 0 #3D6B53;}
.pu-btn.armed{transform:translateY(3px) !important;box-shadow:none !important;filter:brightness(.88);}
.pu-btn:disabled,.pu-btn.used-pu{opacity:.22;cursor:not-allowed;transform:none !important;box-shadow:none !important;}
.pu-badge{
position:absolute;top:-7px;right:-7px;
width:17px;height:17px;border-radius:50%;
font-size:9px;font-weight:900;line-height:1;
display:flex;align-items:center;justify-content:center;
border:2px solid #fff;font-family:"Cairo",sans-serif;
}
.pu-badge.hafra-b{background:#c0392b;color:#fff;}
.pu-badge.dagf-b{background:#B8924A;color:#fff;}
.pu-badge.eskot-b{background:#7f8c8d;color:#fff;}
.pu-lbl{font-size:10px;font-weight:700;color:#555;font-family:"Cairo",sans-serif;line-height:1;}
/* 🎮 الأدوات الكبيرة في شريط اللعبة العلوي */
.pu-btn-lg{
width:54px !important;height:54px !important;border-width:3px !important;border-radius:14px !important;
}
.pu-btn-lg svg{width:32px !important;height:32px !important;}
.pu-lbl-lg{font-size:.78rem !important;font-weight:900 !important;color:#3d2614 !important;margin-top:3px !important;}
.pu-btn-lg .pu-badge{width:20px;height:20px;font-size:11px;top:-8px;right:-8px;}
@media (max-width:760px){
.pu-btn-lg{width:44px !important;height:44px !important;}
.pu-btn-lg svg{width:26px !important;height:26px !important;}
.pu-lbl-lg{font-size:.68rem !important;}
}
/* الشريط السفلي - بطاقات الفرق المدمجة */
#board-bottom-bar{
position:relative !important;
z-index:5 !important;
padding:10px 12px !important;
margin-top:16px !important;
border-top:2px solid #8A1538 !important;
background:linear-gradient(180deg,#FAFAF8 0%,#fff 100%) !important;
box-shadow:0 -3px 12px rgba(138,21,56,.08) !important;
flex-shrink:0;
}
#board-bottom-bar .scores-row,
#b-scores-row{
display:flex !important;
flex-wrap:nowrap !important;
align-items:center !important;
justify-content:space-evenly !important;
gap:8px !important;
overflow-x:auto !important;
overflow-y:hidden !important;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
padding-bottom:3px;
width:100%;
}
/* توزيع متساوٍ كامل العرض من الطرف إلى الطرف بلا تمرير — لكل أعداد الفرق */
#b-scores-row.teams-2,
#b-scores-row.teams-3,
#b-scores-row.teams-4,
#b-scores-row.teams-5,
#b-scores-row.teams-6,
#b-scores-row.teams-7,
#b-scores-row.teams-8{
justify-content:space-between !important;
overflow-x:visible !important;
}
#b-scores-row.teams-2 .team-score-card,
#b-scores-row.teams-3 .team-score-card,
#b-scores-row.teams-4 .team-score-card,
#b-scores-row.teams-5 .team-score-card,
#b-scores-row.teams-6 .team-score-card,
#b-scores-row.teams-7 .team-score-card,
#b-scores-row.teams-8 .team-score-card{
flex:1 1 0 !important;
justify-content:center;
min-width:0 !important;
}
#b-scores-row.teams-6 .team-score-card{ padding:4px 7px !important; gap:5px !important; }
#b-scores-row.teams-7 .team-score-card,
#b-scores-row.teams-8 .team-score-card{
padding:3px 5px !important;
gap:4px !important;
border-radius:12px !important;
}
#b-scores-row.teams-6 .team-score-card .ts-name{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#b-scores-row.teams-7 .team-score-card .ts-name,
#b-scores-row.teams-8 .team-score-card .ts-name{
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
font-size:.82rem !important;
}
#b-scores-row.teams-7 .team-score-card button,
#b-scores-row.teams-8 .team-score-card button{
width:24px !important; height:24px !important; min-width:24px !important;
font-size:.8rem !important;
}
#b-scores-row.teams-7 .team-score-card .ts-pts,
#b-scores-row.teams-8 .team-score-card .ts-pts{
min-width:30px !important; font-size:.85rem !important; padding:2px 6px !important;
}
#board-bottom-bar .scores-row::-webkit-scrollbar,
#b-scores-row::-webkit-scrollbar{height:5px;}
#board-bottom-bar .scores-row::-webkit-scrollbar-thumb,
#b-scores-row::-webkit-scrollbar-thumb{background:#8A1538;border-radius:3px;}
/* مسافة بين اللوحة والشريط السفلي */
#board-grid{
padding-bottom:0 !important;
}
#board-bottom-bar .team-score-card{
background:linear-gradient(180deg,#fff 0%,#FAFAF8 100%);
border:1.5px solid #8A1538;
border-radius:10px;
padding:5px 10px;
display:flex !important;
align-items:center;
gap:8px;
min-width:auto !important;
flex-shrink:0 !important;
box-shadow:0 2px 5px rgba(138,21,56,.1);
transition:all .2s ease;
}
#board-bottom-bar .team-score-card.active{
background:linear-gradient(180deg,#FFFEF9 0%,#fef6dc 100%);
border-color:#B8924A;
border-width:2px;
box-shadow:0 3px 10px rgba(184,146,74,.25);
}
#board-bottom-bar .team-name{
font-family:Cairo,sans-serif;font-weight:800;font-size:.78rem;
color:#5E0E26;text-align:right;letter-spacing:-.2px;
white-space:nowrap;
max-width:120px;
overflow:hidden;
text-overflow:ellipsis;
padding:0 4px;
}
#board-bottom-bar .team-score{
font-family:Cairo,sans-serif;font-weight:900;font-size:.95rem;
color:#8A1538;min-width:32px;text-align:center;
background:#F7EBEE;border-radius:6px;padding:2px 7px;
font-variant-numeric:tabular-nums;
}
#board-bottom-bar .score-btn{
width:22px;height:22px;border-radius:50%;
border:none;cursor:pointer;
font-family:Cairo,sans-serif;font-weight:900;font-size:.82rem;
display:flex;align-items:center;justify-content:center;
transition:all .15s ease;
flex-shrink:0;
padding:0;
line-height:1;
}
#board-bottom-bar .score-btn.plus{background:#3D6B53;color:#fff;}
#board-bottom-bar .score-btn.minus{background:#c0392b;color:#fff;}
#board-bottom-bar .score-btn:hover{transform:scale(1.08);}
#board-bottom-bar .score-btn:active{transform:scale(.9);}
@media (max-width:520px){
#board-bottom-bar{padding:5px 7px !important;margin-top:8px !important;}
#board-bottom-bar .team-score-card{padding:3px 7px;gap:5px;}
#board-bottom-bar .team-name{font-size:.68rem;max-width:80px;padding:0 2px;}
#board-bottom-bar .team-score{font-size:.82rem;min-width:26px;padding:1px 5px;}
#board-bottom-bar .score-btn{width:20px;height:20px;font-size:.75rem;}
}
body.dark-mode #board-bottom-bar{background:linear-gradient(180deg,rgba(20,15,15,.97) 0%,#1a1a1a 100%) !important;border-top-color:#B8924A !important;}
body.dark-mode #board-bottom-bar .team-score-card{background:linear-gradient(180deg,#2a1a1a 0%,#1a1010 100%);border-color:#B8924A;}
body.dark-mode #board-bottom-bar .team-name{color:#fdfaef;}
body.dark-mode #board-bottom-bar .team-score{background:#3D0918;color:#B8924A;}
#q-modal{display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:10px;}
#q-modal.open{display:flex;}
.qm-box{background:#fff;border:2px solid #8A1538;border-radius:16px;padding:14px;width:100%;max-width:560px;max-height:94vh;overflow-y:auto;box-shadow:8px 8px 0 #8A1538;animation:modalIn .25s ease;}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(14px);}to{opacity:1;transform:none;}}
.qm-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.qm-badge{padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;border:2px solid;}
.qm-badge.easy{background:#EBF2EE;color:#3D6B53;border-color:#3D6B53;}
.qm-badge.med{background:#fff3e0;color:#b5801f;border-color:#b5801f;}
.qm-badge.hard{background:#fde8e8;color:#c0392b;border-color:#c0392b;}
.qm-badge.elite{background:linear-gradient(135deg,#fff8e8,#f5e9c8);color:#8A6D2E;border-color:#B8924A;}
.qm-cat{font-size:.78rem;color:#555;margin-right:auto;}
/* المؤقت: أصغر حجما + عائم في زاوية qm-top */
.timer-wrap{display:flex;justify-content:center;margin-bottom:8px;position:relative;width:fit-content;margin-left:auto;margin-right:auto;transition:all .3s ease;}
.timer-wrap svg{transform:rotate(-90deg);width:52px;height:52px;}
.timer-wrap svg circle{r:24;cx:26;cy:26;}
.t-track{fill:none;stroke:#eee;stroke-width:6;}
.t-prog{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .5s;}
.t-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1rem;font-weight:900;font-family:"Cairo",sans-serif;}
/* وضع انتهاء الوقت — نبض أحمر وإطار تحذير */
.timer-wrap.time-expired{animation:timeExpiredPulse 1s ease-in-out infinite;}
.timer-wrap.time-expired .t-track{stroke:#fdd;}
.timer-wrap.time-expired .t-prog{stroke:#c0392b!important;}
.timer-wrap.time-expired .t-num{color:#c0392b;text-shadow:0 0 8px rgba(192,57,43,.4);}
@keyframes timeExpiredPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(192,57,43,0));}50%{transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(192,57,43,.6));}}
/* إخفاء المؤقت بعد الكشف عن الجواب */
.qm-box.revealed .timer-wrap{display:none;}
/* إخفاء صف المساعدات بعد الكشف */
.qm-box.revealed .qm-pu-row{display:none;}
.qm-text{font-size:clamp(1.2rem,3vw,1.6rem);font-weight:800;line-height:1.95;text-align:right;margin-bottom:10px;background:#FFFDF8;border:2px solid #8A1538;border-top:4px solid #8A1538;border-radius:12px;padding:14px 16px;white-space:pre-wrap;word-break:break-word;color:#3D0918;}
.qm-img{width:100%;max-height:180px;object-fit:contain;border-radius:10px;border:2px solid #8A1538;margin-bottom:8px;display:block;}
body.dark-mode .qm-text{background:#223348;border-color:#2d5544;color:#e8edf2;}
.answer-reveal-btn{width:100%;padding:13px;border:2px solid #8A1538;border-radius:11px;background:linear-gradient(135deg,#EAD9B0,#B8924A);color:#3D0918;font-family:"Cairo",sans-serif;font-size:1.15rem;font-weight:900;cursor:pointer;transition:all .2s;margin-bottom:8px;}
.answer-reveal-btn:hover:not(:disabled){background:#f5f5f5;transform:translate(-1px,-1px);box-shadow:3px 3px 0 #8A1538;}
.answer-reveal-btn.revealed{background:#8A1538;color:#fff;cursor:default;transform:none;box-shadow:none;}
.answer-box{display:none;background:#EBF2EE;border:2px solid #3D6B53;border-radius:11px;padding:13px;margin-bottom:8px;font-size:1.2rem;font-weight:800;color:#3D6B53;text-align:center;line-height:1.8;white-space:pre-wrap;word-break:break-word;}
.answer-box.show{display:block;}
.team-ans-row{display:flex;gap:10px;margin-top:8px;}
.team-ans-btn{flex:1;padding:12px;border:2px solid #8A1538;border-radius:10px;font-family:"Cairo",sans-serif;font-size:.9rem;font-weight:900;cursor:pointer;transition:all .2s;background:#fff;}
.team-ans-btn:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 #8A1538;}
.team-ans-btn:disabled{cursor:default;opacity:.6;}
.qm-pu-row{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;align-items:flex-end;direction:rtl;}
.qm-pub{
position:relative;width:38px;height:38px;border-radius:9px;
border:2px solid;cursor:pointer;background:#fff;
display:flex;align-items:center;justify-content:center;
font-size:16px;transition:transform .15s,box-shadow .15s;
font-family:"Cairo",sans-serif;padding:0;
}
.qm-pub.hafra-btn{border-color:#c0392b;box-shadow:0 3px 0 #c0392b;}
.qm-pub.dagf-btn{border-color:#B8924A;box-shadow:0 3px 0 #B8924A;}
.qm-pub.eskot-btn{border-color:#95a5a6;box-shadow:0 3px 0 #95a5a6;}
.qm-pub.two-ans-btn{border-color:#3D6B53;box-shadow:0 3px 0 #3D6B53;}
.qm-pub.armed{transform:translateY(3px);box-shadow:none;filter:brightness(.85);}
.qm-pub:disabled,.qm-pub.used-pu{opacity:.2;cursor:not-allowed;transform:none;box-shadow:none;}
.qm-actions{display:flex;gap:10px;margin-top:10px;justify-content:center;}
/* ── أزرار الحكم: تأكيد + لا أحد في صف واحد أنيق ── */
.judge-actions{
display:flex;
gap:8px;
margin-top:9px;
align-items:stretch;
}
.j-btn{
flex:1;
padding:11px 10px;
border-radius:10px;
font-family:"Cairo",sans-serif;
font-weight:900;
font-size:.88rem;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
line-height:1;
white-space:nowrap;
}
.j-btn-confirm{
background:#8A1538;
color:#fff;
border:2px solid #8A1538;
flex:2; /* الأعرض - يأخذ ثلثي المساحة */
box-shadow:0 3px 0 #0e2339;
}
.j-btn-confirm:hover{
background:#264e7a;
transform:translateY(-1px);
box-shadow:0 4px 0 #0e2339;
}
.j-btn-confirm:active{
transform:translateY(1px);
box-shadow:0 1px 0 #0e2339;
}
.j-btn-none{
background:#fff;
color:#c0392b;
border:2px solid #c0392b;
box-shadow:0 3px 0 rgba(192,57,43,.35);
}
.j-btn-none:hover{
background:#fde8e8;
transform:translateY(-1px);
box-shadow:0 4px 0 rgba(192,57,43,.45);
}
.j-btn-none:active{
transform:translateY(1px);
box-shadow:0 1px 0 rgba(192,57,43,.25);
}
body.dark-mode .j-btn-none{
background:#1a2e24;
border-color:#c0392b;
color:#ff8a7a;
}
body.dark-mode .j-btn-none:hover{
background:#2a1a1e;
}
/* زر "التالي" — نفس الخط، بدون صعود/نزول، يتفعل بعد الحكم */
.j-btn-next{
background:#fff;
color:#8A1538;
border:2px solid #8A1538;
box-shadow:0 3px 0 rgba(138,21,56,.35);
opacity:.4;
cursor:not-allowed;
pointer-events:none;
/* بدون أي تحويلات — ثابت تماما */
}
.j-btn-next.enabled{
opacity:1;
cursor:pointer;
pointer-events:auto;
background:#e8f2ec;
border-color:#8A1538;
color:#8A1538;
animation:nextPulse 1.6s ease-in-out infinite;
}
@keyframes nextPulse{
0%, 100% { box-shadow:0 3px 0 rgba(138,21,56,.35); }
50% { box-shadow:0 3px 0 rgba(138,21,56,.35), 0 0 0 4px rgba(138,21,56,.12); }
}
.j-btn-next.enabled:hover{
background:#d7e4f0;
}
body.dark-mode .j-btn-next{
background:#1a2e24;
border-color:#7ab3e0;
color:#7ab3e0;
}
body.dark-mode .j-btn-next.enabled{
background:#223348;
}
.winner-text{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;text-align:center;margin-bottom:10px;}
.trophy-big{font-size:5rem;text-align:center;margin-bottom:10px;}
/* شاشة النتيجة الاحتفالية */
#screen-result.active{
background:#8A1538 !important;
color:#fff;
position:relative;
overflow:hidden;
}
#screen-result.active::before{
content:'';
position:absolute;inset:0;
background-image:
radial-gradient(circle at 20% 20%, rgba(241,196,15,.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(241,196,15,.06) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,.03) 0%, transparent 60%);
pointer-events:none;z-index:0;
}
#screen-result.active > *{position:relative;z-index:1;}
#screen-result .winner-text{color:#fff;font-size:clamp(1.2rem,3.5vw,2rem);font-weight:900;text-align:center;}
#screen-result .trophy-big{animation:trophyBounce 0.8s ease infinite alternate;}
@keyframes trophyBounce{from{transform:scale(1) rotate(-5deg);}to{transform:scale(1.15) rotate(5deg);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}
#screen-result .final-team{background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(4px);}
#screen-result .final-team.winner{background:#fff;color:#8A1538;border:2.5px solid #d4b740;box-shadow:0 0 24px rgba(241,196,15,.4);}
#screen-result .final-team.winner .fp{color:#8A1538;}
#screen-result .btn{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;}
#screen-result .btn:hover{background:rgba(255,255,255,.2);}
#screen-result .btn-outline{background:rgba(255,255,255,.05);}
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:999;}
.final-scores{display:flex;gap:14px;margin:14px 0;flex-wrap:wrap;justify-content:center;}
.final-team{flex:1;min-width:130px;text-align:center;border:2px solid #8A1538;border-radius:12px;padding:14px;box-shadow:4px 4px 0 #8A1538;}
.final-team .fn{font-size:.95rem;font-weight:700;}
.final-team .fp{font-size:2rem;font-weight:900;}
.lb-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px;border-radius:10px;border:2px solid #eee;margin-bottom:7px;transition:all .2s;}
.lb-rank{font-size:1.1rem;font-weight:900;width:32px;text-align:center;flex-shrink:0;}
.lb-name{flex:1;font-weight:700;min-width:0;}
.lb-pts{font-weight:900;color:#8A1538;white-space:nowrap;}
/* dark mode للـ podium */
body.dark-mode #lb-podium [id^="pod-"][id$="-name"],
body.dark-mode #lb-podium [id^="pod-"][id$="-pts"]{color:#e8edf2;}
body.dark-mode #lb-my-rank-card{background:#1a2e24;border-color:#2d5544;}
/* ── شاشة التحميل — هوية بنية ملكية ── */
#app-loader{
position:fixed;inset:0;z-index:99999;
background:linear-gradient(180deg,#3D0918 0%,#5E0E26 35%,#8A1538 70%,#5E0E26 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
transition:opacity .6s ease;
overflow:hidden;
}
/* توهج ذهبي خلف المركز */
#app-loader::after{
content:'';position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);
width:700px;height:700px;
background:radial-gradient(circle,rgba(212,188,133,.18) 0%,rgba(184,146,74,.08) 30%,transparent 70%);
pointer-events:none;
z-index:0;
}
#app-loader.fade-out{opacity:0;pointer-events:none;}
/* شريط علوي ذهبي بدلا من الأحمر */
#app-loader::before{
content:'';position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,transparent,#B8924A 20%,#D4BC85 50%,#B8924A 80%,transparent);
box-shadow:0 1px 6px rgba(212,188,133,.4);
}
/* الشعار (الاسم) — أبيض كريمي ناصع للوضوح المثالي على البني */
.loader-logo{
font-size:clamp(3rem,9vw,5rem);font-weight:900;
color:#F8F8F6;
font-family:'Tajawal','Cairo','Noto Sans Arabic',sans-serif;
animation:logoIn .7s cubic-bezier(.34,1.56,.64,1) forwards;
line-height:1.6;
text-shadow:
0 4px 24px rgba(0,0,0,.5),
0 0 40px rgba(212,188,133,.25),
0 2px 0 rgba(122,100,24,.4);
position:relative;z-index:2;
letter-spacing:0;
padding:0 12px;
font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
-webkit-font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
}
.loader-star{color:#D4BC85;font-size:1.4rem;margin:8px 0;animation:starSpin 2s linear infinite;}
.loader-sub{
font-size:clamp(1rem,3vw,1.3rem);
color:#D4BC85;
font-family:'Tajawal',sans-serif;font-weight:700;letter-spacing:0;
text-align:center;padding:0 20px;line-height:1.6;
text-shadow:0 2px 8px rgba(0,0,0,.3);
position:relative;z-index:2;
}
.loader-qatar{font-size:clamp(.75rem,2vw,.9rem);color:rgba(255,255,255,.55);margin-top:6px;text-align:center;font-family:'Tajawal',sans-serif;position:relative;z-index:2;}
.loader-dots{display:flex;gap:10px;margin-top:28px;position:relative;z-index:2;}
.loader-dot{width:10px;height:10px;border-radius:50%;background:rgba(212,188,133,.3);animation:dotBounce 1.4s ease infinite;}
.loader-dot:nth-child(1){animation-delay:0s;background:#D4BC85;}
.loader-dot:nth-child(2){animation-delay:.22s;}
.loader-dot:nth-child(3){animation-delay:.44s;}
@keyframes logoIn{from{opacity:0;transform:translateY(-20px) scale(.85);}to{opacity:1;transform:none;}}
@keyframes starSpin{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.2) rotate(20deg);}}
@keyframes dotBounce{0%,100%{background:rgba(212,188,133,.25);transform:translateY(0);}50%{background:#D4BC85;transform:translateY(-8px);}}
/* ═══════ WATERMARK ═══════ */
#wm-badge{position:fixed;bottom:8px;right:10px;z-index:99999;pointer-events:none;user-select:none;display:flex;align-items:center;gap:5px;background:rgba(109,43,61,.08);border:1.5px solid rgba(109,43,61,.18);border-radius:20px;padding:4px 10px;backdrop-filter:blur(4px);}
/* Dark Mode */
body.dark-mode{background:#0f1923;color:#e8edf2;}
body.dark-mode .card{background:#1a2e24;border-color:#2d5544;box-shadow:6px 6px 0 #0a1520;}
body.dark-mode .ig input,body.dark-mode .team-box input,body.dark-mode .team-entry input{background:#1a2e24;color:#e8edf2;border-color:#2d5544;}
body.dark-mode .top-bar{background:#0f1923;border-color:#2d5544;}
body.dark-mode .qcell:hover:not(.used){filter:brightness(1.2);}
body.dark-mode .cat-center{background:#122840;}
/* تعتيم خلفية لوحة اللعب نفسها في الوضع الليلي (كانت بيضاء) */
body.dark-mode #board-grid{background:#0f1923 !important;}
body.dark-mode .board-rows-wrap{background:transparent;}
body.dark-mode .cat-center .cc-label-bar{color:#fff;}
/* البطاقة المركزية: خلفية داكنة في الوضع الليلي (تتغلّب على اللون الفاتح المضمّن) مع إبقاء الحدّ المميّز */
body.dark-mode .cat-center{background:#15212e !important;}
body.dark-mode .cat-center.cat-center-logo{background:#fff !important;}
body.dark-mode .cat-center.cat-center-logo .cc-img-wrap{background:#fff !important;}
body.dark-mode .cat-center .cc-img-wrap{background:transparent;}
body.dark-mode .qm-box{background:#1a2e24;border-color:#2d5544;box-shadow:8px 8px 0 #0a1520;}
body.dark-mode .qm-text{background:#223348;border-color:#2d5544;color:#e8edf2;}
body.dark-mode .answer-box{background:#0d3320;border-color:#3D6B53;color:#5dca8c;}
body.dark-mode .answer-reveal-btn{background:#1a2e24;color:#e8edf2;border-color:#2d5544;}
body.dark-mode .answer-reveal-btn.revealed{background:#8A1538;color:#fff;}
body.dark-mode .btn{background:#8A1538;color:#fff;border-color:#2d5544;}
body.dark-mode .btn-outline{background:#1a2e24;color:#7ab3e0;border-color:#2d5544;}
body.dark-mode .btn:hover{box-shadow:4px 4px 0 #2d5544;}
body.dark-mode .profile-box{background:#1a2e24;border-color:#2d5544;box-shadow:6px 6px 0 #0a1520;}
body.dark-mode .profile-header{border-color:#2d5544;}
body.dark-mode .sbox{background:#1a2e24;border-color:#2d5544;color:#e8edf2;}
body.dark-mode .sbox.active-t{background:#8A1538;}
body.dark-mode .selected-panel{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .selected-tag{background:#223348;border-color:#2d5544;color:#7ab3e0;}
body.dark-mode .review-card{background:#1a2e24;border-color:#2d5544;}
body.dark-mode textarea{background:#1a2e24;color:#e8edf2;border-color:#2d5544;}
body.dark-mode .admin-user-card{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .admin-stat{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .game-history-item{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .link-row,body.dark-mode .link-row a{color:#7ab3e0;}
body.dark-mode .err-msg{color:#ff7070;}
body.dark-mode .logo-title{
background:linear-gradient(180deg,
#F2DFAE 0%,
#D4BC85 50%,
#B8924A 100%
);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
body.dark-mode .logo-sub{ color:#e8c968; }
body.dark-mode #screen-board{background:#0f1923;}
body.dark-mode .turn-badge{background:#1a2e24;border-color:#2d5544;color:#e8edf2;}
body.dark-mode .cat-btn{background:#1a2e24;border-color:#2d5544;color:#7ab3e0;}
body.dark-mode .cat-btn.active{background:#8A1538;color:#fff;}
body.dark-mode .cat-group-btn{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .cat-group-btn.active{background:#8A1538;color:#fff;}
body.dark-mode .nav-tab{background:#1a2e24;color:#7ab3e0;border-color:#2d5544;}
body.dark-mode .nav-tab.active{background:#8A1538;color:#fff;}
body.dark-mode .final-team{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .final-team.winner{background:#8A1538;}
body.dark-mode .lb-row{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .menu-card-item{background:#1a2e24;border-color:#2d5544;color:#e8edf2;box-shadow:0 2px 8px rgba(0,0,0,.2);}
body.dark-mode .menu-card-item:hover{background:#243d5c;border-color:#5b9bd5;color:#fff;}
body.dark-mode .judge-btn{background:#1a2e24;color:#e8edf2;border-color:#2d5544;}
body.dark-mode #wm-badge{background:rgba(30,60,90,.4);border-color:rgba(100,160,220,.2);}
body.dark-mode #wm-badge .wm-logo,body.dark-mode #wm-badge .wm-copy{color:#7ab3e0;}
#dark-toggle{display:none;}
body.dark-mode #board-top-bar{background:#0f1923;border-color:#2d5544;}
body.dark-mode .pu-btn,.body.dark-mode .qm-pub{background:#1a2e24;}
body.dark-mode .pu-lbl{color:#7ab3e0;}
body.dark-mode #board-dark-btn{border-color:#2d5544;background:#1a2e24;}
#wm-badge .wm-logo{font-size:.78rem;font-weight:900;color:#8A1538;font-family:'Cairo',sans-serif;letter-spacing:0;}
#wm-badge .wm-copy{font-size:.62rem;color:#999;font-family:'Tajawal',sans-serif;}
body{-webkit-user-select:none;-moz-user-select:none;user-select:none;}
input,textarea{-webkit-user-select:text;user-select:text;}
/* ══ Pearl Board Design ══ */
/* الألوان تطبق inline من JS مباشرة — لا override هنا */
.cat-center{ border-radius:14px; }
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#8A1538;color:#fff;border-radius:10px;padding:10px 22px;font-weight:700;font-size:.9rem;z-index:9999;transition:transform .3s;pointer-events:none;max-width:90vw;text-align:center;}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.success{background:#3D6B53;}
#toast.error{background:#c0392b;}
#toast.info{background:#1a5276;}
#toast.warn{background:#b5801f;}
.menu-card-item{border:2px solid #8A1538;border-radius:14px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;}
.menu-card-item:hover{background:#8A1538;color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 #555;}
@media(max-width:640px){
.qm-box{padding:14px;}
.cat-grid{grid-template-columns:repeat(2,1fr);}
.team-ans-row{flex-direction:column;}
}
@media(max-width:380px){
.sbox .sp{font-size:1.2rem;}
.sbox{min-width:60px;padding:5px 8px;}
}
/* جوال - ضغط الـ top bar */
@media(max-width:480px){
#board-top-bar{padding:2px 4px !important;gap:4px !important;}
.pu-btn{width:36px !important;height:36px !important;border-radius:9px !important;font-size:16px !important;}
.pu-lbl{font-size:9px !important;}
.pu-badge{width:14px !important;height:14px !important;font-size:8px !important;top:-5px !important;right:-5px !important;}
.turn-badge{min-width:140px !important;font-size:.7rem;}
.turn-badge div div span:first-child{font-size:.5rem !important;}
.turn-badge div div span:last-child{font-size:.72rem !important;}
.sbox{min-width:54px;padding:3px 5px;}
.sbox .sp{font-size:1rem;}
.sbox .sn{font-size:.5rem;max-width:60px;}
#game-elapsed{font-size:.58rem !important;padding:1px 5px !important;}
.btn-sm{padding:3px 7px !important;font-size:.7rem !important;}
}
@media(max-width:380px){
.turn-badge{min-width:110px !important;}
.pu-btn{padding:2px 3px !important;font-size:.58rem !important;}
}
/* ════════════════════════════════════════════════════════════════
محتوى "لماذا الملهم؟" — يظهر داخل البطاقة الموسعة
(هوية ملكية قوية بأخضر داكن ولمسات ذهبية)
════════════════════════════════════════════════════════════════ */
.about-detail#about-why-inspiration{
border:none !important;
border-right:none !important;
background:transparent !important;
padding:0 !important;
box-shadow:none !important;
margin-bottom:14px !important;
}
.about-detail#about-why-inspiration .why-content-inner{
position:relative;
background:
radial-gradient(circle at 20% 0%, rgba(184,146,74,.18), transparent 55%),
radial-gradient(circle at 80% 100%, rgba(184,146,74,.12), transparent 55%),
linear-gradient(135deg, #5E0E26 0%, #8A1538 50%, #5E0E26 100%);
border-radius:18px;
padding:30px 22px 26px;
text-align:center;
color:#fff;
overflow:hidden;
border:1.5px solid rgba(184,146,74,.55);
box-shadow:
0 12px 32px rgba(61,38,20,.28),
inset 0 1px 0 rgba(212,188,133,.12);
}
/* خط ذهبي علوي (تتويج) */
.about-detail#about-why-inspiration .why-content-inner::before{
content:'';
position:absolute;
top:0; right:15%; left:15%;
height:2px;
background:linear-gradient(90deg, transparent, #B8924A, transparent);
box-shadow:0 1px 6px rgba(184,146,74,.5);
}
/* أورب ذهبي زخرفي */
.about-detail#about-why-inspiration .why-content-inner::after{
content:'';
position:absolute;
bottom:-50px; left:-30px;
width:140px; height:140px;
background:radial-gradient(circle, rgba(212,188,133,.08), transparent 70%);
pointer-events:none;
border-radius:50%;
}
.why-content-title{
font-family:Cairo,sans-serif;
font-weight:900;
font-size:1.6rem;
color:#8A1538;
margin-bottom:14px;
line-height:1.45;
letter-spacing:-.5px;
position:relative; z-index:2;
text-shadow:0 1px 2px rgba(138,21,56,.15);
}
.why-content-title span{
color:#8A1538;
text-shadow:0 1px 2px rgba(138,21,56,.15);
}
.why-content-divider{
width:90px; height:2.5px;
background:linear-gradient(90deg,transparent,#8A1538,transparent);
margin:0 auto 22px;
border-radius:2px;
box-shadow:0 1px 4px rgba(138,21,56,.25);
position:relative; z-index:2;
}
.why-content-paragraph{
font-family:Tajawal,sans-serif;
font-size:1rem;
line-height:2.05;
color:#5E0E26;
font-weight:600;
margin-bottom:14px;
text-align:center;
max-width:480px;
margin-right:auto; margin-left:auto;
position:relative; z-index:2;
}
.why-content-paragraph:last-of-type{ margin-bottom:0; }
.why-hl{
color:#8A1538;
font-weight:900;
}
.why-content-quote{
margin:22px auto 0;
max-width:460px;
padding:14px 22px;
background:rgba(138,21,56,.06);
border-radius:12px;
border-right:3px solid #8A1538;
font-family:Cairo,sans-serif;
font-style:italic;
color:#8A1538;
font-size:.92rem;
line-height:1.7;
font-weight:700;
position:relative; z-index:2;
text-align:center;
box-shadow:inset 0 1px 0 rgba(138,21,56,.08);
}
.why-quote-mark{
display:inline;
color:#8A1538;
font-size:1.25rem;
font-weight:900;
}
.why-content-bridge{
margin-top:20px;
font-family:Cairo,sans-serif;
font-size:.9rem;
color:#8A1538;
font-weight:700;
line-height:1.75;
max-width:460px;
margin-right:auto; margin-left:auto;
position:relative; z-index:2;
padding-top:18px;
border-top:1px dashed rgba(138,21,56,.2);
}
.why-bridge-name{
color:#8A1538;
font-weight:900;
}
@media (max-width:480px){
.about-detail#about-why-inspiration .why-content-inner{ padding:26px 18px 22px; }
.why-content-title{ font-size:1.35rem; }
.why-content-paragraph{ font-size:.92rem; line-height:1.95; }
.why-content-quote{ font-size:.85rem; padding:12px 16px; }
.why-content-bridge{ font-size:.82rem; }
}
/* ════════════════════════════════════════════════════════════════
محتوى "منصتنا في كلمات" — يظهر داخل البطاقة الموسعة
════════════════════════════════════════════════════════════════ */
.about-detail#about-essence-content{
background:linear-gradient(135deg,#fdfaf0 0%,#fff8e8 100%) !important;
border:1.5px solid rgba(184,146,74,.4) !important;
border-right:5px solid #B8924A !important;
position:relative;
overflow:hidden;
}
.about-detail#about-essence-content::before{
content:''; position:absolute;
top:-40px; left:-40px;
width:140px; height:140px;
background:radial-gradient(circle, rgba(184,146,74,.18), transparent 70%);
pointer-events:none;
}
.about-detail#about-essence-content::after{
content:''; position:absolute;
bottom:-30px; right:-30px;
width:120px; height:120px;
background:radial-gradient(circle, rgba(138,21,56,.10), transparent 70%);
pointer-events:none;
}
.ae-header{
text-align:center;
margin-bottom:18px;
position:relative; z-index:1;
}
.ae-subtitle{
font-family:Tajawal,sans-serif;
font-size:.88rem;
color:#5a4500;
font-weight:600;
line-height:1.85;
max-width:380px;
margin:0 auto;
}
.ae-pillars{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
position:relative; z-index:1;
}
.ae-pillar{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:14px 8px 12px;
background:#fff;
border:1.5px solid rgba(184,146,74,.3);
border-radius:12px;
transition:all .22s ease;
overflow:hidden;
}
.ae-pillar::before{
content:'';
position:absolute;
top:0; right:0; left:0;
height:3px;
background:var(--ae-color, #B8924A);
border-radius:12px 12px 0 0;
opacity:.85;
}
.ae-pillar[data-pillar="time"]{ --ae-color:#1E3A5F; --ae-bg:linear-gradient(135deg,#1E3A5F,#0e3d60); --ae-soft:rgba(30,58,95,.10); }
.ae-pillar[data-pillar="inspire"]{ --ae-color:#B8924A; --ae-bg:linear-gradient(135deg,#B8924A,#8A6D2E); --ae-soft:rgba(184,146,74,.12); }
.ae-pillar[data-pillar="empower"]{ --ae-color:#8A1538; --ae-bg:linear-gradient(135deg,#8A1538,#5E0E26); --ae-soft:rgba(138,21,56,.10); }
.ae-pillar:hover{
transform:translateY(-2px);
border-color:var(--ae-color);
box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.ae-pillar-icon{
width:38px; height:38px;
background:var(--ae-bg);
color:#fff;
border-radius:10px;
display:flex;
align-items:center; justify-content:center;
margin-bottom:8px;
box-shadow:0 3px 7px rgba(0,0,0,.16), inset 0 -1.5px 0 rgba(0,0,0,.18);
transition:transform .22s ease;
}
.ae-pillar:hover .ae-pillar-icon{
transform:scale(1.06);
}
.ae-pillar-text{ width:100%; }
.ae-pillar-title{
font-family:Cairo,sans-serif;
font-weight:900;
font-size:.78rem;
color:#1a1a2e;
line-height:1.3;
margin-bottom:2px;
}
.ae-pillar-hint{
font-family:Tajawal,sans-serif;
font-size:.65rem;
font-weight:700;
color:#7a8a82;
line-height:1.3;
}
/* الوضع الداكن */
body.dark-mode .about-detail#about-essence-content{
background:linear-gradient(135deg,#1a2014 0%,#2a2a14 100%) !important;
border-color:#B8924A !important;
}
body.dark-mode .ae-subtitle{ color:#e8c968; }
body.dark-mode .ae-pillar{ background:#1a2e24; border-color:#2d5544; }
body.dark-mode .ae-pillar-title{ color:#f0f5f2; }
body.dark-mode .ae-pillar-hint{ color:#9ab0a4; }
/* الجوال */
@media (max-width:380px){
.ae-pillars{ grid-template-columns:1fr; gap:8px; }
.ae-pillar{
flex-direction:row;
text-align:right;
padding:12px;
gap:12px;
}
.ae-pillar-icon{ margin-bottom:0; flex-shrink:0; }
}
/* ════════════════════════════════════════════════════════════════
📖 بطاقات شاشة "قصتنا" — قابلة للطي
════════════════════════════════════════════════════════════════ */
/* ══════ شبكة المربعات الجديدة ══════ */
.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
gap:14px;
margin-bottom:18px;
}
@media (max-width:520px){
.about-grid{ grid-template-columns:1fr; gap:10px; }
}
/* ═══════════════════════════════════════════════════════
ABOUT PAGE v2 — Hero + 4 cards (refined)
كل الكلاسات الجديدة بادئتها an- (About New)
═══════════════════════════════════════════════════════ */
.an-wrapper{
max-width:780px;margin:0 auto;
font-family:'Tajawal','Cairo',sans-serif;
padding:0 4px;
}
/* Hero ملكي — يدمج رؤية قطر + الشعار */
.an-hero{
position:relative;overflow:hidden;
background:
radial-gradient(ellipse at 100% 0%, rgba(212,188,133,.15) 0%, transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(184,146,74,.1) 0%, transparent 50%),
linear-gradient(135deg,#5E0E26 0%,#8A1538 55%,#5E0E26 100%);
border:1.5px solid #B8924A;border-radius:18px;
padding:22px 22px 18px;margin-bottom:18px;
color:#FAFAF8;
box-shadow:0 8px 26px rgba(94,14,38,.22);
}
.an-hero::before{
content:'';position:absolute;top:0;right:0;width:160px;height:160px;
background:radial-gradient(circle,rgba(212,188,133,.12),transparent 65%);
pointer-events:none;
}
.an-hero-row{display:flex;align-items:center;gap:14px;position:relative;z-index:1;}
.an-hero-icon{
width:54px;height:54px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 14px rgba(212,188,133,.3);
}
.an-hero-icon svg{width:26px;height:26px;}
.an-hero-text{flex:1;min-width:0;}
.an-hero-eyebrow{
font-family:'Cairo',sans-serif;font-weight:700;
font-size:.66rem;color:#D4BC85;
letter-spacing:0;text-transform:uppercase;margin-bottom:4px;
}
.an-hero-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.4rem;color:#FAFAF8;line-height:1.2;
letter-spacing:-.4px;
}
.an-hero-tagline{
font-family:'Tajawal',sans-serif;font-weight:500;
font-size:.88rem;color:rgba(253,250,242,.85);
margin-top:5px;line-height:1.5;
}
.an-hero-vision-link{
display:flex;align-items:center;gap:8px;
margin-top:14px;padding:9px 13px;
background:rgba(212,188,133,.1);
border:1px solid rgba(212,188,133,.3);border-radius:10px;
cursor:pointer;transition:all .2s;
position:relative;z-index:1;
font-family:'Tajawal','Cairo',sans-serif;
}
.an-hero-vision-link:hover{
background:rgba(212,188,133,.18);
border-color:rgba(212,188,133,.5);
}
.an-hero-vision-link svg{width:14px;height:14px;color:#D4BC85;flex-shrink:0;}
.an-hero-vision-text{
flex:1;font-size:.78rem;color:#D4BC85;font-weight:700;
}
.an-hero-vision-text strong{color:#FAFAF8;font-weight:900;}
.an-hero-vision-arrow{
width:12px;height:12px;color:rgba(212,188,133,.7);
transition:transform .2s;
}
.an-hero-vision-link:hover .an-hero-vision-arrow{transform:translateX(-3px);}
/* بطاقات أنيقة (يفتح المحتوى داخلها) */
.an-cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:13px;margin-bottom:14px;
}
.an-card{
position:relative;overflow:hidden;
background:linear-gradient(180deg,#FFFFFF 0%,#FAFAF8 100%);
border:1.5px solid rgba(184,146,74,.4);
border-radius:18px;
padding:20px 20px 18px;
cursor:pointer;
transition:all .35s cubic-bezier(.34,1.2,.64,1);
font-family:'Tajawal','Cairo',sans-serif;
box-shadow:
0 2px 8px rgba(138,21,56,.05),
0 0 0 1px rgba(255,255,255,.6) inset;
}
/* الشريط العلوي الذهبي - متدرج فاخر */
.an-card::before{
content:'';position:absolute;top:0;right:0;left:0;height:4px;
background:linear-gradient(90deg,
transparent 0%,
var(--an-accent,#B8924A) 15%,
var(--an-accent,#B8924A) 85%,
transparent 100%);
opacity:.9;
border-radius:18px 18px 0 0;
}
/* لمعة ذهبية ناعمة في الزاوية */
.an-card::after{
content:'';position:absolute;top:-20px;left:-20px;
width:80px;height:80px;border-radius:50%;
background:radial-gradient(circle,rgba(212,188,133,.25) 0%,transparent 70%);
pointer-events:none;
transition:all .5s ease;
opacity:0;
}
.an-card:hover{
transform:translateY(-4px);
box-shadow:
0 18px 38px rgba(94,14,38,.16),
0 0 0 2px var(--an-accent,#B8924A) inset,
0 0 30px rgba(184,146,74,.2);
border-color:var(--an-accent,#B8924A);
}
.an-card:hover::after{
opacity:1;
transform:scale(1.5);
}
.an-card.open{
border-color:var(--an-accent,#B8924A);
border-width:2px;
box-shadow:
0 14px 36px rgba(94,14,38,.18),
0 0 50px rgba(184,146,74,.15);
grid-column:1/-1;
background:linear-gradient(180deg,#FFFFFF 0%,#F2F2EF 100%);
}
.an-card.open::after{opacity:.8;transform:scale(1.8);}
.an-card-head{display:flex;align-items:center;gap:14px;}
.an-card-icon{
width:46px;height:46px;border-radius:12px;flex-shrink:0;
background:var(--an-accent-soft,rgba(184,146,74,.15));
color:var(--an-accent,#8A6D2E);
display:flex;align-items:center;justify-content:center;
transition:all .35s cubic-bezier(.34,1.2,.64,1);
box-shadow:
0 3px 10px rgba(94,14,38,.1),
0 0 0 3px rgba(255,255,255,.5);
position:relative;
}
/* حلقة ذهبية حول الأيقونة */
.an-card-icon::after{
content:'';position:absolute;inset:-4px;border-radius:14px;
border:1.5px solid transparent;
transition:all .3s ease;
}
.an-card:hover .an-card-icon{
background:var(--an-accent,#B8924A);
color:#fff;
transform:scale(1.08) rotate(-3deg);
box-shadow:
0 8px 20px rgba(94,14,38,.2),
0 0 0 3px rgba(184,146,74,.25);
}
.an-card:hover .an-card-icon::after{
border-color:var(--an-accent,#B8924A);
inset:-6px;
}
.an-card.open .an-card-icon{
background:var(--an-accent,#B8924A);
color:#fff;
transform:scale(1.05);
}
.an-card-icon svg{width:22px;height:22px;}
.an-card-info{flex:1;min-width:0;}
.an-card-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.05rem;color:#3D0918;
line-height:1.3;letter-spacing:-.3px;
}
.an-card-hint{
font-size:.76rem;color:#8A6D2E;font-weight:700;
margin-top:3px;line-height:1.4;
opacity:.9;
}
.an-card-chev{
color:var(--an-accent,#B8924A);
width:14px;height:14px;flex-shrink:0;
margin-top:18px;
transition:transform .4s cubic-bezier(.34,1.2,.64,1);
opacity:.7;
}
.an-card:hover .an-card-chev{opacity:1;transform:translateY(2px);}
.an-card.open .an-card-chev{transform:rotate(180deg);opacity:1;}
.an-card-body{
max-height:0;overflow:hidden;
transition:max-height .5s ease, opacity .35s ease;
opacity:0;
}
.an-card.open .an-card-body{
max-height:2000px;opacity:1;
margin-top:16px;padding-top:16px;
border-top:1.5px solid;
border-image:linear-gradient(90deg,transparent 0%,var(--an-accent,#B8924A) 50%,transparent 100%) 1;
}
/* أنماط المحتوى الداخلي */
.an-body-text{
font-family:'Tajawal',sans-serif;font-size:.86rem;
line-height:1.85;color:#5E0E26;text-align:right;
}
.an-body-text strong{color:var(--an-accent,#8A1538);font-weight:900;}
.an-quote{
background:linear-gradient(135deg,#F8F8F6,#FAFAF8);
border-right:3px solid var(--an-accent,#B8924A);
border-radius:9px;padding:12px 14px;margin-top:12px;
font-family:'Cairo',sans-serif;font-weight:700;
font-size:.86rem;color:#5E0E26;line-height:1.6;
font-style:italic;
}
.an-pillars{display:flex;flex-direction:column;gap:9px;}
.an-pillar{
display:flex;align-items:flex-start;gap:11px;
padding:11px;background:#FAFAF8;border-radius:10px;
border-right:3px solid var(--an-accent,#B8924A);
}
.an-pillar-num{
width:26px;height:26px;border-radius:8px;flex-shrink:0;
background:var(--an-accent,#B8924A);color:#fff;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.78rem;
display:flex;align-items:center;justify-content:center;
}
.an-pillar-info{flex:1;}
.an-pillar-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:.86rem;color:#5E0E26;line-height:1.3;
}
.an-pillar-desc{
font-size:.76rem;color:#8A6D2E;line-height:1.55;margin-top:2px;
}
.an-goals{display:flex;flex-direction:column;gap:7px;}
.an-goal{
display:flex;align-items:center;gap:10px;
padding:9px 12px;background:#FAFAF8;border-radius:9px;
font-size:.84rem;color:#5E0E26;font-weight:700;
}
.an-goal-icon{
width:20px;height:20px;border-radius:50%;flex-shrink:0;
background:#3D6B53;color:#fff;
display:flex;align-items:center;justify-content:center;
}
.an-goal-icon svg{width:11px;height:11px;}
.an-values{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
.an-value{
position:relative;
padding:10px 12px 10px 14px;
background:linear-gradient(135deg,#FAFAF8,#F8F8F6);
border-right:3px solid var(--vc,#B8924A);
border-radius:9px;
}
.an-value-name{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:.86rem;color:#5E0E26;line-height:1.35;
display:flex;align-items:center;gap:7px;
}
.an-value-num{
background:var(--vc,#B8924A);color:#fff;
width:20px;height:20px;border-radius:50%;
font-size:.66rem;font-weight:900;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.an-value-desc{
font-size:.76rem;color:#8A6D2E;line-height:1.6;
margin-top:4px;
}
/* ألوان البطاقات */
.an-card[data-card="why"]{--an-accent:#8A1538;--an-accent-soft:rgba(138,21,56,.12);}
.an-card[data-card="essence"]{--an-accent:#B8924A;--an-accent-soft:rgba(184,146,74,.15);}
.an-card[data-card="goals"]{--an-accent:#3D6B53;--an-accent-soft:rgba(61,107,83,.12);}
.an-card[data-card="values"]{--an-accent:#8A1538;--an-accent-soft:rgba(138,21,56,.12);}
.an-card[data-card="founder"]{--an-accent:#1E3A5F;--an-accent-soft:rgba(30,58,95,.12);}
.an-card[data-card="why"] .an-card-icon{background:linear-gradient(135deg,#8A1538,#5E0E26);color:#D4BC85;}
.an-card[data-card="essence"] .an-card-icon{background:linear-gradient(135deg,#B8924A,#8A6D2E);color:#fff;}
.an-card[data-card="goals"] .an-card-icon{background:linear-gradient(135deg,#3D6B53,#2C5340);color:#fff;}
.an-card[data-card="values"] .an-card-icon{background:linear-gradient(135deg,#8A1538,#5e0f27);color:#fff;}
.an-card[data-card="founder"] .an-card-icon{background:linear-gradient(135deg,#1E3A5F,#152A45);color:#fff;}
.an-card:hover[data-card] .an-card-icon{transform:scale(1.05);}
/* قيمنا — ألوان متدرجة */
.an-value:nth-child(1){--vc:#8A1538;}
.an-value:nth-child(2){--vc:#B8924A;}
.an-value:nth-child(3){--vc:#8A1538;}
.an-value:nth-child(4){--vc:#1E3A5F;}
.an-value:nth-child(5){--vc:#3D6B53;}
@media (max-width:560px){
.an-hero{padding:18px 16px 14px;}
.an-hero-icon{width:46px;height:46px;}
.an-hero-icon svg{width:22px;height:22px;}
.an-hero-title{font-size:1.2rem;}
.an-hero-tagline{font-size:.82rem;}
.an-cards{gap:9px;}
.an-card{padding:13px 12px 12px;}
.an-card-head{gap:9px;}
.an-card-icon{width:34px;height:34px;}
.an-card-icon svg{width:17px;height:17px;}
.an-card-title{font-size:.86rem;}
.an-card-hint{font-size:.66rem;}
.an-card-chev{width:11px;height:11px;margin-top:9px;}
.an-card.open .an-card-body{
/* عند الفتح في الجوال، تأخذ البطاقة العرض الكامل */
grid-column:1/-1;
}
}
body.dark-mode .an-card{background:#1a2e24;border-color:#4a3a14;}
body.dark-mode .an-card-title,
body.dark-mode .an-body-text{color:#f0f5f2;}
body.dark-mode .an-pillar,
body.dark-mode .an-goal,
body.dark-mode .an-value{background:#0f1f17;}
body.dark-mode .an-quote{background:#1a2e24;color:#D4BC85;}
/* المربع الواحد */
.about-square{
position:relative;
background:#fff;
border:1.5px solid #e6dec9;
border-radius:16px;
padding:18px 16px;
cursor:pointer;
transition:all .25s ease;
user-select:none;
font-family:Cairo,sans-serif;
text-align:center;
box-shadow:0 4px 14px rgba(138,21,56,.08);
overflow:hidden;
}
.about-square:hover{
transform:translateY(-3px);
box-shadow:0 10px 24px rgba(138,21,56,.18);
border-color:var(--asq-color, #B8924A);
}
.about-square::before{
content:'';
position:absolute;top:0;right:0;left:0;
height:4px;
background:var(--asq-bg, linear-gradient(90deg,#8A1538,#B8924A));
}
.about-square.open{
border-color:var(--asq-color, #B8924A);
background:linear-gradient(180deg,#fff 0%,#FAFAF8 100%);
box-shadow:0 12px 30px rgba(138,21,56,.18);
}
/* أيقونة المربع */
.asq-icon{
width:54px;height:54px;
margin:0 auto 12px;
background:var(--asq-bg, linear-gradient(135deg,#8A1538,#B8924A));
color:#D4BC85;
border-radius:14px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 16px var(--asq-glow, rgba(138,21,56,.32)), inset 0 -2px 0 rgba(0,0,0,.15);
transition:transform .25s ease;
}
.about-square:hover .asq-icon{
transform:scale(1.06) rotate(-3deg);
}
/* عنوان وعنوان فرعي */
.asq-title{
font-family:Cairo,sans-serif;
font-weight:900;
font-size:1.02rem;
color:#3D0918;
margin-bottom:4px;
letter-spacing:-.2px;
}
.asq-hint{
font-family:Tajawal,sans-serif;
font-weight:500;
font-size:.78rem;
color:#8A6D2E;
margin-bottom:10px;
}
/* مؤشر الفتح */
.asq-toggle{
display:inline-flex;align-items:center;gap:5px;
padding:5px 14px;
background:var(--asq-soft, rgba(184,146,74,.12));
color:var(--asq-color, #8A6D2E);
border-radius:14px;
font-family:Cairo,sans-serif;
font-weight:900;
font-size:.7rem;
transition:all .22s ease;
}
.about-square:hover .asq-toggle{
background:var(--asq-color, #B8924A);
color:#fff;
}
.asq-toggle svg{
width:11px;height:11px;
transition:transform .3s ease;
}
.about-square.open .asq-toggle svg{
transform:rotate(180deg);
}
/* محتوى المربع (يفتح للأسفل داخل المربع) */
.asq-body{
max-height:0;
overflow:hidden;
transition:max-height .4s ease, opacity .3s ease, margin-top .3s ease;
opacity:0;
text-align:right;
}
.about-square.open .asq-body{
max-height:3000px;
opacity:1;
margin-top:14px;
padding-top:14px;
border-top:1.5px dashed var(--asq-color, #B8924A);
}
.asq-body-text{
font-family:Tajawal,sans-serif;
font-size:.88rem;
line-height:1.85;
color:#5E0E26;
text-align:right;
}
/* ألوان المواضيع للمربعات */
.about-square[data-asq="why"]{
--asq-color:#8A6D2E;
--asq-bg:linear-gradient(135deg,#5E0E26 0%,#8A1538 50%,#8A6D2E 100%);
--asq-soft:rgba(184,146,74,.14);
--asq-glow:rgba(184,146,74,.32);
}
.about-square[data-asq="essence"]{
--asq-color:#B8924A;
--asq-bg:linear-gradient(135deg,#B8924A,#8A6D2E);
--asq-soft:rgba(184,146,74,.12);
--asq-glow:rgba(184,146,74,.30);
}
.about-square[data-asq="vision"]{
--asq-color:#8A1538;
--asq-bg:linear-gradient(135deg,#8A1538,#5E0E26);
--asq-soft:rgba(138,21,56,.10);
--asq-glow:rgba(138,21,56,.28);
}
.about-square[data-asq="goals"]{
--asq-color:#B8924A;
--asq-bg:linear-gradient(135deg,#B8924A,#8A6D2E);
--asq-soft:rgba(184,146,74,.12);
--asq-glow:rgba(184,146,74,.30);
}
.about-square[data-asq="founder"]{
--asq-color:#8A1538;
--asq-bg:linear-gradient(135deg,#8A1538,#3D0918);
--asq-soft:rgba(138,21,56,.10);
--asq-glow:rgba(138,21,56,.30);
}
.about-square[data-asq="teacher"]{
--asq-color:#8A1538;
--asq-bg:linear-gradient(135deg,#8A1538,#5c0e25);
--asq-soft:rgba(138,21,56,.10);
--asq-glow:rgba(138,21,56,.28);
}
.about-square[data-asq="values"]{
--asq-color:#8A6D2E;
--asq-bg:linear-gradient(135deg,#B8924A,#8A6D2E);
--asq-soft:rgba(184,146,74,.14);
--asq-glow:rgba(184,146,74,.32);
}
.about-square[data-asq="values"] .asq-icon{
background:radial-gradient(circle at 50% 40%, #fff3a0 0%, #B8924A 60%, #8A6D2E 100%);
color:#8A1538;
}
/* عناصر القيم داخل مربع القيم */
.asq-vals-list{
display:flex; flex-direction:column; gap:10px;
}
.asq-val-row{
display:flex; align-items:flex-start; gap:10px;
background:#FAFAF8;
border:1px solid #e6dec9;
border-right:3px solid var(--vrow-color, #B8924A);
border-radius:10px;
padding:10px 12px;
text-align:right;
}
.asq-val-row:nth-child(1){ --vrow-color:#8A1538; }
.asq-val-row:nth-child(2){ --vrow-color:#B8924A; }
.asq-val-row:nth-child(3){ --vrow-color:#8A1538; }
.asq-val-row:nth-child(4){ --vrow-color:#1E3A5F; }
.asq-val-row:nth-child(5){ --vrow-color:#8A1538; }
.asq-val-num{
flex-shrink:0;
width:28px;height:28px;
background:var(--vrow-color, #B8924A);
color:#fff;
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-family:Cairo,sans-serif;font-weight:900;font-size:.8rem;
}
.asq-val-info{ flex:1; }
.asq-val-name{
font-family:Cairo,sans-serif;font-weight:900;font-size:.92rem;
color:#3D0918; margin-bottom:3px;
}
.asq-val-desc{
font-family:Tajawal,sans-serif;font-size:.78rem;line-height:1.7;
color:#5c4a3a;
}
.asq-vals-quote{
margin-top:14px; padding:12px;
background:linear-gradient(135deg,#FAFAF8,#fff8e8);
border:1.5px dashed #B8924A;
border-radius:12px;
text-align:center;
}
.asq-vals-quote-text{
font-family:Cairo,sans-serif;font-weight:900;font-size:.95rem;
color:#8A1538;
}
.asq-vals-quote-sub{
font-family:Tajawal,sans-serif;font-size:.72rem;color:#8A6D2E;
margin-top:4px;
}
/* dark mode للمربعات */
body.dark-mode .about-square{
background:#1a1410; border-color:#5E0E26;
}
body.dark-mode .about-square.open{
background:linear-gradient(180deg,#1a1410 0%,#3D0918 100%);
}
body.dark-mode .asq-title{ color:#D4BC85; }
body.dark-mode .asq-body-text{ color:#e8dcc8; }
.about-toggle-card{
position:relative;
display:flex; align-items:center; gap:12px;
background:#fff;
border:1.5px solid #e0e6e0;
border-right:5px solid var(--atc-color, #8A1538);
border-radius:14px;
padding:14px 14px;
cursor:pointer;
transition:all .22s ease;
user-select:none;
font-family:Cairo,sans-serif;
text-align:right;
box-shadow:0 2px 6px rgba(0,0,0,.04);
overflow:hidden;
}
/* الألوان حسب الموضوع */
.about-toggle-card[data-theme="vision"]{
--atc-color:#8A1538;
--atc-accent:#5E0E26;
--atc-bg:linear-gradient(135deg,#8A1538 0%,#5E0E26 100%);
--atc-soft:rgba(138,21,56,.08);
}
.about-toggle-card[data-theme="goals"]{
--atc-color:#B8924A;
--atc-accent:#8A6D2E;
--atc-bg:linear-gradient(135deg,#B8924A 0%,#8A6D2E 100%);
--atc-soft:rgba(184,146,74,.10);
}
.about-toggle-card[data-theme="founder"]{
--atc-color:#8A1538;
--atc-accent:#5E0E26;
--atc-bg:linear-gradient(135deg,#8A1538 0%,#5E0E26 100%);
--atc-soft:rgba(138,21,56,.08);
}
.about-toggle-card[data-theme="teacher"]{
--atc-color:#8A1538;
--atc-accent:#5c0e25;
--atc-bg:linear-gradient(135deg,#8A1538 0%,#5c0e25 100%);
--atc-soft:rgba(138,21,56,.08);
}
/* "لماذا الملهم؟" — ثيم ملكي فخم: أخضر داكن + تبتر ذهبي */
.about-toggle-card[data-theme="why"]{
--atc-color:#5E0E26;
--atc-accent:#B8924A;
--atc-bg:linear-gradient(135deg,#5E0E26 0%,#8A1538 50%,#5E0E26 100%);
--atc-soft:rgba(61,38,20,.10);
/* حد ذهبي مميز للطابع الملكي */
border:1.5px solid rgba(184,146,74,.45) !important;
border-right:5px solid #B8924A !important;
background:linear-gradient(135deg,#fafaf5 0%,#fff8e8 100%) !important;
}
.about-toggle-card[data-theme="why"] .atc-icon-wrap{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 100%);
box-shadow:0 4px 12px rgba(61,38,20,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 0 0 2px rgba(184,146,74,.4);
}
.about-toggle-card[data-theme="why"] .atc-title{
color:#5E0E26;
}
.about-toggle-card[data-theme="why"]:hover{
border-color:#B8924A !important;
box-shadow:0 8px 22px rgba(184,146,74,.18);
}
.about-toggle-card[data-theme="why"] .atc-chevron{
background:rgba(184,146,74,.18);
color:#5E0E26;
}
.about-toggle-card[data-theme="why"]:hover .atc-chevron{
background:#B8924A;
color:#fff;
}
/* "منصتنا في كلمات" — ذهبي ملكي */
.about-toggle-card[data-theme="essence"]{
--atc-color:#B8924A;
--atc-accent:#8A6D2E;
--atc-bg:linear-gradient(135deg,#B8924A 0%,#8A6D2E 100%);
--atc-soft:rgba(184,146,74,.10);
}
/* خلفية زخرفية خفيفة */
.about-toggle-card::before{
content:'';
position:absolute;
top:-30px; left:-30px;
width:90px; height:90px;
background:radial-gradient(circle, var(--atc-soft), transparent 70%);
pointer-events:none;
}
.about-toggle-card:hover{
border-color:var(--atc-color);
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.10);
}
.about-toggle-card.open{
border-color:var(--atc-color);
background:linear-gradient(135deg,#fafafa 0%,#fff 100%);
box-shadow:0 6px 16px rgba(0,0,0,.10);
}
/* الأيقونة في مربع ملون */
.atc-icon-wrap{
width:44px; height:44px; flex-shrink:0;
background:var(--atc-bg);
color:#fff;
border-radius:11px;
display:flex; align-items:center; justify-content:center;
box-shadow:0 3px 8px rgba(0,0,0,.18), inset 0 -1.5px 0 rgba(0,0,0,.18);
transition:transform .22s ease;
position:relative;
z-index:1;
}
.about-toggle-card:hover .atc-icon-wrap{
transform:scale(1.05) rotate(-3deg);
}
/* النص */
.atc-text{
flex:1; min-width:0;
position:relative;
z-index:1;
}
.atc-title{
font-family:Cairo,sans-serif; font-weight:900;
font-size:.92rem; color:#1a1a2e;
line-height:1.2;
letter-spacing:-.1px;
}
.atc-hint{
font-size:.7rem; font-weight:700;
color:#888;
margin-top:3px; line-height:1.3;
}
/* السهم */
.atc-chevron{
flex-shrink:0;
width:28px; height:28px;
background:var(--atc-soft);
border-radius:50%;
display:flex; align-items:center; justify-content:center;
color:var(--atc-color);
transition:all .25s ease;
position:relative;
z-index:1;
}
.about-toggle-card:hover .atc-chevron{
background:var(--atc-color);
color:#fff;
}
.about-toggle-card.open .atc-chevron{
background:var(--atc-bg);
color:#fff;
transform:rotate(180deg);
box-shadow:0 2px 6px rgba(0,0,0,.18);
}
/* الوضع الداكن */
body.dark-mode .about-toggle-card{
background:#1a2e24;
border-color:#2d5544;
}
body.dark-mode .about-toggle-card.open{
background:linear-gradient(135deg,#4a2e18 0%,#1a2e24 100%);
}
body.dark-mode .atc-title{ color:#f0f5f2; }
body.dark-mode .atc-hint{ color:#9ab0a4; }
/* تفاصيل المحتوى عند الفتح */
.about-detail{
display:none;
background:#fff;
border:1.5px solid #e0e6e0;
border-right:5px solid #B8924A;
border-radius:14px;
padding:18px 18px 16px;
margin-bottom:12px;
animation:fadeIn .25s ease;
box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.about-detail.open{display:block;}
.about-detail-title{
font-size:1rem; font-weight:900; color:#8A1538;
font-family:Cairo,sans-serif;
margin-bottom:12px;
padding-bottom:10px;
border-bottom:1.5px solid rgba(184,146,74,.25);
display:flex; align-items:center; gap:10px;
}
.about-detail-text{
font-size:1rem; line-height:2.1;
color:#222;
font-family:'Tajawal',sans-serif; font-weight:600;
}
.about-goal-item{
padding:5px 0; font-size:.95rem; line-height:1.8;
color:#222;
font-family:'Tajawal',sans-serif; font-weight:600;
}
body.dark-mode .about-detail{
background:#1a2e24; border-color:#2d5544;
}
body.dark-mode .about-detail-title{
color:#82c04e;
border-bottom-color:rgba(184,146,74,.35);
}
body.dark-mode .about-detail-text,
body.dark-mode .about-goal-item{ color:#c8d8e8; }
@keyframes fadeIn{
from{opacity:0; transform:translateY(-6px);}
to{opacity:1; transform:none;}
}
/* ═════════════════════════════════════════════════════════
التصميم الملكي - القائمة الرئيسية
═════════════════════════════════════════════════════════ */
/* Container الرئيسي */
.royal-menu{
width:100%;max-width:520px;margin:0 auto;padding:64px 14px 30px;
font-family:'Cairo',sans-serif;
}
/* التخطيط العريض المعتمد: الحاوية تطابق عرض الشريطين */
@media (min-width:901px){
.royal-menu{ max-width:min(1280px,96vw); padding:72px 20px 34px; }
}
/* === الهيدر الترحيبي — الهوية الموحدة (أخضر زيتي + ذهبي ملكي) === */
.royal-greeting{
display:flex; align-items:center; justify-content:space-between;
padding:18px 22px;
margin-bottom:18px;
background: var(--hh-grad-green);
border: 1.5px solid var(--hh-gold);
border-right: 5px solid var(--hh-gold);
border-radius: 18px;
box-shadow:
var(--hh-shadow-card),
inset 0 1px 0 rgba(212,188,133,.12);
position:relative;
overflow:hidden;
}
/* خط ذهبي علوي متوهج */
.royal-greeting::before{
content:""; position:absolute;
top:0; right:15%; left:15%;
height:2px;
background:linear-gradient(90deg, transparent, var(--hh-gold-light), transparent);
box-shadow:0 1px 4px rgba(212,188,133,.3);
}
/* أورب ذهبي زخرفي في الزاوية */
.royal-greeting::after{
content:""; position:absolute;
top:-50px; left:-30px;
width:160px; height:160px;
background:radial-gradient(circle, rgba(212,188,133,.15), transparent 70%);
pointer-events:none;
border-radius:50%;
}
.royal-hello{
font-size:.72rem;
color: var(--hh-gold-light);
font-weight:800;
margin-bottom:4px;
letter-spacing:0;
display:flex; align-items:center; gap:5px;
text-shadow:0 1px 3px rgba(0,0,0,.3);
position:relative; z-index:2;
}
.royal-hello::before{
content:""; width:14px; height:1.5px;
background: var(--hh-gold);
display:inline-block;
border-radius:2px;
}
.royal-username{
font-size:1.2rem; font-weight:900;
color: var(--hh-white);
line-height:1.2; letter-spacing:-.3px;
direction:rtl; text-align:right;
max-width:180px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
text-shadow:0 2px 8px rgba(0,0,0,.35);
position:relative; z-index:2;
}
.royal-username .wave{
display:inline-block;
animation:royalWave 2.5s ease-in-out infinite;
transform-origin:70% 70%;
}
@keyframes royalWave{
0%,100%{transform:rotate(0);}
10%,30%{transform:rotate(14deg);}
20%,40%{transform:rotate(-8deg);}
50%{transform:rotate(10deg);}
60%{transform:rotate(-4deg);}
70%{transform:rotate(0);}
}
.royal-brand-mini{
display:flex; align-items:center; gap:10px;
position:relative; z-index:2;
}
.royal-brand-mini-icon{
width:50px; height:50px;
display:flex; align-items:center; justify-content:center;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
position:relative;
transition:transform .3s;
}
.royal-brand-mini-icon:hover{ transform:scale(1.05) rotate(-3deg); }
.royal-brand-mini-icon svg{ width:100%; height:100%; }
.royal-brand-name-wrap{
display:flex; flex-direction:column; gap:2px;
text-align:left;
}
.royal-brand-name{
font-family:'Tajawal','Cairo','Noto Sans Arabic',sans-serif;
font-weight:900;
font-size:1.3rem;
color:#F8F8F6;
letter-spacing:0;
line-height:1.5;
text-shadow:
0 2px 6px rgba(0,0,0,.3),
0 0 12px rgba(212,188,133,.2);
font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
-webkit-font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
}
.royal-brand-tag{
font-size:.66rem;
color: var(--hh-gold);
font-weight:700;
letter-spacing:0;
}
/* ═══════════════════════════════════════════
الواجهة المبسطة — مسارا المعلم/الطالب
═══════════════════════════════════════════ */
.path-intro{
text-align:center;padding:4px 16px 14px;
position:relative;
}
.path-intro::before{
content:"";
display:block;
width:50px;height:3px;
background:linear-gradient(90deg,transparent,#B8924A,transparent);
margin:0 auto 14px;
border-radius:2px;
}
.path-intro-label{
display:inline-flex;align-items:center;gap:8px;
font-size:.82rem;font-weight:900;
color:#B8924A;
letter-spacing:0;
margin-bottom:8px;
font-family:'Cairo','Tajawal',sans-serif;
position:relative;
padding:4px 14px;
border-radius:999px;
transition:all .25s ease;
}
.path-intro-label:hover{
color:#8A6D2E;
background:rgba(184,146,74,.08);
transform:translateY(-1px);
}
.path-intro-label:active{
transform:translateY(0);
}
.path-intro-label::before,
.path-intro-label::after{
content:"";display:inline-block;
width:18px;height:2px;
background:linear-gradient(90deg,transparent,#B8924A);
border-radius:2px;
}
.path-intro-label::after{
background:linear-gradient(90deg,#B8924A,transparent);
}
.path-intro-title{
font-family:Cairo,sans-serif;font-weight:900;color:#5E0E26;
font-size:1.4rem;letter-spacing:-.4px;line-height:1.3;
}
.paths-container{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-bottom:18px;padding:6px 0 14px;
max-width:560px;margin-left:auto;margin-right:auto;
}
@media(max-width:480px){
.paths-container{grid-template-columns:1fr 1fr;gap:10px;}
}
.path-card{
position:relative;border-radius:14px;overflow:hidden;
cursor:pointer;transition:all .4s cubic-bezier(.34,1.2,.64,1);
min-height:175px;
box-shadow:
0 3px 9px rgba(61,38,20,.12),
0 8px 18px rgba(61,38,20,.16);
}
.path-card:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:
0 6px 14px rgba(61,38,20,.18),
0 12px 28px rgba(61,38,20,.22);
}
.path-card:active{transform:translateY(-2px);}
/* إخفاء قائمة الميزات كاملة — للحصول على بطاقات مكثفة */
.path-features{display:none !important;}
/* إبراز بطاقة "الطالب" */
.path-card.path-student{
transform:scale(1.02);
z-index:2;
}
.path-card.path-student:hover{
transform:translateY(-4px) scale(1.04);
}
/* مسار الزائر — شكل مختلف (عريض أفقيا على الموبايل) */
.path-visitor{
min-height:160px !important;
}
.path-visitor .path-card-inner{
padding:20px 16px !important;
}
@media(max-width:480px){
.path-visitor{min-height:140px !important;}
.path-visitor .path-card-inner{
flex-direction:row !important;
align-items:center !important;
padding:16px !important;
gap:14px;
}
.path-visitor .path-icon{margin-bottom:0 !important;flex-shrink:0;}
.path-visitor .path-title::after{display:none;}
.path-visitor .path-features{display:none;}
.path-visitor .path-badge{position:absolute;top:12px;left:12px;margin-bottom:0;}
.path-visitor .path-title{font-size:1.15rem !important;margin-bottom:3px !important;}
.path-visitor .path-desc{margin-bottom:0 !important;font-size:.78rem !important;}
.path-visitor .path-cta{
position:absolute;bottom:12px;left:12px;right:auto;width:auto;
padding:7px 14px !important;font-size:.76rem !important;
display:none !important;
}
.path-visitor-content{flex:1;min-width:0;}
}
.path-card-inner{
position:relative;z-index:2;
height:100%;padding:10px 8px 8px;
display:flex;flex-direction:column;
color:#fff;
}
.path-card::before{
content:"";position:absolute;inset:0;z-index:1;
background:
radial-gradient(circle at 100% 0%, rgba(255,255,255,.08) 0%, transparent 50%),
radial-gradient(circle at 0% 100%, rgba(0,0,0,.2) 0%, transparent 50%);
pointer-events:none;
}
/* مسار المعلم — عنابي قطري فاخر */
.path-teacher{
background:
radial-gradient(circle at 100% 0%, rgba(184,146,74,.2) 0%, transparent 55%),
radial-gradient(circle at 0% 100%, rgba(255,255,255,.08) 0%, transparent 40%),
linear-gradient(160deg,#4a0e1f 0%,#6b1530 45%,#8A1538 100%);
border:2px solid rgba(184,146,74,.55);
}
.path-teacher .path-badge{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#4a0e1f;}
.path-teacher .path-icon{background:linear-gradient(135deg,#B8924A,#8A6D2E);color:#fff;border-color:#B8924A;box-shadow:0 4px 12px rgba(184,146,74,.4), inset 0 1px 0 rgba(255,255,255,.2);}
.path-teacher .path-cta{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#4a0e1f;}
.path-teacher .path-feature svg{color:#f0d77a;}
/* مسار الطالب — أخضر زيتي دافئ */
.path-student{
background:
radial-gradient(circle at 0% 100%, rgba(184,146,74,.18) 0%, transparent 55%),
radial-gradient(circle at 100% 0%, rgba(255,255,255,.06) 0%, transparent 40%),
linear-gradient(160deg,#3D0918 0%,#8A1538 45%,#2d6e54 100%);
border:2px solid rgba(212,188,133,.6);
}
.path-student .path-badge{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#3D0918;}
.path-student .path-icon{background:linear-gradient(135deg,#B8924A,#8A6D2E);color:#fff;border-color:#B8924A;box-shadow:0 4px 14px rgba(184,146,74,.5), inset 0 1px 0 rgba(255,255,255,.2);}
.path-student .path-cta{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#3D0918;}
.path-student .path-feature svg{color:#D4BC85;}
/* مسار الزائر — رمادي أنيق مع لمسات ذهبية */
.path-visitor{
background:
radial-gradient(circle at 50% 0%, rgba(184,146,74,.12) 0%, transparent 55%),
linear-gradient(160deg,#2d3748 0%,#3a4556 50%,#4a5668 100%);
border:2px solid rgba(184,146,74,.4);
}
.path-visitor .path-badge{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#2d3748;}
.path-visitor .path-icon{background:linear-gradient(135deg,#B8924A,#8A6D2E);color:#fff;border-color:#B8924A;box-shadow:0 4px 12px rgba(184,146,74,.4), inset 0 1px 0 rgba(255,255,255,.2);}
.path-visitor .path-cta{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#2d3748;}
.path-visitor .path-feature svg{color:#e8c968;}
.path-badge{
display:inline-block;align-self:flex-start;
font-family:Cairo,sans-serif;font-weight:900;font-size:.55rem;
padding:2px 8px;border-radius:999px;letter-spacing:0;
margin-bottom:5px;
box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.path-icon{
width:34px;height:34px;border-radius:9px;
border:1.5px solid;
display:flex;align-items:center;justify-content:center;
margin:3px auto 5px;
transition:all .35s ease;
}
.path-card:hover .path-icon{transform:scale(1.1) rotate(-4deg);}
.path-icon svg{width:18px;height:18px;}
.path-title{
font-family:Cairo,sans-serif;font-weight:900;font-size:.95rem;
margin:0 0 2px;letter-spacing:-.2px;
position:relative;line-height:1.2;text-align:center;
text-shadow:0 1px 6px rgba(0,0,0,.3);
}
.path-title::after{
content:"";display:block;width:20px;height:2px;
background:linear-gradient(90deg,#B8924A,transparent);
margin:3px auto 0;border-radius:2px;
}
.path-desc{
font-size:.66rem;line-height:1.45;color:rgba(255,255,255,.9);
margin:5px 0 auto;font-weight:600;text-align:center;
padding:0 4px;
}
.path-features{
display:flex;flex-direction:column;gap:4px;
margin-bottom:8px;flex:1;
padding:6px;
background:rgba(0,0,0,.25);
backdrop-filter:blur(10px);
border-radius:10px;
border:1px solid rgba(255,255,255,.08);
}
.path-feature{
display:flex;align-items:center;gap:6px;
font-size:.66rem;font-weight:800;color:rgba(255,255,255,.96);
padding:4px 7px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
border-radius:7px;
transition:all .2s ease;
line-height:1.25;
}
.path-card:hover .path-feature{
background:rgba(255,255,255,.14);
border-color:rgba(184,146,74,.45);
transform:translateX(-3px);
}
.path-feature svg{
color:#B8924A;flex-shrink:0;
background:rgba(184,146,74,.28);
padding:2px;border-radius:5px;
width:14px !important;height:14px !important;
box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.path-cta{
display:flex;align-items:center;justify-content:space-between;
padding:7px 11px;border-radius:9px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.72rem;
transition:all .25s ease;
box-shadow:
0 3px 9px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.3);
position:relative;overflow:hidden;
}
.path-cta::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transform:translateX(-100%);transition:transform .6s ease;
}
.path-card:hover .path-cta{
transform:scale(1.04);
box-shadow:
0 9px 24px rgba(0,0,0,.38),
inset 0 1px 0 rgba(255,255,255,.35);
}
.path-card:hover .path-cta::after{transform:translateX(100%);}
/* ═══════════════════════════════════════════
نظام الإنجازات والشارات
═══════════════════════════════════════════ */
/* شاشة الإنجازات */
.achievements-hero{
background:
radial-gradient(ellipse at 20% 20%, rgba(184,146,74,.22) 0%, transparent 55%),
radial-gradient(ellipse at 85% 85%, rgba(138,21,56,.18) 0%, transparent 50%),
linear-gradient(135deg,#3D0918 0%,#5E0E26 50%,#8A1538 100%);
border-radius:22px;padding:22px 20px;margin-bottom:18px;
position:relative;overflow:hidden;
border:1.5px solid rgba(184,146,74,.35);
box-shadow:0 14px 32px rgba(61,38,20,.18);
}
.achievements-hero::before{
content:"";position:absolute;top:-30%;right:-15%;
width:60%;height:80%;opacity:.12;
background:radial-gradient(circle,#B8924A 0%,transparent 65%);
filter:blur(40px);pointer-events:none;
}
.ah-title{
font-family:Cairo;font-weight:900;font-size:1.3rem;color:#fff;
margin-bottom:3px;position:relative;z-index:2;
display:flex;align-items:center;gap:8px;
}
.ah-title svg{width:22px;height:22px;fill:#e8c968;}
.ah-sub{
font-size:.78rem;color:rgba(255,255,255,.78);font-weight:600;
margin-bottom:16px;position:relative;z-index:2;
}
.ah-summary{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
position:relative;z-index:2;
}
.ah-summary-item{
background:rgba(0,0,0,.25);backdrop-filter:blur(8px);
border:1px solid rgba(184,146,74,.22);border-radius:12px;
padding:10px;text-align:center;
}
.ah-summary-num{
font-family:Cairo;font-weight:900;font-size:1.4rem;color:#e8c968;line-height:1;
}
.ah-summary-lbl{font-size:.68rem;color:rgba(255,255,255,.7);font-weight:700;margin-top:3px;}
/* فلتر الشارات */
.badge-filter{
display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;
margin-bottom:10px;scrollbar-width:none;
}
.badge-filter::-webkit-scrollbar{display:none;}
.filter-btn{
flex-shrink:0;padding:6px 12px;border-radius:999px;
background:#fff;border:1.5px solid #dbe8df;
font-family:Cairo;font-weight:800;font-size:.72rem;color:#8A1538;
cursor:pointer;transition:all .15s;white-space:nowrap;
}
.filter-btn:hover{border-color:#B8924A;background:#fdfaf0;}
.filter-btn.active{background:#8A1538;color:#fff;border-color:#8A1538;}
/* شبكة الشارات */
.badges-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
margin-bottom:22px;
}
.badge-item{
background:#fff;border:1.5px solid #e8f2ec;border-radius:14px;
padding:12px 8px 10px;text-align:center;
cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
min-height:118px;display:flex;flex-direction:column;align-items:center;
}
.badge-item:hover{
transform:translateY(-3px);
box-shadow:0 6px 18px rgba(138,21,56,.1);
border-color:#B8924A;
}
.badge-item.earned{
background:linear-gradient(135deg,#fff 0%,#fdfaf0 100%);
border-color:#B8924A;
}
.badge-item.locked{opacity:.55;filter:grayscale(.6);}
.badge-item.locked::after{
content:"";position:absolute;top:6px;left:6px;
width:16px;height:16px;border-radius:50%;
background-image:url("data:image/svg+xml;utf8,");
background-size:contain;background-repeat:no-repeat;
}
.badge-icon-wrap{
width:50px;height:50px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
margin:0 auto 6px;position:relative;
box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.badge-icon-wrap::before{
content:"";position:absolute;inset:-3px;border-radius:50%;
background:inherit;opacity:.2;z-index:-1;
}
.badge-icon-wrap svg{width:26px;height:26px;color:#fff;}
.badge-item.earned .badge-icon-wrap{
animation:badgeGlow 2.5s ease-in-out infinite;
}
@keyframes badgeGlow{
0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.12);}
50%{box-shadow:0 4px 16px rgba(184,146,74,.45);}
}
.badge-tier-ring{
position:absolute;inset:-4px;border-radius:50%;
border:2px solid currentColor;opacity:.4;
}
.badge-name{
font-family:Cairo;font-weight:900;font-size:.78rem;color:#5E0E26;
line-height:1.2;margin-bottom:2px;
}
.badge-tier{
font-size:.6rem;font-weight:800;letter-spacing:0;
padding:1px 6px;border-radius:999px;margin-top:3px;
}
.badge-tier.bronze{background:#fdeee4;color:#8a4400;}
.badge-tier.silver{background:#f5f5f5;color:#616161;}
.badge-tier.gold{background:#F8F8F6;color:#8A6D2E;}
.badge-tier.platinum{background:#d4dde3;color:#5E0E26;}
/* مودال تفاصيل الشارة */
.badge-modal-overlay{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(10,20,40,.82);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
}
.badge-modal-overlay.active{display:flex;}
.badge-modal{
background:#fff;max-width:360px;width:100%;
border-radius:22px;overflow:hidden;position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:badgePop .4s cubic-bezier(.34,1.5,.64,1);
text-align:center;
}
@keyframes badgePop{
0%{opacity:0;transform:scale(.7);}
100%{opacity:1;transform:scale(1);}
}
.badge-modal-header{
padding:26px 20px 18px;color:#fff;position:relative;overflow:hidden;
background:linear-gradient(135deg,#3D0918 0%,#8A1538 100%);
}
.badge-modal-header::before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 50% 100%,rgba(184,146,74,.3) 0%,transparent 60%);
}
.badge-modal-header::after{
content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%);
width:200%;height:200%;
background:conic-gradient(from 0deg,transparent,rgba(184,146,74,.15),transparent,rgba(184,146,74,.15),transparent);
animation:rotate 8s linear infinite;
}
@keyframes rotate{to{transform:translateX(-50%) rotate(360deg);}}
.badge-modal-icon{
width:90px;height:90px;margin:0 auto 10px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
position:relative;z-index:2;
box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.badge-modal-icon svg{width:48px;height:48px;color:#fff;}
.badge-modal-unlock-label{
font-family:Cairo;font-weight:900;font-size:.65rem;letter-spacing:0;
color:#e8c968;position:relative;z-index:2;
text-transform:uppercase;
}
.badge-modal-body{padding:18px 20px 20px;}
.badge-modal-name{
font-family:Cairo;font-weight:900;font-size:1.35rem;color:#5E0E26;
margin-bottom:6px;
}
.badge-modal-desc{
font-size:.86rem;line-height:1.6;color:#6b7c8e;font-weight:600;
margin-bottom:14px;
}
.badge-modal-actions{display:flex;gap:8px;}
.badge-modal-btn{
flex:1;padding:10px;border-radius:10px;cursor:pointer;
font-family:Cairo;font-weight:900;font-size:.82rem;
border:none;transition:all .2s;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.badge-modal-btn svg{width:14px;height:14px;fill:currentColor;}
.badge-modal-btn.primary{
background:linear-gradient(135deg,#8A1538,#5E0E26);color:#fff;
}
.badge-modal-btn.share{
background:linear-gradient(135deg,#B8924A,#a68820);color:#5E0E26;
}
.badge-modal-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18);}
/* ═══ مسارات المهارات (Skills Tracks) ══ */
.skills-section{margin-top:24px;}
.skill-track-card{
background:#fff;border:1.5px solid #e8f2ec;border-radius:16px;
padding:14px;margin-bottom:10px;position:relative;overflow:hidden;
transition:all .2s;
}
.skill-track-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 22px rgba(61,38,20,.1);
}
.skill-track-card.earned{
background:linear-gradient(135deg,#fdfaf0 0%,#fff 100%);
border-color:#B8924A;
}
.skill-track-header{
display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.skill-track-icon{
width:46px;height:46px;border-radius:12px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:#fff;box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.skill-track-icon svg{width:24px;height:24px;color:#fff;}
.skill-track-info{flex:1;min-width:0;}
.skill-track-name{
font-family:Cairo;font-weight:900;font-size:1rem;color:#5E0E26;line-height:1.2;
}
.skill-track-desc{font-size:.72rem;color:#6b7c8e;font-weight:600;margin-top:2px;}
.skill-track-progress{
font-family:Cairo;font-weight:900;font-size:.85rem;color:#8A1538;
background:#e8f2ec;padding:4px 10px;border-radius:999px;
flex-shrink:0;
}
.skill-track-card.earned .skill-track-progress{background:#F8F8F6;color:#8A6D2E;}
.skill-requirements{
display:flex;flex-direction:column;gap:5px;
padding:8px 10px;background:#f5faf7;border-radius:10px;
border:1px dashed #dbe8df;
}
.skill-req{
display:flex;align-items:center;gap:7px;
font-size:.72rem;font-weight:700;color:#6b7c8e;
}
.skill-req.done{color:#3D6B53;}
.skill-req svg{width:13px;height:13px;flex-shrink:0;}
.skill-req.done svg{color:#3D6B53;}
/* ═══ إشعار فتح شارة (بوب أب) ═══ */
.unlock-overlay{
display:none;position:fixed;inset:0;z-index:10000;
background:rgba(10,20,40,.9);backdrop-filter:blur(10px);
align-items:center;justify-content:center;padding:20px;
}
.unlock-overlay.active{display:flex;animation:unlockFadeIn .3s ease;}
@keyframes unlockFadeIn{from{opacity:0;}to{opacity:1;}}
.unlock-card{
background:linear-gradient(135deg,#3D0918 0%,#8A1538 50%,#2d6e54 100%);
color:#fff;max-width:380px;width:100%;
border-radius:24px;overflow:hidden;position:relative;
border:2px solid #B8924A;
box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 80px rgba(184,146,74,.3);
animation:unlockPop .5s cubic-bezier(.34,1.5,.64,1);
}
@keyframes unlockPop{
0%{opacity:0;transform:scale(.5) rotate(-10deg);}
100%{opacity:1;transform:scale(1) rotate(0);}
}
.unlock-card::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(circle at 50% 0%,rgba(184,146,74,.3),transparent 50%),
radial-gradient(circle at 50% 100%,rgba(184,146,74,.15),transparent 60%);
}
.unlock-card::after{
content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%);
width:200%;height:200%;
background:conic-gradient(from 0deg,transparent,rgba(184,146,74,.2),transparent);
animation:rotate 6s linear infinite;
}
.unlock-content{position:relative;z-index:2;padding:28px 24px;text-align:center;}
.unlock-label{
display:inline-block;padding:5px 16px;border-radius:999px;
background:rgba(184,146,74,.22);border:1px solid #B8924A;
color:#e8c968;font-family:Cairo;font-weight:900;font-size:.7rem;
letter-spacing:0;text-transform:uppercase;margin-bottom:14px;
}
.unlock-big-icon{
width:110px;height:110px;margin:0 auto 14px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 40px rgba(184,146,74,.3);
animation:iconBounce 2s ease-in-out infinite;
}
@keyframes iconBounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
.unlock-big-icon svg{width:58px;height:58px;color:#fff;}
.unlock-name{
font-family:Cairo;font-weight:900;font-size:1.5rem;color:#fff;
margin-bottom:5px;
}
.unlock-desc{
font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.85);
margin-bottom:18px;
}
.unlock-close-btn{
background:#B8924A;color:#3D0918;
padding:10px 28px;border-radius:10px;border:none;
font-family:Cairo;font-weight:900;font-size:.88rem;cursor:pointer;
box-shadow:0 4px 14px rgba(184,146,74,.4);
transition:all .2s;
}
.unlock-close-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(184,146,74,.5);}
/* ═══ الأدوات السريعة — نظام ألوان متناغم مع هوية المنصة ═══ */
/* 1. المتصدرون — ذهبي ملكي (البطولة والإنجاز) */
.qt-leaderboard{background:linear-gradient(135deg,#fef4d4 0%,#fff 100%);color:#8A6D2E;}
.qt-leaderboard::before{background:#B8924A;}
.qt-leaderboard .quick-tool-icon-wrap{background:linear-gradient(135deg,#e8c968,#B8924A);color:#fff;}
/* 2. سجل ألعابي — أخضر زيتي (الهوية الأساسية) */
.qt-mygames{background:linear-gradient(135deg,#e4ede7 0%,#fff 100%);color:#3D0918;}
.qt-mygames::before{background:#8A1538;}
.qt-mygames .quick-tool-icon-wrap{background:linear-gradient(135deg,#2d6e54,#8A1538);color:#fff;}
/* 3. القوانين — عنابي قطري (الرسمية والوقار) */
.qt-rules{background:linear-gradient(135deg,#f5e1e7 0%,#fff 100%);color:#4a0e1f;}
.qt-rules::before{background:#8A1538;}
.qt-rules .quick-tool-icon-wrap{background:linear-gradient(135deg,#a83a5e,#8A1538);color:#fff;}
/* 4. تقييم اللعبة — كهرماني دافئ (الحماس والتفاعل) */
.qt-reviews{background:linear-gradient(135deg,#faead3 0%,#fff 100%);color:#7a4a0c;}
.qt-reviews::before{background:#b88420;}
.qt-reviews .quick-tool-icon-wrap{background:linear-gradient(135deg,#d19840,#b88420);color:#fff;}
/* 5. الرعاة — زيتي داكن مع لمسة ذهبية (النبل والشراكة) */
.qt-sponsors{background:linear-gradient(135deg,#d8e2dc 0%,#fff 100%);color:#5E0E26;}
.qt-sponsors::before{background:#2d5544;}
.qt-sponsors .quick-tool-icon-wrap{background:linear-gradient(135deg,#4a7a65,#2d5544);color:#fff;}
/* 6. من نحن — عنابي فاتح (قيمة أصيلة) */
.qt-about{background:linear-gradient(135deg,#f0dde3 0%,#fff 100%);color:#6b1530;}
.qt-about::before{background:#a83a5e;}
.qt-about .quick-tool-icon-wrap{background:linear-gradient(135deg,#c55578,#a83a5e);color:#fff;}
/* 7. الإنجازات — ذهبي عتيق (فخر التحصيل) */
.qt-achievements{background:linear-gradient(135deg,#F8F8F6 0%,#fff 100%);color:#8A6D2E;}
.qt-achievements::before{background:#B8924A;}
.qt-achievements .quick-tool-icon-wrap{background:linear-gradient(135deg,#d4b740,#a68820);color:#fff;}
/* 8. دليل الاستخدام — فيروزي نبيل (المعرفة والإرشاد) */
.qt-guide{background:linear-gradient(135deg,#dfeeed 0%,#fff 100%);color:#0f4a47;}
.qt-guide::before{background:#166e6a;}
.qt-guide .quick-tool-icon-wrap{background:linear-gradient(135deg,#2a8a85,#166e6a);color:#fff;}
/* شخصيات مؤثرة — ذهبي نخبوي */
.qt-influencers{background:linear-gradient(135deg,#fff8e8 0%,#fdfaf0 100%);color:#8A6D2E;}
.qt-influencers::before{background:#B8924A;}
.qt-influencers .quick-tool-icon-wrap{background:linear-gradient(135deg,#e8c968,#B8924A);color:#fff;}
body.dark-mode .qt-influencers{background:linear-gradient(135deg,#2a2418 0%,#1a1a1a 100%);color:#D4BC85;}
/* ═══════════════════════════════════════════
شاشة دليل الاستخدام
═══════════════════════════════════════════ */
.guide-hero{
background:
radial-gradient(ellipse at 18% 18%, rgba(184,146,74,.30) 0%, transparent 58%),
radial-gradient(ellipse at 88% 92%, rgba(22,110,106,.32) 0%, transparent 55%),
linear-gradient(135deg,#2a0610 0%,#5E0E26 42%,#0f4a47 100%);
border-radius:24px;padding:30px 24px;margin-bottom:22px;
position:relative;overflow:hidden;
border:1.5px solid rgba(184,146,74,.5);
color:#fff;
box-shadow:0 14px 42px rgba(42,6,16,.32);
}
.guide-hero::before{
content:"";position:absolute;top:-35%;right:-12%;
width:60%;height:90%;opacity:.18;
background:radial-gradient(circle,#e8c968 0%,transparent 62%);
filter:blur(38px);pointer-events:none;
}
.guide-hero::after{
content:"";position:absolute;bottom:16px;right:24px;
width:46px;height:46px;opacity:.22;pointer-events:none;
background:url('data:image/svg+xml;utf8,') no-repeat center/contain;
}
.gh-label{
display:inline-flex;align-items:center;gap:6px;
background:rgba(184,146,74,.22);border:1px solid #B8924A;
padding:6px 16px;border-radius:999px;
font-family:Cairo;font-weight:900;font-size:.66rem;
letter-spacing:0;color:#f0d784;
margin-bottom:14px;position:relative;z-index:2;
}
.gh-label svg{width:11px;height:11px;fill:currentColor;}
.gh-title{
font-family:Cairo;font-weight:900;font-size:1.55rem;color:#fff;
margin-bottom:6px;line-height:1.2;
text-shadow:0 2px 16px rgba(0,0,0,.35);
position:relative;z-index:2;
}
.gh-sub{
font-size:.85rem;color:rgba(255,255,255,.84);font-weight:600;
line-height:1.65;position:relative;z-index:2;
}
.gh-sub::after{
content:"";display:block;height:3px;width:60px;
background:linear-gradient(90deg,#e8c968,transparent);
border-radius:2px;margin-top:14px;
}
/* تبديل المستخدم (معلم/طالب) */
.guide-switcher{
display:grid;grid-template-columns:1fr 1fr;
gap:6px;margin-bottom:26px;padding:6px;
background:linear-gradient(135deg,#fff,#fdfaf3);
border:1.5px solid #ece0c5;
border-radius:16px;
box-shadow:0 4px 14px rgba(138,21,56,.07);
}
.guide-tab{
padding:13px;border-radius:12px;cursor:pointer;
background:transparent;border:none;
font-family:Cairo;font-weight:900;font-size:.92rem;color:#8A6D2E;
transition:all .25s;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.guide-tab svg{width:18px;height:18px;fill:currentColor;}
.guide-tab:hover{background:#fdf6e8;color:#5E0E26;}
.guide-tab.active{
background:linear-gradient(135deg,#8A1538,#5E0E26);color:#fff;
box-shadow:0 4px 14px rgba(138,21,56,.3);
}
.guide-tab.active svg{fill:#f0d784;}
/* بطاقات الخطوات */
.guide-content{display:none;}
.guide-content.active{display:block;animation:guideFadeIn .35s ease;position:relative;padding-right:32px;}
/* الخط الزمني الذهبي المتوهّج */
.guide-content.active::before{
content:"";position:absolute;right:17px;top:10px;bottom:30px;
width:3px;
background:linear-gradient(180deg,#e8c968,#B8924A 40%,#e3d3a8 78%,transparent);
border-radius:2px;
box-shadow:0 0 12px rgba(184,146,74,.4);
pointer-events:none;
}
@keyframes guideFadeIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
@keyframes guideStepIn{
from{opacity:0;transform:translateY(14px);}
to{opacity:1;transform:translateY(0);}
}
.guide-step{
background:linear-gradient(135deg,#fff,#fefdfa);
border:1px solid #ece4d3;border-radius:18px;
padding:18px 20px;margin-bottom:18px;
position:relative;overflow:hidden;
transition:all .25s;
box-shadow:0 6px 22px rgba(94,14,38,.08);
animation:guideStepIn .5s ease both;
}
.guide-content.active .guide-step:nth-child(1){animation-delay:.05s;}
.guide-content.active .guide-step:nth-child(2){animation-delay:.12s;}
.guide-content.active .guide-step:nth-child(3){animation-delay:.19s;}
.guide-content.active .guide-step:nth-child(4){animation-delay:.26s;}
.guide-content.active .guide-step:nth-child(5){animation-delay:.33s;}
.guide-content.active .guide-step:nth-child(6){animation-delay:.40s;}
.guide-content.active .guide-step:nth-child(7){animation-delay:.47s;}
/* شريط ذهبي رفيع على حافة كل بطاقة */
.guide-step::after{
content:"";position:absolute;top:0;right:0;
width:4px;height:100%;
background:linear-gradient(180deg,#e8c968,#B8924A);
pointer-events:none;
}
.guide-step:hover{
transform:translateY(-3px);
box-shadow:0 14px 32px rgba(94,14,38,.13);
border-color:#e3d3a8;
}
.gs-header{
display:flex;align-items:center;gap:12px;margin-bottom:10px;
}
.gs-number{
width:40px;height:40px;border-radius:13px;flex-shrink:0;
background:linear-gradient(145deg,#f0d784,#B8924A 55%,#8A6D2E);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:Cairo;font-weight:900;font-size:1.05rem;
box-shadow:0 6px 16px rgba(184,146,74,.5), inset 0 1px 2px rgba(255,255,255,.5);
border:3px solid #fff;
text-shadow:0 1px 3px rgba(122,84,5,.4);
position:absolute;z-index:3;
right:-31px;top:16px;
}
.gs-info{flex:1;min-width:0;}
.gs-title{
font-family:Cairo;font-weight:900;font-size:1.08rem;color:#5E0E26;
line-height:1.25;margin-bottom:3px;
}
.gs-subtitle{
font-size:.74rem;color:#B8924A;font-weight:800;
display:flex;align-items:center;gap:5px;
}
.gs-desc{
font-size:.84rem;line-height:1.75;color:#3d4e60;font-weight:500;
margin:8px 0 10px;padding-right:4px;
}
.gs-desc strong{color:#5E0E26;font-weight:900;}
.gs-action{
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(135deg,#166e6a,#0f4a47);color:#fff;
padding:10px 18px;border-radius:11px;cursor:pointer;
font-family:Cairo;font-weight:900;font-size:.78rem;border:none;
transition:all .2s;
text-decoration:none;
box-shadow:0 4px 14px rgba(22,110,106,.3);
}
.gs-action:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(22,110,106,.45);}
.gs-action svg{width:13px;height:13px;fill:currentColor;}
/* نصيحة ملونة */
.gs-tip{
background:linear-gradient(135deg,#fdfaf0,#fffdf7);
border:1px solid #e6cf95;border-right:4px solid #e8c968;
border-radius:11px;padding:11px 13px;margin-top:12px;
font-size:.78rem;line-height:1.65;color:#8A6D2E;font-weight:600;
display:flex;gap:9px;
}
.gs-tip svg{width:16px;height:16px;fill:#B8924A;flex-shrink:0;margin-top:1px;}
.gs-tip strong{color:#5E0E26;font-weight:900;}
/* قسم الميزات */
.guide-features{
background:linear-gradient(135deg,#f5faf7,#fff);
border:1.5px solid #dbe8df;border-radius:16px;
padding:16px;margin:20px 0;
}
.gf-title{
font-family:Cairo;font-weight:900;font-size:.92rem;color:#5E0E26;
margin-bottom:12px;display:flex;align-items:center;gap:8px;
}
.gf-title svg{width:18px;height:18px;fill:#B8924A;}
.gf-grid{
display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
.gf-item{
background:#fff;border:1px solid #e8f2ec;border-radius:10px;
padding:10px;display:flex;align-items:center;gap:8px;
font-size:.76rem;color:#3d4e60;font-weight:700;
}
.gf-item svg{width:14px;height:14px;fill:#166e6a;flex-shrink:0;}
/* خاتمة */
.guide-closing{
background:
radial-gradient(ellipse at 50% 0%, rgba(184,146,74,.28) 0%, transparent 55%),
linear-gradient(135deg,#2a0610,#0f4a47);
color:#fff;
border-radius:18px;padding:24px 20px;margin-top:22px;text-align:center;
position:relative;overflow:hidden;
border:1px solid rgba(184,146,74,.35);
box-shadow:0 10px 30px rgba(42,6,16,.3);
}
.guide-closing h3{
font-family:Cairo;font-weight:900;font-size:1.15rem;margin-bottom:6px;color:#f0d784;
position:relative;z-index:2;
}
.guide-closing p{font-size:.85rem;line-height:1.7;opacity:.9;font-weight:600;position:relative;z-index:2;}
@media(max-width:400px){
.gf-grid{grid-template-columns:1fr;}
.guide-switcher{grid-template-columns:1fr;}
}
/* ═══════════════════════════════════════════
شاشة دليل الاستخدام — نهاية
═══════════════════════════════════════════ */
/* ═══ الأدوات السريعة - تصميم حي ومتنوع ═══ */
.quick-tools{margin:24px 0 16px;}
.quick-tools-header{
display:flex;align-items:center;gap:8px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.95rem;
color:#8A1538;margin-bottom:12px;padding:0 4px;
letter-spacing:-.2px;
}
.quick-tools-header::before{
content:"";width:3px;height:16px;background:linear-gradient(to bottom,#B8924A,#a68820);
border-radius:2px;display:inline-block;
}
.quick-tools-header svg{fill:#B8924A;}
.quick-tools-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
/* ══════════ التصميم الجديد: قائمة الأدوات السريعة الموحدة ══════════ */
/* شريط الإحصائيات الشخصي السريع */
.royal-stats-strip{
display:flex;align-items:center;gap:0;
margin:0 0 18px;
padding:14px 18px;
background:
linear-gradient(135deg,rgba(138,21,56,.04) 0%,rgba(184,146,74,.06) 100%),
#ffffff;
border:1.5px solid #f0e8d0;
border-radius:16px;
box-shadow:0 4px 16px rgba(42,26,12,.06);
position:relative;overflow:hidden;
}
.royal-stats-strip::before{
content:'';position:absolute;top:0;right:0;left:0;height:3px;
background:linear-gradient(90deg,#8A1538,#B8924A,#8A1538,#B8924A,#8A1538);
opacity:.6;
}
body.dark-mode .royal-stats-strip{
background:linear-gradient(135deg,#1a2026 0%,#1f2a26 100%);
border-color:#2a3530;
}
.rss-item{
flex:1;
display:flex;align-items:center;gap:10px;
padding:4px 8px;
}
.rss-icon{
width:38px;height:38px;flex-shrink:0;
border-radius:10px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 8px rgba(0,0,0,.06);
}
.rss-icon svg{width:18px;height:18px;}
.rss-text{display:flex;flex-direction:column;line-height:1.2;}
.rss-value{
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.15rem;
color:#3D0918;
}
.rss-label{
font-size:.68rem;color:#888;font-weight:700;
font-family:'Tajawal',sans-serif;
margin-top:2px;
}
body.dark-mode .rss-value{color:#D4BC85;}
body.dark-mode .rss-label{color:#aab2bb;}
.rss-divider{
width:1px;height:32px;
background:linear-gradient(180deg,transparent,#e0d8c0,transparent);
flex-shrink:0;
}
body.dark-mode .rss-divider{background:linear-gradient(180deg,transparent,#3a4148,transparent);}
@media (max-width: 540px){
.royal-stats-strip{padding:10px 12px;gap:0;}
.rss-item{gap:7px;padding:2px 4px;}
.rss-icon{width:32px;height:32px;}
.rss-icon svg{width:15px;height:15px;}
.rss-value{font-size:1rem;}
.rss-label{font-size:.63rem;}
}
/* ═══════════════════════════════════════════════════════════════
قسم "ماذا تحب أن تبدأ به؟" — هوية ملكية فخمة
═══════════════════════════════════════════════════════════════ */
.role-quick-start{
margin:18px 0 24px;
padding:0;
background:transparent;
border:none;
border-radius:0;
box-shadow:none;
position:relative;
}
/* رأس القسم — بطاقة ملكية مميزة */
.rqs-header{
display:flex;
align-items:center;
gap:14px;
margin-bottom:14px;
padding:18px 22px;
background:linear-gradient(135deg,#3D0918 0%,#8A1538 50%,#5E0E26 100%);
border:1.5px solid rgba(184,146,74,.45);
border-radius:18px 18px 14px 14px;
position:relative;
overflow:hidden;
box-shadow:
0 8px 24px rgba(42,26,12,.22),
inset 0 1px 0 rgba(212,188,133,.12);
}
/* خط ذهبي علوي متوهج */
.rqs-header::before{
content:'';
position:absolute;
top:0; right:15%; left:15%;
height:2px;
background:linear-gradient(90deg,transparent,#B8924A,transparent);
box-shadow:0 1px 6px rgba(184,146,74,.45);
}
/* أورب ذهبي زخرفي */
.rqs-header::after{
content:'';
position:absolute;
top:-40px; left:-40px;
width:140px; height:140px;
background:radial-gradient(circle,rgba(212,188,133,.18),transparent 65%);
pointer-events:none;
border-radius:50%;
}
.rqs-icon{
width:54px; height:54px; flex-shrink:0;
background:linear-gradient(135deg,#B8924A 0%,#8A6D2E 100%);
color:#fff;
border-radius:14px;
display:flex; align-items:center; justify-content:center;
box-shadow:
0 6px 16px rgba(184,146,74,.45),
inset 0 -2px 0 rgba(0,0,0,.18),
0 0 0 2px rgba(212,188,133,.3);
position:relative;
z-index:2;
}
.rqs-icon::before{
display:none;
}
.rqs-icon svg{width:26px;height:26px;}
.rqs-text{
flex:1; display:flex; flex-direction:column;
line-height:1.35;
position:relative; z-index:2;
text-align:right;
}
.rqs-title{
font-family:'Cairo',sans-serif;
font-weight:900;
font-size:1.25rem;
color:#fff !important;
background:transparent !important;
-webkit-background-clip:initial !important;
background-clip:initial !important;
letter-spacing:-.3px;
text-shadow:0 2px 6px rgba(0,0,0,.35);
margin-bottom:4px;
}
.rqs-subtitle{
font-size:.82rem;
color:#D4BC85 !important;
font-weight:700;
font-family:'Tajawal',sans-serif;
text-shadow:0 1px 3px rgba(0,0,0,.25);
}
/* البطاقات */
.rqs-buttons{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
position:relative;
z-index:2;
}
.rqs-btn{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:14px;
padding:18px 16px 16px;
background:linear-gradient(135deg,#fefefe 0%,#fafaf5 100%);
color:#3D0918;
border:1.5px solid rgba(184,146,74,.25);
border-right:4px solid var(--rqs-color, #B8924A);
border-radius:14px;
font-family:'Tajawal',sans-serif;
font-weight:800;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.2,.64,1);
text-align:right;
position:relative;
overflow:hidden;
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 4px 12px rgba(42,26,12,.06);
min-height:130px;
}
/* خلفية تدرج خفيفة في الزاوية */
.rqs-btn::before{
content:'';
position:absolute;
top:-30px; left:-30px;
width:120px; height:120px;
background:radial-gradient(circle,var(--rqs-bg-accent,rgba(184,146,74,.12)),transparent 70%);
opacity:.7;
z-index:0;
pointer-events:none;
transition:opacity .3s ease;
}
/* خط علوي ذهبي عند الـ hover */
.rqs-btn::after{
content:'';
position:absolute;
top:0; left:0; right:0;
height:3px;
background:linear-gradient(90deg,transparent,var(--rqs-color),transparent);
opacity:0;
transition:opacity .3s ease;
}
.rqs-btn:hover{
transform:translateY(-3px);
border-color:var(--rqs-color, #B8924A);
border-right-width:5px;
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 16px 32px rgba(42,26,12,.14),
0 4px 8px rgba(184,146,74,.12);
}
.rqs-btn:hover::before{opacity:1;}
.rqs-btn:hover::after{opacity:1;}
.rqs-btn-icon{
width:48px; height:48px; flex-shrink:0;
background:linear-gradient(135deg,var(--rqs-color, #B8924A),var(--rqs-color-dark, #8A6D2E));
color:#fff;
border-radius:12px;
display:flex; align-items:center; justify-content:center;
transition:all .3s cubic-bezier(.34,1.2,.64,1);
position:relative; z-index:2;
box-shadow:
0 5px 14px rgba(0,0,0,.14),
inset 0 -2px 0 rgba(0,0,0,.18),
0 0 0 2px rgba(255,255,255,.85);
align-self:flex-start;
}
.rqs-btn:hover .rqs-btn-icon{
transform:scale(1.08) rotate(-4deg);
box-shadow:
0 10px 24px rgba(0,0,0,.2),
inset 0 -2px 0 rgba(0,0,0,.22),
0 0 0 3px rgba(212,188,133,.45);
}
.rqs-btn-icon svg{width:24px;height:24px;}
.rqs-btn-text{
display:flex; flex-direction:column;
line-height:1.4;
position:relative; z-index:2;
width:100%;
margin-top:auto;
}
.rqs-btn-label{
font-family:'Cairo',sans-serif;
font-weight:900;
font-size:1.05rem;
color:#3D0918;
letter-spacing:-.2px;
margin-bottom:4px;
}
.rqs-btn-hint{
font-size:.76rem;
color:#8A1538;
font-weight:700;
font-family:'Tajawal',sans-serif;
line-height:1.5;
opacity:.85;
}
/* ─── ألوان البطاقات (متناسقة مع الهوية) ─── */
.rqs-btn[data-color="green"]{
--rqs-color:#8A1538;
--rqs-color-dark:#3D0918;
--rqs-bg-accent:rgba(138,21,56,.10);
}
.rqs-btn[data-color="gold"]{
--rqs-color:#B8924A;
--rqs-color-dark:#8A6D2E;
--rqs-bg-accent:rgba(184,146,74,.14);
}
.rqs-btn[data-color="brown"]{
--rqs-color:#8A1538;
--rqs-color-dark:#5E0E26;
--rqs-bg-accent:rgba(138,21,56,.10);
}
.rqs-btn[data-color="maroon"]{
--rqs-color:#8A1538;
--rqs-color-dark:#5c0e25;
--rqs-bg-accent:rgba(138,21,56,.10);
}
.rqs-btn[data-color="navy"]{
--rqs-color:#8A1538;
--rqs-color-dark:#5E0E26;
--rqs-bg-accent:rgba(138,21,56,.10);
}
/* شارة "قريبا" داخل البطاقة */
.rqs-btn-soon{
position:absolute;
top:10px; left:10px;
background:linear-gradient(135deg,#B8924A,#8A6D2E);
color:#fff;
padding:3px 10px;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-weight:900;
font-size:.62rem;
letter-spacing:0;
box-shadow:0 3px 8px rgba(0,0,0,.15);
z-index:3;
}
/* الوضع الداكن */
body.dark-mode .role-quick-start{
background:transparent;
box-shadow:none;
}
body.dark-mode .rqs-header{
background:linear-gradient(135deg,#050f0c 0%,#3D0918 100%);
border-color:rgba(212,188,133,.5);
}
body.dark-mode .rqs-btn{
background:linear-gradient(135deg,#1a2e24 0%,#162e23 100%);
border-color:#2d5544;
border-right-color:var(--rqs-color, #B8924A);
}
body.dark-mode .rqs-btn-label{color:#f0f5f2;}
body.dark-mode .rqs-btn-hint{color:#9ab0a4;}
/* جوال */
@media (max-width:640px){
.rqs-header{padding:14px 16px;gap:11px;border-radius:14px;}
.rqs-icon{width:46px;height:46px;border-radius:11px;}
.rqs-icon svg{width:22px;height:22px;}
.rqs-title{font-size:1.05rem;}
.rqs-subtitle{font-size:.74rem;}
.rqs-buttons{grid-template-columns:repeat(2,1fr);gap:10px;}
.rqs-btn{min-height:114px;padding:14px 12px;}
.rqs-btn-icon{width:42px;height:42px;}
.rqs-btn-icon svg{width:20px;height:20px;}
.rqs-btn-label{font-size:.95rem;}
.rqs-btn-hint{font-size:.7rem;}
}
@media (max-width:380px){
.rqs-buttons{grid-template-columns:1fr;}
}
/* ═══════════════════════════════════════════════════════
شريط التنقل الرئيسي (Sticky + احترافي)
═══════════════════════════════════════════════════════ */
.main-nav{
position:sticky;top:0;z-index:90;
background:linear-gradient(180deg,#FAFAF8 0%,#faf5e8 100%);
border-bottom:2px solid rgba(184,146,74,.35);
box-shadow:0 2px 12px rgba(138,21,56,.06);
/* يمتد لكامل عرض الشاشة متجاوزاً حشوة screen-menu (padding:20px) */
width:auto;
margin:-20px -20px 0;
align-self:stretch;
}
.main-nav::after{
content:''; position:absolute; bottom:-2px; left:0; right:0;
height:2px;
background:linear-gradient(90deg, transparent, #B8924A 30%, #B8924A 70%, transparent);
pointer-events:none;
}
.main-nav-inner{
display:flex;align-items:center;justify-content:space-between;
padding:6px 16px;gap:12px;
max-width:1280px;margin:0 auto;
position:relative;
}
/* اليسار: الشعار + الاسم */
.main-nav-brand{
display:flex;align-items:center;gap:9px;flex-shrink:0;
}
.main-nav-burger{
display:none;
background:linear-gradient(135deg,#F8F8F6 0%,#fdf3d6 100%);
border:1.5px solid rgba(184,146,74,.45);
color:#8A1538;border-radius:8px;
width:32px;height:32px;
align-items:center;justify-content:center;cursor:pointer;
transition:all .2s;
box-shadow:0 2px 5px rgba(184,146,74,.12), inset 0 -1.5px 0 rgba(184,146,74,.08);
}
.main-nav-burger:hover{
border-color:#B8924A;
transform:translateY(-1px);
box-shadow:0 4px 9px rgba(184,146,74,.2);
}
.main-nav-logo{
width:38px;height:38px;cursor:pointer;flex-shrink:0;
filter:drop-shadow(0 3px 8px rgba(138,21,56,.25));
transition:all .2s ease;
}
.main-nav-logo:hover{
transform:scale(1.06) rotate(-2deg);
filter:drop-shadow(0 5px 14px rgba(184,146,74,.4));
}
.main-nav-logo svg{width:100%;height:100%;}
.main-nav-title{
cursor:pointer;display:flex;flex-direction:column;line-height:1.2;gap:1px;
padding-right:3px;
}
.main-nav-name{
font-family:'Tajawal','Cairo','Noto Sans Arabic',sans-serif;
font-weight:900;font-size:1.15rem;
letter-spacing:0;
line-height:1.3;
background:linear-gradient(180deg,#8A1538 0%,#5E0E26 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
-webkit-font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
}
.main-nav-tag{
font-size:.65rem;color:#8A6D2E;font-weight:800;letter-spacing:0;
white-space:nowrap;
font-family:'Tajawal',sans-serif;
}
/* الوسط: روابط التنقل — بنفس روح الشريط السفلي تماما */
.main-nav-links{
display:flex;align-items:center;gap:10px;
list-style:none;margin:0;padding:0;flex:1;
justify-content:center;
}
.nav-link{
display:inline-flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
padding:3px 6px 5px !important;
background:transparent !important;
color:#8A1538;
border:none !important;
border-radius:10px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.65rem;
cursor:pointer;transition:all .18s ease;
white-space:nowrap;
position:relative;
min-height:58px;
-webkit-tap-highlight-color:transparent;
box-shadow:none !important;
}
/* تأكيد أن الزر النشط لا يأخذ خلفية على المستوى العام */
.nav-link.nav-link-active{
background:transparent !important;
border:none !important;
box-shadow:none !important;
}
/* الأيقونة كحلقة كريمية متوسعة (نفس الشريط السفلي) - أحجام موحدة */
.nav-link svg{
flex-shrink:0;
width:30px !important;
height:30px !important;
padding:5px;
background:linear-gradient(135deg,#F8F8F6 0%,#fdf3d6 100%);
border:1.5px solid rgba(184,146,74,.45);
border-radius:9px;
color:#8A1538;
box-shadow:0 2px 5px rgba(184,146,74,.12), inset 0 -1.5px 0 rgba(184,146,74,.08);
transition:all .2s ease;
box-sizing:border-box;
display:block;
}
.nav-link:hover svg{
transform:translateY(-1px);
box-shadow:0 4px 9px rgba(184,146,74,.2), inset 0 -1.5px 0 rgba(184,146,74,.1);
border-color:#B8924A;
}
.nav-link span{
color:#8A1538;
font-weight:900;
font-size:.65rem;
letter-spacing:0;
display:block;
line-height:1.2;
text-align:center;
position:relative;
z-index:2;
}
/* الرابط النشط — مطابق للشريط السفلي تماما */
.nav-link-active svg{
background:linear-gradient(135deg,#8A1538 0%,#5E0E26 100%) !important;
border:1.5px solid #B8924A !important;
color:#D4BC85 !important;
box-shadow:0 2px 4px rgba(138,21,56,.25), inset 0 -1.5px 0 rgba(0,0,0,.18) !important;
width:38px;height:38px;
padding:8px;
}
/* أيقونات stroke (الخطوط) */
.nav-link-active svg path,
.nav-link-active svg polyline,
.nav-link-active svg polygon,
.nav-link-active svg circle,
.nav-link-active svg rect{
stroke:#D4BC85 !important;
}
/* أيقونات fill (المملوءة) */
.nav-link-active svg [fill]:not([fill="none"]){
fill:#D4BC85 !important;
}
.nav-link-active span{
color:#5E0E26 !important;
font-weight:900 !important;
font-size:.72rem !important;
letter-spacing:0;
display:block;
line-height:1.2;
text-shadow:none !important;
}
/* مؤشر ذهبي صغير تحت الكلمة */
.nav-link-active::after{
content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width:30px; height:2.5px;
background:linear-gradient(90deg,transparent,#B8924A,#e6ac00,#B8924A,transparent);
border-radius:2px;
box-shadow:0 1px 4px rgba(184,146,74,.45);
}
/* خانة البحث في الشريط العلوي — بنفس نمط الأيقونات */
.nav-search-wrap{
display:flex;align-items:center;
background:linear-gradient(135deg,#F8F8F6 0%,#fdf3d6 100%);
border:1.5px solid rgba(184,146,74,.45);
border-radius:10px;
padding:5px 10px 5px 8px;
width:200px;
transition:all .2s ease;
flex-shrink:0;
box-shadow:0 2px 5px rgba(184,146,74,.12), inset 0 -1.5px 0 rgba(184,146,74,.08);
}
.nav-search-wrap:focus-within{
background:#fff;
border-color:#B8924A;
box-shadow:0 0 0 3px rgba(184,146,74,.18);
width:240px;
}
.nav-search-icon{
color:#B8924A;
flex-shrink:0;
margin-left:6px;
}
.nav-search-input{
flex:1; min-width:0;
background:transparent; border:none; outline:none;
color:#5E0E26; font-family:Cairo,sans-serif; font-weight:600;
font-size:.78rem;
padding:2px 0;
}
.nav-search-input::placeholder{
color:rgba(122,100,24,.6);
font-weight:600;
}
.nav-search-clear{
width:18px;height:18px;
background:rgba(184,146,74,.18);
border:none; border-radius:50%;
color:#8A6D2E;
cursor:pointer;
display:none;
align-items:center;justify-content:center;
transition:all .15s;
flex-shrink:0;
}
.nav-search-wrap.has-text .nav-search-clear{ display:flex; }
.nav-search-clear:hover{ background:rgba(212,188,133,.35); }
/* قائمة نتائج البحث */
.nav-search-results{
position:absolute; top:calc(100% + 6px); right:0;
background:#FAFAF8;
border:1.5px solid #B8924A;
border-radius:12px;
box-shadow:0 8px 24px rgba(42,26,12,.25);
width:300px;
max-height:380px;
overflow-y:auto;
z-index:9100;
padding:6px;
display:none;
}
.nav-search-results.open{ display:block; }
.nav-search-result{
display:flex; align-items:center; gap:10px;
padding:9px 10px;
border-radius:8px;
cursor:pointer;
transition:background .15s;
font-family:Cairo,sans-serif;
text-align:right;
}
.nav-search-result:hover{ background:rgba(184,146,74,.12); }
.nav-search-result-icon{
width:32px;height:32px;
background:linear-gradient(135deg,#8A1538,#5E0E26);
color:#D4BC85;
border-radius:8px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.nav-search-result-icon svg{ width:16px; height:16px; }
.nav-search-result-info{ flex:1; min-width:0; }
.nav-search-result-title{
font-size:.82rem; font-weight:900; color:#1a1a2e;
line-height:1.2;
}
.nav-search-result-desc{
font-size:.68rem; color:#777; font-weight:600;
margin-top:2px; line-height:1.3;
}
.nav-search-empty{
text-align:center; padding:24px 12px;
color:#9aa8a0; font-size:.82rem; font-weight:700;
}
/* ─── حاوية البحث في الشريط (relative للقائمة) ─── */
.nav-search-container{
position:relative;
flex-shrink:0;
}
/* اليمين: الأزرار */
.main-nav-actions{
display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.nav-icon-btn{
width:32px;height:32px;
background:linear-gradient(135deg,#F8F8F6 0%,#fdf3d6 100%);
border:1.5px solid rgba(184,146,74,.45);
color:#8A1538;
border-radius:9px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
box-shadow:0 2px 5px rgba(184,146,74,.12), inset 0 -1.5px 0 rgba(184,146,74,.08);
flex-shrink:0;
padding:0;
}
.nav-icon-btn svg{
width:14px !important;
height:14px !important;
}
.nav-icon-btn:hover{
border-color:#B8924A;
transform:translateY(-1px);
box-shadow:0 4px 9px rgba(184,146,74,.2);
}
.main-nav .profile-btn{
background:linear-gradient(135deg,#F8F8F6 0%,#fdf3d6 100%);
border:1.5px solid rgba(184,146,74,.45);
color:#5E0E26;
box-shadow:0 2px 5px rgba(184,146,74,.12), inset 0 -1.5px 0 rgba(184,146,74,.08);
}
.main-nav .profile-btn:hover{
border-color:#B8924A;
background:#fff;
}
.main-nav .profile-avatar{
background:linear-gradient(135deg,#B8924A 0%,#8A6D2E 100%);
color:#fff;
border:1.5px solid #D4BC85;
box-shadow:0 2px 5px rgba(0,0,0,.15);
}
/* قائمة الجوال */
.mobile-menu{
background:linear-gradient(180deg,#FAFAF8 0%,#f5ebd4 100%);
border-top:1px solid rgba(184,146,74,.3);
padding:10px 16px;
animation:mobileMenuSlide .25s ease;
}
@keyframes mobileMenuSlide{
from{opacity:0;transform:translateY(-8px);}
to{opacity:1;transform:translateY(0);}
}
.mobile-menu-link{
display:flex;align-items:center;gap:10px;
width:100%;
padding:11px 14px;margin-bottom:5px;
background:#fff;color:#8A1538;
border:1.5px solid rgba(184,146,74,.25);border-radius:10px;
font-family:'Cairo',sans-serif;font-weight:800;font-size:.88rem;
cursor:pointer;text-align:right;
transition:all .2s ease;
}
.mobile-menu-link:hover{
background:#F8F8F6;
border-color:#B8924A;
transform:translateX(-3px);
}
.mobile-menu-active{
background:linear-gradient(135deg,#8A1538,#5E0E26) !important;
color:#D4BC85 !important;
border-color:#B8924A !important;
}
/* 📐 الاستجابة للجوال */
@media (max-width: 900px){
.main-nav-burger{display:flex;}
.main-nav-links{display:none;}
.main-nav-tag{display:none;}
.main-nav-name{font-size:.85rem;}
.main-nav .profile-btn span{display:none;}
.main-nav-actions{gap:6px;}
.nav-icon-btn{width:30px;height:30px;}
.main-nav-inner{padding:7px 12px;gap:8px;}
/* البحث في الجوال — مضغوط */
.nav-search-wrap{ width:140px; padding:4px 8px 4px 6px; }
.nav-search-wrap:focus-within{ width:170px; }
.nav-search-input{ font-size:.72rem; }
.nav-search-input::placeholder{ font-size:.7rem; }
.nav-search-results{ width:280px; }
}
@media (max-width: 480px){
.main-nav-name{font-size:1rem;}
.main-nav-tag{font-size:.62rem;}
.main-nav-logo{width:36px;height:36px;}
.main-nav-inner{padding:6px 12px;gap:8px;}
/* في الشاشات الصغيرة جدا - تخفى خانة البحث */
.nav-search-container{ display:none; }
}
@media (max-width: 380px){
.main-nav-name{font-size:.92rem;}
.main-nav-tag{display:none;}
.main-nav-logo{width:32px;height:32px;}
}
body.dark-mode .main-nav{
background:linear-gradient(180deg,#0a1810 0%,#000 100%);
border-bottom-color:rgba(184,146,74,.4);
}
body.dark-mode .main-nav-name{
background:linear-gradient(180deg,#D4BC85 0%,#B8924A 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
body.dark-mode .main-nav-tag{ color:#d4a948; }
body.dark-mode .nav-link span{ color:#fff; }
body.dark-mode .nav-link svg,
body.dark-mode .nav-icon-btn,
body.dark-mode .main-nav .profile-btn,
body.dark-mode .main-nav-burger{
background:linear-gradient(135deg,#1a2e24,#5E0E26);
border-color:rgba(212,188,133,.35);
color:#D4BC85;
}
body.dark-mode .nav-search-wrap{
background:#1a2e24;
border-color:rgba(212,188,133,.3);
}
body.dark-mode .nav-search-input{ color:#fff; }
body.dark-mode .nav-search-input::placeholder{ color:rgba(212,188,133,.5); }
body.dark-mode .mobile-menu{ background:#3D0918; border-top-color:rgba(212,188,133,.2); }
body.dark-mode .mobile-menu-link{
background:#1a2e24; color:#fff; border-color:rgba(212,188,133,.2);
}
body.dark-mode .mobile-menu-link:hover{ background:#5E0E26; border-color:#B8924A; }
/* بطاقة مقولة اليوم */
.daily-quote-card{
position:relative;
margin:0 0 12px;
padding:10px 14px;
background:linear-gradient(135deg,#fdfaf0 0%,#fff8e8 100%);
border:1px solid rgba(184,146,74,.5);
border-right:3px solid #B8924A;
border-radius:10px;
box-shadow:0 2px 8px rgba(184,146,74,.08);
overflow:hidden;
transition:transform .25s ease;
display:flex;align-items:center;gap:12px;
text-align:right;
}
.daily-quote-card::before,
.daily-quote-card::after{display:none;}
.dq-pattern{display:none;}
.dq-icon{
position:relative;z-index:2;
width:32px;height:32px;margin:0;flex-shrink:0;
background:linear-gradient(135deg,#B8924A,#8A6D2E);
color:#fff;
border-radius:8px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(184,146,74,.3);
}
.dq-icon svg{width:14px;height:14px;}
.dq-body{
flex:1;min-width:0;
display:flex;flex-direction:column;gap:2px;
}
.dq-meta-row{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
margin-bottom:2px;
}
.dq-label{
display:inline-block;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.6rem;
color:#8A6D2E;
background:rgba(184,146,74,.15);
padding:1px 8px;border-radius:9px;
border:1px solid rgba(184,146,74,.35);
letter-spacing:0;
}
.dq-text{
font-family:'Cairo',sans-serif;font-weight:700;font-size:.82rem;
line-height:1.55;color:#3D0918;
letter-spacing:-.1px;
margin:0;
}
.dq-author{
font-family:'Tajawal',sans-serif;font-weight:600;font-size:.66rem;
color:#8A6D2E;
margin-top:1px;
}
.dq-divider{display:none;}
.dq-refresh{
position:relative;z-index:2;
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;
padding:0;
width:28px;height:28px;
background:transparent;
color:#8A6D2E;
border:1px solid rgba(184,146,74,.45);
border-radius:7px;
cursor:pointer;
transition:all .2s ease;
}
.dq-refresh span{display:none;}
.dq-refresh svg{width:13px;height:13px;}
.dq-refresh:hover{
background:#B8924A;
color:#fff;
border-color:#B8924A;
transform:rotate(180deg);
}
@media (max-width:560px){
.daily-quote-card{padding:9px 11px;gap:9px;}
.dq-icon{width:28px;height:28px;}
.dq-icon svg{width:12px;height:12px;}
.dq-text{font-size:.76rem;line-height:1.5;}
.dq-author{font-size:.62rem;}
.dq-label{font-size:.55rem;}
}
body.dark-mode .daily-quote-card{
background:linear-gradient(135deg,#1a2026 0%,#252b32 100%);
border-color:#B8924A;
}
body.dark-mode .dq-text{color:#D4BC85;}
body.dark-mode .dq-author{color:#d4a948;}
/* رأس القسم الرئيسي */
.qt-master-header{
display:flex;align-items:center;gap:12px;
padding:14px 18px;margin-bottom:14px;
background:linear-gradient(135deg,#3D0918 0%,#4a2e18 50%,#8A1538 100%);
color:#fff;border-radius:14px;
border:2px solid #B8924A;
box-shadow:0 6px 20px rgba(42,26,12,.25);
position:relative;overflow:hidden;
}
.qt-master-header::before{
content:'';position:absolute;top:-30px;right:-30px;
width:120px;height:120px;
background:radial-gradient(circle,rgba(212,188,133,.18),transparent 65%);
border-radius:50%;pointer-events:none;
}
.qt-master-icon{
width:42px;height:42px;
background:linear-gradient(135deg,#B8924A,#8A6D2E);
border-radius:11px;
display:flex;align-items:center;justify-content:center;
color:#fff;flex-shrink:0;
box-shadow:0 4px 10px rgba(184,146,74,.45);
position:relative;z-index:2;
}
.qt-master-icon svg{width:24px;height:24px;}
.qt-master-text{flex:1;text-align:right;position:relative;z-index:2;}
.qt-master-title{
display:block;
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;
color:#fff;margin-bottom:2px;letter-spacing:-.3px;
}
.qt-master-hint{
display:block;
font-size:.74rem;color:#D4BC85;font-weight:600;
}
/* 🎀 المجموعات القابلة للطي */
.qt-collapsible{
margin-bottom:10px;
border-radius:12px;overflow:hidden;
border:1.5px solid #e0e8f0;
background:#fff;
transition:all .25s ease;
}
.qt-collapsible:hover{
box-shadow:0 4px 14px rgba(0,0,0,.06);
}
body.dark-mode .qt-collapsible{
background:#1a2026;border-color:#2a3138;
}
.qt-collapse-toggle{
width:100%;
display:flex;align-items:center;gap:10px;
padding:13px 16px;
background:transparent;
border:none;
cursor:pointer;
font-family:'Tajawal',sans-serif;
transition:all .2s ease;
}
.qt-collapse-toggle:hover{
background:linear-gradient(90deg,rgba(0,0,0,.02),transparent);
}
body.dark-mode .qt-collapse-toggle:hover{
background:linear-gradient(90deg,rgba(255,255,255,.04),transparent);
}
.qt-collapse-toggle[aria-expanded="true"]{
background:linear-gradient(90deg,rgba(0,0,0,.03),transparent);
border-bottom:1px solid #f0f0f0;
}
body.dark-mode .qt-collapse-toggle[aria-expanded="true"]{
background:linear-gradient(90deg,rgba(255,255,255,.05),transparent);
border-bottom-color:#2a3138;
}
.qt-collapse-dot{
width:10px;height:10px;border-radius:50%;
flex-shrink:0;
box-shadow:0 0 0 3px rgba(255,255,255,.6);
}
body.dark-mode .qt-collapse-dot{
box-shadow:0 0 0 3px rgba(0,0,0,.3);
}
.qt-collapse-label{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.92rem;
color:#3D0918;
}
body.dark-mode .qt-collapse-label{color:#D4BC85;}
.qt-collapse-count{
display:inline-flex;align-items:center;
padding:2px 9px;
background:linear-gradient(135deg,#fdfaf0,#fff8e8);
color:#8A6D2E;
border:1px solid #B8924A;
border-radius:12px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.62rem;
letter-spacing:0;
flex-shrink:0;
}
body.dark-mode .qt-collapse-count{
background:linear-gradient(135deg,#252b32,#1a2026);
color:#D4BC85;border-color:#B8924A;
}
.qt-collapse-hint{
flex:1;text-align:right;
font-size:.72rem;color:#888;font-weight:600;
}
body.dark-mode .qt-collapse-hint{color:#aab2bb;}
.qt-collapse-arrow{
color:#888;
transition:transform .3s ease;
flex-shrink:0;
}
.qt-collapse-toggle[aria-expanded="true"] .qt-collapse-arrow{
transform:rotate(180deg);
color:#8A1538;
}
body.dark-mode .qt-collapse-toggle[aria-expanded="true"] .qt-collapse-arrow{
color:#D4BC85;
}
.qt-collapse-body{
padding:14px;
background:#fafbfc;
animation:qtBodySlide .3s cubic-bezier(.34,1.2,.64,1);
}
body.dark-mode .qt-collapse-body{background:#15191e;}
@keyframes qtBodySlide{
from{opacity:0;transform:translateY(-6px);}
to{opacity:1;transform:translateY(0);}
}
/* 🏷️ تسمية المتاح/قريبا داخل خانة المعلم */
.qt-section-label{
display:flex;align-items:center;gap:6px;
font-family:'Cairo',sans-serif;font-weight:800;font-size:.72rem;
color:#666;
margin-bottom:8px;padding:0 4px;
letter-spacing:0;
}
body.dark-mode .qt-section-label{color:#aab2bb;}
.qt-group{
margin-bottom:18px;
}
.qt-group:last-child{margin-bottom:0;}
.qt-group-title{
display:flex;align-items:center;gap:8px;
margin-bottom:10px;padding:6px 12px;
border-radius:8px;background:rgba(0,0,0,.02);
}
.qt-group-dot{
width:10px;height:10px;border-radius:50%;flex-shrink:0;
box-shadow:0 0 0 3px rgba(0,0,0,.04);
}
.qt-group-title > span:not(.qt-group-dot):not(.qt-group-hint){
font-family:Cairo,sans-serif;font-weight:900;font-size:.85rem;color:#8A1538;
}
.qt-group-hint{
font-family:Tajawal,sans-serif;font-weight:500;font-size:.72rem;color:#888;
margin-right:auto;
}
.qt-group-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
/* 4 أزرار صغيرة في صف واحد */
.qt-group-grid-4{
grid-template-columns:repeat(4,1fr);
gap:8px;
}
/* 3 أعمدة (للمجموعات الكبيرة 6 أزرار) */
.qt-group-grid-3{
grid-template-columns:repeat(3,1fr);
gap:10px;
}
/* 2 أزرار كبيرة — كل زر يعادل 1.5 من الصغير */
.qt-group-grid-2{
grid-template-columns:repeat(2,1fr);
gap:12px;
}
/* ══════════ زر الأدوات الجديد ══════════ */
.qt-btn{
position:relative;
border:2px solid transparent;
border-radius:16px;
padding:16px 8px 14px;
cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:8px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.78rem;
transition:all .3s cubic-bezier(.34,1.2,.64,1);
min-height:100px;justify-content:center;
box-shadow:0 2px 6px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
}
.qt-btn:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);
}
.qt-btn:active{transform:translateY(-1px);}
.qt-btn-icon{
width:44px;height:44px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
transition:transform .2s;
}
.qt-btn-icon svg{width:22px;height:22px;color:#fff;}
.qt-btn:hover .qt-btn-icon{transform:scale(1.08);}
.qt-btn-label{
font-size:.78rem;font-weight:900;text-align:center;line-height:1.3;
}
/* الزر المضغوط (للـ 4 في صف) */
.qt-btn-compact{
padding:12px 4px 10px;
min-height:84px;
gap:6px;
}
.qt-btn-compact .qt-btn-icon{width:36px;height:36px;border-radius:10px;}
.qt-btn-compact .qt-btn-icon svg{width:18px;height:18px;}
.qt-btn-compact .qt-btn-label{font-size:.7rem;}
/* الزر الكبير (الصف الأخير — الرعاة وشخصيات مؤثرة) */
.qt-btn-large{
padding:22px 14px 18px;
min-height:128px;
gap:12px;
}
.qt-btn-large .qt-btn-icon{width:54px;height:54px;border-radius:14px;}
.qt-btn-large .qt-btn-icon svg{width:28px;height:28px;}
.qt-btn-large .qt-btn-label{font-size:.92rem;}
/* ══════════ ألوان المجموعات ══════════ */
/* شخصي — أخضر */
.qt-personal{
background:linear-gradient(135deg,#e8f2ec 0%,#fff 100%);
border-color:#3D6B53;
color:#2C5340;
}
.qt-personal:hover{
background:linear-gradient(135deg,#d4e8db 0%,#f5faf7 100%);
border-color:#2C5340;
}
.qt-personal .qt-btn-icon{
background:linear-gradient(135deg,#3D6B53,#2C5340);
box-shadow:0 3px 8px rgba(61,107,83,.25);
}
/* 🍷 معرفي — عنابي */
.qt-reference{
background:linear-gradient(135deg,#f5e1e7 0%,#fff 100%);
border-color:#8A1538;
color:#5c0e25;
}
.qt-reference:hover{
background:linear-gradient(135deg,#eccbd5 0%,#faeef2 100%);
border-color:#5c0e25;
}
.qt-reference .qt-btn-icon{
background:linear-gradient(135deg,#a83a5e,#8A1538);
box-shadow:0 3px 8px rgba(138,21,56,.25);
}
/* شكر وتقدير — ذهبي */
.qt-gold{
background:linear-gradient(135deg,#fff8e8 0%,#fdfaf0 100%);
border-color:#B8924A;
color:#8A6D2E;
}
.qt-gold:hover{
background:linear-gradient(135deg,#f5e9a8 0%,#F8F8F6 100%);
border-color:#8A6D2E;
}
.qt-gold .qt-btn-icon{
background:linear-gradient(135deg,#e8c968,#B8924A);
box-shadow:0 3px 10px rgba(184,146,74,.35);
}
.qt-btn-large.qt-gold .qt-btn-icon{
box-shadow:0 4px 14px rgba(184,146,74,.4);
}
/* 🟤 خانة المعلم — بني فاخر (الهيبة الأكاديمية) */
.qt-teacher{
background:linear-gradient(135deg,#f5ede4 0%,#faf3ea 100%);
border-color:#8A1538;
color:#3a230f;
}
.qt-teacher:hover{
background:linear-gradient(135deg,#e8d8c3 0%,#f0e3d0 100%);
border-color:#3a230f;
}
.qt-teacher .qt-btn-icon{
background:linear-gradient(135deg,#7a4f2c,#8A1538);
box-shadow:0 3px 10px rgba(138,21,56,.35);
}
.qt-btn-large.qt-teacher .qt-btn-icon{
box-shadow:0 4px 14px rgba(138,21,56,.4);
}
/* Dark Mode */
body.dark-mode .qt-group-title{background:rgba(255,255,255,.02);}
body.dark-mode .qt-group-title > span:not(.qt-group-dot):not(.qt-group-hint){color:#e8edf2;}
body.dark-mode .qt-personal{background:linear-gradient(135deg,#162e23 0%,#3D0918 100%);color:#7BA05B;border-color:#3D6B53;}
body.dark-mode .qt-reference{background:linear-gradient(135deg,#2e1620 0%,#1a0c14 100%);color:#ed93b1;border-color:#8A1538;}
body.dark-mode .qt-gold{background:linear-gradient(135deg,#2a2418 0%,#1a1a1a 100%);color:#D4BC85;border-color:#B8924A;}
body.dark-mode .qt-teacher{background:linear-gradient(135deg,#2a1f12 0%,#1a1208 100%);color:#d4b48a;border-color:#8A1538;}
/* Responsive: موبايل */
@media (max-width:700px){
.qt-group-grid-4{grid-template-columns:repeat(2,1fr);gap:8px;}
.qt-group-grid-3{grid-template-columns:repeat(2,1fr);gap:8px;}
.qt-group-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
.qt-group-grid-2{grid-template-columns:repeat(2,1fr);gap:10px;}
.qt-btn-compact{min-height:76px;}
.qt-btn-large{min-height:110px;padding:18px 10px;}
.qt-btn-large .qt-btn-icon{width:48px;height:48px;}
.qt-btn-large .qt-btn-label{font-size:.85rem;}
.qt-group-hint{display:none;}
}
/* ══════════ نهاية التصميم الجديد ══════════ */
.quick-tool-btn{
position:relative;
border:1.5px solid rgba(0,0,0,.04);
border-radius:18px;
padding:18px 10px 14px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;gap:9px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.78rem;
transition:all .3s cubic-bezier(.34,1.2,.64,1);
min-height:104px;justify-content:center;
overflow:hidden;
box-shadow:
0 2px 6px rgba(0,0,0,.04),
0 4px 12px rgba(0,0,0,.06);
}
.quick-tool-btn::before{
content:"";position:absolute;top:-30%;left:-30%;
width:80%;height:80%;border-radius:50%;
opacity:.12;filter:blur(22px);
transition:all .4s ease;
}
.quick-tool-btn::after{
content:"";position:absolute;inset:0;border-radius:18px;
background:linear-gradient(135deg,rgba(184,146,74,0) 0%,rgba(184,146,74,0) 100%);
pointer-events:none;transition:background .3s ease;
}
.quick-tool-btn:hover{
transform:translateY(-4px) scale(1.02);
box-shadow:
0 6px 12px rgba(0,0,0,.08),
0 14px 32px rgba(0,0,0,.15);
border-color:rgba(184,146,74,.25);
}
.quick-tool-btn:hover::before{transform:scale(1.6);opacity:.22;}
.quick-tool-btn:hover::after{
background:linear-gradient(135deg,rgba(184,146,74,.04) 0%,rgba(184,146,74,0) 60%);
}
.quick-tool-btn:active{transform:translateY(-2px) scale(1);}
.quick-tool-icon-wrap{
width:46px;height:46px;border-radius:13px;
display:flex;align-items:center;justify-content:center;
position:relative;z-index:2;
box-shadow:
0 2px 4px rgba(0,0,0,.08),
0 6px 14px rgba(0,0,0,.15),
inset 0 1px 0 rgba(255,255,255,.25);
transition:all .3s ease;
}
.quick-tool-btn:hover .quick-tool-icon-wrap{
transform:translateY(-1px) scale(1.04);
box-shadow:
0 4px 8px rgba(0,0,0,.1),
0 10px 22px rgba(0,0,0,.2),
inset 0 1px 0 rgba(255,255,255,.3);
}
.quick-tool-icon-wrap svg{width:23px;height:23px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));}
.quick-tool-btn span{position:relative;z-index:2;}
/* ألوان متنوعة — كل أداة بشخصية */
/* الألوان الرئيسية موجودة أدناه في قسم "نظام ألوان متناغم" */
/* مودال اختيار المسار */
.path-modal-overlay{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(10,20,40,.82);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
overflow-y:auto;
}
.path-modal-overlay.active{display:flex;}
.path-modal{
background:#fff;max-width:440px;width:100%;
max-height:calc(100vh - 32px);
border-radius:22px;overflow:hidden;position:relative;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:pathModalPop .35s cubic-bezier(.34,1.2,.64,1);
display:flex;flex-direction:column;
}
@keyframes pathModalPop{
0%{opacity:0;transform:scale(.85) translateY(20px);}
100%{opacity:1;transform:scale(1) translateY(0);}
}
.path-modal-close{
position:absolute;top:12px;left:12px;z-index:3;
width:32px;height:32px;border-radius:50%;
background:rgba(255,255,255,.15);color:#fff;border:none;
font-size:1rem;cursor:pointer;transition:all .15s;
display:flex;align-items:center;justify-content:center;
}
.path-modal-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg);}
.path-modal-header{
padding:26px 20px 20px;text-align:center;color:#fff;
border-bottom:3px solid #B8924A;
flex-shrink:0;
}
.path-modal-header.teacher{background:linear-gradient(135deg,#3D0918,#2d6e54);}
.path-modal-header.student{background:linear-gradient(135deg,#5E0E26,#2d6e54);}
.path-modal-icon{
width:58px;height:58px;margin:0 auto 10px;border-radius:16px;
background:rgba(184,146,74,.2);border:2px solid #B8924A;
display:flex;align-items:center;justify-content:center;
color:#e8c968;
}
.path-modal-icon svg{width:30px;height:30px;}
.path-modal-title{
font-family:Cairo,sans-serif;font-weight:900;font-size:1.2rem;
margin:0 0 3px;
}
.path-modal-sub{font-size:.78rem;opacity:.85;margin:0;font-weight:500;}
.path-modal-options{
padding:16px;display:flex;flex-direction:column;gap:10px;
overflow-y:auto;
flex:1;min-height:0;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
scrollbar-color:#B8924A #f5f5f5;
}
.path-modal-options::-webkit-scrollbar{width:6px;}
.path-modal-options::-webkit-scrollbar-track{background:#f5f5f5;border-radius:10px;}
.path-modal-options::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#B8924A,#a68820);border-radius:10px;}
.path-modal-option{
display:flex;align-items:center;gap:14px;
padding:14px;background:#fff;
border:2px solid #e8f2ec;border-radius:14px;
cursor:pointer;transition:all .2s;
text-align:right;font-family:Tajawal,sans-serif;
width:100%;
}
.path-modal-option:hover{
border-color:#B8924A;background:#fdfaf0;
transform:translateX(-4px);
box-shadow:0 6px 18px rgba(184,146,74,.15);
}
.path-modal-option-icon{
width:46px;height:46px;border-radius:12px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#8A1538,#5E0E26);color:#B8924A;
}
.path-modal-option-icon svg{width:24px;height:24px;}
.path-modal-option-info{flex:1;}
.path-modal-option-title{
font-family:Cairo,sans-serif;font-weight:900;color:#5E0E26;font-size:.95rem;
margin-bottom:2px;
}
.path-modal-option-desc{font-size:.76rem;color:#6b7c8e;font-weight:600;line-height:1.4;}
.path-modal-option-arrow{color:#B8924A;flex-shrink:0;}
/* ─── 🛠️ نظام تحكم الأدمن في خدمات المسار ─── */
.path-svc-wrap{
position:relative;
display:block;
width:100%;
}
/* زر تحكم الأدمن (⋮) */
.path-svc-admin-ctrl{
position:absolute;
top:8px; left:8px;
width:26px; height:26px;
background:linear-gradient(135deg,#8A1538,#5E0E26);
color:#D4BC85;
border:1.5px dashed rgba(212,188,133,.5);
border-radius:7px;
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:all .2s;
z-index:5;
box-shadow:0 2px 6px rgba(138,21,56,.3);
}
.path-svc-admin-ctrl:hover{
background:linear-gradient(135deg,#7a4f29,#8A1538);
border-color:#B8924A;
border-style:solid;
transform:scale(1.05);
}
/* شارات حالة الخدمة — بارزة وواضحة */
.path-svc-badge{
display:inline-block;
font-size:.62rem;
padding:3px 9px;
border-radius:10px;
font-weight:900;
margin-right:6px;
font-family:Cairo,sans-serif;
vertical-align:middle;
letter-spacing:0;
box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.path-svc-badge.soon{
background:linear-gradient(135deg,#fef3d6,#D4BC85);
color:#8A1538;
border:1px solid #B8924A;
}
.path-svc-badge.hidden-badge{
background:linear-gradient(135deg,#fde6e6,#f8c6c6);
color:#922b21;
border:1.5px dashed #c0392b;
display:inline-flex;
align-items:center;
gap:3px;
padding:3px 10px;
}
.path-svc-badge.hidden-badge::before{
content:'🚫';
font-size:.6rem;
}
/* animation لقائمة تحكم الأدمن */
@keyframes svcMenuFadeIn{
from{ opacity:0; transform:translateY(-6px); }
to{ opacity:1; transform:translateY(0); }
}
/* Dark Mode */
body.dark-mode .path-intro-title{color:#e8edf2;}
body.dark-mode .quick-tool-btn{background:#162e23;border-color:#2d5544;color:#e8edf2;}
body.dark-mode .quick-tool-btn svg{stroke:#e8edf2;}
body.dark-mode .quick-tool-btn:hover{background:#1f4533;border-color:#B8924A;}
body.dark-mode .quick-tool-btn:hover svg{stroke:#B8924A;}
body.dark-mode .path-modal{background:#162e23;}
body.dark-mode .path-modal-option{background:#162e23;border-color:#2d5544;}
body.dark-mode .path-modal-option-title{color:#e8edf2;}
body.dark-mode .path-modal-option-desc{color:#aab4c0;}
@media (max-width:380px){
.path-card{min-height:280px;}
.path-title{font-size:1.2rem;}
.path-icon{width:44px;height:44px;}
.path-icon svg{width:24px;height:24px;}
.quick-tools-grid{grid-template-columns:repeat(2,1fr);}
}
/* === بطاقة البطل (Hero) === */
.royal-hero{ position:relative;
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 45%,#2d6e54 100%);
border-radius:24px;
padding:22px;margin-bottom:12px;
overflow:hidden;
cursor:pointer;
box-shadow:0 12px 32px rgba(138,21,56,.35);
transition:all .3s ease;
}
.royal-hero:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(138,21,56,.45);}
.royal-hero::before{
content:"";position:absolute;top:-40%;left:-10%;
width:220px;height:220px;border-radius:50%;
background:radial-gradient(circle,rgba(184,146,74,.35),transparent 70%);
filter:blur(14px);
}
.royal-hero::after{
content:"";position:absolute;bottom:-60%;right:-20%;
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(184,146,74,.12),transparent 60%);
}
.royal-hero-content{position:relative;z-index:2;}
.royal-hero-badge{
display:inline-flex;align-items:center;gap:5px;
background:rgba(184,146,74,.2);border:1.2px solid rgba(184,146,74,.5);
color:#B8924A;padding:4px 10px;border-radius:999px;
font-size:.62rem;font-weight:900;letter-spacing:0;margin-bottom:10px;
backdrop-filter:blur(8px);
}
.royal-hero-title{
font-family:'Tajawal','Cairo','Noto Sans Arabic',sans-serif;
color:#F8F8F6;
font-weight:900;
font-size:1.55rem;
margin-bottom:6px;
line-height:1.6;
letter-spacing:0;
text-shadow:0 2px 8px rgba(0,0,0,.35), 0 0 16px rgba(212,188,133,.18);
font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
-webkit-font-feature-settings:"kern" 1, "liga" 1, "mark" 1, "mkmk" 1;
}
.royal-hero-subtitle{
color:rgba(255,255,255,.75);font-size:.82rem;font-weight:600;margin-bottom:16px;line-height:1.5;
}
.royal-hero-cta{
display:inline-flex;align-items:center;gap:10px;
background:linear-gradient(135deg,#d4b740,#B8924A);
color:#5E0E26;padding:10px 22px;border-radius:999px;
font-weight:900;font-size:.92rem;
box-shadow:0 4px 16px rgba(184,146,74,.4), inset 0 1px 0 rgba(255,255,255,.4);
transition:all .2s;
}
.royal-hero:hover .royal-hero-cta{transform:scale(1.03);}
.royal-hero-cta-icon{
width:26px;height:26px;border-radius:50%;background:rgba(61,38,20,.2);
display:flex;align-items:center;justify-content:center;
}
.royal-hero-bgicon{
position:absolute;top:50%;left:24px;transform:translateY(-50%);
width:100px;height:100px;opacity:.18;z-index:1;
}
/* === الصف الثاني: بطاقتان متوسطتان === */
.royal-duo{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
}
.royal-duo-card{
position:relative;
border-radius:18px;padding:16px 14px;cursor:pointer;overflow:hidden;
transition:all .25s ease;
display:flex;flex-direction:column;gap:6px;
min-height:100px;
}
.royal-duo-card:hover{transform:translateY(-2px);}
.royal-duo-quiz{
background:linear-gradient(135deg,#fff8e8 0%,#fef2c4 100%);
border:1.5px solid #B8924A;
box-shadow:0 6px 20px rgba(184,146,74,.2);
}
.royal-duo-quiz:hover{box-shadow:0 10px 28px rgba(184,146,74,.3);}
.royal-duo-lesson{
background:linear-gradient(135deg,#8e44ad 0%,#4a148c 60%,#8A1538 100%);
border:1.5px solid #B8924A;
box-shadow:0 6px 20px rgba(78,19,120,.35);
}
.royal-duo-lesson:hover{box-shadow:0 10px 28px rgba(78,19,120,.5);}
.royal-duo-lesson::after{
content:"";position:absolute;inset:-2px;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);
transform:translateX(-120%);
animation:ilcShine 4s ease-in-out infinite;
pointer-events:none;
}
.royal-duo-icon{
width:36px;height:36px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 8px rgba(0,0,0,.15);
}
.royal-duo-quiz .royal-duo-icon{background:linear-gradient(135deg,#d4b740,#B8924A);}
.royal-duo-lesson .royal-duo-icon{background:linear-gradient(135deg,#d4b740,#B8924A);animation:ilcIconBounce 2.4s ease-in-out infinite;}
.royal-duo-label{
font-weight:900;font-size:1rem;letter-spacing:-.3px;
}
.royal-duo-quiz .royal-duo-label{color:#8A6D2E;}
.royal-duo-lesson .royal-duo-label{color:#fff;}
.royal-duo-sub{
font-size:.66rem;font-weight:700;letter-spacing:0;
}
.royal-duo-quiz .royal-duo-sub{color:#a68820;}
.royal-duo-lesson .royal-duo-sub{color:rgba(255,255,255,.7);}
.royal-duo-tag{
position:absolute;top:10px;left:10px;
background:#B8924A;color:#5E0E26;
font-size:.55rem;font-weight:900;padding:2px 7px;
border-radius:999px;letter-spacing:0;z-index:3;
}
.royal-duo-lesson .royal-duo-tag{animation:ilcBadgePulse 2s ease-in-out infinite;}
/* === Bento Grid للأدوات === */
.royal-bento{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;margin-bottom:14px;
}
.royal-bento-card{
position:relative;
background:#fff;
border:1.5px solid rgba(138,21,56,.1);
border-radius:16px;
padding:14px 10px;
cursor:pointer;
text-align:center;
transition:all .22s ease;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
box-shadow:0 3px 12px rgba(138,21,56,.05);
min-height:88px;
}
.royal-bento-card:hover{
transform:translateY(-3px);
border-color:currentColor;
box-shadow:0 8px 20px rgba(138,21,56,.12);
}
.royal-bento-card[data-size="wide"]{grid-column:span 3;}
.royal-bento-card[data-size="medium"]{grid-column:span 2;}
.royal-bento-card[data-size="small"]{grid-column:span 1;}
.royal-bento-icon{
width:40px;height:40px;border-radius:12px;
display:flex;align-items:center;justify-content:center;
position:relative;
}
.royal-bento-label{
font-weight:900;font-size:.84rem;color:#8A1538;
}
.royal-bento-meta{
font-size:.66rem;color:#888;font-weight:700;
}
/* Variants للألوان */
.royal-bento-card[data-color="gold"]{color:#B8924A;}
.royal-bento-card[data-color="gold"] .royal-bento-icon{background:linear-gradient(135deg,#f3e8c4,#f0e5b8);}
.royal-bento-card[data-color="navy"]{color:#8A1538;}
.royal-bento-card[data-color="navy"] .royal-bento-icon{background:linear-gradient(135deg,#e8f2ec,#d0e0f0);}
.royal-bento-card[data-color="green"]{color:#3D6B53;}
.royal-bento-card[data-color="green"] .royal-bento-icon{background:linear-gradient(135deg,#EBF2EE,#d0eedf);}
.royal-bento-card[data-color="red"]{color:#8B1538;}
.royal-bento-card[data-color="red"] .royal-bento-icon{background:linear-gradient(135deg,#F7EBEE,#f5d0dc);}
.royal-bento-card[data-color="purple"]{color:#8e44ad;}
.royal-bento-card[data-color="purple"] .royal-bento-icon{background:linear-gradient(135deg,#f4ecf7,#e8d6f0);}
.royal-bento-card[data-color="teal"]{color:#3D6B53;}
.royal-bento-card[data-color="teal"] .royal-bento-icon{background:linear-gradient(135deg,#e8f8f5,#d0f0e8);}
/* بطاقة المتصدرين الخاصة */
.royal-leaderboard-card{
background:linear-gradient(135deg,#fff 0%,#fffef5 100%);
border:1.5px solid #B8924A !important;
overflow:hidden;
}
.royal-leaderboard-card::before{
content:"";position:absolute;bottom:-20px;right:-20px;
width:80px;height:80px;border-radius:50%;
background:radial-gradient(circle,rgba(184,146,74,.2),transparent 70%);
}
/* === قسم المزيد (Collapsible) === */
.royal-more-section{
margin-bottom:14px;
}
.royal-more-toggle{
width:100%;
background:#fff;border:1.5px solid rgba(138,21,56,.1);
border-radius:14px;padding:12px 16px;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:10px;
font-family:'Cairo',sans-serif;font-weight:700;color:#8A1538;
transition:all .2s;
}
.royal-more-toggle:hover{background:#f8faff;border-color:#8A1538;}
.royal-more-toggle-left{display:flex;align-items:center;gap:10px;}
.royal-more-chevron{transition:transform .3s;color:#888;}
.royal-more-section.open .royal-more-chevron{transform:rotate(180deg);}
.royal-more-content{
display:none;margin-top:10px;
gap:8px;flex-direction:column;
}
.royal-more-section.open .royal-more-content{display:flex;animation:fadeIn .3s;}
.royal-tool-card{
display:flex;align-items:center;gap:12px;
padding:12px 16px;border-radius:12px;cursor:pointer;
transition:all .18s;
border:1.5px solid transparent;
}
.royal-tool-card:hover{transform:translateX(-3px);}
.royal-tool-card.teacher{
background:linear-gradient(135deg,#EBF2EE,#d0eedf);
border-color:rgba(61,107,83,.3);
}
.royal-tool-card.teacher:hover{border-color:#3D6B53;}
.royal-tool-card.admin{
background:linear-gradient(135deg,#e8f2ec,#d0e0f0);
border-color:rgba(138,21,56,.3);
}
.royal-tool-card.admin:hover{border-color:#8A1538;}
.royal-tool-icon{
width:32px;height:32px;border-radius:9px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.royal-tool-card.teacher .royal-tool-icon{background:#3D6B53;color:#fff;}
.royal-tool-card.admin .royal-tool-icon{background:#8A1538;color:#fff;}
.royal-tool-text{flex:1;}
.royal-tool-title{font-weight:900;font-size:.9rem;margin-bottom:2px;}
.royal-tool-card.teacher .royal-tool-title{color:#0e5530;}
.royal-tool-card.admin .royal-tool-title{color:#8A1538;}
.royal-tool-desc{font-size:.68rem;color:#666;font-weight:600;}
/* === قسم About SEO === */
.royal-about-section{
margin-top:20px;padding:24px 18px;
background:linear-gradient(135deg,#fff 0%,#fafbfe 100%);
border:1px solid rgba(138,21,56,.08);
border-radius:16px;
box-shadow:0 2px 8px rgba(138,21,56,.04);
}
.royal-about-section-cta{
background:
linear-gradient(135deg,rgba(138,21,56,.04) 0%,rgba(184,146,74,.06) 100%),
linear-gradient(180deg,#fff 0%,#fdfaf0 100%);
border:1.5px solid rgba(184,146,74,.25);
position:relative;overflow:hidden;
}
.royal-about-section-cta::before{
content:'';position:absolute;top:-40px;right:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(184,146,74,.15),transparent 65%);
border-radius:50%;pointer-events:none;
}
.royal-about-section-cta::after{
content:'';position:absolute;bottom:-40px;left:-40px;
width:120px;height:120px;
background:radial-gradient(circle,rgba(138,21,56,.10),transparent 65%);
border-radius:50%;pointer-events:none;
}
.royal-about-section-cta > div{position:relative;z-index:2;}
.seo-tag{
font-size:.7rem;font-weight:800;color:#8A1538;
background:rgba(184,146,74,.12);
border:1px solid rgba(184,146,74,.3);
padding:3px 10px;border-radius:999px;
font-family:'Cairo',sans-serif;
}
body.dark-mode .royal-about-section{
background:linear-gradient(135deg,#1a2e24,#223348);
border-color:#2d5544;
}
body.dark-mode .royal-about-section h1{color:#e8edf2;}
body.dark-mode .royal-about-section p{color:#c0c8d4;}
body.dark-mode .seo-tag{color:#B8924A;background:rgba(184,146,74,.15);}
/* ═══ قسم شركاء النجاح - Profile Style (التصميم C) ═══ */
/* ═══ شركاء النجاح - تصميم رسمي أنيق يليق بالمناصب القيادية ═══ */
.partners-royal{
background:#fff;border-radius:18px;overflow:hidden;
box-shadow:0 4px 20px rgba(138,21,56,.08);
border:1px solid #e8f2ec;
margin:24px 0;
}
.partners-header{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 55%,#235a44 100%);
padding:26px 20px 22px;text-align:center;
position:relative;overflow:hidden;
border-bottom:3px solid #B8924A;
}
.partners-header::before{
content:"";position:absolute;inset:0;
background:
linear-gradient(90deg,transparent 49%,rgba(184,146,74,.08) 50%,transparent 51%),
linear-gradient(0deg,transparent 49%,rgba(184,146,74,.05) 50%,transparent 51%);
background-size:40px 40px;
pointer-events:none;opacity:.5;
}
.partners-title{
position:relative;z-index:2;
color:#fff;font-family:Cairo,sans-serif;font-weight:900;
font-size:1.4rem;margin-bottom:6px;letter-spacing:-.3px;
}
.partners-title::before,.partners-title::after{
content:"";display:inline-block;width:28px;height:1.5px;
background:linear-gradient(90deg,transparent,#B8924A,transparent);
vertical-align:middle;margin:0 12px;
}
.partners-subtitle{
position:relative;z-index:2;
color:rgba(255,255,255,.75);font-size:.78rem;font-weight:500;
line-height:1.6;max-width:340px;margin:0 auto;
letter-spacing:0;
}
.partners-body{padding:22px 16px;}
.partner-card{
display:flex;align-items:center;gap:16px;padding:18px 16px;
background:#fff;
border:1px solid #e8f2ec;
border-right:4px solid #B8924A;
border-radius:10px;
position:relative;
transition:all .25s ease;
margin-bottom:12px;
}
.partner-card:last-child{margin-bottom:0;}
.partner-card:hover{
border-color:#B8924A;border-right-color:#8A1538;
box-shadow:0 6px 18px rgba(138,21,56,.1);
transform:translateX(-2px);
}
.partner-number{
position:absolute;top:10px;left:10px;
min-width:22px;height:22px;padding:0 7px;
border-radius:4px;
background:#f5faf7;color:#8A1538;
display:flex;align-items:center;justify-content:center;
font-family:Cairo,sans-serif;font-weight:800;font-size:.7rem;
border:1px solid #dbe8df;
letter-spacing:0;
}
.partner-avatar-wrap{
position:relative;width:72px;height:72px;flex-shrink:0;
}
.partner-avatar{
width:72px;height:72px;border-radius:10px;
overflow:hidden;
background:linear-gradient(135deg,#8A1538 0%,#235a44 100%);
border:2px solid #B8924A;
display:flex;align-items:center;justify-content:center;
font-family:Cairo,sans-serif;font-weight:900;font-size:1.35rem;
color:#e8c968;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.08), 0 4px 12px rgba(138,21,56,.2);
letter-spacing:0;
position:relative;
}
.partner-avatar img{
width:100%;height:100%;object-fit:cover;display:block;
}
.partner-avatar::after{
content:"";position:absolute;inset:2px;border-radius:8px;
border:1px solid rgba(184,146,74,.3);pointer-events:none;
}
.partner-info{flex:1;min-width:0;}
.partner-name{
font-family:Cairo,sans-serif;font-weight:900;color:#5E0E26;
font-size:1.05rem;margin-bottom:6px;
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
letter-spacing:-.2px;
}
.partner-verified{
color:#fff;background:#3D6B53;
width:17px;height:17px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-size:.68rem;font-weight:900;flex-shrink:0;
}
.partner-role{
display:inline-flex;align-items:center;gap:6px;
font-size:.78rem;color:#8A1538;font-weight:800;
background:#f5faf7;
border-left:3px solid #B8924A;
padding:5px 12px 5px 10px;
border-radius:4px;margin-bottom:6px;
}
.partner-role svg{width:13px;height:13px;fill:#B8924A;flex-shrink:0;}
.partner-depth{
font-size:.72rem;color:#6b7c8e;font-weight:600;
display:flex;align-items:center;gap:6px;line-height:1.5;
}
.partner-depth svg{width:12px;height:12px;fill:#8A1538;flex-shrink:0;opacity:.7;}
.partners-footer{
text-align:center;padding:16px 16px 18px;
border-top:1px solid #e8f2ec;
background:#fafbfd;
}
.partners-thanks{
color:#8A1538;font-family:Cairo,sans-serif;font-weight:700;font-size:.78rem;
display:flex;align-items:center;justify-content:center;gap:10px;
letter-spacing:0;
}
.partners-thanks::before,.partners-thanks::after{
content:"";display:inline-block;width:32px;height:1px;
background:linear-gradient(90deg,transparent,#B8924A,transparent);
}
/* Dark Mode */
body.dark-mode .partners-royal{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .partner-card{
background:#162e23;
border-color:#2d5544;
border-right-color:#B8924A;
}
body.dark-mode .partner-card:hover{
background:#1f4533;
border-color:#B8924A;border-right-color:#e8c968;
}
body.dark-mode .partner-name{color:#e8edf2;}
body.dark-mode .partner-role{
background:#224436;color:#e8c968;
border-left-color:#B8924A;
}
body.dark-mode .partner-depth{color:#aab4c0;}
body.dark-mode .partner-depth svg{fill:#aab4c0;}
body.dark-mode .partner-number{
background:#224436;color:#e8c968;border-color:#2d5544;
}
body.dark-mode .partners-footer{
background:#162e23;border-top-color:#2d5544;
}
body.dark-mode .partners-thanks{color:#e8c968;}
/* ═══ شاشة الرعاة - تصميم فاخر ═══ */
.sponsors-wrap{
width:100%;max-width:560px;margin:0 auto;padding:70px 14px 40px;
}
.sponsors-hero{
background:linear-gradient(135deg,#0a1628 0%,#5E0E26 50%,#8A1538 100%);
border-radius:24px;padding:32px 20px 28px;margin-bottom:22px;
text-align:center;position:relative;overflow:hidden;
box-shadow:0 12px 40px rgba(61,38,20,.35), 0 0 0 1.5px rgba(184,146,74,.35);
}
.sponsors-hero::before{
content:"";position:absolute;inset:0;
background-image:
radial-gradient(1.5px 1.5px at 20% 30%,rgba(184,146,74,.7),transparent),
radial-gradient(1px 1px at 80% 40%,rgba(255,255,255,.5),transparent),
radial-gradient(1.5px 1.5px at 60% 70%,rgba(184,146,74,.6),transparent),
radial-gradient(1px 1px at 40% 50%,rgba(255,255,255,.4),transparent);
animation:sponsor-twinkle 6s ease-in-out infinite;pointer-events:none;
}
@keyframes sponsor-twinkle{0%,100%{opacity:.6;}50%{opacity:1;}}
.sponsors-hero::after{
content:"";position:absolute;top:-60px;left:50%;transform:translateX(-50%);
width:280px;height:280px;border-radius:50%;
background:radial-gradient(circle,rgba(184,146,74,.25) 0%,transparent 65%);
filter:blur(20px);pointer-events:none;
}
.sponsors-hero-content{position:relative;z-index:2;}
.sponsors-trophy{
font-size:2.4rem;margin-bottom:8px;
filter:drop-shadow(0 4px 12px rgba(184,146,74,.6));
animation:trophy-float 3s ease-in-out infinite;
}
@keyframes trophy-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.sponsors-title{
color:#fff;font-family:Cairo,sans-serif;font-weight:900;
font-size:1.5rem;margin-bottom:6px;letter-spacing:-.3px;
text-shadow:0 2px 12px rgba(184,146,74,.3);
}
.sponsors-subtitle{
color:rgba(255,255,255,.75);font-size:.88rem;font-weight:600;
line-height:1.7;max-width:400px;margin:0 auto 12px;
}
.sponsors-audience{
display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
margin:12px 0 18px;
}
.audience-item{
display:inline-flex;align-items:center;gap:5px;
background:rgba(184,146,74,.15);
border:1px solid rgba(184,146,74,.4);
color:#e8c968;
padding:5px 11px;border-radius:100px;
font-size:.72rem;font-weight:800;
letter-spacing:-.1px;
}
.audience-item svg{opacity:.9;}
.sponsors-cta{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;padding:10px 20px;border-radius:999px;
font-family:Cairo,sans-serif;font-weight:900;font-size:.88rem;
text-decoration:none;cursor:pointer;transition:all .2s;
box-shadow:0 4px 14px rgba(37,211,102,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.sponsors-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(37,211,102,.55);}
/* التصنيفات الثلاثة */
.sponsor-tier{
background:#fff;border-radius:18px;padding:22px 16px;margin-bottom:16px;
position:relative;overflow:hidden;
box-shadow:0 6px 20px rgba(138,21,56,.08);
border:1.5px solid transparent;
}
.sponsor-tier.tier-official{
border-color:#B8924A;
background:linear-gradient(135deg,#fffef5 0%,#fff 60%);
}
.sponsor-tier.tier-supporter{
border-color:#8e44ad;
background:linear-gradient(135deg,#faf5ff 0%,#fff 60%);
}
.sponsor-tier.tier-friend{
border-color:#3D6B53;
background:linear-gradient(135deg,#f0fbf8 0%,#fff 60%);
}
.sponsor-tier-header{
display:flex;align-items:center;gap:12px;margin-bottom:14px;
padding-bottom:12px;border-bottom:1.5px dashed rgba(0,0,0,.08);
}
.sponsor-tier-icon{
width:52px;height:52px;border-radius:14px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:1.5rem;
box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.tier-official .sponsor-tier-icon{background:linear-gradient(135deg,#B8924A,#d4b740);}
.tier-supporter .sponsor-tier-icon{background:linear-gradient(135deg,#8e44ad,#a569bd);}
.tier-friend .sponsor-tier-icon{background:linear-gradient(135deg,#3D6B53,#4A7C62);}
.sponsor-tier-text{flex:1;}
.sponsor-tier-name{
font-family:Cairo,sans-serif;font-weight:900;font-size:1.05rem;
margin-bottom:2px;display:flex;align-items:center;gap:6px;
}
.tier-official .sponsor-tier-name{color:#8A6D2E;}
.tier-supporter .sponsor-tier-name{color:#6c3483;}
.tier-friend .sponsor-tier-name{color:#0e6251;}
.sponsor-tier-badge{
font-size:.6rem;font-weight:900;padding:2px 8px;border-radius:999px;
color:#fff;letter-spacing:0;
}
.tier-official .sponsor-tier-badge{background:#B8924A;}
.tier-supporter .sponsor-tier-badge{background:#8e44ad;}
.tier-friend .sponsor-tier-badge{background:#3D6B53;}
.sponsor-tier-desc{
font-size:.78rem;color:#555;font-weight:600;line-height:1.6;
}
.sponsor-tier-features{
display:flex;flex-direction:column;gap:8px;margin-bottom:14px;
}
.sponsor-tier-feature{
display:flex;align-items:center;gap:8px;
font-size:.82rem;color:#444;font-weight:600;
}
.sponsor-tier-feature svg{flex-shrink:0;}
.sponsor-tier-empty{
text-align:center;padding:14px;margin-top:10px;
background:rgba(0,0,0,.03);border-radius:10px;
font-size:.78rem;color:#888;font-weight:700;font-style:italic;
}
.sponsor-tier-empty .sponsor-btn{
display:inline-flex;align-items:center;gap:6px;
background:#8A1538;color:#fff;
padding:7px 14px;border-radius:999px;
text-decoration:none;font-size:.75rem;font-weight:800;margin-top:8px;
transition:all .2s;
}
.sponsor-tier-empty .sponsor-btn:hover{background:#5E0E26;transform:translateY(-1px);}
/* شارة "كن أول راع" — تحويل الفراغ إلى ميزة حصرية */
.first-sponsor-badge{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,#fdfaf0,#fff8e8);
border:1.5px dashed #B8924A;
color:#8A6D2E;
padding:8px 14px;border-radius:100px;
font-size:.78rem;font-weight:900;font-style:normal;
margin-bottom:10px;
letter-spacing:-.1px;
}
.first-sponsor-badge svg{flex-shrink:0;}
/* Dark mode */
body.dark-mode .sponsor-tier{background:#1a2e24;box-shadow:0 6px 20px rgba(0,0,0,.3);}
body.dark-mode .sponsor-tier.tier-official{background:linear-gradient(135deg,#2a2310 0%,#1a2e24 60%);}
body.dark-mode .sponsor-tier.tier-supporter{background:linear-gradient(135deg,#2a1d33 0%,#1a2e24 60%);}
body.dark-mode .sponsor-tier.tier-friend{background:linear-gradient(135deg,#132b28 0%,#1a2e24 60%);}
body.dark-mode .sponsor-tier-desc{color:#c0c8d4;}
body.dark-mode .sponsor-tier-feature{color:#e8edf2;}
body.dark-mode .sponsor-tier-empty{background:rgba(255,255,255,.05);color:#aaa;}
/* === Footer Social === */
.royal-footer{
display:flex;flex-direction:column;align-items:center;gap:14px;
margin-top:18px;padding:16px;
border-top:1px solid rgba(138,21,56,.08);
}
.royal-social-row{display:flex;gap:12px;align-items:center;}
.royal-social-label{
font-size:.75rem;color:#888;font-weight:700;letter-spacing:0;
}
.royal-social-btn{
width:42px;height:42px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
text-decoration:none;transition:all .2s;
box-shadow:0 3px 10px rgba(0,0,0,.12);
}
.royal-social-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 6px 16px rgba(0,0,0,.2);}
.royal-social-ig{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);}
.royal-social-wa{background:#25D366;}
.royal-last-update{
display:inline-flex;align-items:center;gap:6px;
background:rgba(138,21,56,.04);border:1px solid rgba(138,21,56,.08);
padding:4px 12px;border-radius:999px;
font-size:.68rem;color:#8A1538;font-weight:700;
}
/* صف الروابط القانونية والدليل */
.royal-legal-row{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:6px 4px;margin-top:2px;
}
.royal-legal-link{
background:none;border:none;cursor:pointer;
font-family:Tajawal,sans-serif;font-size:.74rem;font-weight:700;
color:#8A6D2E;padding:4px 8px;border-radius:8px;
transition:all .18s;text-decoration:none;
}
.royal-legal-link:hover{color:#8A1538;background:rgba(138,21,56,.06);}
.royal-legal-sep{color:rgba(138,21,56,.22);font-size:.7rem;user-select:none;}
body.dark-mode .royal-legal-link{color:#B8924A;}
body.dark-mode .royal-legal-link:hover{color:#d4b740;background:rgba(255,255,255,.05);}
body.dark-mode .royal-legal-sep{color:rgba(212,188,133,.25);}
/* === Dark mode === */
body.dark-mode .royal-greeting{background:linear-gradient(135deg,#1a2e24,#223348);border-color:#2d5544;}
body.dark-mode .royal-username{color:#e8edf2;}
body.dark-mode .royal-brand-name{color:#e8edf2;}
body.dark-mode .royal-bento-card{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .royal-bento-label{color:#e8edf2;}
body.dark-mode .royal-more-toggle{background:#1a2e24;border-color:#2d5544;color:#e8edf2;}
body.dark-mode .royal-more-toggle:hover{background:#223348;}
body.dark-mode .royal-duo-quiz{background:linear-gradient(135deg,#2a2010,#3a2c15);border-color:#B8924A;}
body.dark-mode .royal-duo-quiz .royal-duo-label{color:#d4b740;}
body.dark-mode .royal-duo-quiz .royal-duo-sub{color:#B8924A;}
body.dark-mode .royal-footer{border-top-color:#2d5544;}
body.dark-mode .royal-last-update{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#e8edf2;}
/* === Responsive === */
@media(max-width:420px){
.royal-menu{padding:60px 10px 20px;}
.royal-hero-title{font-size:1.35rem;}
.royal-bento-card[data-size="wide"]{grid-column:span 3;}
.royal-bento-card[data-size="medium"]{grid-column:span 3;}
.royal-hero-badge{font-size:.58rem;}
}
/* NAV TABS */
.nav-tabs{display:flex;gap:4px;border-bottom:2px solid #8A1538;margin-bottom:20px;width:100%;max-width:600px;}
.nav-tab{padding:9px 16px;border:2px solid #8A1538;border-bottom:none;border-radius:8px 8px 0 0;background:#fff;cursor:pointer;font-family:'Cairo',sans-serif;font-weight:700;font-size:.85rem;color:#8A1538;transition:all .15s;}
.nav-tab.active{background:#8A1538;color:#fff;}
.nav-tab:hover:not(.active){background:#f5f5f5;}
/* MENU CARDS */
.menu-grid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:560px;margin-top:12px;}
.menu-card-item{border:1.5px solid #e0e8f0;border-radius:16px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .18s;background:#fff;flex:1;min-width:100px;box-shadow:0 2px 8px rgba(138,21,56,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.menu-card-item:hover{background:#f0f5fa;border-color:#8A1538;transform:translateY(-2px);box-shadow:0 6px 16px rgba(138,21,56,.15);}
.menu-card-item:hover svg path,.menu-card-item:hover svg polygon,.menu-card-item:hover svg rect,.menu-card-item:hover svg circle,.menu-card-item:hover svg line{stroke:#8A1538!important;opacity:1;}
/* TEAMS SETUP - dynamic */
.teams-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.team-entry{flex:1;min-width:140px;border:2px solid #8A1538;border-radius:10px;padding:10px;text-align:center;}
.team-entry label{font-size:.75rem;color:#555;display:block;margin-bottom:4px;font-weight:700;}
.team-entry input{width:100%;background:#fff;border:2px solid #ddd;border-radius:6px;padding:7px;color:#8A1538;font-family:'Tajawal',sans-serif;font-size:.88rem;text-align:center;outline:none;}
.team-entry input:focus{border-color:#8A1538;}
/* SCOREBOARD - dynamic */
.scores-row{display:flex;align-items:center;gap:6px;justify-content:center;}
#board-bottom-bar .scores-row{justify-content:flex-start !important;}
.sbox{padding:6px 12px;border-radius:10px;text-align:center;border:2px solid #8A1538;background:#fff;transition:all .3s;min-width:80px;}
.sbox.active-t{background:#8A1538;color:#fff;}
.sbox .sn{font-size:.6rem;opacity:.7;}
.sbox .sp{font-size:1.5rem;font-weight:900;line-height:1.1;}
/* JUDGE BUTTONS - dynamic */
.judge-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.judge-btn{flex:1;min-width:90px;padding:11px 8px;border:2px solid #8A1538;border-radius:10px;background:#fff;font-family:'Cairo',sans-serif;font-size:.85rem;font-weight:900;cursor:pointer;transition:all .15s;}
.judge-btn:hover{background:#8A1538;color:#fff;}
.judge-btn.correct-team{background:#3D6B53;color:#fff;border-color:#3D6B53;}
/* FINAL SCORES - dynamic */
.final-scores{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap;justify-content:center;}
.final-team{flex:1;min-width:100px;max-width:175px;text-align:center;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.25);border-radius:14px;padding:14px 8px;transition:all .3s;}
.final-team.winner{background:#fff;color:#8A1538;border:2.5px solid #d4b740;}
.final-team .fn{font-size:.88rem;font-weight:700;}
.final-team .fp{font-size:2rem;font-weight:900;}
/* MY GAMES */
.game-history-item{border:2px solid #8A1538;border-radius:10px;padding:12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.game-history-item .gi-date{font-size:.75rem;color:#555;}
.game-history-item .gi-cats{font-size:.78rem;color:#333;}
.game-history-item .gi-result{font-weight:900;}
/* ABOUT */
.about-section{max-width:560px;width:100%;margin-top:70px;}
.about-card{border:2px solid #8A1538;border-radius:14px;padding:24px;background:#fff;box-shadow:5px 5px 0 #8A1538;margin-bottom:16px;}
.about-card h2{font-size:1.1rem;font-weight:900;margin-bottom:12px;border-bottom:2px solid #8A1538;padding-bottom:8px;}
.about-card p{font-size:.9rem;line-height:1.9;color:#333;}
.team-member{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:10px;border:1px solid #ddd;border-radius:8px;}
.team-member .tm-icon{font-size:1.8rem;}
.team-member .tm-info .tm-name{font-weight:900;font-size:.9rem;}
.team-member .tm-info .tm-role{font-size:.78rem;color:#555;}
/* PROFILE */
.profile-btn{display:flex;align-items:center;gap:7px;background:#fff;border:2px solid #8A1538;border-radius:20px;padding:5px 12px 5px 6px;cursor:pointer;transition:all .15s;font-family:'Cairo',sans-serif;font-weight:700;font-size:.82rem;}
.profile-btn:hover{background:#f5f5f5;transform:translate(-1px,-1px);box-shadow:2px 2px 0 #122840;}
.profile-avatar{width:28px;height:28px;border-radius:50%;background:#8A1538;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:900;overflow:hidden;flex-shrink:0;}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
/* PROFILE MODAL */
#profile-modal{
display:none;position:fixed;inset:0;z-index:999;
background:rgba(0,0,0,.5);
align-items:flex-start;justify-content:flex-end;
padding:64px 16px 100px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
#profile-modal.open{display:flex;}
.profile-box{
background:#fff;border:2px solid #8A1538;border-radius:16px;
width:100%;max-width:340px;
max-height:calc(100vh - 180px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
box-shadow:6px 6px 0 #8A1538;
animation:slideDown .2s ease;
}
@media (max-width:600px){
#profile-modal{
padding:60px 12px 110px;
justify-content:center;
}
.profile-box{
max-width:100%;
max-height:calc(100vh - 170px);
}
}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.profile-header{padding:20px;border-bottom:2px solid #8A1538;display:flex;align-items:center;gap:14px;position:relative;}
.profile-avatar-lg{width:60px;height:60px;border-radius:50%;background:#8A1538;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;overflow:hidden;flex-shrink:0;border:2px solid #8A1538;cursor:pointer;position:relative;}
.profile-avatar-lg:hover::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;font-size:1.2rem;border-radius:50%;}
.profile-avatar-lg img{width:100%;height:100%;object-fit:cover;}
.profile-greeting{font-size:1rem;font-weight:900;}
.profile-email-small{font-size:.75rem;color:#555;margin-top:2px;}
.profile-close{position:absolute;top:10px;left:10px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#555;padding:4px;}
.profile-body{padding:16px;}
.profile-field{margin-bottom:14px;}
.profile-field label{font-size:.75rem;font-weight:700;color:#555;display:block;margin-bottom:4px;}
.profile-field .pf-val{font-size:.9rem;font-weight:700;color:#8A1538;display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:2px solid #ddd;border-radius:8px;background:#fafafa;}
.profile-field .pf-val .edit-icon{cursor:pointer;font-size:1rem;color:#555;background:none;border:none;padding:0;}
.profile-field .pf-val .edit-icon:hover{color:#8A1538;}
.profile-edit-input{width:100%;padding:9px 12px;border:2px solid #8A1538;border-radius:8px;font-family:'Tajawal',sans-serif;font-size:.9rem;color:#8A1538;outline:none;display:none;}
.profile-edit-input.show{display:block;}
.profile-save-btn{width:100%;padding:10px;background:#8A1538;color:#fff;border:2px solid #8A1538;border-radius:10px;font-family:'Cairo',sans-serif;font-weight:900;cursor:pointer;margin-top:4px;display:none;}
.profile-save-btn.show{display:block;}
.profile-verify-badge{font-size:.72rem;padding:2px 8px;border-radius:10px;font-weight:700;}
.verified{background:#EBF2EE;color:#3D6B53;border:1px solid #3D6B53;}
.unverified{background:#fde8e8;color:#c0392b;border:1px solid #c0392b;cursor:pointer;}
/* CATEGORY GROUPS */
.cat-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:8px 0 14px;}
@media (min-width:600px){
.cat-groups{grid-template-columns:repeat(3,1fr);}
}
/* ════ شجرة المستويات الهرمية — منصة الملهم ════ */
.hh-cat-tree{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px;}
.hh-level{background:#fff;border:2px solid #e0e6e0;border-radius:14px;overflow:hidden;transition:all .25s ease;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.hh-level:hover{border-color:#c0d0c5;box-shadow:0 2px 6px rgba(138,21,56,.08);}
.hh-level.hh-open{box-shadow:0 4px 12px rgba(138,21,56,.12);border-color:#8A1538;}
.hh-level.hh-level-soon{opacity:.78;}
.hh-level.hh-level-soon:hover{opacity:1;}
.hh-level.hh-level-elite{background:linear-gradient(180deg,#fffdf5 0%,#fff 30%);border-color:#e8d488;}
.hh-level.hh-level-elite.hh-open{border-color:#B8924A;box-shadow:0 4px 14px rgba(184,146,74,.2);}
.hh-level-header{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px;background:transparent;border:none;cursor:pointer;text-align:right;font-family:Cairo,sans-serif;border-right:4px solid #8A1538;transition:background .15s;}
.hh-level-header:hover{background:linear-gradient(90deg,rgba(138,21,56,.04),transparent);}
.hh-level-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);}
.hh-level-info{flex:1;min-width:0;}
.hh-level-title{font-weight:900;font-size:.95rem;color:#1a1a2e;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.3;}
.hh-level-desc{font-size:.72rem;color:#777;margin-top:2px;line-height:1.4;}
.hh-level-desc strong{color:#8A1538;font-weight:900;}
.hh-level-chevron{color:#888;flex-shrink:0;transition:transform .25s ease;}
.hh-level.hh-open .hh-level-chevron{transform:rotate(180deg);color:#8A1538;}
.hh-level-status{display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;font-size:.62rem;font-weight:900;letter-spacing:0;}
.hh-status-available{background:#EBF2EE;color:#3D6B53;border:1px solid #3D6B53;}
.hh-status-soon{background:#fff8e8;color:#8A6D2E;border:1px dashed #B8924A;}
.hh-status-elite{background:linear-gradient(135deg,#3D0918,#4a2e18);color:#D4BC85;border:1px solid #B8924A;}
.hh-level-body{display:none;padding:0 14px 14px;border-top:1px solid #f0f0f0;}
.hh-level.hh-open .hh-level-body{display:block;animation:hh-fade-in .25s ease;}
.hh-level-body .cat-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:12px 0 6px;}
@media (min-width:600px){
.hh-level-body .cat-groups{grid-template-columns:repeat(3,1fr);}
}
.hh-level-empty{padding:20px 12px;text-align:center;color:#aaa;font-size:.85rem;font-weight:700;}
@keyframes hh-fade-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}
#hh-cat-search:focus{border-color:#8A1538;box-shadow:0 0 0 3px rgba(138,21,56,.1);}
body.dark-mode .hh-level{background:#1a2e24;border-color:#2d5544;}
body.dark-mode .hh-level.hh-open{border-color:#4fc87e;}
body.dark-mode .hh-level-title{color:#f0f5f2;}
body.dark-mode .hh-level-desc{color:#9ab0a4;}
body.dark-mode .hh-level-desc strong{color:#4fc87e;}
body.dark-mode .hh-level-body{border-top-color:#2d5544;}
body.dark-mode #hh-cat-search{background:#1a2e24;color:#f0f5f2;border-color:#2d5544;}
body.dark-mode .hh-status-available{background:#5E0E26;color:#82c04e;border-color:#4fc87e;}
body.dark-mode .hh-status-soon{background:#3a2e0a;color:#e8c968;border-color:#B8924A;}
.cat-group-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:2px solid #8A1538;border-radius:12px;background:#fff;cursor:pointer;transition:all .15s;width:100%;position:relative;font-family:Cairo,sans-serif;}
/* ═══ ألوان مميزة لكل مجموعة ═══ */
/* الدين الإسلامي — أخضر إسلامي */
.cat-group-btn[data-gid="islamic"]{border-color:#3D6B53;background:linear-gradient(135deg,#fff 0%,#EBF2EE 100%);}
.cat-group-btn[data-gid="islamic"]:hover{background:#EBF2EE;box-shadow:0 2px 0 #3D6B53;}
.cat-group-btn[data-gid="islamic"].active{background:#3D6B53;color:#fff;border-color:#2C5340;}
/* اللغة والأدب — برتقالي دافئ */
.cat-group-btn[data-gid="lang"]{border-color:#A67C4A;background:linear-gradient(135deg,#fff 0%,#fef3e2 100%);}
.cat-group-btn[data-gid="lang"]:hover{background:#fef3e2;box-shadow:0 2px 0 #A67C4A;}
.cat-group-btn[data-gid="lang"].active{background:#A67C4A;color:#fff;border-color:#8e4e1f;}
/* قطر — عنابي قطري */
.cat-group-btn[data-gid="qatar"]{border-color:#8A1538;background:linear-gradient(135deg,#fff 0%,#f5e1e7 100%);}
.cat-group-btn[data-gid="qatar"]:hover{background:#f5e1e7;box-shadow:0 2px 0 #8A1538;}
.cat-group-btn[data-gid="qatar"].active{background:#8A1538;color:#fff;border-color:#5c0e25;}
/* اجتماعيات — أخضر زيتي */
.cat-group-btn[data-gid="social7"]{border-color:#8A1538;background:linear-gradient(135deg,#fff 0%,#e8f2ec 100%);}
.cat-group-btn[data-gid="social7"]:hover{background:#e8f2ec;box-shadow:0 2px 0 #8A1538;}
.cat-group-btn[data-gid="social7"].active{background:#8A1538;color:#fff;border-color:#3D0918;}
/* علوم — أزرق علمي */
.cat-group-btn[data-gid="science7"]{border-color:#1E3A5F;background:linear-gradient(135deg,#fff 0%,#EDF1F6 100%);}
.cat-group-btn[data-gid="science7"]:hover{background:#EDF1F6;box-shadow:0 2px 0 #1E3A5F;}
.cat-group-btn[data-gid="science7"].active{background:#1E3A5F;color:#fff;border-color:#0C447C;}
/* الرياضة — أخضر ملعب */
.cat-group-btn[data-gid="sport"]{border-color:#3B6D11;background:linear-gradient(135deg,#fff 0%,#eaf3de 100%);}
.cat-group-btn[data-gid="sport"]:hover{background:#eaf3de;box-shadow:0 2px 0 #3B6D11;}
.cat-group-btn[data-gid="sport"].active{background:#3B6D11;color:#fff;border-color:#27500A;}
/* أسئلتي — بنفسجي إبداعي */
.cat-group-btn[data-gid="custom"]{border-color:#3D4A7A;background:linear-gradient(135deg,#fff 0%,#EDF0F7 100%);}
.cat-group-btn[data-gid="custom"]:hover{background:#EDF0F7;box-shadow:0 2px 0 #3D4A7A;}
.cat-group-btn[data-gid="custom"].active{background:#3D4A7A;color:#fff;border-color:#2C3358;}
/* عداد الأسئلة */
.cat-count-badge{position:absolute;top:-6px;left:-6px;background:#8A1538;color:#fff;font-size:.62rem;font-weight:900;padding:2px 6px;border-radius:10px;min-width:22px;text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.15);z-index:2;}
.cat-group-btn[data-gid="islamic"] .cat-count-badge{background:#3D6B53;}
.cat-group-btn[data-gid="lang"] .cat-count-badge{background:#A67C4A;}
.cat-group-btn[data-gid="qatar"] .cat-count-badge{background:#8A1538;}
.cat-group-btn[data-gid="social7"] .cat-count-badge{background:#8A1538;}
.cat-group-btn[data-gid="science7"] .cat-count-badge{background:#1E3A5F;}
.cat-group-btn[data-gid="sport"] .cat-count-badge{background:#3B6D11;}
.cat-group-btn[data-gid="custom"] .cat-count-badge{background:#3D4A7A;}
/* شارة تحدي النخبة على الأساطير */
.cat-elite-badge{position:absolute;top:-8px;right:-6px;background:linear-gradient(135deg,#B8924A 0%,#D4BC85 50%,#B8924A 100%);color:#3D0918;font-size:.58rem;font-weight:900;padding:3px 8px;border-radius:10px;box-shadow:0 2px 6px rgba(184,146,74,.4);z-index:3;letter-spacing:0;border:1px solid #8A6D2E;animation:elitePulse 2.5s ease-in-out infinite;white-space:nowrap;}
@keyframes elitePulse{0%,100%{transform:scale(1);box-shadow:0 2px 6px rgba(184,146,74,.4);}50%{transform:scale(1.05);box-shadow:0 2px 12px rgba(212,188,133,.7);}}
/* الأساطير — إطار ذهبي متوهج */
.cat-group-btn.legends-group{border:2px solid #B8924A;background:linear-gradient(135deg,#fff 0%,#F8F8F6 100%);box-shadow:0 2px 0 #8A6D2E,0 0 16px rgba(184,146,74,.2);}
.cat-group-btn.legends-group:hover{background:linear-gradient(135deg,#F8F8F6 0%,#f5e9a8 100%);box-shadow:0 3px 0 #8A6D2E,0 0 24px rgba(212,188,133,.5);transform:translateY(-2px);}
.cat-group-btn.legends-group.active{background:linear-gradient(135deg,#3D0918 0%,#4a2e18 100%);border-color:#D4BC85;color:#F8F8F6;box-shadow:0 3px 0 #8A6D2E,0 0 28px rgba(212,188,133,.6);}
.cat-group-btn.legends-group.active .cat-group-label{color:#D4BC85;text-shadow:0 1px 3px rgba(0,0,0,.3);}
.cat-group-btn.legends-group .cat-count-badge{background:#B8924A;color:#3D0918;}
.cat-group-btn:hover{background:#e8f2ec;}
.cat-group-btn.active{background:#8A1538;color:#fff;}
.cat-group-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.cat-group-label{font-size:.68rem;font-weight:700;text-align:center;line-height:1.3;}
body.dark-mode .cat-count-badge{background:#2d5544;}
body.dark-mode .cat-group-btn.legends-group{background:linear-gradient(135deg,#1a2e24 0%,#2a3e34 100%);border-color:#d4b740;}
body.dark-mode .cat-group-btn.legends-group.active{background:linear-gradient(135deg,#050f0c 0%,#3D0918 100%);}
@media (max-width:700px){
.cat-elite-badge{font-size:.52rem;padding:2px 6px;top:-6px;right:-4px;}
.cat-count-badge{font-size:.58rem;padding:1px 5px;top:-5px;left:-5px;}
}
.cat-sublist{display:none;margin-bottom:10px;}
.cat-sublist.open{display:block;}
.cat-sublist-title{font-size:.75rem;font-weight:900;color:#8A1538;margin-bottom:6px;padding:4px 8px;border-right:3px solid #8A1538;}
/* عناوين الفئات الفرعية حسب المجموعة */
#sub-islamic .cat-sublist-title{color:#3D6B53;border-right-color:#3D6B53;}
#sub-lang .cat-sublist-title{color:#A67C4A;border-right-color:#A67C4A;}
#sub-qatar .cat-sublist-title{color:#8A1538;border-right-color:#8A1538;}
#sub-social7 .cat-sublist-title{color:#8A1538;border-right-color:#8A1538;}
#sub-science7 .cat-sublist-title{color:#1E3A5F;border-right-color:#1E3A5F;}
#sub-sport .cat-sublist-title{color:#3B6D11;border-right-color:#3B6D11;}
#sub-custom .cat-sublist-title{color:#3D4A7A;border-right-color:#3D4A7A;}
#sub-legends .cat-sublist-title{color:#B8924A;border-right-color:#B8924A;}
/* خلفيات خفيفة للفئات الفرعية (داخل كل مجموعة) */
#sub-islamic{background:linear-gradient(180deg,rgba(61,107,83,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-lang{background:linear-gradient(180deg,rgba(201,118,64,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-qatar{background:linear-gradient(180deg,rgba(138,21,56,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-social7{background:linear-gradient(180deg,rgba(138,21,56,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-science7{background:linear-gradient(180deg,rgba(30,58,95,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-sport{background:linear-gradient(180deg,rgba(59,109,17,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-custom{background:linear-gradient(180deg,rgba(61,74,122,.04) 0%,transparent 100%);border-radius:10px;padding:6px;}
#sub-legends{background:linear-gradient(180deg,rgba(184,146,74,.06) 0%,transparent 100%);border-radius:10px;padding:6px;}
body.dark-mode #sub-islamic .cat-sublist-title{color:#4fc87e;border-right-color:#4fc87e;}
body.dark-mode #sub-lang .cat-sublist-title{color:#f0a872;border-right-color:#f0a872;}
body.dark-mode #sub-qatar .cat-sublist-title{color:#d64270;border-right-color:#d64270;}
body.dark-mode #sub-science7 .cat-sublist-title{color:#5ba3e8;border-right-color:#5ba3e8;}
body.dark-mode #sub-sport .cat-sublist-title{color:#82c04e;border-right-color:#82c04e;}
body.dark-mode #sub-custom .cat-sublist-title{color:#8a80e8;border-right-color:#8a80e8;}
body.dark-mode #sub-legends .cat-sublist-title{color:#D4BC85;border-right-color:#D4BC85;}
/* تنبيه فئة الأساطير — منطقة النخبة */
.legends-notice{background:linear-gradient(135deg,#3D0918 0%,#4a2e18 100%)!important;border:2px solid #B8924A!important;border-radius:12px;padding:14px 16px;margin:10px 0 14px;box-shadow:0 4px 0 #8A6D2E,0 0 20px rgba(184,146,74,.15);position:relative;overflow:hidden;}
/* النسخة العلوية — تظهر في بداية مستوى الأساطير لكل المجموعات الأسطورية */
.legends-notice-top{
margin:14px 0 16px !important;
padding:18px 18px !important;
border-width:2.5px !important;
box-shadow:0 6px 0 #8A6D2E, 0 0 24px rgba(184,146,74,.20) !important;
}
.legends-notice-top::after{
content:'';
position:absolute;
bottom:-30px; left:-30px;
width:100px; height:100px;
background:radial-gradient(circle,rgba(212,188,133,.15),transparent 70%);
pointer-events:none;
}
.legends-notice::before{content:'';position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(184,146,74,.2),transparent);border-radius:50%;pointer-events:none;}
div.legends-notice div.ln-title{font-size:1rem!important;font-weight:900!important;color:#D4BC85!important;margin-bottom:10px!important;letter-spacing:0;position:relative;text-shadow:0 2px 4px rgba(0,0,0,.5)!important;}
div.legends-notice div.ln-body{font-size:.88rem!important;color:#ffffff!important;line-height:1.9!important;margin-bottom:12px!important;position:relative;font-weight:600!important;text-shadow:0 1px 2px rgba(0,0,0,.6)!important;}
div.legends-notice div.ln-body strong{color:#ffd84d!important;font-weight:900!important;text-shadow:0 1px 3px rgba(0,0,0,.6)!important;}
div.legends-notice span.ln-600{color:#1a2e20!important;font-weight:900!important;padding:3px 10px!important;background:#ffd84d!important;border-radius:6px!important;margin:0 3px!important;border:2px solid #B8924A!important;display:inline-block;text-shadow:none!important;}
div.legends-notice span.ln-800{color:#1a2e20!important;font-weight:900!important;padding:3px 10px!important;background:#ffdd55!important;border-radius:6px!important;margin:0 3px!important;border:2px solid #B8924A!important;display:inline-block;text-shadow:none!important;}
div.legends-notice span.ln-1000{color:#1a2e20!important;font-weight:900!important;padding:3px 10px!important;background:#fff3a8!important;border-radius:6px!important;margin:0 3px!important;border:2px solid #B8924A!important;display:inline-block;text-shadow:none!important;}
div.legends-notice div.ln-warn{font-size:.95rem!important;font-weight:900!important;color:#ffd84d!important;text-align:center;padding:12px 14px!important;margin-top:12px!important;background:rgba(184,146,74,.22)!important;border:2px dashed #D4BC85!important;border-radius:10px!important;letter-spacing:0;position:relative;text-shadow:0 2px 4px rgba(0,0,0,.5)!important;}
div.legends-notice div.ln-guest-cta{font-size:.82rem!important;font-weight:700!important;color:#F8F8F6!important;text-align:center;padding:10px 12px!important;margin-top:10px!important;background:linear-gradient(135deg,rgba(212,188,133,.15) 0%,rgba(184,146,74,.25) 100%)!important;border:1.5px solid #D4BC85!important;border-radius:10px!important;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.4)!important;letter-spacing:0;animation:guestCtaPulse 3s ease-in-out infinite;}
div.legends-notice div.ln-guest-cta strong{color:#ffd84d!important;font-weight:900!important;}
@keyframes guestCtaPulse{0%,100%{box-shadow:0 0 0 rgba(212,188,133,0);}50%{box-shadow:0 0 16px rgba(212,188,133,.4);}}
body.dark-mode .legends-notice{border-color:#d4b740!important;background:linear-gradient(135deg,#050f0c 0%,#3D0918 100%)!important;}
@media (max-width:700px){
div.legends-notice div.ln-title{font-size:.92rem!important;}
div.legends-notice div.ln-body{font-size:.82rem!important;}
div.legends-notice div.ln-warn{font-size:.88rem!important;}
div.legends-notice span.ln-600,
div.legends-notice span.ln-800,
div.legends-notice span.ln-1000{padding:2px 8px!important;font-size:.82rem;}
}
/* SELECTED CATS PANEL */
.selected-panel{background:#f0f4f8;border:2px solid #8A1538;border-radius:12px;padding:12px;margin-bottom:12px;}
.selected-panel-title{font-size:.75rem;font-weight:900;color:#8A1538;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;}
.selected-counter{background:#8A1538;color:#fff;border-radius:20px;padding:2px 10px;font-size:.75rem;font-weight:900;}
.selected-counter.full{background:#3D6B53;}
.selected-counter.warn{background:#c0392b;}
.selected-tags{display:flex;flex-wrap:wrap;gap:6px;min-height:28px;}
.selected-tag{display:flex;align-items:center;gap:4px;background:#fff;border:1.5px solid #8A1538;border-radius:20px;padding:4px 10px;font-size:.72rem;font-weight:700;color:#8A1538;}
.selected-tag .remove-tag{cursor:pointer;font-size:.65rem;color:#999;margin-right:1px;font-weight:700;line-height:1;}
.selected-tag .remove-tag:hover{color:#c0392b;}
.empty-hint{font-size:.72rem;color:#aaa;font-style:italic;}
/* RATING */
.stars-row{display:flex;gap:6px;justify-content:center;margin:10px 0;}
.star-btn{font-size:3rem;cursor:pointer;color:#e0e0e0;transition:all .15s;background:none;border:none;padding:2px 6px;filter:drop-shadow(0 0 0 transparent);}
.star-btn.on{color:#d4b740;filter:drop-shadow(0 0 4px rgba(241,196,15,.6));transform:scale(1.1);}
.star-btn:hover{color:#d4b740;transform:scale(1.15);}
.rating-q{margin-bottom:14px;}
.rating-q label{font-size:.82rem;font-weight:700;color:#444;display:block;margin-bottom:6px;}
.rating-scale{display:flex;gap:6px;flex-wrap:wrap;}
.rating-scale button{flex:1;min-width:40px;padding:8px 4px;border:2px solid #ddd;border-radius:8px;background:#fff;font-family:Cairo,sans-serif;font-weight:700;font-size:.8rem;cursor:pointer;transition:all .15s;}
.rating-scale button.sel{background:#8A1538;color:#fff;border-color:#8A1538;}
/* REVIEWS */
.reviews-section{width:100%;max-width:600px;margin:20px auto 0;}
.reviews-stats{display:flex;align-items:center;gap:16px;background:#f0f4f8;border:2px solid #8A1538;border-radius:14px;padding:16px;margin-bottom:14px;}
.reviews-avg{text-align:center;}
.reviews-avg .avg-num{font-size:3rem;font-weight:900;color:#8A1538;line-height:1;}
.reviews-avg .avg-stars{color:#f5a623;font-size:1.2rem;}
.reviews-avg .avg-count{font-size:.75rem;color:#888;margin-top:2px;}
.reviews-bars{flex:1;}
.bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.bar-row .bar-label{font-size:.72rem;width:20px;text-align:left;color:#555;}
.bar-row .bar-track{flex:1;height:8px;background:#eee;border-radius:4px;overflow:hidden;}
.bar-row .bar-fill{height:100%;background:#f5a623;border-radius:4px;transition:width .5s;}
.bar-row .bar-pct{font-size:.68rem;color:#888;width:28px;}
.review-card{border:1.5px solid #e8f2ec;border-radius:16px;padding:16px;margin-bottom:10px;background:#fff;position:relative;box-shadow:0 2px 8px rgba(138,21,56,.06);transition:box-shadow .2s;}
.review-card:hover{box-shadow:0 4px 16px rgba(138,21,56,.1);}
.review-card .rc-stars{font-size:.95rem;letter-spacing:0;margin:4px 0;}
.review-card .rc-name{font-weight:900;font-size:.9rem;color:#1a1a2e;}
.review-card .rc-text{font-size:.85rem;color:#444;line-height:1.8;margin-top:6px;}
.review-card .rc-date{font-size:.68rem;color:#bbb;margin-top:8px;}
.review-card .rc-delete{position:absolute;top:10px;left:10px;background:#fde8e8;border:1px solid #f5c6c6;border-radius:6px;color:#c0392b;cursor:pointer;font-size:.72rem;padding:3px 7px;transition:all .15s;}
.review-card .rc-delete:hover{background:#c0392b;color:#fff;}
/* ADMIN PANEL */
.admin-section{margin-bottom:20px;}
.admin-section h3{font-size:.9rem;font-weight:900;color:#8A1538;border-bottom:2px solid #8A1538;padding-bottom:6px;margin-bottom:10px;}
.admin-user-card{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid #eee;border-radius:10px;margin-bottom:6px;gap:8px;}
.admin-user-card .au-info{flex:1;}
.admin-user-card .au-name{font-weight:900;font-size:.85rem;}
.admin-user-card .au-email{font-size:.72rem;color:#888;}
.admin-user-card .au-pts{font-size:.8rem;color:#8A1538;font-weight:700;}
/* أزرار فلترة المستخدمين */
.uf-btn{transition:all .2s ease;}
.uf-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12);}
.uf-btn.uf-active{background:#8A1538 !important;color:#fff !important;border-color:#8A1538 !important;box-shadow:0 3px 10px rgba(138,21,56,.35);}
.uf-btn[data-type="teacher"].uf-active{background:#8A1538 !important;border-color:#8A1538 !important;}
.uf-btn[data-type="student"].uf-active{background:#3D6B53 !important;border-color:#3D6B53 !important;}
.uf-btn[data-type="visitor"].uf-active{background:#666 !important;border-color:#666 !important;}
.uf-btn[data-reviewed="yes"].uf-active{background:linear-gradient(135deg,#B8924A,#8A6D2E) !important;border-color:#8A6D2E !important;color:#fff !important;}
.uf-btn[data-reviewed="no"].uf-active{background:#888 !important;border-color:#888 !important;}
.uf-btn[data-activity="engaged"].uf-active{background:#3D6B53 !important;border-color:#3D6B53 !important;}
.uf-btn[data-activity="idle"].uf-active{background:linear-gradient(135deg,#B8924A,#8A6D2E) !important;border-color:#8A6D2E !important;color:#fff !important;}
.uf-btn[data-activity="needs-help"].uf-active{background:#c0392b !important;border-color:#c0392b !important;}
/* ─── ألوان زر الترتيب النشط ─── */
.uf-btn[data-sort="newest"].uf-active{background:#8A1538 !important;border-color:#8A1538 !important;color:#fff !important;}
.uf-btn[data-sort="oldest"].uf-active{background:#8A1538 !important;border-color:#8A1538 !important;color:#fff !important;}
.uf-btn[data-sort="active"].uf-active{background:#3D6B53 !important;border-color:#3D6B53 !important;color:#fff !important;}
.uf-btn[data-sort="rated"].uf-active{background:linear-gradient(135deg,#B8924A,#8A6D2E) !important;border-color:#8A6D2E !important;color:#fff !important;}
.uf-btn[data-sort="unrated"].uf-active{background:#888 !important;border-color:#888 !important;color:#fff !important;}
body.dark-mode .uf-btn{background:#1a2026 !important;border-color:#2a3138 !important;color:#aab2bb !important;}
body.dark-mode .uf-btn.uf-active{color:#fff !important;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.admin-stat{text-align:center;background:#f0f4f8;border:2px solid #8A1538;border-radius:10px;padding:12px 6px;}
.admin-stat .as-num{font-size:1.8rem;font-weight:900;color:#8A1538;}
.admin-stat .as-label{font-size:.68rem;color:#555;}
.admin-review-card{display:flex;align-items:flex-start;justify-content:space-between;padding:10px;border:1px solid #eee;border-radius:10px;margin-bottom:6px;gap:8px;}
.admin-review-card .ar-info{flex:1;}
.admin-review-card .ar-name{font-weight:900;font-size:.82rem;}
.admin-review-card .ar-stars{color:#f5a623;font-size:.8rem;}
.admin-review-card .ar-text{font-size:.78rem;color:#555;margin-top:2px;}
.admin-review-card .ar-email{
display:inline-flex;align-items:center;gap:4px;
font-size:.7rem;color:#8A1538;font-weight:700;
background:#e8f2ec;border:1px solid #c5dbcb;
padding:2px 8px;border-radius:999px;
margin-top:4px;letter-spacing:0;direction:ltr;
}
.admin-review-card .ar-email-empty{
display:inline-flex;align-items:center;gap:4px;
font-size:.68rem;color:#888;font-weight:600;
background:#f5f5f5;border:1px dashed #ccc;
padding:2px 8px;border-radius:999px;
margin-top:4px;font-style:italic;
}
.admin-del-btn{background:none;border:1.5px solid #ddd;border-radius:6px;padding:4px 8px;cursor:pointer;font-size:.72rem;color:#c0392b;white-space:nowrap;}
.admin-del-btn:hover{background:#fde8e8;border-color:#c0392b;}
.admin-tabs{display:flex;gap:6px;margin-bottom:14px;border-bottom:2px solid #eee;padding-bottom:8px;flex-wrap:wrap;}
.admin-tab{padding:6px 12px;border:2px solid #8A1538;border-radius:20px;background:#fff;cursor:pointer;font-family:Cairo,sans-serif;font-weight:700;font-size:.78rem;color:#8A1538;display:inline-flex;align-items:center;gap:6px;}
.admin-tab .tab-icon{width:14px;height:14px;fill:currentColor;flex-shrink:0;}
.admin-tab.active{background:#8A1538;color:#fff;}
/* ═══════════════════════════════════════════════════════
ADMIN PANEL v2 — التصميم الملكي الجديد
كل الكلاسات الجديدة بادئتها mc- (Mulhim Console)
═══════════════════════════════════════════════════════ */
.mc-shell{
display:grid;grid-template-columns:240px 1fr;gap:16px;
max-width:1180px;margin:8px auto 40px;width:100%;
font-family:'Tajawal','Cairo',sans-serif;
}
.mc-sidebar{
background:linear-gradient(180deg,#FAFAF8 0%,#F8F8F6 100%);
border:1.5px solid #B8924A;border-radius:16px;
padding:0;
position:sticky;top:78px;align-self:start;
max-height:calc(100vh - 96px);overflow:hidden;
box-shadow:0 6px 18px rgba(94,14,38,.1);
display:flex;flex-direction:column;
}
.mc-sidebar-fixed{
padding:14px 10px 10px;
background:linear-gradient(180deg,#FAFAF8 0%,#F8F8F6 100%);
border-bottom:1.5px solid rgba(184,146,74,.25);
flex-shrink:0;
position:relative;z-index:2;
}
.mc-sidebar-scroll{
flex:1;overflow-y:auto;
padding:10px;
}
.mc-sidebar-scroll::-webkit-scrollbar{width:5px;}
.mc-sidebar-scroll::-webkit-scrollbar-thumb{background:#B8924A;border-radius:3px;}
.mc-brand{
display:flex;align-items:center;gap:9px;
padding:0 4px 12px;border-bottom:1.5px solid rgba(184,146,74,.25);
margin-bottom:10px;
}
.mc-brand-logo{
width:36px;height:36px;border-radius:9px;
background:linear-gradient(135deg,#5E0E26,#8A1538);
color:#D4BC85;display:flex;align-items:center;justify-content:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;
box-shadow:0 4px 10px rgba(94,14,38,.25);
}
.mc-brand-text{flex:1;min-width:0;}
.mc-brand-title{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.92rem;
color:#5E0E26;line-height:1.2;
}
.mc-brand-sub{font-size:.66rem;color:#8A6D2E;margin-top:1px;}
.mc-cmd-trigger{
display:flex;align-items:center;gap:8px;
background:#fff;border:1.5px solid #B8924A;border-radius:9px;
padding:7px 10px;margin:0;cursor:pointer;
transition:all .15s;width:100%;
font-family:'Tajawal',sans-serif;
}
.mc-cmd-trigger:hover{background:#F8F8F6;border-color:#8A6D2E;}
.mc-cmd-trigger svg{width:13px;height:13px;color:#8A6D2E;flex-shrink:0;}
.mc-cmd-trigger-text{flex:1;text-align:right;font-size:.74rem;color:#8A6D2E;font-weight:500;}
.mc-cmd-kbd{
background:rgba(184,146,74,.15);
color:#8A6D2E;
border:1px solid rgba(184,146,74,.3);
padding:1px 6px;border-radius:5px;
font-family:monospace;font-size:.62rem;font-weight:700;
}
.mc-group{margin-bottom:6px;}
.mc-group-header{
display:flex;align-items:center;gap:6px;
padding:5px 8px;cursor:pointer;
border-radius:7px;transition:background .12s;
user-select:none;
}
.mc-group-header:hover{background:rgba(184,146,74,.1);}
.mc-group-icon{
width:22px;height:22px;border-radius:6px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.mc-group-icon svg{width:13px;height:13px;}
.mc-group[data-gid="home"] .mc-group-icon{background:#8A1538;color:#D4BC85;}
.mc-group[data-gid="content"] .mc-group-icon{background:#3D6B53;color:#fff;}
.mc-group[data-gid="people"] .mc-group-icon{background:#1E3A5F;color:#fff;}
.mc-group[data-gid="comm"] .mc-group-icon{background:#A67C4A;color:#fff;}
.mc-group[data-gid="tools"] .mc-group-icon{background:#3D4A7A;color:#fff;}
.mc-back-site{
display:flex;align-items:center;gap:8px;width:100%;
margin-top:8px;padding:9px 12px;
background:rgba(184,146,74,.12);
border:1.5px solid rgba(184,146,74,.4);
border-radius:10px;cursor:pointer;
font-family:'Cairo',sans-serif;font-weight:800;font-size:.8rem;
color:#5E0E26;transition:all .2s;
}
.mc-back-site:hover{background:rgba(184,146,74,.22);border-color:#B8924A;transform:translateX(-2px);}
.mc-back-site svg{width:17px;height:17px;color:#B8924A;flex-shrink:0;}
body.dark-mode .mc-back-site{color:#e8edf2;background:rgba(184,146,74,.1);}
.mc-group-label{
flex:1;font-family:'Cairo',sans-serif;font-weight:900;
font-size:.72rem;color:#5E0E26;letter-spacing:0;
text-transform:uppercase;
}
.mc-group-chev{
color:#888;width:11px;height:11px;
transition:transform .2s;
}
.mc-group.collapsed .mc-group-chev{transform:rotate(-90deg);}
.mc-group-items{
display:flex;flex-direction:column;gap:1px;
padding:2px 0 4px 0;
margin-right:14px;
border-right:1.5px solid rgba(184,146,74,.18);
padding-right:6px;
}
.mc-group.collapsed .mc-group-items{display:none;}
.mc-item{
display:flex;align-items:center;gap:8px;
padding:7px 9px;border-radius:7px;
cursor:pointer;transition:all .15s;
border:none;background:transparent;
font-family:'Tajawal','Cairo',sans-serif;
font-size:.78rem;color:#5E0E26;
text-align:right;width:100%;
position:relative;
}
.mc-item:hover{background:rgba(184,146,74,.12);}
.mc-item.active{
background:linear-gradient(90deg,rgba(184,146,74,.18),rgba(184,146,74,.05));
color:#5E0E26;font-weight:900;
box-shadow:inset 2.5px 0 0 #B8924A;
}
.mc-item-icon{
width:14px;height:14px;flex-shrink:0;
color:#8A6D2E;
}
.mc-item.active .mc-item-icon{color:#5E0E26;}
.mc-item-label{flex:1;line-height:1.3;}
.mc-item-badge{
background:#c0392b;color:#fff;
font-size:.6rem;font-weight:900;
min-width:18px;height:18px;padding:0 5px;
border-radius:9px;
display:inline-flex;align-items:center;justify-content:center;
font-family:'Cairo',sans-serif;
}
.mc-item-badge.success{background:#3D6B53;}
.mc-item-badge.warn{background:#A67C4A;}
.mc-content{
background:#fff;border:1.5px solid rgba(184,146,74,.3);
border-radius:16px;padding:18px;
min-height:500px;
box-shadow:0 4px 14px rgba(94,14,38,.06);
}
.mc-content-header{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-bottom:12px;margin-bottom:14px;
border-bottom:1.5px solid #faf5e8;flex-wrap:wrap;
}
.mc-content-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.05rem;color:#5E0E26;
display:flex;align-items:center;gap:8px;
}
.mc-content-title svg{width:18px;height:18px;color:#B8924A;}
.mc-content-sub{font-size:.74rem;color:#8A6D2E;font-weight:700;margin-top:2px;}
.mc-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;margin-bottom:18px;}
.mc-stat-card{
background:linear-gradient(135deg,#F8F8F6 0%,#fff 100%);
border:1.5px solid rgba(184,146,74,.35);
border-radius:13px;padding:13px 14px;
display:flex;align-items:center;gap:11px;
cursor:pointer;transition:all .2s;
font-family:'Tajawal','Cairo',sans-serif;
}
.mc-stat-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(184,146,74,.18);border-color:#B8924A;}
.mc-stat-icon{
width:42px;height:42px;border-radius:11px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.mc-stat-icon svg{width:22px;height:22px;}
.mc-stat-card[data-tone="brown"] .mc-stat-icon{background:#8A1538;color:#D4BC85;}
.mc-stat-card[data-tone="green"] .mc-stat-icon{background:#3D6B53;color:#fff;}
.mc-stat-card[data-tone="blue"] .mc-stat-icon{background:#1E3A5F;color:#fff;}
.mc-stat-card[data-tone="amber"] .mc-stat-icon{background:#B8924A;color:#5E0E26;}
.mc-stat-card[data-tone="red"] .mc-stat-icon{background:#c0392b;color:#fff;}
.mc-stat-card[data-tone="purple"] .mc-stat-icon{background:#3D4A7A;color:#fff;}
.mc-stat-info{flex:1;min-width:0;}
.mc-stat-num{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.4rem;color:#5E0E26;line-height:1;
}
.mc-stat-label{font-size:.74rem;color:#8A6D2E;font-weight:700;margin-top:3px;}
.mc-stat-trend{font-size:.66rem;color:#3D6B53;font-weight:700;margin-top:2px;}
.mc-stat-trend.warn{color:#A67C4A;}
.mc-stat-trend.danger{color:#c0392b;}
/* ═══ تحسينات «خرافية» للصفحة الرئيسية ═══ */
/* بطاقات إحصائية: حركة دخول متدرّجة + لمعان عند المرور */
.mc-stat-card{position:relative;overflow:hidden;animation:mcCardIn .5s cubic-bezier(.21,1,.36,1) both;}
.mc-stat-card::after{
content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.mc-stat-card:hover::after{left:140%;}
.mc-stat-card .mc-stat-icon{transition:transform .3s ease;}
.mc-stat-card:hover .mc-stat-icon{transform:scale(1.08) rotate(-4deg);}
@keyframes mcCardIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.mc-stat-card:nth-child(1){animation-delay:.02s;}
.mc-stat-card:nth-child(2){animation-delay:.07s;}
.mc-stat-card:nth-child(3){animation-delay:.12s;}
.mc-stat-card:nth-child(4){animation-delay:.17s;}
.mc-stat-card:nth-child(5){animation-delay:.22s;}
.mc-stat-card:nth-child(6){animation-delay:.27s;}
.mc-qa-card{animation:mcCardIn .45s cubic-bezier(.21,1,.36,1) both;}
.mc-qa-card .mc-qa-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.mc-qa-card:hover .mc-qa-icon{transform:translateY(-2px) scale(1.1);}
/* لوحة الترحيب البطولية */
.mc-hero{
position:relative;overflow:hidden;
background:
radial-gradient(circle at 88% -20%, rgba(212,188,133,.35), transparent 45%),
linear-gradient(135deg,#8A1538 0%,#5E0E26 100%);
border-radius:18px;padding:18px 20px;margin-bottom:18px;color:#fff;
box-shadow:0 10px 30px rgba(94,14,38,.28);
}
.mc-hero::before{
content:'';position:absolute;inset:0;opacity:.12;pointer-events:none;
background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1px);
background-size:18px 18px;
}
.mc-hero-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.mc-hero-greet{font-family:'Cairo',sans-serif;font-weight:900;font-size:1.3rem;line-height:1.2;}
.mc-hero-sub{font-size:.82rem;opacity:.92;margin-top:5px;font-weight:700;}
.mc-hero-date{
background:rgba(255,255,255,.14);border:1.5px solid rgba(212,188,133,.5);
border-radius:12px;padding:9px 14px;text-align:center;backdrop-filter:blur(4px);
}
.mc-hero-date .d{font-family:'Cairo',sans-serif;font-weight:900;font-size:1.15rem;color:#F0E6CC;line-height:1;}
.mc-hero-date .m{font-size:.68rem;opacity:.85;margin-top:3px;}
/* حلقة تقدّم المراجعة الدائرية */
.mc-ring-wrap{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.12);border:1.5px solid rgba(212,188,133,.4);border-radius:14px;padding:10px 16px;}
.mc-ring{position:relative;width:64px;height:64px;flex-shrink:0;}
.mc-ring svg{transform:rotate(-90deg);}
.mc-ring-track{fill:none;stroke:rgba(255,255,255,.2);stroke-width:7;}
.mc-ring-fill{fill:none;stroke:#F0E6CC;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.21,1,.36,1);}
.mc-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cairo',sans-serif;font-weight:900;font-size:.92rem;color:#fff;}
.mc-ring-text .t{font-family:'Cairo',sans-serif;font-weight:900;font-size:.92rem;color:#fff;}
.mc-ring-text .s{font-size:.72rem;opacity:.85;margin-top:3px;}
body.dark-mode .mc-hero{background:radial-gradient(circle at 88% -20%, rgba(212,188,133,.25), transparent 45%),linear-gradient(135deg,#3a0e1c,#220812);}
body.dark-mode .mc-stat-card::after{background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent);}
@media (prefers-reduced-motion: reduce){
.mc-stat-card,.mc-qa-card{animation:none;}
.mc-stat-card::after{display:none;}
}
/* ═══ الإجراءات السريعة ═══ */
.mc-quickactions{
display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:9px;margin-bottom:20px;
}
.mc-qa-card{
background:#fff;border:1.5px solid #e6cf95;border-radius:12px;
padding:13px 10px;cursor:pointer;transition:all .2s;
display:flex;flex-direction:column;align-items:center;gap:7px;
font-family:'Cairo','Tajawal',sans-serif;
}
.mc-qa-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(184,146,74,.2);
border-color:#B8924A;
}
.mc-qa-icon{
width:38px;height:38px;border-radius:10px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.mc-qa-icon svg{width:19px;height:19px;}
.mc-qa-icon[data-tone="brown"]{background:linear-gradient(135deg,#8A1538,#5E0E26);color:#f0d784;}
.mc-qa-icon[data-tone="green"]{background:linear-gradient(135deg,#3D6B53,#2C5340);color:#fff;}
.mc-qa-icon[data-tone="blue"]{background:linear-gradient(135deg,#1E3A5F,#152840);color:#fff;}
.mc-qa-icon[data-tone="amber"]{background:linear-gradient(135deg,#B8924A,#8A6D2E);color:#fff;}
.mc-qa-icon[data-tone="red"]{background:linear-gradient(135deg,#c0392b,#922b21);color:#fff;}
.mc-qa-icon[data-tone="purple"]{background:linear-gradient(135deg,#3D4A7A,#2a3358);color:#fff;}
.mc-qa-label{font-size:.78rem;color:#5E0E26;font-weight:800;text-align:center;}
body.dark-mode .mc-qa-card{background:#1a2230;border-color:#2d5544;}
body.dark-mode .mc-qa-label{color:#e8edf2;}
.mc-alert{
background:linear-gradient(135deg,#fff8e8,#F8F8F6);
border:1.5px solid #B8924A;
border-right:4px solid #B8924A;
border-radius:11px;padding:11px 14px;
display:flex;align-items:center;gap:11px;
margin-bottom:9px;cursor:pointer;
transition:all .2s;
font-family:'Tajawal','Cairo',sans-serif;
}
.mc-alert:hover{background:#F8F8F6;transform:translateX(-3px);}
.mc-alert.urgent{
background:linear-gradient(135deg,#fde8e8,#fff5f5);
border-color:#c0392b;border-right-color:#c0392b;
}
.mc-alert.success{
background:linear-gradient(135deg,#e8f2ec,#f5f9f7);
border-color:#3D6B53;border-right-color:#3D6B53;
}
.mc-alert-icon{width:28px;height:28px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.mc-alert-icon svg{width:14px;height:14px;}
.mc-alert.urgent .mc-alert-icon{background:#c0392b;color:#fff;}
.mc-alert:not(.urgent):not(.success) .mc-alert-icon{background:#B8924A;color:#5E0E26;}
.mc-alert.success .mc-alert-icon{background:#3D6B53;color:#fff;}
.mc-alert-text{flex:1;font-size:.83rem;color:#5E0E26;font-weight:700;line-height:1.4;}
.mc-alert-text strong{color:#8A6D2E;}
.mc-alert.urgent .mc-alert-text strong{color:#c0392b;}
.mc-alert.success .mc-alert-text strong{color:#2C5340;}
.mc-alert-arrow{color:#8A6D2E;flex-shrink:0;width:14px;height:14px;}
.mc-section-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:.85rem;color:#5E0E26;
display:flex;align-items:center;gap:6px;
margin:18px 0 10px;
padding-bottom:6px;border-bottom:1.5px solid #faf5e8;
}
.mc-section-title svg{width:14px;height:14px;color:#B8924A;}
.mc-mobile-bar{display:none;}
@media (max-width:880px){
.mc-shell{grid-template-columns:1fr;gap:10px;padding:0 8px;}
.mc-sidebar{display:none;}
.mc-mobile-bar{
display:flex;align-items:center;gap:6px;
background:#FAFAF8;border:1.5px solid #B8924A;border-radius:12px;
padding:9px 11px;margin:0 0 10px;
overflow-x:auto;-webkit-overflow-scrolling:touch;
position:sticky;top:60px;z-index:20;
box-shadow:0 4px 12px rgba(94,14,38,.1);
}
.mc-mobile-bar::-webkit-scrollbar{display:none;}
.mc-mobile-group{
flex-shrink:0;display:flex;align-items:center;gap:5px;
padding:6px 11px;background:#fff;border:1.2px solid #B8924A;
border-radius:18px;font-family:Cairo;font-weight:900;font-size:.74rem;
color:#8A1538;cursor:pointer;white-space:nowrap;
}
.mc-mobile-group.active{background:#8A1538;color:#D4BC85;border-color:#5E0E26;}
.mc-mobile-group svg{width:13px;height:13px;}
.mc-content{padding:14px;border-radius:12px;}
}
.mc-cmd-overlay{
position:fixed;inset:0;background:rgba(94,14,38,.55);
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
z-index:9999;display:none;align-items:flex-start;justify-content:center;
padding-top:13vh;
}
.mc-cmd-overlay.show{display:flex;animation:mcFadeIn .15s ease;}
@keyframes mcFadeIn{from{opacity:0;}to{opacity:1;}}
.mc-cmd-box{
width:560px;max-width:92vw;
background:#fff;border:1.5px solid #B8924A;border-radius:14px;
box-shadow:0 24px 60px rgba(94,14,38,.4);
overflow:hidden;font-family:'Tajawal',sans-serif;
}
.mc-cmd-input-wrap{
display:flex;align-items:center;gap:10px;
padding:14px 16px;border-bottom:1.5px solid #faf5e8;
background:#F8F8F6;
}
.mc-cmd-input-wrap svg{width:18px;height:18px;color:#8A6D2E;flex-shrink:0;}
.mc-cmd-input{
flex:1;border:none;background:transparent;outline:none;
font-family:'Tajawal','Cairo',sans-serif;font-size:1rem;
color:#5E0E26;font-weight:700;
}
.mc-cmd-input::placeholder{color:#b08c5e;font-weight:400;}
.mc-cmd-esc{
background:#fff;color:#8A6D2E;
border:1.2px solid #B8924A;padding:3px 8px;border-radius:6px;
font-family:monospace;font-size:.7rem;font-weight:700;
}
.mc-cmd-list{max-height:380px;overflow-y:auto;padding:6px 0;}
.mc-cmd-list::-webkit-scrollbar{width:5px;}
.mc-cmd-list::-webkit-scrollbar-thumb{background:#B8924A;border-radius:3px;}
.mc-cmd-result{
display:flex;align-items:center;gap:11px;
padding:10px 16px;cursor:pointer;
transition:background .12s;
font-family:'Tajawal','Cairo',sans-serif;
}
.mc-cmd-result:hover,
.mc-cmd-result.active{background:#F8F8F6;}
.mc-cmd-result-icon{
width:30px;height:30px;border-radius:8px;
background:#F8F8F6;color:#8A6D2E;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.mc-cmd-result-icon svg{width:15px;height:15px;}
.mc-cmd-result-text{flex:1;min-width:0;}
.mc-cmd-result-title{font-size:.86rem;font-weight:700;color:#5E0E26;}
.mc-cmd-result-cat{font-size:.66rem;color:#8A6D2E;margin-top:1px;}
.mc-cmd-result-arrow{color:#b08c5e;width:12px;height:12px;flex-shrink:0;}
.mc-cmd-empty{
text-align:center;padding:30px 20px;
font-family:Cairo,sans-serif;color:#b08c5e;font-size:.85rem;
}
.qr-wrapper{font-family:'Tajawal','Cairo',sans-serif;direction:rtl;}
.qr-progress-bar{
background:#faf5e8;border-radius:11px;
padding:11px 14px;margin-bottom:14px;
border:1.5px solid #B8924A;
display:flex;align-items:center;gap:13px;flex-wrap:wrap;
}
.qr-progress-info{flex:1;min-width:160px;}
.qr-progress-text{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:.84rem;color:#5E0E26;
}
.qr-progress-track{
background:#fff;border:1px solid rgba(184,146,74,.3);
border-radius:8px;height:8px;overflow:hidden;margin-top:6px;
}
.qr-progress-fill{
background:linear-gradient(90deg,#B8924A,#D4BC85);
height:100%;transition:width .35s ease;border-radius:7px;
}
.qr-progress-stats{display:flex;gap:6px;flex-wrap:wrap;}
.qr-stat-pill{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:14px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.7rem;
}
.qr-stat-pill.reviewed{background:#e8f2ec;color:#2C5340;border:1px solid #3D6B53;}
.qr-stat-pill.needs{background:#fef3e2;color:#8e4e1f;border:1px solid #A67C4A;}
.qr-stat-pill.pending{background:#faf5e8;color:#8A6D2E;border:1px solid #B8924A;}
.qr-filters{
background:#F8F8F6;border:1.5px solid rgba(184,146,74,.3);
border-radius:11px;padding:11px;margin-bottom:14px;
display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.qr-filter-group{display:flex;align-items:center;gap:6px;flex:1;min-width:160px;}
.qr-filter-label{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.7rem;
color:#8A6D2E;white-space:nowrap;
}
.qr-filter-select{
flex:1;padding:7px 9px;border:1.2px solid #B8924A;border-radius:8px;
font-family:'Tajawal',sans-serif;font-size:.8rem;
background:#fff;color:#5E0E26;outline:none;font-weight:700;
}
.qr-card{
background:#fff;
border:2px solid #B8924A;border-radius:16px;
padding:0;overflow:hidden;
box-shadow:0 8px 22px rgba(94,14,38,.1);
margin-bottom:14px;
}
.qr-card-header{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 50%,#5E0E26 100%);
padding:11px 16px;
display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-wrap:wrap;
}
.qr-card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.qr-meta-pill{
background:rgba(212,188,133,.18);
color:#D4BC85;
border:1px solid rgba(184,146,74,.45);
padding:3px 10px;border-radius:13px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.72rem;
display:inline-flex;align-items:center;gap:4px;
}
.qr-meta-pill svg{width:11px;height:11px;}
.qr-meta-pill.diff-easy{color:#7BB369;border-color:rgba(123,179,105,.5);}
.qr-meta-pill.diff-med{color:#D4BC85;border-color:rgba(212,188,133,.5);}
.qr-meta-pill.diff-hard{color:#C9A87E;border-color:rgba(240,153,123,.5);}
.qr-status-pill{
background:#FAFAF8;color:#5E0E26;
padding:4px 11px;border-radius:13px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.72rem;
display:inline-flex;align-items:center;gap:5px;
}
.qr-status-pill.reviewed{background:#3D6B53;color:#fff;}
.qr-status-pill.needs{background:#A67C4A;color:#fff;}
.qr-status-pill.pending{background:#FAFAF8;color:#8A6D2E;border:1px solid #B8924A;}
.qr-status-pill svg{width:12px;height:12px;}
.qr-card-body{padding:22px 22px 18px;}
.qr-question-block{margin-bottom:20px;}
.qr-q-label{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:.7rem;color:#8A6D2E;letter-spacing:0;
text-transform:uppercase;margin-bottom:6px;
display:flex;align-items:center;gap:5px;
}
.qr-q-label svg{width:11px;height:11px;}
.qr-q-text{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.25rem;color:#1a1a2e;line-height:1.7;
background:#faf5e8;border:1.5px solid #B8924A;
border-right:4px solid #B8924A;
border-radius:10px;padding:14px 18px;
}
.qr-a-text{
font-family:'Tajawal',sans-serif;font-weight:700;
font-size:1.08rem;color:#2C5340;line-height:1.6;
background:#e8f2ec;border:1.5px solid #3D6B53;
border-right:4px solid #3D6B53;
border-radius:10px;padding:13px 18px;
display:flex;align-items:center;gap:10px;
}
.qr-a-text svg{width:18px;height:18px;color:#3D6B53;flex-shrink:0;}
.qr-actions{
display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
gap:8px;margin-top:18px;
}
.qr-action-btn{
padding:11px 12px;border-radius:11px;cursor:pointer;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.84rem;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
border:none;transition:all .2s;
box-shadow:0 3px 8px rgba(0,0,0,.08);
}
.qr-action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.18);}
.qr-action-btn:active{transform:translateY(0);}
.qr-action-btn svg{width:15px;height:15px;}
.qr-action-btn.review-ok{background:linear-gradient(135deg,#3D6B53,#2C5340);color:#fff;}
.qr-action-btn.review-needs{background:linear-gradient(135deg,#A67C4A,#8e4e1f);color:#fff;}
.qr-action-btn.review-edit{background:linear-gradient(135deg,#8A1538,#5E0E26);color:#D4BC85;}
.qr-action-btn.review-delete{background:#fff;color:#c0392b;border:1.5px solid #c0392b;box-shadow:none;}
.qr-action-btn.review-delete:hover{background:#c0392b;color:#fff;}
.qr-nav{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;background:#faf5e8;
border-top:1.5px solid rgba(184,146,74,.3);
}
.qr-nav-btn{
background:#fff;color:#5E0E26;
border:1.5px solid #B8924A;
padding:8px 16px;border-radius:9px;cursor:pointer;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.82rem;
display:inline-flex;align-items:center;gap:6px;
transition:all .15s;
}
.qr-nav-btn:hover:not(:disabled){background:#F8F8F6;border-color:#8A6D2E;}
.qr-nav-btn:disabled{opacity:.4;cursor:not-allowed;}
.qr-nav-btn svg{width:13px;height:13px;}
.qr-nav-counter{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.82rem;
color:#5E0E26;
}
.qr-nav-counter strong{color:#8A6D2E;}
.qr-keyboard-hint{
display:flex;align-items:center;justify-content:center;gap:13px;
padding:9px;font-size:.7rem;color:#8A6D2E;font-weight:700;
flex-wrap:wrap;
}
.qr-kbd{
background:#fff;border:1.2px solid #B8924A;
padding:1px 6px;border-radius:5px;
font-family:monospace;font-size:.66rem;font-weight:700;color:#5E0E26;
}
.qr-empty{
text-align:center;padding:50px 20px;
background:#faf5e8;border:1.5px dashed #B8924A;border-radius:14px;
}
.qr-empty-icon{
width:54px;height:54px;border-radius:50%;
background:#B8924A;color:#5E0E26;
display:inline-flex;align-items:center;justify-content:center;
margin-bottom:12px;
}
.qr-empty-icon svg{width:26px;height:26px;}
.qr-empty-title{
font-family:'Cairo',sans-serif;font-weight:900;
font-size:1.05rem;color:#5E0E26;margin-bottom:5px;
}
.qr-empty-sub{font-size:.82rem;color:#8A6D2E;}
body.dark-mode .mc-sidebar{background:linear-gradient(180deg,#1a2e24 0%,#0f1f17 100%);border-color:#4a3a14;}
body.dark-mode .mc-content{background:#0f1f17;border-color:#4a3a14;}
body.dark-mode .mc-brand-title,
body.dark-mode .mc-content-title,
body.dark-mode .mc-group-label,
body.dark-mode .mc-item{color:#f0f5f2;}
body.dark-mode .mc-item.active{background:rgba(212,188,133,.1);color:#D4BC85;}
body.dark-mode .mc-stat-card{background:#1a2e24;border-color:#4a3a14;}
body.dark-mode .mc-stat-num{color:#D4BC85;}
body.dark-mode .qr-card{background:#1a2e24;border-color:#4a3a14;}
body.dark-mode .qr-q-text{background:#0f1f17;color:#f0f5f2;}
/* ═══════════════════════════════════════════
شريط الإحصائيات الحية — Live Stats
═══════════════════════════════════════════ */
.live-stats-bar{
background:linear-gradient(135deg,#fdfaf0 0%,#fff 50%,#fdfaf0 100%);
border:1.5px solid #B8924A;
border-radius:16px;
padding:14px 12px;
margin:16px 0 20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px;
position:relative;
overflow:hidden;
box-shadow:0 4px 14px rgba(184,146,74,.15);
}
.live-stats-bar::before{
content:"";position:absolute;top:-50%;right:-30%;
width:60%;height:200%;opacity:.06;
background:radial-gradient(ellipse,#B8924A 0%,transparent 70%);
pointer-events:none;
}
.live-stat{
text-align:center;position:relative;
padding:4px 2px;
border-left:1px solid rgba(184,146,74,.2);
}
.live-stat:last-child{border-left:none;}
.live-stat-icon{
width:22px;height:22px;margin:0 auto 4px;
fill:#B8924A;opacity:.85;
}
.live-stat-num{
font-family:Cairo;font-weight:900;font-size:1.15rem;
color:#5E0E26;line-height:1;
letter-spacing:-.5px;
transition:all .6s ease;
}
.live-stat-num.animating{color:#B8924A;}
.live-stat-lbl{
font-size:.64rem;color:#8A6D2E;font-weight:800;
margin-top:3px;line-height:1.2;
}
/* ═══════════════════════════════════════════
شارة رؤية 2030
═══════════════════════════════════════════ */
/* شارة رؤية قطر 2030 */
.vision-badge{
background:
radial-gradient(circle at 100% 0%, rgba(184,146,74,.2) 0%, transparent 60%),
linear-gradient(135deg,#8A1538 0%,#6b1530 100%);
color:#fff;
border:1.5px solid #B8924A;
border-radius:14px;
padding:12px;
display:flex;align-items:center;gap:10px;
position:relative;overflow:hidden;
transition:all .2s;
}
/* النسخة العريضة من شارة الرؤية */
/* ═══ شارة رؤية 2030 الصغيرة (في من نحن) ═══ */
.vision-badge-small{
background:linear-gradient(135deg,#fdfaf0 0%,#fff 100%);
border:1.5px solid #B8924A;
border-radius:12px;
padding:10px 14px;margin-bottom:16px;
display:flex;align-items:center;gap:10px;
cursor:pointer;transition:all .2s;
box-shadow:0 2px 8px rgba(184,146,74,.08);
}
.vision-badge-small:hover{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(184,146,74,.2);
}
.vbs-icon{
width:32px;height:32px;border-radius:8px;flex-shrink:0;
background:linear-gradient(135deg,#B8924A,#a68820);
display:flex;align-items:center;justify-content:center;
box-shadow:0 2px 6px rgba(184,146,74,.25);
}
.vbs-icon svg{width:18px;height:18px;fill:#fff;}
.vbs-text{flex:1;min-width:0;}
.vbs-label{font-size:.64rem;font-weight:800;color:#8A6D2E;letter-spacing:0;}
.vbs-title{font-family:Cairo;font-weight:900;font-size:.88rem;color:#5E0E26;line-height:1.1;margin-top:1px;}
.vbs-arrow{width:14px;height:14px;color:#B8924A;flex-shrink:0;}
.vision-badge-wide{
margin:20px 0;
padding:16px 18px;
border-radius:18px;
border-width:2px;
gap:14px;
cursor:pointer;
background:
radial-gradient(circle at 100% 0%, rgba(184,146,74,.28) 0%, transparent 55%),
radial-gradient(circle at 0% 100%, rgba(184,146,74,.15) 0%, transparent 50%),
linear-gradient(135deg,#8A1538 0%,#6b1530 50%,#4a0e1f 100%);
box-shadow:
0 4px 12px rgba(138,21,56,.15),
0 14px 32px rgba(138,21,56,.18);
}
.vision-badge-wide::after{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(184,146,74,.03) 30px,rgba(184,146,74,.03) 31px);
}
.vision-badge-wide:hover{
transform:translateY(-2px);
box-shadow:
0 6px 16px rgba(138,21,56,.2),
0 20px 40px rgba(138,21,56,.25);
}
.vision-badge-wide .vision-icon{
width:54px;height:54px;border-radius:14px;
box-shadow:
0 4px 12px rgba(184,146,74,.35),
inset 0 1px 0 rgba(255,255,255,.2);
}
.vision-badge-wide .vision-icon svg{width:28px;height:28px;}
.vision-badge-wide .vision-label{font-size:.68rem;letter-spacing:0;}
.vision-badge-wide .vision-title{font-size:1.1rem;margin-top:1px;}
.vision-badge-wide .vision-sub{font-size:.72rem;margin-top:3px;line-height:1.5;}
.vision-arrow{
flex-shrink:0;width:26px;height:26px;
display:flex;align-items:center;justify-content:center;
position:relative;z-index:2;
opacity:.6;transition:all .2s;
}
.vision-badge-wide:hover .vision-arrow{
opacity:1;transform:translateX(-3px);
}
.vision-arrow svg{width:20px;height:20px;}
.vision-badge:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(138,21,56,.3);
}
.vision-badge::before{
content:"";position:absolute;top:-50%;left:-20%;
width:60%;height:200%;opacity:.1;
background:radial-gradient(circle,#B8924A 0%,transparent 70%);
pointer-events:none;
}
.vision-icon{
width:42px;height:42px;border-radius:10px;flex-shrink:0;
background:linear-gradient(135deg,#B8924A,#a68820);
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(184,146,74,.3);
position:relative;z-index:2;
}
.vision-icon svg{width:22px;height:22px;fill:#3D0918;}
.vision-text{flex:1;min-width:0;position:relative;z-index:2;}
.vision-label{
font-size:.6rem;font-weight:900;color:#e8c968;
letter-spacing:0;margin-bottom:2px;
}
.vision-title{
font-family:Cairo;font-weight:900;font-size:.86rem;color:#fff;
line-height:1.2;
}
.vision-sub{
font-size:.66rem;color:rgba(255,255,255,.8);font-weight:700;
margin-top:1px;
}
/* ═══════════════════════════════════════════
شريط شركاء النجاح (في الهوم)
═══════════════════════════════════════════ */
.partners-strip{
margin:20px 0 10px;
background:linear-gradient(135deg,#fff 0%,#f5faf7 100%);
border:1.5px solid #dbe8df;
border-radius:14px;
padding:14px;
display:none; /* يظهر فقط لو في شركاء فعليون */
}
.partners-strip.has-partners{display:block;}
.ps-header{
display:flex;align-items:center;justify-content:center;gap:8px;
margin-bottom:10px;
}
.ps-header-line{
flex:1;height:1px;background:linear-gradient(90deg,transparent,#B8924A,transparent);
max-width:60px;
}
.ps-header-text{
font-family:Cairo;font-weight:900;font-size:.72rem;
color:#8A6D2E;letter-spacing:0;
display:flex;align-items:center;gap:6px;
}
.ps-header-text svg{width:13px;height:13px;fill:#B8924A;}
.ps-logos{
display:flex;align-items:center;justify-content:center;
gap:14px;flex-wrap:wrap;
}
.ps-logo{
height:36px;max-width:90px;
display:flex;align-items:center;justify-content:center;
opacity:.7;transition:all .2s;
filter:grayscale(.3);
cursor:pointer;
}
.ps-logo:hover{opacity:1;filter:grayscale(0);transform:translateY(-1px);}
.ps-logo img{max-height:100%;max-width:100%;object-fit:contain;}
.ps-logo-placeholder{
background:#e8f2ec;border:1.5px dashed #c5dbcb;
border-radius:8px;
padding:6px 12px;
font-family:Cairo;font-weight:800;font-size:.72rem;
color:#6b7c8e;
}
@media(max-width:400px){
.live-stats-bar{grid-template-columns:repeat(2,1fr);gap:10px;}
.live-stat{border-left:none;border-bottom:1px solid rgba(184,146,74,.2);padding-bottom:8px;}
.live-stat:nth-last-child(-n+2){border-bottom:none;padding-bottom:0;}
}
/* ═══════════════════════════════════════════
نظام الفصول الدراسية — Classrooms
═══════════════════════════════════════════ */
.classroom-hero{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 50%,#2d6e54 100%);
border-radius:20px;padding:22px 20px;margin-bottom:18px;
position:relative;overflow:hidden;
border:1.5px solid rgba(184,146,74,.4);
box-shadow:0 14px 32px rgba(61,38,20,.18);
color:#fff;
}
.classroom-hero::before{
content:"";position:absolute;top:-30%;right:-15%;
width:60%;height:80%;opacity:.15;
background:radial-gradient(circle,#B8924A 0%,transparent 65%);
filter:blur(40px);pointer-events:none;
}
.ch-title{
font-family:Cairo;font-weight:900;font-size:1.3rem;
margin-bottom:4px;position:relative;z-index:2;
display:flex;align-items:center;gap:8px;
}
.ch-title svg{width:22px;height:22px;fill:#e8c968;}
.ch-sub{font-size:.82rem;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:16px;position:relative;z-index:2;}
.ch-create-btn{
background:linear-gradient(135deg,#e8c968,#B8924A);color:#3D0918;
border:none;border-radius:12px;padding:12px 18px;
font-family:Cairo;font-weight:900;font-size:.95rem;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;
box-shadow:0 6px 18px rgba(184,146,74,.35);
transition:all .2s;position:relative;z-index:2;
}
.ch-create-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(184,146,74,.5);}
.ch-create-btn svg{width:18px;height:18px;fill:currentColor;}
.classrooms-list{display:flex;flex-direction:column;gap:10px;}
.classroom-card{
background:#fff;border:1.5px solid #e8f2ec;border-radius:14px;
padding:14px;transition:all .2s;position:relative;
}
.classroom-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(61,38,20,.1);border-color:#B8924A;}
.cc-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.cc-icon{
width:44px;height:44px;border-radius:12px;flex-shrink:0;
background:linear-gradient(135deg,#2d6e54,#8A1538);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 4px 10px rgba(138,21,56,.2);
}
.cc-icon svg{width:22px;height:22px;fill:currentColor;}
.cc-info{flex:1;min-width:0;}
.cc-name{font-family:Cairo;font-weight:900;font-size:1rem;color:#5E0E26;line-height:1.2;}
.cc-school{font-size:.72rem;color:#6b7c8e;font-weight:600;margin-top:2px;}
.cc-delete-btn{
background:none;border:none;cursor:pointer;
color:#c0392b;padding:6px;border-radius:8px;
transition:all .2s;opacity:.6;
}
.cc-delete-btn:hover{background:#fce8ee;opacity:1;}
.cc-delete-btn svg{width:18px;height:18px;fill:currentColor;}
.cc-code-row{
display:flex;align-items:center;gap:8px;
background:linear-gradient(135deg,#fdfaf0,#F8F8F6);
border:1.5px solid #B8924A;border-radius:10px;
padding:10px 12px;margin-top:8px;
}
.cc-code-label{
font-family:Cairo;font-weight:800;font-size:.7rem;color:#8A6D2E;
flex-shrink:0;
}
.cc-code-value{
flex:1;font-family:'Courier New',monospace;font-weight:900;font-size:1rem;
color:#5E0E26;letter-spacing:0;text-align:center;
background:#fff;border-radius:6px;padding:4px 8px;
border:1px dashed #B8924A;
}
.cc-copy-btn{
background:linear-gradient(135deg,#B8924A,#a68820);color:#fff;
border:none;padding:6px 10px;border-radius:8px;cursor:pointer;
font-family:Cairo;font-weight:900;font-size:.72rem;
display:inline-flex;align-items:center;gap:4px;transition:all .2s;
}
.cc-copy-btn:hover{transform:translateY(-1px);}
.cc-copy-btn svg{width:13px;height:13px;fill:currentColor;}
.cc-copy-btn.copied{background:linear-gradient(135deg,#3D6B53,#0f5f35);}
.cc-meta{
display:flex;align-items:center;justify-content:space-between;
margin-top:10px;padding-top:10px;border-top:1px dashed #e8f2ec;
font-size:.72rem;color:#6b7c8e;font-weight:700;
}
.cc-meta-item{display:flex;align-items:center;gap:4px;}
.cc-meta-item svg{width:13px;height:13px;fill:currentColor;}
/* زر إدارة الطلاب */
.cc-manage-btn{
width:100%;margin-top:12px;padding:10px;
background:linear-gradient(135deg,#8A1538,#5E0E26);color:#fff;
border:none;border-radius:10px;cursor:pointer;
font-family:Cairo,sans-serif;font-weight:900;font-size:.84rem;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
transition:all .2s;box-shadow:0 2px 8px rgba(138,21,56,.2);
}
.cc-manage-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(138,21,56,.35);}
.cc-manage-btn svg{width:16px;height:16px;fill:currentColor;}
/* ═══════════════════════════════════════════
شاشة إدارة طلاب الفصل
═══════════════════════════════════════════ */
.students-hero{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 100%);
border-radius:18px;padding:20px;margin-bottom:18px;
position:relative;overflow:hidden;
border:1.5px solid rgba(184,146,74,.4);
color:#fff;
}
.students-hero::before{
content:"";position:absolute;top:-30%;right:-15%;
width:60%;height:80%;opacity:.12;
background:radial-gradient(circle,#B8924A 0%,transparent 65%);
filter:blur(40px);pointer-events:none;
}
.sh-label{
font-size:.68rem;font-weight:800;color:#e8c968;
letter-spacing:0;margin-bottom:3px;
}
.sh-class-name{
font-family:Cairo;font-weight:900;font-size:1.3rem;margin-bottom:3px;
position:relative;z-index:2;
}
.sh-school{font-size:.82rem;opacity:.82;margin-bottom:14px;position:relative;z-index:2;}
.sh-code-pill{
display:inline-flex;align-items:center;gap:6px;
background:rgba(184,146,74,.2);border:1px solid #B8924A;
padding:5px 12px;border-radius:999px;
font-family:'Courier New',monospace;font-weight:900;
letter-spacing:0;color:#e8c968;font-size:.82rem;
position:relative;z-index:2;
}
.sh-code-pill svg{width:12px;height:12px;fill:currentColor;cursor:pointer;}
.students-actions{
display:flex;gap:8px;margin-bottom:16px;
}
.add-student-btn{
flex:1;padding:12px;
background:linear-gradient(135deg,#B8924A,#a68820);color:#3D0918;
border:none;border-radius:12px;cursor:pointer;
font-family:Cairo,sans-serif;font-weight:900;font-size:.88rem;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
box-shadow:0 4px 12px rgba(184,146,74,.3);transition:all .2s;
}
.add-student-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,146,74,.45);}
.add-student-btn svg{width:16px;height:16px;fill:currentColor;}
.students-count-bar{
background:#fff;border:1.5px solid #e8f2ec;border-radius:12px;
padding:10px 14px;margin-bottom:10px;
display:flex;align-items:center;justify-content:space-between;
font-family:Cairo;font-weight:900;font-size:.88rem;color:#5E0E26;
}
.students-count-bar .sc-num{color:#B8924A;}
.students-list{display:flex;flex-direction:column;gap:8px;}
.student-item{
background:#fff;border:1.5px solid #e8f2ec;border-radius:12px;
padding:10px 12px;
display:flex;align-items:center;gap:10px;
transition:all .2s;
}
.student-item:hover{border-color:#B8924A;box-shadow:0 4px 12px rgba(184,146,74,.1);}
.student-avatar{
width:36px;height:36px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#2d6e54,#8A1538);color:#fff;
display:flex;align-items:center;justify-content:center;
font-family:Cairo;font-weight:900;font-size:.9rem;
box-shadow:0 2px 6px rgba(138,21,56,.2);
}
.student-info{flex:1;min-width:0;}
.student-name{
font-family:Cairo;font-weight:900;font-size:.92rem;color:#5E0E26;
line-height:1.2;
}
.student-meta{
font-size:.7rem;color:#6b7c8e;font-weight:700;margin-top:2px;
display:flex;align-items:center;gap:8px;
}
.student-badge{
font-size:.6rem;font-weight:900;padding:2px 8px;border-radius:999px;
}
.student-badge.joined{background:#EBF2EE;color:#3D6B53;}
.student-badge.pending{background:#fff3c4;color:#7a5c10;}
.student-delete{
background:none;border:none;cursor:pointer;
color:#c0392b;padding:6px;border-radius:8px;
transition:all .2s;opacity:.6;
}
.student-delete:hover{background:#fce8ee;opacity:1;}
.student-delete svg{width:16px;height:16px;fill:currentColor;}
.students-empty{
text-align:center;padding:40px 20px;color:#6b7c8e;
background:#fff;border-radius:14px;border:1.5px dashed #dbe8df;
}
.students-empty svg{width:56px;height:56px;fill:#dbe8df;margin-bottom:10px;}
.students-empty-text{font-family:Cairo;font-weight:800;font-size:.9rem;color:#5E0E26;margin-bottom:4px;}
.students-empty-sub{font-size:.76rem;}
/* مودال إضافة طالب */
.add-student-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(10,20,40,.82);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
}
.add-student-modal.active{display:flex;}
.add-student-content{
background:#fff;max-width:400px;width:100%;
border-radius:18px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:badgePop .4s cubic-bezier(.34,1.5,.64,1);
}
.asm-header{
background:linear-gradient(135deg,#8A1538,#5E0E26);color:#fff;
padding:18px 20px;text-align:center;
}
.asm-header svg{width:36px;height:36px;fill:#e8c968;margin-bottom:4px;}
.asm-header h3{font-family:Cairo;font-weight:900;font-size:1.1rem;}
.asm-body{padding:20px;}
.asm-hint{
background:#F8F8F6;border:1px solid #B8924A;border-radius:10px;
padding:10px 12px;margin-bottom:14px;
font-size:.78rem;color:#8A6D2E;font-weight:600;line-height:1.5;
display:flex;gap:8px;
}
.asm-hint svg{width:16px;height:16px;fill:currentColor;flex-shrink:0;margin-top:1px;}
/* ═══════════════════════════════════════════
مودال الانضمام لفصل (للطالب)
═══════════════════════════════════════════ */
.join-class-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(10,20,40,.82);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
}
.join-class-modal.active{display:flex;}
.join-class-content{
background:#fff;max-width:400px;width:100%;
border-radius:18px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:badgePop .4s cubic-bezier(.34,1.5,.64,1);
}
.jcm-header{
background:linear-gradient(135deg,#B8924A,#a68820);color:#3D0918;
padding:20px;text-align:center;
}
.jcm-header svg{width:40px;height:40px;fill:#3D0918;margin-bottom:6px;}
.jcm-header h3{font-family:Cairo;font-weight:900;font-size:1.15rem;}
.jcm-header p{font-size:.82rem;margin-top:3px;opacity:.85;}
.jcm-body{padding:20px;}
.jcm-code-input{
width:100%;padding:14px;text-align:center;
font-family:'Courier New',monospace;font-weight:900;font-size:1.3rem;
letter-spacing:0;color:#5E0E26;
border:2px solid #dbe8df;border-radius:12px;
text-transform:uppercase;
transition:all .2s;
}
.jcm-code-input:focus{outline:none;border-color:#B8924A;box-shadow:0 0 0 3px rgba(184,146,74,.15);}
/* بطاقة "فصلي الحالي" للطالب */
.my-class-card{
background:linear-gradient(135deg,#fdfaf0 0%,#fff 100%);
border:1.5px solid #B8924A;
border-radius:14px;padding:14px;margin-bottom:16px;
display:flex;align-items:center;gap:12px;
cursor:pointer;transition:all .2s;
}
.my-class-card:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,146,74,.2);}
.mcc-icon{
width:48px;height:48px;border-radius:12px;flex-shrink:0;
background:linear-gradient(135deg,#B8924A,#a68820);color:#fff;
display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 10px rgba(184,146,74,.3);
}
.mcc-icon svg{width:26px;height:26px;fill:currentColor;}
.mcc-info{flex:1;min-width:0;}
.mcc-label{font-size:.66rem;font-weight:800;color:#8A6D2E;letter-spacing:0;}
.mcc-name{font-family:Cairo;font-weight:900;font-size:1rem;color:#5E0E26;margin-top:1px;line-height:1.2;}
.mcc-teacher{font-size:.72rem;color:#6b7c8e;font-weight:700;margin-top:2px;}
.mcc-leave{
background:none;border:none;cursor:pointer;
color:#c0392b;padding:6px;border-radius:8px;
opacity:.5;transition:all .2s;
}
.mcc-leave:hover{background:#fce8ee;opacity:1;}
.mcc-leave svg{width:16px;height:16px;fill:currentColor;}
/* نموذج إنشاء فصل */
.create-classroom-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(10,20,40,.82);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
}
.create-classroom-modal.active{display:flex;}
.create-classroom-content{
background:#fff;max-width:400px;width:100%;
border-radius:20px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
animation:badgePop .4s cubic-bezier(.34,1.5,.64,1);
}
.create-classroom-header{
background:linear-gradient(135deg,#5E0E26,#8A1538);color:#fff;
padding:22px 20px;text-align:center;
}
.create-classroom-header svg{width:40px;height:40px;fill:#e8c968;margin-bottom:6px;}
.create-classroom-header h3{font-family:Cairo;font-weight:900;font-size:1.2rem;margin-bottom:3px;}
.create-classroom-header p{font-size:.8rem;opacity:.85;}
.create-classroom-body{padding:20px;}
.cc-form-field{margin-bottom:14px;}
.cc-form-field label{
font-family:Cairo;font-weight:800;font-size:.82rem;color:#5E0E26;
display:block;margin-bottom:5px;
}
.cc-form-field input{
width:100%;padding:11px 14px;
border:1.5px solid #e8f2ec;border-radius:10px;
font-family:Cairo;font-weight:600;font-size:.92rem;
transition:all .2s;
}
.cc-form-field input:focus{outline:none;border-color:#B8924A;box-shadow:0 0 0 3px rgba(184,146,74,.15);}
.cc-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;}
.cc-form-btn{
padding:11px;border-radius:10px;border:none;cursor:pointer;
font-family:Cairo;font-weight:900;font-size:.88rem;
transition:all .2s;
}
.cc-form-btn.primary{background:linear-gradient(135deg,#8A1538,#5E0E26);color:#fff;}
.cc-form-btn.outline{background:#fff;color:#5E0E26;border:1.5px solid #dbe8df;}
.cc-form-btn:hover{transform:translateY(-1px);}
.classrooms-empty{
text-align:center;padding:40px 20px;color:#6b7c8e;
}
.classrooms-empty svg{width:60px;height:60px;fill:#dbe8df;margin-bottom:10px;}
.classrooms-empty-text{font-family:Cairo;font-weight:800;font-size:.92rem;margin-bottom:4px;color:#5E0E26;}
.classrooms-empty-sub{font-size:.78rem;}
/* ═══════════════════════════════════════════
نظام النسخ الاحتياطي — Backup System
═══════════════════════════════════════════ */
.backup-stat-card{
background:#fff;border:1.5px solid #e8f2ec;border-radius:12px;
padding:12px;text-align:center;
transition:all .2s;
}
.backup-stat-card:hover{border-color:#B8924A;transform:translateY(-2px);box-shadow:0 6px 18px rgba(138,21,56,.08);}
.backup-stat-icon{
width:38px;height:38px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
margin:0 auto 6px;
}
.backup-stat-icon svg{width:20px;height:20px;}
.backup-stat-num{
font-family:"Cairo",sans-serif;font-weight:900;font-size:1.4rem;
color:#5E0E26;line-height:1;
}
.backup-stat-lbl{
font-size:.72rem;color:#6b7c8e;font-weight:700;margin-top:3px;
}
.backup-section-card{
background:#fff;border:1.5px solid #e8f2ec;border-radius:14px;
padding:16px;
}
.backup-section-header{
display:flex;align-items:flex-start;gap:12px;
}
.backup-section-header svg{flex-shrink:0;margin-top:2px;}
.backup-section-title{
font-family:"Cairo",sans-serif;font-weight:900;color:#5E0E26;font-size:1rem;
margin-bottom:2px;
}
.backup-section-sub{
font-size:.76rem;color:#6b7c8e;font-weight:600;line-height:1.5;
}
.backup-checkbox-row{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border:1px solid #e8f2ec;border-radius:8px;
font-size:.86rem;font-weight:700;color:#8A1538;cursor:pointer;
transition:all .15s;
font-family:"Tajawal",sans-serif;
}
.backup-checkbox-row:hover{background:#f5faf7;border-color:#c5dbcb;}
.backup-checkbox-row input[type="checkbox"]{
width:16px;height:16px;accent-color:#8A1538;cursor:pointer;flex-shrink:0;
}
.backup-btn-primary, .backup-btn-danger{
width:100%;padding:12px 16px;margin-top:14px;
border:none;border-radius:10px;cursor:pointer;
font-family:"Cairo",sans-serif;font-weight:900;font-size:.88rem;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:all .2s;
}
.backup-btn-primary{
background:linear-gradient(135deg,#3D6B53,#145a37);color:#fff;
box-shadow:0 4px 14px rgba(61,107,83,.25);
}
.backup-btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(61,107,83,.4);}
.backup-btn-primary:disabled{opacity:.6;cursor:not-allowed;}
.backup-btn-danger{
background:linear-gradient(135deg,#c0392b,#8b1a1a);color:#fff;
box-shadow:0 4px 14px rgba(192,57,43,.25);
}
.backup-btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(192,57,43,.4);}
.backup-btn-danger:disabled{opacity:.4;cursor:not-allowed;background:#ccc;}
.backup-file-label{
display:flex;align-items:center;gap:10px;
padding:12px 14px;border:2px dashed #c5dbcb;border-radius:10px;
cursor:pointer;background:#f5faf7;color:#8A1538;
font-family:"Cairo",sans-serif;font-weight:800;font-size:.86rem;
transition:all .15s;
}
.backup-file-label:hover{border-color:#8A1538;background:#e8f2ec;}
.backup-file-label.has-file{border-color:#3D6B53;background:#EBF2EE;color:#5E0E26;border-style:solid;}
/* ═══════════════════════════════════════════════════
Screen Landing — صفحة الهبوط للزوار
تظهر فقط للمستخدم غير المسجل
═══════════════════════════════════════════════════ */
#screen-landing{padding:0;background:#F8F8F6;display:none;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#screen-landing.active{display:block}
.landing-hero{
position:relative;min-height:78vh;
display:flex;align-items:center;justify-content:center;
padding:60px 24px 80px;overflow:hidden;
background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(212,188,133,0.15),transparent 70%),
radial-gradient(ellipse 60% 40% at 20% 100%,rgba(184,146,74,0.08),transparent 70%),
#F8F8F6;
}
.landing-hero::before{
content:'';position:absolute;inset:0;
background-image:radial-gradient(circle at 1px 1px,rgba(138,21,56,0.04) 1px,transparent 0);
background-size:32px 32px;pointer-events:none;
}
.landing-hero-inner{max-width:980px;margin:0 auto;text-align:center;position:relative;z-index:2}
.landing-eyebrow{
display:inline-flex;align-items:center;gap:10px;
background:rgba(184,146,74,0.12);border:1px solid rgba(184,146,74,0.3);
color:#8A6D2E;padding:8px 18px;border-radius:100px;
font-weight:700;font-size:0.85rem;margin-bottom:32px;
font-family:'Tajawal','Cairo',sans-serif;
text-rendering:optimizeLegibility;
}
.landing-eyebrow .lp-dot{
width:8px;height:8px;border-radius:50%;background:#3D6B53;
box-shadow:0 0 10px #3D6B53;animation:lpPulse 2s infinite;
}
@keyframes lpPulse{0%,100%{opacity:1}50%{opacity:0.4}}
#screen-landing h1{
font-family:'Tajawal','Cairo',sans-serif;
font-size:clamp(2.3rem,6vw,4.5rem);font-weight:800;
color:#5E0E26;line-height:1.25;letter-spacing:0;
margin:0 0 24px;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
#screen-landing h1 .lp-highlight{
position:relative;display:inline-block;color:#B8924A;
}
#screen-landing h1 .lp-highlight::after{
content:'';position:absolute;bottom:-6px;left:0;right:0;height:12px;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,8 Q50,2 100,7 T198,5' stroke='%23c9a227' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
background-size:100% 100%;
}
.landing-sub{
font-size:clamp(1.05rem,2vw,1.3rem);color:#8A1538;
max-width:720px;margin:0 auto 40px;font-weight:500;line-height:1.7;
font-family:'Tajawal',sans-serif;
}
.landing-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lp-btn-primary{
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;border:none;padding:16px 36px;border-radius:14px;
font-family:'Tajawal','Cairo',sans-serif;font-weight:800;font-size:1.05rem;
cursor:pointer;box-shadow:0 10px 40px rgba(184,146,74,0.25);
transition:all 0.3s;display:inline-flex;align-items:center;gap:10px;
text-rendering:optimizeLegibility;
}
.lp-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(184,146,74,0.4)}
.lp-btn-secondary{
background:transparent;color:#8A1538;border:2px solid #8A1538;
padding:16px 32px;border-radius:14px;
font-family:'Cairo',sans-serif;font-weight:700;font-size:1.05rem;
cursor:pointer;transition:all 0.3s;
}
.lp-btn-secondary:hover{background:#8A1538;color:#FAFAF8;transform:translateY(-3px)}
/* ─── Sections ─── */
.lp-section{padding:80px 24px;position:relative}
.lp-container{max-width:1180px;margin:0 auto}
.lp-section-eyebrow{
display:inline-block;color:#B8924A;font-family:'Tajawal','Cairo',sans-serif;
font-weight:800;font-size:0.85rem;letter-spacing:0;
margin-bottom:14px;text-rendering:optimizeLegibility;
}
.lp-section-title{
font-family:'Tajawal','Cairo',sans-serif;
font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;
color:#5E0E26;letter-spacing:0;line-height:1.4;margin:0 0 18px;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
.lp-section-sub{
font-size:1.1rem;color:#8A1538;max-width:680px;opacity:0.85;
font-family:'Tajawal',sans-serif;line-height:1.7;
}
.lp-section-head{margin-bottom:50px;text-align:center}
.lp-section-head .lp-section-sub{margin:0 auto}
@media(max-width:600px){.lp-section-head{margin-bottom:30px}}
/* ─── Stats ─── */
.lp-stats-section{
background:linear-gradient(180deg,#F8F8F6,#faf5e8);
border-top:1px solid rgba(184,146,74,0.1);
border-bottom:1px solid rgba(184,146,74,0.1);
}
.lp-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
@media(max-width:600px){.lp-stats-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.lp-stat-card{
background:#FAFAF8;border:1px solid rgba(184,146,74,0.2);
border-radius:20px;padding:28px 20px;text-align:center;
position:relative;overflow:hidden;transition:all 0.4s;
}
.lp-stat-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,#D4BC85,#B8924A);
}
.lp-stat-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(138,21,56,0.18);border-color:#B8924A}
@media(max-width:600px){.lp-stat-card{padding:18px 12px;border-radius:16px}}
.lp-stat-icon{
width:50px;height:50px;
background:linear-gradient(135deg,#8A1538,#5E0E26);
border-radius:14px;display:flex;align-items:center;justify-content:center;
margin:0 auto 14px;color:#D4BC85;
box-shadow:0 10px 30px rgba(138,21,56,0.12);
}
.lp-stat-icon svg{width:24px;height:24px}
@media(max-width:600px){
.lp-stat-icon{width:40px;height:40px;border-radius:11px;margin-bottom:10px}
.lp-stat-icon svg{width:18px;height:18px}
}
.lp-stat-num{
font-family:'Tajawal','Cairo',sans-serif;font-size:2.4rem;font-weight:800;
color:#5E0E26;line-height:1.1;margin-bottom:6px;
text-rendering:optimizeLegibility;
}
.lp-stat-num .lp-plus{color:#B8924A}
.lp-stat-label{font-weight:700;color:#8A1538;font-size:0.95rem;font-family:'Tajawal',sans-serif}
@media(max-width:600px){
.lp-stat-num{font-size:1.7rem;margin-bottom:4px}
.lp-stat-label{font-size:0.78rem}
}
/* ─── Tools ─── */
.lp-tools-section{background:#FAFAF8}
.lp-tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
@media(max-width:600px){.lp-tools-grid{grid-template-columns:repeat(2,1fr);gap:12px}}
.lp-tool-card{
background:#F8F8F6;border:2px solid transparent;border-radius:20px;
padding:24px 20px;position:relative;transition:all 0.4s;overflow:hidden;
}
.lp-tool-card::before{
content:'';position:absolute;top:0;right:0;width:140px;height:140px;
background:radial-gradient(circle,rgba(212,188,133,0.15),transparent 70%);
border-radius:50%;transition:all 0.6s;
}
.lp-tool-card:hover{transform:translateY(-6px);border-color:#B8924A;box-shadow:0 20px 60px rgba(138,21,56,0.18)}
.lp-tool-card:hover::before{transform:scale(1.5)}
@media(max-width:600px){.lp-tool-card{padding:18px 14px;border-radius:16px}}
.lp-tool-icon{
width:48px;height:48px;
background:linear-gradient(135deg,#8A1538,#3D0918);
border-radius:14px;display:flex;align-items:center;justify-content:center;
color:#D4BC85;margin-bottom:14px;position:relative;border:1px solid #B8924A;
}
.lp-tool-icon svg{width:24px;height:24px}
@media(max-width:600px){
.lp-tool-icon{width:42px;height:42px;border-radius:12px;margin-bottom:12px}
.lp-tool-icon svg{width:20px;height:20px}
}
.lp-tool-name{
font-family:'Tajawal','Cairo',sans-serif;font-size:1.15rem;font-weight:800;
color:#5E0E26;margin-bottom:8px;position:relative;line-height:1.4;
text-rendering:optimizeLegibility;
}
.lp-tool-desc{color:#8A1538;font-size:0.92rem;line-height:1.6;position:relative;font-family:'Tajawal',sans-serif}
@media(max-width:600px){
.lp-tool-name{font-size:0.95rem;margin-bottom:6px}
.lp-tool-desc{font-size:0.78rem;line-height:1.55}
}
/* ─── Teacher Message ─── */
.lp-message-section{
background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(184,146,74,0.08),transparent 70%),#3D0918;
color:#FAFAF8;position:relative;overflow:hidden;
}
.lp-message-inner{max-width:880px;margin:0 auto;text-align:center;position:relative}
.lp-quote-mark{font-family:'Amiri',serif;font-size:7rem;line-height:0.8;color:#B8924A;opacity:0.3;margin-bottom:-20px}
.lp-message-text{
font-family:'Amiri',serif;
font-size:clamp(1.2rem,2.3vw,1.7rem);line-height:1.9;
color:#FAFAF8;margin-bottom:36px;font-weight:400;
}
.lp-message-text strong{color:#D4BC85;font-weight:700}
.lp-message-author{
display:inline-flex;align-items:center;gap:14px;padding:12px 22px;
background:rgba(212,188,133,0.08);border:1px solid rgba(212,188,133,0.2);
border-radius:100px;
}
.lp-author-avatar{
width:46px;height:46px;
background:linear-gradient(135deg,#D4BC85,#B8924A);border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.2rem;color:#3D0918;
}
.lp-author-name{font-family:'Cairo',sans-serif;font-weight:800;color:#D4BC85;font-size:1.15rem}
/* ─── FAQ ─── */
.lp-faq-section{background:#F8F8F6}
.lp-faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.lp-faq-item{
background:#FAFAF8;border:1px solid rgba(184,146,74,0.2);
border-radius:16px;overflow:hidden;transition:all 0.3s;
}
.lp-faq-item:hover{border-color:#B8924A}
.lp-faq-item[open]{box-shadow:0 10px 30px rgba(138,21,56,0.12);border-color:#B8924A}
.lp-faq-q{
padding:20px 26px;cursor:pointer;
font-family:'Tajawal','Cairo',sans-serif;font-weight:700;font-size:1.05rem;
color:#5E0E26;display:flex;align-items:center;justify-content:space-between;gap:18px;
list-style:none;line-height:1.5;
text-rendering:optimizeLegibility;
}
.lp-faq-q::-webkit-details-marker{display:none}
.lp-faq-q-icon{
width:32px;height:32px;flex-shrink:0;
background:rgba(184,146,74,0.12);border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#B8924A;transition:all 0.3s;
}
.lp-faq-item[open] .lp-faq-q-icon{background:#B8924A;color:#FAFAF8;transform:rotate(45deg)}
.lp-faq-q-icon svg{width:16px;height:16px}
.lp-faq-a{padding:0 26px 22px;color:#8A1538;font-size:0.98rem;line-height:1.8;font-family:'Tajawal',sans-serif}
/* ─── Final CTA ─── */
.lp-cta-section{
padding:80px 24px;text-align:center;
background:radial-gradient(ellipse at center,rgba(212,188,133,0.2),transparent 70%),linear-gradient(135deg,#5E0E26,#3D0918);
color:#FAFAF8;position:relative;overflow:hidden;
}
.lp-cta-inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.lp-cta-section h2{
font-family:'Tajawal','Cairo',sans-serif;
font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;
color:#FAFAF8;margin:0 0 18px;letter-spacing:0;line-height:1.4;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
.lp-cta-section h2 span{color:#D4BC85}
.lp-cta-section p{font-size:1.15rem;color:#faf5e8;opacity:0.9;margin-bottom:36px;font-family:'Tajawal',sans-serif}
@media(max-width:768px){
.lp-section{padding:50px 14px}
.landing-hero{min-height:60vh;padding:30px 14px 50px}
.landing-cta-row{flex-direction:column;align-items:stretch}
.landing-cta-row button{width:100%}
}
/* ═══════════════════════════════════════════════════
تبويب صفحة الهبوط في لوحة التحكم
═══════════════════════════════════════════════════ */
.lp-admin-section{
background:linear-gradient(180deg,#FAFAF8,#faf5e8);
border:2px solid #B8924A;border-radius:16px;
padding:18px;margin-bottom:18px;
}
.lp-admin-section-title{
display:flex;align-items:center;gap:10px;
font-family:'Cairo',sans-serif;font-weight:900;
color:#5E0E26;font-size:1.05rem;
margin-bottom:14px;padding-bottom:10px;
border-bottom:2px solid #B8924A;
}
.lp-admin-section-title-icon{
width:32px;height:32px;
background:linear-gradient(135deg,#8A1538,#5E0E26);
border-radius:10px;display:flex;align-items:center;justify-content:center;
color:#D4BC85;flex-shrink:0;
}
.lp-admin-section-title-icon svg{width:16px;height:16px}
.lp-admin-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:12px;
}
.lp-admin-field{
display:flex;flex-direction:column;gap:6px;
}
.lp-admin-field-full{grid-column:1/-1}
.lp-admin-label{
font-family:'Cairo',sans-serif;font-weight:700;
color:#8A1538;font-size:.85rem;
display:flex;align-items:center;justify-content:space-between;
}
.lp-admin-label-hint{
color:#999;font-size:.7rem;font-weight:500;
}
.lp-admin-input,
.lp-admin-textarea{
background:#fff;border:1.5px solid #B8924A;
border-radius:10px;padding:10px 14px;
font-family:'Tajawal','Cairo',sans-serif;font-size:.92rem;
color:#5E0E26;width:100%;
transition:all 0.2s;
outline:none;
}
.lp-admin-input:focus,
.lp-admin-textarea:focus{
border-color:#8A6D2E;
box-shadow:0 0 0 3px rgba(184,146,74,0.15);
}
.lp-admin-textarea{
resize:vertical;min-height:70px;line-height:1.6;
}
.lp-admin-input.lp-input-num{
text-align:center;font-weight:900;font-size:1.1rem;color:#5E0E26;
}
.lp-admin-toolbar{
display:flex;gap:10px;flex-wrap:wrap;
background:#5E0E26;padding:14px;border-radius:14px;
margin:18px 0 0;
position:sticky;bottom:90px;z-index:5;
box-shadow:0 8px 24px rgba(94,14,38,0.3);
}
.lp-admin-btn{
flex:1;min-width:140px;
padding:12px 20px;border-radius:10px;border:none;
font-family:'Cairo',sans-serif;font-weight:800;font-size:.9rem;
cursor:pointer;transition:all 0.2s;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.lp-admin-btn-save{
background:linear-gradient(135deg,#D4BC85,#B8924A);color:#5E0E26;
box-shadow:0 4px 12px rgba(184,146,74,0.3);
}
.lp-admin-btn-save:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(184,146,74,0.4)}
.lp-admin-btn-reset{
background:transparent;color:#FAFAF8;border:1.5px solid #faf5e8;
}
.lp-admin-btn-reset:hover{background:#faf5e8;color:#5E0E26}
.lp-admin-btn-preview{
background:#3D6B53;color:#FAFAF8;
}
.lp-admin-btn-preview:hover{background:#155f3a}
.lp-admin-btn svg{width:16px;height:16px}
.lp-admin-status{
background:#EBF2EE;border:1px solid #3D6B53;
color:#155f3a;padding:8px 14px;border-radius:10px;
font-family:'Cairo',sans-serif;font-weight:700;font-size:.85rem;
margin-bottom:14px;
display:none;align-items:center;gap:8px;
}
.lp-admin-status.show{display:flex}
.lp-admin-status.error{
background:#fdecec;border-color:#c0392b;color:#922b1f;
}
.lp-admin-status svg{width:16px;height:16px;flex-shrink:0}
.lp-admin-info-banner{
background:linear-gradient(135deg,#F8F8F6,#faf5e8);
border:1.5px solid #B8924A;
border-radius:12px;padding:12px 14px;margin-bottom:14px;
display:flex;align-items:flex-start;gap:10px;
font-family:'Tajawal',sans-serif;font-size:.85rem;color:#8A1538;line-height:1.6;
}
.lp-admin-info-banner svg{width:18px;height:18px;color:#B8924A;flex-shrink:0;margin-top:2px}
.lp-admin-stat-row{
background:#fff;border:1px solid rgba(184,146,74,0.3);
border-radius:12px;padding:12px;
display:grid;grid-template-columns:80px 1fr 1fr;gap:10px;align-items:center;
}
.lp-admin-stat-num-input{
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.3rem;
text-align:center;color:#5E0E26;
background:#F8F8F6;border:1.5px solid #B8924A;border-radius:8px;
padding:8px;outline:none;
}
.lp-admin-stat-label-input{
background:#fff;border:1.5px solid #B8924A;border-radius:8px;
padding:8px 12px;font-family:'Tajawal',sans-serif;font-weight:700;
color:#5E0E26;outline:none;
}
.lp-admin-stat-checkbox{
display:flex;align-items:center;gap:8px;
font-family:'Cairo',sans-serif;font-weight:700;color:#8A1538;font-size:.85rem;
cursor:pointer;
}
.lp-admin-stat-checkbox input{width:18px;height:18px;cursor:pointer;accent-color:#B8924A}
@media(max-width:600px){
.lp-admin-stat-row{grid-template-columns:60px 1fr;gap:8px}
.lp-admin-stat-checkbox{grid-column:1/-1;justify-content:flex-end}
.lp-admin-toolbar{flex-direction:column;bottom:90px}
.lp-admin-btn{width:100%}
}
/* ═══════════════════════════════════════════════════
🔔 نقاط الإشعارات على التبويبات
═══════════════════════════════════════════════════ */
.admin-tab{position:relative}
.admin-tab-badge{
position:absolute;top:-6px;left:-6px;
min-width:20px;height:20px;
background:#c0392b;color:#fff;
border-radius:100px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.7rem;
display:none;align-items:center;justify-content:center;
padding:0 5px;
border:2px solid #fff;
box-shadow:0 2px 6px rgba(192,57,43,0.4);
animation:lpBadgePulse 2s infinite;
}
.admin-tab-badge.show{display:flex}
@keyframes lpBadgePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.1)}
}
/* أقسام الأدمن الموسعة */
.lp-tool-row, .lp-faq-row{
background:#fff;
border:1px solid rgba(184,146,74,0.3);
border-radius:12px;
padding:14px;
margin-bottom:10px;
transition:all 0.2s;
}
.lp-tool-row.disabled, .lp-faq-row.disabled{
opacity:0.55;
background:#faf5e8;
}
.lp-tool-row-header, .lp-faq-row-header{
display:flex;align-items:center;gap:10px;
margin-bottom:10px;padding-bottom:10px;
border-bottom:1px dashed rgba(184,146,74,0.3);
}
.lp-tool-row-num, .lp-faq-row-num{
width:28px;height:28px;
background:linear-gradient(135deg,#8A1538,#5E0E26);
color:#D4BC85;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.85rem;
flex-shrink:0;
}
.lp-tool-row-title, .lp-faq-row-title{
font-family:'Cairo',sans-serif;font-weight:800;
color:#5E0E26;font-size:.95rem;flex:1;
}
.lp-row-toggle{
display:flex;align-items:center;gap:8px;
cursor:pointer;user-select:none;
font-family:'Cairo',sans-serif;font-weight:700;
color:#8A1538;font-size:.82rem;
}
.lp-row-toggle input{
width:42px;height:24px;
appearance:none;-webkit-appearance:none;
background:#ddd;border-radius:100px;
position:relative;cursor:pointer;
transition:all 0.2s;
}
.lp-row-toggle input:checked{
background:linear-gradient(135deg,#3D6B53,#155f3a);
}
.lp-row-toggle input::before{
content:'';position:absolute;
width:18px;height:18px;border-radius:50%;
background:#fff;
top:3px;right:3px;
transition:all 0.2s;
box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.lp-row-toggle input:checked::before{
right:auto;left:3px;
}
.lp-tool-row-fields, .lp-faq-row-fields{
display:grid;
grid-template-columns:1fr 2fr;
gap:10px;
}
.lp-tool-row-fields .lp-admin-input,
.lp-tool-row-fields .lp-admin-textarea,
.lp-faq-row-fields .lp-admin-input,
.lp-faq-row-fields .lp-admin-textarea{
font-size:.88rem;padding:8px 12px;
}
@media(max-width:600px){
.lp-tool-row-fields, .lp-faq-row-fields{grid-template-columns:1fr;gap:8px}
}
/* ═══════════════════════════════════════════════════
Review Prompt Modal — مودال طلب التقييم اللبق
═══════════════════════════════════════════════════ */
.rp-overlay{
position:fixed;inset:0;
background:rgba(94,14,38,0.65);
backdrop-filter:blur(6px);
z-index:99998;
display:flex;align-items:center;justify-content:center;
padding:20px;
opacity:0;pointer-events:none;
transition:opacity 0.3s ease;
font-family:'Tajawal','Cairo',sans-serif;
}
.rp-overlay.show{opacity:1;pointer-events:auto}
.rp-modal{
background:#FAFAF8;
border:2px solid #B8924A;
border-radius:24px;
max-width:480px;width:100%;
padding:36px 30px 28px;
text-align:center;
box-shadow:0 30px 80px rgba(94,14,38,0.4);
transform:scale(0.85);
transition:transform 0.3s ease;
position:relative;
overflow:hidden;
direction:rtl;
}
.rp-overlay.show .rp-modal{transform:scale(1)}
.rp-modal::before{
content:'';position:absolute;top:0;left:0;right:0;height:6px;
background:linear-gradient(90deg,#D4BC85,#B8924A,#D4BC85);
}
/* تأثير لامع */
.rp-modal::after{
content:'';position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:radial-gradient(ellipse at center,rgba(212,188,133,0.08) 0%,transparent 50%);
pointer-events:none;
animation:rpGlow 3s ease-in-out infinite;
}
@keyframes rpGlow{
0%,100%{opacity:.5}
50%{opacity:1}
}
.rp-icon{
width:80px;height:80px;
margin:0 auto 18px;
background:linear-gradient(135deg,#D4BC85,#B8924A);
border:3px solid #FAFAF8;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#5E0E26;
box-shadow:0 10px 30px rgba(184,146,74,0.4),0 0 0 6px rgba(184,146,74,0.15);
position:relative;z-index:2;
animation:rpPulse 2s ease-in-out infinite;
}
@keyframes rpPulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.05)}
}
.rp-icon svg{width:42px;height:42px}
.rp-eyebrow{
display:inline-block;
background:rgba(184,146,74,0.12);
border:1px solid rgba(184,146,74,0.3);
color:#8A6D2E;
font-family:'Cairo',sans-serif;
font-weight:800;font-size:.78rem;
padding:5px 14px;border-radius:100px;
margin-bottom:14px;
letter-spacing:0;
position:relative;z-index:2;
}
.rp-title{
font-family:'Cairo',sans-serif;
font-weight:900;font-size:1.4rem;
color:#5E0E26;line-height:1.4;
margin:0 0 14px;
position:relative;z-index:2;
}
.rp-title strong{
color:#B8924A;
background:linear-gradient(135deg,#B8924A,#8A6D2E);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
}
.rp-text{
color:#8A1538;
font-size:1.02rem;
line-height:1.8;
margin:0 0 24px;
font-family:'Tajawal',sans-serif;
position:relative;z-index:2;
}
.rp-text strong{
color:#5E0E26;
font-weight:800;
}
.rp-stars-preview{
display:flex;justify-content:center;gap:6px;
margin-bottom:24px;
position:relative;z-index:2;
}
.rp-stars-preview svg{
width:28px;height:28px;
color:#B8924A;
filter:drop-shadow(0 2px 4px rgba(184,146,74,0.3));
animation:rpStarBounce 2s ease-in-out infinite;
}
.rp-stars-preview svg:nth-child(1){animation-delay:0s}
.rp-stars-preview svg:nth-child(2){animation-delay:.1s}
.rp-stars-preview svg:nth-child(3){animation-delay:.2s}
.rp-stars-preview svg:nth-child(4){animation-delay:.3s}
.rp-stars-preview svg:nth-child(5){animation-delay:.4s}
@keyframes rpStarBounce{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-4px) scale(1.1)}
}
.rp-actions{
display:flex;flex-direction:column;gap:10px;
position:relative;z-index:2;
}
.rp-btn-primary{
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;
border:none;
padding:15px 28px;
border-radius:14px;
font-family:'Cairo',sans-serif;
font-weight:800;
font-size:1.02rem;
cursor:pointer;
box-shadow:0 8px 24px rgba(184,146,74,0.3);
transition:all 0.3s;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.rp-btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 12px 32px rgba(184,146,74,0.45);
}
.rp-btn-primary svg{width:18px;height:18px}
.rp-btn-later{
background:transparent;
color:#8A1538;
border:1.5px solid rgba(138,21,56,0.3);
padding:11px 24px;
border-radius:12px;
font-family:'Cairo',sans-serif;
font-weight:700;
font-size:.92rem;
cursor:pointer;
transition:all 0.25s;
}
.rp-btn-later:hover{
background:rgba(138,21,56,0.08);
border-color:#8A1538;
}
.rp-footer{
margin-top:18px;
font-size:.78rem;
color:#888;
font-family:'Tajawal',sans-serif;
position:relative;z-index:2;
}
@media(max-width:600px){
.rp-modal{padding:30px 22px 22px;border-radius:20px}
.rp-icon{width:64px;height:64px}
.rp-icon svg{width:32px;height:32px}
.rp-title{font-size:1.2rem}
.rp-text{font-size:.95rem}
.rp-stars-preview svg{width:22px;height:22px}
}
/* مودال موحد لاستبدال alert/confirm */
.um-overlay{position:fixed;inset:0;background:rgba(94,14,38,.65);backdrop-filter:blur(6px);z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s;font-family:'Tajawal','Cairo',sans-serif}
.um-overlay.show{opacity:1;pointer-events:auto}
.um-modal{background:#FAFAF8;border:2px solid #B8924A;border-radius:20px;max-width:440px;width:100%;padding:32px 28px 24px;box-shadow:0 30px 80px rgba(94,14,38,.4);transform:scale(.85);transition:transform .25s;position:relative;overflow:hidden;direction:rtl;text-align:center}
.um-overlay.show .um-modal{transform:scale(1)}
.um-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#D4BC85,#B8924A,#D4BC85)}
.um-modal.danger::before{background:linear-gradient(90deg,#e74c3c,#c0392b,#e74c3c)}
.um-icon{width:60px;height:60px;margin:0 auto 14px;background:linear-gradient(135deg,#8A1538,#5E0E26);border:2px solid #B8924A;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#D4BC85;box-shadow:0 8px 20px rgba(184,146,74,.25)}
.um-icon svg{width:28px;height:28px}
.um-modal.danger .um-icon{background:linear-gradient(135deg,#c0392b,#922b1f);border-color:#e74c3c;color:#fff;box-shadow:0 8px 20px rgba(192,57,43,.3)}
.um-title{font-family:'Cairo',sans-serif;font-weight:900;font-size:1.15rem;color:#5E0E26;margin:0 0 8px;line-height:1.4}
.um-msg{color:#8A1538;font-size:.98rem;line-height:1.7;margin:0 0 22px;white-space:pre-wrap;word-break:break-word}
.um-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.um-btn{padding:11px 24px;border-radius:11px;font-family:'Cairo',sans-serif;font-weight:800;font-size:.95rem;cursor:pointer;border:none;transition:all .2s;min-width:100px}
.um-btn-primary{background:linear-gradient(135deg,#D4BC85,#B8924A);color:#5E0E26;box-shadow:0 6px 18px rgba(184,146,74,.3)}
.um-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(184,146,74,.4)}
.um-btn-danger{background:linear-gradient(135deg,#e74c3c,#c0392b);color:#fff;box-shadow:0 6px 18px rgba(192,57,43,.3)}
.um-btn-danger:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(192,57,43,.4)}
.um-btn-cancel{background:transparent;color:#8A1538;border:1.5px solid rgba(138,21,56,.3)}
.um-btn-cancel:hover{background:rgba(138,21,56,.08);border-color:#8A1538}
@media(max-width:600px){.um-modal{padding:26px 20px 18px}.um-actions{flex-direction:column}.um-btn{width:100%}}
/* ═══════════════════════════════════════════════════
التصميم الملكي الجديد لشاشة الإعداد (v2)
كل الكلاسات الجديدة مسبوقة بـ ms- (Mulhim Setup)
═══════════════════════════════════════════════════ */
/* غلاف الشاشة — خلفية ناعمة كريمية */
.ms-wrapper{
max-width:640px;width:100%;margin:0 auto;
background:#FAFAF8;border:1.5px solid #B8924A;border-radius:18px;
overflow:hidden;
box-shadow:0 12px 32px rgba(94,14,38,.18);
font-family:'Tajawal','Cairo',sans-serif;
}
/* الترويسة الملكية */
.ms-header{
background:linear-gradient(135deg,#5E0E26 0%,#8A1538 50%,#5E0E26 100%);
padding:14px 18px;position:relative;
}
.ms-header-row{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.ms-header-back{
background:#B8924A;color:#5E0E26;
border:none;padding:5px 12px;border-radius:8px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.72rem;
cursor:pointer;display:inline-flex;align-items:center;gap:4px;
transition:all .2s;
}
.ms-header-back:hover{background:#D4BC85;transform:translateY(-1px);}
.ms-header-title{
color:#D4BC85;font-family:'Cairo',sans-serif;
font-weight:900;font-size:1rem;letter-spacing:0;
display:flex;align-items:center;gap:8px;
}
.ms-header-logo{
width:26px;height:26px;
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;border-radius:7px;
display:flex;align-items:center;justify-content:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.78rem;
box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.ms-header-progress{
margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;
}
.ms-progress-bar{height:3px;width:34px;border-radius:2px;background:rgba(212,188,133,.25);}
.ms-progress-bar.active{background:#B8924A;}
.ms-progress-label{color:#B8924A;font-size:.66rem;font-family:'Cairo',sans-serif;font-weight:700;}
/* جسم الشاشة */
.ms-body{padding:14px 16px;}
/* عند ظهور شريط البدء: جسم الشاشة بلا حشوة سفلية ليلتصق الشريط بحافة البطاقة */
.ms-body:has(~ .setup-action-bar.show){padding-bottom:0;}
/* بطاقة "تشكيلة سابقة جاهزة" — Quick Start */
.ms-quickstart{
background:linear-gradient(135deg,#F8F8F6 0%,#FAFAF8 100%);
border:1.5px solid #B8924A;border-radius:14px;
padding:11px 13px;margin-bottom:14px;
display:flex;align-items:center;gap:11px;
box-shadow:0 4px 14px rgba(184,146,74,.12);
cursor:pointer;transition:all .25s;
}
.ms-quickstart:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(184,146,74,.22);}
.ms-quickstart-icon{
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;
width:36px;height:36px;border-radius:9px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
box-shadow:0 3px 8px rgba(184,146,74,.3);
}
.ms-quickstart-icon svg{width:20px;height:20px;}
.ms-quickstart-info{flex:1;min-width:0;}
.ms-quickstart-title{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.82rem;color:#5E0E26;
}
.ms-quickstart-desc{
font-size:.7rem;color:#8A6D2E;margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-quickstart-btn{
background:linear-gradient(135deg,#3D6B53,#155f3a);
color:#fff;border:none;
padding:8px 14px;border-radius:9px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.76rem;
cursor:pointer;display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
box-shadow:0 4px 12px rgba(61,107,83,.3);transition:all .2s;
}
.ms-quickstart-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(61,107,83,.45);}
.ms-quickstart-btn svg{width:13px;height:13px;}
/* الفاصل الذهبي */
.ms-divider{
display:flex;align-items:center;gap:8px;margin:8px 0 12px;
}
.ms-divider-line{
height:1px;flex:1;
background:linear-gradient(to right,transparent,#B8924A,transparent);
}
.ms-divider-text{
font-family:'Cairo',sans-serif;font-size:.7rem;color:#8A6D2E;font-weight:700;
}
/* صف اسم اللعبة */
.ms-name-row{
background:#F8F8F6;border-radius:11px;
padding:10px 12px;
display:flex;align-items:center;gap:10px;
margin-bottom:10px;
border:1px solid rgba(184,146,74,.25);
}
.ms-name-row svg.ms-name-icon{width:18px;height:18px;color:#8A1538;flex-shrink:0;}
.ms-name-input{
flex:1;background:transparent;border:none;outline:none;
font-family:'Tajawal','Cairo',sans-serif;font-size:.88rem;
color:#8A1538;font-weight:700;
min-width:0;
}
.ms-name-input::placeholder{color:#b08c5e;font-weight:400;}
.ms-name-refresh{
background:#fff;color:#8A6D2E;
border:1.2px solid #B8924A;
padding:5px 10px;border-radius:7px;
font-family:'Cairo',sans-serif;font-size:.7rem;font-weight:900;
cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
transition:all .2s;
}
.ms-name-refresh:hover{background:#B8924A;color:#fff;}
.ms-name-refresh svg{width:11px;height:11px;}
/* صف ميتا (عدد فرق + مؤقت) */
.ms-meta-row{
display:grid;grid-template-columns:1fr 1fr;gap:10px;
margin-bottom:10px;
}
.ms-meta-box{
background:#F8F8F6;border-radius:11px;
padding:8px 11px;
border:1px solid rgba(184,146,74,.25);
}
.ms-meta-label{
font-family:'Cairo',sans-serif;font-size:.7rem;color:#8A6D2E;font-weight:700;
margin-bottom:6px;
}
.ms-meta-options{display:flex;gap:3px;}
.ms-meta-opt{
flex:1;padding:6px 4px;
background:#fff;color:#8A1538;
border:1.2px solid #faf5e8;border-radius:6px;
font-family:'Cairo',sans-serif;font-size:.74rem;font-weight:700;
cursor:pointer;text-align:center;
transition:all .15s;
min-height:30px;display:flex;align-items:center;justify-content:center;
}
.ms-meta-opt:hover{border-color:#B8924A;}
.ms-meta-opt.active{
background:#8A1538;color:#D4BC85;
border-color:#8A1538;
box-shadow:0 2px 6px rgba(138,21,56,.25);
}
/* ── إعداد بخطوتين (zzw) ── */
#ms-step-cats[hidden],#ms-step-settings[hidden]{display:none !important;}
/* اللوحة العائمة للفئات المختارة تختفي في الخطوة الثانية (الملخص يغني عنها) */
#screen-setup.ms-in-step2 .cats-fab{display:none !important;}
/* عدّاد الفرق (− رقم +) */
.ms-team-stepper{align-items:center;gap:6px;}
.ms-team-stepper .ms-step-btn{flex:0 0 36px;min-height:34px;padding:0;}
.ms-team-stepper .ms-step-btn svg{display:block;}
.ms-team-num{
flex:1;text-align:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.25rem;color:#5E0E26;
line-height:1;
}
/* ملخص الفئات المختارة في الخطوة الثانية */
.ms-cats-summary{
display:flex;align-items:center;gap:9px;
background:#F8F8F6;border:1.5px solid #B8924A;border-radius:12px;
padding:9px 12px;margin-bottom:10px;
}
.ms-cats-summary svg{width:16px;height:16px;color:#B8924A;flex-shrink:0;}
.ms-cats-summary-text{
flex:1;min-width:0;
font-family:'Cairo',sans-serif;font-weight:700;font-size:.8rem;color:#5E0E26;
line-height:1.5;
}
.ms-cats-summary-edit{
flex-shrink:0;background:#fff;color:#8A1538;
border:1.2px solid #B8924A;border-radius:8px;padding:5px 12px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.72rem;cursor:pointer;
transition:all .15s;
}
.ms-cats-summary-edit:hover{background:#8A1538;color:#D4BC85;border-color:#8A1538;}
/* أسماء الفرق */
.ms-teams-row{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:9px;margin-bottom:12px;
}
@media (min-width:560px){
.ms-teams-row{grid-template-columns:repeat(3,1fr);}
}
/* ─── توزيع الفرق حسب العدد ─── */
/* فريقان: متقابلان يمين ويسار */
.ms-teams-row.teams-count-2{grid-template-columns:repeat(2,1fr) !important;}
/* ثلاثة: عمودان والثالث يتوسّط في صف ثانٍ */
.ms-teams-row.teams-count-3{grid-template-columns:repeat(2,1fr) !important;}
.ms-teams-row.teams-count-3 .team-entry:nth-child(3){grid-column:1 / -1;max-width:50%;margin:0 auto;width:100%;}
/* أربعة: شبكة 2×2 متوازنة */
.ms-teams-row.teams-count-4{grid-template-columns:repeat(2,1fr) !important;}
/* خمسة: ثلاثة أعمدة والخامس يتوسّط */
@media (min-width:560px){
.ms-teams-row.teams-count-5{grid-template-columns:repeat(3,1fr) !important;}
.ms-teams-row.teams-count-5 .team-entry:nth-child(4){grid-column:1 / 2;}
.ms-teams-row.teams-count-5 .team-entry:nth-child(5){grid-column:2 / 4;max-width:50%;margin:0 auto;width:100%;}
/* ستة: شبكة 3×2 منتظمة */
.ms-teams-row.teams-count-6{grid-template-columns:repeat(3,1fr) !important;}
}
.ms-teams-row.teams-container{
display:grid !important;
flex-wrap:initial;
}
.ms-teams-row .team-entry{
flex:initial;min-width:0;
padding:8px 10px;
border:2px solid var(--tc,#B8924A);
background:var(--tc-bg,linear-gradient(135deg,#FAFAF8,#F8F8F6));
position:relative;
transition:all .25s ease;
}
.ms-teams-row .team-entry:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px var(--tc-shadow,rgba(184,146,74,.25));
}
.ms-teams-row .team-entry label{
font-size:.66rem;color:var(--tc,#8A6D2E);font-weight:900;
font-family:'Cairo',sans-serif;margin-bottom:5px;
}
.ms-teams-row .team-entry input{
padding:7px 9px;font-size:.8rem;font-weight:700;
border-radius:7px;border:1.5px solid var(--tc-border,rgba(184,146,74,.4));
background:#fff;
color:var(--tc,#8A1538);
}
.ms-teams-row .team-entry input:focus{
border-color:var(--tc,#B8924A);
box-shadow:0 0 0 3px var(--tc-glow,rgba(184,146,74,.18));
}
/* ─── ألوان الفرق حسب الترتيب (1=أحمر، 2=أزرق، 3=أخضر، 4=أصفر، 5=بنفسجي، 6=برتقالي) ─── */
.ms-teams-row .team-entry:nth-child(1){
--tc:#c0392b;
--tc-bg:linear-gradient(135deg,#fff5f3,#ffe5e0);
--tc-border:rgba(192,57,43,.4);
--tc-glow:rgba(192,57,43,.18);
--tc-shadow:rgba(192,57,43,.25);
}
.ms-teams-row .team-entry:nth-child(2){
--tc:#1E3A5F;
--tc-bg:linear-gradient(135deg,#f3f8ff,#e0ecff);
--tc-border:rgba(30,58,95,.4);
--tc-glow:rgba(30,58,95,.18);
--tc-shadow:rgba(30,58,95,.25);
}
.ms-teams-row .team-entry:nth-child(3){
--tc:#3D6B53;
--tc-bg:linear-gradient(135deg,#f3fff7,#deffe9);
--tc-border:rgba(61,107,83,.4);
--tc-glow:rgba(61,107,83,.18);
--tc-shadow:rgba(61,107,83,.25);
}
.ms-teams-row .team-entry:nth-child(4){
--tc:#a8870e;
--tc-bg:linear-gradient(135deg,#fffceb,#fff4c2);
--tc-border:rgba(168,135,14,.4);
--tc-glow:rgba(184,146,74,.2);
--tc-shadow:rgba(168,135,14,.25);
}
.ms-teams-row .team-entry:nth-child(5){
--tc:#3D4A7A;
--tc-bg:linear-gradient(135deg,#f7f5ff,#e8e3ff);
--tc-border:rgba(61,74,122,.4);
--tc-glow:rgba(61,74,122,.18);
--tc-shadow:rgba(61,74,122,.25);
}
.ms-teams-row .team-entry:nth-child(6){
--tc:#A67C4A;
--tc-bg:linear-gradient(135deg,#fff8f1,#ffe9d4);
--tc-border:rgba(201,118,64,.4);
--tc-glow:rgba(201,118,64,.2);
--tc-shadow:rgba(201,118,64,.25);
}
.ms-team-input{
background:#fff;
padding:8px 12px;border-radius:9px;
font-family:'Tajawal',sans-serif;font-size:.82rem;font-weight:700;
color:#8A1538;text-align:center;outline:none;
border:1.5px solid #faf5e8;
transition:all .2s;
}
.ms-team-input:focus{border-color:#B8924A;box-shadow:0 0 0 3px rgba(184,146,74,.12);}
/* ألوان الفرق التلقائية حسب الترتيب */
.ms-team-input[data-team-color="red"]{border-color:#c0392b;color:#c0392b;}
.ms-team-input[data-team-color="blue"]{border-color:#1E3A5F;color:#1E3A5F;}
.ms-team-input[data-team-color="green"]{border-color:#3D6B53;color:#3D6B53;}
.ms-team-input[data-team-color="amber"]{border-color:#B8924A;color:#8A6D2E;}
.ms-team-input[data-team-color="purple"]{border-color:#3D4A7A;color:#3D4A7A;}
.ms-team-input[data-team-color="pink"]{border-color:#8A1538;color:#8A1538;}
/* عنوان قسم الفئات */
.ms-cats-header{
display:flex;justify-content:space-between;align-items:center;
margin:14px 0 8px;
}
.ms-cats-title{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.9rem;color:#5E0E26;
display:flex;align-items:center;gap:6px;
}
.ms-cats-title svg{width:15px;height:15px;color:#B8924A;}
.ms-cats-counter{
background:linear-gradient(135deg,#8A1538,#5E0E26);
color:#D4BC85;
font-size:.74rem;padding:5px 13px;border-radius:14px;
font-family:'Cairo',sans-serif;font-weight:900;
display:none;cursor:pointer;
box-shadow:0 3px 10px rgba(94,14,38,.35),
inset 0 1px 0 rgba(212,188,133,.2);
transition:all .2s;
border:1.5px solid #B8924A;
}
.ms-cats-counter:hover{
transform:translateY(-1px) scale(1.05);
box-shadow:0 6px 14px rgba(94,14,38,.5);
border-color:#D4BC85;
}
.ms-cats-counter.visible{display:inline-flex;align-items:center;gap:5px;}
.ms-cats-counter.warn{
background:linear-gradient(135deg,#8A1538,#5e0f27);
color:#D4BC85;
border-color:#B8924A;
box-shadow:0 3px 10px rgba(138,21,56,.4);
}
.ms-cats-counter::before{
content:'';
width:7px;height:7px;border-radius:50%;background:#D4BC85;
box-shadow:0 0 0 0 rgba(212,188,133,.7);
animation:counterPulse 1.6s ease-in-out infinite;
}
@keyframes counterPulse{
0%,100%{box-shadow:0 0 0 0 rgba(212,188,133,.6);}
50%{box-shadow:0 0 0 5px rgba(212,188,133,0);}
}
.ms-cats-counter.warn::before{
background:#ffd07f;
animation:counterPulse 1s ease-in-out infinite;
}
/* تابات أفقية للفئات */
.ms-tabs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
gap:10px;margin-bottom:14px;
padding:2px;
position:relative;
}
.ms-tabs::-webkit-scrollbar{display:none;height:0;width:0;}
.ms-tabs-wrap{
position:relative;
margin-bottom:14px;
padding:0;
}
.ms-tabs-wrap::before,
.ms-tabs-wrap::after{
content:'';position:absolute;top:0;bottom:0;
width:16px;pointer-events:none;z-index:2;
transition:opacity .2s;
}
.ms-tabs-wrap::before,
.ms-tabs-wrap::after{display:none;}
/* أسهم التنقل بين التابات */
.ms-tabs-arrow{
display:none !important;
position:absolute;top:50%;transform:translateY(-50%);
width:30px;height:30px;border-radius:50%;
border:1px solid rgba(184,146,74,.35);
background:#fff;
color:#8A1538;
display:flex;align-items:center;justify-content:center;
cursor:pointer;z-index:3;
transition:all .25s ease;
box-shadow:0 2px 6px rgba(138,21,56,.08);
}
.ms-tabs-arrow:hover:not(:disabled){
background:#8A1538;
color:#fff;
border-color:#8A1538;
box-shadow:0 3px 10px rgba(138,21,56,.2);
}
.ms-tabs-arrow:active:not(:disabled){
transform:translateY(-50%) scale(.94);
}
.ms-tabs-arrow:disabled{
opacity:.3;cursor:not-allowed;
}
.ms-tabs-arrow svg{
width:13px;height:13px;
stroke-width:2.5;
position:relative;z-index:1;
transition:transform .25s ease;
}
.ms-tabs-arrow:hover:not(:disabled) svg{transform:scale(1.1);}
.ms-tabs-arrow.left{left:0;}
.ms-tabs-arrow.right{right:0;}
/* ─── تابات فرعية (للمراحل المركبة كالإعدادية) ─── */
.ms-subtabs-wrap{
display:flex;align-items:center;gap:9px;
padding:11px 14px;margin-bottom:14px;
background:linear-gradient(135deg,#F8F8F6,#FAFAF8);
border:1.5px solid rgba(184,146,74,.4);
border-radius:12px;
box-shadow:0 2px 8px rgba(94,14,38,.06);
}
.ms-subtabs-label{
font-family:'Cairo',sans-serif;font-weight:900;font-size:.78rem;
color:#8A6D2E;flex-shrink:0;
display:flex;align-items:center;gap:6px;
}
.ms-subtabs-label svg{width:14px;height:14px;color:#B8924A;}
.ms-subtabs{
display:flex;gap:7px;flex:1;flex-wrap:wrap;
justify-content:flex-end;
}
.ms-subtab{
background:#fff;color:#8A1538;
border:1.5px solid rgba(184,146,74,.4);
padding:6px 16px;border-radius:10px;
font-family:'Cairo',sans-serif;font-size:.78rem;font-weight:800;
cursor:pointer;
transition:all .2s ease;
display:inline-flex;align-items:center;gap:5px;
position:relative;
}
.ms-subtab:hover:not(:disabled){
background:#F8F8F6;
border-color:#B8924A;
transform:translateY(-1px);
}
.ms-subtab.active{
background:linear-gradient(135deg,var(--st-accent,#8A1538),var(--st-accent-d,#5E0E26));
color:#D4BC85;
border-color:var(--st-accent-d,#5E0E26);
font-weight:900;
box-shadow:0 4px 10px rgba(94,14,38,.25);
}
.ms-subtab.soon{
opacity:.7;
}
.ms-subtab.soon::after{
content:'قريباً';
font-size:.55rem;
background:#5a3a8e;color:#fff;
padding:1px 5px;border-radius:5px;
margin-right:3px;
}
.ms-subtab[data-grade="g5"]{--st-accent:#1E3A5F;--st-accent-d:#152A45;}
.ms-subtab[data-grade="g6"]{--st-accent:#8A1538;--st-accent-d:#5E0E26;}
.ms-subtab[data-grade="g7"]{--st-accent:#8A1538;--st-accent-d:#5E0E26;}
.ms-subtab[data-grade="g8"]{--st-accent:#A67C4A;--st-accent-d:#8e4e1f;}
.ms-subtab[data-grade="g9"]{--st-accent:#5a3a8e;--st-accent-d:#3d2557;}
/* رسالة "اختر صفاً" */
.ms-prep-prompt{
grid-column:1/-1;
display:flex;flex-direction:column;align-items:center;
padding:36px 20px 30px;
text-align:center;
color:#8A6D2E;
font-family:'Cairo',sans-serif;
}
.ms-prep-prompt-icon{
width:52px;height:52px;border-radius:14px;
background:linear-gradient(135deg,#B8924A,#8A6D2E);
display:flex;align-items:center;justify-content:center;
margin-bottom:14px;
box-shadow:0 6px 16px rgba(184,146,74,.3);
animation:promptBounce 2s ease-in-out infinite;
}
.ms-prep-prompt-icon svg{width:26px;height:26px;color:#fff;}
@keyframes promptBounce{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
.ms-prep-prompt-title{
font-weight:900;font-size:1.05rem;color:#5E0E26;
margin-bottom:6px;
}
.ms-prep-prompt-sub{
font-size:.84rem;color:#8A6D2E;font-weight:600;
line-height:1.6;max-width:280px;
}
@media(max-width:520px){
.ms-subtabs-wrap{padding:9px 11px;gap:6px;flex-wrap:wrap;}
.ms-subtabs-label{font-size:.72rem;}
.ms-subtab{padding:5px 12px;font-size:.74rem;}
}
/* أسهم التنقل بين الفئات */
.ms-cats-nav{
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin:8px 0 12px;
padding:9px 12px;
background:linear-gradient(135deg,#FAFAF8,#F8F8F6);
border:1.5px solid rgba(184,146,74,.4);
border-radius:11px;
}
.ms-cats-nav-info{
flex:1;text-align:center;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.8rem;
color:#5E0E26;line-height:1.3;
}
.ms-cats-nav-info-sub{
font-size:.66rem;color:#8A6D2E;font-weight:700;
margin-top:2px;
}
.ms-cats-nav-btn{
width:34px;height:34px;border-radius:50%;
background:#fff;border:1.5px solid #B8924A;
color:#8A6D2E;
display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;
transition:all .2s ease;
box-shadow:0 2px 6px rgba(94,14,38,.1);
}
.ms-cats-nav-btn:hover:not(:disabled){
background:#8A1538;color:#D4BC85;border-color:#5E0E26;
transform:scale(1.06);
}
.ms-cats-nav-btn:active:not(:disabled){transform:scale(.95);}
.ms-cats-nav-btn:disabled{
opacity:.3;cursor:not-allowed;
}
.ms-cats-nav-btn svg{width:14px;height:14px;}
/* تنبيه فئة فارغة */
.ms-cat-empty-hint{
position:absolute;bottom:6px;left:6px;z-index:4;
background:rgba(184,146,74,.95);
color:#5E0E26;
font-size:.58rem;font-weight:900;
padding:2px 7px;border-radius:6px;
font-family:'Cairo',sans-serif;
}
/* تأثير الوميض عند التركيز (للتنقل بالأسهم) */
.cat-btn.cat-focused{
animation:catFocusPulse 1.2s ease;
z-index:5;
}
@keyframes catFocusPulse{
0%{
box-shadow:0 0 0 0 rgba(184,146,74,.7),
0 4px 10px rgba(138,21,56,.18);
transform:translateY(0);
}
30%{
box-shadow:0 0 0 8px rgba(184,146,74,.35),
0 12px 24px rgba(184,146,74,.4);
transform:translateY(-3px);
}
100%{
box-shadow:0 0 0 0 rgba(184,146,74,0),
0 4px 10px rgba(138,21,56,.18);
transform:translateY(0);
}
}
/* ─── شريط التابات — بطاقات فاخرة متساوية على شبكة ─── */
.ms-tabs{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
gap:10px;
background:transparent;
border:none;
border-radius:0;
padding:2px;
overflow:visible;
position:relative;
box-shadow:none;
margin-bottom:0;
}
.ms-tabs::-webkit-scrollbar{display:none;height:0;width:0;}
/* خط الإطار الملغى */
.ms-tabs::before{display:none;}
/* تنعيم زوايا التاب الأول والأخير لتطابق الإطار الذهبي */
.ms-tab:first-child{border-radius:0 12px 12px 0;}
.ms-tab:last-child{border-radius:12px 0 0 12px;border-right:none;}
.ms-tab{
min-width:0;
position:relative;
padding:12px 12px;
background:#fff;
border:1.5px solid rgba(184,146,74,.45);
border-radius:14px;
color:var(--tad,#5E0E26);
font-family:'Cairo',sans-serif;font-size:.86rem;font-weight:800;
cursor:pointer;white-space:nowrap;
transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
user-select:none;
box-shadow:0 2px 8px rgba(94,14,38,.06);
overflow:hidden;
}
.ms-tab:hover:not(.active){
transform:translateY(-2px);
border-color:var(--ta,#B8924A);
box-shadow:0 8px 18px rgba(94,14,38,.12);
background:linear-gradient(180deg,#fff,var(--tas,#FBF6EA));
}
.ms-tab:active{transform:translateY(0);}
/* أيقونة التاب */
.ms-tab-icon{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;
color:var(--ta,#8A1538);
transition:all .14s ease;
flex-shrink:0;
opacity:1;
}
.ms-tab-icon svg{width:100%;height:100%;display:block;}
/* الحالة النشطة */
.ms-tab.active{
color:#EAD9A8;
font-weight:900;
background:linear-gradient(135deg,var(--ta,#8A1538),var(--tad,#5E0E26));
border-color:var(--tad,#5E0E26);
box-shadow:0 8px 20px rgba(94,14,38,.30), 0 2px 0 var(--tad,#5E0E26);
transform:translateY(-1px);
}
.ms-tab.active::before{
content:'';
position:absolute;
bottom:5px;left:22%;right:22%;
height:3px;
background:#D4BC85;
border-radius:3px;
box-shadow:0 0 8px rgba(212,188,133,.6);
}
.ms-tab.active::after{ display:none; }
.ms-tab.active .ms-tab-icon{ color:#EAD9A8; }
/* ألوان لكل تاب — كلها عنابي بسيط */
.ms-tab[data-tab-id="all"],
.ms-tab[data-tab-id="schools"],
.ms-tab[data-tab-id="general"]{
--c:#8A1538;--cd:#5E0E26;--cbg:transparent;--cglow:rgba(138,21,56,.15);
}
/* عداد الأسئلة - نقطة صغيرة جداً (احترافية) */
.ms-tab-count{
background:var(--tas,#F7ECEF);
color:var(--tad,#5E0E26);
border:1px solid var(--ta,#B8924A);
border-radius:999px;
padding:2px 9px;
font-size:.7rem;font-weight:900;
font-family:'Cairo',sans-serif;
line-height:1.5;
transition:all .14s ease;
}
.ms-tab:hover .ms-tab-count{
opacity:.85;
}
.ms-tab.active .ms-tab-count{ background:#EAD9A8; color:var(--tad,#5E0E26); border-color:#D4BC85; }
/* جوال */
@media (max-width:520px){
.ms-tab{padding:10px 16px 10px 12px;font-size:.76rem;gap:7px;}
.ms-tab-icon{width:15px;height:15px;}
.ms-tab-count{font-size:.52rem;}
}
/* شريط البحث السريع في الفئات */
.ms-search-wrap{
position:relative;
display:flex;align-items:center;
margin:8px 0 10px;
height:0;overflow:hidden;
transition:all .35s cubic-bezier(.34,1.2,.64,1);
}
.ms-search-wrap .ms-search-btn{
position:absolute;top:-44px;left:0;
width:32px;height:32px;
background:linear-gradient(135deg,#FFFFFF 0%,#F2F2EF 100%);
border:1.5px solid rgba(184,146,74,.4);
border-radius:50%;
color:#8A6D2E;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .25s ease;
box-shadow:0 3px 10px rgba(94,14,38,.08);
z-index:5;
}
.ms-search-wrap .ms-search-btn:hover{
border-color:#B8924A;color:#8A1538;
transform:scale(1.08) rotate(8deg);
box-shadow:0 6px 16px rgba(184,146,74,.25);
}
.ms-search-wrap .ms-search-btn svg{width:15px;height:15px;}
.ms-search-wrap.active{
height:46px;
margin:10px 0 14px;
}
.ms-search-wrap.active .ms-search-btn{
position:absolute;top:50%;right:12px;left:auto;
transform:translateY(-50%);
width:24px;height:24px;
background:transparent;
border:none;
box-shadow:none;
color:#9a7c3a;
pointer-events:none;
}
.ms-search-wrap.active .ms-search-btn:hover{transform:translateY(-50%);}
.ms-search-input{
width:100%;
padding:11px 42px 11px 44px;
background:linear-gradient(180deg,#FFFFFF 0%,#FAFAF8 100%);
border:1.5px solid rgba(184,146,74,.4);
border-radius:14px;
font-family:'Tajawal','Cairo',sans-serif;
font-size:.92rem;color:#5E0E26;
outline:none;
transition:all .25s ease;
box-shadow:
0 4px 12px rgba(94,14,38,.06),
0 0 0 0 var(--cglow,rgba(184,146,74,0));
display:none;
}
.ms-search-wrap.active .ms-search-input{display:block;}
.ms-search-input:focus{
border-color:#B8924A;
box-shadow:
0 6px 18px rgba(184,146,74,.18),
0 0 0 3px rgba(212,188,133,.2);
}
.ms-search-input::placeholder{color:#9B8B6E;font-weight:500;}
.ms-search-clear{
position:absolute;top:50%;left:8px;
transform:translateY(-50%);
width:28px;height:28px;
background:rgba(138,21,56,.08);
border:none;
border-radius:50%;
color:#8A1538;
cursor:pointer;
display:none;
align-items:center;justify-content:center;
transition:all .25s ease;
}
.ms-search-wrap.active .ms-search-clear{display:flex;}
.ms-search-clear:hover{
background:#8A1538;color:#fff;
transform:translateY(-50%) rotate(90deg);
}
.ms-search-clear svg{width:14px;height:14px;}
/* الوضع المظلم */
body.dark-mode .ms-search-wrap .ms-search-btn{
background:#3D0918;border-color:#8A6D2E;color:#D4BC85;
}
body.dark-mode .ms-search-input{
background:#1a1410;border-color:#8A6D2E;color:#FAFAF8;
}
body.dark-mode .ms-search-input::placeholder{color:#9B8B6E;}
/* شبكة البطاقات المسطحة (تستخدم نفس .cat-btn القديم!) */
.ms-cat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);gap:8px;
margin-bottom:8px;
}
@media (min-width:600px){
.ms-cat-grid{grid-template-columns:repeat(4,1fr);gap:10px;}
}
@media (min-width:900px){
.ms-cat-grid{grid-template-columns:repeat(5,1fr);gap:11px;}
}
/* تحسينات على .cat-btn ضمن السياق الجديد فقط */
.ms-cat-grid .cat-btn{
border-radius:13px;
border-width:1.5px;
box-shadow:0 4px 10px rgba(138,21,56,.18);
transition:all .25s cubic-bezier(.34,1.2,.64,1);
}
.ms-cat-grid .cat-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(138,21,56,.28);
border-color:#B8924A;
}
.ms-cat-grid .cat-btn.active{
border:3px solid #B8924A;
box-shadow:
0 0 0 4px rgba(184,146,74,.22),
0 10px 24px rgba(184,146,74,.4);
transform:translateY(-3px);
position:relative;
}
/* علامة ✓ كبيرة فوق البطاقة المختارة */
.ms-cat-grid .cat-btn.active::after{
content:'';
position:absolute;
top:-6px;left:-6px;
width:32px;height:32px;
border-radius:50%;
background:linear-gradient(135deg,#8A1538,#5E0E26);
z-index:6;
border:2px solid #B8924A;
box-shadow:0 4px 12px rgba(94,14,38,.5),
inset 0 -2px 0 rgba(0,0,0,.2);
background-image:
linear-gradient(135deg,#8A1538,#5E0E26),
url("data:image/svg+xml;utf8,");
background-size:cover, 60% 60%;
background-position:center, center;
background-repeat:no-repeat;
animation:catCheckPop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes catCheckPop{
0%{transform:scale(0) rotate(-90deg);opacity:0;}
70%{transform:scale(1.15) rotate(0);opacity:1;}
100%{transform:scale(1) rotate(0);opacity:1;}
}
/* عداد الأسئلة على البطاقة */
.ms-cat-qcount{
position:absolute;top:5px;right:5px;z-index:4;
background:rgba(0,0,0,.4);
color:#fff;
font-size:.55rem;font-weight:800;
padding:1.5px 6px;border-radius:5px;
font-family:'Cairo',sans-serif;
box-shadow:0 1px 3px rgba(0,0,0,.25);
letter-spacing:0;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
opacity:.85;
}
.ms-cat-grid .cat-btn:hover .ms-cat-qcount{
opacity:1;
}
.ms-cat-grid .cat-btn.active .ms-cat-qcount{
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;
opacity:1;
}
/* رسالة فارغة عند عدم وجود فئات في تاب */
.ms-empty-tab{
grid-column:1/-1;
text-align:center;padding:22px 12px;
color:#aaa;font-family:'Cairo',sans-serif;font-size:.84rem;font-weight:700;
}
/* ─── عنوان فاصل بين المجموعات داخل التاب الواحد ─── */
.ms-group-header{
grid-column:1/-1;
display:flex;align-items:center;gap:11px;
padding:9px 15px;margin:12px 0 6px;
background:linear-gradient(120deg,#4A0B1E,#5E0E26);
border:none;
border-radius:12px;
font-family:'Cairo',sans-serif;
cursor:pointer;
user-select:none;
transition:all .2s ease;
position:relative;
overflow:hidden;
min-height:44px;
box-shadow:0 3px 11px rgba(94,14,38,.18);
}
.ms-group-header::after{
content:'';position:absolute;bottom:0;right:0;left:0;height:2px;
background:linear-gradient(90deg,var(--mgh-accent,#B8924A),transparent);
}
.ms-group-header .ms-group-header-title{color:#FFFDF8 !important;font-weight:900;}
.ms-group-header .ms-group-header-sub{color:#D4BC85 !important;}
.ms-group-header .ms-group-header-icon{filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg);opacity:.9;}
.ms-group-header .ms-group-header-count{background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;color:#3D0918 !important;border:none !important;}
.ms-group-header .ms-group-header-chevron{color:#EAD9B0;}
.ms-group-header:hover{
background:linear-gradient(120deg,#5E0E26,#7A1330);
transform:translateX(-2px);
box-shadow:0 3px 10px rgba(94,14,38,.2);
}
.ms-group-header:active{transform:translateX(0) scale(.995);}
/* سهم الطي الدوّار */
.ms-group-header-chevron{
width:26px;height:26px;
border-radius:50%;
background:rgba(255,255,255,.7);
border:1.5px solid var(--mgh-accent,#B8924A);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
transition:transform .35s cubic-bezier(.34,1.2,.64,1);
color:var(--mgh-accent,#8A6D2E);
}
.ms-group-header-chevron svg{width:14px;height:14px;}
.ms-group-header.collapsed .ms-group-header-chevron{transform:rotate(-90deg);}
/* مؤشر بصري ناعم على الرأس عند الطي */
.ms-group-header.collapsed{
background:linear-gradient(120deg,#3D0918,#4A0B1E);
opacity:.92;
}
.ms-group-header.collapsed .ms-group-header-count{
background:var(--mgh-accent,#B8924A);
color:#fff;
border-color:var(--mgh-accent,#B8924A);
}
/* البطاقات داخل المجموعة المطوية — مخفية */
.cat-btn.ms-grouped-hidden{
display:none !important;
}
/* رسالة بسيطة عند الـ hover على رأس مطوي */
.ms-group-header.collapsed::after{
content:'انقر للعرض';
position:absolute;
left:50px;top:50%;
transform:translateY(-50%);
font-size:.62rem;
color:var(--mgh-accent,#8A6D2E);
font-weight:700;
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
}
.ms-group-header.collapsed:hover::after{opacity:.7;}
.ms-group-header-icon{
width:28px;height:28px;border-radius:7px;
background:var(--mgh-accent,#B8924A);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.ms-group-header-icon svg{width:15px;height:15px;display:block;}
.ms-group-header-info{flex:1;min-width:0;display:flex;align-items:center;gap:8px;}
.ms-group-header-title{
font-weight:900;font-size:.86rem;color:#5E0E26;
line-height:1.2;letter-spacing:-.2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-group-header-sub{
font-size:.66rem;color:#8A6D2E;font-weight:700;
white-space:nowrap;
opacity:.85;
}
.ms-group-header-count{
background:transparent;
color:rgba(138,21,56,.5);
border:none;
padding:0;border-radius:0;
font-weight:700;font-size:.65rem;
white-space:nowrap;flex-shrink:0;
opacity:.75;
letter-spacing:-.2px;
font-variant-numeric:tabular-nums;
}
/* مجموعة "قريباً" — مظهر هادئ مع تأثير diagonal stripes خفيف */
.ms-group-header-soon{
background:
repeating-linear-gradient(135deg,
rgba(90,58,142,.04) 0px,
rgba(90,58,142,.04) 8px,
rgba(253,250,242,.6) 8px,
rgba(253,250,242,.6) 16px),
linear-gradient(135deg,#FAFAF8 0%,#F8F8F6 100%);
opacity:.85;
}
.ms-group-header-soon .ms-group-header-title{
color:#5a3a8e;
}
/* ─── ألوان عشوائية متنوعة لبطاقات الفئات (8 لوحات) ─── */
.ms-cat-grid .cat-btn[data-palette="p1"]{background:linear-gradient(135deg,#8A1538 0%,#5E0E26 100%);}
.ms-cat-grid .cat-btn[data-palette="p2"]{background:linear-gradient(135deg,#8A1538 0%,#5e0f27 100%);}
.ms-cat-grid .cat-btn[data-palette="p3"]{background:linear-gradient(135deg,#1E3A5F 0%,#152A45 100%);}
.ms-cat-grid .cat-btn[data-palette="p4"]{background:linear-gradient(135deg,#3D6B53 0%,#2C5340 100%);}
.ms-cat-grid .cat-btn[data-palette="p5"]{background:linear-gradient(135deg,#8A6D2E 0%,#534211 100%);}
.ms-cat-grid .cat-btn[data-palette="p6"]{background:linear-gradient(135deg,#A67C4A 0%,#8e4e1f 100%);}
.ms-cat-grid .cat-btn[data-palette="p7"]{background:linear-gradient(135deg,#3D4A7A 0%,#2C3358 100%);}
.ms-cat-grid .cat-btn[data-palette="p8"]{background:linear-gradient(135deg,#5a3a8e 0%,#3d2557 100%);}
.ms-cat-grid .cat-btn[data-palette="p9"]{background:linear-gradient(135deg,#993556 0%,#6b2138 100%);}
.ms-cat-grid .cat-btn[data-palette="p10"]{background:linear-gradient(135deg,#0f6e56 0%,#08503e 100%);}
@media (max-width:560px){
.ms-group-header{padding:7px 10px;gap:7px;min-height:38px;}
.ms-group-header-icon{width:24px;height:24px;border-radius:6px;}
.ms-group-header-icon svg{width:13px;height:13px;}
.ms-group-header-title{font-size:.78rem;}
.ms-group-header-sub{font-size:.6rem;}
.ms-group-header-count{font-size:.66rem;padding:2px 7px;}
.ms-group-header-info{gap:6px;}
/* على الجوال نخفي subtitle لتركيز أكبر على العنوان */
.ms-group-header-sub{display:none;}
}
/* ─── تحسين النصوص داخل البطاقات للحجم الصغير ─── */
@media (min-width:900px){
.ms-cat-grid .cat-btn .ci-lbl{
font-size:.7rem;
padding:8px 5px 7px;
min-height:30px;
background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));
font-weight:800;
}
.ms-cat-qcount{
font-size:.58rem;
padding:1.5px 6px;
top:5px;right:5px;
}
}
/* الجوال - بطاقات أصغر شوية */
@media (max-width:480px){
.ms-cat-grid .cat-btn .ci-lbl{
font-size:.66rem;
padding:6px 4px 5px;
min-height:26px;
}
.ms-cat-qcount{font-size:.56rem;padding:1.5px 5px;}
}
/* شريط سفلي مُرقّى — ضمن السياق الجديد */
.ms-footer{
background:linear-gradient(180deg,rgba(253,250,242,.98),#F8F8F6);
border-top:2px solid #B8924A;
padding:12px 16px;
display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ms-footer-info{display:flex;align-items:center;gap:11px;}
.ms-footer-count{
background:linear-gradient(135deg,#D4BC85,#B8924A);
color:#5E0E26;
padding:6px 14px;border-radius:20px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.95rem;
box-shadow:0 4px 10px rgba(184,146,74,.3);
min-width:34px;text-align:center;
}
.ms-footer-text-main{
font-family:'Cairo',sans-serif;font-size:.82rem;color:#5E0E26;font-weight:900;
}
.ms-footer-text-sub{font-size:.68rem;color:#8A6D2E;margin-top:1px;}
.ms-footer-btn{
background:linear-gradient(135deg,#3D6B53,#155f3a);
color:#fff;border:none;
padding:10px 20px;border-radius:11px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.88rem;
cursor:pointer;
display:inline-flex;align-items:center;gap:6px;
box-shadow:0 6px 14px rgba(61,107,83,.3);
transition:all .25s;
}
.ms-footer-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(61,107,83,.45);}
.ms-footer-btn:disabled{
background:#c9c9c9;color:#777;cursor:not-allowed;
box-shadow:none;transform:none;
}
.ms-footer-btn svg{width:14px;height:14px;}
/* الجوال */
@media (max-width:600px){
.ms-wrapper{border-radius:0;border:none;box-shadow:none;}
.ms-body{padding:12px 14px;}
.ms-header{padding:12px 14px;}
.ms-quickstart{padding:10px 11px;gap:9px;}
.ms-quickstart-btn{padding:7px 11px;font-size:.72rem;}
.ms-meta-row{grid-template-columns:1fr 1fr;gap:8px;}
.ms-cat-grid{grid-template-columns:repeat(3,1fr);gap:7px;}
.ms-footer-text-sub{display:none;}
.ms-footer-btn{padding:9px 16px;}
}
/* الوضع المظلم */
body.dark-mode .ms-wrapper{background:#1a2e24;border-color:#4a3a14;}
body.dark-mode .ms-name-row,
body.dark-mode .ms-meta-box{background:#0f1f17;border-color:#2d4434;}
body.dark-mode .ms-name-input,
body.dark-mode .ms-team-input{background:#0f1f17;color:#f0f5f2;}
body.dark-mode .ms-tab{background:#1a2e24;color:#d8c98f;border-color:#4a3a14;}
body.dark-mode .ms-tab.active{background:#8A1538;color:#D4BC85;}
body.dark-mode .ms-meta-opt{background:#1a2e24;color:#d8c98f;border-color:#2d4434;}
body.dark-mode .ms-meta-opt.active{background:#8A1538;color:#D4BC85;}
body.dark-mode .ms-quickstart{background:linear-gradient(135deg,#3D0918 0%,#1a2e24 100%);}
body.dark-mode .ms-footer{background:#0f1f17;}
body.dark-mode .ms-cats-title{color:#D4BC85;}
body.dark-mode .ms-footer-text-main{color:#D4BC85;}
/* ═══════════════════════════════════════════════════
تحسينات screen-setup — شريط سفلي + تحسينات
═══════════════════════════════════════════════════ */
/* شريط سفلي ثابت يَظهرُ عند اختيار فئة */
/* ════════════════════════════════════════════════════════════════
لوحة الفئات المختارة الجانبية - مدمجة ومرنة
════════════════════════════════════════════════════════════════ */
.cats-fab{
position:fixed;
top:50%;
right:12px;
transform:translateY(-50%);
z-index:9400;
font-family:'Cairo','Tajawal',sans-serif;
display:none;
width:220px;
max-width:calc(100vw - 24px);
max-height:calc(100vh - 200px);
}
.cats-fab.show{display:block;}
/* الزر القديم — مخفي */
.cats-fab-toggle{display:none;}
/* اللوحة الجانبية */
.cats-fab-panel{
position:relative;
background:linear-gradient(180deg,#fff 0%,#F8F8F6 100%);
border:1.5px solid #B8924A;
border-radius:12px;
box-shadow:
0 8px 24px rgba(94,14,38,.16),
0 3px 10px rgba(184,146,74,.18),
inset 0 1px 0 rgba(255,255,255,.6);
padding:0;
overflow:hidden;
opacity:1;
visibility:visible;
transform:none;
animation:fabPanelIn .4s cubic-bezier(.34,1.2,.64,1);
display:flex;
flex-direction:column;
max-height:inherit;
}
@keyframes fabPanelIn{
from{opacity:0;transform:translateX(20px) scale(.96);}
to{opacity:1;transform:none;}
}
.cats-fab-panel::before{
content:'';
position:absolute;
top:-2px;left:0;right:0;
height:2.5px;
background:linear-gradient(90deg,transparent,#B8924A 30%,#D4BC85 50%,#B8924A 70%,transparent);
pointer-events:none;
}
/* رأس اللوحة - مدمج */
.cats-fab-header{
display:flex;align-items:center;justify-content:space-between;
padding:9px 11px 8px;
border-bottom:1px solid rgba(184,146,74,.18);
background:linear-gradient(180deg,rgba(212,188,133,.08),transparent);
flex-shrink:0;
}
.cats-fab-title{
display:flex;align-items:center;gap:6px;
color:#5E0E26;
font-weight:900;font-size:.78rem;
letter-spacing:-.2px;
min-width:0;
}
.cats-fab-title svg{width:14px;height:14px;color:#B8924A;flex-shrink:0;}
.cats-fab-title span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.cats-fab-count-inline{
background:#8A1538;color:#D4BC85;
padding:1px 7px;border-radius:9px;
font-size:.65rem;font-weight:900;
font-variant-numeric:tabular-nums;
border:1px solid #B8924A;
margin-right:auto;
flex-shrink:0;
}
.cats-fab-close{display:none;}
/* قائمة الفئات - مدمجة */
.cats-fab-list{
flex:1;
min-height:0;
overflow-y:auto;
padding:6px 6px 4px;
scrollbar-width:thin;
scrollbar-color:#B8924A #F8F8F6;
}
.cats-fab-list::-webkit-scrollbar{width:5px;}
.cats-fab-list::-webkit-scrollbar-track{background:#F8F8F6;}
.cats-fab-list::-webkit-scrollbar-thumb{background:#B8924A;border-radius:3px;}
.cats-fab-empty{
text-align:center;
padding:14px 8px;
color:#9B8B6E;
font-size:.74rem;
font-weight:700;
font-family:'Cairo',sans-serif;
}
.cats-fab-item{
display:flex;align-items:center;gap:7px;
padding:6px 8px;
background:#fff;
border:1px solid rgba(184,146,74,.25);
border-radius:8px;
margin-bottom:4px;
transition:all .2s;
position:relative;
animation:fabItemSlide .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes fabItemSlide{
from{opacity:0;transform:translateX(-8px);}
to{opacity:1;transform:translateX(0);}
}
.cats-fab-item:hover{
border-color:#B8924A;
background:#F8F8F6;
}
.cats-fab-item-icon{
width:24px;height:24px;
border-radius:6px;
background:linear-gradient(135deg,var(--ic,#8A1538),#5E0E26);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
font-family:'Cairo',sans-serif;font-weight:900;
color:#D4BC85;
font-size:.72rem;
border:1px solid #B8924A;
box-shadow:0 1.5px 4px rgba(94,14,38,.18);
}
.cats-fab-item-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:0;
}
.cats-fab-item-name{
font-size:.7rem;
font-weight:900;
color:#5E0E26;
letter-spacing:-.2px;
line-height:1.2;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.cats-fab-item-meta{
font-size:.58rem;
color:#8A6D2E;
font-weight:700;
letter-spacing:0;
font-variant-numeric:tabular-nums;
margin-top:1px;
}
.cats-fab-item-remove{
flex-shrink:0;
width:22px;height:22px;
border-radius:50%;
background:transparent;
border:1px solid rgba(192,57,43,.25);
color:#c0392b;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.cats-fab-item-remove:hover{
background:#c0392b;
color:#fff;
border-color:#c0392b;
transform:scale(1.1) rotate(90deg);
}
.cats-fab-item-remove svg{width:11px;height:11px;}
/* فوتر اللوحة */
.cats-fab-foot{
padding:6px 10px 8px;
border-top:1px solid rgba(184,146,74,.15);
background:linear-gradient(0deg,rgba(212,188,133,.06),transparent);
font-size:.66rem;
color:#8A6D2E;
font-weight:700;
text-align:center;
font-family:'Cairo',sans-serif;
flex-shrink:0;
}
.cats-fab-foot.warn{color:#c0392b;}
/* تحذير عند تجاوز 6 */
.cats-fab.warn .cats-fab-panel{
border-color:#c0392b;
}
.cats-fab.warn .cats-fab-count-inline{
background:linear-gradient(135deg,#c0392b,#922b1f);
color:#fff;
border-color:#c0392b;
}
/* تابلت وحجم متوسط */
@media (max-width:900px){
.cats-fab{
width:200px;
right:10px;
}
}
/* جوال — أصغر وأقرب للحافة */
@media (max-width:600px){
.cats-fab{
width:170px;
right:6px;
max-height:calc(100vh - 180px);
}
.cats-fab-header{padding:7px 9px 6px;}
.cats-fab-title{font-size:.72rem;gap:4px;}
.cats-fab-title svg{width:12px;height:12px;}
.cats-fab-count-inline{padding:1px 6px;font-size:.6rem;}
.cats-fab-list{padding:5px 5px 3px;}
.cats-fab-item{padding:5px 7px;gap:6px;margin-bottom:3px;}
.cats-fab-item-icon{width:22px;height:22px;font-size:.68rem;border-radius:5px;}
.cats-fab-item-name{font-size:.66rem;}
.cats-fab-item-meta{font-size:.55rem;}
.cats-fab-item-remove{width:20px;height:20px;}
.cats-fab-item-remove svg{width:10px;height:10px;}
.cats-fab-foot{padding:5px 8px 7px;font-size:.6rem;}
}
/* شاشات ضيقة جدا (< 380px) */
@media (max-width:380px){
.cats-fab{
width:150px;
right:4px;
}
.cats-fab-title span{display:none;}
}
.setup-action-bar{
/* قاعدة مدمجة في أسفل البطاقة — امتداد طبيعي لا صندوق معزول */
background:
linear-gradient(180deg, #FAFAF8 0%, #F4EEE2 100%);
border:none;
border-top:1.5px solid rgba(184,146,74,.4);
border-radius:0 0 17px 17px;
padding:16px 20px calc(16px + env(safe-area-inset-bottom,0));
margin:0;
display:none; /* يظهر بـ .show */
align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
box-shadow:inset 0 6px 14px -8px rgba(94,14,38,.12);
font-family:'Tajawal','Cairo',sans-serif;
position:relative;
overflow:hidden;
opacity:0;
transform:translateY(8px);
transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.2,.64,1);
}
/* خط ذهبي علوي رفيع يفصل بنعومة */
.setup-action-bar::before{
content:'';
position:absolute;
top:-1.5px;left:0;right:0;
height:2px;
background:linear-gradient(90deg,transparent 0%,#B8924A 25%,#D4BC85 50%,#B8924A 75%,transparent 100%);
pointer-events:none;
}
.setup-action-bar.show{
display:flex;
opacity:1;
transform:translateY(0);
animation:actionBarFadeIn .4s cubic-bezier(.34,1.2,.64,1);
}
@keyframes actionBarFadeIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
.setup-action-info{
display:flex;align-items:center;gap:11px;
color:#5E0E26;font-weight:800;
}
.setup-action-count{
background:linear-gradient(135deg,#D4BC85 0%,#B8924A 60%,#a68820 100%);
color:#5E0E26;
padding:7px 16px;border-radius:100px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:.95rem;
box-shadow:
0 4px 12px rgba(184,146,74,.4),
inset 0 1px 0 rgba(255,255,255,.45),
inset 0 -2px 0 rgba(122,84,5,.15);
min-width:38px;text-align:center;
border:2px solid #FAFAF8;
letter-spacing:-.3px;
}
.setup-action-text{
font-size:.92rem;color:#5E0E26;
font-family:'Cairo',sans-serif;font-weight:800;
}
/* زر "ابدأ اللعبة" — هوية ملكية بنّية ذهبية */
.setup-action-btn{
background:
linear-gradient(135deg,#8A1538 0%,#5E0E26 50%,#3D0918 100%);
color:#D4BC85;
border:1.5px solid #B8924A;
padding:14px 32px;border-radius:14px;
font-family:'Cairo',sans-serif;font-weight:900;font-size:1.05rem;
cursor:pointer;
display:inline-flex;align-items:center;gap:10px;
box-shadow:
0 8px 22px rgba(94,14,38,.4),
0 2px 4px rgba(94,14,38,.3),
inset 0 1px 0 rgba(212,188,133,.25),
inset 0 -2px 0 rgba(0,0,0,.25);
transition:all .25s cubic-bezier(.34,1.2,.64,1);
position:relative;
letter-spacing:0;
text-shadow:0 1px 2px rgba(0,0,0,.4);
overflow:hidden;
}
/* لمعة ذهبية متحركة عبر الزر */
.setup-action-btn::after{
content:'';
position:absolute;
top:0;bottom:0;
width:60px;
background:linear-gradient(110deg,
transparent 0%,
rgba(212,188,133,.35) 45%,
rgba(212,188,133,.5) 50%,
rgba(212,188,133,.35) 55%,
transparent 100%);
transform:translateX(200%);
animation:btnShimmer 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes btnShimmer{
0%{transform:translateX(200%);}
100%{transform:translateX(-200%);}
}
/* هالة ذهبية نابضة خلف الزر */
.setup-action-btn::before{
content:'';
position:absolute;inset:-3px;border-radius:15px;
background:linear-gradient(135deg,#B8924A,#D4BC85,#B8924A);
background-size:200% 100%;
z-index:-1;
filter:blur(10px);opacity:.45;
animation:btnGoldGlow 2.5s ease-in-out infinite;
}
@keyframes btnGoldGlow{
0%,100%{opacity:.4;background-position:0% 50%;}
50%{opacity:.6;background-position:100% 50%;}
}
.setup-action-btn:hover{
transform:translateY(-3px) scale(1.03);
border-color:#D4BC85;
box-shadow:
0 14px 32px rgba(94,14,38,.5),
0 4px 8px rgba(184,146,74,.3),
inset 0 1px 0 rgba(212,188,133,.4),
inset 0 -2px 0 rgba(0,0,0,.25);
color:#FAFAF8;
}
.setup-action-btn:active{transform:translateY(-1px) scale(.99);}
.setup-action-btn:disabled{
background:linear-gradient(135deg,#B8924A 0%,#8A6D2E 100%);
color:#FAFAF8;
cursor:not-allowed;
border-color:rgba(184,146,74,.5);
box-shadow:
0 4px 12px rgba(184,146,74,.25),
inset 0 1px 0 rgba(255,255,255,.15);
transform:none;
text-shadow:0 1px 2px rgba(0,0,0,.2);
opacity:.65;
filter:saturate(.7);
}
.setup-action-btn:disabled::before,
.setup-action-btn:disabled::after{display:none;}
.setup-action-btn svg{
width:20px;height:20px;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
@media(max-width:600px){
.setup-action-bar{padding:13px 16px calc(13px + env(safe-area-inset-bottom,0));flex-direction:row;border-radius:0 0 17px 17px}
.setup-action-text{display:none}
.setup-action-btn{padding:13px 22px;font-size:1rem;flex:1;justify-content:center}
}
/* مساحة سفلية لـ screen-setup حتى لا يُحجب المحتوى */
/* الشريط أصبح جزءا من تدفق الصفحة، لا حاجة لمساحة سفلية إضافية */
#screen-setup.has-action-bar{}
/* تحسين عناوين المستويات */
.hh-level-label{
font-family:'Tajawal','Cairo',sans-serif !important;
font-weight:800 !important;
letter-spacing:0 !important;
}
.hh-level-desc{
font-family:'Tajawal',sans-serif !important;
}
/* ═══════════════════════════════════════════════════
📄 Footer لصفحة الهبوط
═══════════════════════════════════════════════════ */
.lp-footer{
background:#5E0E26;
color:#FAFAF8;
padding:50px 24px 30px;
border-top:3px solid #B8924A;
font-family:'Tajawal','Cairo',sans-serif;
}
.lp-footer-inner{
max-width:1180px;margin:0 auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
}
.lp-footer-col h4{
font-family:'Cairo',sans-serif;
font-weight:900;
color:#D4BC85;
font-size:1rem;
margin-bottom:16px;
position:relative;
padding-bottom:8px;
}
.lp-footer-col h4::after{
content:'';position:absolute;
bottom:0;right:0;width:30px;height:2px;
background:linear-gradient(90deg,#D4BC85,#B8924A);
}
.lp-footer-col ul{list-style:none;padding:0;margin:0}
.lp-footer-col li{margin-bottom:8px}
.lp-footer-col a{
color:#faf5e8;text-decoration:none;
font-size:.92rem;
opacity:.85;transition:all .2s;
display:inline-flex;align-items:center;gap:6px;
}
.lp-footer-col a:hover{
color:#D4BC85;opacity:1;
transform:translateX(-3px);
}
.lp-footer-col a svg{width:14px;height:14px;flex-shrink:0}
.lp-footer-brand{
font-family:'Cairo',sans-serif;
font-weight:900;
font-size:1.4rem;
color:#D4BC85;
margin-bottom:10px;
}
.lp-footer-tagline{
color:#faf5e8;opacity:.75;
font-size:.9rem;line-height:1.7;
}
.lp-footer-bottom{
max-width:1180px;margin:30px auto 0;
padding-top:20px;
border-top:1px solid rgba(212,188,133,.15);
text-align:center;
color:#faf5e8;opacity:.7;
font-size:.85rem;
}
.lp-footer-bottom strong{color:#D4BC85}
/* الجوال: بطاقات أصغر بنفس التساوي */
@media (max-width:560px){
.ms-tabs{gap:7px;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));}
.ms-tab{padding:10px 6px;font-size:.76rem;gap:5px;}
.ms-tab-icon{width:16px;height:16px;}
.ms-tab-count{padding:1px 6px;font-size:.62rem;}
}
/* ═══════════════════════════════════════════════════════
طبقة التاج الموحد المعتمدة — الشريطان العلوي والسفلي بهوية واحدة
مكتملان من حافة لحافة بلا أطراف دائرية
═══════════════════════════════════════════════════════ */
/* ── الشريط العلوي: عنابي ملكي مطابق للسفلي ── */
.main-nav{
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-bottom:2px solid #B8924A !important;
border-radius:0 !important;
box-shadow:0 2px 14px rgba(61,9,24,.35) !important;
}
.main-nav::after{ background:linear-gradient(90deg,transparent,#EAD9B0 30%,#EAD9B0 70%,transparent) !important; }
.main-nav .main-nav-brand *, .main-nav .brand-name, .main-nav .brand-tag{ color:#FDF3DD !important; }
.main-nav .brand-tag{ color:#D4BC85 !important; }
.main-nav .main-nav-link{ color:#EAD9B0 !important; }
.main-nav .main-nav-link:hover, .main-nav .main-nav-link.active{ color:#FDF3DD !important; }
.main-nav .main-nav-link svg{ color:#D4BC85 !important; fill:#D4BC85 !important; }
.main-nav .nav-search, .main-nav .nav-search input, .main-nav input[type="search"], .main-nav input[type="text"]{
background:rgba(255,255,255,.08) !important;
border:1px solid rgba(212,188,133,.5) !important;
color:#FDF3DD !important;
}
.main-nav input::placeholder{ color:#C9A876 !important; }
.main-nav .nav-quick-group{
background:rgba(255,255,255,.07) !important;
border:1px solid rgba(212,188,133,.45) !important;
}
.main-nav .nav-icon-btn{ color:#D4BC85 !important; background:none !important; }
.main-nav .nav-icon-btn:hover{ color:#FDF3DD !important; }
.main-nav .nav-icon-btn svg{ fill:#D4BC85 !important; }
.main-nav .nav-start-btn, .main-nav .hh-nav-start{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
color:#3D0918 !important; border:1px solid #FDF3DD !important;
}
.main-nav .nav-user-chip, .main-nav .user-chip{
background:rgba(212,188,133,.16) !important;
border:1px solid #B8924A !important; color:#FDF3DD !important;
}
/* ── الشريط السفلي: من حافة لحافة، مربع مكتمل ── */
.hh-bottom-nav{
max-width:none !important;
margin:0 !important;
border-radius:0 !important;
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-top:1.5px solid #B8924A !important;
box-shadow:0 -3px 16px rgba(61,9,24,.4) !important;
padding-left:max(12px, env(safe-area-inset-left,0)) !important;
padding-right:max(12px, env(safe-area-inset-right,0)) !important;
}
.hh-bottom-nav::before{
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-top:1.5px solid #B8924A !important;
border-radius:0 !important;
}
.hh-bottom-nav > *{ border-radius:11px; }
/* ── التاج لا يُقص تحت الشريط العلوي ── */
@media (min-width:901px){
.royal-menu{ padding-top:96px !important; }
}
/* ── بطاقات المسارات: مضبوطة الحجم مهما اتسعت الشاشة ── */
@media (min-width:901px){
.paths-container{
max-width:1060px !important;
margin-left:auto !important; margin-right:auto !important;
grid-template-columns:repeat(3,1fr) !important;
gap:14px !important;
}
.paths-container .path-card{ min-height:0 !important; }
.paths-container .path-card-inner{ padding:18px 16px !important; }
}
@media (max-width:900px){
.paths-container{ grid-template-columns:1fr !important; }
}
/* ═══ الكلمة الأخيرة: الشريطان الثابتان الملكيان (تعلو على كل ما سبق) ═══ */
.main-nav{
position:fixed !important;
top:0 !important; left:0 !important; right:0 !important;
width:100% !important; max-width:none !important;
margin:0 !important; border-radius:0 !important;
z-index:2000 !important;
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-bottom:2px solid #B8924A !important;
box-shadow:0 2px 14px rgba(61,9,24,.35) !important;
}
.hh-bottom-nav{
position:fixed !important;
bottom:0 !important; left:0 !important; right:0 !important;
width:100% !important; max-width:none !important;
margin:0 !important; border-radius:0 !important;
z-index:2000 !important;
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-top:1.5px solid #B8924A !important;
box-shadow:0 -3px 16px rgba(61,9,24,.4) !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
gap:clamp(6px, 2.2vw, 34px) !important;
padding:9px 12px 10px !important;
}
.hh-bottom-nav::before{ display:none !important; }
/* ═══ الكلمة الأخيرة v2: كبسولات العلوي النقية + محبرة ذهبية ═══ */
.main-nav .nav-link *{
background:none !important; border:none !important;
box-shadow:none !important; border-radius:0 !important;
width:auto !important; height:auto !important;
min-width:0 !important; min-height:0 !important;
padding:0 !important; margin:0 !important;
}
.main-nav .nav-link *::before, .main-nav .nav-link *::after{ display:none !important; }
.main-nav .nav-link svg{ width:15px !important; height:15px !important; color:#D4BC85 !important; }
.main-nav .nav-link span{ color:#F5E6C4 !important; font-weight:700 !important; font-size:12px !important; }
.main-nav .nav-link:hover svg, .main-nav .nav-link.active svg,
.main-nav .nav-link:hover span, .main-nav .nav-link.active span{ color:#3D0918 !important; }
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-icon{
width:46px !important; height:46px !important; border-radius:13px !important;
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
color:#3D0918 !important; border:2px solid #FDF3DD !important;
box-shadow:0 6px 16px rgba(184,146,74,.4) !important;
}
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara{ transform:translateY(-9px) !important; }
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara:active{ transform:translateY(-9px) scale(.9) !important; }
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-label{ color:#FDF3DD !important; }
/* ═══ الكلمة الأخيرة v3: شريط موحد بلا قص + إطار داخلي معيني ═══ */
.hh-bottom-nav{
overflow:visible !important;
align-items:center !important;
padding-top:8px !important; padding-bottom:8px !important;
}
.hh-bottom-nav .hh-nav-item,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara{
flex:1 1 0 !important; max-width:none !important;
display:inline-flex !important; flex-direction:column !important;
align-items:center !important; justify-content:center !important;
transform:none !important; padding:0 !important;
}
.hh-bottom-nav .hh-nav-icon,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-icon{
width:36px !important; height:36px !important; border-radius:11px !important;
}
.hh-bottom-nav .hh-nav-label,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-label{
font-size:.8rem !important; margin-top:3px !important; line-height:1.2 !important;
}
/* المحبرة: التمييز بالذهب لا بالرفع القاصّ — بروز خفيف داخل الشريط */
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-icon{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
color:#3D0918 !important; border:2px solid #FDF3DD !important;
box-shadow:0 0 0 3px rgba(212,188,133,.25), 0 4px 12px rgba(184,146,74,.35) !important;
transform:translateY(-4px);
}
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-label{ color:#FDF3DD !important; }
.hh-bottom-nav .hh-nav-new-badge{ display:none !important; }
/* الإطار من الداخل: بمحاذاة حافة المحتوى */
@media (min-width:901px){
body::before, body::after{
top:82px !important; bottom:104px !important;
width:2.5px !important;
background:linear-gradient(#B8924A, rgba(184,146,74,.3) 50%, #B8924A) !important;
}
body::before{ right:calc((100vw - min(1280px, 96vw)) / 2 - 16px) !important; left:auto !important; }
body::after{ left:calc((100vw - min(1280px, 96vw)) / 2 - 16px) !important; right:auto !important; }
}
/* المقولة: خط كبير واضح (اعتماد التقوية) */
#screen-menu .hh-quote-text, #dq-text{
font-size:1.3rem !important; line-height:2 !important;
color:#2A1A0E !important; font-weight:700 !important;
}
#screen-menu .hh-quote-name, #dq-author{ font-size:1.08rem !important; }
.hh-quote-role, #dq-role{ font-size:.92rem !important; color:#7A5E22 !important; font-weight:700 !important; }
/* ═══════════ اللوحة الملكية v1 — الكلمة الأخيرة ═══════════ */
/* الغمر: شاشات اللعب بلا أشرطة منصة ولا إطار */
body.hh-immersive .main-nav,
body.hh-immersive .hh-bottom-nav,
body.hh-immersive #hh-more-sheet{ display:none !important; }
/* ══════════════ الحرم المدرسي الموحد (zzx) · جناح ثابت ومسرح متبدل ══════════════ */
.hh-campus{position:fixed;inset:0;background:linear-gradient(180deg,#F6F1E7,#EFE7D6);z-index:999973;overflow-y:auto;direction:rtl;font-family:'Cairo','Tajawal',sans-serif;}
.hh-campus-top{background:linear-gradient(175deg,#4A0B1E,#5E0E26);border-bottom:2px solid #B8924A;box-shadow:0 3px 14px rgba(61,9,24,.3);padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:30;}
.hh-campus-top-btns{display:flex;gap:7px;}
.hh-campus-top-spacer{width:96px;}
.hh-campus-title{display:flex;align-items:center;gap:10px;color:#F5E6C4;font-weight:800;font-size:1.05rem;}
.hh-campus-role{background:linear-gradient(135deg,#EAD9B0,#B8924A);border:1px solid #FDF3DD;border-radius:99px;padding:3px 13px;color:#3D0918;font-size:.74rem;font-weight:800;}
.hh-campus-btn-ghost{background:rgba(212,188,133,.12);border:1px solid rgba(212,188,133,.5);border-radius:9px;height:34px;padding:0 13px;color:#F5E6C4;font-weight:800;font-size:.85rem;cursor:pointer;font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:5px;}
.hh-campus-btn-ico{width:34px;padding:0;justify-content:center;}
.hh-campus-btn-ghost:hover{background:rgba(212,188,133,.24);}
.hh-campus-body{display:grid;grid-template-columns:214px minmax(0,1fr);min-height:calc(100vh - 57px);}
.hh-campus-side{background:linear-gradient(180deg,#4A0B1E,#3D0918);border-left:2px solid #B8924A;padding:12px 9px;position:sticky;top:57px;align-self:start;min-height:calc(100vh - 57px);max-height:calc(100vh - 57px);overflow-y:auto;}
.hh-campus-grp{color:#B8924A;font-size:.72rem;font-weight:800;margin:10px 10px 5px;letter-spacing:.3px;}
.hh-campus-grp:first-child{margin-top:2px;}
.hh-campus-nav{display:flex;align-items:center;gap:10px;width:100%;text-align:right;padding:9px 11px;border-radius:11px;color:#EAD9B0;font-weight:800;font-size:.95rem;cursor:pointer;margin-bottom:4px;background:transparent;border:1px solid transparent;font-family:'Cairo',sans-serif;transition:background .15s;}
.hh-campus-nav:hover{background:rgba(212,188,133,.1);}
.hh-campus-nav.on{background:rgba(212,188,133,.16);border-color:rgba(212,188,133,.35);color:#FDF3DD;}
.hh-campus-nav-ic{width:32px;height:32px;border-radius:9px;background:rgba(212,188,133,.1);border:1px solid rgba(212,188,133,.4);color:#EAD9B0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.hh-campus-nav.on .hh-campus-nav-ic{background:linear-gradient(135deg,#EAD9B0,#B8924A);border-color:#FDF3DD;color:#3D0918;}
.hh-campus-nav.locked{opacity:.78;}
.hh-campus-lock{margin-right:auto;color:#B8924A;display:inline-flex;}
.hh-campus-nav-minor{margin-top:14px;font-size:.82rem;opacity:.75;}
.hh-campus-nav-cta{margin-top:14px;background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;color:#3D0918 !important;border-color:#FDF3DD !important;}
.hh-campus-nav-cta .hh-campus-nav-ic{background:rgba(61,9,24,.12);border-color:rgba(61,9,24,.3);color:#3D0918;}
.hh-campus-lockbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:linear-gradient(135deg,#FFFDF8,#F5E6C4);border:2px solid #B8924A;border-radius:14px;padding:10px 14px;margin-bottom:12px;color:#5E0E26;font-weight:800;font-size:.95rem;}
.hh-campus-lockbar[hidden]{display:none !important;}
.hh-campus-lockbar span{flex:1;min-width:200px;}
.hh-campus-mount.hh-campus-locked{position:relative;pointer-events:none;opacity:.72;filter:saturate(.7);}
/* ── جناح صفوفي وطلابي ── */
.hh-cls-card{display:block;}
#hh-campus-classes-list{display:block;}
#hh-campus-classes-list .hh-campus-card{margin-bottom:10px;}
.hh-cls-arch{opacity:.7;border-style:dashed;}
.hh-cls-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.hh-cls-main{flex:1;min-width:200px;}
.hh-cls-codebox{display:flex;align-items:center;gap:6px;}
.hh-cls-code{font-family:'Cairo',monospace;font-weight:900;font-size:1.5rem;letter-spacing:3px;color:#8A1538;background:linear-gradient(135deg,#F5E6C4,#EAD9B0);border:1.5px solid #B8924A;border-radius:12px;padding:4px 14px;}
.hh-cls-ib{width:36px;height:36px;border-radius:9px;background:#fff;border:1.5px solid #B8924A;color:#8A1538;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:Cairo;font-weight:900;}
.hh-cls-ib:hover{background:#FBF3E1;}
.hh-cls-fold{margin-top:10px;border-top:1px dashed #D9C79E;padding-top:10px;}
.hh-cls-fold[hidden]{display:none !important;}
.hh-cls-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px;}
.hh-cls-tools input[type=text]{flex:1;min-width:180px;border:1.5px solid #D9C79E;border-radius:10px;padding:8px 12px;font-family:Cairo;font-size:.95rem;color:#3D0918;}
.hh-cls-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px;}
.hh-cls-st{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #EAD9B0;border-radius:10px;padding:7px 10px;font-size:.95rem;font-weight:800;color:#3D0918;}
.hh-cls-st small{color:#8A7A63;font-weight:700;margin-right:6px;}
.hh-cls-st-r{display:flex;align-items:center;gap:6px;}
.hh-cls-st-r .hh-cls-ib{width:28px;height:28px;border-radius:7px;font-size:1rem;}
.hh-cls-ok{background:rgba(61,107,83,.12);color:#3D6B53;border-color:rgba(61,107,83,.4);}
.hh-cls-form{border-color:#B8924A;border-width:2px;}
.hh-cls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0;}
.hh-cls-grid label{display:flex;flex-direction:column;gap:4px;color:#8A6D2E;font-size:.82rem;font-weight:800;}
.hh-cls-grid input,.hh-cls-grid select{border:1.5px solid #D9C79E;border-radius:10px;padding:9px 12px;font-family:Cairo;font-size:.95rem;color:#3D0918;background:#fff;}
.hh-cls-bulk{background:#fff;border:2px dashed #B8924A;border-radius:14px;padding:12px 14px;margin:6px 0 10px;}
.hh-cls-bulk textarea{width:100%;border:1.5px solid #D9C79E;border-radius:10px;padding:9px 12px;font-family:Cairo;font-size:.95rem;color:#3D0918;margin-top:8px;box-sizing:border-box;}
.hh-cls-file{cursor:pointer;}
.hh-cls-big{position:fixed;inset:0;z-index:999990;background:linear-gradient(160deg,#2B0912,#5E0E26);display:flex;align-items:center;justify-content:center;padding:20px;direction:rtl;font-family:Cairo,sans-serif;}
.hh-cls-big-in{text-align:center;color:#F5E6C4;max-width:900px;width:100%;}
.hh-cls-big-t{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:900;}
.hh-cls-big-l{color:#EAD9B0;font-size:clamp(1rem,2vw,1.4rem);margin-top:10px;}
.hh-cls-big-code{white-space:nowrap;font-size:clamp(2.4rem,9vw,7rem);font-weight:900;letter-spacing:.12em;color:#FDF3DD;background:rgba(212,188,133,.1);border:3px solid #B8924A;border-radius:28px;padding:10px 30px;margin:16px auto;display:inline-block;}
.hh-cls-big-h{font-size:clamp(1rem,2.2vw,1.5rem);color:#EAD9B0;}
.hh-cls-big-n{font-size:1.2rem;margin:14px 0;color:#F5E6C4;font-weight:800;}
.hh-campus-stage{padding:16px 18px 48px;min-width:0;}
.hh-campus-crumb-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.hh-campus-crumb{color:#8A7A63;font-size:.9rem;font-weight:700;}
.hh-campus-crumb #hh-campus-crumb{color:#8A1538;}
.hh-campus-btn-gold{background:linear-gradient(135deg,#EAD9B0,#B8924A);border:1px solid #FDF3DD;border-radius:11px;padding:9px 18px;color:#3D0918;font-weight:800;font-size:.9rem;cursor:pointer;font-family:'Cairo',sans-serif;box-shadow:0 3px 10px rgba(138,109,46,.22);display:inline-flex;align-items:center;gap:6px;}
.hh-campus-btn-maroon{background:linear-gradient(175deg,#7A1330,#4A0B1E);color:#F5E6C4;border:1px solid #B8924A;border-radius:9px;padding:7px 14px;font-size:.84rem;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:6px;}
.hh-campus-btn-line{background:rgba(138,21,56,.06);border:1px solid rgba(184,146,74,.6);border-radius:9px;padding:7px 14px;color:#8A1538;font-size:.84rem;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;display:inline-flex;align-items:center;gap:6px;}
.hh-campus-btn-line:hover{background:rgba(138,21,56,.12);}
.hh-campus-hello{color:#3D0918;font-weight:900;font-size:1.3rem;}
.hh-campus-sub{color:#8A7A63;font-size:.92rem;margin-top:3px;margin-bottom:12px;}
.hh-campus-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px;}
.hh-campus-stat{background:linear-gradient(170deg,#FFFDF8,#FBF5E9);border:1.5px solid #D9C79E;border-radius:14px;padding:12px 14px;}
.hh-campus-stat-l{color:#8A7A63;font-size:.86rem;font-weight:700;}
.hh-campus-stat-n{color:#3D0918;font-size:1.7rem;font-weight:900;line-height:1.2;margin-top:2px;}
.hh-campus-sec{color:#8A1538;font-weight:800;font-size:1rem;margin:14px 2px 9px;display:flex;align-items:center;gap:8px;}
.hh-campus-sec-dot{width:7px;height:7px;background:#B8924A;transform:rotate(45deg);}
.hh-campus-classes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;}
.hh-campus-card{background:linear-gradient(170deg,#FFFDF8,#FBF5E9);border:1.5px solid #D9C79E;border-radius:15px;padding:13px 14px;position:relative;}
.hh-campus-card-accent{border-color:#B8924A;cursor:pointer;margin-bottom:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hh-campus-card-accent .hh-campus-card-d{flex:1;min-width:160px;margin-top:0;}
.hh-campus-card-t{color:#3D0918;font-weight:900;font-size:1.05rem;}
.hh-campus-card-d{color:#8A7A63;font-size:.88rem;margin-top:3px;line-height:1.7;}
.hh-campus-code{color:#8A1538;letter-spacing:1px;font-size:1rem;}
.hh-campus-card-btns{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.hh-campus-card-btns button{flex:1;justify-content:center;}
.hh-campus-chip{background:rgba(138,21,56,.08);border:1px solid rgba(184,146,74,.5);border-radius:99px;padding:4px 12px;color:#8A1538;font-size:.82rem;font-weight:800;display:inline-flex;align-items:center;gap:4px;}
.hh-campus-empty{grid-column:1/-1;background:#FFFDF8;border:1.5px dashed #D9C79E;border-radius:15px;padding:22px;text-align:center;color:#8A7A63;font-size:.95rem;font-weight:700;}
.hh-campus-empty-t{color:#8A1538;font-weight:800;font-size:1rem;}
.hh-campus-row-end{display:flex;justify-content:flex-start;margin-top:12px;}
.hh-campus-pulse{margin-top:14px;background:rgba(255,255,255,.6);border:1px dashed #D9C79E;border-radius:12px;padding:9px 15px;color:#8A7A63;font-size:.86rem;}
/* الخدمات المتبنّاة داخل المسرح: تُبطل حالتها الثابتة وتملأ عرض المسرح */
.hh-campus-mount[hidden]{display:none !important;}
.hh-campus-adopted{position:relative !important;inset:auto !important;z-index:auto !important;background:transparent !important;padding:0 !important;overflow:visible !important;display:block !important;min-height:0 !important;font-size:1.06rem;}
.hh-campus-adopted > div{max-width:none !important;width:100% !important;margin-bottom:0 !important;}
/* داخل الحرم: لا تكرار للبوابات ولا أزرار رجوع/رئيسية داخلية (الجناح يقوم بذلك) */
.hh-campus-adopted #hh-sch-services{display:none !important;}
.hh-campus-adopted button[onclick="hhSchBack()"],
.hh-campus-adopted button[onclick="hhSchHome()"]{display:none !important;}
/* الجوال: الجناح يتحول إلى شريط علوي أفقي بالأيقونة والتسمية */
@media (max-width:760px){
.hh-campus-body{grid-template-columns:1fr;}
.hh-campus-side{position:sticky;top:57px;min-height:0;max-height:none;border-left:none;border-bottom:2px solid #B8924A;padding:8px 8px;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
.hh-campus-side::-webkit-scrollbar{display:none;}
.hh-campus-grp{display:none;}
.hh-campus-nav{flex-direction:column;gap:5px;width:auto;flex:0 0 auto;padding:6px 10px;margin:0;font-size:.78rem;text-align:center;}
.hh-campus-nav-ic{width:36px;height:36px;}
.hh-campus-stage{padding:12px 12px 40px;}
.hh-campus-title{font-size:.95rem;}
.hh-campus-top-spacer{display:none;}
.hh-campus-hello{font-size:1.12rem;}
.hh-campus-adopted{font-size:1rem;}
}
/* ══════════════ كتالوج لوحة التحكم: المدارس والمناهج (hhc) ══════════════ */
.hhc-hero{background:linear-gradient(135deg,#4A0B1E,#5E0E26);border:1.5px solid #B8924A;border-radius:16px;padding:18px 20px;margin-bottom:14px;color:#F5E6C4;}
.hhc-hero h3{margin:0 0 5px;font-family:'Cairo',sans-serif;font-weight:900;font-size:1.15rem;color:#F5E6C4;}
.hhc-hero p{margin:0;font-size:.9rem;color:#EAD9B0;line-height:1.8;}
.hhc-badge{display:inline-block;min-width:20px;padding:1px 7px;border-radius:99px;background:rgba(184,146,74,.22);color:#8A6D2E;font-size:.72rem;font-weight:800;margin-right:4px;text-align:center;}
.mc-item.active .hhc-badge{background:rgba(255,255,255,.25);color:#fff;}
.hhc-root{font-family:'Cairo','Tajawal',sans-serif;}
.hhc-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.hhc-search{flex:1 1 220px;display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid #D9C79E;border-radius:12px;padding:0 12px;color:#8A6D2E;}
.hhc-search input{flex:1;border:none;background:transparent;padding:9px 0;font-family:'Cairo',sans-serif;font-size:.92rem;color:#3D0918;outline:none;min-width:0;}
.hhc-bar select,.hhc-grid select,.hhc-grid input,.hhc-grid textarea{border:1.5px solid #D9C79E;border-radius:10px;background:#fff;padding:8px 10px;font-family:'Cairo',sans-serif;font-size:.9rem;color:#3D0918;}
.hhc-bar select{padding:8px 12px;}
.hhc-grid select:focus,.hhc-grid input:focus,.hhc-grid textarea:focus,.hhc-search:focus-within{border-color:#B8924A;outline:none;box-shadow:0 0 0 3px rgba(184,146,74,.18);}
.hhc-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid #B8924A;border-radius:10px;padding:8px 14px;color:#8A1538;font-family:'Cairo',sans-serif;font-weight:800;font-size:.86rem;cursor:pointer;transition:all .15s;}
.hhc-btn:hover{background:#FBF3E1;}
.hhc-btn-primary{background:linear-gradient(135deg,#EAD9B0,#B8924A);border-color:#FDF3DD;color:#3D0918;box-shadow:0 3px 10px rgba(138,109,46,.22);}
.hhc-btn-primary:hover{background:linear-gradient(135deg,#F5E6C4,#C9A25A);}
.hhc-btn-sm{padding:5px 10px;font-size:.78rem;border-radius:8px;}
.hhc-btn-danger{color:#c0392b;border-color:rgba(192,57,43,.45);}
.hhc-btn-danger:hover{background:#fdecea;}
.hhc-count{color:#8A7A63;font-size:.86rem;font-weight:700;margin:2px 4px 8px;}
.hhc-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:linear-gradient(170deg,#FFFDF8,#FBF5E9);border:1.5px solid #D9C79E;border-radius:14px;padding:12px 14px;margin-bottom:8px;}
.hhc-card.hhc-hidden{opacity:.72;border-style:dashed;}
.hhc-card-main{flex:1;min-width:0;}
.hhc-card-t{color:#3D0918;font-weight:900;font-size:1.02rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hhc-code{background:rgba(184,146,74,.16);color:#8A6D2E;border-radius:6px;padding:1px 7px;font-size:.74rem;font-weight:800;}
.hhc-card-d{color:#8A7A63;font-size:.86rem;margin-top:3px;line-height:1.7;display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.hhc-card-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.hhc-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(138,21,56,.07);border:1px solid rgba(184,146,74,.5);border-radius:99px;padding:3px 11px;color:#8A1538;font-family:'Cairo',sans-serif;font-size:.78rem;font-weight:800;cursor:pointer;}
.hhc-chip:hover{background:rgba(138,21,56,.14);}
.hhc-chip-plain{background:#fff;color:#8A7A63;cursor:default;font-weight:700;}
.hhc-card-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;}
.hhc-status{background:rgba(61,107,83,.12);color:#3D6B53;border-radius:99px;padding:3px 10px;font-size:.74rem;font-weight:800;}
.hhc-status.off{background:rgba(184,146,74,.16);color:#8A6D2E;}
.hhc-warn{color:#c0392b;font-weight:800;}
.hhc-empty{background:#FFFDF8;border:1.5px dashed #D9C79E;border-radius:14px;padding:22px;text-align:center;color:#8A7A63;font-size:.92rem;font-weight:700;}
.hhc-form{background:#fff;border:2px solid #B8924A;border-radius:14px;padding:14px 16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(94,14,38,.08);}
.hhc-form-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#5E0E26;font-weight:900;font-size:1rem;margin-bottom:10px;}
.hhc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}
.hhc-grid label{display:flex;flex-direction:column;gap:4px;color:#8A6D2E;font-size:.8rem;font-weight:800;}
.hhc-grid .hhc-span{grid-column:1/-1;}
.hhc-grid select[multiple]{min-height:74px;}
.hhc-form-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;}
.hhc-hint{color:#8A7A63;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;}
@media (max-width:700px){
.hhc-card{flex-direction:column;}
.hhc-card-acts{justify-content:flex-start;}
}
/* ══════════════ رحلة الدرس على الخريطة (hj) · خط كبير وهوية ملكية ══════════════ */
.hh-stage-launch{background:linear-gradient(135deg,#B8924A,#8A6D2E) !important;color:#FFFDF8 !important;}
.hj-launch{background:linear-gradient(135deg,#8A1538,#5E0E26) !important;color:#F5E6C4 !important;border:1px solid #B8924A !important;border-radius:8px;padding:4px 11px;font-family:Cairo;font-weight:900;font-size:.72rem;cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
.hj{position:fixed;inset:0;z-index:999976;background:linear-gradient(180deg,#F6F1E7,#EFE7D6);overflow-y:auto;direction:rtl;font-family:'Cairo','Tajawal',sans-serif;padding:0 0 30px;}
.hj-top{position:sticky;top:0;z-index:5;background:linear-gradient(175deg,#4A0B1E,#5E0E26);border-bottom:2px solid #B8924A;padding:10px 16px;display:flex;align-items:center;gap:12px;color:#F5E6C4;}
.hj-back{background:rgba(212,188,133,.12);border:1px solid rgba(212,188,133,.5);border-radius:9px;height:36px;padding:0 13px;color:#F5E6C4;font-family:Cairo;font-weight:800;font-size:.9rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;}
.hj-title{flex:1;min-width:0;}
.hj-t1{font-weight:900;font-size:1.15rem;line-height:1.3;}
.hj-t2{font-size:.8rem;color:#EAD9B0;}
.hj-hud{display:flex;align-items:baseline;gap:5px;}
.hj-pts{font-size:1.5rem;font-weight:900;color:#EAD9B0;}
.hj-pts-l{font-size:.78rem;color:#EAD9B0;}
.hj-streak{font-size:.8rem;color:#F5E6C4;background:rgba(212,188,133,.18);border-radius:99px;padding:2px 10px;margin-right:6px;}
.hj-streak:empty{display:none;}
.hj-mapwrap{position:relative;max-width:960px;margin:14px auto 0;padding:0 12px;min-height:420px;}
@media (min-width:641px){ .hj-scroll{max-height:none;} .hj-map{min-height:420px;} }
.hj-map{width:100%;display:block;background:linear-gradient(170deg,#FFFDF8,#F7EFDD);border:2px solid #B8924A;border-radius:18px;box-shadow:0 8px 28px rgba(94,14,38,.12);}
.hj-lm{cursor:pointer;}
.hj-lm .hj-ring{fill:#FFFDF8;stroke:#B8924A;stroke-width:2.5;}
.hj-lm.open .hj-ring{stroke:#8A1538;stroke-width:4;}
.hj-lm.done .hj-ring{fill:#EAD9B0;stroke:#8A1538;}
.hj-lm.lock{opacity:.4;cursor:not-allowed;}
.hj-lm .hj-gl{fill:none;stroke:#5E0E26;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.hj-lm text{font-size:13px;font-weight:800;text-anchor:middle;fill:#3D0918;font-family:Cairo;}
#hj-avatar{transition:transform .8s ease;}
#hj-path-done{transition:stroke-dashoffset .8s ease;}
.hj-toast{position:absolute;top:12px;right:50%;transform:translateX(50%);background:linear-gradient(135deg,#EAD9B0,#B8924A);color:#3D0918;border:1px solid #FDF3DD;border-radius:99px;padding:7px 18px;font-size:1rem;font-weight:900;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 4px 14px rgba(138,109,46,.3);z-index:4;}
.hj-toast.on{opacity:1;}
.hj-legend{max-width:960px;margin:8px auto 0;padding:0 14px;color:#8A7A63;font-size:.9rem;font-weight:700;text-align:center;}
/* اللفافة */
.hj-scroll{position:absolute;top:10px;right:22px;left:22px;bottom:10px;background:#FFFDF8;border:2.5px solid #B8924A;border-radius:18px;padding:16px 18px;overflow:auto;display:none;box-shadow:0 14px 40px rgba(61,9,24,.25);}
.hj-scroll.on{display:block;animation:hjUnroll .35s ease;}
@keyframes hjUnroll{from{transform:scaleY(.7);opacity:0}to{transform:scaleY(1);opacity:1}}
.hj-sh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;border-bottom:1px solid #EAD9B0;padding-bottom:8px;}
.hj-sh b{font-size:1.2rem;color:#5E0E26;font-weight:900;}
.hj-fold{background:#fff;border:1.5px solid #B8924A;border-radius:9px;padding:6px 12px;color:#8A1538;font-family:Cairo;font-weight:800;font-size:.85rem;cursor:pointer;}
.hj-p{font-size:1.1rem;line-height:2;color:#3D0918;font-weight:700;margin:6px 0;}
.hj-text{background:#FBF5E9;border:1px solid #EAD9B0;border-radius:12px;padding:12px 14px;}
.hj-story-intro{color:#8A6D2E;font-size:1rem;}
.hj-sec{color:#8A1538;font-weight:900;font-size:1rem;margin:16px 0 8px;display:flex;align-items:center;gap:8px;}
.hj-sec::before{content:'';width:7px;height:7px;background:#B8924A;transform:rotate(45deg);}
.hj-meta{color:#8A7A63;font-size:.88rem;font-weight:700;margin-bottom:6px;}
.hj-stats{display:flex;gap:18px;flex-wrap:wrap;margin:10px 0;justify-content:center;}
.hj-stats div{text-align:center;font-size:.85rem;color:#8A7A63;font-weight:700;}
.hj-stats b{display:block;font-size:1.7rem;color:#3D0918;font-weight:900;line-height:1.2;}
.hj-ol{margin:0;padding-right:22px;}
.hj-ol li{font-size:1.05rem;line-height:1.9;color:#3D0918;font-weight:700;margin-bottom:4px;}
.hj-nav{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-top:14px;}
.hj-btn{background:#fff;border:1.5px solid #B8924A;border-radius:11px;padding:10px 18px;color:#8A1538;font-family:Cairo;font-weight:900;font-size:1rem;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
.hj-btn-gold{background:linear-gradient(135deg,#EAD9B0,#B8924A);border-color:#FDF3DD;color:#3D0918;box-shadow:0 3px 10px rgba(138,109,46,.25);}
/* الأسئلة والمؤقت */
.hj-qhead{display:flex;align-items:center;gap:12px;margin:6px 0 4px;}
.hj-timer{position:relative;width:52px;height:52px;flex-shrink:0;}
.hj-timer svg{transform:rotate(-90deg);}
.hj-timer .bg{fill:none;stroke:#EAD9B0;stroke-width:5;}
.hj-timer .fg{fill:none;stroke:#B8924A;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear;}
.hj-timer.hot .fg{stroke:#8A1538;}
.hj-timer .n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;color:#3D0918;}
.hj-qt{font-size:1.25rem;line-height:1.7;color:#3D0918;font-weight:900;flex:1;}
.hj-opt{display:block;width:100%;text-align:right;background:#fff;border:1.5px solid #D9C79E;border-radius:12px;padding:11px 14px;margin-top:8px;font-family:Cairo;font-size:1.08rem;font-weight:800;color:#3D0918;cursor:pointer;transition:all .15s;}
.hj-opt:hover{border-color:#B8924A;background:#FBF5E9;}
.hj-opt.ok{border-color:#B8924A;background:linear-gradient(135deg,#F5E6C4,#EAD9B0);animation:hjGlow .6s;}
.hj-opt.bad{border-color:#8A1538;background:#F7ECEF;}
.hj-opt.dim{opacity:.45;}
@keyframes hjGlow{0%{box-shadow:0 0 0 0 rgba(184,146,74,.7)}100%{box-shadow:0 0 0 14px rgba(184,146,74,0)}}
.hj-fb{margin-top:8px;font-size:1rem;font-weight:800;min-height:22px;line-height:1.7;}
.hj-fb.ok{color:#8A6D2E;}
.hj-fb.bad{color:#7A1330;}
/* الكلمات المتقطعة والبطاقات */
.hj-blank{display:inline-block;min-width:84px;border-bottom:2.5px solid #B8924A;text-align:center;cursor:pointer;color:#8A1538;padding:0 6px;margin:0 2px;}
.hj-blank.ok{border-color:#8A6D2E;color:#3D0918;background:#F5E6C4;border-radius:6px;}
.hj-pool{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
.hj-chip{background:#fff;border:1.5px solid #B8924A;border-radius:99px;padding:8px 16px;font-family:Cairo;font-size:1rem;font-weight:800;color:#5E0E26;cursor:pointer;}
.hj-chip.sel{background:linear-gradient(135deg,#EAD9B0,#B8924A);color:#3D0918;}
.hj-chip.used{opacity:.3;pointer-events:none;}
.hj-flip{min-width:120px;}
.hj-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;}
.hj-val{background:linear-gradient(165deg,#5E0E26,#3D0918);border:1px solid rgba(212,188,133,.55);border-radius:12px;padding:10px 14px;color:#F5E6C4;font-size:1rem;font-weight:800;line-height:1.8;}
/* الصور من الكتاب */
.hj-fig{margin:8px 0;border:2px solid #B8924A;border-radius:14px;padding:6px;background:#fff;}
.hj-fig img{width:100%;height:auto;display:block;border-radius:10px;}
.hj-fig figcaption{text-align:center;color:#8A6D2E;font-size:.95rem;font-weight:800;padding:6px 0 2px;}
.hj-imgq{background:#FBF5E9;border:1px solid #EAD9B0;border-radius:12px;padding:10px 12px;margin:6px 0 12px;}
.hj-empty{background:#fff;border:1.5px dashed #D9C79E;border-radius:12px;padding:14px;text-align:center;color:#8A7A63;font-weight:700;font-size:.95rem;}
.hj-editor{background:#fff;border:2px dashed #B8924A;border-radius:14px;padding:12px 14px;margin-top:10px;display:grid;gap:8px;}
.hj-editor-t{color:#8A1538;font-weight:900;font-size:.95rem;}
.hj-file{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#EAD9B0,#B8924A);border-radius:10px;padding:9px 14px;color:#3D0918;font-weight:900;font-size:.95rem;cursor:pointer;width:max-content;}
.hj-file input{display:none;}
.hj-prev{max-width:260px;border-radius:10px;border:1.5px solid #B8924A;}
.hj-editor input[type=text]{border:1.5px solid #D9C79E;border-radius:10px;padding:9px 12px;font-family:Cairo;font-size:.95rem;color:#3D0918;}
.hj-row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
.hj-done{text-align:center;padding:8px 0;}
.hj-badge{display:inline-block;font-size:2rem;font-weight:900;border-radius:16px;padding:8px 28px;margin-bottom:6px;}
.hj-badge.top{background:linear-gradient(135deg,#EAD9B0,#B8924A);color:#3D0918;}
.hj-badge.mid{background:#FBF5E9;color:#8A6D2E;border:2px solid #B8924A;}
.hj-badge.low{background:#F7ECEF;color:#7A1330;border:2px solid #7A1330;}
@media (max-width:640px){
.hj-scroll{position:fixed;top:64px;right:6px;left:6px;bottom:6px;padding:12px;z-index:6;}
.hj-lm text{font-size:15px;}
.hj-qt{font-size:1.15rem;}
.hj-t1{font-size:1rem;}
.hj-hud .hj-pts{font-size:1.25rem;}
}
body.hh-immersive::before, body.hh-immersive::after{ display:none !important; }
body.hh-immersive #hh-fin-tr, body.hh-immersive #hh-fin-br,
body.hh-immersive #hh-fin-tl, body.hh-immersive #hh-fin-bl{ display:none !important; }
body.hh-immersive #screen-board{ padding-top:0 !important; }
/* خلفية الملعب */
#screen-board{ background:linear-gradient(180deg,#F6F1E7,#EFE7D6) !important; }
/* شريط اللوحة العلوي: عنابي ملكي */
#board-top-bar{
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-bottom:2px solid #B8924A !important;
box-shadow:0 3px 14px rgba(61,9,24,.3) !important;
}
#board-top-bar .pu-lbl{ color:#EAD9B0 !important; font-weight:800 !important; }
#turn-badge{
background:rgba(212,188,133,.1) !important;
border:1px solid rgba(212,188,133,.5) !important;
border-radius:12px !important; overflow:hidden !important;
}
/* الخلايا: ثلاث سلالات ملكية (تعلو الأنماط السطرية) */
.qcell.easy{
background:linear-gradient(160deg,#FDF9EF,#F2E7CE) !important;
border:1.5px solid #B8924A !important;
border-radius:10px !important;
box-shadow:0 2px 0 #D4BC85 !important;
}
.qcell.easy .qpts{ color:#8A6D2E !important; }
.qcell.med{
background:linear-gradient(160deg,#8A6D2E,#5E4A1E) !important;
border:1.5px solid #D4BC85 !important;
border-radius:10px !important;
box-shadow:0 2px 0 #4A3A14 !important;
}
.qcell.med .qpts{ color:#FDF3DD !important; }
.qcell.hard{
background:linear-gradient(160deg,#7A1330,#4A0B1E) !important;
border:1.5px solid #B8924A !important;
border-radius:10px !important;
box-shadow:0 2px 0 #2E0710 !important;
}
.qcell.hard .qpts{ color:#F5E6C4 !important; }
.qcell.used{
background:#EDE6D8 !important;
border:1.5px dashed #C9BFA8 !important;
box-shadow:none !important;
}
.qcell.used .qpts{ color:#B8AD94 !important; text-decoration:line-through; }
/* بطاقة الفئة الوسطى: عاجية ملكية تصون الصور */
.cat-center{
background:linear-gradient(165deg,#FFFFFF,#F4ECDC) !important;
border:1.5px solid #B8924A !important;
border-radius:12px !important;
box-shadow:0 3px 10px rgba(94,14,38,.08) !important;
}
.cat-center .cc-label-bar{
background:linear-gradient(135deg,#7A1330,#4A0B1E) !important;
color:#F5E6C4 !important;
border-top:1.5px solid #B8924A !important;
}
/* شريط الفرق السفلي */
#board-bottom-bar{
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-top:1.5px solid #B8924A !important;
}
/* ═══ مودال السؤال الملكي ═══ */
#q-modal .qm-box{
background:#FBF7F0 !important;
border:2px solid #B8924A !important;
border-top:5px solid #8A1538 !important;
border-radius:18px !important;
box-shadow:0 24px 60px rgba(30,6,15,.5) !important;
}
#q-modal .qm-top{
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
border-bottom:2px solid #B8924A !important;
border-radius:13px 13px 0 0 !important;
padding:10px 14px !important;
margin:-1px -1px 10px !important;
}
#q-modal .qm-cat{ color:#EAD9B0 !important; font-weight:800 !important; }
#q-modal #qm-pts{ color:#F5E6C4 !important; }
#q-modal .qm-badge{
border:1px solid #D4BC85 !important; color:#F5E6C4 !important;
border-radius:99px !important;
}
#q-modal .qm-badge.easy{ background:#8A6D2E !important; }
#q-modal .qm-badge.med{ background:#B8792E !important; }
#q-modal .qm-badge.hard{ background:#7A1330 !important; }
#q-modal .timer-wrap .t-track{ stroke:#EDE0C8 !important; }
#q-modal .timer-wrap .t-prog{ stroke:#B8924A !important; }
#q-modal .t-num{ color:#5E0E26 !important; font-weight:800 !important; }
#q-modal .qm-text{
background:#fff !important;
border:1.5px solid #B8924A !important;
border-radius:13px !important;
color:#2A1A0E !important;
box-shadow:none !important;
}
#q-modal .answer-reveal-btn{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
color:#3D0918 !important;
border:1px solid #FDF3DD !important;
border-radius:13px !important;
font-weight:800 !important;
box-shadow:0 4px 12px rgba(138,109,46,.3) !important;
}
#q-modal .answer-box{
border:1.5px solid #3D6B53 !important;
border-radius:13px !important;
}
#q-modal .pu-btn{
border:1.5px solid #B8924A !important;
border-radius:10px !important;
background:#fff !important;
}
/* ═══ الكلمة الأخيرة v4: الشريط السفلي المستوي — الخمسة متطابقون تماماً ═══ */
.hh-bottom-nav{ align-items:center !important; padding-top:8px !important; padding-bottom:9px !important; }
.hh-bottom-nav .hh-nav-item,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara,
.hh-bottom-nav .hh-nav-item.active,
.hh-bottom-nav .hh-nav-item:hover{
transform:none !important;
padding:0 !important;
justify-content:center !important;
}
.hh-bottom-nav .hh-nav-item:active{ transform:scale(.93) !important; }
.hh-bottom-nav .hh-nav-icon,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-icon,
.hh-bottom-nav .hh-nav-item.active .hh-nav-icon{
width:36px !important; height:36px !important;
border-radius:11px !important;
background:rgba(212,188,133,.08) !important;
border:1px solid rgba(212,188,133,.4) !important;
color:#EAD9B0 !important;
box-shadow:none !important;
transform:none !important;
margin:0 auto !important;
}
.hh-bottom-nav .hh-nav-item.active .hh-nav-icon{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
border-color:#FDF3DD !important;
color:#3D0918 !important;
}
.hh-bottom-nav .hh-nav-label,
.hh-bottom-nav .hh-nav-item.hh-nav-mihbara .hh-nav-label,
.hh-bottom-nav .hh-nav-item.active .hh-nav-label{
font-size:.8rem !important; margin-top:3px !important;
color:#EAD9B0 !important; transform:none !important;
}
.hh-bottom-nav .hh-nav-item.active .hh-nav-label{ color:#FDF3DD !important; }
.hh-bottom-nav .hh-nav-icon::before, .hh-bottom-nav .hh-nav-item::before{ display:none !important; }
/* ═══ الصفحة الخارجية: خط Baloo Bhaijaan 2 الاحترافي المدور ═══ */
#screen-landing, #screen-landing *:not(svg):not(path){
font-family:'Baloo Bhaijaan 2','Cairo','Tajawal',sans-serif !important;
letter-spacing:0 !important;
}
#screen-landing .landing-eyebrow, #screen-landing .lp-section-eyebrow{
letter-spacing:0 !important;
font-weight:700 !important;
}
/* شارات العناوين: مشدودة رسمية بكبسولة بدل التباعد الآلي */
.lp-section-eyebrow{
display:inline-block !important;
background:rgba(138,21,56,.07) !important;
border:1px solid rgba(184,146,74,.45) !important;
border-radius:99px !important;
padding:4px 18px !important;
color:#8A1538 !important;
font-weight:700 !important;
}
/* منع أي تباعد أحرف مستقبلي في النصوص العربية */
[dir="rtl"] .hh-quote-badge, .dq-label{ letter-spacing:0 !important; }
/* ═══ الشريط العلوي: الصف الواحد النقي (الاعتماد الأول) ═══ */
.main-nav-inner{
display:flex !important; align-items:center !important;
justify-content:space-between !important; gap:14px !important;
max-width:1500px; margin:0 auto; width:100%;
}
#nav-center{
display:flex; align-items:center; justify-content:center;
gap:8px; flex:1; min-width:0; flex-wrap:nowrap;
}
#nav-center .main-nav-links{
display:flex; align-items:center; gap:7px;
list-style:none; margin:0; padding:0; flex-wrap:nowrap;
}
#nav-center .nav-search-container{ margin:0 !important; }
#nav-center .nav-search-wrap{ min-width:185px; max-width:220px; }
/* في الرئيسية تختفي روابط الجوال المكررة من الوسط */
@media (min-width:1101px){ #nav-center .nav-dup{ display:none !important; } }
/* كبسولة الحساب الذهبية */
.main-nav .profile-btn{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
border:1px solid #FDF3DD !important;
border-radius:99px !important;
padding:4px 6px 4px 14px !important;
display:inline-flex !important; align-items:center !important; gap:6px !important;
}
.main-nav .profile-btn #ub-name{ color:#3D0918 !important; font-weight:800 !important; font-size:.8rem !important; }
.main-nav .profile-avatar{
width:24px !important; height:24px !important; border-radius:50% !important;
background:#4A0B1E !important; color:#F5E6C4 !important;
border:1.5px solid #FDF3DD !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-weight:800 !important; font-size:.72rem !important;
}
/* أيقونات المجموعة: مؤطرة موحدة */
.main-nav .nav-icon-in-group{
width:30px !important; height:30px !important; border-radius:9px !important;
background:rgba(212,188,133,.1) !important;
border:1px solid rgba(212,188,133,.45) !important;
color:#EAD9B0 !important;
}
/* ═══ البرامج التربوية والواثق: بنية قوية بطراز «العب الآن» ═══ */
#hh-leaders > div:first-child > div:first-child,
#hh-leaders .hh-ldr-head{
position:sticky; top:0; z-index:20;
}
#hh-leaders{
background:linear-gradient(180deg,#F6F1E7,#EFE7D6) !important;
padding-top:0 !important;
}
/* رأس البرامج: شريط عنابي كامل العرض ملتصق */
#hh-leaders .hh-ldr-topbar{
position:sticky; top:0; z-index:30;
margin:-18px -14px 14px;
background:linear-gradient(175deg,#4A0B1E,#5E0E26);
border-bottom:2px solid #B8924A;
box-shadow:0 3px 14px rgba(61,9,24,.3);
padding:10px 16px;
}
#hh-wathiq{ padding-top:0 !important; }
/* ═══ ثنائي البطل المعتمد: المقولة الديوانية وميداليات الأرقام ═══ */
#screen-menu .hh-quote-royal{
position:relative !important; overflow:visible !important;
background:linear-gradient(170deg,#FFFDF8,#FBF5E9) !important;
border:1.5px solid #B8924A !important;
border-radius:20px !important;
padding:30px 26px 18px !important;
box-shadow:0 10px 30px rgba(94,14,38,.09) !important;
margin-top:16px !important;
}
#screen-menu .hh-quote-royal::before{
content:''; position:absolute; inset:7px;
border:1px solid rgba(184,146,74,.35); border-radius:14px; pointer-events:none;
}
#screen-menu .hh-quote-royal::after{
content:'❝'; position:absolute; top:12px; right:20px;
font-size:56px; line-height:1; color:rgba(184,146,74,.2);
font-family:Georgia,serif; pointer-events:none;
}
#screen-menu .hh-quote-head{ position:static !important; }
#screen-menu .hh-quote-line{ display:none !important; }
#screen-menu .hh-quote-badge{
position:absolute !important; top:-15px !important;
right:50% !important; transform:translateX(50%) !important;
background:linear-gradient(175deg,#4A0B1E,#5E0E26) !important;
color:#F5E6C4 !important;
border:1.5px solid #B8924A !important;
border-radius:99px !important;
padding:6px 22px !important;
font-weight:800 !important; font-size:.8rem !important;
white-space:nowrap !important;
box-shadow:0 4px 12px rgba(61,9,24,.3) !important;
letter-spacing:0 !important;
}
#screen-menu .hh-quote-text{
font-size:1.28rem !important; font-weight:700 !important;
line-height:2.1 !important; color:#3D0918 !important;
text-align:center !important; margin:6px 8px 14px !important;
}
#screen-menu .hh-quote-sign{
display:flex !important; align-items:center !important; justify-content:center !important;
gap:10px !important; flex-wrap:wrap !important;
border-top:1px solid rgba(184,146,74,.4) !important;
padding-top:12px !important;
}
#screen-menu .hh-quote-name{ color:#8A6D2E !important; font-weight:800 !important; font-size:.95rem !important; }
#screen-menu .hh-quote-role{ color:#7A6A55 !important; font-size:.8rem !important; }
#screen-menu .hh-quote-refresh{
width:28px !important; height:28px !important; border-radius:9px !important;
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
border:1px solid #FDF3DD !important; color:#3D0918 !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
}
/* ميداليات الأرقام */
#screen-menu .hh-stat-royal{
position:relative !important; overflow:hidden !important;
background:linear-gradient(165deg,#5E0E26,#3D0918) !important;
border:1px solid rgba(212,188,133,.55) !important;
border-radius:16px !important;
padding:14px 14px 12px 52px !important;
}
#screen-menu .hh-stat-royal::after{
content:''; position:absolute; top:0; right:0; left:0; height:3px;
background:linear-gradient(90deg,transparent,#D4BC85,transparent);
}
#screen-menu .hh-stat-medal{
position:absolute !important; top:50% !important; left:12px !important;
transform:translateY(-50%) !important;
width:36px !important; height:36px !important; border-radius:50% !important;
background:radial-gradient(circle at 35% 30%,#F5E6C4,#B8924A 78%) !important;
border:1.5px solid #FDF3DD !important;
color:#3D0918 !important;
display:flex !important; align-items:center !important; justify-content:center !important;
box-shadow:0 3px 8px rgba(0,0,0,.25) !important;
}
#screen-menu .hh-stat-num{
color:#F5E6C4 !important; font-size:1.55rem !important; font-weight:900 !important;
}
#screen-menu .hh-stat-label{ color:#fff !important; font-weight:800 !important; font-size:.86rem !important; }
#screen-menu .hh-stat-chip{
display:inline-flex !important; align-items:center !important; gap:5px !important;
background:none !important; border:none !important; padding:0 !important;
color:#C9A96A !important; font-size:.7rem !important; font-weight:700 !important; margin-top:4px !important;
}
#screen-menu .hh-stat-chip::before{
content:''; width:5px; height:5px; background:#8FD0C9; border-radius:50%;
}
/* بطاقة المجانية: الذهبية المميزة (الثالثة) */
#screen-menu .hh-stat-royal:nth-child(3){
background:linear-gradient(165deg,#EAD9B0,#B8924A) !important;
}
#screen-menu .hh-stat-royal:nth-child(3) .hh-stat-num{ color:#3D0918 !important; }
#screen-menu .hh-stat-royal:nth-child(3) .hh-stat-label{ color:#4A0B1E !important; }
#screen-menu .hh-stat-royal:nth-child(3) .hh-stat-chip{ color:#5E4A1E !important; }
#screen-menu .hh-stat-royal:nth-child(3) .hh-stat-chip::before{ background:#8A1538; }
#screen-menu .hh-stat-royal:nth-child(3) .hh-stat-medal{
background:radial-gradient(circle at 35% 30%,#7A1330,#3D0918 78%) !important;
color:#F5E6C4 !important; border-color:#B8924A !important;
}
/* حزمة وضوح الطالب: حقل البحث */
#main-nav .nav-search-input{ font-size:.75rem !important; }
#main-nav .nav-search-input::placeholder{ font-size:.72rem !important; }
/* بطاقة الدرس الفاخرة · تجاوب الجوال */
@media(max-width:640px){
.hh-lcard-bd{grid-template-columns:1fr !important;}
.hh-lcard-bd > div:last-child{border-right:none !important;border-top:1.5px solid #EDE3CE;}
}
/* ═══ البطاقة السينمائية: وميض وشريط أفلام (الخيار أ) ═══ */
@keyframes hhSheen{0%,55%{left:-45%}100%{left:135%}}
.hh-sheen{position:absolute;top:-60%;left:-45%;width:75%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,253,248,.13),transparent);transform:rotate(18deg);animation:hhSheen 3.6s ease-in-out infinite;pointer-events:none;z-index:1;}
.hh-stage-cta:hover,.hh-mtile:hover{transform:translateY(-2px);transition:transform .15s;}
.hh-stage-cta{transition:transform .15s;}
.hh-mtile{transition:transform .15s;}
.hh-film{width:13px;height:5px;border-radius:2px;background:rgba(212,188,133,.3);}
.hh-film.on{background:#EAD9B0;}
/* ═══ زر ألعابي + الفاصل الذهبي (بجانب ابدأ الآن) ═══ */
.nav-cta-sep{
display:inline-block;width:2px;height:24px;
background:linear-gradient(180deg,transparent,#EAD9B0,transparent);
margin:0 3px;flex-shrink:0;border-radius:9px;
}
/* ألعابي: نفس القالب الذهبي لكن بلا نبض (ثانوي هادئ) */
.nav-cta-games{
animation:none !important;
}
/* ═══ فاصل ذهبي بين ابدأ الآن وألعابي (شريط التاج) ═══ */
.hh-crown-sep{
display:inline-block;width:2px;height:26px;
background:linear-gradient(180deg,transparent,var(--hh-gold-pale,#EAD9B0),transparent);
margin:0 4px;flex-shrink:0;border-radius:9px;align-self:center;
}
/* ═══ ضمان قراءة عناوين المجموعات (عاجي على العنابي في كل الحالات) ═══ */
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-title{color:#FFFDF8 !important;}
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-sub{color:#EAD9B0 !important;}
.ms-group-header.collapsed:not(.ms-group-header-soon) .ms-group-header-title{color:#FFFDF8 !important;}
.ms-group-header.collapsed:not(.ms-group-header-soon) .ms-group-header-sub{color:#D4BC85 !important;}
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-icon{
width:34px;height:34px;border-radius:10px;
background:rgba(212,188,133,.18);border:1px solid rgba(212,188,133,.4);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-icon svg,
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-icon img{
filter:brightness(0) invert(1);opacity:.9;width:18px;height:18px;
}
/* رأس المجموعة: شارة العدد ذهبية بارزة + خيط ذهبي */
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-count{
background:linear-gradient(135deg,#EAD9B0,#B8924A) !important;
color:#3D0918 !important;border:none !important;
font-weight:900;padding:3px 12px;border-radius:9px;
}
.ms-group-header:not(.ms-group-header-soon)::after{
content:'';position:absolute;bottom:0;right:0;left:0;height:2px;
background:linear-gradient(90deg,var(--mgh-accent,#B8924A),transparent);
}
.ms-group-header:not(.ms-group-header-soon) .ms-group-header-chevron{color:#EAD9B0;}
/* ادرس مع مُلهِم */
.hh-mulhim-cta:hover{transform:translateY(-2px);transition:transform .15s;}
.hh-mlm-q:hover{background:#8FD0C9 !important;color:#0d2436 !important;}