*{margin:0;padding:0;box-sizing:border-box}
:root{
  --d:#4B3A6E;--dd:#2D1F50;--dl:#6B5A8E;
  --t:#0DB5B5;--tl:#E0F7F7;
  --bg:#F7F5FF;--bd:#E8E3F5;
  --tx:#2D2B50;--tm:#555;--tg:#888;
  --pb:#F0EDF8;--ok:#1B7A3E;
}
body{font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;background:#0d2145;color:#63ddff;direction:rtl}

/* HEADER */
.hdr{background:linear-gradient(135deg,#0d2145,#0d2145 60%,#2f6df0);padding:28px 20px 24px;text-align:center;position:relative;overflow:hidden}
.hdr::before{content:'';position:absolute;top:-40px;left:-40px;width:160px;height:160px;background:rgba(13,181,181,.10);border-radius:50%}
.hdr::after{content:'';position:absolute;bottom:-30px;right:-30px;width:120px;height:120px;background:rgba(201,168,76,.07);border-radius:50%}
.logo-w{display:flex;justify-content:center;margin-bottom:14px;position:relative;z-index:2}
.logo-img{height:52px;object-fit:contain}
.brand{font-size:10px;color:#63ddff;font-weight:700;letter-spacing:2px;margin-bottom:8px;position:relative;z-index:2}
.hdr h1{font-size:clamp(16px,4vw,26px);font-weight:900;color:#fff;margin-bottom:8px;line-height:1.4;position:relative;z-index:2}
.hdr-sub{font-size:11px;color:rgba(255,255,255,.75);margin-bottom:16px;position:relative;z-index:2}
.stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;position:relative;z-index:2}
.stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:6px 12px;color:#fff;font-size:10px;font-weight:600}
.stat span{color:#63ddff;font-size:14px;font-weight:900;display:block}

/* أدوات AI */
.tools-bar{background:#0c1228;border-bottom:2px solid rgba(99,221,255,.45);padding:12px 16px;text-align:center}
.tools-bar p{font-size:11px;color:#63ddff;margin-bottom:10px;font-weight:600}
.tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.tool-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1.5px solid rgba(99,221,255,.45);background:#0c1228;font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;color:#63ddff;-webkit-tap-highlight-color:transparent}
.tool-btn.gpt{border-color:rgba(99,221,255,.45);color:#63ddff}
.tool-btn.gpt:hover{background:#2f6df0;color:#fff}
.tool-btn.claude{border-color:rgba(242,193,78,.55);color:#f2c14e}
.tool-btn.claude:hover{background:#c28a1a;color:#fff}
.tool-btn.gemini{border-color:rgba(99,221,255,.45);color:#63ddff}
.tool-btn.gemini:hover{background:#2f6df0;color:#fff}
.tool-btn.copilot{border-color:rgba(99,221,255,.45);color:#63ddff}
.tool-btn.copilot:hover{background:#2f6df0;color:#fff}
.tool-btn svg{flex-shrink:0}

/* كيفية الاستخدام */
.how{background:#0c1228;border:1.5px solid rgba(99,221,255,.45);border-radius:14px;padding:18px;margin:16px}
.how h3{font-size:13px;font-weight:800;color:#63ddff;margin-bottom:12px}
.steps{display:flex;flex-direction:column;gap:8px}
.step{display:flex;align-items:flex-start;gap:10px;background:#0d2145;border-radius:10px;padding:11px}
.snum{background:#0d2145;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;margin-top:2px}
.stxt{font-size:11px;color:#e9efff;line-height:1.75;flex:1}
.stxt strong{color:#63ddff;display:block;margin-bottom:2px;font-size:12px}

/* كيفية إرفاق المحتوى */
.attach-box{background:linear-gradient(135deg,rgba(75,58,110,.04),rgba(13,181,181,.03));border:1.5px solid rgba(99,221,255,.45);border-radius:14px;padding:18px;margin:0 16px 16px}
.attach-box h3{font-size:13px;font-weight:800;color:#63ddff;margin-bottom:12px}
.mc{background:#0c1228;border-radius:10px;padding:12px;margin-bottom:8px;border-right:3px solid rgba(99,221,255,.45)}
.mc-t{font-size:12px;font-weight:800;color:#63ddff;margin-bottom:5px}
.mc-b{font-size:11px;color:#e9efff;line-height:1.8}
.cs{background:#0d2145;border-right:3px solid rgba(99,221,255,.45);padding:6px 10px;border-radius:6px;font-size:10px;margin-top:6px;line-height:1.7;color:#63ddff}
.tip{background:#0d2145;border-radius:6px;padding:7px 10px;margin-top:7px;font-size:10px;color:#63ddff;font-weight:600}

/* NAV */
.nav{background:#0c1228;border-bottom:2px solid rgba(99,221,255,.45);position:sticky;top:0;z-index:99;box-shadow:0 2px 10px rgba(75,58,110,.08)}
.nav-i{display:flex;gap:6px;overflow-x:auto;padding:10px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-i::-webkit-scrollbar{display:none}
.nb{flex-shrink:0;padding:8px 13px;border-radius:20px;border:1.5px solid rgba(99,221,255,.45);background:transparent;color:#e9efff;font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent}
.nb.on{background:#0d2145;border-color:rgba(99,221,255,.45);color:#fff}

/* MAIN */
.main{max-width:820px;margin:0 auto;padding:16px 14px 60px}
.sec{margin-bottom:36px}
.sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid rgba(99,221,255,.45)}
.sec-ico{width:38px;height:38px;border-radius:10px;background:#0d2145;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.sec-ttl{font-size:15px;font-weight:800;color:#63ddff}
.sec-sub{font-size:10px;color:#63ddff;font-weight:500}
.sec-cnt{margin-right:auto;background:#0d2145;color:#fff;font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}

/* CARD */
.pc{background:#0c1228;border:1.5px solid rgba(99,221,255,.45);border-radius:12px;padding:14px;margin-bottom:10px;transition:border-color .2s}
.pc:hover{border-color:rgba(99,221,255,.45)}
.pn{font-size:9px;font-weight:700;color:#63ddff;margin-bottom:7px;display:flex;align-items:center;gap:5px}
.pn::after{content:'';flex:1;height:1px;background:#0d2145}

/* أدوات البرومبت */
.ptools{display:flex;gap:5px;margin-bottom:8px;flex-wrap:wrap}
.ptool{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:700;padding:3px 8px;border-radius:6px;border:1px solid}
.ptool.gpt{background:rgba(16,163,127,.07);color:#63ddff;border-color:rgba(16,163,127,.25)}
.ptool.claude{background:rgba(217,119,6,.07);color:#f2c14e;border-color:rgba(217,119,6,.25)}
.ptool.gemini{background:rgba(66,133,244,.07);color:#63ddff;border-color:rgba(66,133,244,.25)}
.ptool.copilot{background:rgba(0,120,212,.07);color:#63ddff;border-color:rgba(0,120,212,.25)}
.ptool.lvl{background:rgba(13,181,181,.07);color:#63ddff;border-color:rgba(13,181,181,.2)}

/* نص البرومبت */
.pt{font-size:12px;font-weight:600;color:#63ddff;background:#0d2145;border-right:3px solid rgba(99,221,255,.45);padding:10px 12px;border-radius:8px;line-height:1.9;margin-bottom:9px;word-break:break-word}

/* ملاحظة الإرفاق */
.attach-note{display:flex;align-items:center;gap:6px;background:#0d2145;border-radius:8px;padding:8px 11px;margin-bottom:10px;font-size:10px;color:#63ddff;font-weight:600}
.attach-note span{font-size:14px}

/* زر النسخ */
.cb{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border-radius:8px;border:1.5px solid rgba(99,221,255,.45);background:transparent;color:#63ddff;font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;font-size:12px;font-weight:700;cursor:pointer;min-height:42px;-webkit-tap-highlight-color:transparent;transition:all .2s}
.cb.ok{background:#2f6df0;border-color:#222c55;color:#fff}

/* FOOTER */
.ftr{background:#0d2145;color:rgba(255,255,255,.7);text-align:center;padding:22px 16px}
.ftr-l{display:flex;justify-content:center;margin-bottom:10px}
.ftr-l img{height:30px}
.ftr p{font-size:11px;margin-bottom:3px}

@media(max-width:480px){
  .hdr h1{font-size:16px}
  .tools{gap:6px}
  .tool-btn{padding:7px 10px;font-size:10px}
}


/* قيم style المضمّنة سابقًا (منقولة لأن CSP تمنع style داخل الصفحة) */
[data-s="1"] { margin:16px; }
[data-s="2"] { color:#63ddff; }
[data-s="3"] { margin-top:6px;font-size:10px; }
[data-s="4"] { font-size:11px;color:#63ddff;background:#0c1228;border-radius:8px;padding:8px 11px;margin-bottom:10px;line-height:1.75; }
[data-s="5"] { display:block;margin-bottom:3px;font-size:9px; }


/* ===== إضافات تطوير الصفحة: بحث وتبويبات فعلية ===== */
.pt{white-space:pre-line;font-weight:500}
.sec[hidden],.pc[hidden],.qempty[hidden]{display:none}
.sec-ttl{margin:0}
.srch{margin-bottom:16px}
.srch-l{display:block;font-size:11px;font-weight:700;color:#63ddff;margin-bottom:6px}
.srch-i{width:100%;min-height:44px;padding:10px 14px;border-radius:10px;border:1.5px solid rgba(99,221,255,.45);background:#0c1228;color:#e9efff;font-family:inherit;font-size:16px;-webkit-user-select:text;user-select:text}
.srch-i::placeholder{color:#9aa8c7}
.srch-i:focus{outline:2px solid #63ddff;outline-offset:2px}
.srch-c{font-size:11px;color:#9aa8c7;margin-top:6px;min-height:16px}
.qempty{padding:20px;text-align:center;color:#9aa8c7;font-size:12px;background:#0c1228;border-radius:12px;border:1.5px dashed rgba(99,221,255,.35);margin-bottom:16px}
.nb:focus-visible,.cb:focus-visible,.tool-btn:focus-visible{outline:2px solid #63ddff;outline-offset:2px}
.cp-fb{position:fixed;top:0;left:0;opacity:0;font-size:16px}
.pex{font-size:11px;color:#63ddff;background:#0c1228;border-radius:8px;padding:8px 11px;margin-bottom:10px;line-height:1.75}
.pex strong{display:block;margin-bottom:3px;font-size:9px}
.sec-cnt{white-space:nowrap}
@media(max-width:480px){.sec-ttl{font-size:14px}.sec-hdr{flex-wrap:wrap}}