/* Sprich — style.css (مبني على قالب Shadlyx + محرك الدروس) */

        :root {
            --primary: #dc143c;
            --bg: #fdfdfd;
            --surface: transparent; /* تم جعلها شفافة */
            --text: #1d1d1f;
            --text-dim: #86868b;
            --transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Cairo', sans-serif; }
        body { 
            background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden;
            background-image: radial-gradient(circle at 0% 0%, rgba(220, 20, 60, 0.03) 0%, transparent 50%);
        }

        /* TRENDY WATERMARK */
        .side-brand-tag {
            position: fixed; right: 20px; bottom: 40px; writing-mode: vertical-rl;
            font-weight: 900; font-size: 5rem; letter-spacing: 20px;
            color: rgba(0, 0, 0, 0.035); text-transform: uppercase; z-index: 50;
            pointer-events: none; transition: var(--transition); user-select: none;
        }
        body.menu-open .side-brand-tag { opacity: 0; transform: translateY(-30px); }

        /* NAVIGATION */
        @keyframes slideName {
            0%, 5%, 95%, 100% { width: 0; opacity: 0; transform: translateX(-15px); }
            15%, 85% { width: 120px; opacity: 1; transform: translateX(0); }
        }

        :root {
  --primary: #dc143c;
  --bg: #ffffff;
  --text: #111;
  --transition: 0.35s cubic-bezier(0.77, 0, 0.175, 1);
}

/* OVERLAY */
/* SIDEBAR */
/* Scrollbar premium */
/* OPEN */
/* MENU ITEMS */
/* ACTIVE ITEM */
/* SEARCH */
/* MAIN WRAPPER MODIFIED FOR FULL WIDTH */
        .main-wrapper { width: 100% !important; max-width: 100% !important; margin: 0; padding: 0; min-height: 100vh; position: relative; z-index: 10; }
        
        .glass-card { 
            background: transparent !important; /* إزالة الخلفية البيضاء */
            border-radius: 0; 
            padding: 0 !important; 
            box-shadow: none !important; 
            border: none !important; 
            margin-bottom: 0; 
            animation: slideUp 0.8s ease;
        }

        @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* إخفاء العنوان في الصفحات والمواضيع */
        .post-title { display: none !important; }

        .post-body { line-height: 1.9; font-size: 1.2rem; color: #2c2c2e; width: 100%; }

        /* HIDE DEFAULTS */
        .navbar, .header-outer, .footer-outer, .tabs-outer, .widget-title, .goog-te-banner-frame { display: none !important; }
        body { top: 0 !important; }

        @media (max-width: 768px) {
            .side-brand-tag { display: none; }
            .glass-card { padding: 0 !important; }
        }
  button {
  background: #dc143c;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover */
button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* Click (active) */
button:active {
  transform: scale(0.96);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

/* Optional: focus clean */
button:focus {
  outline: none;
}
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-box {
  background: white;
  width: 90%;
  max-width: 600px;
  border-radius: 20px;
  padding: 20px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Styles for submenu links - صغيرة وخفيفة */
/* Optional: add a separator or visual hierarchy */

/* ============================================================
   الواجهة العربية + الصفحة الرئيسية (Landing) + كروت الدروس
   ============================================================ */
:root{--sx-ink:#17141f;--sx-gold:#ffb703;--sx-warm:#fbf7f3;--sx-line:#eee6df;--sx-mute:#6f6878;--sx-card:#fff;--sx-soft:#f6f1ec;--sx-dark:#17141f}
[hidden]{display:none !important}
body.is-home{background:var(--sx-warm)}
.is-home .side-brand-tag{display:none}

/* ---------- الصفحة الرئيسية ---------- */
.sx-landing{position:relative;direction:rtl;text-align:right;color:var(--sx-ink);padding:0 0 130px;overflow:hidden}
.sx-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sx-bg i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.sx-bg .b1{width:380px;height:380px;background:#ffd6dd;top:-90px;right:-80px}
.sx-bg .b2{width:320px;height:320px;background:#ffe9b0;top:420px;left:-110px}
.sx-bg .b3{width:300px;height:300px;background:#dfd6ff;bottom:140px;right:-90px}

.sx-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto;padding:22px 22px 0}
.sx-logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.35rem;letter-spacing:-.5px;color:var(--sx-ink) !important;text-decoration:none;direction:ltr}
.sx-logo b{color:var(--primary)}
.sx-flag{display:inline-flex;flex-direction:column;width:22px;height:16px;border-radius:4px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.18);flex:none}
.sx-flag i{flex:1}
.sx-flag i:nth-child(1){background:#111}.sx-flag i:nth-child(2){background:#dd0000}.sx-flag i:nth-child(3){background:#ffce00}

.sx-hero{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:44px 22px 30px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.sx-pill{display:inline-flex;gap:8px;align-items:center;background:var(--sx-card);border:1px solid var(--sx-line);padding:7px 16px;border-radius:99px;font-weight:700;font-size:.85rem;box-shadow:0 4px 14px rgba(20,18,31,.05)}
.sx-hero h1{font-size:clamp(2.3rem,6.2vw,4rem);line-height:1.25;font-weight:900;margin:20px 0 16px;letter-spacing:-1px;color:var(--sx-ink)}
.sx-grad{background:linear-gradient(100deg,#dc143c,#ff7a45 60%,#ffb703);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-hero p{font-size:1.1rem;line-height:1.95;color:var(--sx-mute);max-width:540px;font-weight:600}
.sx-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.sx-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:16px;font-weight:800;font-size:1rem;text-decoration:none;transition:.3s cubic-bezier(.2,.8,.2,1);cursor:pointer;border:0}
.sx-btn-main{background:linear-gradient(135deg,#dc143c,#ff3b5c);color:#fff !important;box-shadow:0 12px 28px rgba(220,20,60,.32)}
.sx-btn-main:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(220,20,60,.4)}
.sx-btn-ghost{background:var(--sx-card);color:var(--sx-ink) !important;border:1.5px solid var(--sx-line)}
.sx-btn-ghost:hover{border-color:var(--primary);color:var(--primary) !important;transform:translateY(-3px)}
.sx-facts{display:flex;gap:26px;flex-wrap:wrap;margin-top:32px;list-style:none}
.sx-facts li{font-size:.85rem;color:var(--sx-mute);font-weight:700}
.sx-facts b{display:block;font-size:1.55rem;color:var(--sx-ink);font-weight:900;line-height:1.3}

.sx-phone{position:relative;direction:ltr;width:100%;max-width:340px;margin:0 auto;background:var(--sx-card);border-radius:34px;padding:16px;border:1px solid var(--sx-line);box-shadow:0 30px 70px rgba(20,18,31,.14);transform:rotate(-3deg);animation:sxFloat 6s ease-in-out infinite}
@keyframes sxFloat{50%{transform:rotate(-3deg) translateY(-10px)}}
.sx-ph-head{display:flex;align-items:center;gap:10px;padding:6px 6px 14px;border-bottom:1px solid var(--sx-line);font-weight:800}
.sx-ph-head em{margin-left:auto;font-style:normal;background:var(--sx-gold);color:#17141f;padding:2px 10px;border-radius:99px;font-size:.78rem;font-weight:900}
.sx-msg{max-width:86%;padding:10px 14px;border-radius:18px;margin-top:12px;font-weight:700;font-size:.95rem;line-height:1.5}
.sx-msg small{display:block;direction:rtl;text-align:right;font-weight:600;font-size:.74rem;opacity:.75;margin-top:4px}
.sx-msg.l{background:var(--sx-soft);color:var(--sx-ink);border-bottom-left-radius:5px}
.sx-msg.r{background:linear-gradient(135deg,#dc143c,#ff3b5c);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.sx-rec{display:flex;align-items:center;gap:12px;margin-top:16px;background:var(--sx-dark);color:#fff;border-radius:18px;padding:10px 14px}
.sx-rec .fa-microphone{width:34px;height:34px;border-radius:50%;background:var(--primary);display:grid;place-items:center;animation:sxPulse 1.6s infinite}
@keyframes sxPulse{0%{box-shadow:0 0 0 0 rgba(220,20,60,.6)}100%{box-shadow:0 0 0 14px rgba(220,20,60,0)}}
.sx-wave{display:flex;align-items:center;gap:3px;height:26px}
.sx-wave i{width:3px;height:10px;border-radius:3px;background:var(--sx-card);animation:sxWave 1s ease-in-out infinite}
.sx-wave i:nth-child(2){animation-delay:.12s}.sx-wave i:nth-child(3){animation-delay:.24s}.sx-wave i:nth-child(4){animation-delay:.36s}
.sx-wave i:nth-child(5){animation-delay:.48s}.sx-wave i:nth-child(6){animation-delay:.6s}.sx-wave i:nth-child(7){animation-delay:.72s}.sx-wave i:nth-child(8){animation-delay:.84s}
@keyframes sxWave{50%{transform:scaleY(2.2)}}
.sx-float{position:absolute;background:var(--sx-card);border:1px solid var(--sx-line);box-shadow:0 10px 26px rgba(20,18,31,.1);padding:8px 14px;border-radius:14px;font-weight:800;font-size:.8rem;direction:rtl;white-space:nowrap}
.sx-float.f1{top:-14px;left:-34px}.sx-float.f2{bottom:104px;right:-40px}.sx-float.f3{bottom:-18px;left:14px}

.sx-sec{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:40px 22px 0}
.sx-sec h2{font-size:1.65rem;font-weight:900;margin-bottom:6px;color:var(--sx-ink)}
.sx-sub{color:var(--sx-mute);margin-bottom:20px;font-weight:600}

.sx-search{position:relative;display:flex;align-items:center;gap:10px;background:var(--sx-card);border:2px solid var(--sx-line);border-radius:20px;padding:8px 8px 8px 10px;box-shadow:0 12px 34px rgba(20,18,31,.07);transition:.3s;direction:rtl}
.sx-search:focus-within{border-color:var(--primary);box-shadow:0 14px 40px rgba(220,20,60,.16)}
.sx-search>.fa-search{color:var(--sx-mute);margin:0 14px 0 4px;font-size:1.05rem}
.sx-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:1.05rem;font-weight:600;padding:12px 4px;color:var(--sx-ink);font-family:inherit;text-align:right}
.sx-search button{background:var(--sx-dark);color:#fff;border-radius:14px;padding:13px 26px;font-weight:800;font-size:1rem;font-family:inherit}
.sx-search button:hover{background:var(--primary)}
.sx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sx-chips a{display:inline-block;background:var(--sx-card);color:var(--sx-ink) !important;border:1px solid var(--sx-line);padding:8px 14px;border-radius:99px;font-size:.85rem;font-weight:700;text-decoration:none;transition:.25s}
.sx-chips a:hover{border-color:var(--primary);color:var(--primary) !important;transform:translateY(-2px)}
.sx-status{margin:24px 0 14px;font-weight:800;color:var(--sx-mute)}
.sx-status b{color:var(--primary)}
.sx-empty{grid-column:1/-1;text-align:center;padding:36px 16px;color:var(--sx-mute);font-weight:700}

.sx-lv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.sx-lv{--c:#16a34a;position:relative;display:flex;flex-direction:column;gap:6px;background:var(--sx-card);border:1px solid var(--sx-line);border-radius:22px;padding:20px 18px 24px;text-decoration:none;color:var(--sx-ink) !important;overflow:hidden;transition:.35s cubic-bezier(.2,.8,.2,1)}
.sx-lv::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--c)}
.sx-lv:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(20,18,31,.1);border-color:var(--c)}
.sx-lv-code{font-style:normal;font-size:2.1rem;font-weight:900;color:var(--c);line-height:1.1;direction:ltr;text-align:right}
.sx-lv-name{font-weight:800;font-size:1rem}
.sx-lv-desc{font-size:.8rem;color:var(--sx-mute);font-weight:600;line-height:1.7}
.sx-lv[data-lv=A1]{--c:#16a34a}.sx-lv[data-lv=A2]{--c:#0d9488}.sx-lv[data-lv=B1]{--c:#2563eb}.sx-lv[data-lv=B2]{--c:#7c3aed}.sx-lv[data-lv=C1]{--c:#dc143c}
.sx-place{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;background:var(--sx-dark);color:#fff !important;padding:18px 22px;border-radius:20px;text-decoration:none;font-weight:700;transition:.3s}
.sx-place b{color:var(--sx-gold)}
.sx-place:hover{transform:translateY(-3px);background:#241f33}
.sx-act-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sx-act{display:flex;align-items:center;gap:16px;background:var(--sx-card);border:1px solid var(--sx-line);border-radius:22px;padding:20px 22px;text-decoration:none;color:var(--sx-ink) !important;transition:.35s cubic-bezier(.2,.8,.2,1)}
.sx-act:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(20,18,31,.1)}
.sx-act-ic{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:1.4rem;color:#fff;flex:none}
.sx-act-ic.a{background:linear-gradient(135deg,#ffb703,#ff8a00)}
.sx-act-ic.s{background:linear-gradient(135deg,#dc143c,#ff3b5c)}
.sx-act b{display:block;font-size:1.1rem;font-weight:900}
.sx-act span span{font-size:.85rem;color:var(--sx-mute);font-weight:600}
.sx-act>.fa-arrow-left{margin-right:auto;color:var(--sx-mute)}

/* ---------- رأس صفحات البحث والفئات ---------- */
.sx-pagehead{direction:rtl;text-align:right;max-width:1100px;margin:0 auto;padding:46px 22px 18px}
.sx-pagehead .k{display:inline-flex;gap:8px;align-items:center;color:var(--primary);font-weight:800;font-size:.9rem;background:var(--sx-card);border:1px solid var(--sx-line);padding:5px 14px;border-radius:99px}
.sx-pagehead h1{font-size:clamp(1.8rem,5vw,2.6rem);font-weight:900;margin:12px 0 18px;color:var(--sx-ink)}
.sx-search-sm{max-width:560px}
.lc-wrap{max-width:1100px;margin:0 auto;padding:0 22px 130px;direction:rtl}
.sx-pager{display:flex;justify-content:space-between;gap:12px;margin-top:34px;direction:rtl}
.sx-pager a{background:var(--sx-card);border:1px solid var(--sx-line);padding:12px 22px;border-radius:14px;font-weight:800;color:var(--sx-ink) !important;text-decoration:none}
.sx-pager a:hover{border-color:var(--primary);color:var(--primary) !important}

/* ---------- كروت الدروس: بوستر ملوّن لكل درس (بدون نصوص ثابتة) ---------- */
.lc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;direction:rtl}
.lc{--c1:#dc143c;--c2:#ff7a45;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:220px;padding:20px 22px;border-radius:28px;overflow:hidden;text-decoration:none;color:#fff !important;background:linear-gradient(145deg,var(--c1),var(--c2));box-shadow:0 14px 30px rgba(20,18,31,.16);transition:.45s cubic-bezier(.2,.8,.2,1);direction:rtl;text-align:right}
.lc:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 24px 46px rgba(20,18,31,.26)}
.lc:nth-child(8n+1){--c1:#dc143c;--c2:#ff7a45}
.lc:nth-child(8n+2){--c1:#4f46e5;--c2:#8b5cf6}
.lc:nth-child(8n+3){--c1:#0d9488;--c2:#22c55e}
.lc:nth-child(8n+4){--c1:#f59e0b;--c2:#ef4444}
.lc:nth-child(8n+5){--c1:#0284c7;--c2:#6366f1}
.lc:nth-child(8n+6){--c1:#db2777;--c2:#fb7185}
.lc:nth-child(8n+7){--c1:#0f766e;--c2:#0ea5e9}
.lc:nth-child(8n+8){--c1:#2d2340;--c2:#dc143c}
.lc-art{position:absolute;inset:0;pointer-events:none}
.lc-art i{position:absolute;background:rgba(255,255,255,.15);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.lc-art .s1{width:150px;height:110px;border-radius:32px 32px 32px 6px;top:-28px;left:-30px;transform:rotate(-8deg)}
.lc-art .s2{width:92px;height:66px;border-radius:22px 22px 6px 22px;bottom:96px;right:-20px;transform:rotate(10deg);background:rgba(255,255,255,.1)}
.lc-art .s3{width:46px;height:46px;border-radius:50%;top:44%;left:36%;background:rgba(255,255,255,.1)}
.lc:nth-child(3n+2) .lc-art .s1{left:auto;right:-30px;border-radius:32px 32px 6px 32px;transform:rotate(8deg)}
.lc:nth-child(3n+2) .lc-art .s2{right:auto;left:-22px;border-radius:22px 22px 22px 6px;transform:rotate(-10deg)}
.lc:nth-child(3n) .lc-art .s1{top:auto;bottom:-40px;left:18%;width:200px;height:124px;transform:rotate(-4deg)}
.lc:nth-child(3n) .lc-art .s3{top:20%;left:auto;right:32%}
.lc:hover .lc-art .s1{transform:translate(8px,6px) rotate(-2deg) scale(1.1)}
.lc:hover .lc-art .s2{transform:translate(-8px,-8px) rotate(3deg) scale(1.12)}
.lc:hover .lc-art .s3{transform:translateY(-12px) scale(1.2)}
.lc-row,.lc-bottom{position:relative;z-index:1}
.lc-row{display:flex;align-items:center;gap:10px}
.lc-level{background:#fff;color:#17141f;font-weight:900;font-size:.82rem;padding:4px 13px;border-radius:99px;direction:ltr;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.lc-arrow{margin-inline-start:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:.9rem;transition:.35s}
.lc:hover .lc-arrow{background:#fff;color:var(--c1);transform:translateX(-6px)}
.lc-title{margin:0;font-size:1.45rem;font-weight:900;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 14px rgba(0,0,0,.18)}
.lc-steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.lc-steps span{font-size:.72rem;font-weight:700;background:rgba(255,255,255,.2);color:#fff;padding:4px 11px;border-radius:99px}
.lc-steps span:nth-child(n+4){display:none}
.lc-steps:not(:has(span)){display:none}

@media (max-width:860px){
  .sx-hero{grid-template-columns:1fr;padding-top:28px;gap:46px}
  .sx-phone{max-width:300px}
  .sx-float.f1{left:-8px}.sx-float.f2{right:-12px}
}
@media (max-width:720px){
  .sx-lv-grid{grid-template-columns:repeat(2,1fr)}
  .sx-lv:last-child{grid-column:1/-1}
  .sx-act-grid{grid-template-columns:1fr}
  .lc-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sx-phone,.sx-rec .fa-microphone,.sx-wave i{animation:none}
}

.sx-cat{display:flex;align-items:center;gap:14px}
.sx-cat i{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.3rem;color:#fff;background:linear-gradient(135deg,#dc143c,#ff3b5c);flex:none}

/* ============================================================
   القائمة الجديدة
   ============================================================ */
.sxm-dock{position:fixed;left:20px;bottom:22px;z-index:10050}
.sxm-btn{width:52px;height:52px;padding:0;border-radius:18px;background:var(--sx-card);color:var(--sx-ink);border:1px solid var(--sx-line);box-shadow:0 10px 28px rgba(20,18,31,.18);display:grid;place-items:center;font-size:1.15rem}
.sxm-btn:hover{background:var(--primary);color:#fff;transform:translateY(-3px)}
.sxm-overlay{position:fixed;inset:0;background:rgba(15,12,25,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.3s;z-index:10060}
.sxm-overlay.on{opacity:1;visibility:visible}
.sxm{position:fixed;top:12px;bottom:12px;left:12px;width:min(calc(100vw - 24px),370px);background:var(--sx-card);color:var(--sx-ink);border:1px solid var(--sx-line);border-radius:28px;box-shadow:0 30px 80px rgba(20,18,31,.3);z-index:10070;display:flex;flex-direction:column;transform:translateX(-115%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),visibility .45s;direction:rtl;text-align:right;overflow:hidden}
.sxm.open{transform:none;visibility:visible}
.sxm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 12px}
.sxm-logo{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem;color:var(--sx-ink) !important;text-decoration:none;direction:ltr}
.sxm-logo b{color:var(--primary)}
.sxm-x{width:38px;height:38px;padding:0;border-radius:12px;background:var(--sx-soft);color:var(--sx-ink);box-shadow:none}
.sxm-x:hover{background:var(--primary);color:#fff}
.sxm-search{margin:0 16px 4px;padding:5px 5px 5px 8px;border-radius:16px;box-shadow:none}
.sxm-search input{padding:10px 4px;font-size:.95rem}
.sxm-search button{padding:10px 14px;border-radius:12px}
.sxm-scroll{flex:1;overflow-y:auto;padding:4px 16px 12px;-webkit-overflow-scrolling:touch}
.sxm-scroll::-webkit-scrollbar{width:4px}
.sxm-scroll::-webkit-scrollbar-thumb{background:var(--sx-line);border-radius:10px}
.sxm-label{font-size:.72rem;font-weight:800;color:var(--sx-mute);margin:16px 6px 8px}
.sxm-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;color:var(--sx-ink) !important;text-decoration:none;font-weight:700;transition:.2s}
.sxm-item i{width:34px;height:34px;border-radius:11px;background:var(--sx-soft);display:grid;place-items:center;font-size:.9rem;color:var(--primary);flex:none;transition:.2s}
.sxm-item:hover,.sxm-item.active{background:var(--sx-soft)}
.sxm-item:hover i,.sxm-item.active i{background:var(--primary);color:#fff}
.sxm-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sxm-levels a{--c:#16a34a;text-align:center;padding:10px 0;border-radius:12px;font-weight:900;font-size:.9rem;color:var(--c) !important;background:var(--sx-soft);border:1.5px solid transparent;text-decoration:none;direction:ltr;transition:.2s}
.sxm-levels a:hover{border-color:var(--c);transform:translateY(-2px)}
.sxm-levels a[data-lv=A2]{--c:#0d9488}.sxm-levels a[data-lv=B1]{--c:#2563eb}.sxm-levels a[data-lv=B2]{--c:#7c3aed}.sxm-levels a[data-lv=C1]{--c:#dc143c}
.sxm-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sxm-tool{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border-radius:16px;background:var(--sx-soft);color:var(--sx-ink);border:1px solid var(--sx-line);text-align:right;font-family:inherit;box-shadow:none}
.sxm-tool:hover{border-color:var(--primary);box-shadow:none;transform:translateY(-2px)}
.sxm-tool>i{width:34px;height:34px;border-radius:11px;background:var(--sx-card);display:grid;place-items:center;color:var(--primary);flex:none;font-size:.9rem}
.sxm-tool span{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.sxm-tool b{font-size:.85rem;font-weight:800;white-space:nowrap}
.sxm-tool small{font-size:.68rem;color:var(--sx-mute);font-weight:600}
#sxMenuTimer{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
.sxm-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:12px 16px 16px;border-top:1px solid var(--sx-line);font-size:.7rem;font-weight:600;color:var(--sx-mute)}
.sxm-foot a{color:var(--sx-mute) !important;text-decoration:none}
.sxm-foot a:hover{color:var(--primary) !important}

/* ---------- عدّاد الجلسة: شارة صغيرة بجانب زر القائمة ---------- */
body .study-timer-mini{position:fixed;left:84px;right:auto;top:auto;bottom:31px;transform:none;width:auto;height:34px;padding:0 14px 0 12px;display:flex;align-items:center;gap:8px;background:var(--sx-card);border:1px solid var(--sx-line);border-radius:99px;box-shadow:0 8px 22px rgba(20,18,31,.14);color:var(--sx-ink);z-index:10049;overflow:visible;cursor:pointer;direction:ltr}
body .study-timer-mini::before{content:'';position:static;inset:auto;width:8px;height:8px;border-radius:50%;background:#22c55e;animation:sxLive 2s infinite;flex:none}
body .study-timer-mini::after{display:none}
body .study-timer-mini:hover{width:auto;background:var(--sx-card);transform:translateY(-2px)}
body .study-timer-mini .timer-text,body .study-timer-mini span{transform:none;font-size:.8rem;font-weight:800;letter-spacing:.4px;color:var(--sx-ink);font-variant-numeric:tabular-nums;writing-mode:horizontal-tb}
@keyframes sxLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%,100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}

/* ---------- الكشكول (Note): نافذة أنظف ---------- */
#zpeak-launcher_note55{display:none !important}
#zpeak-overlay_note55{background:rgba(15,12,25,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.widget-container_note55{margin:20px auto;border-radius:26px;min-height:calc(100vh - 40px);box-shadow:0 30px 80px rgba(0,0,0,.35);animation:sxNoteIn .35s cubic-bezier(.2,.8,.2,1)}
.toolbar-fixed_note55{border-radius:26px 26px 0 0}
.close-widget_note55{top:20px;right:auto;left:20px;width:44px;height:44px;font-size:26px;background:#17141f;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:.25s}
.close-widget_note55:hover{background:#dc143c;transform:rotate(90deg)}
@keyframes sxNoteIn{from{opacity:0;transform:translateY(24px) scale(.98)}}
@media (max-width:600px){.widget-container_note55{margin:0;border-radius:0;min-height:100vh}.toolbar-fixed_note55{border-radius:0}}

/* ---------- الوضع الداكن ---------- */
html[data-theme=dark]{color-scheme:dark;--sx-card:#1c1927;--sx-ink:#f4f1fa;--sx-warm:#12101a;--sx-line:#2e2a3d;--sx-mute:#a69fb8;--sx-soft:#262234;--sx-dark:#0c0a12;--bg:#12101a;--text:#f4f1fa}
html[data-theme=dark] body{background-image:radial-gradient(circle at 0% 0%,rgba(220,20,60,.1) 0%,transparent 50%)}
html[data-theme=dark] .post-body{color:#dcd8e6}
html[data-theme=dark] .sx-bg i{opacity:.16}
html[data-theme=dark] .sx-phone,html[data-theme=dark] .sx-float,html[data-theme=dark] .lc{box-shadow:0 14px 40px rgba(0,0,0,.45)}
html[data-theme=dark] .sx-search input::placeholder{color:var(--sx-mute)}
html[data-theme=dark] .sx-btn-ghost{color:var(--sx-ink) !important}
html[data-theme=dark] .sx-place:hover{background:#17141f}
html[data-theme=dark] .error-box{background:var(--sx-card);color:var(--sx-ink)}
html[data-theme=dark] .site-infonbt,html[data-theme=dark] .site-infonbt a{color:var(--sx-mute)}

/* ============================================================
   درس المحادثة — تصميم جديد (يتبع ألوان القالب ويدعم الوضع الداكن)
   ============================================================ */
html.lx-on, html.lx-on body { overflow: hidden !important; height: 100%; }
.lx-app, .lx-app * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
.lx-app {
  --bg: var(--sx-warm, #fbf7f3); --card: var(--sx-card, #ffffff); --ink: var(--sx-ink, #17141f);
  --mute: var(--sx-mute, #6f6878); --line: var(--sx-line, #eee6df); --soft: var(--sx-soft, #f6f1ec);
  --a1: #dc143c; --a2: #ff7a45; --ok: #10b981; --warn: #f59e0b;
  position: fixed; inset: 0; z-index: 99990; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font-family: 'Cairo', 'Lexend', sans-serif; direction: rtl;
}
:where(.lx-app) button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.lx-app button:disabled { opacity: .35; cursor: default; }
.lx-app i.fas, .lx-app i.far { font-style: normal; }

/* ---------- الهيدر ---------- */
.lx-head { flex: none; background: var(--card); border-bottom: 1px solid var(--line); padding: 10px 14px 10px; box-shadow: 0 6px 24px rgba(23,20,31,.05); position: relative; z-index: 5; }
.lx-top { display: flex; align-items: center; gap: 10px; }
.lx-title { flex: 1; text-align: center; font-weight: 900; font-size: 1.02rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lx-hb { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 15px; flex: none; transition: .2s; }
.lx-hb:hover { background: var(--a1); color: #fff; }
.lx-steps { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.lx-step { flex: 1; display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 14px; background: var(--soft); font-weight: 800; font-size: 12px; color: var(--mute); transition: .25s; min-width: 0; }
.lx-step b { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line); color: var(--mute); display: grid; place-items: center; font-size: 11px; }
.lx-step span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-step.on { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 6px 16px rgba(220,20,60,.28); }
.lx-step.on b { background: rgba(255,255,255,.28); color: #fff; }
.lx-step.done b { background: var(--ok); color: #fff; }
.lx-sub { display: flex; justify-content: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lx-sub:empty { display: none; }
.lx-link { font-size: 12px; font-weight: 800; color: var(--mute); padding: 5px 12px; border-radius: 20px; background: var(--soft); display: inline-flex; gap: 6px; align-items: center; }
.lx-link.on { background: var(--ok); color: #fff; }

/* ---------- منطقة المحادثة ---------- */
.lx-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 12px 20px; display: flex; flex-direction: column; gap: 12px; background:
  radial-gradient(1200px 400px at 100% -10%, rgba(220,20,60,.07), transparent 60%), radial-gradient(900px 400px at -10% 110%, rgba(124,58,237,.06), transparent 60%), var(--bg); scroll-behavior: smooth; direction: ltr; }
.lx-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; direction: ltr; animation: lx-in .35s cubic-bezier(.2,.8,.2,1) both; }
.lx-msg.right { flex-direction: row-reverse; align-self: flex-end; }
.lx-msg.left { align-self: flex-start; }
.lx-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 14px; background: linear-gradient(135deg, #dc143c, #ff7a45); box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.lx-av.s1 { background: linear-gradient(135deg, #7c3aed, #4f46e5); }
.lx-bub { --g1: #dc143c; --g2: #ff5a78; position: relative; max-width: min(82vw, 520px); padding: 11px 16px 10px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 8px 20px -8px var(--g1); cursor: pointer; transition: transform .15s, box-shadow .2s; }
.lx-msg.right .lx-bub { border-bottom-right-radius: 6px; }
.lx-msg.left .lx-bub { border-bottom-left-radius: 6px; }
.lx-bub:active { transform: scale(.985); }
.lx-bub.g0 { --g1: #dc143c; --g2: #ff5a78; } .lx-bub.g1 { --g1: #6d28d9; --g2: #4f46e5; } .lx-bub.g2 { --g1: #ff7a45; --g2: #e11d48; }
.lx-bub.g3 { --g1: #0f766e; --g2: #0891b2; } .lx-bub.g4 { --g1: #f59e0b; --g2: #ea580c; } .lx-bub.g5 { --g1: #be123c; --g2: #7c2d5b; }
.lx-nm { display: block; font-size: 11px; font-weight: 800; opacity: .8; margin-bottom: 2px; direction: ltr; text-align: left; }
.lx-de { display: block; font-weight: 800; font-size: 1.28rem; line-height: 1.45; direction: ltr; text-align: left; }
.lx-ar { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.3); font-weight: 600; font-size: .95rem; line-height: 1.6; direction: rtl; text-align: right; color: rgba(255,255,255,.92); }
.lx-hide-tr .lx-ar { display: none; }
.lx-hide-tr .lx-bub.force-ar .lx-ar, .lx-bub.force-ar .lx-ar { display: block; }
.lx-bub.on { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--g1), 0 12px 28px -8px var(--g1); animation: lx-glow 1.1s ease-in-out infinite; }
.lx-eq { display: none; position: absolute; top: 9px; left: 12px; gap: 2px; align-items: flex-end; height: 14px; }
.lx-bub.on .lx-eq { display: flex; }
.lx-eq i { display: block; width: 3px; border-radius: 2px; background: rgba(255,255,255,.9); animation: lx-eq .7s ease-in-out infinite; }
.lx-eq i:nth-child(2) { animation-delay: .15s; } .lx-eq i:nth-child(3) { animation-delay: .3s; }
.lx-bub.lx-blur .lx-de { filter: blur(9px); }
.lx-hide-me .lx-bub.me .lx-de:not(.rev) { filter: blur(9px); }
.lx-note { margin-top: 8px; font-weight: 800; font-size: 13px; direction: rtl; text-align: right; background: rgba(255,255,255,.2); border-radius: 12px; padding: 4px 10px; }
@keyframes lx-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lx-glow { 50% { transform: scale(1.015); } }
@keyframes lx-eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* ---------- بطاقات مساعدة ---------- */
.lx-hero { direction: rtl; align-self: center; margin: auto; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 28px; padding: 28px 22px; width: min(100%, 420px); box-shadow: 0 20px 50px -24px rgba(23,20,31,.25); }
.lx-hero .lx-hi { width: 76px; height: 76px; border-radius: 26px; margin: 0 auto 14px; display: grid; place-items: center; font-size: 32px; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 14px 30px -10px rgba(220,20,60,.6); }
.lx-hero h2 { font-size: 1.25rem; font-weight: 900; margin-bottom: 6px; }
.lx-hero p { color: var(--mute); font-weight: 600; font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.lx-cta { width: 100%; padding: 15px 20px; border-radius: 18px; color: #fff; font-weight: 900; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--a1), #ff3b5c 60%, var(--a2)); box-shadow: 0 14px 30px -10px rgba(220,20,60,.65); transition: transform .15s; }
.lx-cta:active { transform: scale(.98); }
.lx-card { direction: rtl; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; align-self: center; width: min(100%, 520px); box-shadow: 0 10px 28px -16px rgba(23,20,31,.25); animation: lx-in .3s both; }
.lx-live { font-weight: 800; font-size: 14px; color: var(--mute); text-align: center; line-height: 1.7; }
.lx-live.ltr { direction: ltr; color: var(--ink); }
.lx-code { display: block; font-size: 10px; opacity: .6; direction: ltr; margin-top: 2px; }
.lx-fb-head { display: flex; align-items: center; gap: 14px; }
.lx-fb-head strong { display: block; font-size: 15px; font-weight: 900; }
.lx-fb-head small { color: var(--mute); font-size: 11px; font-weight: 700; }
.lx-ring { --p: 0; --c: #dc143c; flex: none; width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); display: grid; place-items: center; position: relative; }
.lx-ring::before { content: ''; position: absolute; inset: 7px; background: var(--card); border-radius: 50%; }
.lx-ring b { position: relative; font-size: 15px; font-weight: 900; }
.lx-g .lx-ring, .lx-ring.lx-g { --c: #10b981; } .lx-y .lx-ring { --c: #f59e0b; } .lx-r .lx-ring { --c: #dc143c; }
.lx-fb-row { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.lx-fb-k { display: block; font-size: 11px; font-weight: 800; color: var(--mute); margin-bottom: 2px; }
.lx-fb-p { direction: ltr; text-align: left; font-weight: 800; font-size: 1.08rem; line-height: 1.7; }
.w-ok { color: #059669; } .w-near { color: #d97706; } .w-miss { color: #dc143c; } .w-extra { color: #999; text-decoration: line-through; }

/* ---------- الدوك السفلي (كل أزرار المرحلة هنا) ---------- */
.lx-dock { flex: none; background: var(--card); border-top: 1px solid var(--line); border-radius: 26px 26px 0 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px -18px rgba(23,20,31,.35); position: relative; z-index: 5; }
.lx-now { text-align: center; font-weight: 800; font-size: 12.5px; color: var(--mute); min-height: 18px; margin-bottom: 6px; }
.lx-pbar { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; margin-bottom: 10px; }
.lx-pbar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--a1), var(--a2)); transition: width .4s; }
.lx-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.lx-row + .lx-row { margin-top: 10px; }
.lx-ic { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 54px; }
.lx-ic .ico { width: 46px; height: 46px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 17px; font-weight: 900; transition: .2s; }
.lx-ic small { font-size: 10.5px; font-weight: 800; color: var(--mute); }
.lx-ic:hover:not(:disabled) .ico { background: var(--line); }
.lx-ic.on .ico { background: var(--ok); color: #fff; }
.lx-ic.green .ico { background: var(--ok); color: #fff; }
.lx-ic.pri .ico { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; }
.lx-fab { flex: none; width: 70px; height: 70px; border-radius: 50%; color: #fff; font-size: 26px; display: grid; place-items: center; background: linear-gradient(135deg, var(--a1), #ff3b5c 55%, var(--a2)); box-shadow: 0 14px 30px -8px rgba(220,20,60,.7); transition: transform .15s; position: relative; }
.lx-fab:active { transform: scale(.94); }
.lx-fab.rec, .lx-fab.active { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 14px 30px -8px rgba(16,185,129,.7); animation: lx-pulse 1.1s infinite; }
@keyframes lx-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.lx-seg { display: inline-flex; background: var(--soft); border-radius: 16px; padding: 3px; gap: 2px; }
.lx-seg button { padding: 6px 14px; border-radius: 13px; font-weight: 800; font-size: 12.5px; color: var(--mute); }
.lx-seg button.on { background: var(--card); color: var(--a1); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.lx-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lx-nav .lx-arrow { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; font-size: 14px; flex: none; }
.lx-nav .lx-arrow.go { background: linear-gradient(135deg, var(--a1), var(--a2)); color: #fff; }
.lx-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.lx-count { font-size: 12px; font-weight: 900; color: var(--mute); }
.lx-dots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.lx-dots b { width: 10px; height: 10px; border-radius: 50%; background: var(--line); cursor: pointer; }
.lx-dots b.cur { outline: 2px solid var(--ink); outline-offset: 1px; }
.lx-dots b.g { background: #10b981; } .lx-dots b.y { background: #f59e0b; } .lx-dots b.r { background: #dc143c; }
.lx-timer { position: relative; flex: none; width: 82px; height: 82px; display: grid; place-items: center; }
.lx-timer::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p, 100) * 1%), var(--line) 0); }
.lx-timer::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.lx-timer .lx-fab { position: relative; z-index: 1; width: 64px; height: 64px; font-size: 22px; }
.lx-cd { font-size: 1.6rem; font-weight: 900; color: var(--ok); min-width: 34px; text-align: center; }

/* ---------- كتابة ---------- */
.lx-in { background: rgba(255,255,255,.96); color: #17141f; border: 2px solid transparent; border-radius: 10px; padding: 2px 8px; font: inherit; font-weight: 800; direction: ltr; text-align: left; outline: none; min-width: 70px; }
.lx-in:focus { border-color: #ffc107; }
.lx-in.full { display: block; width: 100%; margin-top: 8px; padding: 9px 12px; font-size: 1rem; }
.lx-in.ok { border-color: #10b981; background: #d1fae5; } .lx-in.near { border-color: #f59e0b; background: #fef3c7; } .lx-in.bad { border-color: #dc143c; background: #fee2e2; }
.lx-ans { display: inline-block; background: #10b981; color: #fff; border-radius: 9px; padding: 0 8px; margin: 0 4px; font-weight: 800; }

/* ---------- النوافذ (sheet / overlays) ---------- */
.lx-ov { position: fixed; inset: 0; z-index: 20; display: none; align-items: flex-end; justify-content: center; background: rgba(15,12,22,.55); backdrop-filter: blur(6px); }
.lx-ov.center { align-items: center; }
.lx-box { width: min(100%, 460px); background: var(--card); border-radius: 28px 28px 0 0; padding: 20px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow-y: auto; animation: lx-up .3s cubic-bezier(.2,.8,.2,1) both; }
.lx-ov.center .lx-box { border-radius: 28px; width: min(92%, 420px); }
@keyframes lx-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.lx-box h3 { font-size: 1.15rem; font-weight: 900; text-align: center; margin-bottom: 4px; }
.lx-box > p { text-align: center; color: var(--mute); font-weight: 600; font-size: 13px; margin-bottom: 14px; }
.lx-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.lx-set:last-of-type { border-bottom: 0; }
.lx-sw { width: 50px; height: 28px; border-radius: 20px; background: var(--line); position: relative; flex: none; transition: .2s; }
.lx-sw::after { content: ''; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: .2s; }
.lx-sw.on { background: var(--ok); } .lx-sw.on::after { right: 25px; }
.lx-big { width: 100%; margin-top: 10px; padding: 14px; border-radius: 16px; font-weight: 900; font-size: 1rem; color: #fff; background: linear-gradient(135deg, var(--a1), var(--a2)); display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.lx-big.dark { background: var(--soft); color: var(--ink); }
.lx-big.green { background: linear-gradient(135deg, #10b981, #059669); }
.lx-x { display: block; margin: 10px auto 0; font-weight: 800; font-size: 13px; color: var(--mute); }
.lx-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 6px; }
.lx-role { background: var(--soft); border: 2px solid transparent; border-radius: 22px; padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 900; transition: .2s; }
.lx-role:hover { border-color: var(--a1); transform: translateY(-2px); }
.lx-role .lx-av { width: 52px; height: 52px; font-size: 22px; }
.lx-role small { font-size: 11px; color: var(--mute); font-weight: 700; }
.lx-box .lx-seg { display: flex; margin: 8px 0 4px; } .lx-box .lx-seg button { flex: 1; padding: 9px 6px; }

/* ---------- البطاقات ---------- */
.lx-cards-box { padding-top: 16px; }
.lx-ctop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lx-ctop h3 { margin: 0; text-align: right; font-size: 1.05rem; } .lx-ctop h3 small { color: var(--mute); font-weight: 700; }
.lx-mini { background: var(--soft); border-radius: 20px; padding: 7px 12px; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.lx-fc { perspective: 1000px; margin: 8px 0 12px; }
.lx-fc-card { position: relative; height: 280px; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
.lx-fc-card.flip { transform: rotateY(180deg); }
.lx-fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; }
.lx-fc-front { background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(23,20,31,.4); }
.lx-fc-back { background: linear-gradient(135deg, var(--a1), #7c2d5b); color: #fff; transform: rotateY(180deg); box-shadow: 0 18px 40px -16px rgba(220,20,60,.55); }
.lx-art { padding: 3px 16px; border-radius: 20px; color: #fff; font-weight: 900; font-size: 1rem; }
.lx-art.der { background: #2563eb; } .lx-art.die { background: #e11d48; } .lx-art.das { background: #16a34a; }
.lx-fc-w { font-size: 2.2rem; font-weight: 900; direction: ltr; line-height: 1.2; }
.lx-fc-ar { font-size: 2.1rem; font-weight: 900; }
.lx-fc-ex { direction: ltr; font-weight: 600; font-size: 1rem; line-height: 1.6; }
.lx-fc-ex mark { background: #ffc107; color: #17141f; border-radius: 5px; padding: 0 4px; }
.lx-fc-btns { display: flex; gap: 12px; }
.lx-fc-btns button, .lx-fc-btns a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; text-decoration: none; background: var(--soft); color: var(--ink); }
.lx-fc-back .lx-fc-btns button { background: rgba(255,255,255,.25); color: #fff; }
.lx-fc-btns a { background: #2563eb; color: #fff; }
.lx-fc-hint { font-size: 11px; opacity: .55; font-weight: 700; }
.lx-cnav { display: flex; align-items: center; gap: 10px; }
.lx-cnav .lx-big { margin: 0; flex: 1; padding: 12px 6px; font-size: .95rem; }
.lx-cnav .lx-arrow { width: 46px; height: 46px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: none; }

@media (max-width: 520px) { .lx-de { font-size: 1.15rem; } .lx-step { padding: 6px 6px; font-size: 11.5px; } .lx-fc-card { height: 250px; } }
@media (prefers-reduced-motion: reduce) { .lx-msg, .lx-card, .lx-box { animation: none; } .lx-bub.on, .lx-fab.rec, .lx-fab.active, .lx-eq i { animation: none; } .lx-fc-card { transition: none; } }
.lx-seg button, .lx-ic .ico { direction: ltr; unicode-bidi: isolate; }
    

@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lx-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.lx-vchip { display: none; margin: 8px auto 0; width: fit-content; max-width: 92%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; padding: 6px 14px; border-radius: 18px; font-size: 12px; font-weight: 800; background: #17141f; color: #fff; text-align: center; direction: rtl; line-height: 1.6; }
.lx-vchip.ok { background: #16a34a; }
.lx-vpill { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 20px; padding: 5px 13px; font: 800 12px 'Cairo', sans-serif; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }

/* ---- طبقة التحميل ---- */
.lx-load { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(23,20,31,.78); animation: lx-fade .25s both; }
.lx-load.on { display: flex; }
.lx-ldbox { text-align: center; color: #fff; padding: 24px; max-width: 330px; direction: rtl; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lx-ldring { position: relative; width: 168px; height: 168px; margin: 0 auto 24px; display: grid; place-items: center; }
.lx-ldring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ff7a45 calc(var(--p, 0) * 1%), rgba(255,255,255,.2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px)); }
.lx-ldring b { font-size: 2.3rem; font-weight: 900; }
.lx-ldbox h3 { font-size: 1.6rem; font-weight: 900; margin: 0 0 8px; }
.lx-ldbox p { margin: 0; font-size: 1rem; font-weight: 700; opacity: .85; line-height: 1.7; }
.lx-ldbox small { display: block; margin-top: 4px; font-size: .8rem; opacity: .6; font-weight: 700; }
.lx-ldskip { display: block; margin: 22px auto 0; background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 8px 20px; border-radius: 30px; font: 800 13px 'Cairo', sans-serif; cursor: pointer; }

/* ---- الشخصيات ---- */
.lx-duo { display: flex; justify-content: center; align-items: flex-end; gap: 2px; margin: 0 auto 12px; height: 128px; direction: ltr; }
.lx-duo .lx-chsvg { width: 94px; height: auto; }
.lx-chsvg { overflow: visible; }
.lx-lid { transform-box: fill-box; transform-origin: top; transform: scaleY(0); animation: lx-blink 4.6s infinite; }
.lx-ch.c1 .lx-lid, .lx-duo svg:first-child .lx-lid { animation-delay: 1.7s; }
@keyframes lx-blink { 0%, 93%, 100% { transform: scaleY(0); } 96% { transform: scaleY(1); } }
.lx-mo { transform-box: fill-box; transform-origin: center; transform: scaleY(0); }
.lx-sm { transition: opacity .1s; }
.lx-scene { flex: none; position: relative; overflow: hidden; border-radius: 26px; height: clamp(310px, 56vh, 460px); margin: 2px 0 4px; box-shadow: 0 20px 50px -24px rgba(23,20,31,.45); border: 1px solid var(--line); direction: ltr; --px: 0px; isolation: isolate; }
.lx-sc-bg { position: absolute; inset: 0; }
.lx-sc-bg svg { width: 100%; height: 100%; display: block; }
.lx-ch { position: absolute; bottom: -2px; width: 44%; max-width: 190px; z-index: 2; opacity: .72; transition: opacity .25s; }
.lx-ch::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 2px; height: 16px; background: radial-gradient(ellipse at center, rgba(0,0,0,.3), transparent 70%); z-index: -1; }
.lx-ch.c0 { right: 9%; } .lx-ch.c1 { left: 9%; }
.lx-ch .lx-chsvg { width: 100%; height: auto; display: block; }
.lx-ch-n { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(23,20,31,.76); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 11px; border-radius: 20px; white-space: nowrap; }
.lx-ch.talk, .lx-ch.think { opacity: 1; }
.lx-ch.talk .lx-mo { animation: lx-talk .5s steps(1, end) infinite; }
.lx-ch.talk .lx-sm { opacity: 0; }
@keyframes lx-talk { 0% { transform: scaleY(.2); } 25% { transform: scaleY(1); } 50% { transform: scaleY(.45); } 75% { transform: scaleY(.85); } }

.lx-sc-cap { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; background: var(--card); color: var(--ink); border-radius: 20px; padding: 10px 15px 11px; box-shadow: 0 12px 28px -10px rgba(0,0,0,.45); border-top: 4px solid #dc143c; display: flex; flex-direction: column; gap: 3px; min-height: 78px; }
.lx-sc-cap.s1 { border-top-color: #4f46e5; }
.lx-sc-nm { font-size: 11px; font-weight: 900; color: #dc143c; letter-spacing: .3px; }
.lx-sc-cap.s1 .lx-sc-nm { color: #4f46e5; }
.lx-sc-de { font-size: 1.08rem; font-weight: 800; line-height: 1.55; text-align: left; }
.lx-sc-de .w { transition: color .15s; }
.lx-sc-de .w.on { color: #dc143c; }
.lx-sc-cap.s1 .lx-sc-de .w.on { color: #4f46e5; }
.lx-sc-ar { font-size: .9rem; font-weight: 700; color: var(--mute); direction: rtl; text-align: right; }
.lx-hide-tr .lx-sc-ar { display: none; }
.lx-sc-cap.pop { animation: lx-in .3s both; }
.lx-sc-cap.dots .lx-sc-de { display: flex; gap: 5px; height: 26px; align-items: center; }
.lx-sc-cap.dots .lx-sc-de i { width: 8px; height: 8px; border-radius: 50%; background: var(--mute); animation: lx-dot 1s infinite; }
.lx-sc-cap.dots .lx-sc-de i:nth-child(2), .lx-tdots i:nth-child(2) { animation-delay: .15s; }
.lx-sc-cap.dots .lx-sc-de i:nth-child(3), .lx-tdots i:nth-child(3) { animation-delay: .3s; }
.lx-tdots { display: flex; gap: 5px; align-items: center; padding: 15px 18px; min-width: 66px; cursor: default; background: linear-gradient(135deg, #8b8794, #a9a5b3); box-shadow: none; }
.lx-tdots i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: lx-dot 1s infinite; }
.lx-app:not(.lx-view-scene) .lx-scene { display: none; }
.lx-view-scene .lx-msg { display: none; }


/* ============================================================
   Sprich — إضافات الموقع الجديد (فلاتر المكتبة، الأدوات، الكشكول، المؤقت)
   ============================================================ */
body{background:var(--bg)}
body.is-home{background:var(--sx-warm)}
html[data-theme=dark] body{background:#121018}
.sp-filters{display:flex;flex-wrap:wrap;gap:8px;max-width:1100px;margin:0 auto;padding:0 22px 22px;direction:rtl}
.sp-filters a{padding:7px 15px;border-radius:99px;background:var(--sx-card);border:1px solid var(--sx-line);color:var(--sx-ink);font-weight:800;font-size:.85rem;text-decoration:none;transition:.2s}
.sp-filters a:hover{border-color:var(--primary);color:var(--primary)}
.sp-filters a.on{background:var(--primary);border-color:var(--primary);color:#fff}
.sp-filters .sep{flex-basis:100%;height:0}
.sp-prose{max-width:760px;margin:0 auto;padding:46px 22px 140px;direction:rtl;text-align:right;color:var(--sx-ink);line-height:2}
.sp-prose h1{font-size:clamp(1.8rem,5vw,2.5rem);font-weight:900;margin-bottom:14px}
.sp-prose h2{font-size:1.3rem;font-weight:900;margin:28px 0 8px;color:var(--primary)}
.sp-prose p,.sp-prose li{color:var(--sx-mute);font-weight:600}
.sp-prose ul{padding-inline-start:22px}
.sp-prose a{color:var(--primary);font-weight:800}
.sp-loading{display:grid;place-items:center;min-height:100vh;color:var(--sx-mute);font-weight:800;direction:rtl;text-align:center;padding:24px}
.sp-loading a{color:var(--primary)}
.sp-modal{position:fixed;inset:0;z-index:100000;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(23,20,31,.6);animation:lx-fade .2s both}
.sp-modal.on{display:flex}
.sp-box{width:100%;max-width:440px;max-height:88vh;overflow:auto;background:var(--sx-card);color:var(--sx-ink);border-radius:28px;padding:26px 22px 22px;box-shadow:0 30px 70px rgba(0,0,0,.35);direction:rtl;text-align:right;position:relative}
.sp-x{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;background:var(--sx-soft);color:var(--sx-ink);padding:0;display:grid;place-items:center;box-shadow:none}
.sp-box h3{font-size:1.25rem;font-weight:900;margin:0 0 14px}
.sp-clock{font:900 clamp(2.6rem,12vw,3.6rem)/1 'Lexend',monospace;letter-spacing:2px;text-align:center;direction:ltr;margin:10px 0 6px;background:linear-gradient(135deg,var(--primary),#ff7a45);-webkit-background-clip:text;background-clip:text;color:transparent}
.sp-sub{text-align:center;color:var(--sx-mute);font-weight:700;margin-bottom:18px}
.sp-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sp-btn{padding:11px 20px;border-radius:14px;font-weight:800;font-size:.95rem}
.sp-btn.alt{background:var(--sx-soft);color:var(--sx-ink)}
.sp-tabs{display:flex;gap:8px;margin-bottom:14px}
.sp-tabs button{flex:1;background:var(--sx-soft);color:var(--sx-ink);padding:10px;border-radius:14px;font-weight:800;box-shadow:none}
.sp-tabs button.on{background:var(--primary);color:#fff}
.sp-add{display:grid;gap:8px;margin-bottom:14px}
.sp-add input{width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--sx-line);background:var(--sx-warm);color:var(--sx-ink);font-weight:700;font-size:.95rem;outline:none}
.sp-add input:focus{border-color:var(--primary)}
.sp-add input[dir=ltr]{text-align:left}
.sp-list{display:grid;gap:8px;margin-bottom:14px}
.sp-item{display:flex;gap:10px;align-items:flex-start;background:var(--sx-soft);border-radius:16px;padding:11px 14px}
.sp-item b{display:block;font-size:1.02rem;direction:ltr;text-align:left}
.sp-item span{display:block;color:var(--sx-mute);font-weight:700;font-size:.9rem}
.sp-item small{display:block;color:var(--sx-mute);font-size:.8rem;direction:ltr;text-align:left;margin-top:2px}
.sp-item .grow{flex:1;min-width:0}
.sp-item button{background:transparent;color:var(--sx-mute);padding:4px 6px;box-shadow:none}
.sp-count{display:flex;gap:10px;margin-bottom:14px}
.sp-count div{flex:1;background:var(--sx-soft);border-radius:16px;padding:10px;text-align:center;font-weight:800;color:var(--sx-mute);font-size:.85rem}
.sp-count b{display:block;font-size:1.4rem;color:var(--primary)}
.sp-empty{text-align:center;color:var(--sx-mute);font-weight:700;padding:14px}
html[data-theme=dark] .sp-box{background:#1d1a26;color:#f1eef6}
html[data-theme=dark] .sp-add input{background:#14111c;color:#f1eef6;border-color:#2c2738}
html[data-theme=dark] .sp-item,html[data-theme=dark] .sp-count div,html[data-theme=dark] .sp-tabs button,html[data-theme=dark] .sp-btn.alt,html[data-theme=dark] .sp-x{background:#2a2535;color:#f1eef6}
html[data-theme=dark] .sp-tabs button.on{background:var(--primary)}
.st-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-f{display:grid;gap:6px;margin-bottom:12px}
.st-f label{font-weight:800;font-size:.85rem;color:var(--sx-mute)}
.st-f input,.st-f select,.st-f textarea{width:100%;padding:11px 13px;border-radius:12px;border:1.5px solid var(--sx-line);background:var(--sx-card);color:var(--sx-ink);font:600 .95rem 'Cairo',sans-serif;outline:none}
.st-f textarea{min-height:190px;line-height:1.7;direction:ltr;text-align:left}
.st-f input:focus,.st-f select:focus,.st-f textarea:focus{border-color:var(--primary)}
.st-out{background:#17141f;color:#d7f5e2;border-radius:16px;padding:14px;font:500 .8rem/1.6 monospace;direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}
.st-note{background:var(--sx-soft);border-radius:14px;padding:12px 14px;color:var(--sx-mute);font-weight:700;font-size:.88rem;line-height:1.8;margin-bottom:14px}
@media (max-width:560px){.st-grid{grid-template-columns:1fr}}

.lx-load.sp-fixed{position:fixed;z-index:100001}